New diff view props for controlling hunk/line interaction (#2047)

Move hunk styling from review plugin to core and make reusable

gradle/changelog/hunk_hover_icon.yaml

@@ -0,0 +1,2 @@
+- type: added
+  description: New diff view props for controlling hunk/line interaction ([#2047](https://github.com/scm-manager/scm-manager/pull/2047))

scm-ui/ui-components/src/repos/Diff.stories.tsx

@@ -141,6 +141,14 @@ storiesOf("Repositories/Diff", module)
     const hunkDiffFiles = parser.parse(hunksDiff);
     return <Diff diff={hunkDiffFiles} />;
   })
+  .add("Hunk gutter hover icon", () => {
+    const hunkDiffFiles = parser.parse(hunksDiff);
+    return <Diff diff={hunkDiffFiles} hunkGutterHoverIcon="\f075" />;
+  })
+  .add("Highlight line on hover", () => {
+    const hunkDiffFiles = parser.parse(hunksDiff);
+    return <Diff diff={hunkDiffFiles} highlightLineOnHover />;
+  })
   .add("Binaries", () => {
     const binaryDiffFiles = parser.parse(binaryDiff);
     return <Diff diff={binaryDiffFiles} />;

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

@@ -64,4 +64,13 @@ export type DiffObjectProps = {
   isCollapsed?: (file: File) => boolean;
   onCollapseStateChange?: (file: File, newState?: boolean) => void;
   hunkClass?: (hunk: Hunk) => string;
+  /**
+   * Fontawesome Icon Unicode
+   *
+   * @see https://fontawesome.com/icons
+   * @example
+   * "\f075"
+   */
+  hunkGutterHoverIcon?: string;
+  highlightLineOnHover?: boolean;
 };

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

@@ -61,6 +61,33 @@ type State = Collapsible & {
   expansionError?: any;
 };
 
+const StyledHunk = styled(Hunk)`${props => {
+  let style = props.icon ? `
+    .diff-gutter:hover::after {
+      font-size: inherit;
+      margin-left: 0.5em;
+      font-family: "Font Awesome 5 Free";
+      content: "${props.icon}";
+      color: var(--scm-column-selection);
+    }
+  ` : "";
+  if (!props.actionable) {
+    style += `
+      .diff-gutter {
+        cursor: default;
+      }
+    `;
+  }
+  if (props.highlightLineOnHover) {
+    style += `
+      tr.diff-line:hover > td {
+        background-color: var(--sh-selected-color);
+      }
+    `;
+  }
+  return style;
+}}`;
+
 const DiffFilePanel = styled.div`
   /* remove bottom border for collapsed panels */
   ${(props: Collapsible) => (props.collapsed ? "border-bottom: none;" : "")};
@@ -315,13 +342,18 @@ class DiffFile extends React.Component<Props, State> {
       );
     }
 
+    const gutterEvents = this.createGutterEvents(hunk);
+
     items.push(
-      <Hunk
+      <StyledHunk
         key={"hunk-" + hunk.content}
         hunk={expandableHunk.hunk}
         widgets={this.collectHunkAnnotations(hunk)}
-        gutterEvents={this.createGutterEvents(hunk)}
+        gutterEvents={gutterEvents}
         className={this.props.hunkClass ? this.props.hunkClass(hunk) : null}
+        icon={this.props.hunkGutterHoverIcon}
+        actionable={!!gutterEvents}
+        highlightLineOnHover={this.props.highlightLineOnHover}
       />
     );
     if (file._links?.lines) {