fix changesets routes for pagination

scm-ui/ui-webapp/src/repos/codeSection/components/CodeViewSwitcher.tsx

@@ -1,46 +1,52 @@
 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 { Button, ButtonAddons } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
+import { Branch } from "@scm-manager/ui-types";
 
 const SmallButton = styled(Button).attrs(() => ({}))`
   border-radius: 4px;
-  font-size: 0.75rem;
-  font-weight: 500;
+  font-size: 1rem;
+  font-weight: 600;
+`;
+
+const ButtonAddonsMarginRight = styled(ButtonAddons)`
+  margin-right: -0.2em;
 `;
 
 type Props = {
   url: string;
+  branches: Branch[];
 };
 
-const CodeViewSwitcher: FC<Props> = ({ url }) => {
+const CodeViewSwitcher: FC<Props> = ({ url, branches }) => {
   const [t] = useTranslation("repos");
 
-  const createDestinationUrl = (destination: string, removePath: boolean) => {
+  const createDestinationUrl = (destination: string, suffix?: string) => {
     let splittedUrl = url.split("/");
     splittedUrl[5] = destination;
-    if (removePath) {
-      splittedUrl.splice(7, splittedUrl.length);
+    splittedUrl.splice(7, splittedUrl.length);
+    if (suffix) {
+      splittedUrl.push(suffix);
     }
     return splittedUrl.join("/");
   };
 
   return (
-    <ButtonAddons>
+    <ButtonAddonsMarginRight>
       <SmallButton
         label={t("code.commits")}
         icon="fa fa-exchange-alt"
-        color={url.includes("/code/changesets") ? "link is-selected" : undefined}
-        link={createDestinationUrl("changesets", true)}
+        color={url.includes("/code/branch/") || url.includes("/code/changesets/") ? "link is-selected" : undefined}
+        link={branches ? createDestinationUrl("branch", "changesets/") : createDestinationUrl("changesets")}
       />
       <SmallButton
         label={t("code.sources")}
         icon="fa fa-code"
         color={url.includes("/code/sources") ? "link is-selected" : undefined}
-        link={createDestinationUrl("sources", false)}
+        link={createDestinationUrl("sources")}
       />
-    </ButtonAddons>
+    </ButtonAddonsMarginRight>
   );
 };
 

scm-ui/ui-webapp/src/repos/codeSection/containers/CodeOverview.tsx

@@ -25,7 +25,6 @@ type Props = RouteComponentProps &
     branches: Branch[];
     error: Error;
     loading: boolean;
-    selectedView: string;
     selectedBranch: string;
 
     // Dispatch props
@@ -64,10 +63,22 @@ class CodeOverview extends React.Component<Props> {
 
   branchSelected = (branch?: Branch) => {
     let splittedUrl = this.props.location.pathname.split("/");
-    if (branch) {
-      splittedUrl[6] = encodeURIComponent(branch.name);
+    if (
+      this.props.location.pathname.includes("/code/sources/") ||
+      this.props.location.pathname.includes("/code/branch/")
+    ) {
+      if (branch) {
+        splittedUrl[6] = encodeURIComponent(branch.name);
+      }
+      this.props.history.push(splittedUrl.join("/"));
+    }
+    if (this.props.location.pathname.includes("/code/changesets/")) {
+      this.props.history.push(
+        `${splittedUrl[0]}/${splittedUrl[1]}/${splittedUrl[2]}/${splittedUrl[3]}/${
+          splittedUrl[4]
+        }/branch/${encodeURIComponent(branch.name)}/${splittedUrl[5]}/`
+      );
     }
-    this.props.history.push(splittedUrl.join("/"));
   };
 
   render() {
@@ -96,7 +107,7 @@ class CodeOverview extends React.Component<Props> {
                 onSelectBranch={this.branchSelected}
               />
             }
-            right={<CodeViewSwitcher url={this.props.location.pathname} />}
+            right={<CodeViewSwitcher url={this.props.location.pathname} branches={branches} />}
           />
         </CodeActionBar>
         <Route
@@ -110,11 +121,10 @@ class CodeOverview extends React.Component<Props> {
         />
         <Route
           path={`${url}/changesets`}
-          exact={true}
           render={() => <ChangesetsRoot repository={repository} baseUrl={`${url}/changesets`} />}
         />
         <Route
-          path={`${url}/changesets/:branch/`}
+          path={`${url}/branch/:branch/changesets/`}
           render={() => <ChangesetsRoot repository={repository} baseUrl={`${url}/changesets`} />}
         />
       </div>
@@ -135,14 +145,13 @@ const mapStateToProps = (state: any, ownProps: Props) => {
   const error = getFetchBranchesFailure(state, repository);
   const loading = isFetchBranchesPending(state, repository);
   const branches = getBranches(state, repository);
-  const selectedView = decodeURIComponent(location.pathname.split("/")[5]);
-  const branchFromURL = decodeURIComponent(location.pathname.split("/")[6]);
+  const branchFromURL =
+    !location.pathname.includes("/code/changesets/") && decodeURIComponent(location.pathname.split("/")[6]);
   const selectedBranch = branchFromURL && branchFromURL !== "undefined" ? branchFromURL : "";
   return {
     error,
     loading,
     branches,
-    selectedView,
     selectedBranch
   };
 };

scm-ui/ui-webapp/src/repos/components/list/RepositoryEntry.tsx

@@ -22,14 +22,14 @@ class RepositoryEntry extends React.Component<Props> {
 
   renderChangesetsLink = (repository: Repository, repositoryLink: string) => {
     if (repository._links["changesets"]) {
-      return <RepositoryEntryLink icon="exchange-alt" to={repositoryLink + "/code/changesets"} />;
+      return <RepositoryEntryLink icon="exchange-alt" to={repositoryLink + "/code/changesets/"} />;
     }
     return null;
   };
 
   renderSourcesLink = (repository: Repository, repositoryLink: string) => {
     if (repository._links["sources"]) {
-      return <RepositoryEntryLink icon="code" to={repositoryLink + "/code/sources"} />;
+      return <RepositoryEntryLink icon="code" to={repositoryLink + "/code/sources/"} />;
     }
     return null;
   };

scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx

@@ -126,7 +126,7 @@ class RepositoryRoot extends React.Component<Props> {
               <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/changesets/:branch`} />
+              <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