deep-stack/snowballtools-base
3
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Actions Activity

cleanup dialogs

Browse Source
This commit is contained in:
Vivian Phung 2024-05-13 17:28:37 -04:00 committed by Vivian Phung
parent 690fc8d2cb
commit 6ae04251d2
5 changed files with 146 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx
View File

@ -2,16 +2,12 @@ import { useCallback } from 'react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { AddProjectMemberInput, Permission } from 'gql-client'; import { AddProjectMemberInput, Permission } from 'gql-client';
import { import { Typography } from '@snowballtools/material-tailwind-react-fork';
Button,
Dialog, import { Button } from 'components/shared/Button';
DialogHeader, import { Modal } from 'components/shared/Modal';
DialogBody, import { Input } from 'components/shared/Input';
DialogFooter, import { Checkbox } from 'components/shared/Checkbox';
Input,
Typography,
Checkbox,
} from '@snowballtools/material-tailwind-react-fork';
interface AddMemberDialogProp { interface AddMemberDialogProp {
open: boolean; open: boolean;
@ -61,19 +57,11 @@ const AddMemberDialog = ({
}, []); }, []);
return ( return (
<Dialog open={open} handler={handleOpen}> <Modal open={open} onOpenChange={handleOpen}>
<DialogHeader className="flex justify-between"> <Modal.Content>
<div>Add member</div> <Modal.Header>Add member</Modal.Header>
<Button
variant="outlined"
onClick={handleOpen}
className="mr-1 rounded-3xl"
>
X
</Button>
</DialogHeader>
<form onSubmit={handleSubmit(submitHandler)}> <form onSubmit={handleSubmit(submitHandler)}>
<DialogBody className="flex flex-col gap-2 p-4"> <Modal.Body className="flex flex-col gap-2 p-4">
<Typography variant="small"> <Typography variant="small">
We will send an invitation link to this email address. We will send an invitation link to this email address.
</Typography> </Typography>
@ -98,22 +86,18 @@ const AddMemberDialog = ({
{...register(`permissions.edit`)} {...register(`permissions.edit`)}
color="blue" color="blue"
/> />
</DialogBody> </Modal.Body>
<DialogFooter className="flex justify-start"> <Modal.Footer className="flex justify-start">
<Button variant="outlined" onClick={handleOpen} className="mr-1"> <Button onClick={handleOpen} variant="secondary">
Cancel Cancel
</Button> </Button>
<Button <Button type="submit" disabled={!isValid}>
variant="gradient"
color="blue"
type="submit"
disabled={!isValid}
>
Send invite Send invite
</Button> </Button>
</DialogFooter> </Modal.Footer>
</form> </form>
</Dialog> </Modal.Content>
</Modal>
); );
}; };

7
packages/frontend/src/components/projects/project/settings/DomainCard.tsx
View File

