Merge remote-tracking branch 'origin/develop' into feature/browse_commit_with_limit

# Conflicts: # CHANGELOG.md
2025-11-13 17:05:43 +01:00 · 2020-03-12 11:21:13 +01:00
parent f9122ebb36 3851df5529
commit 500d0758b3
48 changed files with 1660 additions and 1052 deletions
--- a/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.tsx
@@ -10,6 +10,7 @@ type Props = {
  activeWhenMatch?: (route: any) => boolean;
  activeOnlyWhenExact: boolean;
  icon?: string;
+  title?: string;
 };

 /**
--- a/scm-ui/ui-webapp/src/repos/containers/Changesets.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/Changesets.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import { compose } from "redux";
-import { withRouter } from "react-router-dom";
+import { withRouter, RouteComponentProps } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Branch, Changeset, PagedCollection, Repository } from "@scm-manager/ui-types";
 import {
@@ -20,23 +20,21 @@ import {
  selectListAsCollection
 } from "../modules/changesets";

-type Props = WithTranslation & {
-  repository: Repository;
-  branch: Branch;
-  page: number;
+type Props = RouteComponentProps &
+  WithTranslation & {
+    repository: Repository;
+    branch: Branch;
+    page: number;

-  // State props
-  changesets: Changeset[];
-  list: PagedCollection;
-  loading: boolean;
-  error: Error;
+    // State props
+    changesets: Changeset[];
+    list: PagedCollection;
+    loading: boolean;
+    error: Error;

-  // Dispatch props
-  fetchChangesets: (p1: Repository, p2: Branch, p3: number) => void;
-
-  // context props
-  match: any;
-};
+    // Dispatch props
+    fetchChangesets: (p1: Repository, p2: Branch, p3: number) => void;
+  };

 class Changesets extends React.Component<Props> {
  componentDidMount() {
@@ -44,6 +42,10 @@ class Changesets extends React.Component<Props> {
    fetchChangesets(repository, branch, page);
  }

+  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+    return this.props.changesets !== nextProps.changesets;
+  }
+
  render() {
    const { changesets, loading, error, t } = this.props;

--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
@@ -1,11 +1,20 @@
 import React from "react";
 import { connect } from "react-redux";
-import { Redirect, Route, Switch } from "react-router-dom";
+import { Redirect, Route, Switch, RouteComponentProps } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
-import { History } from "history";
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Repository } from "@scm-manager/ui-types";
-import { ErrorPage, Loading, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
+import {
+  ErrorPage,
+  Loading,
+  NavLink,
+  Page,
+  SecondaryNavigation,
+  SubNavigation,
+  MenuContext,
+  storeMenuCollapsed,
+  isMenuCollapsed
+} from "@scm-manager/ui-components";
 import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos";
 import RepositoryDetails from "../components/RepositoryDetails";
 import EditRepo from "./EditRepo";
@@ -21,24 +30,33 @@ import CodeOverview from "../codeSection/containers/CodeOverview";
 import ChangesetView from "./ChangesetView";
 import SourceExtensions from "../sources/containers/SourceExtensions";

-type Props = WithTranslation & {
-  namespace: string;
-  name: string;
-  repository: Repository;
-  loading: boolean;
-  error: Error;
-  repoLink: string;
-  indexLinks: object;
+type Props = RouteComponentProps &
+  WithTranslation & {
+    namespace: string;
+    name: string;
+    repository: Repository;
+    loading: boolean;
+    error: Error;
+    repoLink: string;
+    indexLinks: object;

-  // dispatch functions
-  fetchRepoByName: (link: string, namespace: string, name: string) => void;
+    // dispatch functions
+    fetchRepoByName: (link: string, namespace: string, name: string) => void;
+  };

-  // context props
-  history: History;
-  match: any;
+type State = {
+  menuCollapsed: boolean;
 };

-class RepositoryRoot extends React.Component<Props> {
+class RepositoryRoot extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed()
+    };
+  }
+
  componentDidMount() {
    const { fetchRepoByName, namespace, name, repoLink } = this.props;
    fetchRepoByName(repoLink, namespace, name);
@@ -87,8 +105,13 @@ class RepositoryRoot extends React.Component<Props> {
    return `${url}/changesets`;
  };

+  onCollapseRepositoryMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
  render() {
    const { loading, error, indexLinks, repository, t } = this.props;
+    const { menuCollapsed } = this.state;

    if (error) {
      return (
@@ -117,66 +140,76 @@ class RepositoryRoot extends React.Component<Props> {
    }

    return (
-      <Page title={repository.namespace + "/" + repository.name}>
-        <div className="columns">
-          <div className="column is-three-quarters">
-            <Switch>
-              <Redirect exact from={this.props.match.url} to={redirectedUrl} />
+      <MenuContext.Provider
+        value={{
+          menuCollapsed,
+          setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
+        }}
+      >
+        <Page title={repository.namespace + "/" + repository.name}>
+          <div className="columns">
+            <div className="column">
+              <Switch>
+                <Redirect exact from={this.props.match.url} to={redirectedUrl} />

-              {/* redirect pre 2.0.0-rc2 links */}
-              <Redirect from={`${url}/changeset/:id`} to={`${url}/code/changeset/:id`} />
-              <Redirect exact from={`${url}/sources`} to={`${url}/code/sources`} />
-              <Redirect from={`${url}/sources/:revision/:path*`} to={`${url}/code/sources/:revision/:path*`} />
-              <Redirect exact from={`${url}/changesets`} to={`${url}/code/changesets`} />
-              <Redirect from={`${url}/branch/:branch/changesets`} to={`${url}/code/branch/:branch/changesets/`} />
+                {/* redirect pre 2.0.0-rc2 links */}
+                <Redirect from={`${url}/changeset/:id`} to={`${url}/code/changeset/:id`} />
+                <Redirect exact from={`${url}/sources`} to={`${url}/code/sources`} />
+                <Redirect from={`${url}/sources/:revision/:path*`} to={`${url}/code/sources/:revision/:path*`} />
+                <Redirect exact from={`${url}/changesets`} to={`${url}/code/changesets`} />
+                <Redirect from={`${url}/branch/:branch/changesets`} to={`${url}/code/branch/:branch/changesets/`} />

