From 4fcf8e92b7c9b42cb63e73b669b038052139f4b7 Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Thu, 14 Mar 2024 22:07:36 +0700 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20create=20anoth?= =?UTF-8?q?er=20example=20page=20for=20modal=20only?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/pages/components/index.tsx | 223 -------------- .../frontend/src/pages/components/modals.tsx | 274 ++++++++++++++++++ 2 files changed, 274 insertions(+), 223 deletions(-) create mode 100644 packages/frontend/src/pages/components/modals.tsx diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx index 2d4fe399..84e3e188 100644 --- a/packages/frontend/src/pages/components/index.tsx +++ b/packages/frontend/src/pages/components/index.tsx @@ -37,74 +37,6 @@ 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(); @@ -113,20 +45,6 @@ const Page: React.FC = () => { useState('Test 1'); const [switchValue, setSwitchValue] = useState(false); const [selectedRadio, setSelectedRadio] = useState(''); - 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 (
@@ -161,147 +79,6 @@ const Page: React.FC = () => { - {/* Transfer project */} - - setOpenTransferDialog(!openTransferDialog)} - open={openTransferDialog} - handleConfirm={() => setOpenTransferDialog(!openTransferDialog)} - projectName="nextjs-boilerplate" - from="ayungavis" - to="Airfoil" - /> - {/* Delete webhook */} - - setDeleteDialogOpen((preVal) => !preVal)} - open={deleteDialogOpen} - handleConfirm={() => setDeleteDialogOpen((preVal) => !preVal)} - webhookUrl="examplehook.com" - /> - {/* Disconnect repository */} - - - setDisconnectRepoDialogOpen((preVal) => !preVal) - } - open={disconnectRepoDialogOpen} - handleConfirm={() => { - setDisconnectRepoDialogOpen((preVal) => !preVal); - }} - /> - {/* Remove member */} - - - setRemoveMemberDialogOpen((preVal) => !preVal) - } - open={removeMemberDialogOpen} - confirmButtonTitle="Yes, Remove member" - handleConfirm={() => - setRemoveMemberDialogOpen((preVal) => !preVal) - } - memberName="John Doe" - ethAddress="0x1234567890" - emailDomain="example.com" - /> - {/* Delete variable */} - - - setDeleteVariableDialogOpen((preVal) => !preVal) - } - open={deleteVariableDialogOpen} - handleConfirm={() => - setDeleteVariableDialogOpen((preVal) => !preVal) - } - variableKey="AIUTH_TOKEN" - /> - {/* Delete domain */} - - - setDeleteDomainDialogOpen((preVal) => !preVal) - } - open={deleteDomainDialogOpen} - handleConfirm={() => - setDeleteDomainDialogOpen((preVal) => !preVal) - } - projectName="Airfoil" - domainName="airfoil.com" - /> - {/* Cancel deployment */} - - - setCancelDeploymentDialogOpen(!cancelDeploymentDialogOpen) - } - open={cancelDeploymentDialogOpen} - handleConfirm={() => - setCancelDeploymentDialogOpen(!cancelDeploymentDialogOpen) - } - /> - {/* Change to production */} - - setChangeProductionDialogOpen(false)} - open={changeProductionDialogOpen} - handleConfirm={() => setChangeProductionDialogOpen(false)} - deployment={deployment} - domains={domains} - /> - {/* Redeploy to production */} - - - setRedeployToProduction((preVal) => !preVal) - } - open={redeployToProduction} - confirmButtonTitle="Redeploy" - handleConfirm={async () => - setRedeployToProduction((preVal) => !preVal) - } - deployment={deployment} - domains={deployment.domain ? [deployment.domain] : []} - /> - {/* Rollback to this deployment */} - - setRollbackDeployment((preVal) => !preVal)} - open={rollbackDeployment} - confirmButtonTitle="Rollback" - handleConfirm={async () => - setRollbackDeployment((preVal) => !preVal) - } - deployment={deployment} - newDeployment={deployment} - domains={deployment.domain ? [deployment.domain] : []} - />
diff --git a/packages/frontend/src/pages/components/modals.tsx b/packages/frontend/src/pages/components/modals.tsx new file mode 100644 index 00000000..63d34e2a --- /dev/null +++ b/packages/frontend/src/pages/components/modals.tsx @@ -0,0 +1,274 @@ +import React from 'react'; + +import { useState } from 'react'; + +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 ModalsPage: React.FC = () => { + 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 ( +
+
+

Manual Storybook

+

+ Get started by editing{' '} + + packages/frontend/src/pages/components/index.tsx + +

+ +
+ + {/* Modal */} +
+
+

Modal

+
+ {/* Modal example */} + + + + + + Modal title + +

Modal content

+
+ + + +
+
+ {/* Transfer project */} + + setOpenTransferDialog(!openTransferDialog)} + open={openTransferDialog} + handleConfirm={() => setOpenTransferDialog(!openTransferDialog)} + projectName="nextjs-boilerplate" + from="ayungavis" + to="Airfoil" + /> + {/* Delete webhook */} + + setDeleteDialogOpen((preVal) => !preVal)} + open={deleteDialogOpen} + handleConfirm={() => setDeleteDialogOpen((preVal) => !preVal)} + webhookUrl="examplehook.com" + /> + {/* Disconnect repository */} + + + setDisconnectRepoDialogOpen((preVal) => !preVal) + } + open={disconnectRepoDialogOpen} + handleConfirm={() => { + setDisconnectRepoDialogOpen((preVal) => !preVal); + }} + /> + {/* Remove member */} + + + setRemoveMemberDialogOpen((preVal) => !preVal) + } + open={removeMemberDialogOpen} + confirmButtonTitle="Yes, Remove member" + handleConfirm={() => + setRemoveMemberDialogOpen((preVal) => !preVal) + } + memberName="John Doe" + ethAddress="0x1234567890" + emailDomain="example.com" + /> + {/* Delete variable */} + + + setDeleteVariableDialogOpen((preVal) => !preVal) + } + open={deleteVariableDialogOpen} + handleConfirm={() => + setDeleteVariableDialogOpen((preVal) => !preVal) + } + variableKey="AIUTH_TOKEN" + /> + {/* Delete domain */} + + + setDeleteDomainDialogOpen((preVal) => !preVal) + } + open={deleteDomainDialogOpen} + handleConfirm={() => + setDeleteDomainDialogOpen((preVal) => !preVal) + } + projectName="Airfoil" + domainName="airfoil.com" + /> + {/* Cancel deployment */} + + + setCancelDeploymentDialogOpen(!cancelDeploymentDialogOpen) + } + open={cancelDeploymentDialogOpen} + handleConfirm={() => + setCancelDeploymentDialogOpen(!cancelDeploymentDialogOpen) + } + /> + {/* Change to production */} + + setChangeProductionDialogOpen(false)} + open={changeProductionDialogOpen} + handleConfirm={() => setChangeProductionDialogOpen(false)} + deployment={deployment} + domains={domains} + /> + {/* Redeploy to production */} + + + setRedeployToProduction((preVal) => !preVal) + } + open={redeployToProduction} + confirmButtonTitle="Redeploy" + handleConfirm={async () => + setRedeployToProduction((preVal) => !preVal) + } + deployment={deployment} + domains={deployment.domain ? [deployment.domain] : []} + /> + {/* Rollback to this deployment */} + + setRollbackDeployment((preVal) => !preVal)} + open={rollbackDeployment} + confirmButtonTitle="Rollback" + handleConfirm={async () => + setRollbackDeployment((preVal) => !preVal) + } + deployment={deployment} + newDeployment={deployment} + domains={deployment.domain ? [deployment.domain] : []} + /> +
+
+
+
+
+ ); +}; + +export default ModalsPage;