[Graph Ontology]: Add Fuzzy Search to Ontology Modal for Schema Nodes

src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx

@@ -1,38 +1,71 @@
+import { useState } from 'react'
 import styled from 'styled-components'
+import { AutoComplete, TAutocompleteOption } from '~/components/common/AutoComplete'
 import { Flex } from '~/components/common/Flex'
 import ClearIcon from '~/components/Icons/ClearIcon'
 import FamilyHistoryIcon from '~/components/Icons/FamilyHistoryIcon'
+import SearchIcon from '~/components/Icons/SearchIcon'
+import { Schema } from '~/network/fetchSourcesData'
 import { colors } from '~/utils/colors'
 
 interface HeaderProps {
   onClose: () => void
   activeTab: 'all' | 'parent'
   setActiveTab: (tab: 'all' | 'parent') => void
+  onSchemaSelect: (schemaId: string) => void
+  schemas: Schema[]
 }
 
 interface TabProps {
   active: boolean
 }
 
-export const Header = ({ onClose, activeTab, setActiveTab }: HeaderProps) => (
-  <HeaderWrapper>
-    <IconWrapper>
-      <FamilyHistoryIcon />
-      <Title>Blueprint</Title>
-    </IconWrapper>
-    <TabsWrapper>
-      <Tab active={activeTab === 'all'} onClick={() => setActiveTab('all')}>
-        Show All
-      </Tab>
-      <Tab active={activeTab === 'parent'} onClick={() => setActiveTab('parent')}>
-        Parent Only
-      </Tab>
-    </TabsWrapper>
-    <CloseButton onClick={onClose}>
-      <ClearIcon />
-    </CloseButton>
-  </HeaderWrapper>
-)
+export const Header = ({ onClose, activeTab, setActiveTab, onSchemaSelect, schemas }: HeaderProps) => {
+  const [searchTerm, setSearchTerm] = useState('')
+
+  const searchOptions = schemas
+    .filter((schema): schema is Schema & { ref_id: string } => schema.ref_id !== undefined && schema.type !== undefined)
+    .map((schema) => ({
+      label: schema.type,
+      value: schema.ref_id,
+    }))
+
+  return (
+    <HeaderWrapper>
+      <IconWrapper>
+        <FamilyHistoryIcon />
+        <Title>Blueprint</Title>
+      </IconWrapper>
+
+      <SearchSection>
+        <StyledAutoComplete
+          handleInputChange={(value) => setSearchTerm(value)}
+          onSelect={(option: TAutocompleteOption | null) => {
+            if (option?.value) {
+              onSchemaSelect(option.value)
+            }
+          }}
+          options={searchOptions}
+          placeholder="Search"
+        />
+        <InputButton data-testid="search_action_icon">{searchTerm?.trim() ? null : <SearchIcon />}</InputButton>
+      </SearchSection>
+
+      <TabsWrapper>
+        <Tab active={activeTab === 'all'} onClick={() => setActiveTab('all')}>
+          Show All
+        </Tab>
+        <Tab active={activeTab === 'parent'} onClick={() => setActiveTab('parent')}>
+          Parent Only
+        </Tab>
+      </TabsWrapper>
+
+      <CloseButton onClick={onClose}>
+        <ClearIcon />
+      </CloseButton>
+    </HeaderWrapper>
+  )
+}
 
 const HeaderWrapper = styled(Flex)`
   background-color: ${colors.BG1};
@@ -43,6 +76,7 @@ const HeaderWrapper = styled(Flex)`
   justify-content: space-between;
   padding: 17px;
   border-bottom: 1px solid ${colors.black};
+  z-index: 2000;
 `
 
 const IconWrapper = styled.div`
@@ -66,6 +100,20 @@ const Title = styled.span`
   font-size: 22px;
 `
 
+const InputButton = styled(Flex).attrs({
+  align: 'center',
+  justify: 'center',
+  p: 5,
+})`
+  font-size: 32px;
+  color: ${colors.mainBottomIcons};
+  cursor: pointer;
+  transition-duration: 0.2s;
+  margin-left: -42px;
+  z-index: 2;
+  width: 30px;
+`
+
 const TabsWrapper = styled.div`
   display: flex;
   position: absolute;
@@ -106,3 +154,65 @@ const CloseButton = styled.div`
     height: 32px;
   }
 `
+
+const SearchSection = styled.div`
+  display: flex;
+  align-items: center;
+  width: 300px;
+  position: fixed;
+  transform: translateY(-6px);
+  margin-left: 11%;
+
+  &:has(.MuiTextField-root:focus-within) {
+    ${InputButton} {
+      color: ${colors.primaryBlue};
+    }
+  }
+`
+
+const StyledAutoComplete = styled(AutoComplete)`
+  .MuiTextField-root {
+    pointer-events: auto;
+    height: 40px !important;
+    z-index: 2;
+    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    color: #fff;
+    box-shadow: none;
+    border: none;
+    border-radius: 200px !important;
+    background: ${colors.BG2};
+
+    .MuiInput-input.MuiInputBase-input {
+      padding: 1px 40px 1px 18px;
+      height: 40px !important;
+
+      -webkit-autofill,
+      -webkit-autocomplete,
+      -webkit-contacts-auto-fill,
+      -webkit-credentials-auto-fill {
+        display: none !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+        position: absolute !important;
+        right: 0 !important;
+      }
+    }
+
+    &:focus-within {
+      outline: 1px solid ${colors.primaryBlue};
+    }
+
+    &:hover {
+      background: ${colors.black};
+    }
+
+    input::placeholder {
+      color: ${colors.GRAY7};
+    }
+
+    .MuiAutocomplete-endAdornment {
+      display: none;
+    }
+  }
+`

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

@@ -138,7 +138,15 @@ export const Body = ({ Close }: BodyProps) => {
   return (
     <>
       <Flex ml={-20} mr={-20} mt={-20}>
-        <Header activeTab={activeTab} onClose={Close} setActiveTab={setActiveTab} />
+        <Header
+          activeTab={activeTab}
+          onClose={Close}
+          onSchemaSelect={(schemaId) => {
+            setSelectedSchemaId(schemaId)
+          }}
+          schemas={schemas}
+          setActiveTab={setActiveTab}
+        />
       </Flex>
       <Flex align="stretch" direction="row" grow={1}>
         <Flex mb={-20} ml={-20}>