djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #508 from mirumee/fix/error-on-group-deletion

Browse source 
Handle errors on group deletion
This commit is contained in:
Dominik Żegleń 2020-04-30 11:34:23 +02:00 committed by GitHub
commit 87fcc812a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 85 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.stories.tsx
View file

@ -5,6 +5,20 @@ import PermissionGroupDeleteDialog, {
PermissionDeleteDialogProps
} from "@saleor/permissionGroups/components/PermissionGroupDeleteDialog";
import Decorator from "@saleor/storybook/Decorator";
import { PermissionGroupErrorFragment } from "@saleor/permissionGroups/types/PermissionGroupErrorFragment";
import { PermissionGroupErrorCode } from "@saleor/types/globalTypes";
const permissionsError: PermissionGroupErrorFragment = {
__typename: "PermissionGroupError",
code: PermissionGroupErrorCode.OUT_OF_SCOPE_PERMISSION,
field: null
};
const requiredError: PermissionGroupErrorFragment = {
__typename: "PermissionGroupError",
code: PermissionGroupErrorCode.REQUIRED,
field: null
};
const props: PermissionDeleteDialogProps = {
confirmButtonState: "default",
@ -16,4 +30,10 @@ const props: PermissionDeleteDialogProps = {
storiesOf("Views / Permission Groups / Permission Group Delete", module)
.addDecorator(Decorator)
.add("remove single", () => <PermissionGroupDeleteDialog {...props} />);
.add("remove single", () => <PermissionGroupDeleteDialog {...props} />)
.add("Got permissions error", () => (
<PermissionGroupDeleteDialog {...props} error={permissionsError} />
))
.add("Get random permission group error", () => (
<PermissionGroupDeleteDialog {...props} error={requiredError} />
));

22
src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.tsx
View file

@ -4,17 +4,23 @@ import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import { Typography } from "@material-ui/core";
import { PermissionGroupErrorFragment } from "@saleor/permissionGroups/types/PermissionGroupErrorFragment";
import getPermissionGroupErrorMessage from "@saleor/utils/errors/permissionGroups";
import { PermissionGroupErrorCode } from "@saleor/types/globalTypes";
export interface PermissionDeleteDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
open: boolean;
error?: PermissionGroupErrorFragment;
name: string;
onConfirm: () => void;
onClose: () => void;
onConfirm: () => void;
open: boolean;
}
const PermissionGroupDeleteDialog: React.FC<PermissionDeleteDialogProps> = ({
confirmButtonState,
error,
name,
onClose,
onConfirm,
@ -22,6 +28,17 @@ const PermissionGroupDeleteDialog: React.FC<PermissionDeleteDialogProps> = ({
}) => {
const intl = useIntl();
let errorMessage;
if (error?.code === PermissionGroupErrorCode.OUT_OF_SCOPE_PERMISSION) {
errorMessage = intl.formatMessage({
defaultMessage:
"Cant's delete group which is out of your permission scope",
description: "deletion error message"
});
} else if (!!error) {
errorMessage = getPermissionGroupErrorMessage(error, intl);
}
return (
<ActionDialog
open={open}
@ -43,6 +60,7 @@ const PermissionGroupDeleteDialog: React.FC<PermissionDeleteDialogProps> = ({
}}
/>
</DialogContentText>
{!!errorMessage && <Typography color="error">{errorMessage}</Typography>}
</ActionDialog>
);
};

18
src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx
View file

@ -148,14 +148,16 @@ const PermissionGroupList: React.FC<PermissionGroupListProps> = props => {
<TableCell className={classes.colActions}>
{permissionGroup ? (
<>
<IconButton
color="primary"
onClick={stopPropagation(() =>
onDelete(permissionGroup.id)
)}
>
<DeleteIcon />
</IconButton>
{permissionGroup.userCanManage && (
<IconButton
color="primary"
onClick={stopPropagation(() =>
onDelete(permissionGroup.id)
)}
>
<DeleteIcon />
</IconButton>
)}
<IconButton color="primary">
<EditIcon />
</IconButton>

7
src/permissionGroups/fixtures.ts
View file

@ -16,6 +16,7 @@ export const permissionGroups: PermissionGroupList_permissionGroups_edges_node[]
node: {
id: "R3JvdXA6Mg==",
name: "Customer Support",
userCanManage: true,
users: [
{
id: "VXNlcjoyMQ==",
@ -32,6 +33,7 @@ export const permissionGroups: PermissionGroupList_permissionGroups_edges_node[]
node: {
id: "R3JvdXA6MQ==",
name: "Full Access",
userCanManage: false,
users: [
{
id: "VXNlcjoyMQ==",
@ -49,6 +51,7 @@ export const permissionGroups: PermissionGroupList_permissionGroups_edges_node[]
id: "R3JvdXA6NA==",
name: "Management",
users: [],
userCanManage: true,
__typename: "Group" as "Group"
},
__typename: "GroupCountableEdge" as "GroupCountableEdge"
@ -57,6 +60,7 @@ export const permissionGroups: PermissionGroupList_permissionGroups_edges_node[]
node: {
id: "R3JvdXA6Mw==",
name: "Editors",
userCanManage: true,
users: [
{
id: "VXNlcjoyMw==",
@ -79,6 +83,7 @@ export const permissionGroups: PermissionGroupList_permissionGroups_edges_node[]
node: {
id: "R3JvdXA6NQ==",
name: "Publishers",
userCanManage: true,
users: [],
__typename: "Group" as "Group"
},
@ -104,6 +109,7 @@ export const userPermissionGroups: StaffMemberDetails_user_permissionGroups[] =
export const emptyPermissionGroup: PermissionGroupDetails_permissionGroup = {
id: "R3JvdXA6Mw==",
name: "Editors",
userCanManage: true,
users: [],
__typename: "Group",
permissions: [
@ -131,6 +137,7 @@ export const errorsOfPermissionGroupCreate: PermissionGroupErrorFragment[] = [
export const permissionGroup: PermissionGroupDetails_permissionGroup = {
id: "R3JvdXA6Mw==",
name: "Editors",
userCanManage: true,
users: [
{
id: "VXNlcjoyMg==",

1
src/permissionGroups/queries.ts
View file

@ -16,6 +16,7 @@ export const permissionGroupFragment = gql`
fragment PermissionGroupFragment on Group {
id
name
userCanManage
users {
id
firstName

1
src/permissionGroups/types/PermissionGroupCreate.ts
View file

@ -39,6 +39,7 @@ export interface PermissionGroupCreate_permissionGroupCreate_group {
__typename: "Group";
id: string;
name: string;
userCanManage: boolean;
users: (PermissionGroupCreate_permissionGroupCreate_group_users | null)[] | null;
permissions: (PermissionGroupCreate_permissionGroupCreate_group_permissions | null)[] | null;
}

1
src/permissionGroups/types/PermissionGroupDetails.ts
View file

@ -33,6 +33,7 @@ export interface PermissionGroupDetails_permissionGroup {
__typename: "Group";
id: string;
name: string;
userCanManage: boolean;
users: (PermissionGroupDetails_permissionGroup_users | null)[] | null;
permissions: (PermissionGroupDetails_permissionGroup_permissions | null)[] | null;
}

1
src/permissionGroups/types/PermissionGroupDetailsFragment.ts
View file

@ -33,6 +33,7 @@ export interface PermissionGroupDetailsFragment {
__typename: "Group";
id: string;
name: string;
userCanManage: boolean;
users: (PermissionGroupDetailsFragment_users | null)[] | null;
permissions: (PermissionGroupDetailsFragment_permissions | null)[] | null;
}

1
src/permissionGroups/types/PermissionGroupFragment.ts
View file

@ -17,5 +17,6 @@ export interface PermissionGroupFragment {
__typename: "Group";
id: string;
name: string;
userCanManage: boolean;
users: (PermissionGroupFragment_users | null)[] | null;
}

1
src/permissionGroups/types/PermissionGroupList.ts
View file

@ -19,6 +19,7 @@ export interface PermissionGroupList_permissionGroups_edges_node {
__typename: "Group";
id: string;
name: string;
userCanManage: boolean;
users: (PermissionGroupList_permissionGroups_edges_node_users | null)[] | null;
}

1
src/permissionGroups/types/PermissionGroupUpdate.ts
View file

@ -39,6 +39,7 @@ export interface PermissionGroupUpdate_permissionGroupUpdate_group {
__typename: "Group";
id: string;
name: string;
userCanManage: boolean;
users: (PermissionGroupUpdate_permissionGroupUpdate_group_users | null)[] | null;
permissions: (PermissionGroupUpdate_permissionGroupUpdate_group_permissions | null)[] | null;
}

8
src/permissionGroups/views/PermissionGroupList/PermissionGroupList.tsx
View file

@ -18,6 +18,7 @@ import { usePermissionGroupListQuery } from "@saleor/permissionGroups/queries";
import { PermissionGroupDelete } from "@saleor/permissionGroups/types/PermissionGroupDelete";
import { usePermissionGroupDelete } from "@saleor/permissionGroups/mutations";
import { getStringOrPlaceholder } from "@saleor/misc";
import { PermissionGroupErrorFragment } from "@saleor/permissionGroups/types/PermissionGroupErrorFragment";
import PermissionGroupListPage from "../../components/PermissionGroupListPage";
import {
permissionGroupListUrl,
@ -74,6 +75,9 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
>(navigate, permissionGroupListUrl, params);
const permissionGroups = data?.permissionGroups?.edges.map(edge => edge.node);
const [deleteError, setDeleteError] = React.useState<
PermissionGroupErrorFragment
>();
const handleDeleteSuccess = (data: PermissionGroupDelete) => {
if (data.permissionGroupDelete.errors.length === 0) {
@ -83,7 +87,10 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
})
});
refetch();
setDeleteError(undefined);
closeModal();
} else {
setDeleteError(data.permissionGroupDelete.errors[0]);
}
};
@ -115,6 +122,7 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
}
})
}
error={deleteError}
name={getStringOrPlaceholder(
permissionGroups?.find(group => group.id === params.id)?.name
)}

33
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -89802,6 +89802,18 @@ exports[`Storyshots Views / Permission Groups / Permission Group Create loading
</div>
`;
exports[`Storyshots Views / Permission Groups / Permission Group Delete Get random permission group error 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Views / Permission Groups / Permission Group Delete Got permissions error 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Views / Permission Groups / Permission Group Delete remove single 1`] = `
<div
style="padding:24px"
@ -92669,27 +92681,6 @@ exports[`Storyshots Views / Permission Groups / Permission Group List default 1`
<td
class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label-id"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</span>
</button>
<button
class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
tabindex="0"