From abff6c83e551e84097e6b90d07557bc66c8068b7 Mon Sep 17 00:00:00 2001 From: Nabarun Gogoi Date: Thu, 28 Dec 2023 15:31:46 +0530 Subject: [PATCH] Add confirmation for deleting domain from project settings page (#36) * Add delete domain dialog box * Update toast message * Fix table warning * Remove Toaster from other parts of code --------- Co-authored-by: neeraj --- .../create/template/deploy/DeployStep.tsx | 3 +- .../projects/project/settings/DomainCard.tsx | 38 ++++++++++++++++++- .../settings/EnvironmentVariablesTabPanel.tsx | 3 +- .../project/settings/GeneralTabPanel.tsx | 3 +- packages/frontend/src/index.tsx | 2 + .../pages/projects/id/domain/add/Config.tsx | 32 ++++++++-------- 6 files changed, 59 insertions(+), 22 deletions(-) diff --git a/packages/frontend/src/components/projects/create/template/deploy/DeployStep.tsx b/packages/frontend/src/components/projects/create/template/deploy/DeployStep.tsx index e064757e..f6bccee3 100644 --- a/packages/frontend/src/components/projects/create/template/deploy/DeployStep.tsx +++ b/packages/frontend/src/components/projects/create/template/deploy/DeployStep.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import toast, { Toaster } from 'react-hot-toast'; +import toast from 'react-hot-toast'; import { Collapse, Button, Typography } from '@material-tailwind/react'; @@ -81,7 +81,6 @@ const DeployStep = ({ - ); }; diff --git a/packages/frontend/src/components/projects/project/settings/DomainCard.tsx b/packages/frontend/src/components/projects/project/settings/DomainCard.tsx index 1621475b..021e7eec 100644 --- a/packages/frontend/src/components/projects/project/settings/DomainCard.tsx +++ b/packages/frontend/src/components/projects/project/settings/DomainCard.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react'; +import toast from 'react-hot-toast'; import { Chip, Typography, @@ -11,6 +12,8 @@ import { } from '@material-tailwind/react'; import { DomainDetails, DomainStatus } from '../../../../types/project'; +import ConfirmDialog from '../../../shared/ConfirmDialog'; +import projectData from '../../../../assets/projects.json'; enum RefreshStatus { IDLE, @@ -27,6 +30,10 @@ const CHECK_FAIL_TIMEOUT = 5000; // In milliseconds const DomainCard = ({ domain }: DomainCardProps) => { const [refreshStatus, SetRefreshStatus] = useState(RefreshStatus.IDLE); + const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); + const currProject = projectData.filter( + (data) => data.id === domain.projectid, + ); return ( <> @@ -63,11 +70,40 @@ const DomainCard = ({ domain }: DomainCardProps) => { ^ Edit domain - ^ Delete domain + setDeleteDialogOpen(true)} + > + ^ Delete domain + + + setDeleteDialogOpen((preVal) => !preVal)} + open={deleteDialogOpen} + confirmButtonTitle="Yes, Delete domain" + handleConfirm={() => { + setDeleteDialogOpen((preVal) => !preVal); + toast.success(`Domain "${domain.name}" has been deleted`); + }} + color="red" + > + + Once deleted, the project{' '} + + {currProject[0].title} + {' '} + will not be accessible from the domain{' '} + + {domain.name}. + + + + Production {domain.status === DomainStatus.PENDING && ( diff --git a/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx b/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx index c9eddf64..5389ba7b 100644 --- a/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx +++ b/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useFieldArray, useForm } from 'react-hook-form'; -import toast, { Toaster } from 'react-hot-toast'; +import toast from 'react-hot-toast'; import { Typography, @@ -189,7 +189,6 @@ export const EnvironmentVariablesTabPanel = () => { variables={getEnvironmentVariable(Environments.DEVELOPMENT)} /> - ); }; diff --git a/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx b/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx index 132a9241..523c32fe 100644 --- a/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx +++ b/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { Link } from 'react-router-dom'; import { useForm, Controller } from 'react-hook-form'; -import toast, { Toaster } from 'react-hot-toast'; +import toast from 'react-hot-toast'; import { Button, @@ -175,7 +175,6 @@ const GeneralTabPanel = () => { project={{ name: 'Iglootools' }} /> - ); }; diff --git a/packages/frontend/src/index.tsx b/packages/frontend/src/index.tsx index 40c1b96d..af5a9a1c 100644 --- a/packages/frontend/src/index.tsx +++ b/packages/frontend/src/index.tsx @@ -6,6 +6,7 @@ import { ThemeProvider } from '@material-tailwind/react'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; +import { Toaster } from 'react-hot-toast'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement, @@ -14,6 +15,7 @@ root.render( + , ); diff --git a/packages/frontend/src/pages/projects/id/domain/add/Config.tsx b/packages/frontend/src/pages/projects/id/domain/add/Config.tsx index 0a2b7d18..b914b957 100644 --- a/packages/frontend/src/pages/projects/id/domain/add/Config.tsx +++ b/packages/frontend/src/pages/projects/id/domain/add/Config.tsx @@ -15,21 +15,23 @@ const Config = () => { - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + +
TypeNameValue
A@56.49.19.21
CNAMEwwwcname.snowballtools.xyz
TypeNameValue
A@56.49.19.21
CNAMEwwwcname.snowballtools.xyz