diff --git a/packages/frontend/src/components/projects/create/template/deploy/CancelDeploymentDialog.tsx b/packages/frontend/src/components/projects/create/template/deploy/CancelDeploymentDialog.tsx deleted file mode 100644 index ead3764..0000000 --- a/packages/frontend/src/components/projects/create/template/deploy/CancelDeploymentDialog.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -import { - Button, - Dialog, - DialogHeader, - DialogBody, - DialogFooter, -} from '@material-tailwind/react'; - -interface CancelDeploymentDialogProp { - open: boolean; - handleOpen: () => void; -} - -const CancelDeploymentDialog = ({ - open, - handleOpen, -}: CancelDeploymentDialogProp) => { - return ( - - - Cancel deployment? - - X - - - - This will halt the deployment and you will have to start the process - from scratch. - - - - Cancel - - - - Yes, Cancel deployment - - - - - ); -}; - -export default CancelDeploymentDialog; diff --git a/packages/frontend/src/components/projects/project/SettingsTabPanel.tsx b/packages/frontend/src/components/projects/project/SettingsTabPanel.tsx index e24626a..02089c1 100644 --- a/packages/frontend/src/components/projects/project/SettingsTabPanel.tsx +++ b/packages/frontend/src/components/projects/project/SettingsTabPanel.tsx @@ -52,9 +52,13 @@ const tabsData = [ const SettingsTabPanel = () => { return ( <> - + { ))} - + {tabsData.map(({ value, component }) => ( {createElement(component)} diff --git a/packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx b/packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx new file mode 100644 index 0000000..3463c2e --- /dev/null +++ b/packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx @@ -0,0 +1,95 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import { useForm } from 'react-hook-form'; + +import { + Button, + Dialog, + DialogHeader, + DialogBody, + DialogFooter, + Input, + Typography, +} from '@material-tailwind/react'; + +import { ProjectDetails } from '../../../../types/project'; + +interface DeleteProjectDialogProp { + open: boolean; + handleOpen: () => void; + project: Partial; +} + +const DeleteProjectDialog = ({ + open, + handleOpen, + project, +}: DeleteProjectDialogProp) => { + const navigate = useNavigate(); + + const { + handleSubmit, + register, + formState: { isValid }, + } = useForm({ + defaultValues: { + projectName: '', + }, + }); + + return ( + + + Delete project? + + X + + + { + handleOpen(); + navigate('/'); + })} + > + + + Deleting your project is irreversible. Enter your project’s name + + ({project.name}) + below to confirm you want to permanently delete it: + + value === project.name, + })} + /> + + ^ Deleting your project is irreversible. + + + + + Cancel + + + Yes, Delete project + + + + + ); +}; + +export default DeleteProjectDialog; diff --git a/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx b/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx index 0516aa8..15f1a47 100644 --- a/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx +++ b/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx @@ -1,10 +1,22 @@ -import React from 'react'; -import { useForm } from 'react-hook-form'; +import React, { useState } from 'react'; +import { Link } from 'react-router-dom'; +import { useForm, Controller } from 'react-hook-form'; import toast, { Toaster } from 'react-hot-toast'; -import { Button, Typography, Input } from '@material-tailwind/react'; +import { + Button, + Typography, + Input, + Select, + Option, +} from '@material-tailwind/react'; + +import DeleteProjectDialog from './DeleteProjectDialog'; +import ConfirmDialog from '../../../shared/ConfirmDialog'; const PROJECT_ID = '62f87575-7a2b-4951-8156-9f9821j380d'; +const TEAMS = ['Airfoil']; +const DEFAULT_SELECT_TEAM = undefined; const CopyIcon = ({ value }: { value: string }) => { return ( @@ -21,6 +33,24 @@ const CopyIcon = ({ value }: { value: string }) => { }; const GeneralTabPanel = () => { + const { + handleSubmit: handleTransfer, + control, + formState, + } = useForm({ + defaultValues: { + team: DEFAULT_SELECT_TEAM, + }, + }); + + const [openTransferDialog, setOpenTransferDialog] = useState(false); + const handleTransferProjectDialog = () => + setOpenTransferDialog(!openTransferDialog); + + const [openDeleteDialog, setOpenDeleteDialog] = useState(false); + const handleDeleteProjectDialog = () => + setOpenDeleteDialog(!openDeleteDialog); + const { handleSubmit, register } = useForm({ defaultValues: { appName: 'iglootools', @@ -29,17 +59,12 @@ const GeneralTabPanel = () => { }); return ( - {})}> - + <> + {})}> Project info - - - + App name - + { size="md" {...register('appName')} /> - - - + Description (Optional) - + { size="md" {...register('description')} /> - - - + Project ID - + { disabled icon={} /> - - - + Save + + + Transfer project + + Transfer this app to your personal account or a team you are a member + of. + + Learn more + + + { + handleTransferProjectDialog(); + })} + > + + Choose team + + ( + + {TEAMS.map((team, key) => ( + + ^ {team} + + ))} + + )} + /> + + Transfer + + + + + Upon confirmation, your project nextjs-boilerplate will be + transferred from saugat to Airfoil. + + + + + Delete project + + The project will be permanently deleted, including its deployments and + domains. This action is irreversible and can not be undone. + + + ^ Delete project + + - + > ); }; diff --git a/packages/frontend/src/components/shared/ConfirmDialog.tsx b/packages/frontend/src/components/shared/ConfirmDialog.tsx new file mode 100644 index 0000000..010c9b7 --- /dev/null +++ b/packages/frontend/src/components/shared/ConfirmDialog.tsx @@ -0,0 +1,57 @@ +import React from 'react'; + +import { color } from '@material-tailwind/react/types/components/button'; +import { + Typography, + Button, + Dialog, + DialogHeader, + DialogBody, + DialogFooter, +} from '@material-tailwind/react'; + +type ConfirmDialogProp = { + children: React.ReactNode; + dialogTitle: string; + open: boolean; + handleOpen: () => void; + confirmButtonTitle: string; + handleConfirm: () => void; + color: color; +}; + +const ConfirmDialog = ({ + children, + dialogTitle, + open, + handleOpen, + confirmButtonTitle, + handleConfirm, + color, +}: ConfirmDialogProp) => { + return ( + + + {dialogTitle} + + X + + + {children} + + + Cancel + + + {confirmButtonTitle} + + + + ); +}; + +export default ConfirmDialog; diff --git a/packages/frontend/src/pages/projects/create/template/Deploy.tsx b/packages/frontend/src/pages/projects/create/template/Deploy.tsx index c968dfe..6c38ef7 100644 --- a/packages/frontend/src/pages/projects/create/template/Deploy.tsx +++ b/packages/frontend/src/pages/projects/create/template/Deploy.tsx @@ -1,6 +1,7 @@ -import React from 'react'; +import React, { useCallback } from 'react'; +import { useNavigate } from 'react-router-dom'; -import { Button } from '@material-tailwind/react'; +import { Button, Typography } from '@material-tailwind/react'; import { DeployStep, @@ -10,11 +11,16 @@ import { Stopwatch, setStopWatchOffset, } from '../../../../components/StopWatch'; -import CancelDeploymentDialog from '../../../../components/projects/create/template/deploy/CancelDeploymentDialog'; +import ConfirmDialog from '../../../../components/shared/ConfirmDialog'; const Deploy = () => { const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(!open); + const navigate = useNavigate(); + + const handleCancel = useCallback(() => { + navigate('/projects/create/template'); + }, []); return ( @@ -33,7 +39,19 @@ const Deploy = () => { ^ Cancel - + + + This will halt the deployment and you will have to start the process + from scratch. + +