@scm-manager/ui-components 4.0.0-REACT19 → 4.0.0-REACT19-20250910-113025

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "4.0.0-REACT19",
+  "version": "4.0.0-REACT19-20250910-113025",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -33,14 +33,14 @@
   },
   "devDependencies": {
     "@scm-manager/babel-preset": "^2.13.1",
-    "@scm-manager/eslint-config": "^2.17.0",
+    "@scm-manager/eslint-config": "^2.18.2",
     "@scm-manager/jest-preset": "^2.15.0-alpha1",
     "@scm-manager/prettier-config": "^2.12.0",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-shortcuts": "4.0.0-REACT19",
-    "@scm-manager/ui-syntaxhighlighting": "4.0.0-REACT19",
-    "@scm-manager/ui-text": "4.0.0-REACT19",
-    "@scm-manager/ui-types": "4.0.0-REACT19",
+    "@scm-manager/ui-shortcuts": "4.0.0-REACT19-20250910-113025",
+    "@scm-manager/ui-syntaxhighlighting": "4.0.0-REACT19-20250910-113025",
+    "@scm-manager/ui-text": "4.0.0-REACT19-20250910-113025",
+    "@scm-manager/ui-types": "4.0.0-REACT19-20250910-113025",
     "@storybook/addon-actions": "^9.0.8",
     "@storybook/addon-docs": "^9.1.5",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
@@ -67,12 +67,12 @@
     "storybook-addon-themes": "^6.1.0"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "4.0.0-REACT19",
-    "@scm-manager/ui-buttons": "4.0.0-REACT19",
-    "@scm-manager/ui-core": "4.0.0-REACT19",
-    "@scm-manager/ui-extensions": "4.0.0-REACT19",
-    "@scm-manager/ui-layout": "4.0.0-REACT19",
-    "@scm-manager/ui-overlays": "4.0.0-REACT19",
+    "@scm-manager/ui-api": "4.0.0-REACT19-20250910-113025",
+    "@scm-manager/ui-buttons": "4.0.0-REACT19-20250910-113025",
+    "@scm-manager/ui-core": "4.0.0-REACT19-20250910-113025",
+    "@scm-manager/ui-extensions": "4.0.0-REACT19-20250910-113025",
+    "@scm-manager/ui-layout": "4.0.0-REACT19-20250910-113025",
+    "@scm-manager/ui-overlays": "4.0.0-REACT19-20250910-113025",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
     "react-diff-view": "^2.4.10",
@@ -104,4 +104,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/Breadcrumb.tsx

@@ -16,7 +16,7 @@
 
 import React, { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import classNames from "classnames";
 import styled from "styled-components";
 import { urls } from "@scm-manager/ui-api";
@@ -145,9 +145,8 @@ const Breadcrumb: FC<Props> = ({
 
   const pathSection = () => {
     if (path) {
-      const paths = path.split("/");
+      const paths = path.split("/").filter((pathFragment) => pathFragment !== "");
       return paths.map((pathFragment, index) => {
-        const decodedPathFragment = decodeURIComponent(pathFragment);
         let currPath = paths
           .slice(0, index + 1)
           .map(encodeURIComponent)
@@ -158,7 +157,7 @@ const Breadcrumb: FC<Props> = ({
         if (paths.length - 1 === index) {
           return (
             <li className="is-active" key={index}>
-              <BreadcrumbNode clickable={clickable} text={decodedPathFragment} url="#" current={true} />
+              <BreadcrumbNode clickable={clickable} text={pathFragment} url="#" current={true} />
             </li>
           );
         }
@@ -166,7 +165,7 @@ const Breadcrumb: FC<Props> = ({
           <li key={index}>
             <BreadcrumbNode
               clickable={clickable}
-              text={decodedPathFragment}
+              text={pathFragment}
               url={baseUrl + "/" + encodeURIComponent(revision) + "/" + currPath}
             />
           </li>
@@ -180,7 +179,7 @@ const Breadcrumb: FC<Props> = ({
     navigate(location.pathname);
     setCopying(true);
     copyToClipboard(
-      window.location.protocol + "//" + window.location.host + urls.withContextPath(permalink || location.pathname)
+      window.location.protocol + "//" + window.location.host + urls.withContextPath(permalink || location.pathname),
     ).finally(() => setCopying(false));
   };
 
@@ -206,7 +205,7 @@ const Breadcrumb: FC<Props> = ({
           "my-4",
           "is-flex",
           "is-align-items-center",
-          "is-full-width"
+          "is-full-width",
         )}
         aria-label="breadcrumbs"
       >
@@ -303,7 +302,7 @@ const Breadcrumb: FC<Props> = ({
               "is-justify-content-flex-start",
               "is-align-self-center",
               "m-2",
-              "is-flex-wrap-wrap"
+              "is-flex-wrap-wrap",
             )}
           >
             {renderExtensionPoints()}

package/src/CardColumn.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ReactNode, useCallback } from "react";
+import React, { FC, ReactNode, Ref, useCallback } from "react";
 import classNames from "classnames";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
@@ -29,6 +29,7 @@ type Props = {
   footerRight: ReactNode;
   action?: () => void;
   className?: string;
+  ref?: Ref<HTMLElement>;
 };
 
 const NoEventWrapper = styled.article`
@@ -48,72 +49,81 @@ const InvisibleButton = styled.button`
   cursor: pointer;
 `;
 
-const CardColumn = React.forwardRef<HTMLElement, Props>(
-  ({ link, avatar, title, description, contentRight, footerLeft, footerRight, action, className }, ref) => {
-    const renderAvatar = avatar ? <figure className="media-left mt-3 ml-4">{avatar}</figure> : null;
-    const renderDescription = description ? <p className="shorten-text">{description}</p> : null;
-    const renderContentRight = contentRight ? <div className="ml-auto">{contentRight}</div> : null;
-    const executeRef = useCallback(
-      (el: HTMLButtonElement | HTMLAnchorElement | null) => {
-        if (typeof ref === "function") {
-          ref(el);
-        } else if (ref) {
-          ref.current = el;
-        }
-      },
-      [ref]
-    );
+const CardColumn: FC<Props> = ({
+  link,
+  avatar,
+  title,
+  description,
+  contentRight,
+  footerLeft,
+  footerRight,
+  action,
+  className,
+  ref,
+}) => {
+  const renderAvatar = avatar ? <figure className="media-left mt-3 ml-4">{avatar}</figure> : null;
+  const renderDescription = description ? <p className="shorten-text">{description}</p> : null;
+  const renderContentRight = contentRight ? <div className="ml-auto">{contentRight}</div> : null;
+  const executeRef = useCallback(
+    (el: HTMLButtonElement | HTMLAnchorElement | null) => {
+      if (typeof ref === "function") {
+        ref(el);
+      } else if (ref) {
+        ref.current = el;
+      }
+    },
+    [ref],
+  );
 
-    let createLink = null;
-    if (link) {
-      createLink = <Link ref={executeRef} className="overlay-column" to={link} />;
-    } else if (action) {
-      createLink = (
-        <InvisibleButton
-          ref={executeRef}
-          className="overlay-column"
-          onClick={(e) => {
-            e.preventDefault();
-            action();
-          }}
-          tabIndex={0}
-        />
-      );
-    }
+  let createLink = null;
+  if (link) {
+    createLink = <Link ref={executeRef} className="overlay-column" to={link} />;
+  } else if (action) {
+    createLink = (
+      <InvisibleButton
+        ref={executeRef}
+        className="overlay-column"
+        onClick={(e) => {
+          e.preventDefault();
+          action();
+        }}
+        tabIndex={0}
+      />
+    );
+  }
 
-    return (
-      <>
-        {createLink}
-        <NoEventWrapper className={classNames("media", className)}>
-          {renderAvatar}
-          <div
-            className={classNames(
-              "media-content",
-              "text-box",
-              "is-flex",
-              "is-flex-direction-column",
-              "is-justify-content-space-around",
-              "is-align-self-stretch"
-            )}
-          >
-            <div className="is-flex">
-              <div className="is-clipped mb-0">
-                <p className="shorten-text m-0">{title}</p>
-                {renderDescription}
-              </div>
-              {renderContentRight}
-            </div>
-            <div className={classNames("level", "is-flex", "pb-4")}>
-              <div className={classNames("level-left", "is-hidden-mobile", "mr-2")}>{footerLeft}</div>
-              <InheritFlexShrinkDiv className="level-right is-block is-mobile m-0 shorten-text">
-                {footerRight}
-              </InheritFlexShrinkDiv>
+  return (
+    <>
+      {createLink}
+      <NoEventWrapper className={classNames("media", className)}>
+        {renderAvatar}
+        <div
+          className={classNames(
+            "media-content",
+            "text-box",
+            "is-flex",
+            "is-flex-direction-column",
+            "is-justify-content-space-around",
+            "is-align-self-stretch",
+          )}
+        >
+          <div className="is-flex">
+            <div className="is-clipped mb-0">
+              <p className="shorten-text m-0">{title}</p>
+              {renderDescription}
             </div>
+            {renderContentRight}
           </div>
-        </NoEventWrapper>
-      </>
-    );
-  }
-);
+          <div className={classNames("level", "is-flex", "pb-4")}>
+            <div className={classNames("level-left", "is-hidden-mobile", "mr-2")}>{footerLeft}</div>
+            <InheritFlexShrinkDiv className="level-right is-block is-mobile m-0 shorten-text">
+              {footerRight}
+            </InheritFlexShrinkDiv>
+          </div>
+        </div>
+      </NoEventWrapper>
+    </>
+  );
+};
 
 export default CardColumn;

package/src/buttons/Button.stories.tsx

@@ -118,6 +118,7 @@ export default meta;
 
 // --- Story-Definitionen ---
 
+// @ts-ignore This type is too complex, no clue what to do about it
 type Story = StoryObj<typeof meta>;
 
 export const Loading: Story = {

package/src/buttons/Button.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { KeyboardEvent, MouseEvent, ReactNode, useCallback } from "react";
+import React, { ButtonHTMLAttributes, FC, KeyboardEvent, MouseEvent, ReactNode, Ref, useCallback } from "react";
 import classNames from "classnames";
 import { Link } from "react-router";
 import Icon from "../Icon";
@@ -35,103 +35,101 @@ export type ButtonProps = {
   testId?: string;
 };
 
-type Props = ButtonProps & {
-  type?: "button" | "submit" | "reset";
-  color?: string;
-};
+type Props = ButtonProps &
+  ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {
+    type?: "button" | "submit" | "reset";
+    color?: string;
+    ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+  };
 
 /**
  * @deprecated Use {@link ui-core/src/base/buttons/Button} instead
  */
-const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
-  (
-    {
-      link,
-      className,
-      icon,
-      fullWidth,
-      reducedMobile,
-      testId,
-      children,
-      label,
-      type = "button",
-      title,
-      loading,
-      disabled,
-      action,
-      color = "default",
+const Button: FC<Props> = ({
+  link,
+  className,
+  icon,
+  fullWidth,
+  reducedMobile,
+  testId,
+  children,
+  label,
+  type = "button",
+  title,
+  loading,
+  disabled,
+  action,
+  color = "default",
+  ref,
+}) => {
+  const executeRef = useCallback(
+    (el: HTMLButtonElement | HTMLAnchorElement | null) => {
+      if (typeof ref === "function") {
+        ref(el);
+      } else if (ref) {
+        ref.current = el;
+      }
     },
-    ref,
-  ) => {
-    const executeRef = useCallback(
-      (el: HTMLButtonElement | HTMLAnchorElement | null) => {
-        if (typeof ref === "function") {
-          ref(el);
-        } else if (ref) {
-          ref.current = el;
-        }
-      },
-      [ref],
+    [ref],
+  );
+  const renderIcon = () => {
+    return (
+      <>
+        {icon ? (
+          <Icon name={icon} color="inherit" className={classNames("is-medium", { "pr-5": label || children })} />
+        ) : null}
+      </>
     );
-    const renderIcon = () => {
-      return (
-        <>
-          {icon ? (
-            <Icon name={icon} color="inherit" className={classNames("is-medium", { "pr-5": label || children })} />
-          ) : null}
-        </>
-      );
-    };
+  };
 
-    const classes = classNames(
-      "button",
-      "is-" + color,
-      { "is-loading": loading },
-      { "is-fullwidth": fullWidth },
-      { "is-reduced-mobile": reducedMobile },
-      className,
-    );
+  const classes = classNames(
+    "button",
+    "is-" + color,
+    { "is-loading": loading },
+    { "is-fullwidth": fullWidth },
+    { "is-reduced-mobile": reducedMobile },
+    className,
+  );
 
-    const content = (
-      <span>
-        {renderIcon()}{" "}
-        {(label || children) && (
-          <>
-            {label} {children}
-          </>
-        )}
-      </span>
-    );
+  const content = (
+    <span>
+      {renderIcon()}{" "}
+      {(label || children) && (
+        <>
+          {label} {children}
+        </>
+      )}
+    </span>
+  );
 
-    if (link && !disabled) {
-      if (link.includes("://")) {
-        return (
-          <a ref={executeRef} className={classes} href={link} aria-label={label}>
-            {content}
-          </a>
-        );
-      }
+  if (link && !disabled) {
+    if (link.includes("://")) {
       return (
-        <Link ref={executeRef} className={classes} to={link} aria-label={label}>
+        <a ref={executeRef} className={classes} href={link} aria-label={label}>
           {content}
-        </Link>
+        </a>
       );
     }
-
     return (
-      <button
-        type={type}
-        title={title}
-        disabled={disabled}
-        onClick={(event) => action && action(event)}
-        className={classes}
-        ref={executeRef}
-        {...createAttributesForTesting(testId)}
-      >
+      <Link ref={executeRef} className={classes} to={link} aria-label={label}>
         {content}
-      </button>
+      </Link>
     );
-  },
-);
+  }
+
+  return (
+    <button
+      type={type}
+      title={title}
+      disabled={disabled}
+      onClick={(event) => action && action(event)}
+      className={classes}
+      ref={executeRef}
+      {...createAttributesForTesting(testId)}
+    >
+      {content}
+    </button>
+  );
+};
 
 export default Button;

package/src/config/ConfigurationBinder.tsx

@@ -20,22 +20,18 @@ import { NavLink } from "../navigation";
 import { Route } from "react-router-dom";
 import { useTranslation, WithTranslation, withTranslation } from "react-i18next";
 import { Link, Links, Namespace, Repository } from "@scm-manager/ui-types";
-import { urls } from "@scm-manager/ui-api";
 import {
   TitledGlobalSettingComponent,
   TitledNamespaceSettingComponent,
   TitledRepositorySettingComponent,
 } from "./TitledSettings";
+import { NAMESPACE_SUB_ROUTES, useNamespaceFromParams } from "@scm-manager/ui-core";
 
 type GlobalRouteProps = {
   url: string;
   links: Links;
 };
 
-type NamespaceRouteProps = {
-  namespace: Namespace;
-};
-
 type RepositoryRouteProps = {
   url: string;
   repository: Repository;
@@ -58,7 +54,7 @@ class ConfigurationBinder {
   }
 
   route(path: string, Component: any) {
-    return <Route path={urls.escapeUrlForRoute(path)} element={Component} />;
+    return <Route path={path} element={Component} />;
   }
 
   bindGlobal(to: string, labelI18nKey: string, linkName: string, ConfigurationComponent: any, sortKey?: string) {
@@ -82,7 +78,7 @@ class ConfigurationBinder {
 
       if (link) {
         return this.route(
-          "/settings" + to,
+          "settings" + to,
           <TitledGlobalSettingComponent i18nNamespace={this.i18nNamespace} label={labelI18nKey}>
             <ConfigurationComponent link={(link as Link).href} {...additionalProps} />
           </TitledGlobalSettingComponent>,
@@ -105,7 +101,7 @@ class ConfigurationBinder {
 
     const AdminNavLink = withTranslation(this.i18nNamespace)(
       ({ t }: WithTranslation & extensionPoints.AdminNavigation["props"]) =>
-        this.navLink(to, labelI18nKey, t, { icon }),
+        this.navLink("/admin/" + to, labelI18nKey, t, { icon }),
     );
     binder.bind("admin.navigation", AdminNavLink, predicate);
 
@@ -171,7 +167,7 @@ class ConfigurationBinder {
 
       if (link) {
         return this.route(
-          "/settings" + to,
+          "settings" + to,
           <TitledRepositorySettingComponent
             i18nNamespace={this.i18nNamespace}
             label={labelI18nKey}
@@ -193,28 +189,25 @@ class ConfigurationBinder {
     linkName: string,
     ConfigurationComponent: ComponentType<{ link: string; namespace: Namespace }>,
   ) {
-    const namespacePredicate = (props: (extensionPoints.NamespaceSetting | extensionPoints.NamespaceRoute)["props"]) =>
+    const namespacePredicate = (props: extensionPoints.NamespaceSetting["props"]) =>
       props.namespace && props.namespace._links && props.namespace._links[linkName];
 
-    const NamespaceNavLink: FC<extensionPoints.NamespaceRoute["props"]> = () => {
+    const NamespaceNavLink: FC<extensionPoints.NamespaceSetting["props"]> = () => {
       const [t] = useTranslation(this.i18nNamespace);
-      return this.navLink("/settings" + to, labelI18nKey, t, { activeOnlyWhenExact: false });
+      return this.navLink("/" + NAMESPACE_SUB_ROUTES.SETTINGS + to, labelI18nKey, t, { activeOnlyWhenExact: false });
     };
 
     binder.bind<extensionPoints.NamespaceSetting>("namespace.setting", NamespaceNavLink, namespacePredicate);
 
-    const NamespaceRoute = ({ namespace, ...additionalProps }: NamespaceRouteProps) => {
+    const NamespaceRoute = ({ ...additionalProps }: NamespaceNavProps) => {
+      const namespace = useNamespaceFromParams();
       if (namespace) {
         const link = namespace._links[linkName];
 
         if (link) {
           return this.route(
-            "/settings" + to,
-            <TitledNamespaceSettingComponent
-              i18nNamespace={this.i18nNamespace}
-              label={labelI18nKey}
-              namespace={namespace}
-            >
+            NAMESPACE_SUB_ROUTES.SETTINGS + to,
+            <TitledNamespaceSettingComponent i18nNamespace={this.i18nNamespace} label={labelI18nKey}>
               <ConfigurationComponent namespace={namespace} link={(link as Link).href} {...additionalProps} />
             </TitledNamespaceSettingComponent>,
           );
@@ -223,7 +216,7 @@ class ConfigurationBinder {
       return null;
     };
 
-    binder.bind("namespace.route", NamespaceRoute, namespacePredicate);
+    binder.bind("namespace.route", NamespaceRoute);
   }
 }
 

package/src/config/TitledSettings.tsx

@@ -16,8 +16,8 @@
 
 import React, { FC, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { useDocumentTitle, useDocumentTitleForRepository } from "@scm-manager/ui-core";
-import { Namespace, Repository } from "@scm-manager/ui-types";
+import { useDocumentTitle, useDocumentTitleForRepository, useNamespaceFromParams } from "@scm-manager/ui-core";
+import { Repository } from "@scm-manager/ui-types";
 
 type GlobalProps = {
   i18nNamespace: string;
@@ -54,12 +54,12 @@ export const TitledRepositorySettingComponent: FC<RepositoryProps> = ({
 type NamespaceProps = {
   i18nNamespace: string;
   label: string;
-  namespace: Namespace;
   children?: ReactNode;
 };
 
-export const TitledNamespaceSettingComponent: FC<NamespaceProps> = ({ children, i18nNamespace, label, namespace }) => {
+export const TitledNamespaceSettingComponent: FC<NamespaceProps> = ({ children, i18nNamespace, label }) => {
   const [t] = useTranslation(i18nNamespace);
+  const namespace = useNamespaceFromParams();
   const [commonTranslation] = useTranslation("commons");
   useDocumentTitle(t(label), commonTranslation("documentTitle.namespaceConfiguration"), namespace.namespace);
   return <>{children}</>;

package/src/forms/FileInput.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ChangeEvent, FocusEvent, useState } from "react";
+import React, { ChangeEvent, FC, FocusEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { createAttributesForTesting } from "../devBuild";
@@ -32,69 +32,80 @@ type Props = {
   testId?: string;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  ref?: React.Ref<HTMLInputElement>;
 };
 
 /**
  * @deprecated
  */
-const FileInput = React.forwardRef<HTMLInputElement, Props>(
-  ({ name, filenamePlaceholder, testId, helpText, placeholder, disabled, label, className, onBlur, onChange }, ref) => {
-    const [t] = useTranslation("commons");
-    const [file, setFile] = useState<File | null>(null);
+const FileInput: FC<Props> = ({
+  name,
+  filenamePlaceholder,
+  testId,
+  helpText,
+  placeholder,
+  disabled,
+  label,
+  className,
+  onBlur,
+  onChange,
+  ref,
+}) => {
+  const [t] = useTranslation("commons");
+  const [file, setFile] = useState<File | null>(null);
 
-    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-      const uploadedFile = event?.target?.files![0];
-      // @ts-ignore the uploaded file doesn't match our types
-      setFile(uploadedFile);
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const uploadedFile = event?.target?.files![0];
+    // @ts-ignore the uploaded file doesn't match our types
+    setFile(uploadedFile);
 
-      if (onChange && event.target.files) {
-        onChange(event);
-      }
-    };
+    if (onChange && event.target.files) {
+      onChange(event);
+    }
+  };
 
-    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-      if (onBlur && event.target.files) {
-        onBlur(event);
-      }
-    };
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    if (onBlur && event.target.files) {
+      onBlur(event);
+    }
+  };
 
-    const id = createA11yId("file-input");
+  const id = createA11yId("file-input");
 
-    return (
-      <div className={classNames("field", className)}>
-        <LabelWithHelpIcon label={label} helpText={helpText} id={id} />
-        <div className="file is-info has-name is-fullwidth">
-          <label className="file-label">
-            <input
-              ref={ref}
-              name={name}
-              className="file-input"
-              type="file"
-              placeholder={placeholder}
-              disabled={disabled}
-              onChange={handleChange}
-              onBlur={handleBlur}
-              aria-describedby={id}
-              {...createAttributesForTesting(testId)}
-            />
-            <span className="file-cta">
-              <span className="file-icon">
-                <i className="fas fa-arrow-circle-up" />
-              </span>
-              <span className="file-label has-text-weight-bold">{t("fileInput.label")}</span>
+  return (
+    <div className={classNames("field", className)}>
+      <LabelWithHelpIcon label={label} helpText={helpText} id={id} />
+      <div className="file is-info has-name is-fullwidth">
+        <label className="file-label">
+          <input
+            ref={ref}
+            name={name}
+            className="file-input"
+            type="file"
+            placeholder={placeholder}
+            disabled={disabled}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            aria-describedby={id}
+            {...createAttributesForTesting(testId)}
+          />
+          <span className="file-cta">
+            <span className="file-icon">
+              <i className="fas fa-arrow-circle-up" />
             </span>
-            {file?.name ? (
-              <span className="file-name">{file?.name}</span>
-            ) : (
-              <span className="file-name has-text-weight-light has-text-secondary">
-                {filenamePlaceholder || t("fileInput.noFileChosen")}
-              </span>
-            )}
-          </label>
-        </div>
+            <span className="file-label has-text-weight-bold">{t("fileInput.label")}</span>
+          </span>
+          {file?.name ? (
+            <span className="file-name">{file?.name}</span>
+          ) : (
+            <span className="file-name has-text-weight-light has-text-secondary">
+              {filenamePlaceholder || t("fileInput.noFileChosen")}
+            </span>
+          )}
+        </label>
       </div>
-    );
-  }
-);
+    </div>
+  );
+};
 
 export default FileInput;

package/src/forms/FormFieldTypes.tsx

@@ -54,7 +54,7 @@ export type InnerRefProps<Base extends MinimumBaseProps, ElementType extends HTM
  * @deprecated
  */
 export const isUsingRef = <Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType>(
-  props: Partial<FieldProps<Base, ElementType, ValueType>>
+  props: Partial<FieldProps<Base, ElementType, ValueType>>,
 ): props is InnerRefProps<Base, ElementType> => {
   return (props as Partial<InnerRefProps<Base, ElementType>>).innerRef !== undefined;
 };
@@ -63,7 +63,7 @@ export const isUsingRef = <Base extends MinimumBaseProps, ElementType extends HT
  * @deprecated
  */
 export const isLegacy = <Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType>(
-  props: FieldProps<Base, ElementType, ValueType>
+  props: FieldProps<Base, ElementType, ValueType>,
 ): props is LegacyProps<Base, ValueType> => {
   return (props as Partial<InnerRefProps<Base, ElementType>>).innerRef === undefined;
 };
@@ -93,12 +93,14 @@ export type FieldType<Base extends MinimumBaseProps, ElementType extends HTMLEle
 /**
  * @deprecated
  */
-export const createFormFieldWrapper = <Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType>(
-  InnerType: FC<FieldProps<Base, ElementType, ValueType>>
-) =>
-  React.forwardRef<ElementType, LegacyProps<Base, ValueType> | OuterProps<Base, ElementType>>((props, ref) => {
-    if (ref) {
-      return <InnerType innerRef={ref} {...(props as RefProps<Base, ElementType>)} />;
+export const createFormFieldWrapper =
+  <Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType>(
+    InnerType: FC<FieldProps<Base, ElementType, ValueType>>,
+  ) =>
+  (props: LegacyProps<Base, ValueType> | OuterProps<Base, ElementType>) => {
+    if ("ref" in props) {
+      const { ref, ...rest } = props as OuterProps<Base, ElementType>;
+      return <InnerType innerRef={ref} {...(rest as RefProps<Base, ElementType>)} />;
     }
     return <InnerType {...(props as LegacyProps<Base, ValueType>)} />;
-  });
+  };

package/src/forms/PasswordConfirmation.tsx

@@ -22,13 +22,10 @@ type BaseProps = {
   passwordChanged: (p1: string, p2: boolean) => void;
   passwordValidator?: (p: string) => boolean;
   onReturnPressed?: () => void;
+  ref?: React.Ref<HTMLInputElement>;
 };
 
-type InnerProps = BaseProps & {
-  innerRef: React.Ref<HTMLInputElement>;
-};
-
-const PasswordConfirmation: FC<InnerProps> = ({ passwordChanged, passwordValidator, onReturnPressed, innerRef }) => {
+const PasswordConfirmation: FC<BaseProps> = ({ passwordChanged, passwordValidator, onReturnPressed, ref }) => {
   const [t] = useTranslation("commons");
   const [password, setPassword] = useState("");
   const [confirmedPassword, setConfirmedPassword] = useState("");
@@ -51,13 +48,7 @@ const PasswordConfirmation: FC<InnerProps> = ({ passwordChanged, passwordValidat
     setPasswordConfirmationFailed(password !== newConfirmedPassword);
   };
 
-  const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement> | string) => {
-    let newPassword;
-    if (typeof event === "string") {
-      newPassword = event;
-    } else {
-      newPassword = event.target.value;
-    }
+  const handlePasswordChange = (newPassword: string) => {
     setPasswordConfirmationFailed(newPassword !== confirmedPassword);
     setPassword(newPassword);
     setPasswordValid(validatePassword(newPassword));
@@ -69,11 +60,12 @@ const PasswordConfirmation: FC<InnerProps> = ({ passwordChanged, passwordValidat
         <InputField
           label={t("password.newPassword")}
           type="password"
-          onChange={(event) => handlePasswordChange(event)}
+          onChange={handlePasswordChange}
           value={password}
           validationError={!passwordValid}
           errorMessage={t("password.passwordInvalid")}
-          ref={innerRef}
+          // @ts-ignore TODO check this
+          ref={ref}
           onReturnPressed={onReturnPressed}
           testId="input-password"
         />
@@ -94,9 +86,4 @@ const PasswordConfirmation: FC<InnerProps> = ({ passwordChanged, passwordValidat
   );
 };
 
-/**
- * @deprecated
- */
-export default React.forwardRef<HTMLInputElement, BaseProps>((props, ref) => (
-  <PasswordConfirmation {...props} innerRef={ref} />
-));
+export default PasswordConfirmation;

package/src/navigation/PrimaryNavigation.tsx

@@ -24,13 +24,13 @@ type Props = {
   links: Links;
 };
 
-type Appender = (to: string, match: string, label: string, linkName: string) => void;
+type Appender = (to: string, match: string | string[], label: string, linkName: string) => void;
 
 const PrimaryNavigation: FC<Props> = ({ links }) => {
   const [t] = useTranslation("commons");
 
   const createNavigationAppender = (navItems: ReactNode[]): Appender => {
-    return (to: string, match: string, label: string, linkName: string) => {
+    return (to: string, match: string | string[], label: string, linkName: string) => {
       const link = links[linkName];
       if (link) {
         const navigationItem = (
@@ -65,12 +65,12 @@ const PrimaryNavigation: FC<Props> = ({ links }) => {
           key="primary-navigation.first-menu"
           name="primary-navigation.first-menu"
           props={extensionProps}
-        />
+        />,
       );
     }
-    append("/repos/", "/(repo|repos)", "primary-navigation.repositories", "repositories");
-    append("/users/", "/(user|users)", "primary-navigation.users", "users");
-    append("/groups/", "/(group|groups)", "primary-navigation.groups", "groups");
+    append("/repos/", ["/repo", "/repos"], "primary-navigation.repositories", "repositories");
+    append("/users/", ["/user", "/users"], "primary-navigation.users", "users");
+    append("/groups/", ["/group", "/groups"], "primary-navigation.groups", "groups");
     append("/admin", "/admin", "primary-navigation.admin", "config");
 
     navItems.push(
@@ -81,7 +81,7 @@ const PrimaryNavigation: FC<Props> = ({ links }) => {
         props={{
           links,
         }}
-      />
+      />,
     );
 
     return navItems;

package/src/navigation/PrimaryNavigationLink.tsx

@@ -15,26 +15,31 @@
  */
 
 import React, { FC } from "react";
-import { useLocation, NavLink } from "react-router-dom";
+import { matchPath, useLocation, NavLink } from "react-router-dom";
 import { createAttributesForTesting } from "../devBuild";
 import classNames from "classnames";
 
 type Props = {
   to: string;
-  match: string;
+  match: string | string[];
   label: string;
   testId?: string;
   className?: string;
 };
 
 const PrimaryNavigationLink: FC<Props> = ({ to, match, testId, label, className }) => {
-  const location = useLocation();
-  const isActive = new RegExp(match).test(location.pathname);
+  const { pathname } = useLocation();
+  let isMatch: boolean;
+  if (Array.isArray(match)) {
+    isMatch = match.some((m) => !!matchPath(m + "/*", pathname));
+  } else {
+    isMatch = !!matchPath((match as string) + "/*", pathname);
+  }
 
   return (
     <NavLink
       to={to}
-      className={() => classNames(className, "navbar-item", { "is-active": isActive })}
+      className={() => classNames(className, "navbar-item", { "is-active": isMatch })}
       {...createAttributesForTesting(testId)}
     >
       {label}

package/src/repos/changesets/ChangesetButtonGroup.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React from "react";
+import React, { FC, Ref } from "react";
 import { Branch, Changeset, File, Repository } from "@scm-manager/ui-types";
 import { createChangesetLink, createChangesetLinkByBranch, createSourcesLink } from "./changesets";
 import { useTranslation } from "react-i18next";
@@ -26,28 +26,27 @@ type Props = {
   changeset: Changeset;
   file?: File;
   branch?: Branch;
+  ref?: Ref<HTMLAnchorElement>;
 };
 
-const ChangesetButtonGroup = React.forwardRef<HTMLAnchorElement, Props>(
-  ({ repository, changeset, file, branch }, ref) => {
-    const [t] = useTranslation("repos");
-    const changesetLink = branch
-      ? createChangesetLinkByBranch(repository, changeset, branch)
-      : createChangesetLink(repository, changeset);
-    const sourcesLink = createSourcesLink(repository, changeset, file);
-    return (
-      <ButtonAddons>
-        <LinkButton className="px-3 pl-5" ref={ref} to={changesetLink}>
-          <Icon>list-ul</Icon>
-          <span>{t("changeset.buttons.details")}</span>
-        </LinkButton>
-        <LinkButton className="px-3 pl-5" to={sourcesLink}>
-          <Icon>code</Icon>
-          <span>{t("changeset.buttons.sources")}</span>
-        </LinkButton>
-      </ButtonAddons>
-    );
-  }
-);
+const ChangesetButtonGroup: FC<Props> = ({ repository, changeset, file, branch, ref }) => {
+  const [t] = useTranslation("repos");
+  const changesetLink = branch
+    ? createChangesetLinkByBranch(repository, changeset, branch)
+    : createChangesetLink(repository, changeset);
+  const sourcesLink = createSourcesLink(repository, changeset, file);
+  return (
+    <ButtonAddons>
+      <LinkButton className="px-3 pl-5" ref={ref} to={changesetLink}>
+        <Icon>list-ul</Icon>
+        <span>{t("changeset.buttons.details")}</span>
+      </LinkButton>
+      <LinkButton className="px-3 pl-5" to={sourcesLink}>
+        <Icon>code</Icon>
+        <span>{t("changeset.buttons.sources")}</span>
+      </LinkButton>
+    </ButtonAddons>
+  );
+};
 
 export default ChangesetButtonGroup;