📝 docs: put all the new dialog into component page
This commit is contained in:
Wahyu Kurniawan
parent
9b3ac4654f
commit
8834de893e
@ -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">
|
||||
<Modal open={openModal}>
|
||||
<div className="flex gap-4 flex-wrap items-center justify-center">
|
||||
{/* 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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user