feat: mfb v1.1 accept-deny re-prompt

frontend/src/features/admin-form/assistance/AssistanceService.ts

@@ -9,7 +9,7 @@ export const makeTextPrompt = ({
   formId: string
   prompt: string
 }) => {
-  return ApiService.post<undefined>(
+  return ApiService.post<{ message: string; createdFieldIds?: string[] }>(
     `${ADMIN_FORM_ENDPOINT}/${formId}/assistance/text-prompt`,
     { prompt },
   ).then(({ data }) => data)

frontend/src/features/admin-form/assistance/mutations.ts

@@ -5,6 +5,7 @@ import { makeTextPrompt } from '~features/admin-form/assistance/AssistanceServic
 
 import { useToast } from '../../../hooks/useToast'
 import { adminFormKeys } from '../common/queries'
+import { useMagicFormBuilderStore } from '../create/builder-and-design/useMagicFormBuilderStore'
 
 export const useAssistanceMutations = () => {
   const { formId } = useParams()
@@ -19,7 +20,16 @@ export const useAssistanceMutations = () => {
   const useMakeTextPromptMutation = useMutation(
     (prompt: string) => makeTextPrompt({ formId, prompt }),
     {
-      onSuccess: () => {
+      onSuccess: (data) => {
+        const { createdFieldIds } = data
+        useMagicFormBuilderStore.setState((state) => {
+          return {
+            recentlyCreatedFieldIds: {
+              ...state.recentlyCreatedFieldIds,
+              [formId]: new Set(createdFieldIds),
+            },
+          }
+        })
         queryClient.invalidateQueries(adminFormKeys.id(formId))
         toast.closeAll()
         toast({ description: 'Form generated successfully', status: 'success' })

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignPlaceholder/EmptyFormPlaceholder.stories.tsx

@@ -32,7 +32,6 @@ const Template: StoryFn = (args) => {
         {...args}
         isDraggingOver={false}
         onClick={() => {}}
-        onMagicFormButtonClick={() => {}}
       />
     </Box>
   )

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderAndDesignPlaceholder/EmptyFormPlaceholder.tsx

@@ -4,132 +4,70 @@ import {
   ButtonProps,
   Center,
   chakra,
-  Flex,
   forwardRef,
   Icon,
   Text,
 } from '@chakra-ui/react'
 
-import { FormResponseMode } from '~shared/types'
-
 import { BxsWidget } from '~assets/icons/BxsWidget'
 import { useIsMobile } from '~hooks/useIsMobile'
 
-import { useAdminForm } from '~features/admin-form/common/queries'
-import { useUser } from '~features/user/queries'
-
-import { MagicFormButton } from './MagicFormButton'
-
-const OrDivider = ({ isMobile }: { isMobile: boolean }) => (
-  <Flex
-    width="100%"
-    maxW={isMobile ? '12rem' : '18rem'}
-    flexDir="row"
-    alignItems="center"
-    justifyContent="space-around"
-    verticalAlign="middle"
-  >
-    <Box flexGrow={1} height="1px" bgColor="black" />
-    <Text
-      textStyle="subhead-2"
-      color="secondary.500"
-      px="1.5rem"
-      textAlign={'center'}
-    >
-      OR
-    </Text>
-    <Box flexGrow={1} height="1px" bgColor="black" />
-  </Flex>
-)
-
 interface EmptyFormPlaceholderProps extends ButtonProps {
   isDraggingOver: boolean
   onClick: () => void
-  onMagicFormButtonClick: () => void
 }
 
 export const EmptyFormPlaceholder = forwardRef<
   EmptyFormPlaceholderProps,
   'button'
->(
-  (
-    { isDraggingOver, onClick, onMagicFormButtonClick, ...props },
-    ref,
-  ): JSX.Element => {
-    // TODO: (MFB) Remove isTest check when MFB is out of beta
-    const isTest = import.meta.env.STORYBOOK_NODE_ENV === 'test'
-    const isMobile = useIsMobile()
-    const { user } = useUser()
-    const { data: form } = useAdminForm()
-    const isStorageMode = form?.responseMode === FormResponseMode.Encrypt
-    // TODO: (MFB) Remove isTest check when MFB is out of beta
-    const isMagicFormBuilderEnabled =
-      isStorageMode && (isTest || user?.betaFlags?.mfb)
+>(({ isDraggingOver, onClick, ...props }, ref): JSX.Element => {
+  const isMobile = useIsMobile()
 
-    const placeholderText = useMemo(() => {
-      if (isDraggingOver) {
-        return 'Drop your field here'
-      }
-      return isMobile
-        ? 'Tap here to add a field'
-        : 'Drag a field from the Builder on the left to start'
-    }, [isDraggingOver, isMobile])
+  const placeholderText = useMemo(() => {
+    if (isDraggingOver) {
+      return 'Drop your field here'
+    }
+    return isMobile
+      ? 'Tap here to add a field'
+      : 'Drag a field from the Builder on the left to start'
+  }, [isDraggingOver, isMobile])
 
-    return (
-      <Box position="relative" h="13.75rem" m={{ base: 0, lg: '1.625rem' }}>
-        <chakra.button
-          _hover={{
-            bg: 'primary.200',
-          }}
-          _focus={{
-            boxShadow: '0 0 0 2px var(--chakra-colors-neutral-500)',
-          }}
-          h="100%"
-          w="100%"
-          border="1px dashed"
-          borderColor={isDraggingOver ? 'primary.700' : 'secondary.300'}
-          borderRadius="4px"
-          bg="neutral.100"
-          transitionProperty="common"
-          transitionDuration="normal"
-          onClick={onClick}
-          {...props}
-          ref={ref}
-        >
-          <Center flexDir="column" gap={'0.75rem'}>
-            <Icon
-              as={BxsWidget}
-              __css={{ color: 'secondary.500', fontSize: '1.5rem' }}
-            />
-            <Text
-              textStyle="subhead-2"
-              color="secondary.500"
-              px="1.5rem"
-              textAlign={'center'}
-            >
-              {placeholderText}
-            </Text>
-            {isMagicFormBuilderEnabled ? (
-              <>
-                <OrDivider isMobile={isMobile} />
-                <Box h="2.75rem">Box</Box>
-              </>
-            ) : null}
-          </Center>
-        </chakra.button>
-        {isMagicFormBuilderEnabled ? (
-          <Box
-            bottom="2.375rem"
-            w="100%"
-            px="2rem"
-            position="absolute"
-            display="flex"
-            justifyContent="center"
+  return (
+    <Box position="relative" h="13.75rem" m={{ base: 0, lg: '1.625rem' }}>
+      <chakra.button
+        _hover={{
+          bg: 'primary.200',
+        }}
+        _focus={{
+          boxShadow: '0 0 0 2px var(--chakra-colors-neutral-500)',
+        }}
+        h="100%"
+        w="100%"
+        border="1px dashed"
+        borderColor={isDraggingOver ? 'primary.700' : 'secondary.300'}
+        borderRadius="4px"
+        bg="neutral.100"
+        transitionProperty="common"
+        transitionDuration="normal"
+        onClick={onClick}
+        {...props}
+        ref={ref}
+      >
+        <Center flexDir="column" gap={'0.75rem'}>
+          <Icon
+            as={BxsWidget}
+            __css={{ color: 'secondary.500', fontSize: '1.5rem' }}
+          />
+          <Text
+            textStyle="subhead-2"
+            color="secondary.500"
+            px="1.5rem"
+            textAlign={'center'}
           >
-            <MagicFormButton onClick={onMagicFormButtonClick} />
-          </Box>
-        ) : null}
-      </Box>
-    )
-  },
-)
+            {placeholderText}
+          </Text>
+        </Center>
+      </chakra.button>
+    </Box>
+  )
+})

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

@@ -19,13 +19,15 @@ interface BuilderFieldsProps {
   responseMode: AdminFormDto['responseMode']
   fields: AdminFormDto['form_fields']
   visibleFieldIds: FieldIdSet
+  highlightFieldIds: FieldIdSet
   isDraggingOver: boolean
 }
 
 export const BuilderFields = ({
   responseMode,
   fields,
   visibleFieldIds,
+  highlightFieldIds,
   isDraggingOver,
 }: BuilderFieldsProps) => {
   const fieldsWithQuestionNos = augmentWithQuestionNo(fields)
@@ -64,6 +66,7 @@ export const BuilderFields = ({
             handleBuilderClick={handleBuilderClick}
             isDirty={isDirty}
             colorTheme={colorTheme}
+            isHighlighted={highlightFieldIds.has(f._id)}
             {...activeFieldExtraProps}
           />
         )

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

@@ -5,6 +5,7 @@ import { BiCog, BiDuplicate, BiGridHorizontal, BiTrash } from 'react-icons/bi'
 import { useIsMutating } from 'react-query'
 import {
   Box,
+  BoxProps,
   ButtonGroup,
   chakra,
   Collapse,
@@ -94,6 +95,30 @@ export interface FieldRowContainerProps {
   colorTheme?: FormColorTheme
   // handleBuilderClick is passed down to prevent unnecessary re-renders from useContext
   handleBuilderClick: CreatePageSidebarContextProps['handleBuilderClick']
+  isHighlighted?: boolean
+}
+
+/**
+ * Used for highlighting fields that were created by Magic Form Builder.
+ */
+const HighlightableBox = ({
+  children,
+  isHighlighted,
+  ...props
+}: {
+  children: React.ReactNode
+  isHighlighted?: boolean
+} & BoxProps) => {
+  return (
+    <Box
+      borderColor="danger.300"
+      borderRadius="0.25rem"
+      borderWidth={isHighlighted ? '0.125rem' : '0'}
+      {...props}
+    >
+      {children}
+    </Box>
+  )
 }
 
 const FieldRowContainer = ({
@@ -106,6 +131,7 @@ const FieldRowContainer = ({
   isDirty,
   colorTheme,
   handleBuilderClick,
+  isHighlighted,
 }: FieldRowContainerProps): JSX.Element => {
   const isMobile = useIsMobile()
   const numFormFieldMutations = useIsMutating(adminFormKeys.base)
@@ -285,7 +311,8 @@ const FieldRowContainer = ({
                   )}
                 </chakra.button>
               </Fade>
-              <Box
+              <HighlightableBox
+                isHighlighted={isHighlighted}
                 px={{ base: '0.75rem', md: '1.5rem' }}
                 pb={{ base: '0.75rem', md: '1.5rem' }}
                 w="100%"
@@ -300,7 +327,7 @@ const FieldRowContainer = ({
                     showMyInfoBadge={isMyInfoField}
                   />
                 </FormProvider>
-              </Box>
+              </HighlightableBox>
               <Collapse in={isActive} style={{ width: '100%' }}>
                 {isActive && (
                   <FieldButtonGroup