@scm-manager/ui-components 3.4.2-20240820-125924 → 3.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "3.4.2-20240820-125924",
+  "version": "3.4.2",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -24,10 +24,10 @@
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-shortcuts": "3.4.2-20240820-125924",
-    "@scm-manager/ui-syntaxhighlighting": "3.4.2-20240820-125924",
-    "@scm-manager/ui-tests": "3.4.2-20240820-125924",
-    "@scm-manager/ui-text": "3.4.2-20240820-125924",
+    "@scm-manager/ui-shortcuts": "3.4.2",
+    "@scm-manager/ui-syntaxhighlighting": "3.4.2",
+    "@scm-manager/ui-tests": "3.4.2",
+    "@scm-manager/ui-text": "3.4.2",
     "@storybook/addon-actions": "^6.4.20",
     "@storybook/addon-essentials": "^6.4.20",
     "@storybook/addon-interactions": "^6.4.20",
@@ -65,9 +65,9 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.4.3",
-    "@scm-manager/ui-api": "3.4.2-20240820-125924",
-    "@scm-manager/ui-extensions": "3.4.2-20240820-125924",
-    "@scm-manager/ui-types": "3.4.2-20240820-125924",
+    "@scm-manager/ui-api": "3.4.2",
+    "@scm-manager/ui-extensions": "3.4.2",
+    "@scm-manager/ui-types": "3.4.2",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",

package/src/index.ts

@@ -90,8 +90,8 @@ export * from "./devices";
 export { default as copyToClipboard } from "./CopyToClipboard";
 export { createA11yId } from "./createA11yId";
 export { useSecondaryNavigation } from "./useSecondaryNavigation";
-export { default as useScrollToElement, useScrollToElementWithCallback } from "./useScrollToElement";
-export { default as DiffDropDown } from "./repos/DiffDropDown";
+export { default as useScrollToElement } from "./useScrollToElement";
+export { default as DiffDropDown }  from "./repos/DiffDropDown";
 
 export { default as comparators } from "./comparators";
 
@@ -143,8 +143,3 @@ export { urls };
 export const getPageFromMatch = urls.getPageFromMatch;
 
 export { default as useGeneratedId } from "./useGeneratedId";
-
-export { default as DiffFileTree } from "./repos/diff/DiffFileTree";
-export { FileTreeContent } from "./repos/diff/styledElements";
-export { getFileNameFromHash } from "./repos/diffs";
-export { getAnchorId as getDiffAnchorId } from "./repos/diff/helpers";

package/src/repos/Diff.tsx

@@ -21,26 +21,20 @@
  * 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 React, { FC, useState } from "react";
 import DiffFile from "./DiffFile";
 import { DiffObjectProps, FileControlFactory } from "./DiffTypes";
 import { FileDiff } from "@scm-manager/ui-types";
-import { getAnchorSelector, getFileNameFromHash } from "./diffs";
+import { escapeWhitespace } from "./diffs";
 import Notification from "../Notification";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
