build: release v6.168.0

CHANGELOG.md

@@ -4,13 +4,30 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v6.168.0](https://github.com/opengovsg/FormSG/compare/v6.168.0...v6.168.0)
+
+- fix: search fields drag and drop mismatch [`#7972`](https://github.com/opengovsg/FormSG/pull/7972)
+
+#### [v6.168.0](https://github.com/opengovsg/FormSG/compare/v6.167.0...v6.168.0)
+
+> 3 December 2024
+
+- build: merge release v6.167.0 to develop [`#7964`](https://github.com/opengovsg/FormSG/pull/7964)
+- feat: implement field search functionality  [`#7958`](https://github.com/opengovsg/FormSG/pull/7958)
+- feat(mrf be validation): enable mrf response validation hard block [`#7963`](https://github.com/opengovsg/FormSG/pull/7963)
+- build: release v6.167.0 [`#7962`](https://github.com/opengovsg/FormSG/pull/7962)
+- chore: bump version to v6.168.0 [`c69a28b`](https://github.com/opengovsg/FormSG/commit/c69a28b58d1e7f3f8faeb58624f408b830d115f7)
+
 #### [v6.167.0](https://github.com/opengovsg/FormSG/compare/v6.166.1...v6.167.0)
 
+> 2 December 2024
+
 - build: merge release v6.166.1 to develop [`#7961`](https://github.com/opengovsg/FormSG/pull/7961)
 - feat(twilio): remove twilio be [`#7870`](https://github.com/opengovsg/FormSG/pull/7870)
 - feat: update form create modal response options [`#7957`](https://github.com/opengovsg/FormSG/pull/7957)
 - chore: include latest features in whats new page [`#7956`](https://github.com/opengovsg/FormSG/pull/7956)
 - build: release v6.166.1 [`#7950`](https://github.com/opengovsg/FormSG/pull/7950)
+- chore: bump version to v6.167.0 [`9f97c52`](https://github.com/opengovsg/FormSG/commit/9f97c52fa05aa990beb143139ef36b027e0b3874)
 
 #### [v6.166.1](https://github.com/opengovsg/FormSG/compare/v6.166.0...v6.166.1)
 

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-frontend",
-  "version": "6.167.0",
+  "version": "6.168.0",
   "homepage": ".",
   "type": "module",
   "private": true,

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Box,
@@ -23,11 +24,13 @@ import {
   MyInfoFieldPanel,
   PaymentsInputPanel,
 } from './field-panels'
+import { FieldSearchBar } from './FieldSearchBar'
 
 export const FieldListDrawer = (): JSX.Element => {
   const { t } = useTranslation()
   const { fieldListTabIndex, setFieldListTabIndex } = useCreatePageSidebar()
   const { isLoading } = useCreateTabForm()
+  const [searchValue, setSearchValue] = useState('')
 
   const tabsDataList = [
     {
@@ -51,7 +54,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 +78,11 @@ export const FieldListDrawer = (): JSX.Element => {
           </Text>
           <CreatePageDrawerCloseButton />
         </Flex>
-        <TabList mx="-0.25rem" w="100%">
+        <FieldSearchBar
+          searchValue={searchValue}
+          onChange={(e) => setSearchValue(e.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 +94,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>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldSearchBar.tsx

@@ -0,0 +1,21 @@
+import { BiSearch } from 'react-icons/bi'
+import { Icon, Input, InputGroup, InputLeftElement } from '@chakra-ui/react'
+
+export 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>
+)

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/BasicFieldPanel.tsx

@@ -5,32 +5,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'
+import { filterFieldsBySearchValue } from './utils'
 
-export const BasicFieldPanel = () => {
+export const BasicFieldPanel = ({ searchValue }: { searchValue: string }) => {
   const { isLoading } = useCreateTabForm()
 
+  const filteredCreateBasicFields = filterFieldsBySearchValue(
+    searchValue,
+    BASIC_FIELDS_ORDERED,
+    BASICFIELD_TO_DRAWER_META,
+  )
+
   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, originalIndex }) => {
+                const shouldDisableField = isLoading
+                return (
+                  <DraggableBasicFieldListOption
+                    index={originalIndex}
+                    isDisabled={shouldDisableField}
+                    key={originalIndex}
+                    fieldType={fieldType}
+                  />
+                )
+              })}
+            </FieldSection>
             <Box display="none">{provided.placeholder}</Box>
           </FieldSection>
         </Box>