@scm-manager/ui-components 4.0.0-REACT19-20251102-220352 → 4.0.0-REACT19-20251104-141645

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "4.0.0-REACT19-20251102-220352",
+  "version": "4.0.0-REACT19-20251104-141645",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -34,8 +34,8 @@
     "@scm-manager/eslint-config": "^2.18.2",
     "@scm-manager/prettier-config": "^2.12.0",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-syntaxhighlighting": "4.0.0-REACT19-20251102-220352",
-    "@scm-manager/ui-types": "4.0.0-REACT19-20251102-220352",
+    "@scm-manager/ui-syntaxhighlighting": "4.0.0-REACT19-20251104-141645",
+    "@scm-manager/ui-types": "4.0.0-REACT19-20251104-141645",
     "@storybook/addon-actions": "^9.0.8",
     "@storybook/addon-docs": "^9.1.5",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
@@ -66,9 +66,9 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "4.0.0-REACT19-20251102-220352",
-    "@scm-manager/ui-core": "4.0.0-REACT19-20251102-220352",
-    "@scm-manager/ui-extensions": "4.0.0-REACT19-20251102-220352",
+    "@scm-manager/ui-api": "4.0.0-REACT19-20251104-141645",
+    "@scm-manager/ui-core": "4.0.0-REACT19-20251104-141645",
+    "@scm-manager/ui-extensions": "4.0.0-REACT19-20251104-141645",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
     "react-diff-view": "2.6.0",

package/src/ErrorBoundary.tsx

