Move escapeWhitespace to diffs and add small test

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

@@ -22,13 +22,15 @@
  * SOFTWARE.
  */
 import React from "react";
-import DiffFile, {escapeWhitespace} from "./DiffFile";
+import DiffFile from "./DiffFile";
 import { DiffObjectProps, File, FileControlFactory } from "./DiffTypes";
+import { escapeWhitespace } from "./diffs";
 import Notification from "../Notification";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { RouteComponentProps, withRouter } from "react-router-dom";
 
-type Props = RouteComponentProps & WithTranslation &
+type Props = RouteComponentProps &
+  WithTranslation &
   DiffObjectProps & {
     diff: File[];
     fileControlFactory?: FileControlFactory;
@@ -36,7 +38,7 @@ type Props = RouteComponentProps & WithTranslation &
 
 type State = {
   contentRef?: HTMLElement | null;
-}
+};
 
 function getAnchorSelector(uriHashContent: string) {
   return "#" + escapeWhitespace(decodeURIComponent(uriHashContent));
@@ -81,9 +83,7 @@ class Diff extends React.Component<Props, State> {
     const { diff, t, ...fileProps } = this.props;
 
     return (
-      <div
+      <div ref={el => this.setState({ contentRef: el })}>
-        ref={el => this.setState({ contentRef: el })}
-      >
         {diff.length === 0 ? (
           <Notification type="info">{t("diff.noDiffFound")}</Notification>
         ) : (

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

@@ -39,6 +39,7 @@ import HunkExpandLink from "./HunkExpandLink";
 import { Modal } from "../modals";
 import ErrorNotification from "../ErrorNotification";
 import HunkExpandDivider from "./HunkExpandDivider";
+import { escapeWhitespace } from "./diffs";
 
 const EMPTY_ANNOTATION_FACTORY = {};
 
@@ -90,10 +91,6 @@ const ChangeTypeTag = styled(Tag)`
   margin-left: 0.75rem;
 `;
 
-export function escapeWhitespace(path: string) {
-  return path.toLowerCase().replace(/\W/g, "-");
-}
-
 class DiffFile extends React.Component<Props, State> {
   static defaultProps: Partial<Props> = {
     defaultCollapse: false,
@@ -110,7 +107,7 @@ class DiffFile extends React.Component<Props, State> {
     };
   }
 
-  componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any): void {
+  componentDidUpdate(prevProps: Readonly<Props>) {
     if (this.props.defaultCollapse !== prevProps.defaultCollapse) {
       this.setState({
         collapsed: this.defaultCollapse()

scm-ui/ui-components/src/repos/diffs.test.ts

@@ -23,7 +23,7 @@
  */
 
 import { File, FileChangeType, Hunk } from "./DiffTypes";
-import { getPath, createHunkIdentifier, createHunkIdentifierFromContext } from "./diffs";
+import { getPath, createHunkIdentifier, createHunkIdentifierFromContext, escapeWhitespace } from "./diffs";
 
 describe("tests for diff util functions", () => {
   const file = (type: FileChangeType, oldPath: string, newPath: string): File => {
@@ -88,4 +88,15 @@ describe("tests for diff util functions", () => {
       expect(identifier).toBe("delete_/etc/passwd_@@ -1,42 +1,39 @@");
     });
   });
+
+  describe("escapeWhitespace tests", () => {
+    it("should escape whitespaces", () => {
+      const escaped = escapeWhitespace("spaceship hog");
+      expect(escaped).toBe("spaceship-hog");
+    });
+    it("should escape multiple whitespaces", () => {
+      const escaped = escapeWhitespace("spaceship heart of gold");
+      expect(escaped).toBe("spaceship-heart-of-gold");
+    });
+  });
 });

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

@@ -39,3 +39,7 @@ export function createHunkIdentifier(file: File, hunk: Hunk) {
 export function createHunkIdentifierFromContext(ctx: BaseContext) {
   return createHunkIdentifier(ctx.file, ctx.hunk);
 }
+
+export function escapeWhitespace(path: string) {
+  return path.toLowerCase().replace(/\W/g, "-");
+}