forked from cerc-io/snowballtools-base
♻️ refactor: create change state to production dialog reusable component
This commit is contained in:
parent
97289d85a3
commit
28740ffbee
@ -0,0 +1,90 @@
|
|||||||
|
import ConfirmDialog, {
|
||||||
|
ConfirmDialogProps,
|
||||||
|
} from 'components/shared/ConfirmDialog';
|
||||||
|
import { Deployment, Domain } from 'gql-client';
|
||||||
|
import React from 'react';
|
||||||
|
import DeploymentDialogBodyCard from 'components/projects/project/deployments/DeploymentDialogBodyCard';
|
||||||
|
import { Button } from 'components/shared/Button';
|
||||||
|
import {
|
||||||
|
ChevronDoubleDownIcon,
|
||||||
|
LinkChainIcon,
|
||||||
|
} from 'components/shared/CustomIcon';
|
||||||
|
import { TagProps } from 'components/shared/Tag';
|
||||||
|
|
||||||
|
interface ChangeStateToProductionDialogProps extends ConfirmDialogProps {
|
||||||
|
deployment: Deployment;
|
||||||
|
newDeployment?: Deployment;
|
||||||
|
domains: Domain[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ChangeStateToProductionDialog = ({
|
||||||
|
deployment,
|
||||||
|
newDeployment,
|
||||||
|
domains,
|
||||||
|
open,
|
||||||
|
handleCancel,
|
||||||
|
handleConfirm,
|
||||||
|
...props
|
||||||
|
}: ChangeStateToProductionDialogProps) => {
|
||||||
|
const currentChip = {
|
||||||
|
value: 'Live Deployment',
|
||||||
|
type: 'positive' as TagProps['type'],
|
||||||
|
};
|
||||||
|
const newChip = {
|
||||||
|
value: 'New Deployment',
|
||||||
|
type: 'attention' as TagProps['type'],
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ConfirmDialog
|
||||||
|
{...props}
|
||||||
|
handleCancel={handleCancel}
|
||||||
|
open={open}
|
||||||
|
handleConfirm={handleConfirm}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-7">
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<p className="text-sm text-elements-high-em tracking-[-0.006em]">
|
||||||
|
Upon confirmation, this deployment will be changed to production.
|
||||||
|
</p>
|
||||||
|
<DeploymentDialogBodyCard
|
||||||
|
deployment={deployment}
|
||||||
|
chip={newDeployment ? currentChip : undefined}
|
||||||
|
/>
|
||||||
|
{newDeployment && (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center justify-between w-full text-elements-info">
|
||||||
|
{Array.from({ length: 7 }).map((_, index) => (
|
||||||
|
<ChevronDoubleDownIcon key={index} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<DeploymentDialogBodyCard
|
||||||
|
deployment={newDeployment}
|
||||||
|
chip={newChip}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-start gap-3">
|
||||||
|
<p className="text-sm text-elements-high-em tracking-[-0.006em]">
|
||||||
|
The new deployment will be associated with these domains:
|
||||||
|
</p>
|
||||||
|
{domains.length > 0 &&
|
||||||
|
domains.map((value) => {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
as="a"
|
||||||
|
href={value.name}
|
||||||
|
leftIcon={<LinkChainIcon size={18} />}
|
||||||
|
variant="link"
|
||||||
|
key={value.id}
|
||||||
|
>
|
||||||
|
{value.name}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ConfirmDialog>
|
||||||
|
);
|
||||||
|
};
|
@ -17,12 +17,10 @@ import {
|
|||||||
MenuList,
|
MenuList,
|
||||||
} from '@material-tailwind/react';
|
} from '@material-tailwind/react';
|
||||||
import { ComponentPropsWithRef } from 'react';
|
import { ComponentPropsWithRef } from 'react';
|
||||||
import ConfirmDialog from '../../../shared/ConfirmDialog';
|
|
||||||
import AssignDomainDialog from './AssignDomainDialog';
|
import AssignDomainDialog from './AssignDomainDialog';
|
||||||
import DeploymentDialogBodyCard from './DeploymentDialogBodyCard';
|
import { useGQLClient } from 'context/GQLClientContext';
|
||||||
import { Typography } from '@material-tailwind/react';
|
|
||||||
import { useGQLClient } from '../../../../context/GQLClientContext';
|
|
||||||
import { cn } from 'utils/classnames';
|
import { cn } from 'utils/classnames';
|
||||||
|
import { ChangeStateToProductionDialog } from 'components/projects/Dialog/ChangeStateToProductionDialog';
|
||||||
|
|
||||||
interface DeploymentMenuProps extends ComponentPropsWithRef<'div'> {
|
interface DeploymentMenuProps extends ComponentPropsWithRef<'div'> {
|
||||||
deployment: Deployment;
|
deployment: Deployment;
|
||||||
@ -158,106 +156,44 @@ export const DeploymentMenu = ({
|
|||||||
</Menu>
|
</Menu>
|
||||||
</div>
|
</div>
|
||||||
{/* Dialogs */}
|
{/* Dialogs */}
|
||||||
<ConfirmDialog
|
<ChangeStateToProductionDialog
|
||||||
dialogTitle="Change to production?"
|
dialogTitle="Change to production?"
|
||||||
handleOpen={() => setChangeToProduction((preVal) => !preVal)}
|
|
||||||
open={changeToProduction}
|
|
||||||
confirmButtonTitle="Change"
|
confirmButtonTitle="Change"
|
||||||
color="blue"
|
handleCancel={() => setChangeToProduction((preVal) => !preVal)}
|
||||||
|
open={changeToProduction}
|
||||||
handleConfirm={async () => {
|
handleConfirm={async () => {
|
||||||
await updateDeployment();
|
await updateDeployment();
|
||||||
setChangeToProduction((preVal) => !preVal);
|
setChangeToProduction((preVal) => !preVal);
|
||||||
}}
|
}}
|
||||||
>
|
deployment={deployment}
|
||||||
<div className="flex flex-col gap-2">
|
domains={prodBranchDomains}
|
||||||
<Typography variant="small" placeholder={''}>
|
/>
|
||||||
Upon confirmation, this deployment will be changed to production.
|
<ChangeStateToProductionDialog
|
||||||
</Typography>
|
|
||||||
<DeploymentDialogBodyCard deployment={deployment} />
|
|
||||||
<Typography variant="small" placeholder={''}>
|
|
||||||
The new deployment will be associated with these domains:
|
|
||||||
</Typography>
|
|
||||||
{prodBranchDomains.length > 0 &&
|
|
||||||
prodBranchDomains.map((value) => {
|
|
||||||
return (
|
|
||||||
<Typography
|
|
||||||
variant="small"
|
|
||||||
color="blue"
|
|
||||||
key={value.id}
|
|
||||||
placeholder={''}
|
|
||||||
>
|
|
||||||
^ {value.name}
|
|
||||||
</Typography>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</ConfirmDialog>
|
|
||||||
<ConfirmDialog
|
|
||||||
dialogTitle="Redeploy to production?"
|
dialogTitle="Redeploy to production?"
|
||||||
handleOpen={() => setRedeployToProduction((preVal) => !preVal)}
|
handleCancel={() => setRedeployToProduction((preVal) => !preVal)}
|
||||||
open={redeployToProduction}
|
open={redeployToProduction}
|
||||||
confirmButtonTitle="Redeploy"
|
confirmButtonTitle="Redeploy"
|
||||||
color="blue"
|
|
||||||
handleConfirm={async () => {
|
handleConfirm={async () => {
|
||||||
await redeployToProd();
|
await redeployToProd();
|
||||||
setRedeployToProduction((preVal) => !preVal);
|
setRedeployToProduction((preVal) => !preVal);
|
||||||
}}
|
}}
|
||||||
>
|
deployment={deployment}
|
||||||
<div className="flex flex-col gap-2">
|
domains={deployment.domain ? [deployment.domain] : []}
|
||||||
<Typography variant="small" placeholder={''}>
|
/>
|
||||||
Upon confirmation, new deployment will be created with the same
|
|
||||||
source code as current deployment.
|
|
||||||
</Typography>
|
|
||||||
<DeploymentDialogBodyCard deployment={deployment} />
|
|
||||||
<Typography variant="small" placeholder={''}>
|
|
||||||
These domains will point to your new deployment:
|
|
||||||
</Typography>
|
|
||||||
{deployment.domain?.name && (
|
|
||||||
<Typography variant="small" color="blue" placeholder={''}>
|
|
||||||
{deployment.domain?.name}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</ConfirmDialog>
|
|
||||||
{Boolean(currentDeployment) && (
|
{Boolean(currentDeployment) && (
|
||||||
<ConfirmDialog
|
<ChangeStateToProductionDialog
|
||||||
dialogTitle="Rollback to this deployment?"
|
dialogTitle="Rollback to this deployment?"
|
||||||
handleOpen={() => setRollbackDeployment((preVal) => !preVal)}
|
handleCancel={() => setRollbackDeployment((preVal) => !preVal)}
|
||||||
open={rollbackDeployment}
|
open={rollbackDeployment}
|
||||||
confirmButtonTitle="Rollback"
|
confirmButtonTitle="Rollback"
|
||||||
color="blue"
|
|
||||||
handleConfirm={async () => {
|
handleConfirm={async () => {
|
||||||
await rollbackDeploymentHandler();
|
await rollbackDeploymentHandler();
|
||||||
setRollbackDeployment((preVal) => !preVal);
|
setRollbackDeployment((preVal) => !preVal);
|
||||||
}}
|
}}
|
||||||
>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<Typography variant="small" placeholder={''}>
|
|
||||||
Upon confirmation, this deployment will replace your current
|
|
||||||
deployment
|
|
||||||
</Typography>
|
|
||||||
<DeploymentDialogBodyCard
|
|
||||||
deployment={currentDeployment}
|
deployment={currentDeployment}
|
||||||
chip={{
|
newDeployment={deployment}
|
||||||
value: 'Live Deployment',
|
domains={currentDeployment.domain ? [currentDeployment.domain] : []}
|
||||||
color: 'green',
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
<DeploymentDialogBodyCard
|
|
||||||
deployment={deployment}
|
|
||||||
chip={{
|
|
||||||
value: 'New Deployment',
|
|
||||||
color: 'orange',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Typography variant="small" placeholder={''}>
|
|
||||||
These domains will point to your new deployment:
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="small" color="blue" placeholder={''}>
|
|
||||||
^ {currentDeployment.domain?.name}
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</ConfirmDialog>
|
|
||||||
)}
|
)}
|
||||||
<AssignDomainDialog
|
<AssignDomainDialog
|
||||||
open={assignDomainDialog}
|
open={assignDomainDialog}
|
||||||
|
Loading…
Reference in New Issue
Block a user