feat(form-v2): add MyInfo badge to form builder for MyInfo fields

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx

@@ -49,6 +49,7 @@ import {
   augmentWithMyInfoDisplayValue,
   extractPreviewValue,
   hasExistingFieldValue,
+  isMyInfo,
 } from '~features/myinfo/utils'
 
 import { useBuilderAndDesignContext } from '../../BuilderAndDesignContext'
@@ -100,6 +101,8 @@ export const FieldRowContainer = ({
 
   const colorTheme = useDesignColorTheme()
 
+  const isMyInfoField = useMemo(() => isMyInfo(field), [field])
+
   const defaultFieldValues = useMemo(() => {
     if (field.fieldType === BasicField.Table) {
       return {
@@ -281,7 +284,11 @@ export const FieldRowContainer = ({
                 opacity={isActive || !isHiddenByLogic ? '100%' : '30%'}
               >
                 <FormProvider {...formMethods}>
-                  <MemoFieldRow field={field} colorTheme={colorTheme} />
+                  <MemoFieldRow
+                    field={field}
+                    colorTheme={colorTheme}
+                    showMyInfoBadge={isMyInfoField}
+                  />
                 </FormProvider>
               </Box>
               <Collapse in={isActive} style={{ width: '100%' }}>
@@ -339,6 +346,7 @@ export const FieldRowContainer = ({
 type MemoFieldRowProps = {
   field: FormFieldDto
   colorTheme?: FormColorTheme
+  showMyInfoBadge?: boolean
 }
 
 const MemoFieldRow = memo(({ field, ...rest }: MemoFieldRowProps) => {

frontend/src/templates/Field/Date/DateField.tsx

@@ -25,6 +25,7 @@ export interface DateFieldProps extends BaseFieldProps {
 export const DateField = ({
   schema,
   colorTheme = FormColorTheme.Blue,
+  ...fieldContainerProps
 }: DateFieldProps): JSX.Element => {
   const validationRules = useMemo(
     () => createDateValidationRules(schema),
@@ -56,7 +57,7 @@ export const DateField = ({
   const { control } = useFormContext<SingleAnswerFieldInput>()
 
   return (
-    <FieldContainer schema={schema}>
+    <FieldContainer schema={schema} {...fieldContainerProps}>
       <Controller
         control={control}
         name={schema._id}

frontend/src/templates/Field/Dropdown/DropdownField.tsx

@@ -19,6 +19,7 @@ export interface DropdownFieldProps extends BaseFieldProps {
 export const DropdownField = ({
   schema,
   colorTheme = FormColorTheme.Blue,
+  ...fieldContainerProps
 }: DropdownFieldProps): JSX.Element => {
   const validationRules = useMemo(
     () => createDropdownValidationRules(schema),
@@ -28,7 +29,7 @@ export const DropdownField = ({
   const { control } = useFormContext<SingleAnswerFieldInput>()
 
   return (
-    <FieldContainer schema={schema}>
+    <FieldContainer schema={schema} {...fieldContainerProps}>
       <Controller
         control={control}
         rules={validationRules}

frontend/src/templates/Field/FieldContainer.tsx

@@ -5,11 +5,12 @@
  * provides.
  */
 import { FieldError, useFormState } from 'react-hook-form'
-import { FormControl } from '@chakra-ui/react'
+import { Box, FormControl, Grid } from '@chakra-ui/react'
 import { get } from 'lodash'
 
 import { FormColorTheme } from '~shared/types/form'
 
+import Badge from '~components/Badge'
 import FormErrorMessage from '~components/FormControl/FormErrorMessage'
 import FormLabel from '~components/FormControl/FormLabel'
 
@@ -34,6 +35,11 @@ export type BaseFieldProps = {
    * Whether or not the field was prefilled.
    */
   isPrefilled?: boolean
+
+  /**
+   * Whether the MyInfo badge should be shown next to the question name.
+   */
+  showMyInfoBadge?: boolean
 }
 
 export interface FieldContainerProps extends BaseFieldProps {
@@ -44,6 +50,7 @@ export const FieldContainer = ({
   schema,
   children,
   errorKey,
+  showMyInfoBadge,
 }: FieldContainerProps): JSX.Element => {
   const { errors, isSubmitting, isValid } = useFormState({ name: schema._id })
 
@@ -57,14 +64,25 @@ export const FieldContainer = ({
       isInvalid={!!error}
       id={schema._id}
     >
-      <FormLabel
-        questionNumber={
-          schema.questionNumber ? `${schema.questionNumber}.` : undefined
-        }
-        description={schema.description}
+      <Grid
+        gridTemplateAreas={"'formlabel myinfobadge'"}
+        gridTemplateColumns={'1fr auto'}
       >
-        {schema.title}
-      </FormLabel>
+        <FormLabel
+          gridArea="formlabel"
+          questionNumber={
+            schema.questionNumber ? `${schema.questionNumber}.` : undefined
+          }
+          description={schema.description}
+        >
+          {schema.title}
+        </FormLabel>
+        <Box hidden={!showMyInfoBadge} gridArea="myinfobadge">
+          <Badge variant="subtle" colorScheme="secondary">
+            MyInfo
+          </Badge>
+        </Box>
+      </Grid>
       {children}
       <FormErrorMessage>{error?.message}</FormErrorMessage>
     </FormControl>

frontend/src/templates/Field/ShortText/ShortTextField.tsx

@@ -17,6 +17,7 @@ export interface ShortTextFieldProps extends BaseFieldProps {
 export const ShortTextField = ({
   schema,
   isPrefilled,
+  ...fieldContainerProps
 }: ShortTextFieldProps): JSX.Element => {
   const validationRules = useMemo(
     () => createTextValidationRules(schema),
@@ -26,7 +27,7 @@ export const ShortTextField = ({
   const { register } = useFormContext<SingleAnswerFieldInput>()
 
   return (
-    <FieldContainer schema={schema}>
+    <FieldContainer schema={schema} {...fieldContainerProps}>
       <Input
         isPrefilled={isPrefilled}
         aria-label={schema.title}