src: Add confirmation dialog for deleting repos

src/components/confirmation_dialog.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Button, Modal } from "@patternfly/react-core";
+import { useDialogs } from "dialogs";
+
+import cockpit from "cockpit";
+
+const _ = cockpit.gettext;
+
+export const ConfirmationDialog = ({
+  title,
+  callback,
+  content,
+}: {
+  title: string;
+  callback: () => void;
+  content: React.ReactNode | undefined;
+}) => {
+  const Dialogs = useDialogs();
+
+  return (
+    <Modal
+      title={title}
+      variant="small"
+      onClose={Dialogs.close}
+      isOpen
+      footer={
+        <>
+          <Button
+            variant="danger"
+            onClick={callback}
+            aria-label={title}
+          >
+            {_("Delete")}
+          </Button>
+          <Button
+            variant="link"
+            className="btn-cancel"
+            onClick={Dialogs.close}
+          >
+            {_("Cancel")}
+          </Button>
+        </>
+      }
+    >
+      {content}
+    </Modal>
+  );
+};

src/components/repo_list.tsx

@@ -9,6 +9,7 @@ import { useDialogs } from "dialogs";
 import { BanIcon, CheckIcon } from "@patternfly/react-icons";
 import { RepoDialog } from "./repo_dialog";
 import { RepoChangesContext } from "../app";
+import { ConfirmationDialog } from "./confirmation_dialog";
 
 const _ = cockpit.gettext;
 
@@ -81,10 +82,12 @@ const RepoActions = ({ backend, repo }: { backend: Backend; repo: Repo }) => {
         <DropdownItem
       key="delete-repo"
       onClick={() => {
+        Dialogs.show(<ConfirmationDialog title={cockpit.format(_("Delete $0?"), repo.name)} callback={() => {
           backend.deleteRepo(repo).then(() => {
               if (setReposChanged && reposChanged !== null)
                   setReposChanged(reposChanged + 1);
           });
+        }}/>)
       }}
         >
             {_("Delete repo")}