cerc-io/snowballtools-base-mirror
16
0
Fork 0
mirror of https://github.com/snowball-tools/snowballtools-base.git synced 2024-11-17 12:19:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

DeleteProjectDialog update to Modal (#70)

Browse Source
This commit is contained in:
Vivian Phung 2024-05-16 20:26:31 -04:00 committed by GitHub
parent 5dc4d28b50
commit a69dd71117
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 35 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx
View File

@ -1,20 +1,13 @@
import { useCallback } from 'react'; import { useCallback } from 'react';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { Project } from 'gql-client';
import { import { useGQLClient } from 'context/GQLClientContext';
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
Input,
Typography,
} from '@snowballtools/material-tailwind-react-fork';
import { useGQLClient } from '../../../../context/GQLClientContext';
import { useToast } from 'components/shared/Toast'; import { useToast } from 'components/shared/Toast';
import { Modal } from 'components/shared/Modal';
import { Button } from 'components/shared/Button';
import { Input } from 'components/shared/Input';
import { Project } from 'gql-client';
interface DeleteProjectDialogProp { interface DeleteProjectDialogProp {
open: boolean; open: boolean;
@ -60,51 +53,36 @@ const DeleteProjectDialog = ({
}, [client, project, handleOpen]); }, [client, project, handleOpen]);
return ( return (
<Dialog open={open} handler={handleOpen}> <Modal open={open} onOpenChange={handleOpen}>
<DialogHeader className="flex justify-between"> <Modal.Content>
<div>Delete project?</div> <Modal.Header>Delete project?</Modal.Header>
<Button <form onSubmit={handleSubmit(deleteProjectHandler)}>
variant="outlined" <Modal.Body>
onClick={handleOpen} <Input
className="mr-1 rounded-3xl" label={
> "Deleting your project is irreversible. Enter your project's name " +
X project.name +
</Button> ' below to confirm you want to permanently delete it:'
</DialogHeader> }
<form onSubmit={handleSubmit(deleteProjectHandler)}> id="input"
<DialogBody className="flex flex-col gap-2"> {...register('projectName', {
<Typography variant="paragraph"> required: 'Project name is required',
Deleting your project is irreversible. Enter your project’s validate: (value) => value === project.name,
name&nbsp; })}
<span className="bg-blue-100 text-blue-700">({project.name})</span> helperText="Deleting your project is irreversible."
&nbsp;below to confirm you want to permanently delete it: />
</Typography> </Modal.Body>
<Input <Modal.Footer className="flex justify-start">
id="input" <Button onClick={handleOpen} variant="tertiary">
{...register('projectName', { Cancel
required: 'Project name is required', </Button>
validate: (value) => value === project.name, <Button variant="danger" type="submit" disabled={!isValid}>
})} Yes, delete project
/> </Button>
<Typography variant="small" color="red"> </Modal.Footer>
^ Deleting your project is irreversible. </form>
</Typography> </Modal.Content>
</DialogBody> </Modal>
<DialogFooter className="flex justify-start">
<Button variant="outlined" onClick={handleOpen} className="mr-1">
Cancel
</Button>
<Button
variant="gradient"
color="red"
type="submit"
disabled={!isValid}
>
Yes, Delete project
</Button>
</DialogFooter>
</form>
</Dialog>
); );
}; };