diff --git a/apps/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/EditFieldDrawer.test.tsx b/apps/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/EditFieldDrawer.test.tsx new file mode 100644 index 0000000000..3d5c5a8918 --- /dev/null +++ b/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() + + 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() + + expect(screen.getByRole('alert')).toHaveTextContent( + getUnsupportedFieldMessage('unsupported_field'), + ) + expect(screen.queryByText(TODO_PLACEHOLDER_TEXT)).not.toBeInTheDocument() + }) +}) diff --git a/apps/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/EditFieldDrawer.tsx b/apps/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/EditFieldDrawer.tsx index 46b7839d7f..b93af64838 100644 --- a/apps/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/EditFieldDrawer.tsx +++ b/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 ( + + Unable to edit this field type ({fieldType}). Please contact support if + this issue persists. + + ) +} + export const MemoFieldDrawerContent = memo( ({ field, ...props }) => { const { user } = useUser() @@ -126,7 +143,9 @@ export const MemoFieldDrawerContent = memo( return } - switch (field.fieldType) { + const fieldType = field.fieldType + + switch (fieldType) { case BasicField.Attachment: return case BasicField.Checkbox: @@ -173,8 +192,12 @@ export const MemoFieldDrawerContent = memo( return case BasicField.Signature: return - default: - return
TODO: Insert field options here
+ case BasicField.Children: + return + default: { + const _exhaustiveCheck: never = fieldType + return + } } }, )