cleanup dialogs

2024-05-13 17:28:37 -04:00 · 2024-05-13 17:28:37 -04:00 · 6ae04251d2
commit 6ae04251d2
parent 690fc8d2cb
5 changed files with 146 additions and 143 deletions
--- a/packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx
+++ b/packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx
@ -2,16 +2,12 @@ import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import { AddProjectMemberInput, Permission } from 'gql-client';

-import {
-  Button,
-  Dialog,
-  DialogHeader,
-  DialogBody,
-  DialogFooter,
-  Input,
-  Typography,
-  Checkbox,
-} from '@snowballtools/material-tailwind-react-fork';
+import { Typography } from '@snowballtools/material-tailwind-react-fork';
+
+import { Button } from 'components/shared/Button';
+import { Modal } from 'components/shared/Modal';
+import { Input } from 'components/shared/Input';
+import { Checkbox } from 'components/shared/Checkbox';

 interface AddMemberDialogProp {
  open: boolean;
@ -61,59 +57,47 @@ const AddMemberDialog = ({
  }, []);

  return (
-    <Dialog open={open} handler={handleOpen}>
-      <DialogHeader className="flex justify-between">
-        <div>Add member</div>
-        <Button
-          variant="outlined"
-          onClick={handleOpen}
-          className="mr-1 rounded-3xl"
-        >
-          X
-        </Button>
-      </DialogHeader>
-      <form onSubmit={handleSubmit(submitHandler)}>
-        <DialogBody className="flex flex-col gap-2 p-4">
-          <Typography variant="small">
-            We will send an invitation link to this email address.
-          </Typography>
-          <Typography variant="small">Email address</Typography>
-          <Input
-            type="email"
-            {...register('emailAddress', {
-              required: 'email field cannot be empty',
-            })}
-          />
-          <Typography variant="small">Permissions</Typography>
-          <Typography variant="small">
-            You can change this later if required.
-          </Typography>
-          <Checkbox
-            label={Permission.View}
-            {...register(`permissions.view`)}
-            color="blue"
-          />
-          <Checkbox
-            label={Permission.Edit}
-            {...register(`permissions.edit`)}
-            color="blue"
-          />
-        </DialogBody>
-        <DialogFooter className="flex justify-start">
-          <Button variant="outlined" onClick={handleOpen} className="mr-1">
-            Cancel
-          </Button>
-          <Button
-            variant="gradient"
-            color="blue"
-            type="submit"
-            disabled={!isValid}
-          >
-            Send invite
-          </Button>
-        </DialogFooter>
-      </form>
-    </Dialog>
+    <Modal open={open} onOpenChange={handleOpen}>
+      <Modal.Content>
+        <Modal.Header>Add member</Modal.Header>
+        <form onSubmit={handleSubmit(submitHandler)}>
+          <Modal.Body className="flex flex-col gap-2 p-4">
+            <Typography variant="small">
+              We will send an invitation link to this email address.
+            </Typography>
+            <Typography variant="small">Email address</Typography>
+            <Input
+              type="email"
+              {...register('emailAddress', {
+                required: 'email field cannot be empty',
+              })}
+            />
+            <Typography variant="small">Permissions</Typography>
+            <Typography variant="small">
+              You can change this later if required.
+            </Typography>
+            <Checkbox
+              label={Permission.View}
+              {...register(`permissions.view`)}
+              color="blue"
+            />
+            <Checkbox
+              label={Permission.Edit}
+              {...register(`permissions.edit`)}
+              color="blue"
+            />
+          </Modal.Body>
+          <Modal.Footer className="flex justify-start">
+            <Button onClick={handleOpen} variant="secondary">
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!isValid}>
+              Send invite
+            </Button>
+          </Modal.Footer>
+        </form>
+      </Modal.Content>
+    </Modal>
  );
 };

--- a/packages/frontend/src/components/projects/project/settings/DomainCard.tsx
+++ b/packages/frontend/src/components/projects/project/settings/DomainCard.tsx
@ -115,13 +115,13 @@ const DomainCard = ({
                  setEditDialogOpen((preVal) => !preVal);
                }}
              >
-                ^ Edit domain
+                Edit Domain
              </MenuItem>
              <MenuItem
                className="text-red-500"
                onClick={() => setDeleteDialogOpen((preVal) => !preVal)}
              >
-                ^ Delete domain
+                Delete domain
              </MenuItem>
            </MenuList>
          </Menu>