-              <Route path={`${url}/info`} exact component={() => <RepositoryDetails repository={repository} />} />
-              <Route path={`${url}/settings/general`} component={() => <EditRepo repository={repository} />} />
-              <Route
-                path={`${url}/settings/permissions`}
-                render={() => (
-                  <Permissions namespace={this.props.repository.namespace} repoName={this.props.repository.name} />
-                )}
-              />
-              <Route
-                exact
-                path={`${url}/code/changeset/:id`}
-                render={() => <ChangesetView repository={repository} />}
-              />
-              <Route
-                path={`${url}/code/sourceext/:extension`}
-                exact={true}
-                render={() => <SourceExtensions repository={repository} />}
-              />
-              <Route
-                path={`${url}/code/sourceext/:extension/:revision/:path*`}
-                render={() => <SourceExtensions repository={repository} baseUrl={`${url}/code/sources`} />}
-              />
-              <Route
-                path={`${url}/code`}
-                render={() => <CodeOverview baseUrl={`${url}/code`} repository={repository} />}
-              />
-              <Route
-                path={`${url}/branch/:branch`}
-                render={() => <BranchRoot repository={repository} baseUrl={`${url}/branch`} />}
-              />
-              <Route
-                path={`${url}/branches`}
-                exact={true}
-                render={() => <BranchesOverview repository={repository} baseUrl={`${url}/branch`} />}
-              />
-              <Route path={`${url}/branches/create`} render={() => <CreateBranch repository={repository} />} />
-              <ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
-            </Switch>
-          </div>
-          <div className="column">
-            <Navigation>
-              <Section label={t("repositoryRoot.menu.navigationLabel")}>
+                <Route path={`${url}/info`} exact component={() => <RepositoryDetails repository={repository} />} />
+                <Route path={`${url}/settings/general`} component={() => <EditRepo repository={repository} />} />
+                <Route
+                  path={`${url}/settings/permissions`}
+                  render={() => (
+                    <Permissions namespace={this.props.repository.namespace} repoName={this.props.repository.name} />
+                  )}
+                />
+                <Route
+                  exact
+                  path={`${url}/code/changeset/:id`}
+                  render={() => <ChangesetView repository={repository} />}
+                />
+                <Route
+                  path={`${url}/code/sourceext/:extension`}
+                  exact={true}
+                  render={() => <SourceExtensions repository={repository} />}
+                />
+                <Route
+                  path={`${url}/code/sourceext/:extension/:revision/:path*`}
+                  render={() => <SourceExtensions repository={repository} baseUrl={`${url}/code/sources`} />}
+                />
+                <Route
+                  path={`${url}/code`}
+                  render={() => <CodeOverview baseUrl={`${url}/code`} repository={repository} />}
+                />
+                <Route
+                  path={`${url}/branch/:branch`}
+                  render={() => <BranchRoot repository={repository} baseUrl={`${url}/branch`} />}
+                />
+                <Route
+                  path={`${url}/branches`}
+                  exact={true}
+                  render={() => <BranchesOverview repository={repository} baseUrl={`${url}/branch`} />}
+                />
+                <Route path={`${url}/branches/create`} render={() => <CreateBranch repository={repository} />} />
+                <ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
+              </Switch>
+            </div>
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
+              <SecondaryNavigation
+                label={t("repositoryRoot.menu.navigationLabel")}
+                onCollapse={() => this.onCollapseRepositoryMenu(!menuCollapsed)}
+                collapsed={menuCollapsed}
+              >
                <ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
                <NavLink
                  to={`${url}/info`}
                  icon="fas fa-info-circle"
                  label={t("repositoryRoot.menu.informationNavLink")}
