Add statistics for diffs (added, deleted, modified)

Extend the diff result from the diff command to include modified,
added and deleted file count and add DiffStats component to
ui-components.

Pushed-by: Rene Pfeuffer<rene.pfeuffer@cloudogu.com>
Pushed-by: Tarik Gürsoy<tarik.guersoy@cloudogu.com>
Co-authored-by: René Pfeuffer<rene.pfeuffer@cloudogu.com>
Co-authored-by: Tarik Gürsoy<tarik.guersoy@cloudogu.com>

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

@@ -0,0 +1,56 @@
+/*
+ * 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 } from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { Statistics } from "@scm-manager/ui-types";
+import { Tag } from "@scm-manager/ui-components";
+import styled from "styled-components";
+
+type DiffStatisticsProps = { data: Statistics | undefined };
+
+const DiffStatisticsContainer = styled.div`
+  float: left;
+  height: 40px;
+  display: flex;
+  align-items: center;
+`;
+
+const DiffStatistics: FC<DiffStatisticsProps> = ({ data }) => {
+  const [t] = useTranslation("repos");
+  return !data ? (
+    <div></div>
+  ) : (
+    <DiffStatisticsContainer>
+      <Trans
+        t={t}
+        i18nKey="changesets.showModifiedFiles"
+        values={{ newFiles: data.added, modified: data.modified, deleted: data.deleted }}
+        components={{ tag: <Tag size={"normal"} rounded={true} className={"mx-1"} /> }}
+      ></Trans>
+    </DiffStatisticsContainer>
+  );
+};
+
+export default DiffStatistics;

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

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC } from "react";
+import React, { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { NotFoundError, useDiff } from "@scm-manager/ui-api";
 import ErrorNotification from "../ErrorNotification";
@@ -30,12 +30,13 @@ import Notification from "../Notification";
 import Button from "../buttons/Button";
 import Diff from "./Diff";
 import { DiffObjectProps } from "./DiffTypes";
+import DiffStatistics from "./DiffStatistics";
+import { DiffDropDown } from "../index";
 
 type Props = DiffObjectProps & {
   url: string;
   limit?: number;
   refetchOnWindowFocus?: boolean;
-  ignoreWhitespace?: string;
 };
 
 type NotificationProps = {
@@ -45,6 +46,7 @@ type NotificationProps = {
 
 const PartialNotification: FC<NotificationProps> = ({ fetchNextPage, isFetchingNextPage }) => {
   const [t] = useTranslation("repos");
+
   return (
     <Notification className="mt-5" type="info">
       <div className="columns is-centered">
@@ -55,14 +57,27 @@ const PartialNotification: FC<NotificationProps> = ({ fetchNextPage, isFetchingN
   );
 };
 
-const LoadingDiff: FC<Props> = ({ url, limit, refetchOnWindowFocus, ignoreWhitespace, ...props }) => {
+const LoadingDiff: FC<Props> = ({ url, limit, refetchOnWindowFocus, ...props }) => {
+  const [ignoreWhitespace, setIgnoreWhitespace] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+  const evaluateWhiteSpace = () => {
+    return ignoreWhitespace ? "ALL" : "NONE"
+  }
   const { error, isLoading, data, fetchNextPage, isFetchingNextPage } = useDiff(url, {
     limit,
     refetchOnWindowFocus,
-    ignoreWhitespace,
+    ignoreWhitespace: evaluateWhiteSpace(),
   });
   const [t] = useTranslation("repos");
 
+  const ignoreWhitespaces = () => {
+    setIgnoreWhitespace(!ignoreWhitespace);
+  };
+
+  const collapseDiffs = () => {
+    setCollapsed(!collapsed);
+  };
+
   if (error) {
     if (error instanceof NotFoundError) {
       return <Notification type="info">{t("changesets.noChangesets")}</Notification>;
@@ -75,7 +90,16 @@ const LoadingDiff: FC<Props> = ({ url, limit, refetchOnWindowFocus, ignoreWhites
   } else {
     return (
       <>
-        <Diff diff={data.files} ignoreWhitespace={ignoreWhitespace} {...props} />
+        <div className="is-flex has-gap-4 mb-4 mt-4 is-justify-content-space-between">
+          <DiffStatistics data={data.statistics} />
+          <DiffDropDown collapseDiffs={collapseDiffs} ignoreWhitespaces={ignoreWhitespaces} renderOnMount={true} />
+        </div>
+        <Diff
+          defaultCollapse={collapsed}
+          diff={data.files}
+          ignoreWhitespace={evaluateWhiteSpace()}
+          {...props}
+        />
         {data.partial ? (
           <PartialNotification fetchNextPage={fetchNextPage} isFetchingNextPage={isFetchingNextPage} />
         ) : null}

scm-ui/ui-components/src/repos/changesets/ChangesetDiff.tsx

@@ -30,8 +30,6 @@ import { FileControlFactory } from "../DiffTypes";
 
 type Props = WithTranslation & {
   changeset: Changeset;
-  defaultCollapse?: boolean;
-  ignoreWhitespace?: string;
   fileControlFactory?: FileControlFactory;
 };
 
@@ -50,20 +48,19 @@ export const createUrl = (changeset: HalRepresentation) => {
 
 class ChangesetDiff extends React.Component<Props> {
   render() {
-    const { changeset, fileControlFactory, defaultCollapse, ignoreWhitespace, t } = this.props;
+    const { changeset, fileControlFactory, t } = this.props;
+
     if (!isDiffSupported(changeset)) {
       return <Notification type="danger">{t("changeset.diffNotSupported")}</Notification>;
     } else {
       const url = createUrl(changeset);
       return (
-        <LoadingDiff
-          url={url}
-          defaultCollapse={defaultCollapse}
-          ignoreWhitespace={ignoreWhitespace}
-          sideBySide={false}
-          fileControlFactory={fileControlFactory}
-          stickyHeader={true}
-        />
+          <LoadingDiff
+            url={url}
+            sideBySide={false}
+            fileControlFactory={fileControlFactory}
+            stickyHeader={true}
+          />
       );
     }
   }

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

@@ -54,6 +54,7 @@ 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 { default as DiffStatistics } from "./DiffStatistics"
 
 export {
   File,