create Dangerzone

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

@@ -0,0 +1,74 @@
+/*
+ * 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 } from "react";
+import { Repository } from "@scm-manager/ui-types";
+import RenameRepository from "./RenameRepository";
+import DeleteRepo from "./DeleteRepo";
+import styled from "styled-components";
+import { Subtitle } from "@scm-manager/ui-components";
+import { useTranslation } from "react-i18next";
+
+type Props = {
+  repository: Repository;
+};
+
+const DangerZoneContainer = styled.div`
+  padding: 1rem;
+  border: 1px solid #ff6a88;
+  border-radius: 5px;
+  > *:not(:last-child) {
+    padding-bottom: 1.5rem;
+    border-bottom: solid 2px whitesmoke;
+  }
+`;
+
+const DangerZone: FC<Props> = ({ repository }) => {
+  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?.delete) {
+    dangerZone.push(<DeleteRepo repository={repository} />);
+  }
+
+  if (dangerZone.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <hr />
+      <Subtitle subtitle={t("repositoryForm.dangerZone")} />
+      <DangerZoneContainer>{dangerZone.map(entry => entry)}</DangerZoneContainer>
+    </>
+  );
+};
+
+export default DangerZone;

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

@@ -24,23 +24,21 @@
 import React from "react";
 import { connect } from "react-redux";
 import { compose } from "redux";
-import { withRouter } from "react-router-dom";
+import { RouteComponentProps, withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { Repository } from "@scm-manager/ui-types";
-import { confirmAlert, DeleteButton, ErrorNotification, Level } from "@scm-manager/ui-components";
+import { confirmAlert, DeleteButton, ErrorNotification, Level, ButtonGroup } from "@scm-manager/ui-components";
 import { deleteRepo, getDeleteRepoFailure, isDeleteRepoPending } from "../modules/repos";
 
-type Props = WithTranslation & {
-  loading: boolean;
-  error: Error;
-  repository: Repository;
-  confirmDialog?: boolean;
-  deleteRepo: (p1: Repository, p2: () => void) => void;
-
-  // context props
-  history: History;
-};
+type Props = RouteComponentProps &
+  WithTranslation & {
+    loading: boolean;
+    error: Error;
+    repository: Repository;
+    confirmDialog?: boolean;
+    deleteRepo: (p1: Repository, p2: () => void) => void;
+  };
 
 class DeleteRepo extends React.Component<Props> {
   static defaultProps = {
@@ -88,9 +86,16 @@ class DeleteRepo extends React.Component<Props> {
 
     return (
       <>
-        <hr />
         <ErrorNotification error={error} />
-        <Level right={<DeleteButton label={t("deleteRepo.button")} action={action} loading={loading} />} />
+        <Level
+          left={
+            <div>
+              <strong>{t("deleteRepo.subtitle")}</strong>
+              <p>{t("deleteRepo.description")}</p>
+            </div>
+          }
+          right={<DeleteButton label={t("deleteRepo.button")} action={action} loading={loading} />}
+        />
       </>
     );
   }

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

@@ -25,13 +25,13 @@ import React from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 import RepositoryForm from "../components/form";
-import DeleteRepo from "./DeleteRepo";
 import { Repository } 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";
 
 type Props = {
   loading: boolean;
@@ -79,7 +79,7 @@ class EditRepo extends React.Component<Props> {
     };
 
     return (
-      <div>
+      <>
         <ErrorNotification error={error} />
         <RepositoryForm
           repository={this.props.repository}
@@ -89,8 +89,8 @@ class EditRepo extends React.Component<Props> {
           }}
         />
         <ExtensionPoint name="repo-config.route" props={extensionProps} renderAll={true} />
-        <DeleteRepo repository={repository} />
-      </div>
+        <DangerZone repository={repository} />
+      </>
     );
   }
 }
@@ -116,4 +116,4 @@ const mapDispatchToProps = (dispatch: any) => {
   };
 };
 
-export default compose(connect(mapStateToProps, mapDispatchToProps), withRouter)(EditRepo);
+export default compose(connect(mapStateToProps, mapDispatchToProps))(withRouter(EditRepo));

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

@@ -0,0 +1,129 @@
+/*
+ * 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, useState } from "react";
+import { Repository } from "@scm-manager/ui-types";
+import {
+  ErrorNotification,
+  Level,
+  Button,
+  Loading,
+  Modal,
+  InputField,
+  validation,
+  ButtonGroup
+} from "@scm-manager/ui-components";
+import { useTranslation } from "react-i18next";
+
+type Props = {
+  repository: Repository;
+  renameNamespace: boolean;
+};
+
+const RenameRepository: FC<Props> = ({ repository, renameNamespace }) => {
+  const [t] = useTranslation("repos");
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [loading, setLoading] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [repositoryName, setRepositoryName] = useState(repository.name);
+  const [repositoryNamespace, setRepositoryNamespace] = useState(repository.namespace);
+
+  if (error) {
+    return <ErrorNotification error={error} />;
+  }
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  const isValid =
+    validation.isNameValid(repositoryName) &&
+    validation.isNameValid(repositoryNamespace) &&
+    (repository.name !== repositoryName || repository.namespace !== repositoryNamespace);
+
+  const modalBody = (
+    <div>
+      <InputField
+        label={t("renameRepo.modal.label.repoName")}
+        name={t("renameRepo.modal.label.repoName")}
+        value={repositoryName}
+        onChange={setRepositoryName}
+      />
+      {renameNamespace && (
+        <InputField
+          label={t("renameRepo.modal.label.repoNamespace")}
+          name={t("renameRepo.modal.label.repoNamespace")}
+          value={repositoryNamespace}
+          onChange={setRepositoryNamespace}
+        />
+      )}
+    </div>
+  );
+
+  const footer = (
+    <>
+      <ButtonGroup>
+        <Button
+          color="warning"
+          icon="exclamation-triangle"
+          label={t("renameRepo.modal.button.rename")}
+          disabled={!isValid}
+          title={t("renameRepo.modal.button.rename")}
+        />
+        <Button label={t("renameRepo.modal.button.cancel")} action={() => setShowModal(false)} />
+      </ButtonGroup>
+    </>
+  );
+
+  return (
+    <>
+      <Modal
+        active={showModal}
+        title={t("renameRepo.modal.title")}
+        footer={footer}
+        body={modalBody}
+        closeFunction={() => setShowModal(false)}
+      />
+      <Level
+        left={
+          <div>
+            <strong>{t("renameRepo.subtitle")}</strong>
+            <p>{t("renameRepo.description")}</p>
+          </div>
+        }
+        right={
+          <Button
+            label={t("renameRepo.button")}
+            action={() => setShowModal(true)}
+            loading={loading}
+            color="warning"
+            icon="edit"
+          />
+        }
+      />
+    </>
+  );
+};
+
+export default RenameRepository;