feat: add delete workspace modal

frontend/src/features/workspace/components/WorkspaceHeader/WorkspaceEditDropdown.tsx

@@ -5,17 +5,23 @@ import IconButton from '~components/IconButton'
 import Menu from '~components/Menu'
 
 import { CreateOrRenameWorkspaceModal } from '../WorkspaceModals/CreateOrRenameWorkspaceModal'
+import { DeleteWorkspaceModal } from '../WorkspaceModals/DeleteWorkspaceModal'
 
 export const WorkspaceEditDropdown = (): JSX.Element => {
-  const { isOpen, onOpen, onClose } = useDisclosure()
+  const renameModal = useDisclosure()
+  const deleteModal = useDisclosure()
 
   return (
     <>
       <CreateOrRenameWorkspaceModal
-        onClose={onClose}
-        isOpen={isOpen}
+        onClose={renameModal.onClose}
+        isOpen={renameModal.isOpen}
         isCreatingWorkspace={false}
       />
+      <DeleteWorkspaceModal
+        onClose={deleteModal.onClose}
+        isOpen={deleteModal.isOpen}
+      />
 
       <Menu placement="bottom-start">
         {({ isOpen }) => (
@@ -30,8 +36,10 @@ export const WorkspaceEditDropdown = (): JSX.Element => {
               colorScheme="secondary"
             />
             <Menu.List>
-              <Menu.Item onClick={onOpen}>Rename workspace</Menu.Item>
-              <Menu.Item onClick={() => console.log('Click')}>
+              <Menu.Item onClick={renameModal.onOpen}>
+                Rename workspace
+              </Menu.Item>
+              <Menu.Item onClick={deleteModal.onOpen}>
                 Delete workspace
               </Menu.Item>
             </Menu.List>

frontend/src/features/workspace/components/WorkspaceModals/CreateOrRenameWorkspaceModal.tsx

@@ -18,7 +18,7 @@ import Button from '~components/Button'
 import FormErrorMessage from '~components/FormControl/FormErrorMessage'
 import Input from '~components/Input'
 
-type CreateWorkspaceInputProps = {
+type CreateOrRenameWorkspaceInputProps = {
   title: string
 }
 
@@ -37,7 +37,7 @@ export const CreateOrRenameWorkspaceModal = ({
     handleSubmit,
     formState: { errors },
     register,
-  } = useForm<CreateWorkspaceInputProps>({
+  } = useForm<CreateOrRenameWorkspaceInputProps>({
     defaultValues: {
       title: '',
     },

frontend/src/features/workspace/components/WorkspaceModals/DeleteWorkspaceModal.tsx

@@ -0,0 +1,102 @@
+import { useForm } from 'react-hook-form'
+import {
+  FormControl,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  Text,
+  useBreakpointValue,
+} from '@chakra-ui/react'
+import { isEmpty } from 'lodash'
+
+import Button from '~components/Button'
+import FormErrorMessage from '~components/FormControl/FormErrorMessage'
+import Radio from '~components/Radio'
+
+export interface DeleteWorkspaceModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+const DELETE_OPTIONS = [
+  'Delete Workspace only',
+  'Delete Workspace and all forms within',
+]
+
+export const DeleteWorkspaceModal = ({
+  isOpen,
+  onClose,
+}: DeleteWorkspaceModalProps): JSX.Element => {
+  const {
+    handleSubmit,
+    formState: { errors },
+    register,
+  } = useForm()
+  const modalSize = useBreakpointValue({
+    base: 'mobile',
+    xs: 'mobile',
+    md: 'md',
+  })
+
+  // TODO (hans): Implement delete workspace functionality
+  const handleDeleteWorkspace = handleSubmit((data) => {
+    onClose()
+  })
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size={modalSize}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Delete workspace</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Text textStyle="body-2" color="secondary.500">
+            All responses associated to the forms or workspaces will be deleted.
+          </Text>
+          <FormControl isRequired isInvalid={!isEmpty(errors)}>
+            <Radio.RadioGroup mt="1.5rem">
+              {DELETE_OPTIONS.map((o, idx) => (
+                <Radio
+                  key={idx}
+                  value={o}
+                  {...register('radio', {
+                    required: {
+                      value: true,
+                      message: 'This field is required',
+                    },
+                  })}
+                >
+                  {o}
+                </Radio>
+              ))}
+            </Radio.RadioGroup>
+            <FormErrorMessage>{errors['radio']?.message}</FormErrorMessage>
+          </FormControl>
+        </ModalBody>
+
+        <ModalFooter>
+          <Stack
+            w="100vw"
+            direction={{ base: 'column', md: 'row' }}
+            spacing={{ base: '2rem', md: '1rem' }}
+            gap={{ base: '1rem', md: 'inherit' }}
+            flexDir={{ base: 'column-reverse', md: 'inherit' }}
+            justifyContent="flex-end"
+          >
+            <Button onClick={onClose} variant="clear" colorScheme="secondary">
+              Cancel
+            </Button>
+            <Button onClick={handleDeleteWorkspace} colorScheme="danger">
+              Yes, delete workspace
+            </Button>
+          </Stack>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}