dropdown for changesetdetails

Pushed-by: Viktor Egorov<viktor.egorov-extern@cloudogu.com>
Co-authored-by: Viktor<viktor.egorov@triology.de>

docs/de/user/repo/code.md

@@ -52,9 +52,9 @@ Die Diffs können durch Klicken auf den blauen Balken schrittweise oder vollstä
 Falls sich Commit Links im Format "namespace/name@commitId" in der Changeset Beschreibung befinden, werden die zu relativen SCM-Manager Links erweitert.
 Beispielsweise wird der Text hitchhiker/HeartOfGold@1a2b3c4 zu einem Link zu dem Commit 1a2b3c4 im Repository hitchhiker/HeartOfGold umgewandelt.
 
-Für das Changeset gibt es zwei Buttons:
+Für das Changeset gibt es ein Dropdown Menu mit zwei Optionen:
-- Mit dem ersten Button können die Whitespaces-Änderungen ein- und ausgeblendet werden.
+- Mit der ersten Checkbox können die Whitespaces-Änderungen ein- und ausgeblendet werden.
-- Der zweite ermöglicht das Ein- und Ausblenden aller Changesets.
+- Die zweite Checkbox ermöglicht das Ein- und Ausblenden aller Changesets.
 
 Jeder Changeset Diff hat mehrere Buttons:
 - Der erste Button von Links ermöglicht einen direkten Vergleich der Änderungen.

docs/en/user/repo/code.md

@@ -54,9 +54,9 @@ You can expand the diffs gradually or completely by clicking on the blue bars.
 If commit links formatted like "namespace/name@commitId" are used in the changeset description they will be rendered to internal links.
 For example the text hitchhiker/HeartOfGold@1a2b3c4 will be transformed to a link directing to the commit 1a2b3c4 of the repository hitchhiker/heartOfGold.
 
-There are two buttons for the changeset:
+There is a dropdown menu for the changeset:
-- The first button show and hide the whitespace changes.
+- With the first checkbox you can show and hide the whitespace changes.
-- The second button can collapse all changesets.
+- The second checkbox can collapse all changesets.
 
 Every changeset diff has several buttons:
 - The first button on the left allows a direct comparison of the changes.

gradle/changelog/changesetdetails_cogwheeldropdown.yml

@@ -0,0 +1,2 @@
+- type: Added
+  description: A cogwheel menu to the changesetdetails

scm-ui/ui-components/src/repos/DiffDropDown.tsx

