From b1e8bb7f982792e9f0224552b380f2c5a568a8eb Mon Sep 17 00:00:00 2001
From: Phil-Ah <philipp.ahrendt@cloudogu.com>
Date: Wed, 1 Jun 2022 18:10:42 +0200
Subject: [PATCH] Differentiate focused buttons in confirmation dialog (#2050)

Users need to understand which option they are choosing in an confirmation dialog. Buttons for primary and secondary actions should be visually discernible when one is focused/hovered.
The changes remove default-styling from buttons in confirmation dialogues. The style is set in the element using this dialog to better visually separate the primary and secondary action.

Resolves #2049
---
 gradle/changelog/differentiate_focused_buttons.yaml         | 2 ++
 .../ui-components/src/__snapshots__/storyshots.test.ts.snap | 6 +++---
 scm-ui/ui-components/src/modals/ConfirmAlert.stories.tsx    | 2 +-
 scm-ui/ui-components/src/modals/ConfirmAlert.tsx            | 2 +-
 .../src/admin/roles/containers/DeleteRepositoryRole.tsx     | 2 +-
 scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx      | 2 +-
 .../ui-webapp/src/repos/branches/components/BranchTable.tsx | 2 +-
 .../src/repos/branches/containers/DeleteBranch.tsx          | 2 +-
 scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx       | 2 +-
 scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx        | 2 +-
 scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx     | 2 +-
 .../repos/permissions/components/DeletePermissionButton.tsx | 2 +-
 scm-ui/ui-webapp/src/repos/tags/components/TagTable.tsx     | 2 +-
 scm-ui/ui-webapp/src/repos/tags/container/DeleteTag.tsx     | 2 +-
 .../ui-webapp/src/users/components/apiKeys/ApiKeyEntry.tsx  | 2 +-
 .../src/users/components/publicKeys/PublicKeyEntry.tsx      | 2 +-
 scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx        | 2 +-
 17 files changed, 20 insertions(+), 18 deletions(-)
 create mode 100644 gradle/changelog/differentiate_focused_buttons.yaml

diff --git a/gradle/changelog/differentiate_focused_buttons.yaml b/gradle/changelog/differentiate_focused_buttons.yaml
new file mode 100644
index 0000000000..0f62fc689b
--- /dev/null
+++ b/gradle/changelog/differentiate_focused_buttons.yaml
@@ -0,0 +1,2 @@
+- type: changed
+  description: Visually separate focused and hovered buttons in confirmation dialogues ([#2050](https://github.com/scm-manager/scm-manager/pull/2050))
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 d9953f55d8..20a3e7673d 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -16885,7 +16885,7 @@ exports[`Storyshots Modal/ConfirmAlert Autofocus 1`] = `
           className="control"
         >
           <button
-            className="button is-info is-outlined"
+            className="button"
             onClick={[Function]}
             onKeyDown={[Function]}
             tabIndex={0}
@@ -16963,7 +16963,7 @@ exports[`Storyshots Modal/ConfirmAlert Default 1`] = `
           className="control"
         >
           <button
-            className="button is-info is-outlined"
+            className="button is-outlined"
             onClick={[Function]}
             onKeyDown={[Function]}
             tabIndex={0}
@@ -16975,7 +16975,7 @@ exports[`Storyshots Modal/ConfirmAlert Default 1`] = `
           className="control"
         >
           <button
-            className="button is-info"
+            className="button"
             onClick={[Function]}
             onKeyDown={[Function]}
             tabIndex={0}
diff --git a/scm-ui/ui-components/src/modals/ConfirmAlert.stories.tsx b/scm-ui/ui-components/src/modals/ConfirmAlert.stories.tsx
index e5c2f516df..f532ae9748 100644
--- a/scm-ui/ui-components/src/modals/ConfirmAlert.stories.tsx
+++ b/scm-ui/ui-components/src/modals/ConfirmAlert.stories.tsx
@@ -46,11 +46,11 @@ const buttons = [
 
 const buttonsWithAutofocus = [
   {
-    className: "is-outlined",
     label: "Cancel",
     onClick: () => null
   },
   {
+    className: "is-info",
     label: "I should be focused",
     autofocus: true
   }
diff --git a/scm-ui/ui-components/src/modals/ConfirmAlert.tsx b/scm-ui/ui-components/src/modals/ConfirmAlert.tsx
index e58fb767c0..e4c77fd552 100644
--- a/scm-ui/ui-components/src/modals/ConfirmAlert.tsx
+++ b/scm-ui/ui-components/src/modals/ConfirmAlert.tsx
@@ -68,7 +68,7 @@ export const ConfirmAlert: FC<Props> = ({ title, message, buttons, close }) => {
       {buttons.map((button, index) => (
         <p className="control" key={index}>
           <button
-            className={classNames("button", "is-info", button.className, button.isLoading ? "is-loading" : "")}
+            className={classNames("button", button.className, button.isLoading ? "is-loading" : "")}
             key={index}
             onClick={() => handleClickButton(button)}
             onKeyDown={e => e.key === "Enter" && handleClickButton(button)}
diff --git a/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx b/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx
index ce93d69cf0..26b5658132 100644
--- a/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx
@@ -65,11 +65,11 @@ const DeleteRepositoryRole: FC<Props> = ({ confirmDialog = true, role }: Props)
         message={t("repositoryRole.delete.confirmAlert.message")}
         buttons={[
           {
-            className: "is-outlined",
             label: t("repositoryRole.delete.confirmAlert.submit"),
             onClick: deleteRoleCallback
           },
           {
+            className: "is-info",
             label: t("repositoryRole.delete.confirmAlert.cancel"),
             onClick: () => null,
             autofocus: true
diff --git a/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx b/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx
index 1785f46c66..8b7f40b389 100644
--- a/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx
@@ -60,11 +60,11 @@ export const DeleteGroup: FC<Props> = ({ confirmDialog = true, group }) => {
         message={t("deleteGroup.confirmAlert.message")}
         buttons={[
           {
-            className: "is-outlined",
             label: t("deleteGroup.confirmAlert.submit"),
             onClick: deleteGroupCallback
           },
           {
+            className: "is-info",
             label: t("deleteGroup.confirmAlert.cancel"),
             onClick: () => null,
             autofocus: true
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchTable.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchTable.tsx
index fb2f928abf..2b6fce1eb5 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchTable.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchTable.tsx
@@ -75,12 +75,12 @@ const BranchTable: FC<Props> = ({ repository, baseUrl, branches, type, branchesD
           message={t("branch.delete.confirmAlert.message", { branch: branchToBeDeleted?.name })}
           buttons={[
             {
-              className: "is-outlined",
               label: t("branch.delete.confirmAlert.submit"),
               isLoading,
               onClick: () => deleteBranch()
             },
             {
+              className: "is-info",
               label: t("branch.delete.confirmAlert.cancel"),
               onClick: () => abortDelete(),
               autofocus: true
diff --git a/scm-ui/ui-webapp/src/repos/branches/containers/DeleteBranch.tsx b/scm-ui/ui-webapp/src/repos/branches/containers/DeleteBranch.tsx
index d700fbd997..371e1ed45e 100644
--- a/scm-ui/ui-webapp/src/repos/branches/containers/DeleteBranch.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/containers/DeleteBranch.tsx
@@ -54,12 +54,12 @@ const DeleteBranch: FC<Props> = ({ repository, branch }: Props) => {
         message={t("branch.delete.confirmAlert.message", { branch: branch.name })}
         buttons={[
           {
-            className: "is-outlined",
             label: t("branch.delete.confirmAlert.submit"),
             onClick: () => remove(branch),
             isLoading
           },
           {
+            className: "is-info",
             label: t("branch.delete.confirmAlert.cancel"),
             onClick: () => null,
             autofocus: true
diff --git a/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx b/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx
index ad0e513b9f..0e7a426282 100644
--- a/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx
@@ -53,11 +53,11 @@ const ArchiveRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
       message={t("archiveRepo.confirmAlert.message")}
       buttons={[
         {
-          className: "is-outlined",
           label: t("archiveRepo.confirmAlert.submit"),
           onClick: () => archiveRepoCallback()
         },
         {
+          className: "is-info",
           label: t("archiveRepo.confirmAlert.cancel"),
           onClick: () => null,
           autofocus: true
diff --git a/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx b/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
index 0bdf82f12c..fe830f3740 100644
--- a/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
@@ -65,11 +65,11 @@ const DeleteRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
         message={t("deleteRepo.confirmAlert.message")}
         buttons={[
           {
-            className: "is-outlined",
             label: t("deleteRepo.confirmAlert.submit"),
             onClick: () => deleteRepoCallback()
           },
           {
+            className: "is-info",
             label: t("deleteRepo.confirmAlert.cancel"),
             onClick: () => null,
             autofocus: true
diff --git a/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx b/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx
index f2af80b26a..cafc4ea0ed 100644
--- a/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx
@@ -53,13 +53,13 @@ const UnarchiveRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
       message={t("unarchiveRepo.confirmAlert.message")}
       buttons={[
         {
-          className: "is-outlined",
           label: t("unarchiveRepo.confirmAlert.submit"),
           isLoading,
           onClick: () => unarchiveRepoCallback(),
           autofocus: true
         },
         {
+          className: "is-info",
           label: t("unarchiveRepo.confirmAlert.cancel"),
           onClick: () => null
         }
diff --git a/scm-ui/ui-webapp/src/repos/permissions/components/DeletePermissionButton.tsx b/scm-ui/ui-webapp/src/repos/permissions/components/DeletePermissionButton.tsx
index e4c321e659..178fb3c51f 100644
--- a/scm-ui/ui-webapp/src/repos/permissions/components/DeletePermissionButton.tsx
+++ b/scm-ui/ui-webapp/src/repos/permissions/components/DeletePermissionButton.tsx
@@ -60,12 +60,12 @@ const DeletePermissionButton: FC<Props> = ({ namespaceOrRepository, permission,
         message={t("permission.delete-permission-button.confirm-alert.message")}
         buttons={[
           {
-            className: "is-outlined",
             label: t("permission.delete-permission-button.confirm-alert.submit"),
             isLoading,
             onClick: () => deletePermission(),
           },
           {
+            className: "is-info",
             label: t("permission.delete-permission-button.confirm-alert.cancel"),
             onClick: () => null,
             autofocus: true,
diff --git a/scm-ui/ui-webapp/src/repos/tags/components/TagTable.tsx b/scm-ui/ui-webapp/src/repos/tags/components/TagTable.tsx
index ebe19f5bc3..532fc24b27 100644
--- a/scm-ui/ui-webapp/src/repos/tags/components/TagTable.tsx
+++ b/scm-ui/ui-webapp/src/repos/tags/components/TagTable.tsx
@@ -74,12 +74,12 @@ const TagTable: FC<Props> = ({ repository, baseUrl, tags }) => {
           message={t("tag.delete.confirmAlert.message", { tag: tagToBeDeleted?.name })}
           buttons={[
             {
-              className: "is-outlined",
               label: t("tag.delete.confirmAlert.submit"),
               isLoading,
               onClick: () => deleteTag()
             },
             {
+              className: "is-info",
               label: t("tag.delete.confirmAlert.cancel"),
               onClick: () => abortDelete(),
               autofocus: true
diff --git a/scm-ui/ui-webapp/src/repos/tags/container/DeleteTag.tsx b/scm-ui/ui-webapp/src/repos/tags/container/DeleteTag.tsx
index 4f49134977..1a8ef2f0d4 100644
--- a/scm-ui/ui-webapp/src/repos/tags/container/DeleteTag.tsx
+++ b/scm-ui/ui-webapp/src/repos/tags/container/DeleteTag.tsx
@@ -52,12 +52,12 @@ const DeleteTag: FC<Props> = ({ tag, repository }) => {
           message={t("tag.delete.confirmAlert.message", { tag: tag.name })}
           buttons={[
             {
-              className: "is-outlined",
               label: t("tag.delete.confirmAlert.submit"),
               isLoading,
               onClick: () => remove(tag)
             },
             {
+              className: "is-info",
               label: t("tag.delete.confirmAlert.cancel"),
               onClick: () => null,
               autofocus: true
diff --git a/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyEntry.tsx b/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyEntry.tsx
index d62ddf7dab..0388a1d559 100644
--- a/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyEntry.tsx
+++ b/scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyEntry.tsx
@@ -59,7 +59,6 @@ export const ApiKeyEntry: FC<Props> = ({ apiKey, onDelete }) => {
           message={t("apiKey.deleteConfirmAlert.message")}
           buttons={[
             {
-              className: "is-outlined",
               label: t("apiKey.deleteConfirmAlert.submit"),
               onClick: () => {
                 onDelete(apiKey);
@@ -67,6 +66,7 @@ export const ApiKeyEntry: FC<Props> = ({ apiKey, onDelete }) => {
               },
             },
             {
+              className: "is-info",
               label: t("apiKey.deleteConfirmAlert.cancel"),
               onClick: () => setShowModal(false),
               autofocus: true,
diff --git a/scm-ui/ui-webapp/src/users/components/publicKeys/PublicKeyEntry.tsx b/scm-ui/ui-webapp/src/users/components/publicKeys/PublicKeyEntry.tsx
index d80be69181..74610318f0 100644
--- a/scm-ui/ui-webapp/src/users/components/publicKeys/PublicKeyEntry.tsx
+++ b/scm-ui/ui-webapp/src/users/components/publicKeys/PublicKeyEntry.tsx
@@ -74,7 +74,6 @@ export const PublicKeyEntry: FC<Props> = ({ publicKey, onDelete }) => {
           message={t("publicKey.deleteConfirmAlert.message")}
           buttons={[
             {
-              className: "is-outlined",
               label: t("publicKey.deleteConfirmAlert.submit"),
               onClick: () => {
                 onDelete(publicKey);
@@ -82,6 +81,7 @@ export const PublicKeyEntry: FC<Props> = ({ publicKey, onDelete }) => {
               },
             },
             {
+              className: "is-info",
               label: t("publicKey.deleteConfirmAlert.cancel"),
               onClick: () => setShowModal(false),
               autofocus: true,
diff --git a/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx b/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx
index e3bc47bd36..b7f7ea2deb 100644
--- a/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx
@@ -60,11 +60,11 @@ const DeleteUser: FC<Props> = ({ confirmDialog = true, user }) => {
         message={t("deleteUser.confirmAlert.message")}
         buttons={[
           {
-            className: "is-outlined",
             label: t("deleteUser.confirmAlert.submit"),
             onClick: deleteUserCallback
           },
           {
+            className: "is-info",
             label: t("deleteUser.confirmAlert.cancel"),
             onClick: () => null,
             autofocus: true