Mark reviewed files in diff file tree

Squash commits of branch feature/review_marks_in_file_tree:
- POC for review marks in file tree
- Migrate to wrapper
- Put check mark in front
- Use new extension
- Fix hover color
- Documentation

Author: pfeuffer

build.gradle

@@ -35,7 +35,7 @@ dependencies {
 }
 
 scmPlugin {
-  scmVersion = "3.10.0"
+  scmVersion = "3.10.2-SNAPSHOT"
   displayName = "Review"
   description = "Depict a review process with pull requests"
   author = "Cloudogu GmbH"

docs/de/working-with-prs/assets/markReviewed.png

@@ -21,6 +21,12 @@ Diese Diffs können auch schrittweise oder komplett nachgeladen werden, um den g
 
 ![Pull Request - Diff expand](assets/diffExpand.png)
 
+### "Review-Markierungen" für einzelne Dateien
+In der Diff-Ansicht kann das Review für einzelne Dateien als abgeschlossen markiert werden. In diesem Fall wird in der
+Schaltfläche ein Haken dargestellt, die Datei wird standardmäßig eingeklappt und in dem Dateibaum wird sie ausgegraut.
+
+![Pull Request - Review-Markierungen](assets/markReviewed.png)
+
 ### Kommentare erstellen
 Für einen Pull Request können drei Arten von Kommentaren erstellt werden. 
 

docs/de/working-with-prs/index.md

@@ -20,6 +20,12 @@ In the pull request all changes are shown as diff per file. This shortened view
 
 ![Pull Request - Diff expand](assets/diffExpand.png)
 
+### Review-Marks for single files
+In the diff view, single files can be marked as reviewed. In this case, the button will get a check-mark, the file will
+be collapsed by default, and it will be grayed-out in the file tree.
+
+![Pull Request - Review-Marks](assets/markReviewed.png)
+
 ### Create comments
 There are three different kinds of comments for pull requests.
 

docs/en/working-with-prs/assets/markReviewed.png

@@ -0,0 +1,2 @@
+- type: added
+  description: Marks for reviewed files in diff file tree

docs/en/working-with-prs/index.md

@@ -351,6 +351,7 @@ const Diff: FC<Props> = ({
         actions={actions}
         pullRequestComments={comments?._embedded.pullRequestComments || []}
         stickyHeader={stickyHeaderHeight}
+        reviewedFiles={reviewedFiles}
       />
     </StyledDiffWrapper>
   );

gradle/changelog/mark_reviewed_files.yaml

@@ -32,19 +32,22 @@ import {
   WhitespaceMode,
   LayoutRadioButtons,
   useLayoutState,
-  devices
+  devices,
 } from "@scm-manager/ui-components";
 import { Comment } from "../types/PullRequest";
 import PartialNotification from "./PartialNotification";
 import styled from "styled-components";
 import { useHistory, useLocation } from "react-router-dom";
+import { Icon } from "@scm-manager/ui-core";
+import classNames from "classnames";
 
 type LoadingDiffProps = DiffObjectProps & {
   diffUrl: string;
   actions: any;
   pullRequestComments: Comment[];
   refetchOnWindowFocus?: boolean;
   stickyHeader?: boolean | number;
+  reviewedFiles?: string[];
 };
 
 const StickyContainer = styled.div<{ top: number }>`
@@ -57,6 +60,22 @@ const StickyContainer = styled.div<{ top: number }>`
   z-index: 11;
 `;
 
+export const StackedSpan = styled.span`
+  width: 3em;
+  height: 3em;
+  font-size: 0.5em;
+`;
+
+export const StyledIcon = styled(Icon)<{ isSmaller?: boolean }>`
+  ${({ isSmaller }) =>
+    isSmaller &&
+    `
+      font-size: 0.5em;
+      margin-top: 0.05rem;
+  `}
+  min-width: 1.5rem;
+`;
+
 export const StickyTreeContainer = styled.div`
   @media (min-width: ${devices.widescreen.width}px) {
     position: sticky;
@@ -75,7 +94,14 @@ export const Divider = styled.div`
   box-shadow: 0 24px 3px -24px var(--scm-border-color);
 `;
 
-const LoadingDiff: FC<LoadingDiffProps> = ({ diffUrl, actions, pullRequestComments, stickyHeader, ...props }) => {
+const LoadingDiff: FC<LoadingDiffProps> = ({
+  diffUrl,
+  actions,
+  pullRequestComments,
+  stickyHeader,
+  reviewedFiles,
+  ...props
+}) => {
   const [t] = useTranslation("plugins");
   const [ignoreWhitespace, setIgnoreWhitespace] = useState<WhitespaceMode>("NONE");
   const [layout, setLayout] = useLayoutState();
@@ -140,8 +166,7 @@ const LoadingDiff: FC<LoadingDiffProps> = ({ diffUrl, actions, pullRequestCommen
       </div>
       <StickyTreeContainer
         className={
-          (layout === "Both" ? "column pl-3" : "column pl-3 is-full") +
-          (layout !== "Diff" ? "" : " is-hidden")
+          (layout === "Both" ? "column pl-3" : "column pl-3 is-full") + (layout !== "Diff" ? "" : " is-hidden")
         }
       >
         <FileTreeContent isBorder={layout !== "Diff"}>
@@ -152,6 +177,46 @@ const LoadingDiff: FC<LoadingDiffProps> = ({ diffUrl, actions, pullRequestCommen
               tree={data.tree}
               currentFile={decodeURIComponent(getFileNameFromHash(location.hash) ?? "")}
               setCurrentFile={setFilePath}
+              FileTreeNodeWrapper={({
+                path,
+                name,
+                isFile,
+                iconName,
+                iconColor,
+                changeType,
+                children,
+                isCurrentFile,
+              }) => {
+                if (isFile && reviewedFiles?.find((file) => file === path)) {
+                  console.log("rendering reviewed icon for", name);
+                  const lightIcon = (
+                    <StackedSpan className="fa-stack">
+                      <StyledIcon
+                        className={classNames("fa-stack-2x", `has-text-${iconColor}`)}
+                        type="far"
+                        alt={t("diff.showContent")}
+                      >
+                        file
+                      </StyledIcon>
+                      <StyledIcon
+                        className={classNames("fa-stack-1x", "is-relative", `has-text-${iconColor}`)}
+                        isSmaller={iconName === "circle"}
+                        alt={t(`diff.changes.${changeType}`)}
+                      >
+                        {iconName}
+                      </StyledIcon>
+                    </StackedSpan>
+                  );
+                  return (
+                    <>
+                      {lightIcon}
+                      <div className={classNames("ml-1", "has-text-secondary has-hover-color-blue", isCurrentFile ? "has-text-weight-bold": "")}>{name}</div>
+                    </>
+                  );
+                } else {
+                  return children;
+                }
+              }}
             />
           )}
         </FileTreeContent>