Preselect namespace in repository create forms

Committed-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>

gradle/changelog/preselect_namespace_on_create.yaml

@@ -0,0 +1,2 @@
+- type: fixed
+  description: Preselect namespace in repository create forms

scm-ui/ui-webapp/src/repos/components/ImportFullRepository.tsx

@@ -23,11 +23,12 @@
  */
 import React, { FC, FormEvent, useCallback, useEffect, useState } from "react";
 import { Repository, RepositoryCreation, RepositoryType } from "@scm-manager/ui-types";
-import { ErrorNotification, Level, SubmitButton } from "@scm-manager/ui-components";
+import { ErrorNotification, Level, SubmitButton, urls } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
 import ImportFullRepositoryForm from "./ImportFullRepositoryForm";
 import { extensionPoints } from "@scm-manager/ui-extensions";
 import { useImportFullRepository } from "@scm-manager/ui-api";
+import { useLocation } from "react-router-dom";
 
 type Props = {
   repositoryType: RepositoryType;
@@ -44,9 +45,10 @@ const ImportFullRepository: FC<Props> = ({
   nameForm: NameForm,
   informationForm: InformationForm
 }) => {
+  const location = useLocation();
   const [repo, setRepo] = useState<RepositoryCreation>({
     name: "",
-    namespace: "",
+    namespace: urls.getValueStringFromLocationByKey(location, "namespace") || "",
     type: repositoryType.name,
     contact: "",
     description: ""

scm-ui/ui-webapp/src/repos/components/ImportRepositoryFromBundle.tsx

@@ -23,11 +23,12 @@
  */
 import React, { FC, FormEvent, useCallback, useEffect, useState } from "react";
 import { Repository, RepositoryCreation, RepositoryType } from "@scm-manager/ui-types";
-import { ErrorNotification, Level, SubmitButton } from "@scm-manager/ui-components";
+import { ErrorNotification, Level, SubmitButton, urls } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
 import ImportFromBundleForm from "./ImportFromBundleForm";
 import { extensionPoints } from "@scm-manager/ui-extensions";
 import { useImportRepositoryFromBundle } from "@scm-manager/ui-api";
+import { useLocation } from "react-router-dom";
 
 type Props = {
   repositoryType: RepositoryType;
@@ -44,9 +45,10 @@ const ImportRepositoryFromBundle: FC<Props> = ({
   nameForm: NameForm,
   informationForm: InformationForm
 }) => {
+  const location = useLocation();
   const [repo, setRepo] = useState<RepositoryCreation>({
     name: "",
-    namespace: "",
+    namespace: urls.getValueStringFromLocationByKey(location, "namespace") || "",
     type: repositoryType.name,
     contact: "",
     description: ""

scm-ui/ui-webapp/src/repos/components/ImportRepositoryFromUrl.tsx

@@ -24,10 +24,11 @@
 import React, { FC, FormEvent, useCallback, useEffect, useState } from "react";
 import { Repository, RepositoryCreation, RepositoryType, RepositoryUrlImport } from "@scm-manager/ui-types";
 import ImportFromUrlForm from "./ImportFromUrlForm";
-import { ErrorNotification, Level, SubmitButton } from "@scm-manager/ui-components";
+import { ErrorNotification, Level, SubmitButton, urls } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
 import { useImportRepositoryFromUrl } from "@scm-manager/ui-api";
 import { extensionPoints } from "@scm-manager/ui-extensions";
+import { useLocation } from "react-router-dom";
 
 type Props = {
   repositoryType: RepositoryType;
@@ -44,9 +45,10 @@ const ImportRepositoryFromUrl: FC<Props> = ({
   nameForm: NameForm,
   informationForm: InformationForm
 }) => {
+  const location = useLocation();
   const [repo, setRepo] = useState<RepositoryUrlImport>({
     name: "",
-    namespace: "",
+    namespace: urls.getValueStringFromLocationByKey(location, "namespace") || "",
     type: repositoryType.name,
     contact: "",
     description: "",

scm-ui/ui-webapp/src/repos/components/form/RepositoryForm.tsx

@@ -33,9 +33,10 @@ import {
   RepositoryCreation,
   RepositoryType
 } from "@scm-manager/ui-types";
-import { Checkbox, Level, Select, SubmitButton } from "@scm-manager/ui-components";
+import { Checkbox, Level, Select, SubmitButton, urls } from "@scm-manager/ui-components";
 import NamespaceAndNameFields from "../NamespaceAndNameFields";
 import RepositoryInformationForm from "../RepositoryInformationForm";
+import { useLocation } from "react-router-dom";
 
 type Props = {
   createRepository?: (repo: RepositoryCreation, shouldInit: boolean) => void;
@@ -43,6 +44,7 @@ type Props = {
   repository?: Repository;
   repositoryTypes?: RepositoryType[];
   namespaceStrategy?: string;
+  namespace?: string;
   loading: boolean;
   indexResources?: IndexResources;
 };
@@ -56,9 +58,10 @@ const RepositoryForm: FC<Props> = ({
   loading,
   indexResources
 }) => {
+  const location = useLocation();
   const [repo, setRepo] = useState<RepositoryBase>({
     name: "",
-    namespace: "",
+    namespace: urls.getValueStringFromLocationByKey(location, "namespace") || "",
     type: "",
     contact: "",
     description: ""

scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx

@@ -43,7 +43,7 @@ const RepositoryFormButton: FC<RepositoryForm> = ({ path, icon, label }) => {
     <Button
       className="is-size-6"
       color={isSelected ? "link is-selected" : undefined}
-      link={!isSelected ? href : undefined}
+      link={!isSelected ? href + location.search : undefined}
     >
       <Icon className="pr-2" name={icon} color="inherit" alt="" />
       <span className={classNames("is-hidden-mobile", "is-hidden-tablet-only")}>{t(`plugins:${label}`, label)}</span>

scm-ui/ui-webapp/src/repos/containers/Overview.tsx

@@ -175,6 +175,7 @@ const Overview: FC = () => {
 
   const hasExtensions = extensions.length > 0;
 
+  const createLink = namespace ? `/repos/create/?namespace=${namespace}`: "/repos/create/";
   return (
     <Page
       documentTitle={t("overview.title")}
@@ -205,7 +206,7 @@ const Overview: FC = () => {
             search={search}
             page={page}
           />
-          {showCreateButton ? <CreateButton label={t("overview.createButton")} link="/repos/create/" /> : null}
+          {showCreateButton ? <CreateButton label={t("overview.createButton")} link={createLink} /> : null}
         </div>
       </div>
       <PageActions>
@@ -221,7 +222,7 @@ const Overview: FC = () => {
               groupSelected={namespaceSelected}
               groupAriaLabelledby="select-namespace"
               link={namespace ? `repos/${namespace}` : "repos"}
-              createLink="/repos/create/"
+              createLink={createLink}
               label={t("overview.createButton")}
               testId="repository-overview"
               searchPlaceholder={t("overview.filterRepositories")}