Extract common function 'matchedUrl'

scm-ui/ui-webapp/src/admin/containers/Admin.tsx

@@ -55,20 +55,17 @@ type Props = RouteComponentProps &
   };
 
 class Admin extends React.Component<Props> {
-  matchedUrl = () => {
-    return urls.stripEndingSlash(this.props.match.url);
-  };
 
   matchesRoles = (route: any) => {
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
     const regex = new RegExp(`${url}/role/`);
     return route.location.pathname.match(regex);
   };
 
   render() {
-    const { links, availablePluginsLink, installedPluginsLink, t } = this.props;
+    const { links, availablePluginsLink, installedPluginsLink, match, t } = this.props;
 
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
     const extensionProps = {
       links,
       url

scm-ui/ui-webapp/src/admin/roles/containers/SingleRepositoryRole.tsx

@@ -23,7 +23,7 @@
  */
 import React from "react";
 import { connect } from "react-redux";
-import { Route, withRouter } from "react-router-dom";
+import { Route, RouteComponentProps, withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
@@ -36,31 +36,27 @@ import EditRepositoryRole from "./EditRepositoryRole";
 import { compose } from "redux";
 import { urls } from "@scm-manager/ui-components";
 
-type Props = WithTranslation & {
-  roleName: string;
-  role: RepositoryRole;
-  loading: boolean;
-  error: Error;
-  repositoryRolesLink: string;
-  disabled: boolean;
+type Props = WithTranslation &
+  RouteComponentProps & {
+    roleName: string;
+    role: RepositoryRole;
+    loading: boolean;
+    error: Error;
+    repositoryRolesLink: string;
+    disabled: boolean;
 
-  // dispatcher function
-  fetchRoleByName: (p1: string, p2: string) => void;
+    // dispatcher function
+    fetchRoleByName: (p1: string, p2: string) => void;
 
-  // context objects
-  match: any;
-  history: History;
-};
+    // context objects
+    history: History;
+  };
 
 class SingleRepositoryRole extends React.Component<Props> {
   componentDidMount() {
     this.props.fetchRoleByName(this.props.repositoryRolesLink, this.props.roleName);
   }
 
-  matchedUrl = () => {
-    return urls.stripEndingSlash(this.props.match.url);
-  };
-
   render() {
     const { t, loading, error, role } = this.props;
 
@@ -74,7 +70,7 @@ class SingleRepositoryRole extends React.Component<Props> {
       return <Loading />;
     }
 
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
 
     const extensionProps = {
       role,

scm-ui/ui-webapp/src/containers/Profile.tsx

@@ -55,10 +55,6 @@ type Props = RouteComponentProps &
   };
 
 class Profile extends React.Component<Props> {
-  matchedUrl = () => {
-    return urls.stripEndingSlash(this.props.match.url);
-  };
-
   mayChangePassword = () => {
     const { me } = this.props;
     return !!me?._links?.password;
@@ -70,7 +66,7 @@ class Profile extends React.Component<Props> {
   };
 
   render() {
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
 
     const { me, t } = this.props;
 

scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx

@@ -64,10 +64,6 @@ class SingleGroup extends React.Component<Props> {
     this.props.fetchGroupByName(this.props.groupLink, this.props.name);
   }
 
-  matchedUrl = () => {
-    return urls.stripEndingSlash(this.props.match.url);
-  };
-
   render() {
     const { t, loading, error, group } = this.props;
 
@@ -79,7 +75,7 @@ class SingleGroup extends React.Component<Props> {
       return <Loading />;
     }
 
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
 
     const extensionProps = {
       group,

scm-ui/ui-webapp/src/repos/branches/containers/BranchRoot.tsx

@@ -55,14 +55,10 @@ class BranchRoot extends React.Component<Props> {
     fetchBranch(repository, branchName);
   }
 
-  matchedUrl = () => {
-    return urls.stripEndingSlash(this.props.match.url);
-  };
-
   render() {
     const { repository, branch, loading, error, match, location } = this.props;
 
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
 
     if (error) {
       if (error instanceof NotFoundError && queryString.parse(location.search).create === "true") {

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

@@ -23,7 +23,7 @@
  */
 import React from "react";
 import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
+import { RouteComponentProps, withRouter } from "react-router-dom";
 import RepositoryForm from "../components/form";
 import { Repository, Links } from "@scm-manager/ui-types";
 import { getModifyRepoFailure, isModifyRepoPending, modifyRepo, modifyRepoReset } from "../modules/repos";
@@ -35,7 +35,7 @@ import DangerZone from "./DangerZone";
 import { getLinks } from "../../modules/indexResource";
 import { urls } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = RouteComponentProps & {
   loading: boolean;
   error: Error;
   indexLinks: Links;
@@ -46,7 +46,6 @@ type Props = {
   // context props
   repository: Repository;
   history: History;
-  match: any;
 };
 
 class EditRepo extends React.Component<Props> {
@@ -60,14 +59,10 @@ class EditRepo extends React.Component<Props> {
     history.push(`/repo/${repository.namespace}/${repository.name}`);
   };
 
-  matchedUrl = () => {
-    return urls.stripEndingSlash(this.props.match.url);
-  };
-
   render() {
     const { loading, error, repository, indexLinks } = this.props;
 
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
 
     const extensionProps = {
       repository,

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

@@ -85,24 +85,20 @@ class RepositoryRoot extends React.Component<Props> {
     }
   }
 
-  matchedUrl = () => {
-    return urls.stripEndingSlash(this.props.match.url);
-  };
-
   matchesBranches = (route: any) => {
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
     const regex = new RegExp(`${url}/branch/.+/info`);
     return route.location.pathname.match(regex);
   };
 
   matchesTags = (route: any) => {
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
     const regex = new RegExp(`${url}/tag/.+/info`);
     return route.location.pathname.match(regex);
   };
 
   matchesCode = (route: any) => {
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
     const regex = new RegExp(`${url}(/code)/.*`);
     return route.location.pathname.match(regex);
   };
@@ -120,7 +116,7 @@ class RepositoryRoot extends React.Component<Props> {
 
   evaluateDestinationForCodeLink = () => {
     const { repository } = this.props;
-    const url = `${this.matchedUrl()}/code`;
+    const url = `${urls.matchedUrl(this.props)}/code`;
     if (repository?._links?.sources) {
       return `${url}/sources/`;
     }
@@ -140,7 +136,7 @@ class RepositoryRoot extends React.Component<Props> {
       return <Loading />;
     }
 
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
 
     const extensionProps = {
       repository,

scm-ui/ui-webapp/src/repos/namespaces/containers/NamespaceRoot.tsx

@@ -43,6 +43,7 @@ import {
 import Permissions from "../../permissions/containers/Permissions";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import PermissionsNavLink from "./PermissionsNavLink";
+import { urls } from "@scm-manager/ui-components";
 
 type Props = RouteComponentProps &
   WithTranslation & {
@@ -62,20 +63,9 @@ class NamespaceRoot extends React.Component<Props> {
     fetchNamespace(namespacesLink, namespaceName);
   }
 
-  stripEndingSlash = (url: string) => {
-    if (url.endsWith("/")) {
-      return url.substring(0, url.length - 1);
-    }
-    return url;
-  };
-
-  matchedUrl = () => {
-    return this.stripEndingSlash(this.props.match.url);
-  };
-
   render() {
     const { loading, error, namespaceName, namespace, t } = this.props;
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
 
     const extensionProps = {
       namespace,

scm-ui/ui-webapp/src/repos/tags/container/TagRoot.tsx

@@ -66,10 +66,6 @@ const TagRoot: FC<Props> = ({ repository, baseUrl }) => {
     }
   }, [tags]);
 
-  const matchedUrl = () => {
-    return urls.stripEndingSlash(match.url);
-  };
-
   if (error) {
     return <ErrorNotification error={error} />;
   }
@@ -78,7 +74,7 @@ const TagRoot: FC<Props> = ({ repository, baseUrl }) => {
     return <Loading />;
   }
 
-  const url = matchedUrl();
+  const url = urls.matchedUrlFromMatch(match);
 
   return (
     <Switch>

scm-ui/ui-webapp/src/users/containers/SingleUser.tsx

@@ -66,10 +66,6 @@ class SingleUser extends React.Component<Props> {
     this.props.fetchUserByName(this.props.usersLink, this.props.name);
   }
 
-  matchedUrl = () => {
-    return urls.stripEndingSlash(this.props.match.url);
-  };
-
   render() {
     const { t, loading, error, user } = this.props;
 
@@ -81,7 +77,7 @@ class SingleUser extends React.Component<Props> {
       return <Loading />;
     }
 
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
 
     const extensionProps = {
       user,