enhance NamespaceStrategy API / improve frontend validation and use namespace extension point in RenameRepository component

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

@@ -26,8 +26,9 @@ import styled from "styled-components";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Repository, RepositoryType } from "@scm-manager/ui-types";
-import { Checkbox, Level, InputField, Select, SubmitButton, Subtitle, Textarea } from "@scm-manager/ui-components";
+import { Checkbox, InputField, Level, Select, SubmitButton, Subtitle, Textarea } from "@scm-manager/ui-components";
 import * as validator from "./repositoryValidation";
+import { CUSTOM_NAMESPACE_STRATEGY } from "../../modules/repos";
 
 const CheckboxWrapper = styled.div`
   margin-top: 2em;
@@ -59,8 +60,6 @@ type State = {
   contactValidationError: boolean;
 };
 
-const CUSTOM_NAMESPACE_STRATEGY = "CustomNamespaceStrategy";
-
 class RepositoryForm extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -108,7 +107,7 @@ class RepositoryForm extends React.Component<Props, State> {
     );
   };
 
-  submit = (event: Event) => {
+  submit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (this.isValid()) {
       this.props.submitForm(this.state.repository, this.state.initRepository);

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

@@ -23,7 +23,7 @@
  */
 
 import React, { FC } from "react";
-import { Repository } from "@scm-manager/ui-types";
+import { Repository, Links } from "@scm-manager/ui-types";
 import RenameRepository from "./RenameRepository";
 import DeleteRepo from "./DeleteRepo";
 import styled from "styled-components";
@@ -32,6 +32,7 @@ import { useTranslation } from "react-i18next";
 
 type Props = {
   repository: Repository;
+  indexLinks: Links;
 };
 
 const DangerZoneContainer = styled.div`
@@ -44,17 +45,15 @@ const DangerZoneContainer = styled.div`
   }
 `;
 
