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

Handle errors on group deletion

src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.stories.tsx

@@ -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} />
+  ));

src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.tsx

@@ -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>
   );
 };

src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx

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

src/permissionGroups/fixtures.ts

@@ -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==",

src/permissionGroups/queries.ts

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

src/permissionGroups/types/PermissionGroupCreate.ts

@@ -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;
 }

src/permissionGroups/types/PermissionGroupDetails.ts

@@ -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;
 }

src/permissionGroups/types/PermissionGroupDetailsFragment.ts

@@ -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;
 }

src/permissionGroups/types/PermissionGroupFragment.ts

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

src/permissionGroups/types/PermissionGroupList.ts

@@ -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;
 }
 

src/permissionGroups/types/PermissionGroupUpdate.ts

@@ -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;
 }

src/permissionGroups/views/PermissionGroupList/PermissionGroupList.tsx

@@ -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
         )}

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -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"