📝 docs: put all the new dialog into component page

packages/frontend/src/pages/components/index.tsx

@@ -37,6 +37,74 @@ import { renderToast, renderToastsWithCta } from './renders/toast';
 import { renderTooltips } from './renders/tooltip';
 import { Button } from 'components/shared/Button';
 import { Modal } from 'components/shared/Modal';
+import { TransferProjectDialog } from 'components/projects/Dialog/TransferProjectDialog';
+import { DeleteWebhookDialog } from 'components/projects/Dialog/DeleteWebhookDialog';
+import { DisconnectRepositoryDialog } from 'components/projects/Dialog/DisconnectRepositoryDialog';
+import { RemoveMemberDialog } from 'components/projects/Dialog/RemoveMemberDialog';
+import { DeleteVariableDialog } from 'components/projects/Dialog/DeleteVariableDialog';
+import { DeleteDomainDialog } from 'components/projects/Dialog/DeleteDomainDialog';
+import { CancelDeploymentDialog } from 'components/projects/Dialog/CancelDeploymentDialog';
+import {
+  Deployment,
+  DeploymentStatus,
+  Domain,
+  DomainStatus,
+  Environment,
+} from 'gql-client';
+import { ChangeStateToProductionDialog } from 'components/projects/Dialog/ChangeStateToProductionDialog';
+
+const deployment: Deployment = {
+  id: '1',
+  domain: {
+    id: 'domain1',
+    branch: 'main',
+    name: 'example.com',
+    status: DomainStatus.Live,
+    redirectTo: null,
+    createdAt: '1677609600', // 2023-02-25T12:00:00Z
+    updatedAt: '1677613200', // 2023-02-25T13:00:00Z
+  },
+  branch: 'main',
+  commitHash: 'a1b2c3d',
+  commitMessage:
+    'lkajsdlakjsdlaijwlkjadlksjdlaisjdlakjswdalijsdlaksdj lakjsdlasjdlaijwdel akjsdlaj sldkjaliwjdeal ksjdla ijsdlaksjd',
+  url: 'https://deploy1.example.com',
+  environment: Environment.Production,
+  isCurrent: true,
+  status: DeploymentStatus.Ready,
+  createdBy: {
+    id: 'user1',
+    name: 'Alice',
+    email: 'alice@example.com',
+    isVerified: true,
+    createdAt: '1672656000', // 2023-01-01T10:00:00Z
+    updatedAt: '1672659600', // 2023-01-01T11:00:00Z
+    gitHubToken: null,
+  },
+  createdAt: '1677676800', // 2023-03-01T12:00:00Z
+  updatedAt: '1677680400', // 2023-03-01T13:00:00Z
+};
+
+const domains: Domain[] = [
+  {
+    id: '1',
+    branch: 'main',
+    name: 'saugat.com',
+    status: DomainStatus.Live,
+    redirectTo: null,
+    createdAt: '1677676800', // 2023-03-01T12:00:00Z
+    updatedAt: '1677680400', // 2023-03-01T13:00:00Z
+  },
+  {
+    id: '2',
+    branch: 'main',
+    name: 'www.saugat.com',
+    status: DomainStatus.Live,
+    redirectTo: null,
+    createdAt: '1677676800', // 2023-03-01T12:00:00Z
+    updatedAt: '1677680400', // 2023-03-01T13:00:00Z
+  },
+];
 
 const Page: React.FC = () => {
   const [singleDate, setSingleDate] = useState<Value>();
@@ -45,7 +113,20 @@ const Page: React.FC = () => {
     useState<string>('Test 1');
   const [switchValue, setSwitchValue] = useState(false);
   const [selectedRadio, setSelectedRadio] = useState<string>('');
-  const [openModal, setOpenModal] = useState(false);
+  const [openTransferDialog, setOpenTransferDialog] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [disconnectRepoDialogOpen, setDisconnectRepoDialogOpen] =
+    useState(false);
+  const [removeMemberDialogOpen, setRemoveMemberDialogOpen] = useState(false);
+  const [deleteVariableDialogOpen, setDeleteVariableDialogOpen] =
+    useState(false);
+  const [deleteDomainDialogOpen, setDeleteDomainDialogOpen] = useState(false);
+  const [cancelDeploymentDialogOpen, setCancelDeploymentDialogOpen] =
+    useState(false);
+  const [changeProductionDialogOpen, setChangeProductionDialogOpen] =
+    useState(false);
+  const [redeployToProduction, setRedeployToProduction] = useState(false);
+  const [rollbackDeployment, setRollbackDeployment] = useState(false);
 
   return (
     <div className="relative h-full min-h-full">
@@ -64,10 +145,11 @@ const Page: React.FC = () => {
         <div className="flex flex-col gap-10 items-center justify-between">
           <div className="flex flex-col gap-10 items-center justify-between">
             <h1 className="text-2xl font-bold">Modal</h1>
-            <div className="flex flex-col gap-10 items-center justify-center">
+            <div className="flex gap-4 flex-wrap items-center justify-center">
-              <Modal open={openModal}>
+              {/* Modal example */}
+              <Modal>
                 <Modal.Trigger asChild>
-                  <Button onClick={() => setOpenModal(true)}>Open modal</Button>
+                  <Button>Open modal</Button>
                 </Modal.Trigger>
                 <Modal.Content>
                   <Modal.Header>Modal title</Modal.Header>
@@ -75,10 +157,151 @@ const Page: React.FC = () => {
                     <p>Modal content</p>
                   </Modal.Body>
                   <Modal.Footer>
-                    <Button onClick={() => setOpenModal(false)}>Close</Button>
+                    <Button>Close</Button>
                   </Modal.Footer>
                 </Modal.Content>
               </Modal>
+              {/* Transfer project */}
+              <Button onClick={() => setOpenTransferDialog(true)}>
+                Transfer project
+              </Button>
+              <TransferProjectDialog
+                handleCancel={() => setOpenTransferDialog(!openTransferDialog)}
+                open={openTransferDialog}
+                handleConfirm={() => setOpenTransferDialog(!openTransferDialog)}
+                projectName="nextjs-boilerplate"
+                from="ayungavis"
+                to="Airfoil"
+              />
+              {/* Delete webhook */}
+              <Button onClick={() => setDeleteDialogOpen(true)}>
+                Delete webhook
+              </Button>
+              <DeleteWebhookDialog
+                handleCancel={() => setDeleteDialogOpen((preVal) => !preVal)}
+                open={deleteDialogOpen}
+                handleConfirm={() => setDeleteDialogOpen((preVal) => !preVal)}
+                webhookUrl="examplehook.com"
+              />
+              {/* Disconnect repository */}
+              <Button onClick={() => setDisconnectRepoDialogOpen(true)}>
+                Disconnect repository
+              </Button>
+              <DisconnectRepositoryDialog
+                handleCancel={() =>
+                  setDisconnectRepoDialogOpen((preVal) => !preVal)
+                }
+                open={disconnectRepoDialogOpen}
+                handleConfirm={() => {
+                  setDisconnectRepoDialogOpen((preVal) => !preVal);
+                }}
+              />
+              {/* Remove member */}
+              <Button onClick={() => setRemoveMemberDialogOpen(true)}>
+                Remove member
+              </Button>
+              <RemoveMemberDialog
+                dialogTitle="Remove member?"
+                handleCancel={() =>
+                  setRemoveMemberDialogOpen((preVal) => !preVal)
+                }
+                open={removeMemberDialogOpen}
+                confirmButtonTitle="Yes, Remove member"
+                handleConfirm={() =>
+                  setRemoveMemberDialogOpen((preVal) => !preVal)
+                }
+                memberName="John Doe"
+                ethAddress="0x1234567890"
+                emailDomain="example.com"
+              />
+              {/* Delete variable */}
+              <Button onClick={() => setDeleteVariableDialogOpen(true)}>
+                Delete variable
+              </Button>
+              <DeleteVariableDialog
+                handleCancel={() =>
+                  setDeleteVariableDialogOpen((preVal) => !preVal)
+                }
+                open={deleteVariableDialogOpen}
+                handleConfirm={() =>
+                  setDeleteVariableDialogOpen((preVal) => !preVal)
+                }
+                variableKey="AIUTH_TOKEN"
+              />
+              {/* Delete domain */}
+              <Button onClick={() => setDeleteDomainDialogOpen(true)}>
+                Delete domain
+              </Button>
+              <DeleteDomainDialog
+                handleCancel={() =>
+                  setDeleteDomainDialogOpen((preVal) => !preVal)
+                }
+                open={deleteDomainDialogOpen}
+                handleConfirm={() =>
+                  setDeleteDomainDialogOpen((preVal) => !preVal)
+                }
+                projectName="Airfoil"
+                domainName="airfoil.com"
+              />
+              {/* Cancel deployment */}
+              <Button onClick={() => setCancelDeploymentDialogOpen(true)}>
+                Cancel deployment
+              </Button>
+              <CancelDeploymentDialog
+                handleCancel={() =>
+                  setCancelDeploymentDialogOpen(!cancelDeploymentDialogOpen)
+                }
+                open={cancelDeploymentDialogOpen}
+                handleConfirm={() =>
+                  setCancelDeploymentDialogOpen(!cancelDeploymentDialogOpen)
+                }
+              />
+              {/* Change to production */}
+              <Button onClick={() => setChangeProductionDialogOpen(true)}>
+                Change to production
+              </Button>
+              <ChangeStateToProductionDialog
+                dialogTitle="Change to production?"
+                confirmButtonTitle="Change"
+                handleCancel={() => setChangeProductionDialogOpen(false)}
+                open={changeProductionDialogOpen}
+                handleConfirm={() => setChangeProductionDialogOpen(false)}
+                deployment={deployment}
+                domains={domains}
+              />
+              {/* Redeploy to production */}
+              <Button onClick={() => setRedeployToProduction(true)}>
+                Redeploy to production
+              </Button>
+              <ChangeStateToProductionDialog
+                dialogTitle="Redeploy to production?"
+                handleCancel={() =>
+                  setRedeployToProduction((preVal) => !preVal)
+                }
+                open={redeployToProduction}
+                confirmButtonTitle="Redeploy"
+                handleConfirm={async () =>
+                  setRedeployToProduction((preVal) => !preVal)
+                }
+                deployment={deployment}
+                domains={deployment.domain ? [deployment.domain] : []}
+              />
+              {/* Rollback to this deployment */}
+              <Button onClick={() => setRollbackDeployment(true)}>
+                Rollback to this deployment
+              </Button>
+              <ChangeStateToProductionDialog
+                dialogTitle="Rollback to this deployment?"
+                handleCancel={() => setRollbackDeployment((preVal) => !preVal)}
+                open={rollbackDeployment}
+                confirmButtonTitle="Rollback"
+                handleConfirm={async () =>
+                  setRollbackDeployment((preVal) => !preVal)
+                }
+                deployment={deployment}
+                newDeployment={deployment}
+                domains={deployment.domain ? [deployment.domain] : []}
+              />
             </div>
           </div>
         </div>