Release v1.46.1 (#1110)

* fix: update display of for-each in template
* fix: configs for Plumber admin

Author: kevinkim-ogp

package-lock.json

@@ -106,5 +106,5 @@
     "tsconfig-paths": "^4.2.0",
     "type-fest": "4.10.3"
   },
-  "version": "1.46.0"
+  "version": "1.46.1"
 }

packages/backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.46.0",
+  "version": "1.46.1",
   "type": "module",
   "scripts": {
     "dev": "wait-on tcp:3000 && vite --host --force",
@@ -93,7 +93,8 @@
     "launchdarkly-react-client-sdk": "3.0.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "6.11.2"
+    "react-router-dom": "6.11.2",
+    "zod": "3.22.4"
   },
   "browserslist": {
     "production": [
@@ -115,7 +116,7 @@
       "types": "./dist/lib/exports/index.d.ts",
       "import": "./dist/lib/exports/index.js"
     },
-    "./style.css": "./dist/lib/style.css",
+    "./style.css": "./dist/lib/frontend.css",
     "./*": {
       "types": "./dist/lib/exports/*.d.ts",
       "import": "./dist/lib/exports/*.js"

packages/frontend/package.json

@@ -6,16 +6,16 @@ import { Flex, Text } from '@chakra-ui/react'
 import { BetweenStepsGraphic } from './TemplateBody'
 import TemplateStepContent from './TemplateStepContent'
 
-interface IfThenBranchContentProps {
-  branchSteps: ITemplateStep[]
+interface GroupContentProps {
+  groupSteps: ITemplateStep[]
   apps: IApp[]
 }
 
-export default function IfThenBranchContent(props: IfThenBranchContentProps) {
-  const { branchSteps, apps } = props
+export default function GroupContent(props: GroupContentProps) {
+  const { groupSteps, apps } = props
   return (
     <Flex
-      key={branchSteps[0].position}
+      key={groupSteps[0].position}
       flexDir="column"
       w="100%"
       p={4}
@@ -25,11 +25,11 @@ export default function IfThenBranchContent(props: IfThenBranchContentProps) {
     >
       {/* Branch name */}
       <Text textStyle="subhead-1" color="base.content.default" noOfLines={1}>
-        {branchSteps[0].parameters?.branchName as string}
+        {groupSteps[0].parameters?.branchName as string}
       </Text>
 
       <Flex flexDir="column" w="100%" px={4} alignItems="center">
-        {branchSteps.map((templateStep, index) => {
+        {groupSteps.map((templateStep, index) => {
           return (
             <Fragment key={index}>
               <TemplateStepContent
@@ -38,7 +38,7 @@ export default function IfThenBranchContent(props: IfThenBranchContentProps) {
                 isNested={true}
               />
               {/* Don't show if it is the last step */}
-              {index < branchSteps.length - 1 && <BetweenStepsGraphic />}
+              {index < groupSteps.length - 1 && <BetweenStepsGraphic />}
             </Fragment>
           )
         })}

packages/frontend/src/pages/Template/components/IfThenBranchContent.tsx renamed to packages/frontend/src/pages/Template/components/GroupContent.tsx

@@ -1,15 +1,16 @@
 import type { IApp, ITemplateStep } from '@plumber/types'
 
-import { BiGitRepoForked } from 'react-icons/bi'
 import { Flex, Icon, Text } from '@chakra-ui/react'
 
+import { TOOLBOX_ACTION_TO_ICON_MAP } from '@/components/FlowStepConfigurationModal/ChooseAppAndEvent/ToolboxEvent'
 import { TOOLBOX_ACTIONS, TOOLBOX_APP_KEY } from '@/helpers/toolbox'
 
-import IfThenBranchContent from './IfThenBranchContent'
+import GroupContent from './GroupContent'
 
-interface IfThenTemplateStepContentProps {
+interface GroupTemplateStepContentProps {
   templateSteps: ITemplateStep[]
   apps: IApp[]
+  groupType?: string
 }
 
 function extractBranchesWithSteps(templateSteps: ITemplateStep[]) {
@@ -22,7 +23,8 @@ function extractBranchesWithSteps(templateSteps: ITemplateStep[]) {
     // check if it's an if-then step
     if (
       step.appKey === TOOLBOX_APP_KEY &&
-      step.eventKey === TOOLBOX_ACTIONS.IfThen
+      (step.eventKey === TOOLBOX_ACTIONS.IfThen ||
+        step.eventKey === TOOLBOX_ACTIONS.ForEach)
     ) {
       result.push(branchWithSteps)
       branchWithSteps = [step]
@@ -35,15 +37,20 @@ function extractBranchesWithSteps(templateSteps: ITemplateStep[]) {
   return result
 }
 
-export default function IfThenTemplateStepContent(
-  props: IfThenTemplateStepContentProps,
+export default function GroupTemplateStepContent(
+  props: GroupTemplateStepContentProps,
 ) {
-  const { templateSteps, apps } = props
+  const { templateSteps, apps, groupType } = props
   // sanity check
   if (!templateSteps || templateSteps.length === 0) {
     return <></>
   }
   const groupedSteps = extractBranchesWithSteps(templateSteps)
+  const header = groupType === TOOLBOX_ACTIONS.IfThen ? 'If-then' : 'For each'
+  const headerIcon =
+    TOOLBOX_ACTION_TO_ICON_MAP[
+      groupType as keyof typeof TOOLBOX_ACTION_TO_ICON_MAP
+    ]
 
   return (
     <Flex
@@ -54,19 +61,19 @@ export default function IfThenTemplateStepContent(
       borderRadius="lg"
       pb={4}
     >
-      {/* This is for the if then header step */}
+      {/* This is for the group header step */}
       <Flex w="100%" p={4} alignItems="center" columnGap={4}>
-        <Icon boxSize={6} as={BiGitRepoForked} color="primary.500" ml={2} />
+        <Icon boxSize={6} as={headerIcon} color="primary.500" ml={2} />
 
-        <Text textStyle="subhead-1">If-then</Text>
+        <Text textStyle="subhead-1">{header}</Text>
       </Flex>
 
       <Flex flexDir="column" w="100%" px={4} gap={4}>
-        {groupedSteps.map((branchSteps) => {
+        {groupedSteps.map((steps) => {
           return (
-            <IfThenBranchContent
-              key={branchSteps[0].position}
-              branchSteps={branchSteps}
+            <GroupContent
+              key={steps[0].position}
+              groupSteps={steps}
               apps={apps}
             />
           )

packages/frontend/src/pages/Template/components/IfThenTemplateStepContent.tsx renamed to packages/frontend/src/pages/Template/components/GroupTemplateStepContent.tsx

@@ -4,7 +4,9 @@ import { Fragment, useMemo } from 'react'
 import { Box, Divider, Flex, Text } from '@chakra-ui/react'
 import { Infobox } from '@opengovsg/design-system-react'
 
-import IfThenTemplateStepContent from './IfThenTemplateStepContent'
+import { TOOLBOX_ACTIONS, TOOLBOX_APP_KEY } from '@/helpers/toolbox'
+
+import GroupTemplateStepContent from './GroupTemplateStepContent'
 import TemplateStepContent from './TemplateStepContent'
 
 interface TemplateBodyProps {
@@ -23,20 +25,23 @@ export function BetweenStepsGraphic() {
 export default function TemplateBody(props: TemplateBodyProps) {
   const { templateSteps, apps } = props
 
-  const [templateStepsBeforeIfThen, templateStepsAfterIfThen] = useMemo(() => {
-    const ifThenStartIndex = templateSteps.findIndex(
-      (templateStep: ITemplateStep) =>
-        templateStep?.appKey === 'toolbox' &&
-        templateStep?.eventKey === 'ifThen',
-    )
-    if (ifThenStartIndex === -1) {
-      return [templateSteps, []]
-    }
-    return [
-      templateSteps.slice(0, ifThenStartIndex),
-      templateSteps.slice(ifThenStartIndex),
-    ]
-  }, [templateSteps])
+  const [templateStepsBeforeGroup, templateStepsAfterGroup, groupType] =
+    useMemo(() => {
+      const groupStartIndex = templateSteps.findIndex(
+        (templateStep: ITemplateStep) =>
+          templateStep?.appKey === TOOLBOX_APP_KEY &&
+          (templateStep?.eventKey === TOOLBOX_ACTIONS.IfThen ||
+            templateStep?.eventKey === TOOLBOX_ACTIONS.ForEach),
+      )
+      if (groupStartIndex === -1) {
+        return [templateSteps, [], undefined]
+      }
+      return [
+        templateSteps.slice(0, groupStartIndex),
+        templateSteps.slice(groupStartIndex),
+        templateSteps[groupStartIndex]?.eventKey,
+      ]
+    }, [templateSteps])
 
   return (
     <Flex
@@ -55,7 +60,7 @@ export default function TemplateBody(props: TemplateBodyProps) {
       </Infobox>
 
       {/* Steps to display before if-then */}
-      {templateStepsBeforeIfThen.map((templateStep, index) => (
+      {templateStepsBeforeGroup.map((templateStep, index) => (
         <Fragment key={index}>
           <TemplateStepContent
             app={apps?.find((app: IApp) => templateStep?.appKey === app.key)}
@@ -66,9 +71,10 @@ export default function TemplateBody(props: TemplateBodyProps) {
         </Fragment>
       ))}
       {/* Steps to display for if-then */}
-      <IfThenTemplateStepContent
-        templateSteps={templateStepsAfterIfThen}
+      <GroupTemplateStepContent
+        templateSteps={templateStepsAfterGroup}
         apps={apps}
+        groupType={groupType}
       />
     </Flex>
   )

packages/frontend/src/pages/Template/components/TemplateBody.tsx

@@ -1,9 +1,10 @@
 import type { IApp, ITemplateStep } from '@plumber/types'
 
-import { BiGitRepoForked, BiQuestionMark } from 'react-icons/bi'
+import { BiQuestionMark } from 'react-icons/bi'
 import { Card, Flex, Icon, Image, Link, Text } from '@chakra-ui/react'
 
-import { TOOLBOX_ACTIONS } from '@/helpers/toolbox'
+import { TOOLBOX_ACTION_TO_ICON_MAP } from '@/components/FlowStepConfigurationModal/ChooseAppAndEvent/ToolboxEvent'
+import { TOOLBOX_ACTIONS, TOOLBOX_APP_KEY } from '@/helpers/toolbox'
 
 interface TemplateStepContentProps {
   app?: IApp
@@ -13,19 +14,27 @@ interface TemplateStepContentProps {
 
 const FALLBACK_EVENT_NAME = 'Sample Event'
 const IF_THEN_EVENT_NAME = 'Condition'
+const FOR_EACH_EVENT_NAME = 'For each item'
 
 export default function TemplateStepContent(props: TemplateStepContentProps) {
   const { app, templateStep, isNested } = props
-  const { eventKey, position, sampleUrl, sampleUrlDescription } = templateStep
+  const { appKey, eventKey, position, sampleUrl, sampleUrlDescription } =
+    templateStep
   // sanity check
   if (!app) {
     return <></>
   }
 
   const isTrigger = position === 1
+  const isToolboxApp = appKey === TOOLBOX_APP_KEY
   const isIfThen = eventKey === TOOLBOX_ACTIONS.IfThen
+  const isForEach = eventKey === TOOLBOX_ACTIONS.ForEach
 
   // find event name based on triggers/actions of the app using position
+  const eventIcon =
+    TOOLBOX_ACTION_TO_ICON_MAP[
+      eventKey as keyof typeof TOOLBOX_ACTION_TO_ICON_MAP
+    ] ?? BiQuestionMark
   let eventName = ''
   if (isTrigger) {
     eventName =
@@ -34,6 +43,8 @@ export default function TemplateStepContent(props: TemplateStepContentProps) {
   } else {
     if (isIfThen) {
       eventName = IF_THEN_EVENT_NAME
+    } else if (isForEach) {
+      eventName = FOR_EACH_EVENT_NAME
     } else {
       eventName =
         app?.actions?.find((action) => action.key === eventKey)?.name ??
@@ -53,8 +64,8 @@ export default function TemplateStepContent(props: TemplateStepContentProps) {
       borderRadius="lg"
       h={isNested ? 12 : 16}
     >
-      {isIfThen ? (
-        <Icon boxSize={6} as={BiGitRepoForked} color="primary.500" ml={2} />
+      {isToolboxApp ? (
+        <Icon boxSize={6} as={eventIcon} color="primary.500" ml={2} />
       ) : (
         <Image
           src={app?.iconUrl}

packages/frontend/src/pages/Template/components/TemplateStepContent.tsx

@@ -42,6 +42,7 @@ export default defineConfig({
         'react-dom',
         'react-dom/client',
         'react-router-dom',
+        'zod',
       ],
     },
   },

packages/frontend/vite.config.lib.ts

@@ -2,5 +2,5 @@
   "name": "@plumber/types",
   "description": "Shared types for plumber",
   "types": "./index.d.ts",
-  "version": "1.46.0"
+  "version": "1.46.1"
 }