From a9cf787364e5557f4d39fff33ad17ec441bba56a Mon Sep 17 00:00:00 2001 From: Konstantin Schaper Date: Mon, 5 Oct 2020 13:10:53 +0200 Subject: [PATCH] replace confirmAlert function usage with the actual component --- .../roles/containers/DeleteRepositoryRole.tsx | 93 +++++++++-------- .../src/groups/containers/DeleteGroup.tsx | 84 ++++++++-------- .../src/repos/containers/DeleteRepo.tsx | 99 ++++++++++--------- .../buttons/DeletePermissionButton.tsx | 86 ++++++++-------- .../src/users/containers/DeleteUser.tsx | 84 ++++++++-------- 5 files changed, 232 insertions(+), 214 deletions(-) diff --git a/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx b/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx index fc203cee02..1308bb8f70 100644 --- a/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx +++ b/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,59 +42,68 @@ type Props = WithTranslation & { history: History; }; -class DeleteRepositoryRole extends React.Component { - static defaultProps = { - confirmDialog: true +const DeleteRepositoryRole: FC = ({ + 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: [ - { - className: "is-outlined", - label: t("repositoryRole.delete.confirmAlert.submit"), - onClick: () => this.deleteRole() - }, - { - label: t("repositoryRole.delete.confirmAlert.cancel"), - onClick: () => null - } - ] - }); + const isDeletable = () => { + return role._links.delete; }; - isDeletable = () => { - return this.props.role._links.delete; - }; + const action = confirmDialog ? confirmDelete : deleteRoleCallback; - render() { - const { loading, error, confirmDialog, t } = this.props; - const action = confirmDialog ? this.confirmDelete : this.deleteRole; - - if (!this.isDeletable()) { - return null; - } + if (!isDeletable()) { + return null; + } + if (showConfirmAlert) { return ( - <> -
- - } /> - + deleteRoleCallback() + }, + { + label: t("repositoryRole.delete.confirmAlert.cancel"), + onClick: () => null + } + ]} + close={() => setShowConfirmAlert(false)} + /> ); } -} + + return ( + <> +
+ + } /> + + ); +}; const mapStateToProps = (state: any, ownProps: Props) => { const loading = isDeleteRolePending(state, ownProps.role.name); diff --git a/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx b/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx index 64f940ba69..d3e3661152 100644 --- a/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx +++ b/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,59 +42,59 @@ type Props = WithTranslation & { history: History; }; -export class DeleteGroup extends React.Component { - static defaultProps = { - confirmDialog: true +export const DeleteGroup: FC = ({ 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: [ - { - className: "is-outlined", - label: t("deleteGroup.confirmAlert.submit"), - onClick: () => this.deleteGroup() - }, - { - label: t("deleteGroup.confirmAlert.cancel"), - onClick: () => null - } - ] - }); + const isDeletable = () => { + return group._links.delete; }; - isDeletable = () => { - return this.props.group._links.delete; - }; + const action = confirmDialog ? confirmDelete : deleteGroupCallback; - render() { - const { loading, error, confirmDialog, t } = this.props; - const action = confirmDialog ? this.confirmDelete : this.deleteGroup; - - if (!this.isDeletable()) { - return null; - } + if (!isDeletable()) { + return null; + } + if (showConfirmAlert) { return ( - <> -
- - } /> - + deleteGroupCallback() + }, + { + label: t("deleteGroup.confirmAlert.cancel"), + onClick: () => null + } + ]} + /> ); } -} + + return ( + <> +
+ + } /> + + ); +}; const mapStateToProps = (state: any, ownProps: Props) => { const loading = isDeleteGroupPending(state, ownProps.group.name); diff --git a/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx b/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx index 23f6ea10a5..18ecf8c171 100644 --- a/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx +++ b/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,67 +39,68 @@ type Props = RouteComponentProps & deleteRepo: (p1: Repository, p2: () => void) => void; }; -class DeleteRepo extends React.Component { - static defaultProps = { - confirmDialog: true +const DeleteRepo: FC = ({ 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: [ - { - className: "is-outlined", - label: t("deleteRepo.confirmAlert.submit"), - onClick: () => this.deleteRepo() - }, - { - label: t("deleteRepo.confirmAlert.cancel"), - onClick: () => null - } - ] - }); + const isDeletable = () => { + return repository._links.delete; }; - isDeletable = () => { - return this.props.repository._links.delete; - }; + const action = confirmDialog ? confirmDelete : deleteRepoCallback; - render() { - const { loading, error, confirmDialog, t } = this.props; - const action = confirmDialog ? this.confirmDelete : this.deleteRepo; - - if (!this.isDeletable()) { - return null; - } + if (!isDeletable()) { + return null; + } + if (showConfirmAlert) { return ( - <> - - - {t("deleteRepo.subtitle")} -
- {t("deleteRepo.description")} -

+ deleteRepoCallback() + }, + { + label: t("deleteRepo.confirmAlert.cancel"), + onClick: () => null } - right={} - /> - + ]} + close={() => setShowConfirmAlert(false)} + /> ); } -} + + return ( + <> + + + {t("deleteRepo.subtitle")} +
+ {t("deleteRepo.description")} +

+ } + right={} + /> + + ); +}; const mapStateToProps = (state: any, ownProps: Props) => { const { namespace, name } = ownProps.repository; diff --git a/scm-ui/ui-webapp/src/repos/permissions/components/buttons/DeletePermissionButton.tsx b/scm-ui/ui-webapp/src/repos/permissions/components/buttons/DeletePermissionButton.tsx index a373434d64..1b9f6deaaf 100644 --- a/scm-ui/ui-webapp/src/repos/permissions/components/buttons/DeletePermissionButton.tsx +++ b/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,53 +35,61 @@ type Props = WithTranslation & { loading: boolean; }; -class DeletePermissionButton extends React.Component { - static defaultProps = { - confirmDialog: true +const DeletePermissionButton: FC = ({ + 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: [ - { - className: "is-outlined", - label: t("permission.delete-permission-button.confirm-alert.submit"), - onClick: () => this.deletePermission() - }, - { - label: t("permission.delete-permission-button.confirm-alert.cancel"), - onClick: () => null - } - ] - }); + const isDeletable = () => { + return permission._links.delete; }; - isDeletable = () => { - return this.props.permission._links.delete; - }; + const action = confirmDialog ? confirmDelete : deletePermissionCallback; - render() { - const { confirmDialog } = this.props; - const action = confirmDialog ? this.confirmDelete : this.deletePermission; + if (!isDeletable()) { + return null; + } - if (!this.isDeletable()) { - return null; - } + if (showConfirmAlert) { return ( - - - - - + deletePermissionCallback() + }, + { + label: t("permission.delete-permission-button.confirm-alert.cancel"), + onClick: () => null + } + ]} + /> ); } -} + + return ( + + + + + + ); +}; export default withTranslation("repos")(DeletePermissionButton); diff --git a/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx b/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx index be49f7e198..51a2b80387 100644 --- a/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx +++ b/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,59 +42,59 @@ type Props = WithTranslation & { history: History; }; -class DeleteUser extends React.Component { - static defaultProps = { - confirmDialog: true +const DeleteUser: FC = ({ 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: [ - { - className: "is-outlined", - label: t("deleteUser.confirmAlert.submit"), - onClick: () => this.deleteUser() - }, - { - label: t("deleteUser.confirmAlert.cancel"), - onClick: () => null - } - ] - }); + const isDeletable = () => { + return user._links.delete; }; - isDeletable = () => { - return this.props.user._links.delete; - }; + const action = confirmDialog ? confirmDelete : deleteUserCallback; - render() { - const { loading, error, confirmDialog, t } = this.props; - const action = confirmDialog ? this.confirmDelete : this.deleteUser; - - if (!this.isDeletable()) { - return null; - } + if (!isDeletable()) { + return null; + } + if (showConfirmAlert) { return ( - <> -
- - } /> - + deleteUserCallback() + }, + { + label: t("deleteUser.confirmAlert.cancel"), + onClick: () => null + } + ]} + /> ); } -} + + return ( + <> +
+ + } /> + + ); +}; const mapStateToProps = (state: any, ownProps: Props) => { const loading = isDeleteUserPending(state, ownProps.user.name);