From 13d2bd3a7a859b3242cd2654ca05a8fe8feacfa5 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Fri, 29 Nov 2024 23:11:09 +0800
Subject: [PATCH 1/3] feat: implement search functionality

---
 .../FieldListDrawer/FieldListDrawer.tsx       |  41 ++++-
 .../field-panels/BasicFieldPanel.tsx          |  36 ++--
 .../field-panels/MyInfoPanel.tsx              | 156 ++++++++++++------
 3 files changed, 162 insertions(+), 71 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
index 1a767c7924..73d31c1749 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
@@ -1,8 +1,14 @@
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { BiSearch } from 'react-icons/bi'
 import {
   Box,
   Divider,
   Flex,
+  Icon,
+  Input,
+  InputGroup,
+  InputLeftElement,
   TabList,
   TabPanel,
   TabPanels,
@@ -24,10 +30,30 @@ import {
   PaymentsInputPanel,
 } from './field-panels'
 
+const FieldSearchBar = ({
+  searchValue,
+  onChange,
+}: {
+  searchValue: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+}) => (
+  <InputGroup>
+    <InputLeftElement>
+      <Icon as={BiSearch} color="secondary.500" fontSize="1.25rem" />
+    </InputLeftElement>
+    <Input
+      value={searchValue}
+      onChange={onChange}
+      placeholder="Search fields"
+    />
+  </InputGroup>
+)
+
 export const FieldListDrawer = (): JSX.Element => {
   const { t } = useTranslation()
   const { fieldListTabIndex, setFieldListTabIndex } = useCreatePageSidebar()
   const { isLoading } = useCreateTabForm()
+  const [searchValue, setSearchValue] = useState('')
 
   const tabsDataList = [
     {
@@ -51,7 +77,12 @@ export const FieldListDrawer = (): JSX.Element => {
       isDisabled: isLoading,
       key: FieldListTabIndex.Payments,
     },
-  ].filter((tab) => !tab.isHidden)
+  ].filter((tab) => !tab.isHidden) as {
+    header: string
+    component: (props: { searchValue?: string }) => JSX.Element
+    isDisabled: boolean
+    key: FieldListTabIndex
+  }[]
 
   return (
     <Tabs
@@ -70,7 +101,11 @@ export const FieldListDrawer = (): JSX.Element => {
           </Text>
           <CreatePageDrawerCloseButton />
         </Flex>
-        <TabList mx="-0.25rem" w="100%">
+        <FieldSearchBar
+          searchValue={searchValue}
+          onChange={(val) => setSearchValue(val.target.value)}
+        />
+        <TabList mt="0.5rem" mx="-0.25rem" w="100%">
           {tabsDataList.map((tab) => (
             <Tab key={tab.key} isDisabled={tab.isDisabled}>
               {tab.header}
@@ -82,7 +117,7 @@ export const FieldListDrawer = (): JSX.Element => {
       <TabPanels pb="1rem" flex={1} overflowY="auto">
         {tabsDataList.map((tab) => (
           <TabPanel key={tab.key}>
-            <tab.component />
+            <tab.component searchValue={searchValue} />
           </TabPanel>
         ))}
       </TabPanels>
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/BasicFieldPanel.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/BasicFieldPanel.tsx
index be4cc78c6c..fec3eb39bf 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/BasicFieldPanel.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/BasicFieldPanel.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { Box } from '@chakra-ui/react'
 import { Droppable } from '@hello-pangea/dnd'
 
@@ -5,32 +6,41 @@ import {
   BASIC_FIELDS_ORDERED,
   CREATE_FIELD_DROP_ID,
 } from '~features/admin-form/create/builder-and-design/constants'
+import { BASICFIELD_TO_DRAWER_META } from '~features/admin-form/create/constants'
 
 import { useCreateTabForm } from '../../../../builder-and-design/useCreateTabForm'
 import { DraggableBasicFieldListOption } from '../FieldListOption'
 
 import { FieldSection } from './FieldSection'
 
-export const BasicFieldPanel = () => {
+export const BasicFieldPanel = ({ searchValue }: { searchValue: string }) => {
   const { isLoading } = useCreateTabForm()
 
+  const filteredCreateBasicFields = useMemo(() => {
+    return BASIC_FIELDS_ORDERED.filter((fieldType) => {
+      const meta = BASICFIELD_TO_DRAWER_META[fieldType]
+      return meta.label.toLowerCase().includes(searchValue.toLowerCase())
+    })
+  }, [searchValue])
+
   return (
     <Droppable isDropDisabled droppableId={CREATE_FIELD_DROP_ID}>
       {(provided) => (
         <Box ref={provided.innerRef} {...provided.droppableProps}>
           <FieldSection>
-            {BASIC_FIELDS_ORDERED.map((fieldType, index) => {
-              const shouldDisableField = isLoading
-
-              return (
-                <DraggableBasicFieldListOption
-                  index={index}
-                  isDisabled={shouldDisableField}
-                  key={index}
-                  fieldType={fieldType}
-                />
-              )
-            })}
+            <FieldSection label="Basic">
+              {filteredCreateBasicFields.map((fieldType, index) => {
+                const shouldDisableField = isLoading
+                return (
+                  <DraggableBasicFieldListOption
+                    index={index}
+                    isDisabled={shouldDisableField}
+                    key={index}
+                    fieldType={fieldType}
+                  />
+                )
+              })}
+            </FieldSection>
             <Box display="none">{provided.placeholder}</Box>
           </FieldSection>
         </Box>
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/MyInfoPanel.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/MyInfoPanel.tsx
index f45cf447fd..5d160641c7 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/MyInfoPanel.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/MyInfoPanel.tsx
@@ -28,6 +28,7 @@ import {
   CREATE_MYINFO_PERSONAL_DROP_ID,
   CREATE_MYINFO_PERSONAL_FIELDS_ORDERED,
 } from '~features/admin-form/create/builder-and-design/constants'
+import { MYINFO_FIELD_TO_DRAWER_META } from '~features/admin-form/create/constants'
 import { isMyInfo } from '~features/myinfo/utils'
 import { useUser } from '~features/user/queries'
 
@@ -70,7 +71,7 @@ const SGID_SUPPORTED_V2 = [
   MyInfoAttribute.DivorceDate,
 ]
 
-export const MyInfoFieldPanel = () => {
+export const MyInfoFieldPanel = ({ searchValue }: { searchValue: string }) => {
   const { data: form, isLoading } = useCreateTabForm()
 
   const { user } = useUser()
@@ -125,22 +126,59 @@ export const MyInfoFieldPanel = () => {
     [form, isDisabled, sgIDUnSupported],
   )
 
+  const filteredCreateMyInfoPersonalFields = useMemo(() => {
+    return CREATE_MYINFO_PERSONAL_FIELDS_ORDERED.filter((fieldType) => {
+      const meta = MYINFO_FIELD_TO_DRAWER_META[fieldType]
+      return meta.label.toLowerCase().includes(searchValue.toLowerCase())
+    })
+  }, [searchValue])
+
+  const filteredCreateMyInfoContactFields = useMemo(() => {
+    return CREATE_MYINFO_CONTACT_FIELDS_ORDERED.filter((fieldType) => {
+      const meta = MYINFO_FIELD_TO_DRAWER_META[fieldType]
+      return meta.label.toLowerCase().includes(searchValue.toLowerCase())
+    })
+  }, [searchValue])
+
+  const filteredCreateMyInfoParticularsFields = useMemo(() => {
+    return CREATE_MYINFO_PARTICULARS_FIELDS_ORDERED.filter((fieldType) => {
+      const meta = MYINFO_FIELD_TO_DRAWER_META[fieldType]
+      return meta.label.toLowerCase().includes(searchValue.toLowerCase())
+    })
+  }, [searchValue])
+
+  const filteredCreateMyInfoMarriageFields = useMemo(() => {
+    return CREATE_MYINFO_MARRIAGE_FIELDS_ORDERED.filter((fieldType) => {
+      const meta = MYINFO_FIELD_TO_DRAWER_META[fieldType]
+      return meta.label.toLowerCase().includes(searchValue.toLowerCase())
+    })
+  }, [searchValue])
+
+  const filteredCreateMyInfoChildrenFields = useMemo(() => {
+    return CREATE_MYINFO_CHILDREN_FIELDS_ORDERED.filter((fieldType) => {
+      const meta = MYINFO_FIELD_TO_DRAWER_META[fieldType]
+      return meta.label.toLowerCase().includes(searchValue.toLowerCase())
+    })
+  }, [searchValue])
+
   return (
     <>
       <MyInfoMessage />
       <Droppable isDropDisabled droppableId={CREATE_MYINFO_PERSONAL_DROP_ID}>
         {(provided) => (
           <Box ref={provided.innerRef} {...provided.droppableProps}>
-            <FieldSection label="Personal">
-              {CREATE_MYINFO_PERSONAL_FIELDS_ORDERED.map((fieldType, index) => (
-                <DraggableMyInfoFieldListOption
-                  index={index}
-                  isDisabled={isDisabledCheck(fieldType)}
-                  key={index}
-                  fieldType={fieldType}
-                />
-              ))}
-            </FieldSection>
+            {filteredCreateMyInfoPersonalFields.length > 0 && (
+              <FieldSection label="Personal">
+                {filteredCreateMyInfoPersonalFields.map((fieldType, index) => (
+                  <DraggableMyInfoFieldListOption
+                    index={index}
+                    isDisabled={isDisabledCheck(fieldType)}
+                    key={index}
+                    fieldType={fieldType}
+                  />
+                ))}
+              </FieldSection>
+            )}
             <Box display="none">{provided.placeholder}</Box>
           </Box>
         )}
@@ -148,16 +186,18 @@ export const MyInfoFieldPanel = () => {
       <Droppable isDropDisabled droppableId={CREATE_MYINFO_CONTACT_DROP_ID}>
         {(provided) => (
           <Box ref={provided.innerRef} {...provided.droppableProps}>
-            <FieldSection label="Contact">
-              {CREATE_MYINFO_CONTACT_FIELDS_ORDERED.map((fieldType, index) => (
-                <DraggableMyInfoFieldListOption
-                  index={index}
-                  isDisabled={isDisabledCheck(fieldType)}
-                  key={index}
-                  fieldType={fieldType}
-                />
-              ))}
-            </FieldSection>
+            {filteredCreateMyInfoContactFields.length > 0 && (
+              <FieldSection label="Contact">
+                {filteredCreateMyInfoContactFields.map((fieldType, index) => (
+                  <DraggableMyInfoFieldListOption
+                    index={index}
+                    isDisabled={isDisabledCheck(fieldType)}
+                    key={index}
+                    fieldType={fieldType}
+                  />
+                ))}
+              </FieldSection>
+            )}
             <Box display="none">{provided.placeholder}</Box>
           </Box>
         )}
@@ -165,18 +205,20 @@ export const MyInfoFieldPanel = () => {
       <Droppable isDropDisabled droppableId={CREATE_MYINFO_PARTICULARS_DROP_ID}>
         {(provided) => (
           <Box ref={provided.innerRef} {...provided.droppableProps}>
-            <FieldSection label="Particulars">
-              {CREATE_MYINFO_PARTICULARS_FIELDS_ORDERED.map(
-                (fieldType, index) => (
-                  <DraggableMyInfoFieldListOption
-                    index={index}
-                    isDisabled={isDisabledCheck(fieldType)}
-                    key={index}
-                    fieldType={fieldType}
-                  />
-                ),
-              )}
-            </FieldSection>
+            {filteredCreateMyInfoParticularsFields.length > 0 && (
+              <FieldSection label="Particulars">
+                {filteredCreateMyInfoParticularsFields.map(
+                  (fieldType, index) => (
+                    <DraggableMyInfoFieldListOption
+                      index={index}
+                      isDisabled={isDisabledCheck(fieldType)}
+                      key={index}
+                      fieldType={fieldType}
+                    />
+                  ),
+                )}
+              </FieldSection>
+            )}
             <Box display="none">{provided.placeholder}</Box>
           </Box>
         )}
@@ -184,16 +226,18 @@ export const MyInfoFieldPanel = () => {
       <Droppable isDropDisabled droppableId={CREATE_MYINFO_MARRIAGE_DROP_ID}>
         {(provided) => (
           <Box ref={provided.innerRef} {...provided.droppableProps}>
-            <FieldSection label="Family (Marriage)">
-              {CREATE_MYINFO_MARRIAGE_FIELDS_ORDERED.map((fieldType, index) => (
-                <DraggableMyInfoFieldListOption
-                  index={index}
-                  isDisabled={isDisabledCheck(fieldType)}
-                  key={index}
-                  fieldType={fieldType}
-                />
-              ))}
-            </FieldSection>
+            {filteredCreateMyInfoMarriageFields.length > 0 && (
+              <FieldSection label="Family (Marriage)">
+                {filteredCreateMyInfoMarriageFields.map((fieldType, index) => (
+                  <DraggableMyInfoFieldListOption
+                    index={index}
+                    isDisabled={isDisabledCheck(fieldType)}
+                    key={index}
+                    fieldType={fieldType}
+                  />
+                ))}
+              </FieldSection>
+            )}
             <Box display="none">{provided.placeholder}</Box>
           </Box>
         )}
@@ -203,18 +247,20 @@ export const MyInfoFieldPanel = () => {
         <Droppable isDropDisabled droppableId={CREATE_MYINFO_CHILDREN_DROP_ID}>
           {(provided) => (
             <Box ref={provided.innerRef} {...provided.droppableProps}>
-              <FieldSection label="Family (Children)">
-                {CREATE_MYINFO_CHILDREN_FIELDS_ORDERED.map(
-                  (fieldType, index) => (
-                    <DraggableMyInfoFieldListOption
-                      index={index}
-                      isDisabled={isDisabledCheck(fieldType)}
-                      key={index}
-                      fieldType={fieldType}
-                    />
-                  ),
-                )}
-              </FieldSection>
+              {filteredCreateMyInfoChildrenFields.length > 0 && (
+                <FieldSection label="Family (Children)">
+                  {filteredCreateMyInfoChildrenFields.map(
+                    (fieldType, index) => (
+                      <DraggableMyInfoFieldListOption
+                        index={index}
+                        isDisabled={isDisabledCheck(fieldType)}
+                        key={index}
+                        fieldType={fieldType}
+                      />
+                    ),
+                  )}
+                </FieldSection>
+              )}
               <Box display="none">{provided.placeholder}</Box>
             </Box>
           )}

From 94b1c795617d6480b45b755e1cdd75fef0fc633d Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Fri, 29 Nov 2024 23:34:12 +0800
Subject: [PATCH 2/3] feat: add mfb button beside search bar

---
 .../FieldListDrawer/FieldListDrawer.tsx       | 43 ++++++++++++++-----
 1 file changed, 32 insertions(+), 11 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
index 73d31c1749..2fd9cb5730 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
@@ -1,8 +1,9 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { BiSearch } from 'react-icons/bi'
+import { BiSearch, BiSolidMagicWand } from 'react-icons/bi'
 import {
   Box,
+  Button,
   Divider,
   Flex,
   Icon,
@@ -14,6 +15,7 @@ import {
   TabPanels,
   Tabs,
   Text,
+  Tooltip,
 } from '@chakra-ui/react'
 
 import { Tab } from '~components/Tabs'
@@ -30,6 +32,22 @@ import {
   PaymentsInputPanel,
 } from './field-panels'
 
+const MagicFormBuilderButton = ({ ...styleProps }) => (
+  <Tooltip openDelay={800} hasArrow label="Create fields with AI">
+    <Button
+      padding="0"
+      backgroundColor="primary.200"
+      _hover={{
+        backgroundColor: 'primary.300',
+      }}
+      borderWidth={0}
+      {...styleProps}
+    >
+      <Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
+    </Button>
+  </Tooltip>
+)
+
 const FieldSearchBar = ({
   searchValue,
   onChange,
@@ -37,16 +55,19 @@ const FieldSearchBar = ({
   searchValue: string
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
 }) => (
-  <InputGroup>
-    <InputLeftElement>
-      <Icon as={BiSearch} color="secondary.500" fontSize="1.25rem" />
-    </InputLeftElement>
-    <Input
-      value={searchValue}
-      onChange={onChange}
-      placeholder="Search fields"
-    />
-  </InputGroup>
+  <>
+    <InputGroup>
+      <InputLeftElement>
+        <Icon as={BiSearch} color="secondary.500" fontSize="1.25rem" />
+      </InputLeftElement>
+      <Input
+        value={searchValue}
+        onChange={onChange}
+        placeholder="Search fields"
+      />
+      <MagicFormBuilderButton ml="0.5rem" />
+    </InputGroup>
+  </>
 )
 
 export const FieldListDrawer = (): JSX.Element => {

From 6187c37afc8182d1313511ffb2b8ccd2838bcd1d Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Fri, 29 Nov 2024 23:43:49 +0800
Subject: [PATCH 3/3] fix: disable support for mfb for mobile

---
 .../FieldListDrawer/FieldListDrawer.tsx       | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
index 2fd9cb5730..22c85b0c73 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
@@ -18,6 +18,7 @@ import {
   Tooltip,
 } from '@chakra-ui/react'
 
+import { useIsMobile } from '~hooks/useIsMobile'
 import { Tab } from '~components/Tabs'
 
 import { useCreatePageSidebar } from '~features/admin-form/create/common/CreatePageSidebarContext'
@@ -32,21 +33,24 @@ import {
   PaymentsInputPanel,
 } from './field-panels'
 
-const MagicFormBuilderButton = ({ ...styleProps }) => (
-  <Tooltip openDelay={800} hasArrow label="Create fields with AI">
-    <Button
-      padding="0"
-      backgroundColor="primary.200"
-      _hover={{
-        backgroundColor: 'primary.300',
-      }}
-      borderWidth={0}
-      {...styleProps}
-    >
-      <Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
-    </Button>
-  </Tooltip>
-)
+const MagicFormBuilderButton = ({ ...styleProps }) => {
+  const isMobile = useIsMobile()
+  return !isMobile ? (
+    <Tooltip openDelay={800} hasArrow label="Create fields with AI">
+      <Button
+        padding="0"
+        backgroundColor="primary.200"
+        _hover={{
+          backgroundColor: 'primary.300',
+        }}
+        borderWidth={0}
+        {...styleProps}
+      >
+        <Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
+      </Button>
+    </Tooltip>
+  ) : null
+}
 
 const FieldSearchBar = ({
   searchValue,