create new codeSection // add actionBar to codeSection // change routes for sources and changesets

2025-11-15 09:46:16 +01:00 · 2020-01-07 10:30:46 +01:00
parent 5405a2b3c8
commit 20c00e7222
13 changed files with 251 additions and 126 deletions
--- a/scm-ui/ui-webapp/src/repos/codeSection/components/CodeViewSwitcher.tsx
+++ b/scm-ui/ui-webapp/src/repos/codeSection/components/CodeViewSwitcher.tsx
@@ -0,0 +1,38 @@
+import React, { FC } from "react";
+import styled from "styled-components";
+import Button from "@scm-manager/ui-components/src/buttons/Button";
+import ButtonAddons from "@scm-manager/ui-components/src/buttons/ButtonAddons";
+import { useTranslation } from "react-i18next";
+
+const SmallButton = styled(Button).attrs(() => ({}))`
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+`;
+
+type Props = {
+  url: string;
+};
+
+const CodeViewSwitcher: FC<Props> = ({ url }) => {
+  const [t] = useTranslation("repos");
+
+  return (
+    <ButtonAddons>
+      <SmallButton
+        label={t("code.commits")}
+        icon="fa fa-exchange-alt"
+        color={url.includes("/code/changeset") ? "link is-selected" : undefined}
+        link={url.replace("/code/sources", "/code/changesets")}
+      />
+      <SmallButton
+        label={t("code.sources")}
+        icon="fa fa-code"
+        color={url.includes("/code/sources") ? "link is-selected" : undefined}
+        link={url.replace("/code/changesets", "/code/sources")}
+      />
+    </ButtonAddons>
+  );
+};
+
+export default CodeViewSwitcher;
--- a/scm-ui/ui-webapp/src/repos/codeSection/containers/CodeSectionOverview.tsx
+++ b/scm-ui/ui-webapp/src/repos/codeSection/containers/CodeSectionOverview.tsx
@@ -0,0 +1,155 @@
+import React from "react";
+import styled from "styled-components";
+import { Route, withRouter, RouteComponentProps } from "react-router-dom";
+import ChangesetView from "../../containers/ChangesetView";
+import Sources from "../../sources/containers/Sources";
+import SourceExtensions from "../../sources/containers/SourceExtensions";
+import ChangesetsRoot from "../../containers/ChangesetsRoot";
+import { Repository, Branch } from "@scm-manager/ui-types";
+import { BranchSelector, Level } from "@scm-manager/ui-components";
+import CodeViewSwitcher from "../components/CodeViewSwitcher";
+import { compose } from "redux";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import {
+  fetchBranches,
+  getBranches,
+  getFetchBranchesFailure,
+  isFetchBranchesPending
+} from "../../branches/modules/branches";
+
+type Props = RouteComponentProps &
+  WithTranslation & {
+    repository: Repository;
+    baseUrl: string;
+
+    // State props
+    branches: Branch[];
+    loading: boolean;
+    error: Error;
+    selectedView: string;
+    selectedBranch: string;
+
+    // Dispatch props
+    fetchBranches: (p: Repository) => void;
+  };
+
+const CodeSectionActionBar = styled.div.attrs(() => ({}))`
+  background-color: whitesmoke;
+  border: 1px solid #dbdbdb;
+  border-radius: 4px;
+  color: #363636;
+  font-size: 1.25em;
+  font-weight: 300;
+  line-height: 1.25;
+  padding: 0.5em 0.75em;
+  margin-bottom: 1em;
+`;
+
+class CodeSectionOverview extends React.Component<Props> {
+  componentDidMount() {
+    const { repository } = this.props;
+    this.props.fetchBranches(repository);
+  }
+
+  findSelectedBranch = () => {
+    const { selectedBranch, branches } = this.props;
+    return branches?.find((branch: Branch) => branch.name === selectedBranch);
+  };
+
+  branchSelected = (branch?: Branch) => {
+    let url;
+    if (branch) {
+      url = `${this.props.baseUrl}/${this.props.selectedView}/${encodeURIComponent(branch.name)}`;
+    } else {
+      url = `${this.props.baseUrl}/${this.props.selectedView}/`;
+    }
+    this.props.history.push(url);
+  };
+
+  render() {
+    const { repository, baseUrl, branches, t } = this.props;
+    const url = baseUrl;
+
+    return (
+      <div>
+        <CodeSectionActionBar>
+          <Level
+            left={
+              branches?.length > 0 && (
+                <BranchSelector
+                  label={t("code.branchSelector")}
+                  branches={branches}
+                  selectedBranch={this.props.selectedBranch}
+                  selected={(b: Branch) => {
+                    this.branchSelected(b);
+                  }}
+                />
+              )
+            }
+            right={<CodeViewSwitcher url={this.props.location.pathname} />}
+          />
+        </CodeSectionActionBar>
+        <Route exact path={`${url}/changeset/:id`} render={() => <ChangesetView repository={repository} />} />
+        <Route
+          path={`${url}/sources`}
+          exact={true}
+          render={() => <Sources repository={repository} baseUrl={`${url}/sources`} />}
+        />
+        <Route
+          path={`${url}/sources/:revision/:path*`}
+          render={() => <Sources repository={repository} baseUrl={`${url}/sources`} />}
+        />
+        <Route
+          path={`${url}/sourceext/:extension`}
+          exact={true}
+          render={() => <SourceExtensions repository={repository} />}
+        />
+        <Route
+          path={`${url}/sourceext/:extension/:revision/:path*`}
+          render={() => <SourceExtensions repository={repository} />}
+        />
+        <Route
+          path={`${url}/changesets`}
+          exact={true}
+          render={() => <ChangesetsRoot repository={repository} baseUrl={`${url}/changesets`} />}
+        />
+        <Route
+          path={`${url}/changesets/:branch/`}
+          render={() => <ChangesetsRoot repository={repository} baseUrl={`${url}/changesets`} />}
+        />
+      </div>
+    );
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchBranches: (repo: Repository) => {
+      dispatch(fetchBranches(repo));
+    }
+  };
+};
+
+const mapStateToProps = (state: any, ownProps: Props) => {
+  const { repository, location } = ownProps;
+  const loading = isFetchBranchesPending(state, repository);
+  const error = getFetchBranchesFailure(state, repository);
+  const branches = getBranches(state, repository);
+  const selectedView = decodeURIComponent(location.pathname.split("/")[5]);
+  const selectedBranch = decodeURIComponent(location.pathname.split("/")[6]);
+
+  return {
+    loading,
+    error,
+    branches,
+    selectedView,
+    selectedBranch
+  };
+};
+
+export default compose(
+  withRouter,
+  withTranslation("repos"),
+  connect(mapStateToProps, mapDispatchToProps)
+)(CodeSectionOverview);
--- a/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.tsx
@@ -9,6 +9,7 @@ type Props = {
  linkName: string;
  activeWhenMatch?: (route: any) => boolean;
  activeOnlyWhenExact: boolean;
+  icon?: string;
 };

 /**
--- a/scm-ui/ui-webapp/src/repos/containers/Changesets.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/Changesets.tsx
@@ -93,7 +93,7 @@ class Changesets extends React.Component<Props> {
  };
 }

-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: any) => {
  return {
    fetchChangesets: (repo: Repository, branch: Branch, page: number) => {
      dispatch(fetchChangesets(repo, branch, page));
@@ -118,11 +118,4 @@ const mapStateToProps = (state: any, ownProps: Props) => {
  };
 };

-export default compose(
-  withTranslation("repos"),
-  withRouter,
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )
-)(Changesets);
+export default compose(withTranslation("repos"), withRouter, connect(mapStateToProps, mapDispatchToProps))(Changesets);
--- a/scm-ui/ui-webapp/src/repos/containers/ChangesetsRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/ChangesetsRoot.tsx
@@ -15,10 +15,8 @@ import {

 type Props = WithTranslation & {
  repository: Repository;
-  baseUrl: string;
  selected: string;
-  baseUrlWithBranch: string;
-  baseUrlWithoutBranch: string;
+  baseUrl: string;

  // State props
  branches: Branch[];
@@ -66,9 +64,9 @@ class ChangesetsRoot extends React.Component<Props> {
  branchSelected = (branch?: Branch) => {
    let url;
    if (branch) {
-      url = `${this.props.baseUrlWithBranch}/${encodeURIComponent(branch.name)}/changesets/`;
+      url = `${this.props.baseUrl}/${encodeURIComponent(branch.name)}`;
    } else {
-      url = `${this.props.baseUrlWithoutBranch}/`;
+      url = `${this.props.baseUrl}/`;
    }
    this.props.history.push(url);
  };
@@ -99,7 +97,6 @@ class ChangesetsRoot extends React.Component<Props> {

    return (
      <div className="panel">
-        {this.renderBranchSelector()}
        <Route path={`${url}/:page?`} component={() => changesets} />
      </div>
    );
@@ -125,7 +122,7 @@ class ChangesetsRoot extends React.Component<Props> {
  };
 }

-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: any) => {
  return {
    fetchBranches: (repo: Repository) => {
      dispatch(fetchBranches(repo));
@@ -151,8 +148,5 @@ const mapStateToProps = (state: any, ownProps: Props) => {
 export default compose(
  withRouter,
  withTranslation("repos"),
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )
+  connect(mapStateToProps, mapDispatchToProps)
 )(ChangesetsRoot);
--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
@@ -14,13 +14,10 @@ import CreateBranch from "../branches/containers/CreateBranch";
 import Permissions from "../permissions/containers/Permissions";
 import EditRepoNavLink from "../components/EditRepoNavLink";
 import BranchRoot from "../branches/containers/BranchRoot";
-import ChangesetsRoot from "./ChangesetsRoot";
-import ChangesetView from "./ChangesetView";
 import PermissionsNavLink from "../components/PermissionsNavLink";
-import Sources from "../sources/containers/Sources";
 import RepositoryNavLink from "../components/RepositoryNavLink";
 import { getLinks, getRepositoriesLink } from "../../modules/indexResource";
-import SourceExtensions from "../sources/containers/SourceExtensions";
+import CodeSectionOverview from "../codeSection/containers/CodeSectionOverview";

 type Props = WithTranslation & {
  namespace: string;
@@ -62,16 +59,30 @@ class RepositoryRoot extends React.Component<Props> {
    return route.location.pathname.match(regex);
  };

-  matchesChangesets = (route: any) => {
+  matchesCode = (route: any) => {
    const url = this.matchedUrl();
-    const regex = new RegExp(`${url}(/branch)?/?[^/]*/changesets?.*`);
+    const regex = new RegExp(`${url}(/code)/.*`);
    return route.location.pathname.match(regex);
  };

-  matchesSources = (route: any) => {
-    const url = this.matchedUrl();
-    const regex = new RegExp(`${url}(/sources|/sourceext)/.*`);
-    return route.location.pathname.match(regex);
+  getCodeLinkname = () => {
+    const { repository } = this.props;
+    if (repository?._links?.sources) {
+      return "sources";
+    }
+    if (repository?._links?.changesets) {
+      return "changesets";
+    }
+    return "";
+  };
+
+  evaluateDestinationForCodeLink = () => {
+    const { repository } = this.props;
+    let url = `${this.matchedUrl()}/code`;
+    if (repository?._links?.sources) {
+      return `${url}/sources/`;
+    }
+    return `${url}/changesets`;
  };

  render() {
@@ -117,44 +128,9 @@ class RepositoryRoot extends React.Component<Props> {
                  <Permissions namespace={this.props.repository.namespace} repoName={this.props.repository.name} />
                )}
              />
-              <Route exact path={`${url}/changeset/:id`} render={() => <ChangesetView repository={repository} />} />
              <Route
-                path={`${url}/sources`}
-                exact={true}
-                render={() => <Sources repository={repository} baseUrl={`${url}/sources`} />}
-              />
-              <Route
-                path={`${url}/sources/:revision/:path*`}
-                render={() => <Sources repository={repository} baseUrl={`${url}/sources`} />}
-              />
-              <Route
-                path={`${url}/sourceext/:extension`}
-                exact={true}
-                render={() => <SourceExtensions repository={repository} />}
-              />
-              <Route
-                path={`${url}/sourceext/:extension/:revision/:path*`}
-                render={() => <SourceExtensions repository={repository} />}
-              />
-              <Route
-                path={`${url}/changesets`}
-                render={() => (
-                  <ChangesetsRoot
-                    repository={repository}
-                    baseUrlWithBranch={`${url}/branch`}
-                    baseUrlWithoutBranch={`${url}/changesets`}
-                  />
-                )}
-              />
-              <Route
-                path={`${url}/branch/:branch/changesets`}
-                render={() => (
-                  <ChangesetsRoot
-                    repository={repository}
-                    baseUrlWithBranch={`${url}/branch`}
-                    baseUrlWithoutBranch={`${url}/changesets`}
-                  />
-                )}
+                path={`${url}/code`}
+                render={() => <CodeSectionOverview baseUrl={`${url}/code`} repository={repository} />}
              />
              <Route
                path={`${url}/branch/:branch`}
@@ -189,20 +165,11 @@ class RepositoryRoot extends React.Component<Props> {
                />
                <RepositoryNavLink
                  repository={repository}
-                  linkName="changesets"
-                  to={`${url}/changesets/`}
-                  icon="fas fa-exchange-alt"
-                  label={t("repositoryRoot.menu.historyNavLink")}
-                  activeWhenMatch={this.matchesChangesets}
-                  activeOnlyWhenExact={false}
-                />
-                <RepositoryNavLink
-                  repository={repository}
-                  linkName="sources"
-                  to={`${url}/sources`}
+                  linkName={this.getCodeLinkname()}
+                  to={this.evaluateDestinationForCodeLink()}
                  icon="fas fa-code"
                  label={t("repositoryRoot.menu.sourcesNavLink")}
-                  activeWhenMatch={this.matchesSources}
+                  activeWhenMatch={this.matchesCode}
                  activeOnlyWhenExact={false}
                />
                <ExtensionPoint name="repository.navigation" props={extensionProps} renderAll={true} />
@@ -246,7 +213,4 @@ const mapDispatchToProps = dispatch => {
  };
 };

-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withTranslation("repos")(RepositoryRoot));
+export default connect(mapStateToProps, mapDispatchToProps)(withTranslation("repos")(RepositoryRoot));
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Sources.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Sources.tsx
@@ -13,7 +13,7 @@ import {
 } from "../../branches/modules/branches";
 import { compose } from "redux";
 import Content from "./Content";
-import {fetchSources, getSources, isDirectory} from "../modules/sources";
+import { fetchSources, getSources, isDirectory } from "../modules/sources";

 type Props = WithTranslation & {
  repository: Repository;
@@ -63,8 +63,6 @@ class Sources extends React.Component<Props, State> {
    if (prevProps.revision !== revision || prevProps.path !== path) {
      fetchSources(repository, this.decodeRevision(revision), path);
    }
-
-    this.redirectToDefaultBranch();
  }

  decodeRevision = (revision: string) => {
@@ -122,7 +120,6 @@ class Sources extends React.Component<Props, State> {
    if (currentFileIsDirectory) {
      return (
        <div className="panel">
-          {this.renderBranchSelector()}
          {this.renderBreadcrumb()}
          <FileTree repository={repository} revision={revision} path={path} baseUrl={baseUrl} />
        </div>
@@ -132,26 +129,6 @@ class Sources extends React.Component<Props, State> {
    }
  }

-  renderBranchSelector = () => {
-    const { branches, revision, t } = this.props;
-
-    if (branches) {
-      return (
-        <div className="panel-heading">
-          <BranchSelector
-            branches={branches}
-            selectedBranch={revision}
-            label={t("changesets.branchSelectorLabel")}
-            selected={(b: Branch) => {
-              this.branchSelected(b);
-            }}
-          />
-        </div>
-      );
-    }
-    return null;
-  };
-
  renderBreadcrumb = () => {
    const { revision, path, baseUrl, branches, sources, repository } = this.props;
    const { selectedBranch } = this.state;
@@ -163,9 +140,7 @@ class Sources extends React.Component<Props, State> {
        path={path}
        baseUrl={baseUrl}
        branch={selectedBranch}
-        defaultBranch={
-          branches && branches.filter(b => b.defaultBranch === true)[0]
-        }
+        defaultBranch={branches && branches.filter(b => b.defaultBranch === true)[0]}
        sources={sources}
      />
    );
@@ -207,11 +182,4 @@ const mapDispatchToProps = dispatch => {
  };
 };

-export default compose(
-  withTranslation("repos"),
-  withRouter,
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )
-)(Sources);
+export default compose(withTranslation("repos"), withRouter, connect(mapStateToProps, mapDispatchToProps))(Sources);