add minor ui changes and remove search

Author: m0nggh

packages/frontend/src/components/Editor/index.tsx

@@ -12,7 +12,7 @@ import {
   Flex,
   useDisclosure,
 } from '@chakra-ui/react'
-import { IconButton } from '@opengovsg/design-system-react'
+import { IconButton, TouchableTooltip } from '@opengovsg/design-system-react'
 
 import FlowStep from '@/components/FlowStep'
 import FlowStepGroup from '@/components/FlowStepGroup'
@@ -54,25 +54,35 @@ function AddStepButton(props: AddStepButtonProps): JSX.Element {
     <>
       <Box pos="relative" h={24}>
         {/* Top vertical line */}
-        <Box h="1.875rem">
+        <Box mt={2} h={5}>
           <Divider orientation="vertical" borderColor="base.divider.strong" />
         </Box>
         {/* Bottom vertical line */}
         {!isLastStep && (
-          <Box mt={9} h="1.875rem">
+          <Box mt={10} h={5}>
             <Divider orientation="vertical" borderColor="base.divider.strong" />
           </Box>
         )}
         <AbsoluteCenter>
-          <IconButton
-            // onClick={onClick}
-            onClick={onOpen}
-            isDisabled={isDisabled}
-            aria-label="Add Step"
-            icon={<BiPlus />}
-            variant="outline"
-            size="xs"
-          />
+          <TouchableTooltip label="Add Step" placement="right">
+            <IconButton
+              onClick={onOpen}
+              isDisabled={isDisabled}
+              aria-label="Add Step"
+              icon={<BiPlus />}
+              variant={isLastStep ? 'outline' : 'clear'}
+              size="xs"
+              color="interaction.sub.default"
+              borderRadius="full"
+              _hover={{
+                bg: 'interaction.muted.neutral.hover',
+              }}
+              _active={{
+                bg: 'interaction.muted.neutral.active',
+              }}
+              borderColor={isLastStep ? 'interaction.sub.default' : undefined}
+            />
+          </TouchableTooltip>
         </AbsoluteCenter>
       </Box>
 

packages/frontend/src/components/EmptyFlowStepHeader/EmptyFlowStepHeaderModal/ModalBodyContent.tsx

@@ -1,17 +1,9 @@
 import type { IAction, IApp, ITrigger } from '@plumber/types'
 
-import { useContext, useMemo, useState } from 'react'
-import { BiArrowFromRight, BiChevronRight, BiSearch } from 'react-icons/bi'
-import {
-  Box,
-  Flex,
-  Icon,
-  Image,
-  InputGroup,
-  InputLeftElement,
-  Text,
-} from '@chakra-ui/react'
-import { Badge, Input } from '@opengovsg/design-system-react'
+import { useContext, useMemo } from 'react'
+import { BiArrowFromRight, BiChevronRight } from 'react-icons/bi'
+import { Box, Flex, Icon, Image, Text } from '@chakra-ui/react'
+import { Badge } from '@opengovsg/design-system-react'
 import { groupBy } from 'lodash'
 
 import { getAppActionFlag, getAppFlag, getAppTriggerFlag } from '@/config/flags'
@@ -43,22 +35,16 @@ export default function ModalBodyContent(
   const [_, isInitializingIfThen] = useIfThenInitializer()
   const isLoading = launchDarkly.isLoading || isInitializingIfThen
 
-  const [searchQuery, setSearchQuery] = useState('')
-
   // Combine filtering and grouping logic into a single operation
   const groupedApps = useMemo(() => {
-    const filteredApps = apps
-      ?.filter((app) => {
-        // Filter away apps hidden behind feature flags
-        if (isLoading || !launchDarkly.flags || !app?.key) {
-          return true
-        }
-        const ldAppFlag = getAppFlag(app.key)
-        return launchDarkly.flags[ldAppFlag] ?? true
-      })
-      .filter((app) =>
-        app.name.toLowerCase().includes(searchQuery.toLowerCase()),
-      )
+    const filteredApps = apps?.filter((app) => {
+      // Filter away apps hidden behind feature flags
+      if (isLoading || !launchDarkly.flags || !app?.key) {
+        return true
+      }
+      const ldAppFlag = getAppFlag(app.key)
+      return launchDarkly.flags[ldAppFlag] ?? true
+    })
 
     // Group the filtered apps
     const grouped = groupBy(
@@ -76,7 +62,7 @@ export default function ModalBodyContent(
       }
       return a[0].localeCompare(b[0])
     })
-  }, [apps, searchQuery, launchDarkly.flags, isLoading])
+  }, [apps, launchDarkly.flags, isLoading])
 
   const filteredTriggersOrActions = useMemo(() => {
     if (!selectedApp) {
@@ -173,21 +159,6 @@ export default function ModalBodyContent(
    */
   return (
     <Flex flexDir="column" gap={6}>
-      <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)',
-          }}
-        />
-      </InputGroup>
-
       {groupedApps && groupedApps.length === 0 ? (
         <Flex
           justifyContent="center"

packages/frontend/src/components/EmptyFlowStepHeader/EmptyFlowStepHeaderModal/index.tsx

@@ -59,7 +59,13 @@ export default function EmptyFlowStepHeaderModal(
       autoFocus={false}
     >
       <ModalOverlay bg="base.canvas.overlay" />
-      <ModalContent>
+      <ModalContent
+        maxW="600px"
+        maxH="90vh"
+        h="auto"
+        overflow="hidden"
+        borderRadius="lg"
+      >
         <ModalHeader>
           {selectedApp ? (
             <Flex gap={2} flexDir="column" alignItems="flex-start">
@@ -78,7 +84,7 @@ export default function EmptyFlowStepHeaderModal(
             <Text textStyle="h3-semibold" pt={4}>
               {isTrigger
                 ? 'Choose how you want your workflow to start'
-                : 'Choose which action you want to run next'}
+                : 'Add steps'}
             </Text>
           )}
         </ModalHeader>

packages/frontend/src/components/EmptyFlowStepHeader/index.tsx

@@ -24,7 +24,9 @@ export default function EmptyFlowStepHeader(
         borderRadius="lg"
         bg="white"
         p={4}
-        justifyContent="center"
+        pl={8}
+        h="96px"
+        // justifyContent="flex-start"
         alignItems="center"
         gap={4}
         onClick={onOpen}
@@ -36,11 +38,11 @@ export default function EmptyFlowStepHeader(
           bg: 'interaction.muted.neutral.active',
         }}
       >
-        <Icon as={isTrigger ? BiSolidBolt : BiRun} />
-        <Text>
+        <Icon as={isTrigger ? BiSolidBolt : BiRun} boxSize={6} />
+        <Text textStyle="subhead-1">
           {isTrigger
             ? 'Choose how you want your workflow to start'
-            : 'Choose which action you want to run next'}
+            : 'Choose an action'}
         </Text>
       </Flex>