Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-11 16:05:44 +01:00
Code Issues Packages Projects Releases Activity

replace confirmAlert function usage with the actual component

Browse Source
This commit is contained in:
Konstantin Schaper
2020-10-05 13:10:53 +02:00
parent e69e918d55
commit a9cf787364
5 changed files with 232 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

84
scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx
View File

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

99
scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
View File

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

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

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

84
scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx
View File

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