Merge pull request #2623 from MahtabBukhari/Add-Generate-Unit-Test-fo…

…r-Function-nodes-to-new-selection-view Add 'Generate Unit Test' for Function nodes to new selection view
stakwork · Jan 23, 2025 · 0950422 · 0950422
2 parents 78c6c61 + 2735c28
commit 0950422
Showing 1 changed file with 48 additions and 3 deletions.
diff --git a/src/components/Universe/Graph/Cubes/SelectionDataNodes/Node/index.tsx b/src/components/Universe/Graph/Cubes/SelectionDataNodes/Node/index.tsx
@@ -1,15 +1,15 @@
 import { Html } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
 import clsx from 'clsx'
-import { useRef } from 'react'
+import React, { useRef } from 'react'
 import styled from 'styled-components'
 import { Mesh, Vector3 } from 'three'
 import { Flex } from '~/components/common/Flex'
 import { Icons } from '~/components/Icons'
 import CloseIcon from '~/components/Icons/CloseIcon'
 import EditIcon from '~/components/Icons/EditIcon'
 import NodesIcon from '~/components/Icons/NodesIcon'
-import { useGraphStore } from '~/stores/useGraphStore'
+import { useGraphStore, useSelectedNode } from '~/stores/useGraphStore'
 import { useModal } from '~/stores/useModalStore'
 import { useSchemaStore } from '~/stores/useSchemaStore'
 import { useUserStore } from '~/stores/useUserStore'
@@ -32,10 +32,19 @@ type Props = {
   id: string
 }
 
+type ButtonProps = {
+  left: number
+  backgroundColor?: string
+  borderColor?: string
+  fontColor?: string
+}
+
 export const Node = ({ onClick, node, selected, rounded = true, x, y, z, id }: Props) => {
   const nodeRef = useRef<Mesh | null>(null)
   const [isAdmin] = useUserStore((s) => [s.isAdmin])
   const { open: openEditNodeNameModal } = useModal('editNodeName')
+  const { open: createBountyModal } = useModal('createBounty')
+  const selectedNode = useSelectedNode()
 
   const { normalizedSchemasByType, getNodeKeysByType } = useSchemaStore((s) => s)
   const setSelectedNode = useGraphStore((s) => s.setSelectedNode)
@@ -58,6 +67,8 @@ export const Node = ({ onClick, node, selected, rounded = true, x, y, z, id }: P
   const description = keyProperty !== 'description' ? node.properties?.description : ''
   const descriptionShortened = description ? truncateText(description, 60) : ''
 
+  const isShowCreateTestButton = !!(selectedNode && selectedNode?.node_type?.toLowerCase() === 'function')
+
   return (
     <mesh ref={nodeRef}>
       <Html center sprite zIndexRange={[0, 0]}>
@@ -89,6 +100,17 @@ export const Node = ({ onClick, node, selected, rounded = true, x, y, z, id }: P
                   <Text className="selected__title">{titleShortened}</Text>
                   {descriptionShortened ? <Text>{descriptionShortened}</Text> : null}
                 </Flex>
+
+                {isShowCreateTestButton && (
+                  <CreateTestButton
+                    left={2}
+                    onClick={() => {
+                      createBountyModal()
+                    }}
+                  >
+                    Generate Unit Test
+                  </CreateTestButton>
+                )}
               </Selected>
             ) : (
               <>
@@ -170,7 +192,8 @@ const Selected = styled(Tag)`
     top: 100%;
     transform: translateX(-50%) translateY(8px);
     margin-left: 0;
-    width: auto;
+    text-align: center;
+    width: 250px;
   }
 `
 
@@ -229,3 +252,25 @@ const Avatar = styled(Flex)<AvatarProps>`
   border-radius: ${({ radius }) => `${radius}`};
   font-size: 20px;
 `
+
+const CreateTestButton = styled.div<ButtonProps>`
+  position: absolute;
+  top: 170px;
+  left: ${(p: ButtonProps) => 30 + p.left}px;
+  width: 140px;
+  padding: 8px;
+  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;
+  z-index: 1002;
+  cursor: pointer;
+  &:hover {
+    transform: scale(1.05);
+  }
+`