feat: sgID to MyInfo migration (#1167)

## Problem

FormSG is doing a deprecation of sgID authentication and moving towards
Singpass/MyInfo authentication. As a result the field `sgidUinFin` will
be replaced by `uinFin`. This will break existing pipes that rely on
that variable.

## Solution

To maintain backwards compatibility and to ensure that current pipes do
not break, we have to duplicate `uinFin` to `sgidUinFin`. And to hide
one of `sgidUinFin` variable in the variable list and suggestions popper
so users dont get confused.

This PR introduces another metadata key called `isHiddenFromList`. If
true, this variable will not appear in the variable list but will still
render properly if the variable is already selected and in use.

### Screenshots

1. Hidden from variable list
<img width="406" height="219" alt="image"
src="https://github.com/user-attachments/assets/be0591a1-85ba-4b79-96fa-678f8c76b16f"
/>

2. Both variables (`uinFin` and `sgidUinFin` still displays properly)
<img width="956" height="416" alt="image"
src="https://github.com/user-attachments/assets/598fef6d-0e12-46e5-aa3a-fec3addc4d1a"
/>

Author: pregnantboy

packages/backend/src/apps/formsg/__tests__/auth/decrypt-form-response.test.ts

@@ -279,7 +279,6 @@ describe('decrypt form response', () => {
           ],
           verified: {
             uinFin: 'S1234567A',
-            sgidUinFin: 'S2345678B',
             cpUid: 'U987654323PLUMBER',
           },
         })
@@ -313,7 +312,7 @@ describe('decrypt form response', () => {
             },
             verifiedSubmitterInfo: {
               uinFin: 'S1234567A',
-              sgidUinFin: 'S2345678B',
+              sgidUinFin: 'S1234567A',
               cpUid: 'U987654323PLUMBER',
             },
           }),
@@ -371,7 +370,7 @@ describe('decrypt form response', () => {
             },
             verifiedSubmitterInfo: {
               uinFin: 'Z1cImQNbDXdmOaeS2roacWNxH7MbJC75OiEeYOjSbRo=',
-              sgidUinFin: 'UAM3XbFrbNVVuD9Phz3KV/roZj4aG/Ql3Ap5Y5dTtJ4=',
+              sgidUinFin: 'Z1cImQNbDXdmOaeS2roacWNxH7MbJC75OiEeYOjSbRo=',
               cpUid: 'U987654323PLUMBER',
             },
           }),
@@ -407,7 +406,7 @@ describe('decrypt form response', () => {
             },
             verifiedSubmitterInfo: {
               uinFin: 'xxxxx567A',
-              sgidUinFin: 'xxxxx678B',
+              sgidUinFin: 'xxxxx567A',
               cpUid: 'U987654323PLUMBER',
             },
           }),