@ -115,13 +115,13 @@ const DomainCard = ({
setEditDialogOpen((preVal) => !preVal); setEditDialogOpen((preVal) => !preVal);
}} }}
> >
^ Edit domain Edit Domain
</MenuItem> </MenuItem>
<MenuItem <MenuItem
className="text-red-500" className="text-red-500"
onClick={() => setDeleteDialogOpen((preVal) => !preVal)} onClick={() => setDeleteDialogOpen((preVal) => !preVal)}
> >
^ Delete domain Delete domain
</MenuItem> </MenuItem>
</MenuList> </MenuList>
</Menu> </Menu>
@ -141,7 +141,7 @@ const DomainCard = ({
<Typography variant="small">Production</Typography> <Typography variant="small">Production</Typography>
{domain.status === DomainStatus.Pending && ( {domain.status === DomainStatus.Pending && (
<Card className="bg-gray-200 p-4 text-sm"> <Card className="bg-slate-100 p-4 text-sm">
{refreshStatus === RefreshStatus.IDLE ? ( {refreshStatus === RefreshStatus.IDLE ? (
<Typography variant="small"> <Typography variant="small">
^ Add these records to your domain and refresh to check ^ Add these records to your domain and refresh to check
@ -152,7 +152,6 @@ const DomainCard = ({
</Typography> </Typography>
) : ( ) : (
<div className="flex gap-2 text-red-500 mb-2"> <div className="flex gap-2 text-red-500 mb-2">
<div>^</div>
<div className="grow"> <div className="grow">
Failed to verify records. DNS propagation can take up to 48 Failed to verify records. DNS propagation can take up to 48
hours. Please ensure you added the correct records and refresh. hours. Please ensure you added the correct records and refresh.

49
packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx
View File

@ -4,18 +4,15 @@ import toast from 'react-hot-toast';
import { Domain } from 'gql-client'; import { Domain } from 'gql-client';
import { import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
Input,
Typography, Typography,
Select, Select,
Option, Option,
} from '@snowballtools/material-tailwind-react-fork'; } from '@snowballtools/material-tailwind-react-fork';
import { useGQLClient } from '../../../../context/GQLClientContext'; import { useGQLClient } from '../../../../context/GQLClientContext';
import { Modal } from 'components/shared/Modal';
import { Button } from 'components/shared/Button';
import { Input } from 'components/shared/Input';
const DEFAULT_REDIRECT_OPTIONS = ['none']; const DEFAULT_REDIRECT_OPTIONS = ['none'];
@ -122,19 +119,11 @@ const EditDomainDialog = ({
}, [domain]); }, [domain]);
return ( return (
<Dialog open={open} handler={handleOpen}> <Modal open={open} onOpenChange={handleOpen}>
<DialogHeader className="flex justify-between"> <Modal.Content>
<div>Edit domain</div> <Modal.Header>Edit domain</Modal.Header>
<Button
variant="outlined"
onClick={handleOpen}
className="mr-1 rounded-3xl"
>
X
</Button>
</DialogHeader>
<form onSubmit={handleSubmit(updateDomainHandler)}> <form onSubmit={handleSubmit(updateDomainHandler)}>
<DialogBody className="flex flex-col gap-2 p-4"> <Modal.Body className="flex flex-col gap-2">
<Typography variant="small">Domain name</Typography> <Typography variant="small">Domain name</Typography>
<Input {...register('name')} /> <Input {...register('name')} />
<Typography variant="small">Redirect to</Typography> <Typography variant="small">Redirect to</Typography>
@ -155,7 +144,8 @@ const EditDomainDialog = ({
<div className="flex p-2 gap-2 text-black bg-gray-300 rounded-lg"> <div className="flex p-2 gap-2 text-black bg-gray-300 rounded-lg">
<div>^</div> <div>^</div>
<Typography variant="small"> <Typography variant="small">
Domain “{domainRedirectedFrom ? domainRedirectedFrom.name : ''}” Domain “
{domainRedirectedFrom ? domainRedirectedFrom.name : ''}”
redirects to this domain so you can not redirect this doman redirects to this domain so you can not redirect this doman
further. further.
</Typography> </Typography>
@ -174,25 +164,22 @@ const EditDomainDialog = ({
/> />
{!isValid && ( {!isValid && (
<Typography variant="small" className="text-red-500"> <Typography variant="small" className="text-red-500">
We couldn&apos;t find this branch in the connected Git repository. We couldn&apos;t find this branch in the connected Git
repository.
</Typography> </Typography>
)} )}
</DialogBody> </Modal.Body>
<DialogFooter className="flex justify-start"> <Modal.Footer>
<Button variant="outlined" onClick={handleOpen} className="mr-1"> <Button onClick={handleOpen} className="mr-1">
Cancel Cancel
</Button> </Button>
<Button <Button type="submit" disabled={!isDirty}>
variant="gradient"
color="blue"
type="submit"
disabled={!isDirty}
>
Save changes Save changes
</Button> </Button>
</DialogFooter> </Modal.Footer>
</form> </form>
</Dialog> </Modal.Content>
</Modal>
); );
}; };

5
packages/frontend/src/components/projects/project/settings/ProjectSettingContainer.tsx
View File

@ -18,7 +18,10 @@ const ProjectSettingContainer: React.FC<ProjectSettingContainerProps> = ({
...props ...props
}: ProjectSettingContainerProps) => { }: ProjectSettingContainerProps) => {
return ( return (
<div className={'flex-col justify-start gap-8 space-y-3 px-2'} {...props}> <div
className={'flex-col justify-start gap-8 space-y-3 px-2 pb-6'}
{...props}
>
<ProjectSettingHeader <ProjectSettingHeader
headingText={headingText} headingText={headingText}
button={button} button={button}

30
packages/frontend/src/stories/Project/Settings/General.stories.tsx Normal file
View File

@ -0,0 +1,30 @@
import { Meta, StoryObj } from '@storybook/react';
import {
reactRouterParameters,
withRouter,
} from 'storybook-addon-remix-react-router';
import AddEnvironmentVariableRow from 'components/projects/project/settings/AddEnvironmentVariableRow';
const meta: Meta<typeof AddEnvironmentVariableRow> = {
title: 'Project/Settings/AddEnvironmentVariableRow',
component: AddEnvironmentVariableRow,
tags: ['autodocs'],
decorators: [withRouter],
parameters: {
reactRouter: reactRouterParameters({
location: {
pathParams: { userId: 'me' },
},
routing: {
path: '/snowball-tools-1/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings',
},
}),
},
} as Meta<typeof AddEnvironmentVariableRow>;
export default meta;
type Story = StoryObj<typeof AddEnvironmentVariableRow>;
export const Default: Story = {};