chore: add confirmation dialog

src/ui/views/RepoDetails/Components/DeleteRepoDialog.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import { Button, DialogContentText, TextField } from '@material-ui/core';
+import DialogActions from '@material-ui/core/DialogActions';
+
+interface ConfirmDeleteRepoProps {
+  repoName: string;
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+const DeleteRepoDialog: React.FC<ConfirmDeleteRepoProps> = ({
+  repoName,
+  open,
+  onClose,
+  onConfirm,
+}) => {
+  const [confirmInput, setConfirmInput] = useState<string>('');
+
+  const handleClose = () => {
+    setConfirmInput('');
+    onClose();
+  };
+
+  const handleConfirm = () => {
+    setConfirmInput('');
+    onConfirm();
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth='sm' fullWidth>
+      <DialogTitle>Delete Repository</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          This action cannot be undone. This will permanently delete the <strong>{repoName}</strong>{' '}
+          repository.
+        </DialogContentText>
+        <DialogContentText style={{ marginTop: '16px', marginBottom: '8px' }}>
+          Please type <strong>{repoName}</strong> to confirm:
+        </DialogContentText>
+        <TextField
+          fullWidth
+          value={confirmInput}
+          onChange={(e) => setConfirmInput(e.target.value)}
+          placeholder={repoName}
+          autoFocus
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button variant='outlined' onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button
+          variant='contained'
+          color='secondary'
+          onClick={handleConfirm}
+          disabled={confirmInput !== repoName}
+        >
+          Delete Repository
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default DeleteRepoDialog;

src/ui/views/RepoDetails/RepoDetails.tsx

@@ -23,6 +23,7 @@ import CodeActionButton from '../../components/CustomButtons/CodeActionButton';
 import { trimTrailingDotGit } from '../../../db/helper';
 import { fetchRemoteRepositoryData } from '../../utils';
 import { SCMRepositoryMetadata } from '../../../types/models';
+import DeleteRepoDialog from './Components/DeleteRepoDialog';
 
 interface RepoData {
   _id: string;
@@ -58,10 +59,11 @@ const RepoDetails: React.FC = () => {
   const navigate = useNavigate();
   const classes = useStyles();
   const [data, setData] = useState<RepoData | null>(null);
-  const [, setAuth] = useState(true);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isError, setIsError] = useState(false);
-  const [remoteRepoData, setRemoteRepoData] = React.useState<SCMRepositoryMetadata | null>(null);
+  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState<boolean>(false);
+  const [, setAuth] = useState<boolean>(true);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isError, setIsError] = useState<boolean>(false);
+  const [remoteRepoData, setRemoteRepoData] = useState<SCMRepositoryMetadata | null>(null);
   const { user } = useContext<UserContextType>(UserContext);
   const { id: repoId } = useParams<{ id: string }>();
 
@@ -120,7 +122,7 @@ const RepoDetails: React.FC = () => {
                     variant='contained'
                     color='secondary'
                     data-testid='delete-repo-button'
-                    onClick={() => removeRepository(data._id)}
+                    onClick={() => setConfirmDeleteOpen(true)}
                   >
                     <Delete />
                   </Button>
@@ -266,6 +268,13 @@ const RepoDetails: React.FC = () => {
           </CardBody>
         </Card>
       </GridItem>
+
+      <DeleteRepoDialog
+        repoName={data.name}
+        open={confirmDeleteOpen}
+        onClose={() => setConfirmDeleteOpen(false)}
+        onConfirm={() => removeRepository(data._id)}
+      />
     </GridContainer>
   );
 };