diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/BaselineAlignment.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/BaselineAlignment.js deleted file mode 100644 index 3fe46c2bd3..0000000000 --- a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/BaselineAlignment.js +++ /dev/null @@ -1,8 +0,0 @@ -import styled from 'styled-components'; - -// TODO : Temporary baseline alignment -const BaselineAlignment = styled.div` - padding-top: 3px; -`; - -export default BaselineAlignment; diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/components/TableBody.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/components/TableBody.js new file mode 100644 index 0000000000..a663f39856 --- /dev/null +++ b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/components/TableBody.js @@ -0,0 +1,99 @@ +import React, { useCallback } from 'react'; +import PropTypes from 'prop-types'; +import { IconButton, Tbody, Text, Tr, Td, Row } from '@strapi/parts'; +import { EditIcon, DeleteIcon } from '@strapi/icons'; +import { CheckPermissions } from '@strapi/helper-plugin'; +import { useIntl } from 'react-intl'; +import { useHistory } from 'react-router-dom'; + +import { getTrad } from '../../../../utils'; +import pluginId from '../../../../pluginId'; + +const TableBody = ({ + sortedRoles, + canDelete, + permissions, + setRoleToDelete, + setShowConfirmDelete, + showConfirmDelete, +}) => { + const { formatMessage } = useIntl(); + const { push } = useHistory(); + + const checkCanDeleteRole = useCallback( + role => { + return canDelete && !['public', 'authenticated'].includes(role.type); + }, + [canDelete] + ); + + const handleClickDelete = id => { + setRoleToDelete(id); + setShowConfirmDelete(!showConfirmDelete); + }; + + const handleClickEdit = id => { + push(`/settings/${pluginId}/roles/${id}`); + }; + + return ( + + {sortedRoles?.map(role => ( + + + {role.name} + + + {role.description} + + + + {`${role.nb_users} ${formatMessage({ + id: getTrad('Roles.users'), + defaultMessage: 'users', + }).toLowerCase()}`} + + + + + + handleClickEdit(role.id)} + noBorder + icon={} + label="Edit" + /> + + {checkCanDeleteRole(role) && ( + + handleClickDelete(role.id)} + noBorder + icon={} + label="Delete" + /> + + )} + + + + ))} + + ); +}; + +export default TableBody; + +TableBody.defaultProps = { + canDelete: false, + showConfirmDelete: false, +}; + +TableBody.propTypes = { + permissions: PropTypes.object.isRequired, + setRoleToDelete: PropTypes.func.isRequired, + setShowConfirmDelete: PropTypes.func.isRequired, + sortedRoles: PropTypes.array.isRequired, + canDelete: PropTypes.bool, + showConfirmDelete: PropTypes.bool, +}; diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js index 7583015772..7890a07a7e 100644 --- a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js +++ b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js @@ -1,15 +1,11 @@ -import React, { useMemo } from 'react'; +import React, { useMemo, useState } from 'react'; import { Button, HeaderLayout, - IconButton, Layout, Main, Table, - Tbody, - Text, Tr, - Td, Thead, Th, TableLabel, @@ -18,8 +14,7 @@ import { ActionLayout, VisuallyHidden, } from '@strapi/parts'; -import { AddIcon, EditIcon } from '@strapi/icons'; -import { useIntl } from 'react-intl'; +import { AddIcon } from '@strapi/icons'; import { useTracking, SettingsPageTitle, @@ -31,15 +26,18 @@ import { Search, useQueryParams, EmptyStateLayout, + ConfirmDialog, } from '@strapi/helper-plugin'; +import { useIntl } from 'react-intl'; import { useHistory } from 'react-router-dom'; -import { useQuery } from 'react-query'; +import { useMutation, useQuery, useQueryClient } from 'react-query'; import matchSorter from 'match-sorter'; -import { fetchData } from './utils/api'; +import { fetchData, deleteData } from './utils/api'; import { getTrad } from '../../../utils'; import pluginId from '../../../pluginId'; import permissions from '../../../permissions'; +import TableBody from './components/TableBody'; const RoleListPage = () => { const { trackUsage } = useTracking(); @@ -49,6 +47,11 @@ const RoleListPage = () => { const { notifyStatus } = useNotifyAT(); const [{ query }] = useQueryParams(); const _q = query?._q || ''; + const [showConfirmDelete, setShowConfirmDelete] = useState(false); + const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState(false); + const [roleToDelete, setRoleToDelete] = useState(); + + const queryClient = useQueryClient(); const updatePermissions = useMemo(() => { return { @@ -61,7 +64,7 @@ const RoleListPage = () => { const { isLoading: isLoadingForPermissions, - allowedActions: { canRead }, + allowedActions: { canRead, canDelete }, } = useRBAC(updatePermissions); const { @@ -80,13 +83,8 @@ const RoleListPage = () => { push(`/settings/${pluginId}/roles/new`); }; - const pageTitle = formatMessage({ - id: getTrad('HeaderNav.link.roles'), - defaultMessage: 'Roles', - }); - - const handleClickEdit = id => { - push(`/settings/${pluginId}/roles/${id}`); + const handleShowConfirmDelete = () => { + setShowConfirmDelete(!showConfirmDelete); }; const emptyLayout = { @@ -100,6 +98,34 @@ const RoleListPage = () => { }, }; + const pageTitle = formatMessage({ + id: getTrad('HeaderNav.link.roles'), + defaultMessage: 'Roles', + }); + + const deleteMutation = useMutation(id => deleteData(id), { + onSuccess: async () => { + await queryClient.invalidateQueries('get-roles'); + }, + onError: err => { + if (err?.response?.data?.data) { + toggleNotification({ type: 'warning', message: err.response.data.data }); + } else { + toggleNotification({ + type: 'warning', + message: { id: 'notification.error', defaultMessage: 'An error occured' }, + }); + } + }, + }); + + const handleConfirmDelete = async () => { + setIsConfirmButtonLoading(true); + await deleteMutation.mutateAsync(roleToDelete); + setShowConfirmDelete(!showConfirmDelete); + setIsConfirmButtonLoading(false); + }; + const sortedRoles = matchSorter(roles || [], _q, { keys: ['name', 'description'] }); const emptyContent = _q && !sortedRoles.length ? 'search' : 'roles'; @@ -131,7 +157,7 @@ const RoleListPage = () => { } /> - } /> + } /> {!canRead && } {(isLoading || isLoadingForPermissions) && } {canRead && sortedRoles && sortedRoles?.length ? ( @@ -169,41 +195,25 @@ const RoleListPage = () => { - - {sortedRoles?.map(role => ( - - - {role.name} - - - {role.description} - - - - {`${role.nb_users} ${formatMessage({ - id: getTrad('Roles.users'), - defaultMessage: 'users', - }).toLowerCase()}`} - - - - - handleClickEdit(role.id)} - noBorder - icon={} - label="Edit" - /> - - - - ))} - + ) : ( )} + ); diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/utils/api.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/utils/api.js index dd6a1fb03c..bcf151d5b8 100644 --- a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/utils/api.js +++ b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/utils/api.js @@ -15,3 +15,11 @@ export const fetchData = async (toggleNotification, notifyStatus) => { throw new Error('error'); } }; + +export const deleteData = async id => { + try { + await axiosInstance.delete(`${getRequestURL('roles')}/${id}`); + } catch (error) { + console.log('error', error); + } +};