From 9c8c5ab9cebd07cd858f0e3183aa22bd13bd4398 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Till-Andr=C3=A9=20Diegeler?=
 <till-andre.diegeler@cloudogu.com>
Date: Thu, 24 Jul 2025 13:27:04 +0200
Subject: [PATCH] Implement confirmation dialog before repository delete

Squash commits of branch feature/confirm_repo_delete:

- Implement confirmation dialog before repository delete

- Change repo alert

- The input does not support autocomplete

Therefore it should not be announced as an autocomplete input by assistive technologies.

- Change repo alert

- Remove unused import

- Update snapshots
---
 docs/de/user/repo/index.md                    |  4 +-
 docs/de/user/repo/settings.md                 |  4 +-
 gradle/changelog/delete_confirm_dialog.yaml   |  2 +
 .../src/__snapshots__/storyshots.test.ts.snap |  2 +
 .../ui-components/src/modals/ConfirmAlert.tsx | 14 ++++--
 .../forms/base/field-message/FieldMessage.tsx |  8 ++--
 .../src/base/forms/input/InputField.tsx       |  7 ++-
 scm-ui/ui-webapp/public/locales/de/repos.json |  4 ++
 scm-ui/ui-webapp/public/locales/en/repos.json |  2 +
 .../src/repos/containers/DeleteRepo.tsx       | 47 ++++++++++++++++---
 10 files changed, 76 insertions(+), 18 deletions(-)
 create mode 100644 gradle/changelog/delete_confirm_dialog.yaml

diff --git a/docs/de/user/repo/index.md b/docs/de/user/repo/index.md
index a12aee790a..d8d827a990 100644
--- a/docs/de/user/repo/index.md
+++ b/docs/de/user/repo/index.md
@@ -62,8 +62,8 @@ Das gewählte Repository wird zum SCM-Manager hinzugefügt und sämtliche Reposi
 
 ![Repository importieren](assets/import-repository.png)
 
-### Repository Informationen
-Die Informationsseite eines Repository zeigt die Metadaten zum Repository an. Darunter befinden sich Beschreibungen zu den unterschiedlichen Möglichkeiten wie man mit diesem Repository arbeiten kann. 
+### Repositoryinformationen
+Die Informationsseite eines Repositorys zeigt die Metadaten zum Repository an. Darunter befinden sich Beschreibungen zu den unterschiedlichen Möglichkeiten wie man mit diesem Repository arbeiten kann. 
 In der Überschrift kann der Namespace angeklickt werden, um alle Repositories aus diesem Namespace anzuzeigen.
 
 ![Repository-Information](assets/repository-information.png)
diff --git a/docs/de/user/repo/settings.md b/docs/de/user/repo/settings.md
index fcb245396d..6cc063df59 100644
--- a/docs/de/user/repo/settings.md
+++ b/docs/de/user/repo/settings.md
@@ -45,10 +45,10 @@ eingebunden sind. Wenn bei dem Zugriff auf ein Repository Fehler auftreten, soll
 Integritätsprüfung gestartet werden. Ein Teil dieser Prüfungen wird bei jedem Start des SCM-Managers ausgeführt.
 
 Werden bei einer dieser Integritätsprüfungen Fehler gefunden, wird auf der Repository-Übersicht sowie auf den
-Detailseiten zum Repository neben dem Namen ein Tag „fehlerhaft" angezeigt. In den Einstellungen wird zudem eine Meldung
+Detailseiten zum Repository neben dem Namen ein Tag „fehlerhaft“ angezeigt. In den Einstellungen wird zudem eine Meldung
 eingeblendet. Durch Klick auf diese Meldung oder die Tags wird ein Popup mit weiteren Details angezeigt.
 
-Der Server führt immer nur eine Prüfung zur Zeit durch. Es können jedoch für mehrere Repositories Prüfungen in die
+Der Server führt immer nur eine Prüfung zurzeit durch. Es können jedoch für mehrere Repositories Prüfungen in die
 Warteschlange gestellt werden, die dann nacheinander durchgeführt werden.
 
 ![Repository-Settings-General-Health-Check](assets/repository-settings-general-health-check.png)
