Adjust tilted components

The tilted component in "bind"-components causes the settingscomponent to be seen as a new component and loses all states

scm-ui/ui-components/src/config/ConfigurationBinder.tsx

@@ -21,8 +21,11 @@ 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 { useDocumentTitleForRepository } from "@scm-manager/ui-core";
-import { useDocumentTitle } from "@scm-manager/ui-core";
+import {
+  TitledGlobalSettingComponent,
+  TitledNamespaceSettingComponent,
+  TitledRepositorySettingComponent,
+} from "./TitledSettings";
 
 type GlobalRouteProps = {
   url: string;
@@ -78,17 +81,10 @@ class ConfigurationBinder {
     const ConfigRoute = ({ url, links, ...additionalProps }: GlobalRouteProps) => {
       const link = links[linkName];
 
-      const TitledGlobalSettingComponent: FC = ({ children }) => {
-        const [t] = useTranslation(this.i18nNamespace);
-        const [commonTranslation] = useTranslation("commons");
-        useDocumentTitle(t(labelI18nKey), commonTranslation("documentTitle.globalConfiguration"));
-        return <>{children}</>;
-      };
-
       if (link) {
         return this.route(
           url + "/settings" + to,
-          <TitledGlobalSettingComponent>
+          <TitledGlobalSettingComponent i18nNamespace={this.i18nNamespace} label={labelI18nKey}>
             <ConfigurationComponent link={(link as Link).href} {...additionalProps} />
           </TitledGlobalSettingComponent>
         );
@@ -175,21 +171,14 @@ class ConfigurationBinder {
     const RepoRoute = ({ url, repository, ...additionalProps }: RepositoryRouteProps) => {
       const link = repository._links[linkName];
 
-      const TitledRepositorySettingComponent: FC = ({ children }) => {
-        const [t] = useTranslation(this.i18nNamespace);
-        const [commonTranslation] = useTranslation("commons");
-        useDocumentTitleForRepository(
-          repository,
-          t(labelI18nKey),
-          commonTranslation("documentTitle.repositoryConfiguration")
-        );
-        return <>{children}</>;
-      };
-
       if (link) {
         return this.route(
           urls.unescapeUrlForRoute(url) + "/settings" + to,
-          <TitledRepositorySettingComponent>
+          <TitledRepositorySettingComponent
+            i18nNamespace={this.i18nNamespace}
+            label={labelI18nKey}
+            repository={repository}
+          >
             <RepositoryComponent repository={repository} link={(link as Link).href} {...additionalProps} />
           </TitledRepositorySettingComponent>
         );
@@ -219,21 +208,14 @@ class ConfigurationBinder {
     const NamespaceRoute: FC<extensionPoints.NamespaceRoute["props"]> = ({ url, namespace, ...additionalProps }) => {
       const link = namespace._links[linkName];
 
-      const TitledNamespaceSettingComponent: FC = ({ children }) => {
-        const [t] = useTranslation(this.i18nNamespace);
-        const [commonTranslation] = useTranslation("commons");
-        useDocumentTitle(
-          t(labelI18nKey),
-          commonTranslation("documentTitle.namespaceConfiguration"),
-          namespace.namespace
-        );
-        return <>{children}</>;
-      };
-
       if (link) {
         return this.route(
           urls.unescapeUrlForRoute(url) + "/settings" + to,
-          <TitledNamespaceSettingComponent>
+          <TitledNamespaceSettingComponent
+            i18nNamespace={this.i18nNamespace}
+            label={labelI18nKey}
+            namespace={namespace}
+          >
             <ConfigurationComponent namespace={namespace} link={(link as Link).href} {...additionalProps} />
           </TitledNamespaceSettingComponent>
         );

scm-ui/ui-components/src/config/TitledSettings.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) 2020 - present Cloudogu GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/.
+ */
+
+import React, { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { useDocumentTitle, useDocumentTitleForRepository } from "@scm-manager/ui-core";
+import { Namespace, Repository } from "@scm-manager/ui-types";
+
+type GlobalProps = {
+  i18nNamespace: string;
+  label: string;
+};
+
+export const TitledGlobalSettingComponent: FC<GlobalProps> = ({ children, i18nNamespace, label }) => {
+  const [t] = useTranslation(i18nNamespace);
+  const [commonTranslation] = useTranslation("commons");
+  useDocumentTitle(t(label), commonTranslation("documentTitle.globalConfiguration"));
+  return <>{children}</>;
+};
+
+type RepositoryProps = {
+  i18nNamespace: string;
+  label: string;
+  repository: Repository;
+};
+
+export const TitledRepositorySettingComponent: FC<RepositoryProps> = ({
+  children,
+  i18nNamespace,
+  label,
+  repository,
+}) => {
+  const [t] = useTranslation(i18nNamespace);
+  const [commonTranslation] = useTranslation("commons");
+  useDocumentTitleForRepository(repository, t(label), commonTranslation("documentTitle.repositoryConfiguration"));
+  return <>{children}</>;
+};
+
+type NamespaceProps = {
+  i18nNamespace: string;
+  label: string;
+  namespace: Namespace;
+};
+
+export const TitledNamespaceSettingComponent: FC<NamespaceProps> = ({ children, i18nNamespace, label, namespace }) => {
+  const [t] = useTranslation(i18nNamespace);
+  const [commonTranslation] = useTranslation("commons");
+  useDocumentTitle(t(label), commonTranslation("documentTitle.namespaceConfiguration"), namespace.namespace);
+  return <>{children}</>;
+};