@@ -15,34 +15,26 @@
  */
 
 import React, { FC, ReactNode, useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { ErrorBoundary as ReactErrorBoundary, FallbackProps } from "react-error-boundary";
+import { isRouteErrorResponse, useLocation, useRouteError } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { MissingLinkError, urls, useIndexLink } from "@scm-manager/ui-api";
+import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary";
 import { useDocumentTitle } from "@scm-manager/ui-core";
 import ErrorNotification from "./ErrorNotification";
 import ErrorPage from "./ErrorPage";
 import { Subtitle, Title } from "./layout";
 import Icon from "./Icon";
 
-type ErrorState = {
+type ErrorDisplayProps = {
   error: Error;
+  errorInfo?: { componentStack?: string }; // Optional gemacht
+  fallback?: React.ComponentType<{ error: Error }>;
 };
 
-type ExportedProps = {
-  fallback?: React.ComponentType<ErrorState>;
-  children?: ReactNode;
-};
-
-type ErrorDisplayProps = {
-  error: Error;
-  // react-error-boundary does not pass errorInfo to the fallback component by default
-  // for performance reasons, but it can be logged via the `onError` prop.
-  // We keep it in the signature for compatibility with the custom fallback prop.
-  errorInfo?: { componentStack: string };
-  fallback?: React.ComponentType<ErrorState>;
+type GlobalErrorBoundaryProps = {
+  fallback?: React.ComponentType<{ error: Error }>;
 };
 
 const RedirectIconContainer = styled.div`
@@ -52,6 +44,7 @@ const RedirectIconContainer = styled.div`
 const RedirectPage: FC = () => {
   const [t] = useTranslation("commons");
   useDocumentTitle(t("errorNotification.prefix"));
+
   return (
     <section className="section">
       <div className="container">
@@ -72,7 +65,7 @@ const RedirectPage: FC = () => {
   );
 };
 
-const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, errorInfo, fallback: FallbackComponent }) => {
+const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, fallback: FallbackComponent }) => {
   const loginLink = useIndexLink("login");
   const [t] = useTranslation("commons");
   const location = useLocation();
@@ -87,41 +80,47 @@ const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, errorInfo, fallback: Fallb
   if (isMissingLink) {
     if (loginLink) {
       return <RedirectPage />;
+    } else {
+      return (
+        <ErrorPage error={error} title={t("errorNotification.prefix")} subtitle={t("errorNotification.forbidden")} />
+      );
     }
-    return (
-      <ErrorPage error={error} title={t("errorNotification.prefix")} subtitle={t("errorNotification.forbidden")} />
-    );
   }
 
-  const fallbackProps = {
-    error,
-    errorInfo,
-  };
-
   if (FallbackComponent) {
-    return <FallbackComponent {...fallbackProps} />;
+    return <FallbackComponent error={error} />;
   }
+
   return <ErrorNotification error={error} />;
 };
 
-const ErrorBoundary: FC<ExportedProps> = ({ children, fallback }) => {
+const ErrorBoundary: FC<GlobalErrorBoundaryProps & { children?: ReactNode }> = ({ fallback, children }) => {
+  const rawError = useRouteError();
   const location = useLocation();
 
-  const ErrorBoundaryFallback = ({ error }: FallbackProps) => (
-    <ErrorDisplay
-      error={error}
-      // For compatibility with potential custom fallbacks that expect errorInfo.
-      // The actual component stack is available in the `onError` callback below.
-      errorInfo={{ componentStack: "" }}
-      fallback={fallback}
-    />
-  );
+  if (!rawError) {
+    const ErrorBoundaryFallback = ({ error }: { error: Error }) => (
+      <ErrorDisplay error={error} errorInfo={{ componentStack: "" }} fallback={fallback} />
+    );
 
-  return (
-    <ReactErrorBoundary resetKeys={[location.pathname]} FallbackComponent={ErrorBoundaryFallback}>
-      {children}
-    </ReactErrorBoundary>
-  );
+    return (
+      <ReactErrorBoundary resetKeys={[location.pathname]} FallbackComponent={ErrorBoundaryFallback}>
+        {children}
+      </ReactErrorBoundary>
+    );
+  }
+
+  let error: Error;
+
+  if (isRouteErrorResponse(rawError)) {
+    error = new Error(`${rawError.status} ${rawError.statusText}`);
+  } else if (rawError instanceof Error) {
+    error = rawError;
+  } else {
+    error = new Error(rawError ? String(rawError) : "Unknown Error");
+  }
+
+  return <ErrorDisplay error={error} errorInfo={{ componentStack: "Loader/Action Error" }} fallback={fallback} />;
 };
 
 export default ErrorBoundary;

package/src/config/ConfigurationBinder.tsx

@@ -57,7 +57,7 @@ class ConfigurationBinder {
     return { path, element: Component };
   }
 
-  bindGlobal(to: string, labelI18nKey: string, linkName: string, ConfigurationComponent: any, sortKey?: string) {
+  bindAdminSetting(to: string, labelI18nKey: string, linkName: string, ConfigurationComponent: any, sortKey?: string) {
     // create predicate based on the link name of the index resource
     // if the linkname is not available, the navigation link and the route are not bound to the extension points
     const configPredicate = (props: any) => {
@@ -74,7 +74,7 @@ class ConfigurationBinder {
     binder.bind("admin.setting", ConfigNavLink, configPredicate, sortKey ?? linkName);
 
     // route for global configuration, passes the link from the index resource to component
-    const ConfigRoute = ({ ...additionalProps }: GlobalRouteProps) => {
+    const ConfigRoute = ({ ...additionalProps }: GlobalRouteProps = {} as GlobalRouteProps) => {
       return this.route(
         sanitizedTo,
         <TitledGlobalSettingComponent i18nNamespace={this.i18nNamespace} label={labelI18nKey}>
@@ -84,28 +84,19 @@ class ConfigurationBinder {
     };
 
     // bind config route to extension point
-    binder.bind("admin.route", ConfigRoute);
+    binder.bind("admin.settings.route", ConfigRoute);
   }
 
-  bindAdmin(
-    to: string,
-    labelI18nKey: string,
-    icon: string,
-    linkName: string,
-    Component: React.ComponentType<{ link: string }>,
-  ) {
-    const predicate = ({ links }: extensionPoints.AdminRoute["props"]) => links![linkName];
-
+  bindAdmin(to: string, labelI18nKey: string, icon: string, Component: React.ComponentType) {
     const AdminNavLink = withTranslation(this.i18nNamespace)(
       ({ t }: WithTranslation & extensionPoints.AdminNavigation["props"]) =>
         this.navLink("/admin/" + to, labelI18nKey, t, { icon }),
     );
-    binder.bind("admin.navigation", AdminNavLink, predicate);
+    binder.bind("admin.navigation", AdminNavLink);
 
-    const AdminRoute: extensionPoints.AdminRoute["type"] = ({ links }) =>
-      this.route(to, <Component link={(links![linkName] as Link).href} />);
+    const AdminRoute: extensionPoints.AdminRoute["type"] = () => this.route(to, <Component />);
 
-    binder.bind<extensionPoints.AdminRoute>("admin.route", AdminRoute, predicate);
+    binder.bind<extensionPoints.AdminRoute>("admin.route", AdminRoute);
   }
 
   bindRepository(to: string, labelI18nKey: string, linkName: string, RepositoryComponent: any) {

package/src/navigation/useActiveMatch.ts

@@ -29,16 +29,13 @@ const useMatchesRoute = (pattern?: string) => {
 const useActiveMatch = ({ to, activeWhenMatch, activeOnlyWhenExact = true }: RoutingProps) => {
   const location = useLocation();
   const resolved = useResolvedPath(to);
-  const isActive = new RegExp(resolved.pathname).test(location.pathname);
+  const isActive = !resolved.hash && location.pathname.startsWith(resolved.pathname);
   const match = useMatchesRoute(activeWhenMatch);
 
   if (activeOnlyWhenExact) {
     return isActive;
   } else if (activeWhenMatch) {
-    if (isActive) {
-      return true;
-    }
-    return match;
+    return isActive || match;
   }
   return false;
 };