fix: formsg connection url (#990)

## Problem

Right now, users can name their form `[UAT]` or `[STAGING]` and the form
link gets broken

## Solution

Add an env to the auth so that the frontend can process whether it is
prod, staging or UAT.

## Tests

- [ ] Staging form shows correct URL and display
- [ ] Prod form shows correct URL and display
- [ ] Prod form with `[UAT]` or `[STAGING]` still shows prod url

Author: m0nggh

packages/backend/src/apps/formsg/__tests__/auth/verify-credentials.test.ts

@@ -115,6 +115,7 @@ describe('verify credentials', () => {
       ).resolves.toBeUndefined()
       expect($.auth.set).toHaveBeenCalledWith({
         screenName: '6443b3ce39eb170011772f98 - Test Form',
+        env: 'prod',
       })
     })
 

packages/backend/src/apps/formsg/auth/verify-credentials.ts

@@ -61,6 +61,7 @@ export const verifyFormCreds = async (
   const prefix = env !== 'prod' ? `[${env.toUpperCase()}] ` : ''
   await $.auth.set({
     screenName: `${prefix}${formId} - ${formTitle}`,
+    env,
   })
 }
 

packages/backend/src/graphql/schema.graphql

@@ -306,6 +306,7 @@ type Connection {
 
 type ConnectionData {
   screenName: String
+  env: String
 }
 
 type ExecutionStep {

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

@@ -38,16 +38,8 @@ interface ConnectionStatus {
 }
 
 const formLinkGenerator = (connectionOption: ConnectionDropdownOption) => {
-  const { label, description: formId } = connectionOption
-  if (label.startsWith('[')) {
-    const endIndex = label.indexOf(']')
-    const env = label.substring(1, endIndex)
-    // Only add subodmain for STAGING and UAT
-    if (env === 'STAGING' || env === 'UAT') {
-      return `https://${env}.form.gov.sg/${formId}`
-    }
-  }
-  return `https://form.gov.sg/${formId}`
+  const { description: formId, env } = connectionOption
+  return `https://${env === 'prod' ? '' : `${env}.`}form.gov.sg/${formId}`
 }
 
 const excelFolderLinkGenerator = (userEmail: string) => {

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

@@ -22,6 +22,7 @@ export type ConnectionDropdownOption = {
   label: string
   value: string
   description?: string
+  env?: string // only used for FormSG now
 }
 
 // For FormSG, it will generate a label with the form title and the description with the form id
@@ -33,20 +34,23 @@ export const optionGenerator = (
 ): ConnectionDropdownOption => {
   const screenName = connection?.formattedData?.screenName as string
   if (appKey === 'formsg') {
+    // old form connections will have env as undefined and be treated as prod
+    const env = (connection?.formattedData?.env as string) ?? 'prod'
+
     // parse the screenName to get the env, formId, and formTitle
     const [envWithFormId, formTitle] = screenName.split(' - ')
-    let env = ''
     let formId = envWithFormId
-    if (envWithFormId.startsWith('[')) {
+    // only if the env is not prod, we need to parse the env from the screenName
+    if (env !== 'prod') {
       const endIndex = envWithFormId.indexOf(']')
-      env = envWithFormId.substring(0, endIndex + 1) + ' '
       formId = envWithFormId.substring(endIndex + 2) // skip "]"
     }
 
     return {
-      label: `${env}${formTitle}`,
+      label: `${env === 'prod' ? '' : `[${env.toUpperCase()}] `}${formTitle}`,
       value: connection?.id as string,
       description: formId,
+      env,
     }
   }
 

packages/frontend/src/graphql/queries/get-app-connections.ts

@@ -11,6 +11,7 @@ export const GET_APP_CONNECTIONS = gql`
         flowCount
         formattedData {
           screenName
+          env
         }
         createdAt
       }

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

@@ -22,6 +22,7 @@ export const GET_FLOW = gql`
           createdAt
           formattedData {
             screenName
+            env
           }
         }
         parameters