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 <neeraj.rtly@gmail.com>

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 = ({
           </div>
         </div>
       </Collapse>
-      <Toaster />
     </div>
   );
 };

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) => {
             </MenuHandler>
             <MenuList>
               <MenuItem className="text-black">^ Edit domain</MenuItem>
-              <MenuItem className="text-red-500">^ Delete domain</MenuItem>
+              <MenuItem
+                className="text-red-500"
+                onClick={() => setDeleteDialogOpen(true)}
+              >
+                ^ Delete domain
+              </MenuItem>
             </MenuList>
           </Menu>
         </div>
+
+        <ConfirmDialog
+          dialogTitle="Delete domain?"
+          handleOpen={() => setDeleteDialogOpen((preVal) => !preVal)}
+          open={deleteDialogOpen}
+          confirmButtonTitle="Yes, Delete domain"
+          handleConfirm={() => {
+            setDeleteDialogOpen((preVal) => !preVal);
+            toast.success(`Domain "${domain.name}" has been deleted`);
+          }}
+          color="red"
+        >
+          <Typography variant="small">
+            Once deleted, the project{' '}
+            <span className="bg-blue-100 rounded-sm p-0.5 text-blue-700">
+              {currProject[0].title}
+            </span>{' '}
+            will not be accessible from the domain{' '}
+            <span className="bg-blue-100 rounded-sm p-0.5 text-blue-700">
+              {domain.name}.
+            </span>
+          </Typography>
+        </ConfirmDialog>
       </div>
+
       <Typography variant="small">Production</Typography>
       {domain.status === DomainStatus.PENDING && (
         <Card className="bg-gray-200 p-4 text-sm">

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)}
         />
       </div>
-      <Toaster position="bottom-center" />
     </>
   );
 };

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' }}
         />
       </div>
-      <Toaster />
     </>
   );
 };

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(
   <React.StrictMode>
     <ThemeProvider>
       <App />
+      <Toaster position="bottom-center" />
     </ThemeProvider>
   </React.StrictMode>,
 );

packages/frontend/src/pages/projects/id/domain/add/Config.tsx

@@ -15,21 +15,23 @@ const Config = () => {
       </div>
 
       <table className="rounded-lg w-3/4 text-blue-gray-600">
-        <tr className="border-b-2 border-gray-300">
+        <tbody>
-          <th className="text-left p-2">Type</th>
+          <tr className="border-b-2 border-gray-300">
-          <th className="text-left p-2">Name</th>
+            <th className="text-left p-2">Type</th>
-          <th className="text-left p-2">Value</th>
+            <th className="text-left p-2">Name</th>
-        </tr>
+            <th className="text-left p-2">Value</th>
-        <tr className="border-b-2 border-gray-300">
+          </tr>
-          <td className="text-left p-2">A</td>
+          <tr className="border-b-2 border-gray-300">
-          <td className="text-left p-2">@</td>
+            <td className="text-left p-2">A</td>
-          <td className="text-left p-2">56.49.19.21</td>
+            <td className="text-left p-2">@</td>
-        </tr>
+            <td className="text-left p-2">56.49.19.21</td>
-        <tr>
+          </tr>
-          <td className="text-left p-2">CNAME</td>
+          <tr>
-          <td className="text-left p-2">www</td>
+            <td className="text-left p-2">CNAME</td>
-          <td className="text-left p-2">cname.snowballtools.xyz</td>
+            <td className="text-left p-2">www</td>
-        </tr>
+            <td className="text-left p-2">cname.snowballtools.xyz</td>
+          </tr>
+        </tbody>
       </table>
 
       <Alert color="blue">