From 941c912e6d654694816fa74d07b18da302ccfa4d Mon Sep 17 00:00:00 2001
From: Andy Pols <andy@pols.co.uk>
Date: Fri, 31 Oct 2025 14:30:29 +0000
Subject: [PATCH 1/3] chore: add confirmation dialog

---
 .../Components/ConfirmDeleteRepo.tsx          | 70 +++++++++++++++++++
 src/ui/views/RepoDetails/RepoDetails.tsx      | 19 +++--
 2 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 src/ui/views/RepoDetails/Components/ConfirmDeleteRepo.tsx

diff --git a/src/ui/views/RepoDetails/Components/ConfirmDeleteRepo.tsx b/src/ui/views/RepoDetails/Components/ConfirmDeleteRepo.tsx
new file mode 100644
index 000000000..e54bcf148
--- /dev/null
+++ b/src/ui/views/RepoDetails/Components/ConfirmDeleteRepo.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 ConfirmDeleteRepo: 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 repository{' '}
+          <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 ConfirmDeleteRepo;
diff --git a/src/ui/views/RepoDetails/RepoDetails.tsx b/src/ui/views/RepoDetails/RepoDetails.tsx
index cb62e8008..048c3d456 100644
--- a/src/ui/views/RepoDetails/RepoDetails.tsx
+++ b/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 ConfirmDeleteRepo from './Components/ConfirmDeleteRepo';
 
 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>
+
+      <ConfirmDeleteRepo
+        repoName={data.name}
+        open={confirmDeleteOpen}
+        onClose={() => setConfirmDeleteOpen(false)}
+        onConfirm={() => removeRepository(data._id)}
+      />
     </GridContainer>
   );
 };

From 0dd92fe07a0bba19e094704c29175d2d85860e62 Mon Sep 17 00:00:00 2001
From: Andy Pols <andy@pols.co.uk>
Date: Fri, 31 Oct 2025 14:57:50 +0000
Subject: [PATCH 2/3] chore: tidy up layout

---
 src/ui/views/RepoDetails/Components/ConfirmDeleteRepo.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/views/RepoDetails/Components/ConfirmDeleteRepo.tsx b/src/ui/views/RepoDetails/Components/ConfirmDeleteRepo.tsx
index e54bcf148..f2197a3f7 100644
--- a/src/ui/views/RepoDetails/Components/ConfirmDeleteRepo.tsx
+++ b/src/ui/views/RepoDetails/Components/ConfirmDeleteRepo.tsx
@@ -36,8 +36,8 @@ const ConfirmDeleteRepo: React.FC<ConfirmDeleteRepoProps> = ({
       <DialogTitle>Delete Repository</DialogTitle>
       <DialogContent>
         <DialogContentText>
-          This action cannot be undone. This will permanently delete the repository{' '}
-          <strong>{repoName}</strong> repository.
+          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:

From 573336a14da8678450578959b89f0acb9d772bda Mon Sep 17 00:00:00 2001
From: Andy Pols <andy@pols.co.uk>
Date: Mon, 3 Nov 2025 09:55:03 +0000
Subject: [PATCH 3/3] chore: rename to DeleteRepoDialog

---
 .../{ConfirmDeleteRepo.tsx => DeleteRepoDialog.tsx}           | 4 ++--
 src/ui/views/RepoDetails/RepoDetails.tsx                      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename src/ui/views/RepoDetails/Components/{ConfirmDeleteRepo.tsx => DeleteRepoDialog.tsx} (95%)

diff --git a/src/ui/views/RepoDetails/Components/ConfirmDeleteRepo.tsx b/src/ui/views/RepoDetails/Components/DeleteRepoDialog.tsx
similarity index 95%
rename from src/ui/views/RepoDetails/Components/ConfirmDeleteRepo.tsx
rename to src/ui/views/RepoDetails/Components/DeleteRepoDialog.tsx
index f2197a3f7..e54353a2d 100644
--- a/src/ui/views/RepoDetails/Components/ConfirmDeleteRepo.tsx
+++ b/src/ui/views/RepoDetails/Components/DeleteRepoDialog.tsx
@@ -12,7 +12,7 @@ interface ConfirmDeleteRepoProps {
   onConfirm: () => void;
 }
 
-const ConfirmDeleteRepo: React.FC<ConfirmDeleteRepoProps> = ({
+const DeleteRepoDialog: React.FC<ConfirmDeleteRepoProps> = ({
   repoName,
   open,
   onClose,
@@ -67,4 +67,4 @@ const ConfirmDeleteRepo: React.FC<ConfirmDeleteRepoProps> = ({
   );
 };
 
-export default ConfirmDeleteRepo;
+export default DeleteRepoDialog;
diff --git a/src/ui/views/RepoDetails/RepoDetails.tsx b/src/ui/views/RepoDetails/RepoDetails.tsx
index 048c3d456..48e641484 100644
--- a/src/ui/views/RepoDetails/RepoDetails.tsx
+++ b/src/ui/views/RepoDetails/RepoDetails.tsx
@@ -23,7 +23,7 @@ import CodeActionButton from '../../components/CustomButtons/CodeActionButton';
 import { trimTrailingDotGit } from '../../../db/helper';
 import { fetchRemoteRepositoryData } from '../../utils';
 import { SCMRepositoryMetadata } from '../../../types/models';
-import ConfirmDeleteRepo from './Components/ConfirmDeleteRepo';
+import DeleteRepoDialog from './Components/DeleteRepoDialog';
 
 interface RepoData {
   _id: string;
@@ -269,7 +269,7 @@ const RepoDetails: React.FC = () => {
         </Card>
       </GridItem>
 
-      <ConfirmDeleteRepo
+      <DeleteRepoDialog
         repoName={data.name}
         open={confirmDeleteOpen}
         onClose={() => setConfirmDeleteOpen(false)}