feat: add LearnFromGuideInfobox

Author: kevinkim-ogp

packages/backend/src/apps/toolbox/actions/for-each/index.ts

@@ -26,11 +26,13 @@ const action: IRawAction = {
   description: 'Repeat actions for each item',
   groupsLaterSteps: true,
   isNew: true,
+  linkToGuide:
+    'https://guide.plumber.gov.sg/user-guides/actions/for-each-item-coming-soon',
   arguments: [
     {
       label: 'Choose items',
       description:
-        'Supported items include rows in Tiles/M365 Excel and FormSG checkboxes',
+        'Items you can choose from: Find multiple rows, Find multiple table rows, or checkboxes/table from your form.',
       key: 'items',
       type: 'string' as const,
       required: true,

packages/backend/src/graphql/schema.graphql

@@ -167,6 +167,7 @@ type Action {
   groupsLaterSteps: Boolean
   setupMessage: SetupMessage
   isNew: Boolean
+  linkToGuide: String
   substeps: [ActionSubstep]
 }
 

packages/frontend/src/components/EditorRightDrawer/LearnFromGuideInfobox.tsx

@@ -0,0 +1,43 @@
+import { IAction, ITrigger } from '@plumber/types'
+
+import { MdLightbulbOutline, MdOpenInNew } from 'react-icons/md'
+import { Flex, HStack, Icon, Link, Text } from '@chakra-ui/react'
+import { Infobox } from '@opengovsg/design-system-react'
+
+interface LearnFromGuideInfoboxProps {
+  selectedActionOrTrigger: IAction | ITrigger | undefined
+}
+
+export default function LearnFromGuideInfobox(
+  props: LearnFromGuideInfoboxProps,
+) {
+  const { selectedActionOrTrigger } = props
+  const { linkToGuide } = selectedActionOrTrigger || {}
+
+  if (!linkToGuide) {
+    return null
+  }
+
+  return (
+    <>
+      <Infobox
+        icon={<Icon as={MdLightbulbOutline} color="primary.500" />}
+        style={{
+          borderRadius: '0.25rem',
+          backgroundColor: '#FEF8FB',
+          marginBottom: '1rem',
+        }}
+      >
+        <Flex flexDir={{ base: 'column', md: 'row' }} gap={2} flex={1}>
+          Learn how to set this up!{' '}
+          <Link href={linkToGuide} isExternal>
+            <HStack spacing={1}>
+              <Text>Read our guide</Text>
+              <Icon as={MdOpenInNew} boxSize={4} />
+            </HStack>
+          </Link>
+        </Flex>
+      </Infobox>
+    </>
+  )
+}

packages/frontend/src/components/EditorRightDrawer/Step.tsx

@@ -14,6 +14,8 @@ import { useStepMetadata } from '@/hooks/useStepMetadata'
 
 import FlowStepConfigurationModal from '../FlowStepConfigurationModal'
 
+import LearnFromGuideInfobox from './LearnFromGuideInfobox'
+
 type StepProps = {
   step: IStep
   isLastStep: boolean
@@ -72,6 +74,9 @@ export default function Step(props: StepProps): React.ReactElement | null {
             onSubmit={handleSubmit}
             resolver={stepValidationSchema}
           >
+            <LearnFromGuideInfobox
+              selectedActionOrTrigger={selectedActionOrTrigger}
+            />
             {/* Place ChooseConnectionSubstep outside the accordion structure */}
             {hasConnection && app && (
               <ChooseConnectionSubstep

packages/frontend/src/graphql/queries/get-apps.ts

@@ -175,6 +175,7 @@ export const GET_APPS = gql`
         }
         groupsLaterSteps
         isNew
+        linkToGuide
         substeps {
           key
           name

packages/types/index.d.ts

@@ -719,6 +719,9 @@ export interface IBaseTrigger {
    * message to the user during pipe setup / config.
    */
   setupMessage?: SetupMessage
+
+  // link that is used in the infobox. meant for new actions / triggers
+  linkToGuide?: string
 }
 
 export interface IRawTrigger extends IBaseTrigger {
@@ -821,6 +824,9 @@ export interface IBaseAction {
    * Used when saving the step.
    */
   validateStepParameters?: (parameters: IJSONObject) => void
+
+  // link that is used in the infobox. meant for new actions / triggers
+  linkToGuide?: string
 }
 
 export interface IRawAction extends IBaseAction {