@scm-manager/ui-components 2.43.1 → 2.43.2-20230425-175303

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.43.1",
+  "version": "2.43.2-20230425-175303",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -20,15 +20,15 @@
     "update-storyshots": "jest --testPathPattern=\"storyshots.test.ts\" --collectCoverage=false -u"
   },
   "devDependencies": {
-    "@scm-manager/ui-syntaxhighlighting": "2.43.1",
-    "@scm-manager/ui-shortcuts": "2.43.1",
-    "@scm-manager/ui-text": "2.43.1",
+    "@scm-manager/ui-syntaxhighlighting": "2.43.2-20230425-175303",
+    "@scm-manager/ui-shortcuts": "2.43.2-20230425-175303",
+    "@scm-manager/ui-text": "2.43.2-20230425-175303",
     "@scm-manager/babel-preset": "^2.13.1",
     "@scm-manager/eslint-config": "^2.17.0",
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-tests": "2.43.1",
+    "@scm-manager/ui-tests": "2.43.2-20230425-175303",
     "@storybook/addon-actions": "^6.4.20",
     "@storybook/addon-essentials": "^6.4.20",
     "@storybook/addon-interactions": "^6.4.20",
@@ -67,9 +67,9 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.4.3",
-    "@scm-manager/ui-api": "2.43.1",
-    "@scm-manager/ui-extensions": "2.43.1",
-    "@scm-manager/ui-types": "2.43.1",
+    "@scm-manager/ui-api": "2.43.2-20230425-175303",
+    "@scm-manager/ui-extensions": "2.43.2-20230425-175303",
+    "@scm-manager/ui-types": "2.43.2-20230425-175303",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",

package/src/config/ConfigurationBinder.tsx

@@ -21,12 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ComponentProps } from "react";
+import React, { ComponentProps, ComponentType, FC } from "react";
 import { binder, extensionPoints } from "@scm-manager/ui-extensions";
 import { NavLink } from "../navigation";
 import { Route } from "react-router-dom";
-import { WithTranslation, withTranslation } from "react-i18next";
-import { Link, Links, Repository } from "@scm-manager/ui-types";
+import { useTranslation, WithTranslation, withTranslation } from "react-i18next";
+import { Link, Links, Namespace, Repository } from "@scm-manager/ui-types";
 import { urls } from "@scm-manager/ui-api";
 
 type GlobalRouteProps = {
@@ -34,6 +34,11 @@ type GlobalRouteProps = {
   links: Links;
 };
 
+type NamespaceRouteProps = {
+  url: string;
+  namespace: Namespace;
+};
+
 type RepositoryRouteProps = {
   url: string;
   repository: Repository;
@@ -41,6 +46,8 @@ type RepositoryRouteProps = {
 
 type RepositoryNavProps = WithTranslation & { url: string };
 
+type NamespaceNavProps = WithTranslation & { url: string };
+
 class ConfigurationBinder {
   i18nNamespace = "plugins";
 
@@ -54,11 +61,7 @@ class ConfigurationBinder {
   }
 
   route(path: string, Component: any) {
-    return (
-      <Route path={urls.escapeUrlForRoute(path)} exact>
-        {Component}
-      </Route>
-    );
+    return <Route path={urls.escapeUrlForRoute(path)}>{Component}</Route>;
   }
 
   bindGlobal(to: string, labelI18nKey: string, linkName: string, ConfigurationComponent: any) {
@@ -70,7 +73,7 @@ class ConfigurationBinder {
 
     // create NavigationLink with translated label
     const ConfigNavLink = withTranslation(this.i18nNamespace)(({ t }) => {
-      return this.navLink("/admin/settings" + to, labelI18nKey, t);
+      return this.navLink("/admin/settings" + to, labelI18nKey, t, { activeOnlyWhenExact: false });
     });
 
     // bind navigation link to extension point
@@ -151,7 +154,7 @@ class ConfigurationBinder {
 
     // create NavigationLink with translated label
     const RepoNavLink = withTranslation(this.i18nNamespace)(({ t, url }: RepositoryNavProps) => {
-      return this.navLink(url + "/settings" + to, labelI18nKey, t);
+      return this.navLink(url + "/settings" + to, labelI18nKey, t, { activeOnlyWhenExact: false });
     });
 
     // bind navigation link to extension point
@@ -171,6 +174,36 @@ class ConfigurationBinder {
     // bind config route to extension point
     binder.bind("repository.route", RepoRoute, repoPredicate);
   }
+
+  bindNamespaceSetting(
+    to: string,
+    labelI18nKey: string,
+    linkName: string,
+    ConfigurationComponent: ComponentType<{ link: string; namespace: Namespace }>
+  ) {
+    const namespacePredicate = (props: (extensionPoints.NamespaceSetting | extensionPoints.NamespaceRoute)["props"]) =>
+      props.namespace && props.namespace._links && props.namespace._links[linkName];
+
+    const NamespaceNavLink: FC<extensionPoints.NamespaceRoute["props"]> = ({ url }) => {
+      const [t] = useTranslation(this.i18nNamespace);
+      return this.navLink(url + "/settings" + to, labelI18nKey, t, { activeOnlyWhenExact: false });
+    };
+
+    binder.bind<extensionPoints.NamespaceSetting>("namespace.setting", NamespaceNavLink, namespacePredicate);
+
+    const NamespaceRoute: FC<extensionPoints.NamespaceRoute["props"]> = ({ url, namespace, ...additionalProps }) => {
+      const link = namespace._links[linkName];
+      if (link) {
+        return this.route(
+          urls.unescapeUrlForRoute(url) + "/settings" + to,
+          <ConfigurationComponent namespace={namespace} link={(link as Link).href} {...additionalProps} />
+        );
+      }
+      return null;
+    };
+
+    binder.bind<extensionPoints.NamespaceRoute>("namespace.route", NamespaceRoute, namespacePredicate);
+  }
 }
 
 export default new ConfigurationBinder();

package/src/forms/FileInput.tsx

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ChangeEvent, FC, FocusEvent, useState } from "react";
+import React, { ChangeEvent, FocusEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { createAttributesForTesting } from "../devBuild";
@@ -39,77 +39,66 @@ type Props = {
   testId?: string;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
-  ref?: React.Ref<HTMLInputElement>;
 };
 
-const FileInput: FC<Props> = ({
-  name,
-  filenamePlaceholder,
-  testId,
-  helpText,
-  placeholder,
-  disabled,
-  label,
-  className,
-  ref,
-  onBlur,
-  onChange,
-}) => {
-  const [t] = useTranslation("commons");
-  const [file, setFile] = useState<File | null>(null);
+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 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" />
+    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>
             </span>
-            <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>
+            {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>
-    </div>
-  );
-};
+    );
+  }
+);
 
 export default FileInput;