+                  title={t("repositoryRoot.menu.informationNavLink")}
                />
                <RepositoryNavLink
                  repository={repository}
@@ -186,6 +219,7 @@ class RepositoryRoot extends React.Component<Props> {
                  label={t("repositoryRoot.menu.branchesNavLink")}
                  activeWhenMatch={this.matchesBranches}
                  activeOnlyWhenExact={false}
+                  title={t("repositoryRoot.menu.branchesNavLink")}
                />
                <RepositoryNavLink
                  repository={repository}
@@ -195,18 +229,23 @@ class RepositoryRoot extends React.Component<Props> {
                  label={t("repositoryRoot.menu.sourcesNavLink")}
                  activeWhenMatch={this.matchesCode}
                  activeOnlyWhenExact={false}
+                  title={t("repositoryRoot.menu.sourcesNavLink")}
                />
                <ExtensionPoint name="repository.navigation" props={extensionProps} renderAll={true} />
-                <SubNavigation to={`${url}/settings/general`} label={t("repositoryRoot.menu.settingsNavLink")}>
+                <SubNavigation
+                  to={`${url}/settings/general`}
+                  label={t("repositoryRoot.menu.settingsNavLink")}
+                  title={t("repositoryRoot.menu.settingsNavLink")}
+                >
                  <EditRepoNavLink repository={repository} editUrl={`${url}/settings/general`} />
                  <PermissionsNavLink permissionUrl={`${url}/settings/permissions`} repository={repository} />
                  <ExtensionPoint name="repository.setting" props={extensionProps} renderAll={true} />
                </SubNavigation>
-              </Section>
-            </Navigation>
+              </SecondaryNavigation>
+            </div>
          </div>
-        </div>
-      </Page>
+        </Page>
+      </MenuContext.Provider>
    );
  }
 }
--- a/scm-ui/ui-webapp/src/repos/modules/changesets.test.ts
+++ b/scm-ui/ui-webapp/src/repos/modules/changesets.test.ts
@@ -581,6 +581,31 @@ describe("changesets", () => {
      ]);
    });