@@ -426,7 +425,6 @@ describe('decrypt form response', () => {
           },
         ],
         verified: {
-          sgidUinFin: 'S1234567A',
           uinFin: '12345678B',
           cpUid: 'U987654323PLUMBER',
           cpUen: '987654321Z',
@@ -438,7 +436,7 @@ describe('decrypt form response', () => {
       expect($.request.body).toEqual(
         expect.objectContaining({
           verifiedSubmitterInfo: {
-            sgidUinFin: 'S1234567A',
+            sgidUinFin: '12345678B',
             uinFin: '12345678B',
             cpUid: 'U987654323PLUMBER',
             cpUen: '987654321Z',

packages/backend/src/apps/formsg/auth/decrypt-form-response.ts

@@ -189,6 +189,10 @@ export async function decryptFormResponse(
         }
 
         verifiedSubmitterInfo[key] = value
+        // for backwards compatibility with old forms that were created with sgID authType
+        if (key === 'uinFin') {
+          verifiedSubmitterInfo['sgidUinFin'] = value
+        }
       }
     }
 

packages/backend/src/apps/formsg/triggers/new-submission/get-data-out-metadata.ts

@@ -222,7 +222,10 @@ function buildAnswerArrayMetadatum(
 function buildVerifiedSubmitterInfoMetadata(
   data: IJSONObject,
 ): IDataOutMetadata | null {
-  if (!data.verifiedSubmitterInfo) {
+  if (
+    !data.verifiedSubmitterInfo ||
+    typeof data.verifiedSubmitterInfo !== 'object'
+  ) {
     return null
   }
 
@@ -234,7 +237,10 @@ function buildVerifiedSubmitterInfoMetadata(
         metadata.uinFin = { label: 'NRIC/FIN (Verified)' }
         break
       case 'sgidUinFin':
-        metadata.sgidUinFin = { label: 'NRIC/FIN (Verified)' }
+        metadata.sgidUinFin = {
+          label: 'NRIC/FIN (Verified)',
+          isHiddenFromList: 'uinFin' in data.verifiedSubmitterInfo,
+        }
         break
       case 'cpUid':
         metadata.cpUid = { label: 'CorpPass UID (Verified)' }

packages/backend/src/apps/formsg/triggers/new-submission/get-mock-data.ts

@@ -40,18 +40,16 @@ function generateVerifiedSubmitterInfoData(
 ): Record<string, Record<string, string>> {
   const filteredNric = filterNric($, MOCK_NRIC)
   switch (authType) {
-    case 'SGID':
-    case 'SGID_MyInfo':
-      return {
-        verifiedSubmitterInfo: {
-          sgidUinFin: filteredNric,
-        },
-      }
-    case 'SP':
+    case 'SGID': // deprecated
+    case 'SGID_MyInfo': // deprecated
+    case 'SP': // deprecated
     case 'MyInfo':
+      // for backwards compatibility with old forms that were created with sgID authType,
+      // we need to return both uinFin and sgidUinFin
       return {
         verifiedSubmitterInfo: {
           uinFin: filteredNric,
+          sgidUinFin: filteredNric,
         },
       }
     case 'CP':

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

@@ -25,7 +25,7 @@ import TableVariableItem from './TableVariableItem'
 function VariableTag({
   type,
 }: {
-  type: TDataOutMetadatumType | null
+  type?: TDataOutMetadatumType
 }): JSX.Element | null {
   const { label, tooltip } = useMemo(() => {
     switch (type) {
@@ -156,6 +156,9 @@ export default function VariablesList(props: VariablesListProps) {
     const defaultVariables: Variable[] = []
     const collapsedVariables: Variable[] = []
     for (const variable of variables) {
+      if (variable.isHiddenFromList) {
+        continue
+      }
       if (variable.isCollapsedByDefault) {
         collapsedVariables.push(variable)
       } else {
@@ -165,7 +168,7 @@ export default function VariablesList(props: VariablesListProps) {
     return { defaultVariables, collapsedVariables }
   }, [variables])
 
-  if (!variables || variables.length === 0) {
+  if (!variables || defaultVariables.length + collapsedVariables.length === 0) {
     return <></>
   }
 

packages/frontend/src/helpers/variables.ts

@@ -24,12 +24,7 @@ export interface StepWithVariables {
   output: Variable[]
   addNew?: boolean
 }
-export interface Variable {
-  label: string | null
-  type: TDataOutMetadatumType | null
-  order: number | null
-  displayedValue: string | null
-  isCollapsedByDefault: boolean
+export interface Variable extends IDataOutMetadatum {
   /**
    * CAVEAT: not _just_ a name; it contains the lodash.get path for dataOut. Do
    * not clobber unless you know what you're doing!
@@ -38,12 +33,6 @@ export interface Variable {
   value: unknown
   // NOTE: used in some variables as unique key
   id?: string
-  /**
-   * NOTE: used to hide columns in the variables list, specifically for 'table' object
-   * we still need them in the dataOut to compare parameters against the last test execution
-   * at the for-each step
-   */
-  isHidden?: boolean
 }
 
 function sortVariables(variables: Variable[]): void {
@@ -83,6 +72,7 @@ const process = (
     order = null,
     displayedValue = null,
     isCollapsedByDefault = false,
+    isHiddenFromList = false,
   } = metadata
 
   if (isHidden) {
@@ -99,6 +89,7 @@ const process = (
         type,
         order,
         isCollapsedByDefault,
+        isHiddenFromList, // only applies to text type for now
       },
     ]
   }

packages/types/index.d.ts

@@ -72,6 +72,9 @@ export interface IDataOutMetadatum {
 
   /**
    * Generally defaults to `false` in the front end if unspecified.
+   * NOTE: used to hide columns in the variables list, specifically for 'table' object
+   * we still need them in the dataOut to compare parameters against the last test execution
+   * at the for-each step
    */
   isHidden?: boolean
 
@@ -105,6 +108,13 @@ export interface IDataOutMetadatum {
    * the "Show more" section in the variable list.
    */
   isCollapsedByDefault?: boolean
+
+  /**
+   * Is hidden from the variable list but variable is still displayed properly if
+   * already in use. For e.g. this is used to preserve the old `sgidUinFin` variable
+   * but we dont want to show to UIN/FIN variables in variable list
+   */
+  isHiddenFromList?: boolean
 }
 
 export interface IDataOutMetadata {