@@ -0,0 +1,76 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { FC, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Checkbox } from "@scm-manager/ui-core";
+type DiffDropDownProps = {
+  collapseDiffs: () => void;
+  ignoreWhitespaces: () => void;
+  renderOnMount: boolean;
+};
+const DiffDropDown: FC<DiffDropDownProps> = ({ collapseDiffs, ignoreWhitespaces, renderOnMount }) => {
+  const [t] = useTranslation("repos");
+  const [isOpen, setOpen] = useState(false);
+
+  // This is a hack and it needs to be here until we fix the re rendering problem upon changing the whitespaces in the diffs
+  useEffect(() => {
+    if (renderOnMount) {
+      ignoreWhitespaces();
+      ignoreWhitespaces();
+    }
+  }, [ignoreWhitespaces, renderOnMount]);
+
+  const handleOpen = () => {
+    setOpen(!isOpen);
+  };
+  return (
+    <div className={"dropdown" + (isOpen ? " is-active" : "")}>
+      <div className="dropdown-trigger">
+        <button onClick={handleOpen} className="button" aria-haspopup="true" aria-controls="dropdown-menu2">
+          <span className="icon is-small">
+            <i className="fas fa-cog" aria-hidden="true"></i>
+          </span>
+        </button>
+      </div>
+      <div className="dropdown-menu" id="dropdown-menu2" role="menu">
+        <div className="dropdown-content">
+          <div className="dropdown-item">
+            <span className="has-text-weight-semibold">{t("changesets.checkBoxHeadingWhitespaces")}</span>
+          </div>
+          <div className="dropdown-item">
+            <Checkbox onChange={ignoreWhitespaces} label={t("changesets.checkBoxHideWhitespaceChanges")}></Checkbox>
+          </div>
+          <hr className="dropdown-divider" />
+          <div className="dropdown-item">
+            <span className="has-text-weight-semibold">{t("changesets.checkBoxHeadingOtherSettings")}</span>
+          </div>
+          <div className="dropdown-item">
+            <Checkbox onChange={collapseDiffs} label={t("changesets.checkBoxCollapseOption")}></Checkbox>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default DiffDropDown;

scm-ui/ui-components/src/repos/index.ts

@@ -53,6 +53,7 @@ export { default as JumpToFileButton } from "./JumpToFileButton";
 export { default as CommitAuthor } from "./CommitAuthor";
 export { default as HealthCheckFailureDetail } from "./HealthCheckFailureDetail";
 export { default as RepositoryFlags } from "./RepositoryFlags";
+export { default as DiffDropDown } from "./DiffDropDown";
 
 export {
   File,

scm-ui/ui-webapp/public/locales/de/repos.json

@@ -264,6 +264,10 @@
     "branchSelectorLabel": "Branches",
     "collapseDiffs": "Auf-/Zuklappen",
     "ignoreWhitespace": "Whitespace-Änderungen ignorieren",
+    "checkBoxHeadingWhitespaces": "Umgang mit Leerzeichen",
+    "checkBoxHeadingOtherSettings": "Weitere Einstellungen",
+    "checkBoxCollapseOption": "Alle Diffs einklappen",
+    "checkBoxHideWhitespaceChanges": "Ignoriere Diffs die nur Whitespace Änderungen enthalten",
     "activateWhitespace": "Whitespace-Änderungen einblenden",
     "moreDiffsAvailable": "Es sind weitere Diffs verfügbar",
     "loadMore": "Weitere laden"

scm-ui/ui-webapp/public/locales/en/repos.json

@@ -264,6 +264,10 @@
     "branchSelectorLabel": "Branches",
     "collapseDiffs": "Collapse",
     "ignoreWhitespace": "Ignore whitespaces changes",
+    "checkBoxHeadingWhitespaces": "Whitespace Settings",
+    "checkBoxHeadingOtherSettings": "Other Settings",
+    "checkBoxCollapseOption": "Collapse all Diffs",
+    "checkBoxHideWhitespaceChanges": "Hide Diffs which only contain whitespace changes",
     "activateWhitespace": "Show whitespaces changes",
     "moreDiffsAvailable": "There are more diffs available",
     "loadMore": "Load more"

scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx

@@ -39,6 +39,7 @@ import {
   DateFromNow,
   FileControlFactory,
   SignatureIcon,
+  DiffDropDown
 } from "@scm-manager/ui-components";
 import { Tooltip, SubSubtitle } from "@scm-manager/ui-core";
 import { Button, Icon } from "@scm-manager/ui-buttons";
@@ -280,14 +281,7 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
       </div>
       <div>
         <div className="is-flex has-gap-4 mb-4 is-justify-content-flex-end">
-          <Button onClick={ignoreWhitespaces}>
+          <DiffDropDown collapseDiffs={collapseDiffs} ignoreWhitespaces={ignoreWhitespaces} renderOnMount={false}/>
-            <Icon className="mr-1">{ignoreWhitespace ? "laptop" : "laptop-code"}</Icon>
-            {t(ignoreWhitespace ? "changesets.activateWhitespace" : "changesets.ignoreWhitespace")}
-          </Button>
-          <Button onClick={collapseDiffs}>
-            <Icon className="mr-1">{collapsed ? "eye" : "eye-slash"}</Icon>
-            {t("changesets.collapseDiffs")}
-          </Button>
         </div>
 
         <ChangesetDiff