@scm-manager/ui-components 3.6.1 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "3.6.1",
+  "version": "3.7.0",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -32,8 +32,8 @@
     "react-query": "^3.39.2"
   },
   "devDependencies": {
-    "@scm-manager/ui-tests": "3.6.1",
-    "@scm-manager/ui-types": "3.6.1",
+    "@scm-manager/ui-tests": "3.7.0",
+    "@scm-manager/ui-types": "3.7.0",
     "@types/fetch-mock": "^7.3.1",
     "@types/react-select": "^2.0.19",
     "@types/unist": "^2.0.3",
@@ -67,17 +67,17 @@
     "@scm-manager/jest-preset": "^2.14.1",
     "@scm-manager/prettier-config": "^2.12.0",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-syntaxhighlighting": "3.6.1",
-    "@scm-manager/ui-shortcuts": "3.6.1",
-    "@scm-manager/ui-text": "3.6.1"
+    "@scm-manager/ui-syntaxhighlighting": "3.7.0",
+    "@scm-manager/ui-shortcuts": "3.7.0",
+    "@scm-manager/ui-text": "3.7.0"
   },
   "dependencies": {
-    "@scm-manager/ui-core": "3.6.1",
-    "@scm-manager/ui-overlays": "3.6.1",
-    "@scm-manager/ui-layout": "3.6.1",
-    "@scm-manager/ui-buttons": "3.6.1",
-    "@scm-manager/ui-api": "3.6.1",
-    "@scm-manager/ui-extensions": "3.6.1",
+    "@scm-manager/ui-core": "3.7.0",
+    "@scm-manager/ui-overlays": "3.7.0",
+    "@scm-manager/ui-layout": "3.7.0",
+    "@scm-manager/ui-buttons": "3.7.0",
+    "@scm-manager/ui-api": "3.7.0",
+    "@scm-manager/ui-extensions": "3.7.0",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
     "react-diff-view": "^2.4.10",

package/src/ErrorBoundary.tsx

@@ -20,6 +20,7 @@ import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { MissingLinkError, urls, useIndexLink } from "@scm-manager/ui-api";
+import { useDocumentTitle } from "@scm-manager/ui-core";
 import ErrorNotification from "./ErrorNotification";
 import ErrorPage from "./ErrorPage";
 import { Subtitle, Title } from "./layout";
@@ -53,6 +54,7 @@ const RedirectIconContainer = styled.div`
 
 const RedirectPage = () => {
   const [t] = useTranslation("commons");
+  useDocumentTitle(t("errorNotification.prefix"));
   // we use an icon instead of loading spinner,
   // because a redirect is synchron and a spinner does not spin on a synchron action
   return (
@@ -106,7 +108,7 @@ const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, errorInfo, fallback: Fallb
 
   const fallbackProps = {
     error,
-    errorInfo
+    errorInfo,
   };
 
   return <FallbackComponent {...fallbackProps} />;
@@ -128,7 +130,7 @@ class ErrorBoundary extends React.Component<Props, State> {
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     this.setState({
       error,
-      errorInfo
+      errorInfo,
     });
   }
 

package/src/ErrorPage.tsx

@@ -14,9 +14,11 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React from "react";
-import ErrorNotification from "./ErrorNotification";
+import React, { FC } from "react";
+import { useTranslation } from "react-i18next";
 import { BackendError, ForbiddenError } from "@scm-manager/ui-api";
+import { useDocumentTitle } from "@scm-manager/ui-core";
+import ErrorNotification from "./ErrorNotification";
 
 type Props = {
   error: Error;
@@ -24,28 +26,26 @@ type Props = {
   subtitle: string;
 };
 
-class ErrorPage extends React.Component<Props> {
-  render() {
-    const { title, error } = this.props;
-
-    return (
-      <section className="section">
-        <div className="box column is-4 is-offset-4 container">
-          <h1 className="title">{title}</h1>
-          {this.renderSubtitle()}
-          <ErrorNotification error={error} />
-        </div>
-      </section>
-    );
-  }
+const ErrorPage: FC<Props> = ({ error, title, subtitle }) => {
+  const [t] = useTranslation("commons");
+  useDocumentTitle(t("errorNotification.prefix"));
 
-  renderSubtitle = () => {
-    const { error, subtitle } = this.props;
+  const renderSubtitle = () => {
     if (error instanceof BackendError || error instanceof ForbiddenError) {
       return null;
     }
     return <p className="subtitle">{subtitle}</p>;
   };
-}
+
+  return (
+    <section className="section">
+      <div className="box column is-4 is-offset-4 container">
+        <h1 className="title">{title}</h1>
+        {renderSubtitle()}
+        <ErrorNotification error={error} />
+      </div>
+    </section>
+  );
+};
 
 export default ErrorPage;

package/src/Tag.tsx

@@ -45,7 +45,7 @@ const Tag: FC<Props> = ({
   title,
   onClick,
   onRemove,
-  children
+  children,
 }) => {
   const [t] = useTranslation("commons");
 
@@ -53,7 +53,7 @@ const Tag: FC<Props> = ({
   if (icon) {
     showIcon = (
       <>
-        <i className={classNames("fas", `fa-${icon}`)} />
+        <i className={classNames("fas", `fa-${icon}`)} aria-hidden="true" />
         &nbsp;
       </>
     );
@@ -65,26 +65,44 @@ const Tag: FC<Props> = ({
 
   return (
     <>
-      <span
-        className={classNames(
-          "tag",
-          `is-${color}`,
-          `is-${size}`,
-          className,
-          {
-            "is-outlined": outlined,
-            "is-rounded": rounded,
-            "is-clickable": onClick
-          },
-          size === "small" && smallClassNames
-        )}
-        title={title}
-        onClick={onClick}
-      >
-        {showIcon}
-        {label}
-        {children}
-      </span>
+      {onClick === undefined ? (
+        <span
+          className={classNames(
+            "tag",
+            `is-${color}`,
+            `is-${size}`,
+            className,
+            {
+              "is-outlined": outlined,
+              "is-rounded": rounded,
+            },
+            size === "small" && smallClassNames
+          )}
+        >
+          {showIcon}
+          {label}
+          {children}
+        </span>
+      ) : (
+        <button
+          className={classNames(
+            "tag",
+            `is-${color}`,
+            `is-${size}`,
+            className,
+            {
+              "is-outlined": outlined,
+              "is-rounded": rounded,
+            },
+            size === "small" && smallClassNames
+          )}
+          onClick={onClick}
+        >
+          {showIcon}
+          {label}
+          {children}
+        </button>
+      )}
       {showDelete}
     </>
   );