Add extension point for repository creators (#1657)

Adds an extension point for repository creator such as repository create, repository import or repository mirror.

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

@@ -22,28 +22,35 @@
  * SOFTWARE.
  */
 import React, { FC, FormEvent, useState } from "react";
-import NamespaceAndNameFields from "./NamespaceAndNameFields";
-import { File, Repository } from "@scm-manager/ui-types";
-import RepositoryInformationForm from "./RepositoryInformationForm";
+import { File, RepositoryCreation } from "@scm-manager/ui-types";
 import { apiClient, ErrorNotification, Level, SubmitButton } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import ImportFullRepositoryForm from "./ImportFullRepositoryForm";
+import { SubFormProps } from "../types";
 
 type Props = {
   url: string;
   repositoryType: string;
   setImportPending: (pending: boolean) => void;
+  nameForm: React.ComponentType<SubFormProps>;
+  informationForm: React.ComponentType<SubFormProps>;
 };
 
-const ImportFullRepository: FC<Props> = ({ url, repositoryType, setImportPending }) => {
-  const [repo, setRepo] = useState<Repository>({
+const ImportFullRepository: FC<Props> = ({
+  url,
+  repositoryType,
+  setImportPending,
+  nameForm: NameForm,
+  informationForm: InformationForm
+}) => {
+  const [repo, setRepo] = useState<RepositoryCreation>({
     name: "",
     namespace: "",
     type: repositoryType,
     contact: "",
     description: "",
-    _links: {}
+    contextEntries: []
   });
   const [password, setPassword] = useState("");
   const [valid, setValid] = useState({ namespaceAndName: false, contact: true, file: false });
@@ -97,15 +104,15 @@ const ImportFullRepository: FC<Props> = ({ url, repositoryType, setImportPending
         setValid={(file: boolean) => setValid({ ...valid, file })}
       />
       <hr />
-      <NamespaceAndNameFields
+      <NameForm
         repository={repo}
-        onChange={setRepo as React.Dispatch<React.SetStateAction<Repository>>}
+        onChange={setRepo as React.Dispatch<React.SetStateAction<RepositoryCreation>>}
         setValid={(namespaceAndName: boolean) => setValid({ ...valid, namespaceAndName })}
         disabled={loading}
       />
-      <RepositoryInformationForm
+      <InformationForm
         repository={repo}
-        onChange={setRepo as React.Dispatch<React.SetStateAction<Repository>>}
+        onChange={setRepo as React.Dispatch<React.SetStateAction<RepositoryCreation>>}
         disabled={loading}
         setValid={(contact: boolean) => setValid({ ...valid, contact })}
       />

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

@@ -22,28 +22,35 @@
  * SOFTWARE.
  */
 import React, { FC, FormEvent, useState } from "react";
-import NamespaceAndNameFields from "./NamespaceAndNameFields";
-import { File, Repository } from "@scm-manager/ui-types";
-import RepositoryInformationForm from "./RepositoryInformationForm";
+import { File, RepositoryCreation } from "@scm-manager/ui-types";
 import { apiClient, ErrorNotification, Level, SubmitButton } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import ImportFromBundleForm from "./ImportFromBundleForm";
+import { SubFormProps } from "../types";
 
 type Props = {
   url: string;
   repositoryType: string;
   setImportPending: (pending: boolean) => void;
+  nameForm: React.ComponentType<SubFormProps>;
+  informationForm: React.ComponentType<SubFormProps>;
 };
 
-const ImportRepositoryFromBundle: FC<Props> = ({ url, repositoryType, setImportPending }) => {
-  const [repo, setRepo] = useState<Repository>({
+const ImportRepositoryFromBundle: FC<Props> = ({
+  url,
+  repositoryType,
+  setImportPending,
+  nameForm: NameForm,
+  informationForm: InformationForm
+}) => {
+  const [repo, setRepo] = useState<RepositoryCreation>({
     name: "",
     namespace: "",
     type: repositoryType,
     contact: "",
     description: "",
-    _links: {}
+    contextEntries: []
   });
   const [password, setPassword] = useState("");
   const [valid, setValid] = useState({ namespaceAndName: false, contact: true, file: false });
@@ -101,15 +108,15 @@ const ImportRepositoryFromBundle: FC<Props> = ({ url, repositoryType, setImportP
         disabled={loading}
       />
       <hr />
-      <NamespaceAndNameFields
+      <NameForm
         repository={repo}
-        onChange={setRepo as React.Dispatch<React.SetStateAction<Repository>>}
+        onChange={setRepo as React.Dispatch<React.SetStateAction<RepositoryCreation>>}
         setValid={(namespaceAndName: boolean) => setValid({ ...valid, namespaceAndName })}
         disabled={loading}
       />
-      <RepositoryInformationForm
+      <InformationForm
         repository={repo}
-        onChange={setRepo as React.Dispatch<React.SetStateAction<Repository>>}
+        onChange={setRepo as React.Dispatch<React.SetStateAction<RepositoryCreation>>}
         disabled={loading}
         setValid={(contact: boolean) => setValid({ ...valid, contact })}
       />

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

@@ -22,21 +22,28 @@
  * SOFTWARE.
  */
 import React, { FC, FormEvent, useState } from "react";
-import NamespaceAndNameFields from "./NamespaceAndNameFields";
-import { Repository, RepositoryUrlImport } from "@scm-manager/ui-types";
+import { RepositoryCreation, RepositoryUrlImport } from "@scm-manager/ui-types";
 import ImportFromUrlForm from "./ImportFromUrlForm";
-import RepositoryInformationForm from "./RepositoryInformationForm";
 import { apiClient, ErrorNotification, Level, SubmitButton } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
+import { SubFormProps } from "../types";
 
 type Props = {
   url: string;
   repositoryType: string;
   setImportPending: (pending: boolean) => void;
+  nameForm: React.ComponentType<SubFormProps>;
+  informationForm: React.ComponentType<SubFormProps>;
 };
 
-const ImportRepositoryFromUrl: FC<Props> = ({ url, repositoryType, setImportPending }) => {
+const ImportRepositoryFromUrl: FC<Props> = ({
+  url,
+  repositoryType,
+  setImportPending,
+  nameForm: NameForm,
+  informationForm: InformationForm
+}) => {
   const [repo, setRepo] = useState<RepositoryUrlImport>({
     name: "",
     namespace: "",
@@ -46,7 +53,7 @@ const ImportRepositoryFromUrl: FC<Props> = ({ url, repositoryType, setImportPend
     importUrl: "",
     username: "",
     password: "",
-    _links: {}
+    contextEntries: []
   });
 
   const [valid, setValid] = useState({ namespaceAndName: false, contact: true, importUrl: false });
@@ -96,15 +103,15 @@ const ImportRepositoryFromUrl: FC<Props> = ({ url, repositoryType, setImportPend
         disabled={loading}
       />
       <hr />
-      <NamespaceAndNameFields
+      <NameForm
         repository={repo}
-        onChange={setRepo as React.Dispatch<React.SetStateAction<Repository>>}
+        onChange={setRepo as React.Dispatch<React.SetStateAction<RepositoryCreation>>}
         setValid={(namespaceAndName: boolean) => setValid({ ...valid, namespaceAndName })}
         disabled={loading}
       />
-      <RepositoryInformationForm
+      <InformationForm
         repository={repo}
-        onChange={setRepo as React.Dispatch<React.SetStateAction<Repository>>}
+        onChange={setRepo as React.Dispatch<React.SetStateAction<RepositoryCreation>>}
         disabled={loading}
         setValid={(contact: boolean) => setValid({ ...valid, contact })}
       />

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

@@ -23,7 +23,7 @@
  */
 
 import React, { FC, useEffect, useState } from "react";
-import { Repository, CUSTOM_NAMESPACE_STRATEGY } from "@scm-manager/ui-types";
+import { CUSTOM_NAMESPACE_STRATEGY, RepositoryCreation } from "@scm-manager/ui-types";
 import { useTranslation } from "react-i18next";
 import { InputField } from "@scm-manager/ui-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
@@ -31,8 +31,8 @@ import * as validator from "./form/repositoryValidation";
 import { useNamespaceStrategies } from "@scm-manager/ui-api";
 
 type Props = {
-  repository: Repository;
-  onChange: (repository: Repository) => void;
+  repository: RepositoryCreation;
+  onChange: (repository: RepositoryCreation) => void;
   setValid: (valid: boolean) => void;
   disabled?: boolean;
 };
@@ -83,10 +83,10 @@ const NamespaceAndNameFields: FC<Props> = ({ repository, onChange, setValid, dis
   };
 
   const renderNamespaceField = () => {
-      let informationMessage = undefined;
-      if (repository?.namespace?.indexOf(" ") > 0) {
-        informationMessage =  t("validation.namespaceSpaceWarningText");
-      }
+    let informationMessage = undefined;
+    if (repository?.namespace?.indexOf(" ") > 0) {
+      informationMessage = t("validation.namespaceSpaceWarningText");
+    }
 
     const props = {
       label: t("repository.namespace"),

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

@@ -23,15 +23,15 @@
  */
 import React, { FC, useState } from "react";
 import { InputField, Textarea } from "@scm-manager/ui-components";
-import { Repository } from "@scm-manager/ui-types";
+import { RepositoryCreation } from "@scm-manager/ui-types";
 import { useTranslation } from "react-i18next";
 import * as validator from "./form/repositoryValidation";
 
 type Props = {
-  repository: Repository;
-  onChange: (repository: Repository) => void;
-  disabled: boolean;
+  repository: RepositoryCreation;
+  onChange: (repository: RepositoryCreation) => void;
   setValid: (valid: boolean) => void;
+  disabled?: boolean;
 };
 
 const RepositoryInformationForm: FC<Props> = ({ repository, onChange, disabled, setValid }) => {

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

@@ -24,12 +24,8 @@
 
 import React, { FC } from "react";
 import styled from "styled-components";
-import { useTranslation } from "react-i18next";
-import { Button, ButtonAddons, Icon, Level } from "@scm-manager/ui-components";
-
-type Props = {
-  creationMode: "CREATE" | "IMPORT";
-};
+import { Button, ButtonAddons, Icon, Level, urls } from "@scm-manager/ui-components";
+import { useLocation } from "react-router-dom";
 
 const MarginIcon = styled(Icon)`
   padding-right: 0.5rem;
@@ -52,40 +48,39 @@ const TopLevel = styled(Level)`
   }
 `;
 
-const RepositoryFormSwitcher: FC<Props> = ({ creationMode }) => {
-  const [t] = useTranslation("repos");
+type RepositoryForm = {
+  path: string;
+  icon: string;
+  label: string;
+};
 
-  const isImportMode = () => {
-    return creationMode === "IMPORT";
-  };
-
-  const isCreateMode = () => {
-    return creationMode === "CREATE";
-  };
+const RepositoryFormButton: FC<RepositoryForm> = ({ path, icon, label }) => {
+  const location = useLocation();
+  const href = urls.concat("/repos/create", path);
+  const isSelected = href === location.pathname;
 
   return (
-    <TopLevel
-      right={
-        <ButtonAddons>
-          <SmallButton
-            color={isCreateMode() ? "link is-selected" : undefined}
-            link={isImportMode() ? "/repos/create" : undefined}
-          >
-            <MarginIcon name="fa fa-plus" color={isCreateMode() ? "white" : "default"} />
-            <p className="is-hidden-mobile is-hidden-tablet-only">{t("repositoryForm.createButton")}</p>
-          </SmallButton>
-          <SmallButton
-            color={isImportMode() ? "link is-selected" : undefined}
-            link={isCreateMode() ? "/repos/import" : undefined}
-            className="has-text-left-desktop"
-          >
-            <MarginIcon name="fa fa-file-upload" color={isImportMode() ? "white" : "default"} />
-            <p className="is-hidden-mobile is-hidden-tablet-only">{t("repositoryForm.importButton")}</p>
-          </SmallButton>
-        </ButtonAddons>
-      }
-    />
+    <SmallButton color={isSelected ? "link is-selected" : undefined} link={!isSelected ? href : undefined}>
+      <MarginIcon name={icon} color={isSelected ? "white" : "default"} />
+      <p className="is-hidden-mobile is-hidden-tablet-only">{label}</p>
+    </SmallButton>
   );
 };
 
+type Props = {
+  forms: RepositoryForm[];
+};
+
+const RepositoryFormSwitcher: FC<Props> = ({ forms }) => (
+  <TopLevel
+    right={
+      <ButtonAddons>
+        {(forms || []).map(form => (
+          <RepositoryFormButton key={form.path} {...form} />
+        ))}
+      </ButtonAddons>
+    }
+  />
+);
+
 export default RepositoryFormSwitcher;