replace confirmAlert function usage with the actual component

scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx

@@ -21,14 +21,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC, useState } from "react";
 import { connect } from "react-redux";
 import { compose } from "redux";
 import { withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { RepositoryRole } from "@scm-manager/ui-types";
-import { confirmAlert, DeleteButton, ErrorNotification, Level } from "@scm-manager/ui-components";
+import { ConfirmAlert, DeleteButton, ErrorNotification, Level } from "@scm-manager/ui-components";
 import { deleteRole, getDeleteRoleFailure, isDeleteRolePending } from "../modules/roles";
 
 type Props = WithTranslation & {
@@ -42,48 +42,58 @@ type Props = WithTranslation & {
   history: History;
 };
 
-class DeleteRepositoryRole extends React.Component<Props> {
-  static defaultProps = {
-    confirmDialog: true
+const DeleteRepositoryRole: FC<Props> = ({
+  confirmDialog = true,
+  history,
+  deleteRole,
+  role,
+  loading,
+  error,
+  t
+}: Props) => {
+  const [showConfirmAlert, setShowConfirmAlert] = useState(false);
+
+  const roleDeleted = () => {
+    history.push("/admin/roles/");
   };
 
-  roleDeleted = () => {
-    this.props.history.push("/admin/roles/");
+  const deleteRoleCallback = () => {
+    deleteRole(role, roleDeleted);
   };
 
-  deleteRole = () => {
-    this.props.deleteRole(this.props.role, this.roleDeleted);
+  const confirmDelete = () => {
+    setShowConfirmAlert(true);
   };
 
-  confirmDelete = () => {
-    const { t } = this.props;
-    confirmAlert({
-      title: t("repositoryRole.delete.confirmAlert.title"),
-      message: t("repositoryRole.delete.confirmAlert.message"),
-      buttons: [
+  const isDeletable = () => {
+    return role._links.delete;
+  };
+
+  const action = confirmDialog ? confirmDelete : deleteRoleCallback;
+
+  if (!isDeletable()) {
+    return null;
+  }
+
+  if (showConfirmAlert) {
+    return (
+      <ConfirmAlert
+        title={t("repositoryRole.delete.confirmAlert.title")}
+        message={t("repositoryRole.delete.confirmAlert.message")}
+        buttons={[
           {
             className: "is-outlined",
             label: t("repositoryRole.delete.confirmAlert.submit"),
-          onClick: () => this.deleteRole()
+            onClick: () => deleteRoleCallback()
           },
           {
             label: t("repositoryRole.delete.confirmAlert.cancel"),
             onClick: () => null
           }
-      ]
-    });
-  };
-
-  isDeletable = () => {
-    return this.props.role._links.delete;
-  };
-
-  render() {
-    const { loading, error, confirmDialog, t } = this.props;
-    const action = confirmDialog ? this.confirmDelete : this.deleteRole;
-
-    if (!this.isDeletable()) {
-      return null;
+        ]}
+        close={() => setShowConfirmAlert(false)}
+      />
+    );
   }
 
   return (
@@ -93,8 +103,7 @@ class DeleteRepositoryRole extends React.Component<Props> {
       <Level right={<DeleteButton label={t("repositoryRole.delete.button")} action={action} loading={loading} />} />
     </>
   );
-  }
-}
+};
 
 const mapStateToProps = (state: any, ownProps: Props) => {
   const loading = isDeleteRolePending(state, ownProps.role.name);

scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx

@@ -21,14 +21,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC, useState } from "react";
 import { connect } from "react-redux";
 import { compose } from "redux";
 import { withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { Group } from "@scm-manager/ui-types";
-import { confirmAlert, DeleteButton, ErrorNotification, Level } from "@scm-manager/ui-components";
+import { ConfirmAlert, DeleteButton, ErrorNotification, Level } from "@scm-manager/ui-components";
 import { deleteGroup, getDeleteGroupFailure, isDeleteGroupPending } from "../modules/groups";
 
 type Props = WithTranslation & {
@@ -42,48 +42,49 @@ type Props = WithTranslation & {
   history: History;
 };
 
-export class DeleteGroup extends React.Component<Props> {
-  static defaultProps = {
-    confirmDialog: true
+export const DeleteGroup: FC<Props> = ({ confirmDialog = true, group, history, t, deleteGroup, loading, error }) => {
+  const [showConfirmAlert, setShowConfirmAlert] = useState(false);
+
+  const deleteGroupCallback = () => {
+    deleteGroup(group, groupDeleted);
   };
 
-  deleteGroup = () => {
-    this.props.deleteGroup(this.props.group, this.groupDeleted);
+  const groupDeleted = () => {
+    history.push("/groups/");
   };
 
-  groupDeleted = () => {
-    this.props.history.push("/groups/");
+  const confirmDelete = () => {
+    setShowConfirmAlert(true);
   };
 
-  confirmDelete = () => {
-    const { t } = this.props;
-    confirmAlert({
-      title: t("deleteGroup.confirmAlert.title"),
-      message: t("deleteGroup.confirmAlert.message"),
-      buttons: [
+  const isDeletable = () => {
+    return group._links.delete;
+  };
+
+  const action = confirmDialog ? confirmDelete : deleteGroupCallback;
+
+  if (!isDeletable()) {
+    return null;
+  }
+
+  if (showConfirmAlert) {
+    return (
+      <ConfirmAlert
+        title={t("deleteGroup.confirmAlert.title")}
+        message={t("deleteGroup.confirmAlert.message")}
+        buttons={[
           {
             className: "is-outlined",
             label: t("deleteGroup.confirmAlert.submit"),
-          onClick: () => this.deleteGroup()
+            onClick: () => deleteGroupCallback()
           },
           {
             label: t("deleteGroup.confirmAlert.cancel"),
             onClick: () => null
           }
-      ]
-    });
-  };
-
-  isDeletable = () => {
-    return this.props.group._links.delete;
-  };
-
-  render() {
-    const { loading, error, confirmDialog, t } = this.props;
-    const action = confirmDialog ? this.confirmDelete : this.deleteGroup;
-
-    if (!this.isDeletable()) {
-      return null;
+        ]}
+      />
+    );
   }
 
   return (
@@ -93,8 +94,7 @@ export class DeleteGroup extends React.Component<Props> {
       <Level right={<DeleteButton label={t("deleteGroup.button")} action={action} loading={loading} />} />
     </>
   );
-  }
-}
+};
 
 const mapStateToProps = (state: any, ownProps: Props) => {
   const loading = isDeleteGroupPending(state, ownProps.group.name);

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

@@ -21,13 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC, useState } from "react";
 import { connect } from "react-redux";
 import { compose } from "redux";
 import { RouteComponentProps, withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
-import { confirmAlert, DeleteButton, ErrorNotification, Level } from "@scm-manager/ui-components";
+import { ConfirmAlert, DeleteButton, ErrorNotification, Level } from "@scm-manager/ui-components";
 import { deleteRepo, getDeleteRepoFailure, isDeleteRepoPending } from "../modules/repos";
 
 type Props = RouteComponentProps &
@@ -39,48 +39,50 @@ type Props = RouteComponentProps &
     deleteRepo: (p1: Repository, p2: () => void) => void;
   };
 
-class DeleteRepo extends React.Component<Props> {
-  static defaultProps = {
-    confirmDialog: true
+const DeleteRepo: FC<Props> = ({ confirmDialog = true, repository, history, deleteRepo, loading, error, t }: Props) => {
+  const [showConfirmAlert, setShowConfirmAlert] = useState(false);
+
+  const deleted = () => {
+    history.push("/repos/");
   };
 
-  deleted = () => {
-    this.props.history.push("/repos/");
+  const deleteRepoCallback = () => {
+    deleteRepo(repository, deleted);
   };
 
-  deleteRepo = () => {
-    this.props.deleteRepo(this.props.repository, this.deleted);
+  const confirmDelete = () => {
+    setShowConfirmAlert(true);
   };
 
-  confirmDelete = () => {
-    const { t } = this.props;
-    confirmAlert({
-      title: t("deleteRepo.confirmAlert.title"),
-      message: t("deleteRepo.confirmAlert.message"),
-      buttons: [
+  const isDeletable = () => {
+    return repository._links.delete;
+  };
+
+  const action = confirmDialog ? confirmDelete : deleteRepoCallback;
+
+  if (!isDeletable()) {
+    return null;
+  }
+
+  if (showConfirmAlert) {
+    return (
+      <ConfirmAlert
+        title={t("deleteRepo.confirmAlert.title")}
+        message={t("deleteRepo.confirmAlert.message")}
+        buttons={[
           {
             className: "is-outlined",
             label: t("deleteRepo.confirmAlert.submit"),
-          onClick: () => this.deleteRepo()
+            onClick: () => deleteRepoCallback()
           },
           {
             label: t("deleteRepo.confirmAlert.cancel"),
             onClick: () => null
           }
-      ]
-    });
-  };
-
-  isDeletable = () => {
-    return this.props.repository._links.delete;
-  };
-
-  render() {
-    const { loading, error, confirmDialog, t } = this.props;
-    const action = confirmDialog ? this.confirmDelete : this.deleteRepo;
-
-    if (!this.isDeletable()) {
-      return null;
+        ]}
+        close={() => setShowConfirmAlert(false)}
+      />
+    );
   }
 
   return (
@@ -98,8 +100,7 @@ class DeleteRepo extends React.Component<Props> {
       />
     </>
   );
-  }
-}
+};
 
 const mapStateToProps = (state: any, ownProps: Props) => {
   const { namespace, name } = ownProps.repository;

scm-ui/ui-webapp/src/repos/permissions/components/buttons/DeletePermissionButton.tsx

@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC, useState } from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Permission } from "@scm-manager/ui-types";
-import { confirmAlert } from "@scm-manager/ui-components";
+import { ConfirmAlert } from "@scm-manager/ui-components";
 
 type Props = WithTranslation & {
   permission: Permission;
@@ -35,45 +35,54 @@ type Props = WithTranslation & {
   loading: boolean;
 };
 
-class DeletePermissionButton extends React.Component<Props> {
-  static defaultProps = {
-    confirmDialog: true
+const DeletePermissionButton: FC<Props> = ({
+  confirmDialog = true,
+  permission,
+  namespace,
+  t,
+  deletePermission,
+  repoName
+}) => {
+  const [showConfirmAlert, setShowConfirmAlert] = useState(false);
+
+  const deletePermissionCallback = () => {
+    deletePermission(permission, namespace, repoName);
   };
 
-  deletePermission = () => {
-    this.props.deletePermission(this.props.permission, this.props.namespace, this.props.repoName);
+  const confirmDelete = () => {
+    setShowConfirmAlert(true);
   };
 
-  confirmDelete = () => {
-    const { t } = this.props;
-    confirmAlert({
-      title: t("permission.delete-permission-button.confirm-alert.title"),
-      message: t("permission.delete-permission-button.confirm-alert.message"),
-      buttons: [
+  const isDeletable = () => {
+    return permission._links.delete;
+  };
+
+  const action = confirmDialog ? confirmDelete : deletePermissionCallback;
+
+  if (!isDeletable()) {
+    return null;
+  }
+
+  if (showConfirmAlert) {
+    return (
+      <ConfirmAlert
+        title={t("permission.delete-permission-button.confirm-alert.title")}
+        message={t("permission.delete-permission-button.confirm-alert.message")}
+        buttons={[
           {
             className: "is-outlined",
             label: t("permission.delete-permission-button.confirm-alert.submit"),
-          onClick: () => this.deletePermission()
+            onClick: () => deletePermissionCallback()
           },
           {
             label: t("permission.delete-permission-button.confirm-alert.cancel"),
             onClick: () => null
           }
-      ]
-    });
-  };
-
-  isDeletable = () => {
-    return this.props.permission._links.delete;
-  };
-
-  render() {
-    const { confirmDialog } = this.props;
-    const action = confirmDialog ? this.confirmDelete : this.deletePermission;
-
-    if (!this.isDeletable()) {
-      return null;
+        ]}
+      />
+    );
   }
+
   return (
     <a className="level-item" onClick={action}>
       <span className="icon is-small">
@@ -81,7 +90,6 @@ class DeletePermissionButton extends React.Component<Props> {
       </span>
     </a>
   );
-  }
-}
+};
 
 export default withTranslation("repos")(DeletePermissionButton);

scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx

@@ -21,14 +21,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC, useState } from "react";
 import { connect } from "react-redux";
 import { compose } from "redux";
 import { withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { User } from "@scm-manager/ui-types";
-import { confirmAlert, DeleteButton, ErrorNotification, Level } from "@scm-manager/ui-components";
+import { ConfirmAlert, DeleteButton, ErrorNotification, Level } from "@scm-manager/ui-components";
 import { deleteUser, getDeleteUserFailure, isDeleteUserPending } from "../modules/users";
 
 type Props = WithTranslation & {
@@ -42,48 +42,49 @@ type Props = WithTranslation & {
   history: History;
 };
 
-class DeleteUser extends React.Component<Props> {
-  static defaultProps = {
-    confirmDialog: true
+const DeleteUser: FC<Props> = ({ confirmDialog = true, loading, error, t, history, user, deleteUser }) => {
+  const [showConfirmAlert, setShowConfirmAlert] = useState(false);
+
+  const userDeleted = () => {
+    history.push("/users/");
   };
 
-  userDeleted = () => {
-    this.props.history.push("/users/");
+  const deleteUserCallback = () => {
+    deleteUser(user, userDeleted);
   };
 
-  deleteUser = () => {
-    this.props.deleteUser(this.props.user, this.userDeleted);
+  const confirmDelete = () => {
+    setShowConfirmAlert(true);
   };
 
-  confirmDelete = () => {
-    const { t } = this.props;
-    confirmAlert({
-      title: t("deleteUser.confirmAlert.title"),
-      message: t("deleteUser.confirmAlert.message"),
-      buttons: [
+  const isDeletable = () => {
+    return user._links.delete;
+  };
+
+  const action = confirmDialog ? confirmDelete : deleteUserCallback;
+
+  if (!isDeletable()) {
+    return null;
+  }
+
+  if (showConfirmAlert) {
+    return (
+      <ConfirmAlert
+        title={t("deleteUser.confirmAlert.title")}
+        message={t("deleteUser.confirmAlert.message")}
+        buttons={[
           {
             className: "is-outlined",
             label: t("deleteUser.confirmAlert.submit"),
-          onClick: () => this.deleteUser()
+            onClick: () => deleteUserCallback()
           },
           {
             label: t("deleteUser.confirmAlert.cancel"),
             onClick: () => null
           }
-      ]
-    });
-  };
-
-  isDeletable = () => {
-    return this.props.user._links.delete;
-  };
-
-  render() {
-    const { loading, error, confirmDialog, t } = this.props;
-    const action = confirmDialog ? this.confirmDelete : this.deleteUser;
-
-    if (!this.isDeletable()) {
-      return null;
+        ]}
+      />
+    );
   }
 
   return (
@@ -93,8 +94,7 @@ class DeleteUser extends React.Component<Props> {
       <Level right={<DeleteButton label={t("deleteUser.button")} action={action} loading={loading} />} />
     </>
   );
-  }
-}
+};
 
 const mapStateToProps = (state: any, ownProps: Props) => {
   const loading = isDeleteUserPending(state, ownProps.user.name);