Release v1.56.2 (#1342)

kevinkim-ogp · web-flow · commit b9f180562c38 · 2025-11-26T09:51:16.000+08:00
- fix(telegram-bot): enable retries for socket hang up as stop gap
- fix(frontend):remove manual cache manipulation
- chore(frontend): collab what's new and shift buttons
- chore(frontend): hide whats new based on ld flag
- chore(backend): cascade flow_connections
- chore(admin): export EditorSettingsFlowCollaborators
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/backend/package.json b/packages/backend/package.json
@@ -111,5 +111,5 @@
     "tsconfig-paths": "^4.2.0",
     "type-fest": "4.10.3"
   },
-  "version": "1.56.1"
+  "version": "1.56.2"
 }
diff --git a/packages/backend/src/apps/telegram-bot/common/throw-errors.ts b/packages/backend/src/apps/telegram-bot/common/throw-errors.ts
@@ -15,16 +15,23 @@ export async function throwSendMessageError(
   testRun: boolean,
 ): Promise<never> {
   const position = step.position
-  logger.error('Telegram bot error', {
-    error: err,
-  })
+
   // catch telegram errors with different error format for ETIMEDOUT and ECONNRESET: e.g. details: { error: 'connect ECONNREFUSED 127.0.0.1:3002' }
+  const errorDetails = JSON.stringify(get(err, 'details', {}))
   const errorString = JSON.stringify(get(err, 'details.error', ''))
+  logger.error({
+    event: 'telegram-bot-error',
+    error: errorDetails,
+    stepId: step.id,
+    testRun,
+  })
+
   if (
     errorString.includes('ECONNRESET') ||
     errorString.includes('ETIMEDOUT') ||
     err.message.includes('ETIMEDOUT') ||
-    err.code === 'ETIMEDOUT'
+    err.code === 'ETIMEDOUT' ||
+    errorString.includes('socket hang up')
   ) {
     logger.error(`Telegram ip error: ${err.resolvedIp}`)
     throw new RetriableError({
@@ -37,7 +44,6 @@ export async function throwSendMessageError(
   /**
    * TODO: Temporary error handling since I cant find a way to catch the ETIMEDOUT error
    */
-  const errorDetails = JSON.stringify(get(err, 'details', {}))
   if (errorDetails === '{"error": "Error"}') {
     throw new RetriableError({
       error: 'Timeout error. Telegram may be experiencing issues.',
@@ -132,6 +138,12 @@ export async function throwSendMessageError(
         appName,
         err,
       )
+    case 504:
+      throw new RetriableError({
+        error: 'Timeout error. Telegram may be experiencing issues.',
+        delayInMs: 'default',
+        delayType: 'step',
+      })
     default:
       // return original error since uncaught
       throw err
diff --git a/packages/backend/src/db/migrations/20251124023536_add_index_on_flow_connections.ts b/packages/backend/src/db/migrations/20251124023536_add_index_on_flow_connections.ts
@@ -0,0 +1,13 @@
+import { Knex } from 'knex'
+
+export async function up(knex: Knex): Promise<void> {
+  await knex.schema.table('flow_connections', (table) => {
+    table.index(['connection_id'])
+  })
+}
+
+export async function down(knex: Knex): Promise<void> {
+  await knex.schema.table('flow_connections', (table) => {
+    table.dropIndex(['connection_id'])
+  })
+}
diff --git a/packages/backend/src/graphql/mutations/delete-connection.ts b/packages/backend/src/graphql/mutations/delete-connection.ts
@@ -1,19 +1,28 @@
+import FlowConnections from '@/models/flow-connections'
+
 import type { MutationResolvers } from '../__generated__/types.generated'
 
 const deleteConnection: MutationResolvers['deleteConnection'] = async (
   _parent,
   params,
   context,
 ) => {
-  await context.currentUser
-    .$relatedQuery('connections')
-    .delete()
-    .findOne({
-      id: params.input.id,
-    })
-    .throwIfNotFound()
+  return await FlowConnections.transaction(async (trx) => {
+    await context.currentUser
+      .$relatedQuery('connections', trx)
+      .delete()
+      .findOne({
+        id: params.input.id,
+      })
+      .throwIfNotFound()
+
+    // also delete the connection from the flow_connections table for flows with collaborators
+    await FlowConnections.query(trx)
+      .delete()
+      .where({ connection_id: params.input.id })
 
-  return true
+    return true
+  })
 }
 
 export default deleteConnection
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.56.1",
+  "version": "1.56.2",
   "type": "module",
   "scripts": {
     "dev": "wait-on tcp:3000 && vite --host --force",
diff --git a/packages/frontend/src/components/ChooseConnectionSubstep/index.tsx b/packages/frontend/src/components/ChooseConnectionSubstep/index.tsx
@@ -71,6 +71,7 @@ function ChooseConnectionSubstep(
       flowId: step.flowId,
       supportsConnectionRegistration,
     },
+    fetchPolicy: 'cache-first',
     skip: !connection?.id,
   })
 
diff --git a/packages/frontend/src/components/EditorSettings/FlowShare/AddNewCollaborator.tsx b/packages/frontend/src/components/EditorSettings/FlowShare/AddNewCollaborator.tsx
@@ -119,7 +119,7 @@ const AddNewCollaborator = ({
               type="submit"
               isLoading={isAdding}
               isDisabled={!isValid}
-              alignSelf="flex-end"
+              alignSelf="flex-start"
             >
               Add collaborator
             </Button>
diff --git a/packages/frontend/src/components/EditorSettings/FlowTransfer.tsx b/packages/frontend/src/components/EditorSettings/FlowTransfer.tsx
@@ -105,7 +105,7 @@ export default function FlowTransfer() {
             <Button
               type="submit"
               isDisabled={shouldDisableInput || !isValid}
-              alignSelf="flex-end"
+              alignSelf="flex-start"
               mt={8}
             >
               Transfer Pipe
diff --git a/packages/frontend/src/components/EditorSettings/Notifications.tsx b/packages/frontend/src/components/EditorSettings/Notifications.tsx
@@ -100,7 +100,7 @@ function NotificationFormFields() {
         w="fit-content"
         type="submit"
         isDisabled={!isDirty || isReadOnly}
-        alignSelf="flex-end"
+        alignSelf="flex-start"
       >
         {isDirty ? 'Save' : 'Saved'}
       </Button>
diff --git a/packages/frontend/src/components/NewsDrawer/NewsItem.tsx b/packages/frontend/src/components/NewsDrawer/NewsItem.tsx
@@ -22,12 +22,14 @@ export interface NewsItemProps {
   title: string
   details: string
   multimedia?: NewsItemMultimedia
+  ldFlagKey?: string
 }
 
 const DATE_FORMAT = 'dd MMM yyyy'
 
 export default function NewsItem(props: NewsItemProps) {
   const { date, tag, title, details, multimedia } = props
+
   const formattedDate = DateTime.fromISO(date).toFormat(DATE_FORMAT, {
     locale: 'en-US',
   })
diff --git a/packages/frontend/src/components/NewsDrawer/NewsItemList.ts b/packages/frontend/src/components/NewsDrawer/NewsItemList.ts
@@ -11,6 +11,18 @@ const IF_THEN_EXTERNAL_LINK =
   'https://guide.plumber.gov.sg/user-guides/actions/toolbox'
 
 export const NEWS_ITEM_LIST: NewsItemProps[] = [
+  {
+    date: '2025-11-26',
+    tag: NEW_FEATURE_TAG,
+    title: 'Collaborators — add editors and viewers to your pipes',
+    details: dedent`
+      With collaborators, you can add editors or viewers to help build or troubleshoot your pipe. Read more about permissions and set up [here](https://guide.plumber.gov.sg/user-guides/pipe-settings#collaborators).
+    `,
+    multimedia: {
+      url: 'https://file.go.gov.sg/plumber-collaborators-whats-new.png',
+    },
+    ldFlagKey: 'collaborators',
+  },
   {
     date: '2025-09-22',
     tag: NEW_FEATURE_TAG,
diff --git a/packages/frontend/src/components/NewsDrawer/index.tsx b/packages/frontend/src/components/NewsDrawer/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useContext, useMemo, useState } from 'react'
 import {
   Box,
   Button,
@@ -14,17 +14,13 @@ import {
   useDisclosure,
 } from '@chakra-ui/react'
 
+import { LaunchDarklyContext } from '@/contexts/LaunchDarkly'
+
 import NewsItem from './NewsItem'
 import { NEWS_ITEM_LIST } from './NewsItemList'
 
 const LOCAL_STORAGE_LAST_READ_KEY = 'news-drawer-last-read'
 
-// this fetches the latest time from the news
-const latestNewsTimestamp =
-  NEWS_ITEM_LIST.length > 0
-    ? new Date(NEWS_ITEM_LIST[0].date).getTime().toString()
-    : ''
-
 export default function NewsDrawer({
   children,
 }: {
@@ -34,12 +30,29 @@ export default function NewsDrawer({
   const [localLatestTimestamp, setLocalLatestTimestamp] = useState(
     localStorage.getItem(LOCAL_STORAGE_LAST_READ_KEY),
   )
+  const { getFlagValue } = useContext(LaunchDarklyContext)
+
+  const FILTERED_NEWS_ITEM_LIST = useMemo(() => {
+    return NEWS_ITEM_LIST.filter((item) => {
+      if (!item.ldFlagKey) {
+        return true
+      }
+      // default to true since flag may get deleted in future
+      return getFlagValue(item.ldFlagKey, true)
+    })
+  }, [getFlagValue])
+
+  // this fetches the latest time from the news
+  const latestNewsTimestamp =
+    FILTERED_NEWS_ITEM_LIST.length > 0
+      ? new Date(FILTERED_NEWS_ITEM_LIST[0].date).getTime().toString()
+      : ''
 
   const handleOpen = useCallback(() => {
     // only way to update this is to change the news or clear the local storage
     localStorage.setItem(LOCAL_STORAGE_LAST_READ_KEY, latestNewsTimestamp)
     setLocalLatestTimestamp(latestNewsTimestamp)
-  }, [])
+  }, [latestNewsTimestamp])
 
   const { isOpen, onOpen, onClose } = useDisclosure({ onOpen: handleOpen })
 
@@ -78,7 +91,7 @@ export default function NewsDrawer({
               divider={<StackDivider borderColor="gray.300"></StackDivider>}
               spacing="1rem"
             >
-              {NEWS_ITEM_LIST.map((item, index) => (
+              {FILTERED_NEWS_ITEM_LIST.map((item, index) => (
                 <NewsItem key={index} {...item} />
               ))}
             </Stack>
diff --git a/packages/frontend/src/contexts/Editor.tsx b/packages/frontend/src/contexts/Editor.tsx
@@ -115,59 +115,6 @@ type EditorProviderProps = {
   resetFormRef?: React.MutableRefObject<(() => void) | null>
 }
 
-/**
- * Helper function to update the flow in the cache
- */
-function updateHandlerFactory(
-  flowId: string,
-  previousStepId: string,
-  mutationType: 'createStep' | 'updateStep' = 'createStep',
-) {
-  return function stepUpdateHandler(cache: any, mutationResult: any) {
-    const { data } = mutationResult
-    const stepData = data[mutationType]
-
-    // read the flow from the cache to avoid stale data when creating or updating steps
-    // we read from the cache instead of firing a getFlow query on every update
-    // to reduce the UI flicker
-    // TODO (kevinkim-ogp): should just be able to use the flow from the context
-    const { getFlow: flow } = cache.readQuery({
-      query: GET_FLOW,
-      variables: { id: flowId },
-    })
-
-    // getFlow requires certain attributes to be returned
-    const completeStep = {
-      ...stepData,
-      iconUrl: null,
-      webhookUrl: null,
-      config: {
-        stepName: null,
-        templateConfig: {
-          appEventKey: null,
-        },
-      },
-      createdAt: new Date().toISOString(),
-    }
-
-    const steps = flow.steps.reduce((steps: any[], currentStep: any) => {
-      if (mutationType === 'createStep' && currentStep.id === previousStepId) {
-        return [...steps, currentStep, completeStep]
-      }
-
-      return [...steps, currentStep]
-    }, [])
-
-    cache.writeQuery({
-      query: GET_FLOW,
-      variables: { id: flowId },
-      data: {
-        getFlow: { ...flow, updatedAt: stepData.flow.updatedAt, steps },
-      },
-    })
-  }
-}
-
 export const EditorProvider = ({
   flow,
   shouldWarnOnLeave,
@@ -269,39 +216,17 @@ export const EditorProvider = ({
 
       const createdStep = await createStep({
         variables: { input: mutationInput },
-        update: updateHandlerFactory(flowId, previousStepId, 'createStep'),
       })
 
-      const newStep = createdStep.data.createStep
+      let newStep = createdStep.data.createStep
       setCurrentStepId(newStep.id)
 
       // account for the for-each and if-then
-      if (appKey === TOOLBOX_APP_KEY) {
-        // Get the complete step data from the cache
-        const { getFlow: updatedFlow } = client.readQuery({
-          query: GET_FLOW,
-          variables: { id: flowId },
-        })
-
-        const completeStep = updatedFlow.steps.find(
-          (s: IStep) => s.id === newStep.id,
-        )
-
-        if (completeStep) {
-          const completeStepWithFlow = {
-            ...completeStep,
-            flowId: flowId,
-            flow: {
-              updatedAt: newStep.flow.updatedAt,
-            },
-          }
-          if (eventKey === TOOLBOX_ACTIONS.IfThen) {
-            return (await initializeIfThen(
-              completeStepWithFlow,
-            )) as unknown as IStep
-          }
-        }
+      if (appKey === TOOLBOX_APP_KEY && eventKey === TOOLBOX_ACTIONS.IfThen) {
+        newStep = await initializeIfThen(newStep)
       }
+      // we refetch GET_FLOW after everything is completed
+      await client.refetchQueries({ include: [GET_FLOW] })
 
       return newStep as IStep
     },
@@ -340,7 +265,6 @@ export const EditorProvider = ({
 
       const updatedStep = await updateStep({
         variables: { input: mutationInput },
-        update: updateHandlerFactory(flowId, step.id, 'updateStep'),
         onCompleted: () => onCompleted?.(),
       })
 
diff --git a/packages/frontend/src/exports/components.ts b/packages/frontend/src/exports/components.ts
@@ -17,6 +17,7 @@ export { default as EditableInput } from '../components/EditableInput'
 export { default as Editor } from '../components/Editor'
 export { default as EditorLayout } from '../components/EditorLayout'
 export { default as EditorSettings } from '../components/EditorSettings'
+export { default as EditorSettingsFlowCollaborators } from '../components/EditorSettings/FlowCollaborators'
 export { default as EditorSettingsFlowTransfer } from '../components/EditorSettings/FlowTransfer'
 export { default as EditorSettingsNotifications } from '../components/EditorSettings/Notifications'
 export { default as ErrorResult } from '../components/ErrorResult'
diff --git a/packages/types/package.json b/packages/types/package.json

Original file line number	Diff line number	Diff line change
`@@ -111,5 +111,5 @@`
`111`	`111`	`"tsconfig-paths": "^4.2.0",`
`112`	`112`	`"type-fest": "4.10.3"`
`113`	`113`	`},`
`114`		`- "version": "1.56.1"`
	`114`	`+ "version": "1.56.2"`
`115`	`115`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "frontend",`
`3`		`- "version": "1.56.1",`
	`3`	`+ "version": "1.56.2",`
`4`	`4`	`"type": "module",`
`5`	`5`	`"scripts": {`
`6`	`6`	`"dev": "wait-on tcp:3000 && vite --host --force",`
Original file line number	Diff line number	Diff line change
`@@ -119,7 +119,7 @@ const AddNewCollaborator = ({`
`119`	`119`	`type="submit"`
`120`	`120`	`isLoading={isAdding}`
`121`	`121`	`isDisabled={!isValid}`
`122`		`- alignSelf="flex-end"`
	`122`	`+ alignSelf="flex-start"`
`123`	`123`	`>`
`124`	`124`	`Add collaborator`
`125`	`125`	`</Button>`
Original file line number	Diff line number	Diff line change
`@@ -105,7 +105,7 @@ export default function FlowTransfer() {`
`105`	`105`	`<Button`
`106`	`106`	`type="submit"`
`107`	`107`	`isDisabled={shouldDisableInput \|\| !isValid}`
`108`		`- alignSelf="flex-end"`
	`108`	`+ alignSelf="flex-start"`
`109`	`109`	`mt={8}`
`110`	`110`	`>`
`111`	`111`	`Transfer Pipe`
Original file line number	Diff line number	Diff line change
`@@ -100,7 +100,7 @@ function NotificationFormFields() {`
`100`	`100`	`w="fit-content"`
`101`	`101`	`type="submit"`
`102`	`102`	`isDisabled={!isDirty \|\| isReadOnly}`
`103`		`- alignSelf="flex-end"`
	`103`	`+ alignSelf="flex-start"`
`104`	`104`	`>`
`105`	`105`	`{isDirty ? 'Save' : 'Saved'}`
`106`	`106`	`</Button>`