show namespace input field if custom namespace strategy is selected

scm-ui/public/locales/de/repos.json

@@ -1,5 +1,6 @@
 {
   "repository": {
+    "namespace": "Namespace",
     "name": "Name",
     "type": "Typ",
     "contact": "Kontakt",
@@ -8,10 +9,12 @@
     "lastModified": "Zuletzt bearbeitet"
   },
   "validation": {
+    "namespace-invalid": "Der Namespace des Repository ist ungültig",
     "name-invalid": "Der Name des Repository ist ungültig",
     "contact-invalid": "Der Kontakt muss eine gültige E-Mail Adresse sein"
   },
   "help": {
+    "namespaceHelpText": "Der Namespace des Repository. Dieser wird Teil der URL des Repository sein.",
     "nameHelpText": "Der Name des Repository. Dieser wird Teil der URL des Repository sein.",
     "typeHelpText": "Der Typ des Repository (Mercurial, Git oder Subversion).",
     "contactHelpText": "E-Mail Adresse der Person, die für das Repository verantwortlich ist.",

scm-ui/public/locales/en/repos.json

@@ -1,5 +1,6 @@
 {
   "repository": {
+    "namespace": "Namespace",
     "name": "Name",
     "type": "Type",
     "contact": "Contact",
@@ -8,10 +9,12 @@
     "lastModified": "Last Modified"
   },
   "validation": {
+    "namespace-invalid": "The repository namespace is invalid",
     "name-invalid": "The repository name is invalid",
     "contact-invalid": "Contact must be a valid mail address"
   },
   "help": {
+    "namespaceHelpText": "The namespace of the repository. This name will be part of the repository url.",
     "nameHelpText": "The name of the repository. This name will be part of the repository url.",
     "typeHelpText": "The type of the repository (e.g. Mercurial, Git or Subversion).",
     "contactHelpText": "Email address of the person who is responsible for this repository.",

scm-ui/src/repos/components/form/RepositoryForm.js

@@ -15,12 +15,14 @@ type Props = {
   submitForm: Repository => void,
   repository?: Repository,
   repositoryTypes: RepositoryType[],
+  namespaceStrategy: string,
   loading?: boolean,
   t: string => string
 };
 
 type State = {
   repository: Repository,
+  namespaceValidationError: boolean,
   nameValidationError: boolean,
   contactValidationError: boolean
 };
@@ -38,9 +40,9 @@ class RepositoryForm extends React.Component<Props, State> {
         description: "",
         _links: {}
       },
+      namespaceValidationError: false,
       nameValidationError: false,
-      contactValidationError: false,
-      descriptionValidationError: false
+      contactValidationError: false
     };
   }
 
@@ -61,6 +63,7 @@ class RepositoryForm extends React.Component<Props, State> {
   isValid = () => {
     const repository = this.state.repository;
     return !(
+      this.state.namespaceValidationError ||
       this.state.nameValidationError ||
       this.state.contactValidationError ||
       this.isFalsy(repository.name)
@@ -127,6 +130,22 @@ class RepositoryForm extends React.Component<Props, State> {
     });
   }
 
+  renderNamespaceField = () => {
+    const { namespaceStrategy, t } = this.props;
+    if (namespaceStrategy === "CustomNamespaceStrategy") {
+      const repository = this.state.repository;
+      return <InputField
+        label={t("repository.namespace")}
+        onChange={this.handleNamespaceChange}
+        value={repository ? repository.namespace : ""}
+        validationError={this.state.namespaceValidationError}
+        errorMessage={t("validation.namespace-invalid")}
+        helpText={t("help.namespaceHelpText")}
+      />;
+    }
+    return null;
+  };
+
   renderCreateOnlyFields() {
     if (!this.isCreateMode()) {
       return null;
@@ -135,6 +154,7 @@ class RepositoryForm extends React.Component<Props, State> {
     const repository = this.state.repository;
     return (
       <>
+        {this.renderNamespaceField()}
         <InputField
           label={t("repository.name")}
           onChange={this.handleNameChange}
@@ -154,6 +174,13 @@ class RepositoryForm extends React.Component<Props, State> {
     );
   }
 
+  handleNamespaceChange = (namespace: string) => {
+    this.setState({
+      namespaceValidationError: !validator.isNameValid(namespace),
+      repository: { ...this.state.repository, namespace }
+    });
+  };
+
   handleNameChange = (name: string) => {
     this.setState({
       nameValidationError: !validator.isNameValid(name),

scm-ui/src/repos/containers/Create.js

@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import { translate } from "react-i18next";
 import { Page } from "@scm-manager/ui-components";
 import RepositoryForm from "../components/form";
-import type { Repository, RepositoryType } from "@scm-manager/ui-types";
+import type { Repository, RepositoryType, NamespaceStrategies } from "@scm-manager/ui-types";
 import {
   fetchRepositoryTypesIfNeeded,
   getFetchRepositoryTypesFailure,
@@ -19,15 +19,21 @@ import {
 } from "../modules/repos";
 import type { History } from "history";
 import { getRepositoriesLink } from "../../modules/indexResource";
+import {
+  fetchNamespaceStrategiesIfNeeded,
+  getFetchNamespaceStrategiesFailure, getNamespaceStrategies, isFetchNamespaceStrategiesPending
+} from "../../config/modules/namespaceStrategies";
 
 type Props = {
   repositoryTypes: RepositoryType[],
-  typesLoading: boolean,
+  namespaceStrategies: NamespaceStrategies,
+  pageLoading: boolean,
   createLoading: boolean,
   error: Error,
   repoLink: string,
 
   // dispatch functions
+  fetchNamespaceStrategiesIfNeeded: () => void,
   fetchRepositoryTypesIfNeeded: () => void,
   createRepo: (
     link: string,
@@ -45,6 +51,7 @@ class Create extends React.Component<Props> {
   componentDidMount() {
     this.props.resetForm();
     this.props.fetchRepositoryTypesIfNeeded();
+    this.props.fetchNamespaceStrategiesIfNeeded();
   }
 
   repoCreated = (repo: Repository) => {
@@ -55,9 +62,10 @@ class Create extends React.Component<Props> {
 
   render() {
     const {
-      typesLoading,
+      pageLoading,
       createLoading,
       repositoryTypes,
+      namespaceStrategies,
       createRepo,
       error
     } = this.props;
@@ -67,13 +75,14 @@ class Create extends React.Component<Props> {
       <Page
         title={t("create.title")}
         subtitle={t("create.subtitle")}
-        loading={typesLoading}
+        loading={pageLoading}
         error={error}
         showContentOnError={true}
       >
         <RepositoryForm
           repositoryTypes={repositoryTypes}
           loading={createLoading}
+          namespaceStrategy={namespaceStrategies.current}
           submitForm={repo => {
             createRepo(repoLink, repo, (repo: Repository) =>
               this.repoCreated(repo)
@@ -87,14 +96,18 @@ class Create extends React.Component<Props> {
 
 const mapStateToProps = state => {
   const repositoryTypes = getRepositoryTypes(state);
-  const typesLoading = isFetchRepositoryTypesPending(state);
+  const namespaceStrategies = getNamespaceStrategies(state);
+  const pageLoading = isFetchRepositoryTypesPending(state)
+    || isFetchNamespaceStrategiesPending(state);
   const createLoading = isCreateRepoPending(state);
-  const error =
-    getFetchRepositoryTypesFailure(state) || getCreateRepoFailure(state);
+  const error = getFetchRepositoryTypesFailure(state) 
+    || getCreateRepoFailure(state)
+    || getFetchNamespaceStrategiesFailure(state);
   const repoLink = getRepositoriesLink(state);
   return {
     repositoryTypes,
-    typesLoading,
+    namespaceStrategies,
+    pageLoading,
     createLoading,
     error,
     repoLink
@@ -106,6 +119,9 @@ const mapDispatchToProps = dispatch => {
     fetchRepositoryTypesIfNeeded: () => {
       dispatch(fetchRepositoryTypesIfNeeded());
     },
+    fetchNamespaceStrategiesIfNeeded: () => {
+      dispatch(fetchNamespaceStrategiesIfNeeded());
+    },
     createRepo: (
       link: string,
       repository: Repository,