chore: add search bar and text highlight for choose app modal screen (#949)

## Details
- Add search bar for choose app modal screen to maintain functionality
as before
- Add text highlight and fuzzysearch based on singleselect

## After Screenshot


https://github.com/user-attachments/assets/eba28159-66a4-4f46-95ac-551edbecb6c9



## Tests
- Apps should be filtered and highlighted by either the name and
description
- Toolbox app actions should be filtered as well
- Choose trigger won't have the search bar

Author: m0nggh

packages/frontend/src/components/FlowStepConfigurationModal/ChooseAppAndEvent/ChooseApp.tsx

@@ -1,17 +1,26 @@
 import type { IAction, IApp, ITrigger } from '@plumber/types'
 
-import { useCallback, useContext, useMemo } from 'react'
-import { BiArrowFromRight, BiChevronRight } from 'react-icons/bi'
+import { useCallback, useContext, useMemo, useState } from 'react'
+import {
+  BiArrowFromRight,
+  BiChevronRight,
+  BiSearch,
+  BiSolidXCircle,
+} from 'react-icons/bi'
 import {
   Box,
   Flex,
   Icon,
   Image,
+  InputGroup,
+  InputLeftElement,
+  InputRightElement,
   ModalBody,
   ModalHeader,
   Text,
 } from '@chakra-ui/react'
-import { Badge, ModalCloseButton } from '@opengovsg/design-system-react'
+import { Badge, Input, ModalCloseButton } from '@opengovsg/design-system-react'
+import fuzzysort from 'fuzzysort'
 import { groupBy } from 'lodash'
 
 import { getAppActionFlag, getAppFlag } from '@/config/flags'
@@ -26,6 +35,7 @@ import {
 import { FlowStepConfigurationContext } from '../FlowStepConfigurationContext'
 
 import FeedbackFooter from './FeedbackFooter'
+import { HighlightedText } from './HighlightedText'
 import ToolboxEvent from './ToolboxEvent'
 
 const OTHERS_CATEGORY = 'Other'
@@ -45,6 +55,8 @@ export default function ChooseApp(props: ChooseAppProps) {
   const [_, isInitializingIfThen] = useIfThenInitializer()
   const isLoading = launchDarkly.isLoading || isInitializingIfThen
 
+  const [searchQuery, setSearchQuery] = useState('')
+
   const onSelectApp = useCallback(
     (app: IApp) => {
       patchModalState({
@@ -55,8 +67,19 @@ export default function ChooseApp(props: ChooseAppProps) {
     [patchModalState],
   )
 
+  const handleSelectOption = useCallback(
+    (app: IApp, singleTriggerOrAction: ITrigger | IAction | null) => {
+      if (singleTriggerOrAction) {
+        onSelectAppEvent(app, singleTriggerOrAction)
+      } else {
+        onSelectApp(app)
+      }
+    },
+    [onSelectApp, onSelectAppEvent],
+  )
+
   const isIfThenSelectable = useIsIfThenSelectable({ isLastStep })
-  const filteredToolboxActions = useMemo(() => {
+  const toolboxActionsToDisplay = useMemo(() => {
     if (isLoading || !launchDarkly.flags) {
       return []
     }
@@ -68,7 +91,7 @@ export default function ChooseApp(props: ChooseAppProps) {
 
     const toolboxActions =
       apps?.find((app) => app.key === TOOLBOX_APP_KEY)?.actions ?? []
-    return toolboxActions.filter((action) => {
+    const filteredToolboxActions = toolboxActions.filter((action) => {
       // Filter away actions hidden behind feature flags
       if (isLoading || !launchDarkly.flags) {
         return true
@@ -77,7 +100,17 @@ export default function ChooseApp(props: ChooseAppProps) {
       const ldToolboxActionFlag = getAppActionFlag(TOOLBOX_APP_KEY, action.key)
       return launchDarkly.flags[ldToolboxActionFlag] ?? true
     })
-  }, [apps, isLoading, launchDarkly.flags])
+
+    const fuzzySearchToolboxActions = fuzzysort
+      .go(searchQuery, filteredToolboxActions, {
+        all: true,
+        keys: ['name', 'description'],
+        threshold: -1000,
+      })
+      .map((result) => result.obj)
+
+    return fuzzySearchToolboxActions
+  }, [apps, isLoading, launchDarkly.flags, searchQuery])
 
   // Combine filtering and grouping logic into a single operation
   const groupedApps = useMemo(() => {
@@ -90,9 +123,29 @@ export default function ChooseApp(props: ChooseAppProps) {
       return launchDarkly.flags[ldAppFlag] ?? true
     })
 
+    // Note: Separate toolbox app from other apps because we filter toolbox actions separately
+    const toolboxApp = filteredApps.find((app) => app.key === TOOLBOX_APP_KEY)
+    const nonToolboxApps = filteredApps.filter(
+      (app) => app.key !== TOOLBOX_APP_KEY,
+    )
+
+    const fuzzySearchApps = fuzzysort
+      .go(searchQuery, nonToolboxApps, {
+        all: true,
+        keys: ['name', 'description'],
+        threshold: -1000,
+      })
+      .map((result) => result.obj)
+
+    // Add toolbox app back if there are toolbox actions after search and filter
+    const remainingApps =
+      toolboxApp && toolboxActionsToDisplay.length > 0
+        ? [...fuzzySearchApps, toolboxApp]
+        : fuzzySearchApps
+
     // Group the filtered apps
     const grouped = groupBy(
-      filteredApps,
+      remainingApps,
       (app) => app.category || OTHERS_CATEGORY,
     )
 
@@ -106,7 +159,13 @@ export default function ChooseApp(props: ChooseAppProps) {
       }
       return a[0].localeCompare(b[0])
     })
-  }, [apps, launchDarkly.flags, isLoading])
+  }, [
+    apps,
+    launchDarkly.flags,
+    isLoading,
+    searchQuery,
+    toolboxActionsToDisplay,
+  ])
 
   return (
     <>
@@ -122,6 +181,36 @@ export default function ChooseApp(props: ChooseAppProps) {
               These are actions that you can add to your workflow.
             </Text>
           )}
+
+          {/* Search bar only appears for actions until we have many more triggers */}
+          {!isTrigger && (
+            <InputGroup>
+              <InputLeftElement pointerEvents="none">
+                <Icon as={BiSearch} color="base.content.medium" />
+              </InputLeftElement>
+              <Input
+                placeholder="Search for apps..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                _focus={{
+                  borderColor: 'primary.500',
+                  boxShadow: '0 0 0 1px var(--chakra-colors-primary-500)',
+                }}
+                autoFocus
+              />
+              <InputRightElement>
+                {searchQuery && (
+                  <Icon
+                    as={BiSolidXCircle}
+                    cursor="pointer"
+                    opacity={0.6}
+                    _hover={{ opacity: 1 }}
+                    onClick={() => setSearchQuery('')}
+                  />
+                )}
+              </InputRightElement>
+            </InputGroup>
+          )}
         </Flex>
       </ModalHeader>
       <ModalCloseButton mt={2} size="xs" />
@@ -173,7 +262,7 @@ export default function ChooseApp(props: ChooseAppProps) {
                   {apps.map((app) => {
                     // For toolbox app specifically, show all the toolbox actions
                     if (app.key === TOOLBOX_APP_KEY) {
-                      return filteredToolboxActions.map((action) => (
+                      return toolboxActionsToDisplay.map((action) => (
                         <ToolboxEvent
                           key={action.key}
                           action={action}
@@ -182,6 +271,7 @@ export default function ChooseApp(props: ChooseAppProps) {
                             action.key === TOOLBOX_ACTIONS.IfThen &&
                             !isIfThenSelectable
                           }
+                          searchQuery={searchQuery}
                         />
                       ))
                     }
@@ -201,13 +291,9 @@ export default function ChooseApp(props: ChooseAppProps) {
                         borderWidth="1px"
                         borderColor="base.divider.medium"
                         borderRadius="lg"
-                        onClick={() => {
-                          if (singleTriggerOrAction) {
-                            onSelectAppEvent(app, singleTriggerOrAction)
-                          } else {
-                            onSelectApp(app)
-                          }
-                        }}
+                        onClick={() =>
+                          handleSelectOption(app, singleTriggerOrAction)
+                        }
                         justifyContent="space-between"
                         alignItems="center"
                         _hover={{
@@ -225,11 +311,7 @@ export default function ChooseApp(props: ChooseAppProps) {
                         tabIndex={0}
                         onKeyDown={(e) => {
                           if (e.key === 'Enter') {
-                            if (singleTriggerOrAction) {
-                              onSelectAppEvent(app, singleTriggerOrAction)
-                            } else {
-                              onSelectApp(app)
-                            }
+                            handleSelectOption(app, singleTriggerOrAction)
                           }
                         }}
                       >
@@ -250,7 +332,10 @@ export default function ChooseApp(props: ChooseAppProps) {
 
                           <Flex flexDir="column" gap={1}>
                             <Flex gap={2}>
-                              <Text textStyle="subhead-1">{app.name}</Text>
+                              <HighlightedText
+                                searchQuery={searchQuery}
+                                textToHighlight={app.name}
+                              />
                               {app.isNewApp && (
                                 <Badge
                                   bgColor="interaction.muted.main.active"
@@ -260,7 +345,12 @@ export default function ChooseApp(props: ChooseAppProps) {
                                 </Badge>
                               )}
                             </Flex>
-                            <Text textStyle="body-2">{app.description}</Text>
+                            <Text textStyle="body-2">
+                              <HighlightedText
+                                searchQuery={searchQuery}
+                                textToHighlight={app.description ?? ''}
+                              />
+                            </Text>
                           </Flex>
                         </Flex>
 

packages/frontend/src/components/FlowStepConfigurationModal/ChooseAppAndEvent/HighlightedText.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { chakra, Mark } from '@chakra-ui/react'
+import fuzzysort from 'fuzzysort'
+
+interface HighlightedTextProps {
+  searchQuery: string
+  textToHighlight: string
+}
+
+export const HighlightedText = ({
+  searchQuery,
+  textToHighlight,
+}: HighlightedTextProps) => {
+  const highlighted = useMemo(() => {
+    if (!searchQuery) {
+      return textToHighlight
+    }
+    const result = fuzzysort.single(searchQuery, textToHighlight)
+    // Return the original text if no match is found.
+    if (!result) {
+      return textToHighlight
+    }
+    return fuzzysort.highlight(result, (match, i) => (
+      <Mark key={i} bg="primary.100" borderRadius="sm">
+        {match}
+      </Mark>
+    ))
+  }, [searchQuery, textToHighlight])
+
+  return <chakra.span>{highlighted}</chakra.span>
+}

packages/frontend/src/components/FlowStepConfigurationModal/ChooseAppAndEvent/ToolboxEvent.tsx

@@ -4,6 +4,8 @@ import { BiFilterAlt, BiGitRepoForked, BiQuestionMark } from 'react-icons/bi'
 import { Flex, Icon, Text } from '@chakra-ui/react'
 import { TouchableTooltip } from '@opengovsg/design-system-react'
 
+import { HighlightedText } from './HighlightedText'
+
 const TOOLBOX_ACTION_TO_ICON_MAP = {
   onlyContinueIf: BiFilterAlt,
   ifThen: BiGitRepoForked,
@@ -13,10 +15,11 @@ interface ToolboxEventProps {
   action: IAction
   onSelectAppEvent: () => void
   isDisabled: boolean
+  searchQuery: string
 }
 
 export default function ToolboxEvent(props: ToolboxEventProps): JSX.Element {
-  const { action, isDisabled, onSelectAppEvent } = props
+  const { action, isDisabled, onSelectAppEvent, searchQuery } = props
   return (
     <TouchableTooltip
       label={isDisabled ? 'This can only be used as the last step' : ''}
@@ -63,8 +66,16 @@ export default function ToolboxEvent(props: ToolboxEventProps): JSX.Element {
           />
 
           <Flex flexDir="column" gap={1}>
-            <Text textStyle="subhead-1">{action.name}</Text>
-            <Text textStyle="body-2">{action.description}</Text>
+            <HighlightedText
+              searchQuery={searchQuery}
+              textToHighlight={action.name}
+            />
+            <Text textStyle="body-2">
+              <HighlightedText
+                searchQuery={searchQuery}
+                textToHighlight={action.description ?? ''}
+              />
+            </Text>
           </Flex>
         </Flex>
       </Flex>