@scm-manager/ui-components 3.7.4 → 3.7.5-20250212-173204

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "3.7.4",
+  "version": "3.7.5-20250212-173204",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -32,14 +32,14 @@
     "react-query": "^3.39.2"
   },
   "devDependencies": {
-    "@scm-manager/ui-tests": "3.7.4",
-    "@scm-manager/ui-types": "3.7.4",
+    "@scm-manager/ui-tests": "3.7.5-20250212-173204",
+    "@scm-manager/ui-types": "3.7.5-20250212-173204",
     "@types/fetch-mock": "^7.3.1",
     "@types/react-select": "^2.0.19",
     "@types/unist": "^2.0.3",
     "gitdiff-parser": "^0.2.2",
     "i18next-fetch-backend": "4",
-    "webpack": "^5.72.0",
+    "webpack": "^5.76.0",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-interactions": "^6.5.10",
@@ -47,6 +47,7 @@
     "@storybook/builder-webpack5": "^6.5.10",
     "@storybook/manager-webpack5": "^6.5.10",
     "@storybook/react": "^6.5.10",
+    "@testing-library/react": "^12.1.5",
     "storybook-addon-i18next": "^1.3.0",
     "storybook-addon-themes": "^6.1.0",
     "@types/classnames": "^2.3.1",
@@ -67,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.7.4",
-    "@scm-manager/ui-shortcuts": "3.7.4",
-    "@scm-manager/ui-text": "3.7.4"
+    "@scm-manager/ui-syntaxhighlighting": "3.7.5-20250212-173204",
+    "@scm-manager/ui-shortcuts": "3.7.5-20250212-173204",
+    "@scm-manager/ui-text": "3.7.5-20250212-173204"
   },
   "dependencies": {
-    "@scm-manager/ui-core": "3.7.4",
-    "@scm-manager/ui-overlays": "3.7.4",
-    "@scm-manager/ui-layout": "3.7.4",
-    "@scm-manager/ui-buttons": "3.7.4",
-    "@scm-manager/ui-api": "3.7.4",
-    "@scm-manager/ui-extensions": "3.7.4",
+    "@scm-manager/ui-core": "3.7.5-20250212-173204",
+    "@scm-manager/ui-overlays": "3.7.5-20250212-173204",
+    "@scm-manager/ui-layout": "3.7.5-20250212-173204",
+    "@scm-manager/ui-buttons": "3.7.5-20250212-173204",
+    "@scm-manager/ui-api": "3.7.5-20250212-173204",
+    "@scm-manager/ui-extensions": "3.7.5-20250212-173204",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
     "react-diff-view": "^2.4.10",

package/src/Duration.stories.tsx

@@ -20,21 +20,39 @@ import React from "react";
 
 storiesOf("Duration", module).add("Duration", () => (
   <div className="m-5 p-5">
+    <p>
+      <Duration duration={1} />
+    </p>
     <p>
       <Duration duration={500} />
     </p>
+    <p>
+      <Duration duration={1000 + 1} />
+    </p>
     <p>
       <Duration duration={2000} />
     </p>
+    <p>
+      <Duration duration={1000 * 60 + 1} />
+    </p>
     <p>
       <Duration duration={42 * 1000 * 60} />
     </p>
+    <p>
+      <Duration duration={1000 * 60 * 60 + 1} />
+    </p>
     <p>
       <Duration duration={21 * 1000 * 60 * 60} />
     </p>
+    <p>
+      <Duration duration={1000 * 60 * 60 * 24 + 1} />
+    </p>
     <p>
       <Duration duration={5 * 1000 * 60 * 60 * 24} />
     </p>
+    <p>
+      <Duration duration={1000 * 60 * 60 * 24 * 7 + 1} />
+    </p>
     <p>
       <Duration duration={3 * 1000 * 60 * 60 * 24 * 7} />
     </p>

package/src/__snapshots__/storyshots.test.ts.snap

@@ -1521,6 +1521,13 @@ exports[`Storyshots Duration Duration 1`] = `
 <div
   className="m-5 p-5"
 >
+  <p>
+    <time
+      dateTime="1ms"
+    >
+      duration.ms
+    </time>
+  </p>
   <p>
     <time
       dateTime="500ms"
@@ -1528,6 +1535,13 @@ exports[`Storyshots Duration Duration 1`] = `
       duration.ms
     </time>
   </p>
+  <p>
+    <time
+      dateTime="1s"
+    >
+      duration.s
+    </time>
+  </p>
   <p>
     <time
       dateTime="2s"
@@ -1535,6 +1549,13 @@ exports[`Storyshots Duration Duration 1`] = `
       duration.s
     </time>
   </p>
+  <p>
+    <time
+      dateTime="1m"
+    >
+      duration.m
+    </time>
+  </p>
   <p>
     <time
       dateTime="42m"
@@ -1542,6 +1563,13 @@ exports[`Storyshots Duration Duration 1`] = `
       duration.m
     </time>
   </p>
+  <p>
+    <time
+      dateTime="1h"
+    >
+      duration.h
+    </time>
+  </p>
   <p>
     <time
       dateTime="21h"
@@ -1549,6 +1577,13 @@ exports[`Storyshots Duration Duration 1`] = `
       duration.h
     </time>
   </p>
+  <p>
+    <time
+      dateTime="1d"
+    >
+      duration.d
+    </time>
+  </p>
   <p>
     <time
       dateTime="5d"
@@ -1556,6 +1591,13 @@ exports[`Storyshots Duration Duration 1`] = `
       duration.d
     </time>
   </p>
+  <p>
+    <time
+      dateTime="1w"
+    >
+      duration.w
+    </time>
+  </p>
   <p>
     <time
       dateTime="3w"
@@ -78158,11 +78200,18 @@ exports[`Storyshots Secondary Navigation Active when match 1`] = `
       <div>
         <button
           aria-label="secondaryNavigation.hideContent"
-          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label"
           collapsed={false}
           onClick={[Function]}
           type="button"
         >
+          <i
+            className="SecondaryNavigation__Icon-sc-8p1rgi-1 gqxbcY is-medium"
+          >
+            <i
+              className="fas fa-caret-down"
+            />
+          </i>
           Hitchhiker
         </button>
         <ul
@@ -78215,7 +78264,7 @@ exports[`Storyshots Secondary Navigation Default 1`] = `
       <div>
         <button
           aria-label="secondaryNavigation.hideContent"
-          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label"
           collapsed={false}
           onClick={[Function]}
           type="button"
@@ -78278,7 +78327,7 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
       <div>
         <button
           aria-label="secondaryNavigation.hideContent"
-          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label"
           collapsed={false}
           onClick={[Function]}
           type="button"
@@ -78369,7 +78418,7 @@ exports[`Storyshots Secondary Navigation Sub Navigation 1`] = `
       <div>
         <button
           aria-label="secondaryNavigation.hideContent"
-          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label"
           collapsed={false}
           onClick={[Function]}
           type="button"

package/src/buttons/Button.tsx

@@ -41,7 +41,7 @@ type Props = ButtonProps & {
 };
 
 /**
- * @deprecated Use {@link ui-buttons/src/Button.tsx} instead
+ * @deprecated Use {@link ui-core/src/base/buttons/Button} instead
  */
 const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
   (

package/src/forms/InputField.tsx

@@ -21,6 +21,7 @@ import { createAttributesForTesting } from "../devBuild";
 import useAutofocus from "./useAutofocus";
 import { createFormFieldWrapper, FieldProps, FieldType, isLegacy, isUsingRef } from "./FormFieldTypes";
 import { createA11yId } from "../createA11yId";
+import { FieldMessage } from "@scm-manager/ui-core";
 
 type BaseProps = {
   label?: string;
@@ -40,6 +41,7 @@ type BaseProps = {
   defaultValue?: string | number;
   readOnly?: boolean;
   required?: boolean;
+  warning?: string;
 };
 
 export const InnerInputField: FC<FieldProps<BaseProps, HTMLInputElement, string>> = ({
@@ -60,6 +62,7 @@ export const InnerInputField: FC<FieldProps<BaseProps, HTMLInputElement, string>
   defaultValue,
   readOnly,
   required,
+  warning,
   ...props
 }) => {
   const field = useAutofocus<HTMLInputElement>(autofocus, props.innerRef);
@@ -123,6 +126,7 @@ export const InnerInputField: FC<FieldProps<BaseProps, HTMLInputElement, string>
           {...createAttributesForTesting(testId)}
         />
       </div>
+      {warning ? <FieldMessage variant="warning">{warning}</FieldMessage> : null}
       {helper}
     </fieldset>
   );

package/src/layout/SecondaryNavigationColumn.tsx

@@ -17,6 +17,7 @@
 import React, { FC } from "react";
 import styled from "styled-components";
 import { useSecondaryNavigation } from "../useSecondaryNavigation";
+import { SecondaryNavigationProvider } from "../navigation/SecondaryNavigationContext";
 
 const SecondaryColumn = styled.div<{ collapsed: boolean }>`
   flex: 0 0 auto;
@@ -28,7 +29,7 @@ const SecondaryColumn = styled.div<{ collapsed: boolean }>`
   }
 `;
 
-const SecondaryNavigationColumn: FC = ({ children }) => {
+const SecondaryNavigationColumnIntern: FC = ({ children }) => {
   const { collapsed } = useSecondaryNavigation();
 
   return (
@@ -38,4 +39,12 @@ const SecondaryNavigationColumn: FC = ({ children }) => {
   );
 };
 
+const SecondaryNavigationColumn: FC = ({ children }) => {
+  return (
+    <SecondaryNavigationProvider>
+      <SecondaryNavigationColumnIntern>{children}</SecondaryNavigationColumnIntern>
+    </SecondaryNavigationProvider>
+  );
+};
+
 export default SecondaryNavigationColumn;

package/src/navigation/ExternalNavLink.tsx

@@ -14,11 +14,10 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC, useContext } from "react";
+import React, { FC } from "react";
 import classNames from "classnames";
 import { useSecondaryNavigation } from "../useSecondaryNavigation";
 import ExternalLink from "./ExternalLink";
-import { SecondaryNavigationContext } from "./SecondaryNavigationContext";
 
 type Props = {
   to: string;
@@ -28,7 +27,6 @@ type Props = {
 
 const ExternalNavLink: FC<Props> = ({ to, icon, label }) => {
   const { collapsed } = useSecondaryNavigation();
-  const isSecondaryNavigation = useContext(SecondaryNavigationContext);
 
   let showIcon;
   if (icon) {
@@ -43,7 +41,7 @@ const ExternalNavLink: FC<Props> = ({ to, icon, label }) => {
     <li title={collapsed ? label : undefined}>
       <ExternalLink to={to} className={collapsed ? "has-text-centered" : ""} aria-label={collapsed ? label : undefined}>
         {showIcon}
-        {isSecondaryNavigation && collapsed ? null : label}
+        {collapsed ? null : label}
       </ExternalLink>
     </li>
   );

package/src/navigation/NavLink.tsx

@@ -17,12 +17,11 @@
 import React, { FC, useContext, useEffect } from "react";
 import classNames from "classnames";
 import { Link } from "react-router-dom";
+import { createAttributesForTesting } from "@scm-manager/ui-core";
 import { useSecondaryNavigation } from "../useSecondaryNavigation";
 import { RoutingProps } from "./RoutingProps";
-import useActiveMatch from "./useActiveMatch";
-import { createAttributesForTesting } from "@scm-manager/ui-core";
-import { SecondaryNavigationContext } from "./SecondaryNavigationContext";
 import { SubNavigationContext } from "./SubNavigationContext";
+import useActiveMatch from "./useActiveMatch";
 
 type Props = RoutingProps & {
   label: string;
@@ -51,14 +50,13 @@ const NavLinkContent: FC<NavLinkContentProp> = ({ label, icon, collapsed }) => (
 const NavLink: FC<Props> = ({ to, activeWhenMatch, activeOnlyWhenExact, title, testId, children, ...contentProps }) => {
   const active = useActiveMatch({ to, activeWhenMatch, activeOnlyWhenExact });
   const { collapsed, setCollapsible } = useSecondaryNavigation();
-  const isSecondaryNavigation = useContext(SecondaryNavigationContext);
   const isSubNavigation = useContext(SubNavigationContext);
 
   useEffect(() => {
-    if (isSecondaryNavigation && active) {
+    if (active) {
       setCollapsible(!isSubNavigation);
     }
-  }, [active, isSecondaryNavigation, isSubNavigation, setCollapsible]);
+  }, [active, isSubNavigation, setCollapsible]);
 
   return (
     <li title={collapsed ? title : undefined}>
@@ -69,11 +67,7 @@ const NavLink: FC<Props> = ({ to, activeWhenMatch, activeOnlyWhenExact, title, t
         aria-label={collapsed ? title : undefined}
         {...(active ? { "aria-current": "page" } : {})}
       >
-        {children ? (
-          children
-        ) : (
-          <NavLinkContent {...contentProps} collapsed={(isSecondaryNavigation && collapsed) ?? false} />
-        )}
+        {children || <NavLinkContent {...contentProps} collapsed={collapsed} />}
       </Link>
     </li>
   );

package/src/navigation/SecondaryNavigation.stories.tsx

@@ -16,12 +16,13 @@
 
 import { storiesOf } from "@storybook/react";
 import React, { ReactElement } from "react";
+import { MemoryRouter } from "react-router-dom";
+import styled from "styled-components";
+import { Binder, ExtensionPoint, BinderContext } from "@scm-manager/ui-extensions";
+import { SecondaryNavigationProvider } from "./SecondaryNavigationContext";
 import SecondaryNavigation from "./SecondaryNavigation";
 import SecondaryNavigationItem from "./SecondaryNavigationItem";
-import styled from "styled-components";
 import SubNavigation from "./SubNavigation";
-import { Binder, ExtensionPoint, BinderContext } from "@scm-manager/ui-extensions";
-import { MemoryRouter } from "react-router-dom";
 
 const Columns = styled.div`
   margin: 2rem;
@@ -46,7 +47,9 @@ const withRoute = (route: string) => {
 storiesOf("Secondary Navigation", module)
   .addDecorator((story) => (
     <Columns className="columns">
-      <div className="column is-3">{story()}</div>
+      <div className="column is-3">
+        <SecondaryNavigationProvider>{story()}</SecondaryNavigationProvider>
+      </div>
     </Columns>
   ))
   .add("Default", () =>

package/src/navigation/SecondaryNavigation.tsx

@@ -16,10 +16,8 @@
 
 import React, { FC } from "react";
 import styled from "styled-components";
-import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import { useSecondaryNavigation } from "../useSecondaryNavigation";
-import { SecondaryNavigationContext } from "./SecondaryNavigationContext";
 import { Button } from "@scm-manager/ui-buttons";
 
 type Props = {
@@ -73,14 +71,9 @@ const SecondaryNavigation: FC<Props> = ({ label, children, collapsible = true })
   const menuAriaLabel = collapsed ? t("secondaryNavigation.showContent") : t("secondaryNavigation.hideContent");
 
   return (
-    <SectionContainer className="menu" collapsed={collapsed ?? false}>
+    <SectionContainer className="menu" collapsed={collapsed}>
       <div>
-        <MenuButton
-          className={classNames("menu-label", { "is-clickable": true })}
-          collapsed={collapsed}
-          onClick={toggleCollapse}
-          aria-label={menuAriaLabel}
-        >
+        <MenuButton className="menu-label" collapsed={collapsed} onClick={toggleCollapse} aria-label={menuAriaLabel}>
           {isCollapsible ? (
             <Icon className="is-medium" collapsed={collapsed}>
               {arrowIcon}
@@ -88,9 +81,7 @@ const SecondaryNavigation: FC<Props> = ({ label, children, collapsible = true })
           ) : null}
           {collapsed ? "" : label}
         </MenuButton>
-        <ul className="menu-list">
-          <SecondaryNavigationContext.Provider value={true}>{children}</SecondaryNavigationContext.Provider>
-        </ul>
+        <ul className="menu-list">{children}</ul>
       </div>
     </SectionContainer>
   );

package/src/navigation/SecondaryNavigationContext.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2020 - present Cloudogu GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/.
+ */
+
+import React, { ReactNode, useMemo, useState } from "react";
+
+type SecondaryNavigationContextState = {
+  collapsible: boolean;
+  setCollapsible: (collapsed: boolean) => void;
+};
+
+const dummy: SecondaryNavigationContextState = {
+  collapsible: false,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setCollapsible: () => {},
+};
+
+export const SecondaryNavigationContext = React.createContext<SecondaryNavigationContextState>(dummy);
+
+export const SecondaryNavigationProvider = ({ children }: { children: ReactNode }) => {
+  const [collapsible, setCollapsible] = useState(true);
+  const contextValue = useMemo(() => ({ collapsible, setCollapsible }), [collapsible, setCollapsible]);
+
+  return <SecondaryNavigationContext.Provider value={contextValue}>{children}</SecondaryNavigationContext.Provider>;
+};

package/src/repos/LoadingDiff.tsx

@@ -26,7 +26,7 @@ import { DiffObjectProps } from "./DiffTypes";
 import DiffStatistics from "./DiffStatistics";
 import { DiffDropDown } from "../index";
 import DiffFileTree from "./diff/DiffFileTree";
-import { DiffContent, Divider, FileTreeContent } from "./diff/styledElements";
+import { DiffContent, Divider, FileTreeContent, StickyFileDiffContainer } from "./diff/styledElements";
 import { useHistory, useLocation } from "react-router-dom";
 import { getFileNameFromHash } from "./diffs";
 import LayoutRadioButtons from "./LayoutRadioButtons";
@@ -111,7 +111,7 @@ const LoadingDiff: FC<Props> = ({ url, limit, refetchOnWindowFocus, ...props })
         </div>
         <LayoutRadioButtons layout={layout} setLayout={setLayout} />
         <div className="is-flex mb-4 mt-1 columns is-multiline">
-          <div
+          <StickyFileDiffContainer
             className={
               (layout === "Both" ? "column pl-3 is-one-quarter" : "column pl-3 is-full") +
               (layout !== "Diff" ? "" : " is-hidden")
@@ -125,10 +125,11 @@ const LoadingDiff: FC<Props> = ({ url, limit, refetchOnWindowFocus, ...props })
                   tree={data.tree}
                   currentFile={decodeURIComponent(getFileNameFromHash(location.hash) ?? "")}
                   setCurrentFile={setFilePath}
+                  gap={12}
                 />
               )}
             </FileTreeContent>
-          </div>
+          </StickyFileDiffContainer>
           <DiffContent id={diffContentId} className={layout !== "Tree" ? "column" : "is-hidden"}>
             <Diff
               defaultCollapse={collapsed}

package/src/repos/changesets/ChangesetButtonGroup.test.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2020 - present Cloudogu GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/.
+ */
+
+import * as changesets from "./changesets";
+import { render } from "@testing-library/react";
+import { Branch, Changeset, Repository } from "@scm-manager/ui-types";
+import ChangesetButtonGroup from "./ChangesetButtonGroup";
+import React from "react";
+import { BrowserRouter } from "react-router-dom";
+import { stubI18Next } from "@scm-manager/ui-tests";
+
+const createChangesetLink = jest.spyOn(changesets, "createChangesetLink");
+const createChangesetLinkByBranch = jest.spyOn(changesets, "createChangesetLinkByBranch");
+
+afterEach(() => {
+  jest.resetAllMocks();
+});
+
+describe("ChangesetButtonGroup", () => {
+  test("shouldCallCreateChangesetLinkWithoutBranch", async () => {
+    stubI18Next();
+    const { repository, changeset } = createTestData();
+    render(
+      <BrowserRouter>
+        <ChangesetButtonGroup repository={repository} changeset={changeset}></ChangesetButtonGroup>
+      </BrowserRouter>
+    );
+    expect(createChangesetLink).toHaveBeenCalled();
+    expect(createChangesetLinkByBranch).toHaveBeenCalledTimes(0);
+  });
+
+  test("shouldCallCreateChangesetLinkByBranchWithBranch", async () => {
+    stubI18Next();
+    const { repository, changeset, branch } = createTestData();
+    render(
+      <BrowserRouter>
+        <ChangesetButtonGroup repository={repository} changeset={changeset} branch={branch}></ChangesetButtonGroup>
+      </BrowserRouter>
+    );
+    expect(createChangesetLinkByBranch).toHaveBeenCalled();
+    expect(createChangesetLink).toHaveBeenCalledTimes(0);
+  });
+});
+
+// TODO centralized test data
+function createTestData() {
+  const repository: Repository = { _links: {}, name: "", namespace: "", type: "" };
+  const changeset: Changeset = {
+    _links: {},
+    author: {
+      name: "",
+    },
+    date: new Date(),
+    description: "",
+    id: "",
+  };
+  const branch: Branch = { _links: {}, name: "", revision: "" };
+  return { repository, changeset, branch };
+}

package/src/repos/changesets/ChangesetButtonGroup.tsx

@@ -15,21 +15,24 @@
  */
 
 import React from "react";
-import { Changeset, File, Repository } from "@scm-manager/ui-types";
-import { ButtonAddons, Button } from "../../buttons";
-import { createChangesetLink, createSourcesLink } from "./changesets";
+import { Branch, Changeset, File, Repository } from "@scm-manager/ui-types";
+import { Button, ButtonAddons } from "../../buttons";
+import { createChangesetLink, createChangesetLinkByBranch, createSourcesLink } from "./changesets";
 import { useTranslation } from "react-i18next";
 
 type Props = {
   repository: Repository;
   changeset: Changeset;
   file?: File;
+  branch?: Branch;
 };
 
 const ChangesetButtonGroup = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
-  ({ repository, changeset, file }, ref) => {
+  ({ repository, changeset, file, branch }, ref) => {
     const [t] = useTranslation("repos");
-    const changesetLink = createChangesetLink(repository, changeset);
+    const changesetLink = branch
+      ? createChangesetLinkByBranch(repository, changeset, branch)
+      : createChangesetLink(repository, changeset);
     const sourcesLink = createSourcesLink(repository, changeset, file);
     return (
       <ButtonAddons className="m-0">

package/src/repos/changesets/ChangesetList.tsx

@@ -16,20 +16,23 @@
 
 import ChangesetRow from "./ChangesetRow";
 import React, { FC } from "react";
-import { Changeset, File, Repository } from "@scm-manager/ui-types";
+import { Branch, Changeset, File, Repository } from "@scm-manager/ui-types";
 import { KeyboardIterator } from "@scm-manager/ui-shortcuts";
 
 type Props = {
   repository: Repository;
   changesets: Changeset[];
   file?: File;
+  branch?: Branch;
 };
 
-const ChangesetList: FC<Props> = ({ repository, changesets, file }) => {
+const ChangesetList: FC<Props> = ({ repository, changesets, file, branch }) => {
   return (
     <KeyboardIterator>
       {changesets.map((changeset) => {
-        return <ChangesetRow key={changeset.id} repository={repository} changeset={changeset} file={file} />;
+        return (
+          <ChangesetRow key={changeset.id} repository={repository} changeset={changeset} file={file} branch={branch} />
+        );
       })}
     </KeyboardIterator>
   );

package/src/repos/changesets/ChangesetRow.tsx

@@ -18,7 +18,7 @@ import React, { FC } from "react";
 import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
-import { Changeset, File, Repository } from "@scm-manager/ui-types";
+import { Branch, Changeset, File, Repository } from "@scm-manager/ui-types";
 import ChangesetButtonGroup from "./ChangesetButtonGroup";
 import SingleChangeset from "./SingleChangeset";
 import { useKeyboardIteratorTarget } from "@scm-manager/ui-shortcuts";
@@ -27,11 +27,13 @@ type Props = {
   repository: Repository;
   changeset: Changeset;
   file?: File;
+  branch?: Branch;
 };
 
 const Wrapper = styled.div`
   // & references parent rule
   // have a look at https://cssinjs.org/jss-plugin-nested?v=v10.0.0-alpha.9
+
   & + & {
     margin-top: 1rem;
     padding-top: 1rem;
@@ -39,7 +41,7 @@ const Wrapper = styled.div`
   }
 `;
 
-const ChangesetRow: FC<Props> = ({ repository, changeset, file }) => {
+const ChangesetRow: FC<Props> = ({ repository, changeset, file, branch }) => {
   const ref = useKeyboardIteratorTarget();
   return (
     <Wrapper>
@@ -48,7 +50,7 @@ const ChangesetRow: FC<Props> = ({ repository, changeset, file }) => {
           <SingleChangeset repository={repository} changeset={changeset} />
         </div>
         <div className={classNames("column", "is-flex", "is-justify-content-flex-end", "is-align-items-center")}>
-          <ChangesetButtonGroup ref={ref} repository={repository} changeset={changeset} file={file} />
+          <ChangesetButtonGroup ref={ref} repository={repository} changeset={changeset} file={file} branch={branch} />
           <ExtensionPoint<extensionPoints.ChangesetRight>
             name="changeset.right"
             props={{

package/src/repos/changesets/changesets.test.ts

@@ -14,9 +14,38 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { parseDescription } from "./changesets";
+import { createChangesetLink, createChangesetLinkByBranch, parseDescription } from "./changesets";
+import { Branch, Changeset, Repository } from "@scm-manager/ui-types";
 
-describe("parseDescription tests", () => {
+describe("createChangesetLink", () => {
+  it("should return a changeset link", () => {
+    const { repository, changeset } = createTestData();
+    const link = createChangesetLink(repository, changeset);
+    expect(link).toBe("/repo/sandbox/anarchy/code/changeset/4f153aa670d4b27c");
+  });
+});
+
+describe("createChangesetLinkByBranch", () => {
+  it("should return a changeset link with a branch query with given branch", () => {
+    const { repository, changeset, branch } = createTestData();
+    const link = createChangesetLinkByBranch(repository, changeset, branch);
+    expect(link).toBe("/repo/sandbox/anarchy/code/changeset/4f153aa670d4b27c?branch=resonanceCascade");
+  });
+  it("should return no branch query parameter with empty string", () => {
+    const { repository, changeset, branch } = createTestData();
+    branch.name = "";
+    const link = createChangesetLinkByBranch(repository, changeset, branch);
+    expect(link).toBe("/repo/sandbox/anarchy/code/changeset/4f153aa670d4b27c");
+  });
+  it("should escape a branch with a slash inside", () => {
+    const { repository, changeset, branch } = createTestData();
+    branch.name = "feature/rescueWorld";
+    const link = createChangesetLinkByBranch(repository, changeset, branch);
+    expect(link).toBe("/repo/sandbox/anarchy/code/changeset/4f153aa670d4b27c?branch=feature%2FrescueWorld");
+  });
+});
+
+describe("parseDescription", () => {
   it("should return a description with title and message", () => {
     const desc = parseDescription("Hello\nTrillian");
     expect(desc.title).toBe("Hello");
@@ -34,3 +63,34 @@ describe("parseDescription tests", () => {
     expect(desc.message).toBe("");
   });
 });
+
+function createTestData() {
+  const repository: Repository = {
+    name: "anarchy",
+    namespace: "sandbox",
+    type: "git",
+    _links: {},
+  };
+
+  const changeset: Changeset = {
+    author: {
+      name: "Gordon Freeman",
+    },
+    date: new Date(),
+    description: "Some repository.",
+    id: "4f153aa670d4b27c",
+    _links: {},
+  };
+
+  const branch: Branch = {
+    name: "resonanceCascade",
+    revision: "4f153aa670d4b27c",
+    _links: {},
+  };
+
+  return {
+    repository,
+    changeset,
+    branch,
+  };
+}

package/src/repos/changesets/changesets.ts

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { Changeset, File, Repository } from "@scm-manager/ui-types";
+import { Branch, Changeset, File, Repository } from "@scm-manager/ui-types";
 
 export type Description = {
   title: string;
@@ -25,6 +25,16 @@ export function createChangesetLink(repository: Repository, changeset: Changeset
   return `/repo/${repository.namespace}/${repository.name}/code/changeset/${changeset.id}`;
 }
 
+export function createChangesetLinkByBranch(repository: Repository, changeset: Changeset, branch: Branch) {
+  if (!branch.name) {
+    return `/repo/${repository.namespace}/${repository.name}/code/changeset/${changeset.id}`;
+  } else {
+    return `/repo/${repository.namespace}/${repository.name}/code/changeset/${changeset.id}?branch=${encodeURIComponent(
+      branch.name
+    )}`;
+  }
+}
+
 export function createSourcesLink(repository: Repository, changeset: Changeset, file?: File) {
   let url = `/repo/${repository.namespace}/${repository.name}/code/sources/${changeset.id}`;
 
@@ -50,6 +60,6 @@ export function parseDescription(description?: string): Description {
 
   return {
     title,
-    message
+    message,
   };
 }

package/src/repos/diff/DiffFileTree.tsx

@@ -21,16 +21,16 @@ 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 };
+type Props = { tree: FileTree; currentFile: string; setCurrentFile: (path: string) => void; gap?: number };
 
 const StyledIcon = styled(Icon)`
   min-width: 1.5rem;
 `;
 
-const DiffFileTree: FC<Props> = ({ tree, currentFile, setCurrentFile }) => {
+const DiffFileTree: FC<Props> = ({ tree, currentFile, setCurrentFile, gap = 15 }) => {
   return (
     <FileDiffContainer className={"mt-4 py-3 pr-2"}>
-      <FileDiffContent>
+      <FileDiffContent gap={gap}>
         {Object.keys(tree.children).map((key) => (
           <TreeNode
             key={key}

package/src/repos/diff/styledElements.tsx

@@ -96,17 +96,28 @@ export const DiffContent = styled.div`
   width: 100%;
 `;
 
-export const FileDiffContainer = styled.div`
+export const StickyFileDiffContainer = styled.div`
+  top: 3rem;
   position: sticky;
+  height: 100%;
+`;
+
+export const FileDiffContainer = styled.div`
   top: 5rem;
 `;
 
-export const FileDiffContent = styled.ul`
+export const FileDiffContent = styled.ul<{ gap?: number }>`
   overflow: auto;
-  @supports (-moz-appearance: none) {
-    max-height: calc(100vh - 11rem);
+  ${(props) => {
+    if (props.gap) {
+      return `
+     @supports (-moz-appearance: none) {
+    max-height: calc(100vh - ${props.gap}rem);
   }
-  max-height: calc(100svh - 11rem);
+  max-height: calc(100svh - ${props.gap}rem);
+  `;
+    }
+  }};
 `;
 
 export const Divider = styled.div`

package/src/useSecondaryNavigation.tsx

@@ -15,17 +15,14 @@
  */
 
 import { useLocalStorage } from "@scm-manager/ui-api";
-import { useCallback, useMemo } from "react";
+import { useCallback, useContext } from "react";
+import { SecondaryNavigationContext } from "./navigation/SecondaryNavigationContext";
 
 export const useSecondaryNavigation = (isNavigationCollapsible = true) => {
-  const [isCollapsed, setCollapsed] = useLocalStorage<boolean>("secondaryNavigation.collapsed", false);
-  const [isRouteCollapsible, setRouteCollapsible] = useLocalStorage<boolean>("secondaryNavigation.collapsible", true);
+  const { collapsible, setCollapsible } = useContext(SecondaryNavigationContext);
+  const [isCollapsed, setCollapsed] = useLocalStorage("secondaryNavigation.collapsed", false);
 
-  const collapsible = useMemo(
-    () => isRouteCollapsible && isNavigationCollapsible,
-    [isNavigationCollapsible, isRouteCollapsible]
-  );
-  const collapsed = useMemo(() => collapsible && isCollapsed, [collapsible, isCollapsed]);
+  const collapsed = collapsible && isCollapsed;
 
   const toggleCollapse = useCallback(() => {
     if (collapsible) {
@@ -33,13 +30,10 @@ export const useSecondaryNavigation = (isNavigationCollapsible = true) => {
     }
   }, [collapsible, setCollapsed]);
 
-  return useMemo(
-    () => ({
-      collapsed,
-      collapsible,
-      setCollapsible: setRouteCollapsible,
-      toggleCollapse,
-    }),
-    [collapsed, collapsible, setRouteCollapsible, toggleCollapse]
-  );
+  return {
+    collapsed,
+    collapsible,
+    setCollapsible,
+    toggleCollapse,
+  };
 };

package/src/navigation/SecondaryNavigationContext.ts

@@ -1,19 +0,0 @@
-/*
- * Copyright (c) 2020 - present Cloudogu GmbH
- *
- * This program is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
- * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see https://www.gnu.org/licenses/.
- */
-
-import React from "react";
-
-export const SecondaryNavigationContext = React.createContext(false);