Create Test button for function nodes

src/components/ModalsContainer/CreateBountyModal/Body/index.tsx

@@ -0,0 +1,60 @@
+import { FormProvider, useForm } from 'react-hook-form'
+import { useModal } from '~/stores/useModalStore'
+import { useSelectedNode } from '~/stores/useGraphStore'
+import { postBountyData } from '~/network/postBounty'
+import { useState } from 'react'
+import * as React from 'react'
+import { CreateBounty } from '../CreateBounty'
+
+export type FormData = {
+  nodeType: string
+  budget: string
+} & Partial<{ [k: string]: string }>
+
+export const Body = () => {
+  const [errMessage, setErrMessage] = useState<string>('')
+  const { close } = useModal('createBounty')
+  const selectedNode = useSelectedNode()
+  const form = useForm<FormData>({ mode: 'onChange' })
+  const { handleSubmit, setValue } = form
+
+  const handleClose = () => {
+    setValue('budget', '')
+    setValue('nodeType', '')
+    close()
+  }
+
+  const onSubmit = async (data: FormData) => {
+    const { budget, nodeType } = data
+
+    const nodeData = { name: nodeType }
+
+    const payload = {
+      type: 'code_generation',
+      amount: Number(budget),
+      workspace_uuid: 'ck9drb84nncjnaefo090',
+      jwt_token: null,
+      ref_id: selectedNode?.ref_id as string,
+      node_data: nodeData,
+    }
+
+    try {
+      await postBountyData(payload)
+      // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      setErrMessage(err)
+    } finally {
+      setValue('budget', '')
+      setValue('nodeType', '')
+      handleClose()
+    }
+  }
+
+  return (
+    <FormProvider {...form}>
+      <form id="create-bounty-form" onSubmit={handleSubmit(onSubmit)}>
+        <CreateBounty errMessage={errMessage} handleClose={handleClose} />
+      </form>
+    </FormProvider>
+  )
+}

src/components/ModalsContainer/CreateBountyModal/CreateBounty/index.tsx

@@ -0,0 +1,98 @@
+import { Button } from '@mui/material'
+import { FC } from 'react'
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
+import { useFormContext } from 'react-hook-form'
+import { TextInput } from '~/components/common/TextInput'
+import { AutoComplete, TAutocompleteOption } from '~/components/common/AutoComplete'
+import { requiredRule } from '~/constants'
+
+type Props = {
+  errMessage: string
+  handleClose: () => void
+}
+
+export const CreateBounty: FC<Props> = ({ errMessage, handleClose }) => {
+  const { setValue, watch } = useFormContext()
+
+  const watchBudget = watch('budget', '')
+  const watchNodeType = watch('nodeType', '')
+
+  const onSelect = (val: TAutocompleteOption | null) => {
+    const selectedValue = val?.label || 'SecondBrain'
+
+    setValue('nodeType', selectedValue, { shouldValidate: true })
+  }
+
+  const options = [{ label: 'SecondBrain', value: 'SecondBrain' }]
+
+  const isDisable = !!(watchBudget && watchNodeType)
+
+  return (
+    <Flex>
+      <Flex align="center" direction="row" justify="space-between" mb={18}>
+        <StyledHeadingText>Create Bounty</StyledHeadingText>
+      </Flex>
+
+      <Flex mb={20}>
+        <StyledText>Select Workspace</StyledText>
+        <AutoComplete autoFocus onSelect={onSelect} options={options} />
+      </Flex>
+
+      <Flex mb={20}>
+        <StyledText>Set Budget</StyledText>
+        <TextInput
+          id="budget"
+          name="budget"
+          placeholder="Enter budget"
+          rules={{
+            ...requiredRule,
+            pattern: {
+              value: /^[0-9]+$/,
+              message: 'Please enter a valid number',
+            },
+          }}
+          value={watchBudget}
+        />
+      </Flex>
+
+      <Flex direction="row">
+        <Flex grow={1}>
+          <Button color="secondary" onClick={() => handleClose()} size="large" variant="contained">
+            Cancel
+          </Button>
+        </Flex>
+        <Flex grow={1} ml={20}>
+          <Button color="secondary" disabled={!isDisable} size="large" type="submit" variant="contained">
+            Confirm
+          </Button>
+        </Flex>
+      </Flex>
+      {errMessage && <StyledError>{errMessage}</StyledError>}
+    </Flex>
+  )
+}
+
+const StyledText = styled(Text)`
+  font-size: 14px;
+  font-weight: 600;
+  font-family: 'Barlow';
+  margin-bottom: 6px;
+`
+
+const StyledHeadingText = styled(Text)`
+  font-size: 18px;
+  font-weight: 600;
+  font-family: 'Barlow';
+  margin-bottom: 6px;
+`
+
+const StyledError = styled(Flex)`
+  font-size: 13px;
+  font-family: Barlow;
+  color: #ff8f80;
+  line-height: 0.2px;
+  margin-top: 12px;
+  padding-top: 20px;
+`

src/components/ModalsContainer/CreateBountyModal/index.tsx

