update RepoRoles Pagination

scm-ui/src/config/containers/Config.js

@@ -1,7 +1,7 @@
 // @flow
 import React from "react";
 import { translate } from "react-i18next";
-import { Route } from "react-router";
+import { Route, Switch } from "react-router-dom";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import type { History } from "history";
 import { connect } from "react-redux";
@@ -54,6 +54,7 @@ class Config extends React.Component<Props> {
       <Page>
         <div className="columns">
           <div className="column is-three-quarters">
+            <Switch>
             <Route path={url} exact component={GlobalConfig} />
             <Route
               path={`${url}/role/:role`}
@@ -68,11 +69,17 @@ class Config extends React.Component<Props> {
               path={`${url}/roles/create`}
               render={() => <CreateRepositoryRole disabled={false} history={this.props.history} />}
             />
+            <Route
+              path={`${url}/roles/:page`}
+              exact
+              render={() => <RepositoryRoles baseUrl={`${url}/roles/:page`} />}
+            />
             <ExtensionPoint
               name="config.route"
               props={extensionProps}
               renderAll={true}
             />
+            </Switch>
           </div>
           <div className="column is-one-quarter">
             <Navigation>
@@ -82,7 +89,7 @@ class Config extends React.Component<Props> {
                   label={t("config.globalConfigurationNavLink")}
                 />
                 <NavLink
-                  to={`${url}/roles`}
+                  to={`${url}/roles/`}
                   label={t("repositoryRole.navLink")}
                   activeWhenMatch={this.matchesRoles}
                 />

scm-ui/src/config/roles/containers/EditRepositoryRole.js

@@ -25,7 +25,7 @@ class EditRepositoryRole extends React.Component<Props> {
 
   repositoryRoleUpdated = (role: Role) => {
     const { history } = this.props;
-    history.push("/config/roles");
+    history.push("/config/roles/");
   };
 
   updateRepositoryRole = (role: Role) => {

scm-ui/src/config/roles/containers/RepositoryRoles.js

@@ -47,6 +47,27 @@ class RepositoryRoles extends React.Component<Props> {
     fetchRolesByPage(rolesLink, page);
   }
 
+  componentDidUpdate = (prevProps: Props) => {
+    const {
+      loading,
+      list,
+      page,
+      rolesLink,
+      location,
+      fetchRolesByPage
+    } = this.props;
+    if (list && page && !loading) {
+      const statePage: number = list.page + 1;
+      if (page !== statePage || prevProps.location.search !== location.search) {
+        fetchRolesByPage(
+          rolesLink,
+          page,
+          urls.getQueryStringFromLocation(location)
+        );
+      }
+    }
+  };
+
   render() {
     const { t, loading } = this.props;
 

scm-ui/src/config/roles/containers/SingleRepositoryRole.js

@@ -64,7 +64,7 @@ class SingleRepositoryRole extends React.Component<Props> {
           subtitle={t("repositoryRole.errorSubtitle")}
           error={error}
         />
-      );0
+      );
     }
 
     if (!role || loading) {