clean up code, fix bugs, improve ux, add docs

scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx

@@ -43,11 +43,11 @@ import {
   Level,
   SignatureIcon,
   Tooltip,
-  ErrorNotification
+  ErrorNotification,
+  CreateTagModal
 } from "@scm-manager/ui-components";
 import ContributorTable from "./ContributorTable";
 import { Link as ReactLink } from "react-router-dom";
-import CreateTagModal from "./CreateTagModal";
 
 type Props = WithTranslation & {
   changeset: Changeset;
@@ -226,7 +226,7 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
                 <Button
                   color="success"
                   className="tag"
-                  label={(changeset._embedded["tags"]?.length <= 1 && t("changeset.tag.create")) || ""}
+                  label={(changeset._embedded["tags"]?.length === 0 && t("changeset.tag.create")) || ""}
                   icon="plus"
                   action={() => setTagCreationModalVisible(true)}
                 />
@@ -236,7 +236,6 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
           {isTagCreationModalVisible && (
             <CreateTagModal
               revision={changeset.id}
-              tagNames={changeset._embedded["tags"].map((tag: Tag) => tag.name)}
               onClose={() => setTagCreationModalVisible(false)}
               onCreated={() => {
                 refetchChangeset?.();
@@ -244,6 +243,7 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
               }}
               onError={setError}
               tagCreationLink={(changeset._links["tag"] as Link).href}
+              existingTagsLink={(repository._links["tags"] as Link).href}
             />
           )}
         </article>

scm-ui/ui-webapp/src/repos/components/changesets/CreateTagModal.tsx

@@ -1,88 +0,0 @@
-/*
- * MIT License
- *
- * Copyright (c) 2020-present Cloudogu GmbH and Contributors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React, {FC, useEffect, useState} from "react";
-import { Modal, InputField, Button, apiClient } from "@scm-manager/ui-components";
-import { WithTranslation, withTranslation } from "react-i18next";
-
-type Props = WithTranslation & {
-  tagCreationLink: string;
-  tagNames: string[];
-  onClose: () => void;
-  onCreated: () => void;
-  onError: (error: Error) => void;
-  revision: string;
-};
-
-const CreateTagModal: FC<Props> = ({ t, onClose, tagCreationLink, onCreated, onError, revision, tagNames }) => {
-  const [newTagName, setNewTagName] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  const createTag = () => {
-    setLoading(true);
-    apiClient
-      .post(tagCreationLink, {
-        revision,
-        name: newTagName
-      })
-      .then(onCreated)
-      .catch(onError)
-      .finally(() => setLoading(false));
-  };
-
-  const isInvalid = () => {
-    return tagNames.includes(newTagName);
-  };
-
-  return (
-    <Modal
-      title={t("tags.create.title")}
-      active={true}
-      body={
-        <>
-          <InputField
-            name="name"
-            label={t("tags.create.form.field.name.label")}
-            onChange={val => setNewTagName(val)}
-            value={newTagName}
-            validationError={isInvalid()}
-            errorMessage={t("tags.create.form.field.name.error")}
-          />
-          <div className="mt-5">{t("tags.create.hint")}</div>
-        </>
-      }
-      footer={
-        <>
-          <Button action={onClose}>{t("tags.create.cancel")}</Button>
-          <Button color="success" action={() => createTag()} loading={loading} disabled={isInvalid()}>
-            {t("tags.create.confirm")}
-          </Button>
-        </>
-      }
-      closeFunction={onClose}
-    />
-  );
-};
-
-export default withTranslation("repos")(CreateTagModal);