feat(v2): implement admin form delete logic feature

frontend/src/features/admin-form/create/logic/CreatePageLogicTab.stories.tsx

@@ -8,14 +8,18 @@ import {
   LogicType,
 } from '~shared/types/form'
 
-import { getAdminFormResponse } from '~/mocks/msw/handlers/admin-form'
+import {
+  deleteLogic,
+  getAdminFormResponse,
+} from '~/mocks/msw/handlers/admin-form'
 
 import { StoryRouter, viewports } from '~utils/storybook'
 
 import { CreatePageLogicTab } from './CreatePageLogicTab'
 
 const buildMswRoutes = (overrides?: Partial<AdminFormDto>, delay = 0) => [
   getAdminFormResponse(overrides, delay),
+  deleteLogic(delay),
 ]
 
 export default {

frontend/src/features/admin-form/create/logic/FormLogicService.ts

@@ -0,0 +1,12 @@
+import { ApiService } from '~services/ApiService'
+
+import { ADMIN_FORM_ENDPOINT } from '~features/admin-form/common/AdminViewFormService'
+
+export const deleteFormLogic = async (
+  formId: string,
+  logicId: string,
+): Promise<true> => {
+  return ApiService.delete(
+    `${ADMIN_FORM_ENDPOINT}/${formId}/logic/${logicId}`,
+  ).then(() => true)
+}

frontend/src/features/admin-form/create/logic/components/DeleteLogicModal/DeleteLogicModal.tsx

@@ -0,0 +1,86 @@
+import { useCallback } from 'react'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  Text,
+  useBreakpointValue,
+} from '@chakra-ui/react'
+
+import { LogicDto } from '~shared/types/form'
+
+import Button from '~components/Button'
+import { ModalCloseButton } from '~components/Modal'
+
+import { useLogicMutations } from '../../mutations'
+
+interface DeleteLogicModalProps {
+  onClose: () => void
+  isOpen: boolean
+  logicId: LogicDto['_id']
+}
+
+export const DeleteLogicModal = ({
+  onClose,
+  isOpen,
+  logicId,
+}: DeleteLogicModalProps): JSX.Element => {
+  const { deleteLogicMutation } = useLogicMutations()
+  const modalSize = useBreakpointValue({
+    base: 'mobile',
+    xs: 'mobile',
+    md: 'md',
+  })
+
+  const handleDelete = useCallback(() => {
+    return deleteLogicMutation.mutate(logicId)
+  }, [deleteLogicMutation, logicId])
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size={modalSize}
+      closeOnOverlayClick={!deleteLogicMutation.isLoading}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalCloseButton isDisabled={deleteLogicMutation.isLoading} />
+        <ModalHeader color="secondary.700">Delete logic</ModalHeader>
+        <ModalBody whiteSpace="pre-line">
+          <Text textStyle="body-2" color="secondary.500">
+            Are you sure you want to delete this logic? This action is not
+            reversible.
+          </Text>
+        </ModalBody>
+        <ModalFooter>
+          <Stack
+            direction={{ base: 'column', md: 'row' }}
+            w="100%"
+            justify="flex-end"
+          >
+            <Button
+              variant="clear"
+              isDisabled={deleteLogicMutation.isLoading}
+              colorScheme="secondary"
+              onClick={onClose}
+            >
+              No, don't delete
+            </Button>
+            <Button
+              colorScheme="danger"
+              onClick={handleDelete}
+              isLoading={deleteLogicMutation.isLoading}
+            >
+              Yes, delete logic
+            </Button>
+          </Stack>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

frontend/src/features/admin-form/create/logic/components/DeleteLogicModal/index.ts

@@ -0,0 +1 @@
+export { DeleteLogicModal } from './DeleteLogicModal'

frontend/src/features/admin-form/create/logic/components/LogicContent/LogicBlock/LogicBlock.tsx

@@ -1,9 +1,20 @@
 import { useMemo } from 'react'
-import { Box, Divider, Stack, StackDivider, Text } from '@chakra-ui/react'
+import { BiTrash } from 'react-icons/bi'
+import {
+  Box,
+  Divider,
+  Stack,
+  StackDivider,
+  Text,
+  useDisclosure,
+} from '@chakra-ui/react'
 
 import { LogicDto, LogicType } from '~shared/types/form'
 
+import IconButton from '~components/IconButton'
+
 import { useAdminFormLogic } from '../../../hooks/useAdminFormLogic'
+import { DeleteLogicModal } from '../../DeleteLogicModal'
 
 import { FieldLogicBadge } from './FieldLogicBadge'
 import { LogicBadge } from './LogicBadge'
@@ -15,6 +26,7 @@ interface LogicBlockProps {
 
 export const LogicBlock = ({ logic }: LogicBlockProps): JSX.Element | null => {
   const { mapIdToField } = useAdminFormLogic()
+  const { isOpen, onClose, onOpen } = useDisclosure()
 
   const renderThenContent = useMemo(() => {
     if (!mapIdToField) return null
@@ -49,7 +61,9 @@ export const LogicBlock = ({ logic }: LogicBlockProps): JSX.Element | null => {
       bg="white"
       border="1px solid"
       borderColor="neutral.300"
+      pos="relative"
     >
+      <DeleteLogicModal isOpen={isOpen} onClose={onClose} logicId={logic._id} />
       <Stack
         spacing="1.5rem"
         divider={<StackDivider borderColor="secondary.100" />}
@@ -82,6 +96,16 @@ export const LogicBlock = ({ logic }: LogicBlockProps): JSX.Element | null => {
       >
         {renderThenContent}
       </Stack>
+      <IconButton
+        top={{ base: '0.5rem', md: '2rem' }}
+        right={{ base: '0.5rem', md: '2rem' }}
+        pos="absolute"
+        aria-label="Delete logic"
+        variant="clear"
+        colorScheme="danger"
+        onClick={onOpen}
+        icon={<BiTrash fontSize="1.5rem" />}
+      />
     </Box>
   )
 }

frontend/src/features/admin-form/create/logic/mutations.ts

@@ -0,0 +1,54 @@
+import { useCallback } from 'react'
+import { useMutation, useQueryClient } from 'react-query'
+import { useParams } from 'react-router-dom'
+
+import { AdminFormDto, LogicDto } from '~shared/types/form'
+
+import { useToast } from '~hooks/useToast'
+
+import { adminFormKeys } from '~features/admin-form/common/queries'
+
+import { deleteFormLogic } from './FormLogicService'
+
+export const useLogicMutations = () => {
+  const { formId } = useParams()
+  if (!formId) throw new Error('No formId provided')
+
+  const queryClient = useQueryClient()
+  const adminFormKey = adminFormKeys.id(formId)
+  const toast = useToast({ status: 'success', isClosable: true })
+
+  const handleError = useCallback(
+    (error: Error) => {
+      toast.closeAll()
+      toast({
+        description: error.message,
+        status: 'danger',
+      })
+    },
+    [toast],
+  )
+
+  const deleteLogicMutation = useMutation(
+    (logicId: LogicDto['_id']) => deleteFormLogic(formId, logicId),
+    {
+      onSuccess: (_data, logicId) => {
+        toast.closeAll()
+        queryClient.setQueryData<AdminFormDto>(adminFormKey, (prev) => {
+          // Should not happen, should not be able to update field if there is no
+          // existing data.
+          if (!prev) throw new Error('Query should have been set')
+          // Remove deleted logic.
+          prev.form_logics = prev.form_logics.filter((l) => l._id !== logicId)
+          return prev
+        })
+        toast({
+          description: 'Logic successfully deleted.',
+        })
+      },
+      onError: handleError,
+    },
+  )
+
+  return { deleteLogicMutation }
+}

frontend/src/mocks/msw/handlers/admin-form/form.ts

@@ -198,3 +198,12 @@ export const deleteField = (delay = 500) => {
     return res(ctx.delay(delay), ctx.status(200))
   })
 }
+
+export const deleteLogic = (delay?: number) => {
+  return rest.delete(
+    '/api/v3/admin/forms/:formId/logic/:logicId',
+    (_req, res, ctx) => {
+      return res(ctx.delay(delay), ctx.status(200))
+    },
+  )
+}