@scm-manager/ui-components 3.10.2-20250802-135601 → 3.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "3.10.2-20250802-135601",
+  "version": "3.10.2",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -32,8 +32,8 @@
     "react-query": "^3.39.2"
   },
   "devDependencies": {
-    "@scm-manager/ui-tests": "3.10.2-20250802-135601",
-    "@scm-manager/ui-types": "3.10.2-20250802-135601",
+    "@scm-manager/ui-tests": "3.10.2",
+    "@scm-manager/ui-types": "3.10.2",
     "@types/fetch-mock": "^7.3.1",
     "@types/react-select": "^2.0.19",
     "@types/unist": "^2.0.3",
@@ -68,17 +68,17 @@
     "@scm-manager/jest-preset": "^2.14.1",
     "@scm-manager/prettier-config": "^2.12.0",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-syntaxhighlighting": "3.10.2-20250802-135601",
-    "@scm-manager/ui-shortcuts": "3.10.2-20250802-135601",
-    "@scm-manager/ui-text": "3.10.2-20250802-135601"
+    "@scm-manager/ui-syntaxhighlighting": "3.10.2",
+    "@scm-manager/ui-shortcuts": "3.10.2",
+    "@scm-manager/ui-text": "3.10.2"
   },
   "dependencies": {
-    "@scm-manager/ui-core": "3.10.2-20250802-135601",
-    "@scm-manager/ui-overlays": "3.10.2-20250802-135601",
-    "@scm-manager/ui-layout": "3.10.2-20250802-135601",
-    "@scm-manager/ui-buttons": "3.10.2-20250802-135601",
-    "@scm-manager/ui-api": "3.10.2-20250802-135601",
-    "@scm-manager/ui-extensions": "3.10.2-20250802-135601",
+    "@scm-manager/ui-core": "3.10.2",
+    "@scm-manager/ui-overlays": "3.10.2",
+    "@scm-manager/ui-layout": "3.10.2",
+    "@scm-manager/ui-buttons": "3.10.2",
+    "@scm-manager/ui-api": "3.10.2",
+    "@scm-manager/ui-extensions": "3.10.2",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
     "react-diff-view": "^2.4.10",

package/src/repos/DiffTypes.ts

@@ -14,9 +14,9 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { FC, ReactNode } from "react";
+import { ReactNode } from "react";
 import { DefaultCollapsed } from "./defaultCollapsed";
-import { Change, Hunk, FileDiff as File, FileChangeType } from "@scm-manager/ui-types";
+import { Change, Hunk, FileDiff as File } from "@scm-manager/ui-types";
 
 export type ChangeEvent = {
   change: Change;
@@ -31,18 +31,6 @@ export type AnnotationFactoryContext = BaseContext;
 
 export type FileAnnotationFactory = (file: File) => ReactNode[];
 
-export type FileTreeNodeWrapper = FC<{
-  name: string;
-  path: string;
-  changeType?: FileChangeType;
-  iconName: string;
-  iconColor: string;
-  isFile: boolean;
-  originalIcon: ReactNode;
-  originalLabel: ReactNode;
-  isCurrentFile: boolean;
-}>;
-
 // key = change id, value = react component
 export type AnnotationFactory = (context: AnnotationFactoryContext) => {
   [key: string]: any;

package/src/repos/diff/DiffFileTree.tsx

@@ -18,19 +18,12 @@ import React, { FC } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
-import { FileChangeType, FileTree } from "@scm-manager/ui-types";
+import { FileTree } from "@scm-manager/ui-types";
 import { FileDiffContent, StackedSpan, StyledIcon } from "./styledElements";
-import { FileTreeNodeWrapper } from "../DiffTypes";
 
-type Props = {
-  tree: FileTree;
-  currentFile: string;
-  setCurrentFile: (path: string) => void;
-  gap?: number;
-  FileTreeNodeWrapper?: FileTreeNodeWrapper;
-};
+type Props = { tree: FileTree; currentFile: string; setCurrentFile: (path: string) => void; gap?: number };
 
-const DiffFileTree: FC<Props> = ({ tree, currentFile, setCurrentFile, gap = 15, FileTreeNodeWrapper }) => {
+const DiffFileTree: FC<Props> = ({ tree, currentFile, setCurrentFile, gap = 15 }) => {
   return (
     <FileDiffContent gap={gap}>
       {Object.keys(tree.children).map((key) => (
@@ -40,7 +33,6 @@ const DiffFileTree: FC<Props> = ({ tree, currentFile, setCurrentFile, gap = 15,
           parentPath=""
           currentFile={currentFile}
           setCurrentFile={setCurrentFile}
-          FileTreeNodeWrapper={FileTreeNodeWrapper}
         />
       ))}
     </FileDiffContent>
@@ -49,13 +41,9 @@ const DiffFileTree: FC<Props> = ({ tree, currentFile, setCurrentFile, gap = 15,
 
 export default DiffFileTree;
 
-type NodeProps = {
-  node: FileTree;
-  parentPath: string;
-  currentFile: string;
-  setCurrentFile: (path: string) => void;
-  FileTreeNodeWrapper?: FileTreeNodeWrapper;
-};
+type ChangeType = "add" | "modify" | "delete" | "rename" | "copy";
+
+type NodeProps = { node: FileTree; parentPath: string; currentFile: string; setCurrentFile: (path: string) => void };
 
 const addPath = (parentPath: string, path: string) => {
   if ("" === parentPath) {
@@ -64,31 +52,16 @@ const addPath = (parentPath: string, path: string) => {
   return parentPath + "/" + path;
 };
 
-const TreeNode: FC<NodeProps> = ({ node, parentPath, currentFile, setCurrentFile, FileTreeNodeWrapper }) => {
+const TreeNode: FC<NodeProps> = ({ node, parentPath, currentFile, setCurrentFile }) => {
   const [t] = useTranslation("repos");
 
-  FileTreeNodeWrapper = FileTreeNodeWrapper || (({ children }) => <>{children}</>);
-
-  const label = <div className="ml-1">{node.nodeName}</div>;
-  const icon = <StyledIcon alt={t("diff.showContent")}>folder</StyledIcon>;
   return (
     <li>
       {Object.keys(node.children).length > 0 ? (
         <ul className="py-1 pl-3">
           <li className="is-flex has-text-grey">
-            <FileTreeNodeWrapper
-              path={addPath(parentPath, node.nodeName)}
-              isFile={false}
-              isCurrentFile={false}
-              name={node.nodeName}
-              iconName={"folder"}
-              iconColor={"grey"}
-              originalIcon={icon}
-              originalLabel={label}
-            >
-              {icon}
-              {label}
-            </FileTreeNodeWrapper>
+            <StyledIcon alt={t("diff.showContent")}>folder</StyledIcon>
+            <div className="ml-1">{node.nodeName}</div>
           </li>
           {Object.keys(node.children).map((key) => (
             <TreeNode
@@ -97,25 +70,23 @@ const TreeNode: FC<NodeProps> = ({ node, parentPath, currentFile, setCurrentFile
               parentPath={addPath(parentPath, node.nodeName)}
               currentFile={currentFile}
               setCurrentFile={setCurrentFile}
-              FileTreeNodeWrapper={FileTreeNodeWrapper}
             />
           ))}
         </ul>
       ) : (
         <TreeFile
-          changeType={node.changeType.toLowerCase() as FileChangeType}
+          changeType={node.changeType.toLowerCase() as ChangeType}
           path={node.nodeName}
           parentPath={parentPath}
           currentFile={currentFile}
           setCurrentFile={setCurrentFile}
-          FileTreeNodeWrapper={FileTreeNodeWrapper}
         />
       )}
     </li>
   );
 };
 
-const getColor = (changeType: FileChangeType) => {
+const getColor = (changeType: ChangeType) => {
   switch (changeType) {
     case "add":
       return "success";
@@ -128,7 +99,7 @@ const getColor = (changeType: FileChangeType) => {
   }
 };
 
-const getIcon = (changeType: FileChangeType) => {
+const getIcon = (changeType: ChangeType) => {
   switch (changeType) {
     case "add":
     case "copy":
@@ -142,22 +113,14 @@ const getIcon = (changeType: FileChangeType) => {
 };
 
 type FileProps = {
-  changeType: FileChangeType;
+  changeType: ChangeType;
   path: string;
   parentPath: string;
   currentFile: string;
   setCurrentFile: (path: string) => void;
-  FileTreeNodeWrapper: FileTreeNodeWrapper;
 };
 
-const TreeFile: FC<FileProps> = ({
-  changeType,
-  path,
-  parentPath,
-  currentFile,
-  setCurrentFile,
-  FileTreeNodeWrapper,
-}) => {
+const TreeFile: FC<FileProps> = ({ changeType, path, parentPath, currentFile, setCurrentFile }) => {
   const [t] = useTranslation("repos");
   const completePath = addPath(parentPath, path);
 
@@ -165,50 +128,35 @@ const TreeFile: FC<FileProps> = ({
     return currentFile === completePath;
   };
 
-  const iconName = getIcon(changeType);
-
-  const icon = (
-    <StackedSpan className="fa-stack">
-      <StyledIcon
-        className={classNames("fa-stack-2x", `has-text-${getColor(changeType)}`)}
-        key={completePath + "file"}
-        type="fas"
-        alt={t("diff.showContent")}
-      >
-        file
-      </StyledIcon>
-      <StyledIcon
-        className={classNames("fa-stack-1x", "is-relative", "has-text-secondary-least")}
-        isSmaller={iconName === "circle"}
-        key={changeType}
-        alt={t(`diff.changes.${changeType}`)}
-      >
-        {iconName}
-      </StyledIcon>
-    </StackedSpan>
-  );
-  const label = <div className={classNames("ml-1", isCurrentFile() ? "has-text-weight-bold" : "")}>{path}</div>;
-
   return (
     <Link
       className="is-flex py-1 pl-3 has-cursor-pointer"
       onClick={() => setCurrentFile(completePath)}
       to={`#diff-${encodeURIComponent(completePath)}`}
     >
-      <FileTreeNodeWrapper
-        name={path}
-        path={completePath}
-        changeType={changeType}
-        isFile={true}
-        iconName={iconName}
-        iconColor={getColor(changeType)}
-        originalIcon={icon}
-        originalLabel={label}
-        isCurrentFile={isCurrentFile()}
-      >
-        {icon}
-        {label}
-      </FileTreeNodeWrapper>
+      <StackedSpan className="fa-stack">
+        <StyledIcon
+          className={classNames("fa-stack-2x", `has-text-${getColor(changeType)}`)}
+          key={completePath + "file"}
+          type={isCurrentFile() ? "fas" : "far"}
+          alt={t("diff.showContent")}
+        >
+          file
+        </StyledIcon>
+        <StyledIcon
+          className={classNames(
+            "fa-stack-1x",
+            "is-relative",
+            isCurrentFile() ? "has-text-secondary-least" : `has-text-${getColor(changeType)}`
+          )}
+          isSmaller={getIcon(changeType) === "circle"}
+          key={changeType}
+          alt={t(`diff.changes.${changeType}`)}
+        >
+          {getIcon(changeType)}
+        </StyledIcon>
+      </StackedSpan>
+      <div className="ml-1">{path}</div>
     </Link>
   );
 };