@ -141,7 +141,7 @@ const DomainCard = ({

      <Typography variant="small">Production</Typography>
      {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 ? (
            <Typography variant="small">
              ^ Add these records to your domain and refresh to check
@ -152,7 +152,6 @@ const DomainCard = ({
            </Typography>
          ) : (
            <div className="flex gap-2 text-red-500 mb-2">
-              <div>^</div>
              <div className="grow">
                Failed to verify records. DNS propagation can take up to 48
                hours. Please ensure you added the correct records and refresh.
--- a/packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx
+++ b/packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx
@ -4,18 +4,15 @@ import toast from 'react-hot-toast';
 import { Domain } from 'gql-client';

 import {
-  Button,
-  Dialog,
-  DialogHeader,
-  DialogBody,
-  DialogFooter,
-  Input,
  Typography,
  Select,
  Option,
 } from '@snowballtools/material-tailwind-react-fork';

 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'];

@ -122,77 +119,67 @@ const EditDomainDialog = ({
  }, [domain]);

  return (
-    <Dialog open={open} handler={handleOpen}>
-      <DialogHeader className="flex justify-between">
-        <div>Edit domain</div>
-        <Button
-          variant="outlined"
-          onClick={handleOpen}
-          className="mr-1 rounded-3xl"
-        >
-          X
-        </Button>
-      </DialogHeader>
-      <form onSubmit={handleSubmit(updateDomainHandler)}>
-        <DialogBody className="flex flex-col gap-2 p-4">
-          <Typography variant="small">Domain name</Typography>
-          <Input {...register('name')} />
-          <Typography variant="small">Redirect to</Typography>
-          <Controller
-            name="redirectedTo"
-            control={control}
-            render={({ field }) => (
-              <Select {...field} disabled={isDisableDropdown}>
-                {redirectOptions.map((option, key) => (
-                  <Option key={key} value={option}>
-                    ^ {option}
-                  </Option>
-                ))}
-              </Select>
+    <Modal open={open} onOpenChange={handleOpen}>
+      <Modal.Content>
+        <Modal.Header>Edit domain</Modal.Header>
+        <form onSubmit={handleSubmit(updateDomainHandler)}>
+          <Modal.Body className="flex flex-col gap-2">
+            <Typography variant="small">Domain name</Typography>
+            <Input {...register('name')} />
+            <Typography variant="small">Redirect to</Typography>
+            <Controller
+              name="redirectedTo"
+              control={control}
+              render={({ field }) => (
+                <Select {...field} disabled={isDisableDropdown}>
+                  {redirectOptions.map((option, key) => (
+                    <Option key={key} value={option}>
+                      ^ {option}
+                    </Option>
+                  ))}
+                </Select>
+              )}
+            />
+            {isDisableDropdown && (
+              <div className="flex p-2 gap-2 text-black bg-gray-300 rounded-lg">
+                <div>^</div>
+                <Typography variant="small">
+                  Domain “
+                  {domainRedirectedFrom ? domainRedirectedFrom.name : ''}”
+                  redirects to this domain so you can not redirect this doman
+                  further.
+                </Typography>
+              </div>
            )}
-          />
-          {isDisableDropdown && (
-            <div className="flex p-2 gap-2 text-black bg-gray-300 rounded-lg">
-              <div>^</div>
-              <Typography variant="small">
-                Domain “{domainRedirectedFrom ? domainRedirectedFrom.name : ''}”
-                redirects to this domain so you can not redirect this doman
-                further.
+            <Typography variant="small">Git branch</Typography>
+            <Input
+              {...register('branch', {
+                validate: (value) =>
+                  Boolean(branches.length) ? branches.includes(value) : true,
+              })}
+              disabled={
+                !Boolean(branches.length) ||
+                watch('redirectedTo') !== DEFAULT_REDIRECT_OPTIONS[0]
+              }
+            />
+            {!isValid && (
+              <Typography variant="small" className="text-red-500">
+                We couldn&apos;t find this branch in the connected Git
+                repository.
              </Typography>
-            </div>
-          )}
-          <Typography variant="small">Git branch</Typography>
-          <Input
-            {...register('branch', {
-              validate: (value) =>
-                Boolean(branches.length) ? branches.includes(value) : true,
-            })}
-            disabled={
-              !Boolean(branches.length) ||
-              watch('redirectedTo') !== DEFAULT_REDIRECT_OPTIONS[0]
-            }
-          />
-          {!isValid && (
-            <Typography variant="small" className="text-red-500">
-              We couldn&apos;t find this branch in the connected Git repository.
-            </Typography>
-          )}
-        </DialogBody>
-        <DialogFooter className="flex justify-start">
-          <Button variant="outlined" onClick={handleOpen} className="mr-1">
-            Cancel
-          </Button>
-          <Button
-            variant="gradient"
-            color="blue"
-            type="submit"
-            disabled={!isDirty}
-          >
-            Save changes
-          </Button>
-        </DialogFooter>
-      </form>
-    </Dialog>
+            )}
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={handleOpen} className="mr-1">
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!isDirty}>
+              Save changes
+            </Button>
+          </Modal.Footer>
+        </form>
+      </Modal.Content>
+    </Modal>
  );
 };

--- a/packages/frontend/src/components/projects/project/settings/ProjectSettingContainer.tsx
+++ b/packages/frontend/src/components/projects/project/settings/ProjectSettingContainer.tsx
@ -18,7 +18,10 @@ const ProjectSettingContainer: React.FC<ProjectSettingContainerProps> = ({
  ...props
 }: ProjectSettingContainerProps) => {
  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
        headingText={headingText}
        button={button}
--- a/packages/frontend/src/stories/Project/Settings/General.stories.tsx
+++ b/packages/frontend/src/stories/Project/Settings/General.stories.tsx
@ -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 = {};