feat(dashboard): ⚡️ Delete workspace button

apps/builder/components/dashboard/WorkspaceSettingsModal/WorkspaceSettingsForm.tsx

@@ -1,11 +1,21 @@
-import { Stack, FormControl, FormLabel, Flex } from '@chakra-ui/react'
+import {
+  Stack,
+  FormControl,
+  FormLabel,
+  Flex,
+  Button,
+  useDisclosure,
+  Text,
+} from '@chakra-ui/react'
+import { ConfirmModal } from 'components/modals/ConfirmModal'
 import { EditableEmojiOrImageIcon } from 'components/shared/EditableEmojiOrImageIcon'
 import { Input } from 'components/shared/Textbox'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import React from 'react'
 
-export const WorkspaceSettingsForm = () => {
-  const { workspace, updateWorkspace } = useWorkspace()
+export const WorkspaceSettingsForm = ({ onClose }: { onClose: () => void }) => {
+  const { workspace, workspaces, updateWorkspace, deleteCurrentWorkspace } =
+    useWorkspace()
 
   const handleNameChange = (name: string) => {
     if (!workspace?.id) return
@@ -17,6 +27,11 @@ export const WorkspaceSettingsForm = () => {
     updateWorkspace(workspace?.id, { icon })
   }
 
+  const handleDeleteClick = async () => {
+    await deleteCurrentWorkspace()
+    onClose()
+  }
+
   return (
     <Stack spacing="6" w="full">
       <FormControl>
@@ -40,6 +55,41 @@ export const WorkspaceSettingsForm = () => {
           />
         )}
       </FormControl>
+      {workspace && workspaces && workspaces.length > 1 && (
+        <DeleteWorkspaceButton
+          onConfirm={handleDeleteClick}
+          workspaceName={workspace?.name}
+        />
+      )}
     </Stack>
   )
 }
+
+const DeleteWorkspaceButton = ({
+  workspaceName,
+  onConfirm,
+}: {
+  workspaceName: string
+  onConfirm: () => Promise<void>
+}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  return (
+    <>
+      <Button colorScheme="red" variant="outline" onClick={onOpen}>
+        Delete workspace
+      </Button>
+      <ConfirmModal
+        isOpen={isOpen}
+        onConfirm={onConfirm}
+        onClose={onClose}
+        message={
+          <Text>
+            Are you sure you want to delete {workspaceName} workspace? All its
+            folders, typebots and results will be deleted forever.'
+          </Text>
+        }
+        confirmButtonLabel="Delete"
+      />
+    </>
+  )
+}

apps/builder/components/dashboard/WorkspaceSettingsModal/WorkspaceSettingsModal.tsx

@@ -132,21 +132,27 @@ export const WorkspaceSettingsModal = ({
           </Stack>
         </Stack>
         <Flex flex="1" p="10">
-          <SettingsContent tab={selectedTab} />
+          <SettingsContent tab={selectedTab} onClose={onClose} />
         </Flex>
       </ModalContent>
     </Modal>
   )
 }
 
-const SettingsContent = ({ tab }: { tab: SettingsTab }) => {
+const SettingsContent = ({
+  tab,
+  onClose,
+}: {
+  tab: SettingsTab
+  onClose: () => void
+}) => {
   switch (tab) {
     case 'my-account':
       return <MyAccountForm />
     case 'user-settings':
       return <EditorSettings />
     case 'workspace-settings':
-      return <WorkspaceSettingsForm />
+      return <WorkspaceSettingsForm onClose={onClose} />
     case 'members':
       return <MembersList />
     case 'billing':