+    it("should return always the same changeset array for the given parameters", () => {
+      const state = {
+        changesets: {
+          "foo/bar": {
+            byId: {
+              id2: {
+                id: "id2"
+              },
+              id1: {
+                id: "id1"
+              }
+            },
+            byBranch: {
+              "": {
+                entries: ["id1", "id2"]
+              }
+            }
+          }
+        }
+      };
+      const one = getChangesets(state, repository);
+      const two = getChangesets(state, repository);
+      expect(one).toBe(two);
+    });
+
    it("should return true, when fetching changesets is pending", () => {
      const state = {
        pending: {
@@ -639,5 +664,14 @@ describe("changesets", () => {
      expect(collection.page).toBe(1);
      expect(collection.pageTotal).toBe(10);
    });
+
+    it("should return always the same empty object", () => {
+      const state = {
+        changesets: {}
+      };
+      const one = selectListAsCollection(state, repository);
+      const two = selectListAsCollection(state, repository);
+      expect(one).toBe(two);
+    });
  });
 });
--- a/scm-ui/ui-webapp/src/repos/modules/changesets.ts
+++ b/scm-ui/ui-webapp/src/repos/modules/changesets.ts
@@ -3,6 +3,7 @@ import { apiClient, urls } from "@scm-manager/ui-components";
 import { isPending } from "../../modules/pending";
 import { getFailure } from "../../modules/failure";
 import { Action, Branch, PagedCollection, Repository } from "@scm-manager/ui-types";
+import memoizeOne from "memoize-one";

 export const FETCH_CHANGESETS = "scm/repos/FETCH_CHANGESETS";
 export const FETCH_CHANGESETS_PENDING = `${FETCH_CHANGESETS}_${PENDING_SUFFIX}`;
@@ -254,10 +255,15 @@ export function getChangesets(state: object, repository: Repository, branch?: Br
    return null;
  }

+  return collectChangesets(stateRoot, changesets);
+}
+const mapChangesets = (stateRoot, changesets) => {
  return changesets.entries.map((id: string) => {
    return stateRoot.byId[id];
  });
-}
+};
+
+const collectChangesets = memoizeOne(mapChangesets);

 export function getChangeset(state: object, repository: Repository, id: string) {
  const key = createItemId(repository);
@@ -291,6 +297,8 @@ export function getFetchChangesetsFailure(state: object, repository: Repository,
  return getFailure(state, FETCH_CHANGESETS, createItemId(repository, branch));
 }

+const EMPTY = {};
+
 const selectList = (state: object, repository: Repository, branch?: Branch) => {
  const repoId = createItemId(repository);

@@ -302,7 +310,7 @@ const selectList = (state: object, repository: Repository, branch?: Branch) => {
      return repoState.byBranch[branchName];
    }
  }
-  return {};
+  return EMPTY;
 };

 const selectListEntry = (state: object, repository: Repository, branch?: Branch): object => {
@@ -310,7 +318,7 @@ const selectListEntry = (state: object, repository: Repository, branch?: Branch)
  if (list.entry) {
    return list.entry;
  }
-  return {};
+  return EMPTY;
 };

 export const selectListAsCollection = (state: object, repository: Repository, branch?: Branch): PagedCollection => {
--- a/scm-ui/ui-webapp/src/repos/modules/repos.ts
+++ b/scm-ui/ui-webapp/src/repos/modules/repos.ts
@@ -3,6 +3,7 @@ import * as types from "../../modules/types";
 import { Action, Repository, RepositoryCollection } from "@scm-manager/ui-types";
 import { isPending } from "../../modules/pending";
 import { getFailure } from "../../modules/failure";
+import React from "react";

 export const FETCH_REPOS = "scm/repos/FETCH_REPOS";
 export const FETCH_REPOS_PENDING = `${FETCH_REPOS}_${types.PENDING_SUFFIX}`;
@@ -155,7 +156,12 @@ export function fetchRepoFailure(namespace: string, name: string, error: Error):

 // create repo

-export function createRepo(link: string, repository: Repository, initRepository: boolean, callback?: (repo: Repository) => void) {
+export function createRepo(
+  link: string,
+  repository: Repository,
+  initRepository: boolean,
+  callback?: (repo: Repository) => void
+) {
  return function(dispatch: any) {
    dispatch(createRepoPending());
    const repoLink = initRepository ? link + "?initialize=true" : link;