@@ -0,0 +1,31 @@
+import { useForm } from 'react-hook-form'
+import { BaseModal, ModalKind } from '~/components/Modal'
+import { useModal } from '~/stores/useModalStore'
+import * as React from 'react'
+
+import { Body } from '~/components/ModalsContainer/CreateBountyModal/Body'
+
+export type FormData = {
+  nodeType: string
+  budget: string
+} & Partial<{ [k: string]: string }>
+
+export const CreateBountyModal = () => {
+  const { close } = useModal('createBounty')
+  const form = useForm<FormData>({ mode: 'onChange' })
+  const { setValue } = form
+
+  const handleClose = () => {
+    setValue('budget', '')
+    setValue('nodeType', '')
+    close()
+  }
+
+  const modalKind: ModalKind = 'small'
+
+  return (
+    <BaseModal id="createBounty" kind={modalKind} onClose={handleClose} preventOutsideClose>
+      <Body />
+    </BaseModal>
+  )
+}

src/components/ModalsContainer/index.tsx

@@ -42,6 +42,10 @@ const LazyUserFeedBackModal = lazy(() =>
   import('./UserFeedBackModal').then(({ UserFeedBackModal }) => ({ default: UserFeedBackModal })),
 )
 
+const LazyCreateBountyModal = lazy(() =>
+  import('./CreateBountyModal').then(({ CreateBountyModal }) => ({ default: CreateBountyModal })),
+)
+
 export const ModalsContainer = () => (
   <>
     <LazyAddItemModal />
@@ -55,5 +59,6 @@ export const ModalsContainer = () => (
     <LazyBlueprintModal />
     <LazyMergeNodeModal />
     <LazyUserFeedBackModal />
+    <LazyCreateBountyModal />
   </>
 )

src/components/Universe/Graph/UI/NodeControls/index.tsx

@@ -32,6 +32,7 @@
   const { open: openEditNodeNameModal } = useModal('editNodeName')
   const { open: addEdgeToNodeModal } = useModal('addEdgeToNode')
   const { open: mergeTopicModal } = useModal('mergeToNode')
+  const { open: createBountyModal } = useModal('createBounty')
 
   const [isAdmin] = useUserStore((s) => [s.isAdmin])
   const [addNewNode] = useDataStore((s) => [s.addNewNode])
@@ -52,7 +53,7 @@
         }
       }
     } catch (error) {
       console.log(error)
     }
   }, [addNewNode, selectedNode?.ref_id, selectionGraphData.nodes.length])
 
@@ -163,6 +164,8 @@
 
   const id = open ? 'simple-popover' : undefined
 
+  const isShowCreateTestButton = !!(selectedNode && selectedNode?.node_type?.toLowerCase() === 'function')
+
   return (
     <group ref={ref}>
       <Html
@@ -194,6 +197,17 @@
           </IconButton>
         ))}
 
+        {isShowCreateTestButton && (
+          <CreateTestButton
+            left={2}
+            onClick={() => {
+              createBountyModal()
+            }}
+          >
+            Create Test
+          </CreateTestButton>
+        )}
+
         <PopoverWrapper
           anchorEl={anchorEl}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
@@ -289,3 +303,24 @@
     font-weight: 500;
   }
 `
+
+const CreateTestButton = styled.div<ButtonProps>`
+  position: fixed;
+  top: 40px;
+  left: ${(p: ButtonProps) => -53 + p.left}px;
+  width: 100px;
+  padding: 6px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${colors.createTestButton};
+  color: ${colors.black};
+  font-size: 14px;
+  font-family: Barlow;
+  font-weight: 600;
+  cursor: pointer;
+  &:hover {
+    transform: scale(1.05);
+  }
+`

src/network/postBounty/index.ts

@@ -0,0 +1,18 @@
+import { api } from '~/network/api'
+
+type BountyPayload = {
+  type: string
+  amount: number
+  workspace_uuid: string
+  jwt_token: string | null
+  ref_id: string
+  node_data: {
+    name: string
+  }
+}
+
+export const postBountyData = async (payload: BountyPayload) => {
+  const response = await api.post('/bounty', JSON.stringify(payload))
+
+  return response
+}

src/stores/useModalStore/index.ts

@@ -20,6 +20,7 @@ export type AvailableModals =
   | 'blueprintGraph'
   | 'changeNodeType'
   | 'feedback'
+  | 'createBounty'
 
 type ModalStore = {
   currentModals: Record<AvailableModals, boolean>
@@ -49,6 +50,7 @@ const defaultData = {
     blueprintGraph: false,
     changeNodeType: false,
     feedback: false,
+    createBounty: false,
   },
 }
 

src/utils/colors/index.tsx

@@ -102,6 +102,7 @@ export const colors = {
   COLLAPSE_BUTTON: 'rgba(48, 51, 66, 1)',
   SOURCE_TABLE_LINK: 'rgba(171, 204, 254, 1)',
   AI_HIGHLIGHT: 'rgba(0, 123, 255, 0.1)',
+  createTestButton: 'rgb(178, 255, 102)',
 } as const
 
 export type ColorName = keyof typeof colors