chore: hide nric filter for new pipes (#816)

## Problem

Before we remove the NRIC filter, we want to have an option to hide the
NRIC filter for pipes created after a certain date.

## Solution

- Create a generic LD flag for inputs, and allow the NRIC filter LD flag
to set a certain timestamp on LD such that pipes after this timestamp
will not show the input
- Remove the step accordion if no input is present after hiding specific
inputs

## Tests
- [x] Only NRIC filter input is hidden after 12th Dec (can change this
date nearer to release)
- [x] NRIC filter input is still present for pipes created before 12th
Dec
- [x] Other inputs are still present regardless of timestamp

packages/backend/src/graphql/schema.graphql

@@ -15,8 +15,12 @@ type Query {
     connectionId: String
     name: String
   ): PaginatedFlows
-  getStepWithTestExecutions(stepId: String!): [Step] @deprecated(reason: "Use getTestExecution instead")
-  getTestExecutionSteps(flowId: String!, ignoreTestExecutionId: Boolean): [ExecutionStep]
+  getStepWithTestExecutions(stepId: String!): [Step]
+    @deprecated(reason: "Use getTestExecution instead")
+  getTestExecutionSteps(
+    flowId: String!
+    ignoreTestExecutionId: Boolean
+  ): [ExecutionStep]
   getExecution(executionId: String!): Execution
   getExecutions(
     limit: Int!
@@ -550,6 +554,7 @@ type Step {
   status: String
   executionSteps: [ExecutionStep]
   config: StepConfig
+  createdAt: String
 }
 
 type StepConfig {

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

@@ -329,6 +329,7 @@ export default function FlowStep(
                           selectedActionOrTrigger?.settingsStepLabel ??
                           app?.substepLabels?.settingsStepLabel
                         }
+                        selectedActionOrTrigger={selectedActionOrTrigger}
                       />
                     )}
                 </Fragment>

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

@@ -1,19 +1,23 @@
 import type {
+  IAction,
   IField,
   IJSONObject,
   IJSONValue,
   IStep,
   ISubstep,
+  ITrigger,
 } from '@plumber/types'
 
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useMemo, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { Box, Collapse, Stack } from '@chakra-ui/react'
 import { Button } from '@opengovsg/design-system-react'
 
 import FlowSubstepTitle from '@/components/FlowSubstepTitle'
 import InputCreator from '@/components/InputCreator'
+import { getInputFlag } from '@/config/flags'
 import { EditorContext } from '@/contexts/Editor'
+import { LaunchDarklyContext } from '@/contexts/LaunchDarkly'
 import { isFieldHidden } from '@/helpers/isFieldHidden'
 
 type FlowSubstepProps = {
@@ -25,6 +29,7 @@ type FlowSubstepProps = {
   onSubmit: () => void
   step: IStep
   settingsLabel?: string
+  selectedActionOrTrigger?: ITrigger | IAction
 }
 
 function isValidArgValue(value: IJSONValue): boolean {
@@ -93,16 +98,31 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
     onSubmit,
     step,
     settingsLabel,
+    selectedActionOrTrigger,
   } = props
 
   const { name, arguments: args } = substep
 
+  const { flags } = useContext(LaunchDarklyContext)
   const editorContext = useContext(EditorContext)
   const formContext = useFormContext()
   const [validationStatus, setValidationStatus] = useState<boolean>(
     validateSubstep(substep, formContext.getValues() as IStep),
   )
 
+  // filter inputs hidden behind feature flags based on timestamp
+  const argsToDisplay = useMemo(
+    () =>
+      args?.filter((arg) => {
+        if (!flags) {
+          return true
+        }
+        const flag = getInputFlag(selectedActionOrTrigger?.key ?? '', arg.key)
+        return !flags[flag] || +step.createdAt <= flags[flag]
+      }),
+    [args, flags, step.createdAt, selectedActionOrTrigger],
+  )
+
   useEffect(() => {
     function validate(step: unknown) {
       const validationResult = validateSubstep(substep, step as IStep)
@@ -115,6 +135,10 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
 
   const onToggle = expanded ? onCollapse : onExpand
 
+  if (!argsToDisplay || argsToDisplay.length === 0) {
+    return <></>
+  }
+
   return (
     <>
       <FlowSubstepTitle
@@ -126,7 +150,7 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
       <Collapse in={expanded} unmountOnExit style={{ overflow: 'initial' }}>
         <Box p="1rem 1rem 1.5rem">
           <Stack w="100%" spacing={4}>
-            {args?.map((argument) => (
+            {argsToDisplay.map((argument) => (
               <InputCreator
                 key={argument.key}
                 schema={argument}

packages/frontend/src/config/flags.ts

@@ -25,3 +25,9 @@ export const getAppTriggerFlag = (appKey: string, triggerKey: string) =>
   `app_${appKey}_trigger_${triggerKey}`
 export const getAppActionFlag = (appKey: string, actionKey: string) =>
   `app_${appKey}_action_${actionKey}`
+
+/**
+ * Input flags: use both appKey and key in case of duplicate key between app_events
+ */
+export const getInputFlag = (appKey: string, key: string) =>
+  `input_${appKey}_${key}`

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

@@ -15,6 +15,7 @@ export const GET_FLOW = gql`
         webhookUrl
         status
         position
+        createdAt
         connection {
           id
           verified

packages/types/index.d.ts

@@ -163,6 +163,7 @@ export interface IStep {
   appData?: IApp
   retryable?: boolean
   jobId?: string
+  createdAt: string
 }
 
 export interface IFlowConfig {