fix: editor cannot create excel step (#1329)

## Problem
* Editor could not create Excel step even though connection has been
shared by Owner
  * Caused by returning the wrong connection to the Editor
* Editor could add step on frontend even though connection has not been
shared by Owner (cannot actually create step in the backend, but its
confusing for the user)

## Solution
* Return the correct Excel connection for the Editor (should see the
shared connection instead of own connection)
* Should prompt to get 

## Tests
- [ ] Editor can create excel step for Pipe where Excel connection has
already been shared
- [ ] Editor sees prompt for Owner to create Excel connection if there
is none

## Other misc fixes
* Updated dependency array in useCallback

Author: kevinkim-ogp

packages/backend/src/graphql/__tests__/mutations/update-step.itest.ts

@@ -491,7 +491,7 @@ describe('updateStep mutation', () => {
       })
     })
 
-    it('should call patchFlowConnectionMetadata when its an excel app', async () => {
+    it('should call patchFlowConnectionMetadata or addFlowConnection when its an excel app', async () => {
       context.currentUser.withAccessibleSteps = createMockWithAccessibleSteps({
         owner,
         currentUser: context.currentUser,
@@ -519,9 +519,10 @@ describe('updateStep mutation', () => {
         connectionId: mockConnectionId,
         parameterKey: 'fileId',
         parameterValue: '1234567890',
+        addedBy: owner.id,
         trx: expect.anything(),
       })
-      expect(addSpy).not.toHaveBeenCalled()
+      expect(addSpy).toHaveBeenCalled()
     })
 
     it('should call patchFlowConnectionMetadata when app has connection fields and parameter exists', async () => {

packages/backend/src/graphql/queries/get-app.ts

@@ -1,20 +1,84 @@
 import App from '@/models/app'
 import Connection from '@/models/connection'
+import Context from '@/types/express/context'
 
 import type { QueryResolvers } from '../__generated__/types.generated'
 
+const getSharedConnections = async (
+  context: Context,
+  flowId: string,
+  key: string,
+  isDraft: boolean,
+) => {
+  const flow = await context.currentUser
+    .withAccessibleFlows({ requiredRole: 'viewer' })
+    .findById(flowId)
+    .throwIfNotFound({ message: 'Pipe not found' })
+
+  const flowConnections = await context.currentUser
+    .withAccessibleFlowConnections({ requiredRole: 'viewer' })
+    .join('connections', 'connections.id', 'flow_connections.connection_id')
+    .withGraphFetched('connection')
+    .where({
+      'flows.id': flowId,
+      'connections.key': key,
+      'connections.draft': isDraft,
+    })
+
+  if (flowConnections.length === 0) {
+    return {
+      flowRole: flow.role,
+      sharedConnections: [],
+    }
+  }
+
+  return {
+    flowRole: flow.role,
+    sharedConnections: flowConnections
+      // in the rare case that the connection was deleted or not found
+      // flowConnection.connection is null, which will throw error
+      // when we attempt to assign the description
+      .filter((flowConnection) => flowConnection?.connection)
+      .map((flowConnection) =>
+        Object.assign(flowConnection?.connection, {
+          description: 'This connection can only be used in this pipe.',
+        }),
+      ),
+  }
+}
+
 const getApp: QueryResolvers['getApp'] = async (_parent, params, context) => {
-  const app = await App.findOneByKey(params.key)
+  const { flowId, key } = params
+  const app = await App.findOneByKey(key)
 
   if (!context.currentUser) {
     return app
   }
 
   if (app.auth?.connectionType === 'system-added') {
+    /**
+     * NOTE: flow id is only provided in the pipe editor.
+     * it is not provided at the 'My Apps' page, so no need to fetch shared connections
+     */
+    if (flowId) {
+      const { sharedConnections, flowRole } = await getSharedConnections(
+        context,
+        flowId,
+        key,
+        true,
+      )
+
+      if (flowRole === 'editor') {
+        return { ...app, connections: sharedConnections }
+      }
+    }
+
     const connections = await app.auth.getSystemAddedConnections(
       context.currentUser,
     )
 
+    // NOTE: we don't merge the connections as only one system-added connection is allowed in a Pipe.
+    // for example, you cannot use two different Excel connections in one Pipe.
     return {
       ...app,
       connections,
@@ -29,28 +93,12 @@ const getApp: QueryResolvers['getApp'] = async (_parent, params, context) => {
      */
 
     if (params.flowId) {
-      const flow = await context.currentUser
-        .withAccessibleFlows({ requiredRole: 'viewer' })
-        .findById(params.flowId)
-        .throwIfNotFound({ message: 'Pipe not found' })
-
-      const flowConnections = await context.currentUser
-        .withAccessibleFlowConnections({ requiredRole: 'viewer' })
-        .join('connections', 'connections.id', 'flow_connections.connection_id')
-        .withGraphFetched('connection')
-        .where({
-          'flows.id': params.flowId,
-          'connections.key': params.key,
-          'connections.draft': false,
-        })
-
-      sharedConnections = flowConnections.map((flowConnection) =>
-        Object.assign(flowConnection.connection, {
-          description: 'This connection can only be used in this pipe.',
-        }),
-      )
+      const { sharedConnections: sharedConnectionsFromFlow, flowRole } =
+        await getSharedConnections(context, flowId, key, false)
+
+      sharedConnections = sharedConnectionsFromFlow
 
-      if (flow.role === 'editor') {
+      if (flowRole === 'editor') {
         return {
           ...app,
           connections: sharedConnections,

packages/backend/src/helpers/add-flow-connection.ts

@@ -40,6 +40,7 @@ async function addFlowConnection({
       connectionId,
       parameterKey,
       parameterValue: step.parameters[parameterKey] as string,
+      addedBy,
       trx,
     })
   } else {

packages/backend/src/models/flow-connections.ts

@@ -134,25 +134,39 @@ class FlowConnections extends Base {
     connectionId,
     parameterKey,
     parameterValue,
+    addedBy,
     trx,
   }: {
     flowId: string
     connectionId: string
     parameterKey: string
     parameterValue: string
+    addedBy: string
     trx?: Transaction
   }) => {
-    return await this.query(trx)
-      .where({
-        flow_id: flowId,
-        connection_id: connectionId,
-      })
-      .patch({
-        // ensure distinct metadata values, we do it in the query to avoid
-        // having additional queries to get the array, de-duplicate and then
-        // update the DB
-        metadata: FlowConnections.raw(
-          `
+    /**
+     * EDGE CASE
+     * handle edge case where if we delete the M365-Excel connection and add it back via an update step, we need to ensure that the connection exists first.
+     * new M365-Excel connection will have a new connection id, so it will not exist for patching.
+     * we need to insert it instead.
+     */
+    const exists = await this.query(trx).findOne({
+      flow_id: flowId,
+      connection_id: connectionId,
+    })
+
+    if (exists) {
+      return await this.query(trx)
+        .where({
+          flow_id: flowId,
+          connection_id: connectionId,
+        })
+        .patch({
+          // ensure distinct metadata values, we do it in the query to avoid
+          // having additional queries to get the array, de-duplicate and then
+          // update the DB
+          metadata: FlowConnections.raw(
+            `
             jsonb_set(
               metadata,
               ?::text[],
@@ -165,9 +179,18 @@ class FlowConnections extends Base {
               true
             )
             `,
-          [`{${parameterKey}}`, parameterKey, parameterValue],
-        ),
-      })
+            [`{${parameterKey}}`, parameterKey, parameterValue],
+          ),
+        })
+    }
+
+    return await this.addFlowConnection({
+      flowId,
+      connectionId,
+      addedBy,
+      connectionType: 'connection',
+      trx,
+    })
   }
 
   /**

packages/frontend/src/components/Editor/constants.ts

@@ -6,23 +6,69 @@ export const EDITOR_RIGHT_DRAWER_WIDTH = '60%'
 export const MIN_FLOW_STEP_WIDTH = '320px'
 
 /**
- * NOTE: there are certain fields that behave like connections
- * we use this to manage two things:
- * 1. which apps do not allow collaborators to edit their connections
- * 2. which fields behave like connections
+ * Field definition for fields that collaborators cannot add new options for.
+ * Each field is identified by both its label and key to handle cases where
+ * different actions may share the same key but have different labels.
+ */
+type RestrictedField = {
+  /** display label of the field */
+  label: string
+  /** key of the field */
+  key: string
+}
+
+/**
+ * Purpose:
+ * - Prevents collaborators from modifying connections
+ * - Prevents collaborators from adding new options for specified fields
+ *
+ * Structure:
+ * - Key: The app identifier (e.g., 'm365-excel', 'tiles')
+ * - Value: Array of fields that collaborators cannot add new options for
  *
- * we do not allow collaborators to edit these fields
- * we use both the label and key as there are some
- * actions that have the same key but use different labels
+ * Any key (app) that is specified here will have its connection fields restricted for collaborators.
+ * The value (array of fields) specifies the fields where collaborators cannot add new options.
+ *
+ * Example:
+ * ```
+ * {
+ *   // collaborators cannot modify the connection, but can perform use all other fields without restrictions
+ *   // in this case, the collaborator cannot change the M365-Excel connection,
+ *   // but can use all the fields without restrictions
+ *   'm365-excel': [],
+ *
+ *   // collaborators cannot modify the connection,
+ *   // collaborators also cannot add new options for these specified fields
+ *   // in this case, the collaborator cannot add new tiles inline via the dropdown
+ *   'tiles': [
+ *     { label: 'Select Tile', key: 'tableId' },
+ *   ]
+ * }
+ * ```
  */
-const NON_EDITABLE_APPS_FIELDS: Record<string, Record<string, string>[]> = {
+const NON_EDITABLE_APPS_FIELDS: Record<string, RestrictedField[]> = {
+  /**
+   * M365-Excel
+   * collaborators cannot modify the connection, each user can only have one M365-Excel connection.
+   */
   'm365-excel': [],
+
+  /**
+   * TILES
+   * collaborators cannot add new Tiles directly via the dropdown.
+   * they can only select from Tiles that the Owner has used in the Pipe.
+   */
+  tiles: [{ label: 'Select Tile', key: 'tableId' }],
 }
 
 export const NON_EDITABLE_APP_CONNECTIONS = Object.keys(
   NON_EDITABLE_APPS_FIELDS,
 )
 
-export const NON_EDITABLE_CONNECTION_FIELDS = Object.values(
+/**
+ * Flattened array of all fields where collaborators cannot add new options.
+ * This is derived from NON_EDITABLE_APPS_FIELDS and used for quick field-level checks.
+ */
+export const COLLABORATOR_RESTRICTED_FIELDS = Object.values(
   NON_EDITABLE_APPS_FIELDS,
 ).flat()

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

@@ -88,7 +88,7 @@ export default function EditorLayout() {
         },
       })
     },
-    [flow?.id, flowId, updateFlow],
+    [flow?.updatedAt, flowId, updateFlow],
   )
 
   const onFlowStatusUpdate = useCallback(

packages/frontend/src/components/FlowStepConfigurationModal/ChooseAndAddConnection/ConfigureExcelConnection.tsx

@@ -13,6 +13,7 @@ import {
 import { Button, ModalCloseButton } from '@opengovsg/design-system-react'
 
 import microsoftFolder from '@/assets/microsoft-folder.svg'
+import { EditorContext } from '@/contexts/Editor'
 import useAuthentication from '@/hooks/useAuthentication'
 
 import BackButton from '../BackButton'
@@ -134,6 +135,7 @@ export default function ConfigureExcelConnection(
   props: ConfigureExcelConnectionProps,
 ) {
   const { onBack, onCreateOrUpdateStep } = props
+  const { flow } = useContext(EditorContext)
   const { modalState, step } = useContext(FlowStepConfigurationContext)
   const { selectedApp, selectedConnectionId } = modalState
   const connectionModalLabel = selectedApp?.auth?.connectionModalLabel
@@ -190,6 +192,8 @@ export default function ConfigureExcelConnection(
               await onCreateOrUpdateStep(selectedConnectionId)
             }
           />
+        ) : flow.role !== 'owner' && !selectedConnectionId ? (
+          <>Only the owner of this Pipe can create an Excel connection</>
         ) : (
           <ConfigurationConnectionContent
             userEmail={currentUser?.email ?? ''}

packages/frontend/src/components/FlowStepConfigurationModal/ChooseAppAndEvent/index.tsx

@@ -31,6 +31,7 @@ export default function ChooseAppAndEvent(props: ChooseAppAndEventProps) {
     allApps,
     onDrawerOpen,
     setCurrentStepId,
+    flowId,
   } = useContext(EditorContext)
 
   const { modalState, patchModalState, prevStepId, isTrigger, step } =
@@ -44,7 +45,7 @@ export default function ChooseAppAndEvent(props: ChooseAppAndEventProps) {
 
   // This is used for specifically Excel connections (to skip the connection configuration modal)
   const { data: appConnectionsData } = useQuery(GET_APP_CONNECTIONS, {
-    variables: { key: selectedApp?.key },
+    variables: { key: selectedApp?.key, flowId },
     skip: selectedApp?.key !== EXCEL_APP_KEY,
   })
   // Check and return the one and only Excel connection

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

@@ -13,7 +13,7 @@ import { EditorContext } from '@/contexts/Editor'
 import { useIsFieldHidden } from '@/helpers/isFieldHidden'
 import useDynamicData from '@/hooks/useDynamicData'
 
-import { NON_EDITABLE_CONNECTION_FIELDS } from '../Editor/constants'
+import { COLLABORATOR_RESTRICTED_FIELDS } from '../Editor/constants'
 
 import BooleanRadio from './BooleanRadio'
 
@@ -58,7 +58,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
   const { flow } = useContext(EditorContext)
 
   const canCollaboratorAddNew =
-    !NON_EDITABLE_CONNECTION_FIELDS.find(
+    !COLLABORATOR_RESTRICTED_FIELDS.find(
       (item) => item.label === label && item.key === name,
     ) && flow?.role === 'editor'
   const isReadOnly =

packages/frontend/src/components/NewsDrawer/NewsItemList.ts

@@ -11,17 +11,6 @@ const IF_THEN_EXTERNAL_LINK =
   'https://guide.plumber.gov.sg/user-guides/actions/toolbox'
 
 export const NEWS_ITEM_LIST: NewsItemProps[] = [
-  {
-    date: '2025-11-21',
-    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',
-    },
-  },
   {
     date: '2025-09-22',
     tag: NEW_FEATURE_TAG,