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

Handle errors on group deletion

Browse source
This commit is contained in:
Krzysztof Wolski 2020-04-29 08:47:08 +02:00
parent e7f6bd1e77
commit 3d7a638b20
13 changed files with 54 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,4 +16,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 error", () => (
<PermissionGroupDeleteDialog
{...props}
error={"Something went realy wrong."}
/>
));

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

@ -4,17 +4,20 @@ import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import { Typography } from "@material-ui/core";
export interface PermissionDeleteDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
open: boolean;
error?: string;
name: string;
onConfirm: () => void;
onClose: () => void;
onConfirm: () => void;
open: boolean;
}
const PermissionGroupDeleteDialog: React.FC<PermissionDeleteDialogProps> = ({
confirmButtonState,
error,
name,
onClose,
onConfirm,
@ -43,6 +46,7 @@ const PermissionGroupDeleteDialog: React.FC<PermissionDeleteDialogProps> = ({
}}
/>
</DialogContentText>
{!!error && <Typography color="error">{error}</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;
}

11
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 getPermissionGroupErrorMessage from "@saleor/utils/errors/permissionGroups";
import PermissionGroupListPage from "../../components/PermissionGroupListPage";
import {
permissionGroupListUrl,
@ -74,6 +75,7 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
>(navigate, permissionGroupListUrl, params);
const permissionGroups = data?.permissionGroups?.edges.map(edge => edge.node);
const [deleteError, setDeleteError] = React.useState<string>();
const handleDeleteSuccess = (data: PermissionGroupDelete) => {
if (data.permissionGroupDelete.errors.length === 0) {
@ -83,7 +85,15 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
})
});
refetch();
setDeleteError("");
closeModal();
} else {
setDeleteError(
getPermissionGroupErrorMessage(
data.permissionGroupDelete.errors[0],
intl
)
);
}
};
@ -115,6 +125,7 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
}
})
}
error={deleteError}
name={getStringOrPlaceholder(
permissionGroups?.find(group => group.id === params.id)?.name
)}

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

@ -87464,6 +87464,12 @@ exports[`Storyshots Views / Permission Groups / Permission Group Create loading
</div>
`;
exports[`Storyshots Views / Permission Groups / Permission Group Delete Got error 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Views / Permission Groups / Permission Group Delete remove single 1`] = `
<div
style="padding:24px"
@ -90331,27 +90337,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"