diff --git a/gradle/changelog/delete_confirm_dialog.yaml b/gradle/changelog/delete_confirm_dialog.yaml
new file mode 100644
index 0000000000..b16654a26c
--- /dev/null
+++ b/gradle/changelog/delete_confirm_dialog.yaml
@@ -0,0 +1,2 @@
+- type: added
+  description: Confirmation dialog before repository deletion
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 5375b3982c..df34b5a14a 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -17047,6 +17047,7 @@ Array [
  hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance with
  Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
  ordinary mob.
+           
         </section>
         <footer
           className="modal-card-foot"
@@ -17195,6 +17196,7 @@ Array [
  hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance with
  Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly
  ordinary mob.
+           
         </section>
         <footer
           className="modal-card-foot"
diff --git a/scm-ui/ui-components/src/modals/ConfirmAlert.tsx b/scm-ui/ui-components/src/modals/ConfirmAlert.tsx
index c353657006..906613b687 100644
--- a/scm-ui/ui-components/src/modals/ConfirmAlert.tsx
+++ b/scm-ui/ui-components/src/modals/ConfirmAlert.tsx
@@ -26,16 +26,17 @@ type Button = {
   isLoading?: boolean;
   onClick?: () => void | null;
   autofocus?: boolean;
+  disabled?: boolean;
 };
 
 type Props = {
   title: string;
-  message: string;
+  message?: string;
   buttons: Button[];
   close?: () => void;
 };
 
-export const ConfirmAlert: FC<Props> = ({ title, message, buttons, close }) => {
+export const ConfirmAlert: FC<Props> = ({ title, message, buttons, close, children }) => {
   const [showModal, setShowModal] = useState(true);
   const initialFocusButton = useRef<HTMLButtonElement>(null);
 
@@ -54,7 +55,11 @@ export const ConfirmAlert: FC<Props> = ({ title, message, buttons, close }) => {
     onClose();
   };
 
-  const body = <>{message}</>;
+  const body = (
+    <>
+      {message} {children}
+    </>
+  );
 
   const footer = (
     <div className="field is-grouped">
@@ -63,8 +68,9 @@ export const ConfirmAlert: FC<Props> = ({ title, message, buttons, close }) => {
           <button
             className={classNames("button", button.className, button.isLoading ? "is-loading" : "")}
             key={index}
+            disabled={button.disabled}
             onClick={() => handleClickButton(button)}
-            onKeyDown={e => e.key === "Enter" && handleClickButton(button)}
+            onKeyDown={(e) => e.key === "Enter" && handleClickButton(button)}
             tabIndex={0}
             ref={button.autofocus ? initialFocusButton : undefined}
           >
diff --git a/scm-ui/ui-core/src/base/forms/base/field-message/FieldMessage.tsx b/scm-ui/ui-core/src/base/forms/base/field-message/FieldMessage.tsx
index 7d6041198b..9c686039b1 100644
--- a/scm-ui/ui-core/src/base/forms/base/field-message/FieldMessage.tsx
+++ b/scm-ui/ui-core/src/base/forms/base/field-message/FieldMessage.tsx
@@ -18,9 +18,11 @@ import React, { ReactNode } from "react";
 import classNames from "classnames";
 import { createVariantClass, Variant } from "../../variants";
 
-type Props = { variant?: Variant; className?: string; children?: ReactNode };
+type Props = { id?: string; variant?: Variant; className?: string; children?: ReactNode };
 
-const FieldMessage = ({ variant, className, children }: Props) => (
-  <p className={classNames("help", createVariantClass(variant), className)}>{children}</p>
+const FieldMessage = ({ id, variant, className, children }: Props) => (
+  <p id={id} className={classNames("help", createVariantClass(variant), className)}>
+    {children}
+  </p>
 );
 export default FieldMessage;
diff --git a/scm-ui/ui-core/src/base/forms/input/InputField.tsx b/scm-ui/ui-core/src/base/forms/input/InputField.tsx
index ebf5123f17..8799cd749e 100644
--- a/scm-ui/ui-core/src/base/forms/input/InputField.tsx
+++ b/scm-ui/ui-core/src/base/forms/input/InputField.tsx
@@ -46,6 +46,7 @@ const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
     const inputId = useAriaId(id ?? props.testId);
     const helpTextId = helpText ? `input-helptext-${name}` : undefined;
     const descriptionId = descriptionText ? `input-description-${name}` : undefined;
+    const errorId = error ? `input-error-${name}` : undefined;
     const variant = error ? "danger" : undefined;
     return (
       <Field className={className}>
@@ -74,7 +75,11 @@ const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
             </span>
           ) : null}
         </Control>
-        {error ? <FieldMessage variant={variant}>{error}</FieldMessage> : null}
+        {error ? (
+          <FieldMessage id={errorId} variant={variant}>
+            {error}
+          </FieldMessage>
+        ) : null}
       </Field>
     );
   }
diff --git a/scm-ui/ui-webapp/public/locales/de/repos.json b/scm-ui/ui-webapp/public/locales/de/repos.json
index 5c1aa86528..b3e4d8d58b 100644
--- a/scm-ui/ui-webapp/public/locales/de/repos.json
+++ b/scm-ui/ui-webapp/public/locales/de/repos.json
@@ -172,6 +172,8 @@
       "confirmAlert": {
         "title": "Branch löschen",
         "message": "Möchten Sie den Branch \"{{branch}}\" wirklich löschen?",
+        "typeNameConfirmation": "Bitte geben Sie \"{{confirmationText}}\" ein, um Ihre Entscheidung zu bestätigen.",
+        "inputNotMatching": "Die Eingabe stimmt nicht überein.",
         "cancel": "Nein",
         "submit": "Ja"
       }
@@ -515,6 +517,8 @@
     "confirmAlert": {
       "title": "Repository löschen",
       "message": "Soll das Repository wirklich gelöscht werden?",
+      "confirmationText": "Geben Sie \"{{confirmationText}}\" ein, um das Löschen des Repositories zu bestätigen.",
+      "inputNotMatching": "Die Eingabe stimmt nicht überein.",
       "submit": "Ja",
       "cancel": "Nein"
     }
diff --git a/scm-ui/ui-webapp/public/locales/en/repos.json b/scm-ui/ui-webapp/public/locales/en/repos.json
index ffd5965006..5910ccdd6f 100644
--- a/scm-ui/ui-webapp/public/locales/en/repos.json
+++ b/scm-ui/ui-webapp/public/locales/en/repos.json
@@ -515,6 +515,8 @@
     "confirmAlert": {
       "title": "Delete Repository",
       "message": "Do you really want to delete the repository?",
+      "confirmationText": "Enter \"{{confirmationText}}\" to confirm the deletion of the repository.",
+      "inputNotMatching": "The input doesn't match.",
       "submit": "Yes",
       "cancel": "No"
     }
diff --git a/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx b/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
index 01cc824ae9..d6a32953f8 100644
--- a/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
@@ -20,6 +20,7 @@ import { useTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
 import { ConfirmAlert, DeleteButton, ErrorNotification, Level } from "@scm-manager/ui-components";
 import { useDeleteRepository } from "@scm-manager/ui-api";
+import { InputField } from "@scm-manager/ui-core";
 
 type Props = {
   repository: Repository;
@@ -31,9 +32,12 @@ const DeleteRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
   const { isLoading, error, remove, isDeleted } = useDeleteRepository({
     onSuccess: () => {
       history.push("/repos/");
-    }
+    },
   });
   const [showConfirmAlert, setShowConfirmAlert] = useState(false);
+  const [enteredValue, setEnteredValue] = useState("");
+  const [inputError, setInputError] = useState();
+  const [errorId, setErrorId] = useState(error ? "input-error-delete" : undefined);
   const [t] = useTranslation("repos");
   useEffect(() => {
     if (isDeleted) {
@@ -47,29 +51,60 @@ const DeleteRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
 
   const confirmDelete = () => {
     setShowConfirmAlert(true);
+    setEnteredValue("");
+    setInputError(undefined);
+    setErrorId(undefined);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEnteredValue(e.target.value);
+    if (isInvalidEnteredValue && !inputError) {
+      setInputError(t("deleteRepo.confirmAlert.inputNotMatching"));
+      setErrorId("input-error-delete");
+    }
   };
 
   const action = confirmDialog ? confirmDelete : deleteRepoCallback;
 
+  const confirmationText = `${repository.namespace}/${repository.name}`;
+  const isInvalidEnteredValue = enteredValue !== confirmationText;
+
+  const confirmationDialog = (
+    <>
+      <InputField
+        name="delete"
+        label={t("deleteRepo.confirmAlert.confirmationText", { confirmationText: confirmationText })}
+        value={enteredValue}
+        onChange={handleChange}
+        error={isInvalidEnteredValue ? inputError : undefined}
+        aria-describedby={errorId}
+        aria-invalid={errorId !== undefined}
+        autoComplete="off"
+      ></InputField>
+    </>
+  );
+
   if (showConfirmAlert) {
     return (
       <ConfirmAlert
         title={t("deleteRepo.confirmAlert.title")}
-        message={t("deleteRepo.confirmAlert.message")}
         buttons={[
           {
             label: t("deleteRepo.confirmAlert.submit"),
-            onClick: () => deleteRepoCallback()
+            onClick: () => deleteRepoCallback(),
+            disabled: isInvalidEnteredValue,
           },
           {
             className: "is-info",
             label: t("deleteRepo.confirmAlert.cancel"),
             onClick: () => null,
-            autofocus: true
-          }
+            autofocus: true,
+          },
         ]}
         close={() => setShowConfirmAlert(false)}
-      />
+      >
+        {confirmationDialog}
+      </ConfirmAlert>
     );
   }