fix(admin-form): show unsupported field error

apps/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/EditFieldDrawer.test.tsx

@@ -0,0 +1,45 @@
+import { screen } from '@testing-library/react'
+
+import { BasicField, FieldCreateDto } from 'formsg-shared/types/field'
+
+import { render } from '~/test-utils'
+
+import { getFieldCreationMeta } from '../../utils/fieldCreation'
+
+import { MemoFieldDrawerContent } from './EditFieldDrawer'
+
+vi.mock('~features/user/queries', () => ({
+  useUser: () => ({ user: undefined, isLoading: false }),
+}))
+
+const TODO_PLACEHOLDER_TEXT = 'TODO: Insert field options here'
+
+const getUnsupportedFieldMessage = (fieldType: string) =>
+  `Unable to edit this field type (${fieldType}). Please contact support if this issue persists.`
+
+describe('MemoFieldDrawerContent', () => {
+  it('shows an unsupported field error for non-MyInfo children fields', () => {
+    const field = getFieldCreationMeta(BasicField.Children)
+
+    render(<MemoFieldDrawerContent field={field} />)
+
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      getUnsupportedFieldMessage(BasicField.Children),
+    )
+    expect(screen.queryByText(TODO_PLACEHOLDER_TEXT)).not.toBeInTheDocument()
+  })
+
+  it('shows an unsupported field error for an unregistered runtime field type', () => {
+    const field = {
+      ...getFieldCreationMeta(BasicField.ShortText),
+      fieldType: 'unsupported_field' as BasicField,
+    } as FieldCreateDto
+
+    render(<MemoFieldDrawerContent field={field} />)
+
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      getUnsupportedFieldMessage('unsupported_field'),
+    )
+    expect(screen.queryByText(TODO_PLACEHOLDER_TEXT)).not.toBeInTheDocument()
+  })
+})

apps/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/EditFieldDrawer.tsx

@@ -6,6 +6,8 @@ import {
   MyInfoAttribute,
 } from 'formsg-shared/types/field'
 
+import InlineMessage from '~components/InlineMessage'
+
 import {
   BASICFIELD_TO_DRAWER_META,
   MYINFO_FIELD_TO_DRAWER_META,
@@ -108,6 +110,21 @@ interface MemoFieldDrawerContentProps {
   field: FieldCreateDto
 }
 
+interface UnsupportedFieldTypeMessageProps {
+  fieldType: string
+}
+
+const UnsupportedFieldTypeMessage = ({
+  fieldType,
+}: UnsupportedFieldTypeMessageProps): JSX.Element => {
+  return (
+    <InlineMessage m="1.5rem" role="alert" variant="error">
+      Unable to edit this field type ({fieldType}). Please contact support if
+      this issue persists.
+    </InlineMessage>
+  )
+}
+
 export const MemoFieldDrawerContent = memo<MemoFieldDrawerContentProps>(
   ({ field, ...props }) => {
     const { user } = useUser()
@@ -126,7 +143,9 @@ export const MemoFieldDrawerContent = memo<MemoFieldDrawerContentProps>(
       return <EditMyInfo {...props} field={field} />
     }
 
-    switch (field.fieldType) {
+    const fieldType = field.fieldType
+
+    switch (fieldType) {
       case BasicField.Attachment:
         return <EditAttachment {...props} field={field} />
       case BasicField.Checkbox:
@@ -173,8 +192,12 @@ export const MemoFieldDrawerContent = memo<MemoFieldDrawerContentProps>(
         return <EditAddress {...props} field={field} />
       case BasicField.Signature:
         return <EditSignature {...props} field={field} />
-      default:
-        return <div>TODO: Insert field options here</div>
+      case BasicField.Children:
+        return <UnsupportedFieldTypeMessage fieldType={fieldType} />
+      default: {
+        const _exhaustiveCheck: never = fieldType
+        return <UnsupportedFieldTypeMessage fieldType={_exhaustiveCheck} />
+      }
     }
   },
 )