-import { useScrollToElementWithCallback } from "../useScrollToElement";
-import { getAnchorId } from "./diff/helpers";
+import useScrollToElement from "../useScrollToElement";
 
 type Props = DiffObjectProps & {
   diff: FileDiff[];
   fileControlFactory?: FileControlFactory;
   ignoreWhitespace?: string;
-  fetchNextPage?: () => void;
-  isFetchingNextPage?: boolean;
-  isDataPartial?: boolean;
-  prevHash?: string;
-  setPrevHash?: (newHash: string) => void;
 };
 
 const createKey = (file: FileDiff, ignoreWhitespace?: string) => {
@@ -49,70 +43,23 @@ const createKey = (file: FileDiff, ignoreWhitespace?: string) => {
   return `${file.oldPath}@${file.oldRevision}/${file.newPath}@${file.newRevision}?${ignoreWhitespace}`;
 };
 
-const getFile = (files: FileDiff[] | undefined, path: string): FileDiff | undefined => {
-  return files?.find((e) => (e.type !== "delete" && e.newPath === path) || (e.type === "delete" && e.oldPath === path));
+const getAnchorSelector = (uriHashContent: string) => {
+  return "#" + escapeWhitespace(decodeURIComponent(uriHashContent));
 };
 
-const selectFromHash = (hash: string) => {
-  const fileName = getFileNameFromHash(hash);
-  return fileName ? getAnchorSelector(fileName) : undefined;
-};
-
-const jumpToBottom = () => {
-  window.scrollTo(0, document.body.scrollHeight);
-};
-
-const Diff: FC<Props> = ({
-  diff,
-  ignoreWhitespace,
-  fetchNextPage,
-  isFetchingNextPage,
-  isDataPartial,
-  prevHash,
-  setPrevHash,
-  ...fileProps
-}) => {
+const Diff: FC<Props> = ({ diff, ignoreWhitespace, ...fileProps }) => {
   const [t] = useTranslation("repos");
   const [contentRef, setContentRef] = useState<HTMLElement | null>();
   const { hash } = useLocation();
-
-  useEffect(() => {
-    if (isFetchingNextPage) {
-      jumpToBottom();
-    }
-  }, [isFetchingNextPage]);
-
-  useScrollToElementWithCallback(
+  useScrollToElement(
     contentRef,
     () => {
-      if (isFetchingNextPage === undefined || isDataPartial === undefined || fetchNextPage === undefined) {
-        return selectFromHash(hash);
-      }
-
-      if (prevHash === hash) {
-        return;
-      }
-
-      const encodedFileName = getFileNameFromHash(hash);
-      if (!encodedFileName) {
-        return;
-      }
-
-      const selectedFile = getFile(diff, decodeURIComponent(encodedFileName));
-      if (selectedFile) {
-        return getAnchorSelector(getAnchorId(selectedFile));
-      }
-
-      if (isDataPartial && !isFetchingNextPage) {
-        fetchNextPage();
+      const match = hash.match(/^#diff-(.*)$/);
+      if (match) {
+        return getAnchorSelector(match[1]);
       }
     },
-    [hash, isDataPartial, isFetchingNextPage, fetchNextPage, diff, prevHash, setPrevHash],
-    () => {
-      if (setPrevHash) {
-        setPrevHash(hash);
-      }
-    }
+    hash
   );
 
   return (

package/src/repos/DiffStatistics.tsx

@@ -49,23 +49,6 @@ const DiffStatistics: FC<DiffStatisticsProps> = ({ data }) => {
         values={{ newFiles: data.added, modified: data.modified, deleted: data.deleted }}
         components={{ tag: <Tag size={"normal"} rounded={true} className={"mx-1"} /> }}
       ></Trans>
-      {data.renamed > 0 && (
-        <Trans
-          t={t}
-          i18nKey="changesets.showRenamedFiles"
-          values={{ renamed: data.renamed }}
-          components={{ tag: <Tag size={"normal"} rounded={true} className={"mx-1"} /> }}
-        ></Trans>
-      )}
-      {data.copied > 0 && (
-        <Trans
-          t={t}
-          i18nKey="changesets.showCopiedFiles"
-          values={{ copied: data.copied }}
-          components={{ tag: <Tag size={"normal"} rounded={true} className={"mx-1"} /> }}
-        ></Trans>
-      )}
-      <span className="ml-1">{t("changesets.showFiles")}</span>
     </DiffStatisticsContainer>
   );
 };

package/src/repos/JumpToFileButton.tsx

@@ -37,17 +37,13 @@ const Button = styled(Link)`
 type Props = {
   link: string;
   tooltip: string;
-  icon?: string;
-  color?: string;
 };
 
-const JumpToFileButton: FC<Props> = ({ link, tooltip, icon, color }) => {
-  const iconToUse = icon ?? "file-code";
-  const colorToUse = color ?? "inherit";
+const JumpToFileButton: FC<Props> = ({ link, tooltip }) => {
   return (
     <Tooltip message={tooltip} side="top">
       <Button aria-label={tooltip} className="button is-clickable" to={link}>
-        <Icon name={iconToUse} color={colorToUse} alt="" />
+        <Icon name="file-code" color="inherit" alt="" />
       </Button>
     </Tooltip>
   );

package/src/repos/LoadingDiff.tsx

@@ -32,10 +32,6 @@ import Diff from "./Diff";
 import { DiffObjectProps } from "./DiffTypes";
 import DiffStatistics from "./DiffStatistics";
 import { DiffDropDown } from "../index";
-import DiffFileTree from "./diff/DiffFileTree";
-import { DiffContent, FileTreeContent } from "./diff/styledElements";
-import { useHistory, useLocation } from "react-router-dom";
-import { getFileNameFromHash } from "./diffs";
 
 type Props = DiffObjectProps & {
   url: string;
@@ -64,13 +60,9 @@ const PartialNotification: FC<NotificationProps> = ({ fetchNextPage, isFetchingN
 const LoadingDiff: FC<Props> = ({ url, limit, refetchOnWindowFocus, ...props }) => {
   const [ignoreWhitespace, setIgnoreWhitespace] = useState(false);
   const [collapsed, setCollapsed] = useState(false);
-  const [prevHash, setPrevHash] = useState("");
-  const location = useLocation();
-  const history = useHistory();
-
   const evaluateWhiteSpace = () => {
-    return ignoreWhitespace ? "ALL" : "NONE";
-  };
+    return ignoreWhitespace ? "ALL" : "NONE"
+  }
   const { error, isLoading, data, fetchNextPage, isFetchingNextPage } = useDiff(url, {
     limit,
     refetchOnWindowFocus,
@@ -86,11 +78,6 @@ const LoadingDiff: FC<Props> = ({ url, limit, refetchOnWindowFocus, ...props })
     setCollapsed(!collapsed);
   };
 
-  const setFilePath = (path: string) => {
-    setPrevHash("");
-    history.push(`#diff-${encodeURIComponent(path)}`);
-  };
-
   if (error) {
     if (error instanceof NotFoundError) {
       return <Notification type="info">{t("changesets.noChangesets")}</Notification>;
@@ -102,37 +89,21 @@ const LoadingDiff: FC<Props> = ({ url, limit, refetchOnWindowFocus, ...props })
     return null;
   } else {
     return (
-      <div className="is-flex has-gap-4 mb-4 mt-4 is-justify-content-space-between">
-        <FileTreeContent className={"is-three-quarters"}>
-          {data?.tree && (
-            <DiffFileTree
-              tree={data.tree}
-              currentFile={decodeURIComponent(getFileNameFromHash(location.hash) ?? "")}
-              setCurrentFile={setFilePath}
-            />
-          )}
-        </FileTreeContent>
-        <DiffContent>
-          <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()}
-            fetchNextPage={fetchNextPage}
-            isFetchingNextPage={isFetchingNextPage}
-            isDataPartial={data.partial}
-            prevHash={prevHash}
-            setPrevHash={setPrevHash}
-            {...props}
-          />
-          {data.partial ? (
-            <PartialNotification fetchNextPage={fetchNextPage} isFetchingNextPage={isFetchingNextPage} />
-          ) : null}
-        </DiffContent>
-      </div>
+      <>
+        <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}
+      </>
     );
   }
 };

package/src/repos/diff/styledElements.tsx

@@ -90,32 +90,3 @@ export const PanelHeading = styled.div<{ sticky?: boolean | number }>`
     }
   }}
 `;
-
-export const FileTreeContent = styled.div`
-  min-width: 25%;
-  max-width: 25%;
-`;
-
-export const DiffContent = styled.div`
-  width: 100%;
-`;
-
-export const FileDiffContainer = styled.div`
-  border: 1px solid var(--scm-border-color);
-  border-radius: 1rem;
-  position: sticky;
-  top: 5rem;
-`;
-
-export const FileDiffContentTitle = styled.div`
-  border-bottom: 1px solid var(--scm-border-color);
-  box-shadow: 0 24px 3px -24px var(--scm-border-color);
-`;
-
-export const FileDiffContent = styled.ul`
-  overflow: auto;
-  @supports (-moz-appearance: none) {
-    max-height: calc(100vh - 11rem);
-  }
-  max-height: calc(100svh - 11rem);
-`;

package/src/repos/diffs.ts

@@ -44,13 +44,3 @@ export function createHunkIdentifierFromContext(ctx: BaseContext) {
 export function escapeWhitespace(path: string) {
   return path?.toLowerCase().replace(/\W/g, "-");
 }
-
-export function getAnchorSelector(uriHashContent: string) {
-  return "#" + escapeWhitespace(decodeURIComponent(uriHashContent));
-}
-
-export function getFileNameFromHash(hash: string) {
-  const matcher = new RegExp(/^#diff-(.*)$/, "g");
-  const match = matcher.exec(hash);
-  return match ? match[1] : undefined;
-}

package/src/useScrollToElement.ts

@@ -24,12 +24,10 @@
 
 import { useEffect } from "react";
 
-// In some cases it is necessary to execute some logic, after successfully jumping to an element
-export const useScrollToElementWithCallback = (
+const useScrollToElement = (
   contentRef: HTMLElement | null | undefined,
   elementSelectorResolver: () => string | undefined,
-  dependencies: unknown[],
-  callback?: () => void
+  ...dependencies: any
 ) => {
   useEffect(() => {
     const elementSelector = elementSelectorResolver();
@@ -41,17 +39,13 @@ export const useScrollToElementWithCallback = (
           clearInterval(intervalId);
         } else {
           tries++;
-          const element = contentRef.querySelector(escapeIdStartingWithNumber(elementSelector));
+          const element = contentRef.querySelector(elementSelector);
           if (element) {
             const headerElement = document.querySelector(".navbar-brand");
             const margin = headerElement ? headerElement.getBoundingClientRect().height : 45;
             clearInterval(intervalId);
             const y = element.getBoundingClientRect().top + window.pageYOffset - margin;
-            window.scrollTo({ top: y });
-
-            if (callback) {
-              callback();
-            }
+            window.scrollTo({top: y});
           }
         }
       }, 200);
@@ -63,20 +57,4 @@ export const useScrollToElementWithCallback = (
   }, [contentRef, ...dependencies]);
 };
 
-const useScrollToElement = (
-  contentRef: HTMLElement | null | undefined,
-  elementSelectorResolver: () => string | undefined,
-  ...dependencies: any
-) => {
-  useScrollToElementWithCallback(contentRef, elementSelectorResolver, [...dependencies]);
-};
-
-function escapeIdStartingWithNumber(selector: string) {
-  if (selector.startsWith("#")) {
-    return `#${CSS.escape(selector.substring(1))}`;
-  }
-
-  return selector;
-}
-
 export default useScrollToElement;

package/src/repos/diff/DiffFileTree.tsx

@@ -1,131 +0,0 @@
-/*
- * 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 { FileTree } from "@scm-manager/ui-types";
-import React, { FC } from "react";
-import { FileDiffContainer, FileDiffContent, FileDiffContentTitle } from "./styledElements";
-import { Icon } from "@scm-manager/ui-core";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-
-type Props = { tree: FileTree; currentFile: string; setCurrentFile: (path: string) => void };
-
-const StyledIcon = styled(Icon)`
-  min-width: 1.5rem;
-`;
-
-const DiffFileTree: FC<Props> = ({ tree, currentFile, setCurrentFile }) => {
-  const [t] = useTranslation("repos");
-
-  return (
-    <FileDiffContainer className={"mt-4 py-3 pr-2"}>
-      <FileDiffContentTitle className={"ml-4 pb-4 title is-6"}>{t("changesets.diffTreeTitle")}</FileDiffContentTitle>
-      <FileDiffContent>
-        {Object.keys(tree.children).map((key) => (
-          <TreeNode
-            key={key}
-            node={tree.children[key]}
-            parentPath={""}
-            currentFile={currentFile}
-            setCurrentFile={setCurrentFile}
-          />
-        ))}
-      </FileDiffContent>
-    </FileDiffContainer>
-  );
-};
-
-export default DiffFileTree;
-
-type NodeProps = { node: FileTree; parentPath: string; currentFile: string; setCurrentFile: (path: string) => void };
-
-const addPath = (parentPath: string, path: string) => {
-  if ("" === parentPath) {
-    return path;
-  }
-  return parentPath + "/" + path;
-};
-
-const TreeNode: FC<NodeProps> = ({ node, parentPath, currentFile, setCurrentFile }) => {
-  const [t] = useTranslation("repos");
-
-  return (
-    <li>
-      {Object.keys(node.children).length > 0 ? (
-        <ul className={"py-1 pr-1 pl-3"}>
-          <li className={"is-flex has-text-grey"}>
-            <StyledIcon alt={t("diff.showContent")}>folder</StyledIcon>
-            <div className={"ml-1"}>{node.nodeName}</div>
-          </li>
-          {Object.keys(node.children).map((key) => (
-            <TreeNode
-              key={key}
-              node={node.children[key]}
-              parentPath={addPath(parentPath, node.nodeName)}
-              currentFile={currentFile}
-              setCurrentFile={setCurrentFile}
-            />
-          ))}
-        </ul>
-      ) : (
-        <TreeFile
-          path={node.nodeName}
-          parentPath={parentPath}
-          currentFile={currentFile}
-          setCurrentFile={setCurrentFile}
-        />
-      )}
-    </li>
-  );
-};
-
-type FileProps = { path: string; parentPath: string; currentFile: string; setCurrentFile: (path: string) => void };
-
-export const TreeFileContent = styled.div`
-  cursor: pointer;
-`;
-
-const TreeFile: FC<FileProps> = ({ path, parentPath, currentFile, setCurrentFile }) => {
-  const [t] = useTranslation("repos");
-  const completePath = addPath(parentPath, path);
-
-  const isCurrentFile = () => {
-    return currentFile === completePath;
-  };
-
-  return (
-    <TreeFileContent className={"is-flex py-1 pl-3"} onClick={() => setCurrentFile(completePath)}>
-      {isCurrentFile() ? (
-        <StyledIcon style={{ minWidth: "1.5rem" }} key={completePath + "file"} alt={t("diff.showContent")}>
-          file
-        </StyledIcon>
-      ) : (
-        <StyledIcon style={{ minWidth: "1.5rem" }} key={completePath + "file"} type="far" alt={t("diff.showContent")}>
-          file
-        </StyledIcon>
-      )}
-      <div className={"ml-1"}>{path}</div>
-    </TreeFileContent>
-  );
-};