cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: AssignDomainDialog uses Modal component (#202)

Browse Source 
### TL;DR

This PR includes updates to the project settings.

### What changed?

The project settings have been refactored for better organization and readability.

### How to test?

To test this change, navigate to the project settings and ensure all options are functioning as expected.

### Why make this change?

This change was made to improve the user experience when navigating through the project settings.

---
This commit is contained in:
Vivian Phung 2024-06-20 00:32:41 -04:00 committed by GitHub
parent 2ada11f311
commit 82a1c151a8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 27 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
packages/frontend/src/components/projects/project/deployments/AssignDomainDialog.tsx
View File

@ -1,13 +1,8 @@
import { CopyBlock, atomOneLight } from 'react-code-blocks'; import { CopyBlock, atomOneLight } from 'react-code-blocks';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { import { Modal } from 'components/shared/Modal';
Button, import { Button } from 'components/shared/Button';
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
} from '@snowballtools/material-tailwind-react-fork';
interface AssignDomainProps { interface AssignDomainProps {
open: boolean; open: boolean;
@ -16,36 +11,31 @@ interface AssignDomainProps {
const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => { const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => {
return ( return (
<Dialog open={open} handler={handleOpen}> <Modal open={open} onOpenChange={handleOpen}>
<DialogHeader>Assign Domain</DialogHeader> <Modal.Content>
<DialogBody> <Modal.Header>Assign Domain</Modal.Header>
In order to assign a domain to your production deployments, configure it <Modal.Body>
in the{' '} In order to assign a domain to your production deployments, configure
{/* TODO: Fix selection of project settings tab on navigation to domains */} it in the{' '}
<Link to="../settings/domains" className="text-light-blue-800 inline"> {/* TODO: Fix selection of project settings tab on navigation to domains */}
project settings{' '} <Link to="../settings/domains" className="text-light-blue-800 inline">
</Link> project settings{' '}
(recommended). If you want to assign to this specific deployment, </Link>
however, you can do so using our command-line interface: (recommended). If you want to assign to this specific deployment,
{/* https://github.com/rajinwonderland/react-code-blocks/issues/138 */} however, you can do so using our command-line interface:
<CopyBlock {/* https://github.com/rajinwonderland/react-code-blocks/issues/138 */}
text="snowball alias <deployment> <domain>" <CopyBlock
language="" text="snowball alias <deployment> <domain>"
showLineNumbers={false} language=""
theme={atomOneLight} showLineNumbers={false}
/> theme={atomOneLight}
</DialogBody> />
<DialogFooter className="flex justify-start"> </Modal.Body>
<Button <Modal.Footer className="flex justify-start">
className="rounded-3xl" <Button onClick={handleOpen}>Okay</Button>
variant="gradient" </Modal.Footer>
color="blue" </Modal.Content>
onClick={handleOpen} </Modal>
>
<span>Okay</span>
</Button>
</DialogFooter>
</Dialog>
); );
}; };