fix: FRM-1819 add custom detection element addon flag

opengovsg · Sep 18, 2024 · 2998079 · 2998079
1 parent f8514e4
commit 2998079
Show file tree

Hide file tree

Showing 7 changed files with 1,117 additions and 472 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -55,6 +55,8 @@ jobs:
       - name: Publish to Chromatic
         uses: chromaui/action@v1
         # Chromatic GitHub Action options
+        env:
+          NODE_OPTIONS: --max-old-space-size=8192
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.
@@ -68,3 +70,7 @@ jobs:
           skip: dependabot/**
           # Only run when the frontend directory has changes
           untraced: '!(frontend)/**'
+          # temp debug options
+          # debug: true
+          # diagnosticsFile: true
+          # logFile: true
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -153,7 +153,7 @@
     "@types/validator": "^13.7.0",
     "@typescript-eslint/eslint-plugin": "^7.7.1",
     "@typescript-eslint/parser": "^7.7.1",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "chromatic": "^6.2.0",
     "cross-env": "^7.0.3",
     "env-cmd": "^10.1.0",
@@ -179,7 +179,7 @@
     "rimraf": "^3.0.2",
     "storybook": "8.0.9",
     "storybook-react-i18next": "^3.0.1",
-    "vite": "^5.2.10",
+    "vite": "^5.4.6",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.5.2",

diff --git a/frontend/src/components/Input/Input.tsx b/frontend/src/components/Input/Input.tsx
@@ -33,6 +33,10 @@ export interface InputProps extends ChakraInputProps {
    * Whether to prevent default on user pressing the 'Enter' key.
    */
   preventDefaultOnEnter?: boolean
+  /**
+   * Whether there's an input right element. Used to provide additional padding
+   */
+  hasInputRightElement?: boolean
 }
 
 export const Input = forwardRef<InputProps, 'input'>((props, ref) => {
@@ -45,6 +49,7 @@ export const Input = forwardRef<InputProps, 'input'>((props, ref) => {
     'isPrefilled',
     'isPrefillLocked',
     'preventDefaultOnEnter',
+    'hasInputRightElement',
   ])
 
   const preventDefault = useMemo(
@@ -102,7 +107,11 @@ export const Input = forwardRef<InputProps, 'input'>((props, ref) => {
           ref={ref}
           {...preventDefault}
           {...inputProps}
-          sx={props.sx ?? inputStyles.field}
+          sx={merge(
+            props.hasInputRightElement ? { pr: '2.75rem' } : {},
+            inputStyles.field,
+            props.sx,
+          )}
         />
       )
     }

diff --git a/...ign/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditShortText/EditShortText.tsx b/...ign/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditShortText/EditShortText.tsx
@@ -248,6 +248,7 @@ export const EditShortText = ({ field }: EditShortTextProps): JSX.Element => {
                   field._id ??
                   'Field ID will be generated after this field is saved'
                 }
+                hasInputRightElement={Boolean(field._id)}
               />
               {field._id ? (
                 <InputRightElement>

diff --git a/frontend/src/features/admin-form/share/ShareFormModal.tsx b/frontend/src/features/admin-form/share/ShareFormModal.tsx
@@ -279,6 +279,7 @@ export const ShareFormModal = ({
               data-chromatic="ignore"
               isReadOnly
               value={shareLink}
+              hasInputRightElement={Boolean(formId)}
             />
             {formId ? (
               <InputRightElement>
@@ -314,6 +315,7 @@ export const ShareFormModal = ({
             isReadOnly
             isDisabled={isFormPrivate}
             value={`${templateLink}`}
+            hasInputRightElement={Boolean(formId)}
           />
           {formId ? (
             <InputRightElement>
@@ -412,6 +414,7 @@ export const ShareFormModal = ({
                                 setGoLinkHelperText(undefined)
                               }}
                               isReadOnly={goLinkSaved}
+                              hasInputRightElement={goLinkSaved}
                             />
                             {goLinkSaved ? (
                               <InputRightElement>

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -1,22 +1,38 @@
 import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
+import { BuildOptions, defineConfig } from 'vite'
 // @ts-expect-error missing type definitions
 import nodePolyfills from 'vite-plugin-node-stdlib-browser'
 import svgr from 'vite-plugin-svgr'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
+const baseRollupOptions = {
+  // Silence Rollup "use client" warnings
+  // Adapted from https://github.com/vitejs/vite-plugin-react/pull/144
+  onwarn(warning, defaultHandler) {
+    if (
+      warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
+      warning.message.includes('use client')
+    ) {
+      return
+    }
+    defaultHandler(warning)
+  },
+} satisfies BuildOptions['rollupOptions']
+
 export default defineConfig(() => {
   return {
     build: {
       outDir: '../dist/frontend',
       emptyOutDir: true,
       rollupOptions: {
+        ...baseRollupOptions,
         output: {
           // Manually chunk datadog-chunk.ts so it gets preloaded in index.html instead of app.
           manualChunks: {
             'datadog-chunk': ['datadog-chunk.ts'],
           },
         },
+        logLevel: 'silent' as const,
       },
     },
     base: './',