-const DangerZone: FC<Props> = ({ repository }) => {
+const DangerZone: FC<Props> = ({ repository, indexLinks }) => {
   const [t] = useTranslation("repos");
 
   const dangerZone = [];
-  if (repository?._links?.rename) {
-    dangerZone.push(<RenameRepository repository={repository} renameNamespace={false} />);
-  }
-  if (repository?._links?.renameWithNamespace) {
-    dangerZone.push(<RenameRepository repository={repository} renameNamespace={true} />);
+  if (repository?._links?.rename || repository?._links?.renameWithNamespace) {
+    dangerZone.push(<RenameRepository repository={repository} indexLinks={indexLinks} />);
   }
   if (repository?._links?.delete) {
+    // @ts-ignore
     dangerZone.push(<DeleteRepo repository={repository} />);
   }
 

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

@@ -25,17 +25,19 @@ import React from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 import RepositoryForm from "../components/form";
-import { Repository } from "@scm-manager/ui-types";
+import { Repository, Links } from "@scm-manager/ui-types";
 import { getModifyRepoFailure, isModifyRepoPending, modifyRepo, modifyRepoReset } from "../modules/repos";
 import { History } from "history";
 import { ErrorNotification } from "@scm-manager/ui-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { compose } from "redux";
 import DangerZone from "./DangerZone";
+import { getLinks } from "../../modules/indexResource";
 
 type Props = {
   loading: boolean;
   error: Error;
+  indexLinks: Links;
 
   modifyRepo: (p1: Repository, p2: () => void) => void;
   modifyRepoReset: (p: Repository) => void;
@@ -69,7 +71,7 @@ class EditRepo extends React.Component<Props> {
   };
 
   render() {
-    const { loading, error, repository } = this.props;
+    const { loading, error, repository, indexLinks } = this.props;
 
     const url = this.matchedUrl();
 
@@ -89,7 +91,7 @@ class EditRepo extends React.Component<Props> {
           }}
         />
         <ExtensionPoint name="repo-config.route" props={extensionProps} renderAll={true} />
-        <DangerZone repository={repository} />
+        <DangerZone repository={repository} indexLinks={indexLinks} />
       </>
     );
   }
@@ -99,9 +101,12 @@ const mapStateToProps = (state: any, ownProps: Props) => {
   const { namespace, name } = ownProps.repository;
   const loading = isModifyRepoPending(state, namespace, name);
   const error = getModifyRepoFailure(state, namespace, name);
+  const indexLinks = getLinks(state);
+
   return {
     loading,
-    error
+    error,
+    indexLinks
   };
 };
 

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

@@ -22,29 +22,22 @@
  * SOFTWARE.
  */
 
-import React, { FC, useState } from "react";
-import { Repository, Link } from "@scm-manager/ui-types";
-import { CONTENT_TYPE } from "../modules/repos";
-import {
-  ErrorNotification,
-  Level,
-  Button,
-  Loading,
-  Modal,
-  InputField,
-  validation,
-  ButtonGroup
-} from "@scm-manager/ui-components";
+import React, { FC, useEffect, useState } from "react";
+import { Link, Links, Repository } from "@scm-manager/ui-types";
+import { CONTENT_TYPE, CUSTOM_NAMESPACE_STRATEGY } from "../modules/repos";
+import { Button, ButtonGroup, ErrorNotification, InputField, Level, Loading, Modal } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
 import { apiClient } from "@scm-manager/ui-components/src";
 import { useHistory } from "react-router-dom";
+import { ExtensionPoint } from "@scm-manager/ui-extensions/src";
+import * as validator from "../components/form/repositoryValidation";
 
 type Props = {
   repository: Repository;
-  renameNamespace: boolean;
+  indexLinks: Links;
 };
 
-const RenameRepository: FC<Props> = ({ repository, renameNamespace }) => {
+const RenameRepository: FC<Props> = ({ repository, indexLinks }) => {
   let history = useHistory();
   const [t] = useTranslation("repos");
   const [error, setError] = useState<Error | undefined>(undefined);
@@ -52,6 +45,17 @@ const RenameRepository: FC<Props> = ({ repository, renameNamespace }) => {
   const [showModal, setShowModal] = useState(false);
   const [name, setName] = useState(repository.name);
   const [namespace, setNamespace] = useState(repository.namespace);
+  const [nameValidationError, setNameValidationError] = useState(false);
+  const [namespaceValidationError, setNamespaceValidationError] = useState(false);
+  const [currentNamespaceStrategie, setCurrentNamespaceStrategy] = useState("");
+
+  useEffect(() => {
+    apiClient
+      .get((indexLinks?.namespaceStrategies as Link).href)
+      .then(result => result.json())
+      .then(result => setCurrentNamespaceStrategy(result.current))
+      .catch(setError);
+  }, [repository]);
 
   if (error) {
     return <ErrorNotification error={error} />;
@@ -62,13 +66,40 @@ const RenameRepository: FC<Props> = ({ repository, renameNamespace }) => {
   }
 
   const isValid =
-    validation.isNameValid(name) &&
-    validation.isNameValid(namespace) &&
+    !nameValidationError &&
+    !namespaceValidationError &&
     (repository.name !== name || repository.namespace !== namespace);
 
+  const handleNamespaceChange = (namespace: string) => {
+    setNamespaceValidationError(!validator.isNameValid(namespace));
+    setNamespace(namespace);
+  };
+
+  const handleNameChange = (name: string) => {
+    setNameValidationError(!validator.isNameValid(name));
+    setName(name);
+  };
+
+  const renderNamespaceField = () => {
+    const props = {
+      label: t("repository.namespace"),
+      helpText: t("help.namespaceHelpText"),
+      value: namespace,
+      onChange: handleNamespaceChange,
+      errorMessage: t("validation.namespace-invalid"),
+      validationError: namespaceValidationError
+    };
+
+    if (currentNamespaceStrategie === CUSTOM_NAMESPACE_STRATEGY) {
+      return <InputField {...props} />;
+    }
+
+    return <ExtensionPoint name="repos.create.namespace" props={props} renderAll={false} />;
+  };
+
   const rename = () => {
     setLoading(true);
-    const url = renameNamespace
+    const url = repository?._links?.renameWithNamespace
       ? (repository?._links?.renameWithNamespace as Link).href
       : (repository?._links?.rename as Link).href;
 
@@ -84,17 +115,13 @@ const RenameRepository: FC<Props> = ({ repository, renameNamespace }) => {
       <InputField
         label={t("renameRepo.modal.label.repoName")}
         name={t("renameRepo.modal.label.repoName")}
+        errorMessage={t("validation.name-invalid")}
+        helpText={t("help.nameHelpText")}
+        validationError={nameValidationError}
         value={name}
-        onChange={setName}
+        onChange={handleNameChange}
       />
-      {renameNamespace && (
-        <InputField
-          label={t("renameRepo.modal.label.repoNamespace")}
-          name={t("renameRepo.modal.label.repoNamespace")}
-          value={namespace}
-          onChange={setNamespace}
-        />
-      )}
+      {renderNamespaceField()}
     </div>
   );
 

scm-ui/ui-webapp/src/repos/modules/repos.ts

@@ -27,7 +27,6 @@ import * as types from "../../modules/types";
 import { Action, Repository, RepositoryCollection } from "@scm-manager/ui-types";
 import { isPending } from "../../modules/pending";
 import { getFailure } from "../../modules/failure";
-import React from "react";
 
 export const FETCH_REPOS = "scm/repos/FETCH_REPOS";
 export const FETCH_REPOS_PENDING = `${FETCH_REPOS}_${types.PENDING_SUFFIX}`;
@@ -58,6 +57,8 @@ export const DELETE_REPO_FAILURE = `${DELETE_REPO}_${types.FAILURE_SUFFIX}`;
 
 export const CONTENT_TYPE = "application/vnd.scmm-repository+json;v=2";
 
+export const CUSTOM_NAMESPACE_STRATEGY = "CustomNamespaceStrategy";
+
 // fetch repos
 
 const SORT_BY = "sortBy=namespaceAndName";