From fc2bdefe1731dd3d1d6a362f4d6c947f87f1c209 Mon Sep 17 00:00:00 2001 From: Nabarun Gogoi Date: Tue, 26 Dec 2023 11:53:28 +0530 Subject: [PATCH] Add confirm dialogs for deployment menu (#24) * Add dialogs for deployment menu items * Populate deployment dialogs with dummy json * Pass production deployment as prop to deployment card --------- Co-authored-by: neeraj --- packages/frontend/src/assets/deployments.json | 9 +- .../projects/project/DeploymentsTabPanel.tsx | 19 ++- .../deployments/DeploymentDetailsCard.tsx | 147 ++++++++++++++---- .../deployments/DeploymentDialogBodyCard.tsx | 44 ++++++ .../src/components/shared/ConfirmDialog.tsx | 2 +- packages/frontend/src/types/project.ts | 19 +++ 6 files changed, 206 insertions(+), 34 deletions(-) create mode 100644 packages/frontend/src/components/projects/project/deployments/DeploymentDialogBodyCard.tsx diff --git a/packages/frontend/src/assets/deployments.json b/packages/frontend/src/assets/deployments.json index c280512..df0c28b 100644 --- a/packages/frontend/src/assets/deployments.json +++ b/packages/frontend/src/assets/deployments.json @@ -1,8 +1,9 @@ [ { + "id": 1, "title": "nextjs-boilerplate-9t44zbky4dg-bygideon-projects", "status": "Building", - "environment": "Production", + "isProduction": true, "branch": "prod", "commit": { "hash": "9haif19", @@ -12,9 +13,10 @@ "updatedAt": "2023-12-11T04:20:00" }, { + "id": 2, "title": "nextjs-boilerplate-9232dwky4dg-bygideon-projects", "status": "Ready", - "environment": "Preview", + "isProduction": false, "branch": "prod", "commit": { "hash": "43de569", @@ -24,9 +26,10 @@ "updatedAt": "2023-12-11T04:20:00" }, { + "id": 3, "title": "nextjs-boilerplate-9saa22y4dg-bygideon-projects", "status": "Error", - "environment": "Production", + "isProduction": false, "branch": "main", "commit": { "hash": "4hdsf19", diff --git a/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx b/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx index ae21894..3922592 100644 --- a/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx +++ b/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx @@ -3,13 +3,12 @@ import React, { useCallback, useMemo, useState } from 'react'; import { Button, Typography } from '@material-tailwind/react'; import deploymentData from '../../../assets/deployments.json'; -import DeployDetailsCard, { - DeploymentDetails, -} from './deployments/DeploymentDetailsCard'; +import DeploymentDetailsCard from './deployments/DeploymentDetailsCard'; import FilterForm, { FilterValue, StatusOptions, } from './deployments/FilterForm'; +import { DeploymentDetails } from '../../../types/project'; const DEFAULT_FILTER_VALUE: FilterValue = { searchedBranch: '', @@ -19,6 +18,12 @@ const DEFAULT_FILTER_VALUE: FilterValue = { const DeploymentsTabPanel = () => { const [filterValue, setFilterValue] = useState(DEFAULT_FILTER_VALUE); + const productionDeployment = useMemo(() => { + return deploymentData.find((deployment) => { + return deployment.isProduction === true; + }) as DeploymentDetails; + }, []); + const filteredDeployments = useMemo(() => { return deploymentData.filter((deployment) => { // Searched branch filter @@ -55,7 +60,13 @@ const DeploymentsTabPanel = () => {
{Boolean(filteredDeployments.length) ? ( filteredDeployments.map((deployment, key) => { - return ; + return ( + + ); }) ) : (
diff --git a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx index 0a1bab9..2108630 100644 --- a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx +++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Menu, @@ -11,28 +11,13 @@ import { } from '@material-tailwind/react'; import { relativeTime } from '../../../../utils/time'; - -export enum Status { - BUILDING = 'Building', - READY = 'Ready', - ERROR = 'Error', -} - -export interface DeploymentDetails { - title: string; - status: Status; - environment: string; - branch: string; - commit: { - hash: string; - message: string; - }; - author: string; - updatedAt: string; -} +import ConfirmDialog from '../../../shared/ConfirmDialog'; +import DeploymentDialogBodyCard from './DeploymentDialogBodyCard'; +import { DeploymentDetails, Status } from '../../../../types/project'; interface DeployDetailsCardProps { deployment: DeploymentDetails; + productionDeployment: DeploymentDetails; } const STATUS_COLORS: { [key in Status]: ChipProps['color'] } = { @@ -41,7 +26,14 @@ const STATUS_COLORS: { [key in Status]: ChipProps['color'] } = { [Status.ERROR]: 'red', }; -const DeployDetailsCard = ({ deployment }: DeployDetailsCardProps) => { +const DeploymentDetailsCard = ({ + deployment, + productionDeployment, +}: DeployDetailsCardProps) => { + const [changeToProduction, setChangeToProduction] = useState(false); + const [redeployToProduction, setRedeployToProduction] = useState(false); + const [rollbackDeployment, setRollbackDeployment] = useState(false); + return (
@@ -54,7 +46,9 @@ const DeployDetailsCard = ({ deployment }: DeployDetailsCardProps) => { icon={^} />
- {deployment.environment} + + {deployment.isProduction ? 'Production (Current)' : 'Preview'} +
^ {deployment.branch} @@ -73,15 +67,116 @@ const DeployDetailsCard = ({ deployment }: DeployDetailsCardProps) => { ^ Visit ^ Assign domain - ^ Change to production + {!deployment.isProduction && ( + setChangeToProduction(!changeToProduction)} + > + ^ Change to production + + )} +
- ^ Redeploy - ^ Rollback to this version + setRedeployToProduction(!redeployToProduction)} + > + ^ Redeploy to production + + {!deployment.isProduction && ( + setRollbackDeployment(!rollbackDeployment)} + > + ^ Rollback to this version + + )}
+ setChangeToProduction(!changeToProduction)} + open={changeToProduction} + confirmButtonTitle="Change" + color="blue" + > +
+ + Upon confirmation, this deployment will be changed to production. + + + + The new deployment will be associated with these domains: + + + ^ saugatt.com + + + ^ www.saugatt.com + +
+
+ setRedeployToProduction(!redeployToProduction)} + open={redeployToProduction} + confirmButtonTitle="Redeploy" + color="blue" + > +
+ + Upon confirmation, new deployment will be created with the same + source code as current deployment. + + + + These domains will point to your new deployment: + + + ^ saugatt.com + + + ^ www.saugatt.com + +
+
+ setRollbackDeployment(!rollbackDeployment)} + open={rollbackDeployment} + confirmButtonTitle="Rollback" + color="blue" + > +
+ + Upon confirmation, this deployment will replace your current + deployment + + + + + These domains will point to your new deployment: + + + ^ saugatt.com + + + ^ www.saugatt.com + +
+
); }; -export default DeployDetailsCard; +export default DeploymentDetailsCard; diff --git a/packages/frontend/src/components/projects/project/deployments/DeploymentDialogBodyCard.tsx b/packages/frontend/src/components/projects/project/deployments/DeploymentDialogBodyCard.tsx new file mode 100644 index 0000000..473cfd6 --- /dev/null +++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDialogBodyCard.tsx @@ -0,0 +1,44 @@ +import React from 'react'; + +import { Typography, Chip, Card } from '@material-tailwind/react'; +import { color } from '@material-tailwind/react/types/components/chip'; +import { DeploymentDetails } from '../../../../types/project'; +import { relativeTime } from '../../../../utils/time'; + +interface DeploymentDialogBodyCardProps { + deployment: DeploymentDetails; + chip?: { + value: string; + color?: color; + }; +} + +const DeploymentDialogBodyCard = ({ + chip, + deployment, +}: DeploymentDialogBodyCardProps) => { + return ( + + {chip && ( + + )} + + deployment title + + + ^ {deployment.branch} ^ {deployment.commit.hash}{' '} + {deployment.commit.message} + + + ^ {relativeTime(deployment.updatedAt)} ^ {deployment.author} + + + ); +}; + +export default DeploymentDialogBodyCard; diff --git a/packages/frontend/src/components/shared/ConfirmDialog.tsx b/packages/frontend/src/components/shared/ConfirmDialog.tsx index 010c9b7..5679755 100644 --- a/packages/frontend/src/components/shared/ConfirmDialog.tsx +++ b/packages/frontend/src/components/shared/ConfirmDialog.tsx @@ -16,7 +16,7 @@ type ConfirmDialogProp = { open: boolean; handleOpen: () => void; confirmButtonTitle: string; - handleConfirm: () => void; + handleConfirm?: () => void; color: color; }; diff --git a/packages/frontend/src/types/project.ts b/packages/frontend/src/types/project.ts index 41d5daa..b41ecce 100644 --- a/packages/frontend/src/types/project.ts +++ b/packages/frontend/src/types/project.ts @@ -16,3 +16,22 @@ export interface ProjectDetails { branch: string; }; } + +export interface DeploymentDetails { + title: string; + isProduction: boolean; + status: Status; + branch: string; + commit: { + hash: string; + message: string; + }; + author: string; + updatedAt: string; +} + +export enum Status { + BUILDING = 'Building', + READY = 'Ready', + ERROR = 'Error', +}