Handle errors on group deletion

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

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

src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.tsx

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

src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx

@@ -148,6 +148,7 @@ const PermissionGroupList: React.FC<PermissionGroupListProps> = props => {
               <TableCell className={classes.colActions}>
                 {permissionGroup ? (
                   <>
+                    {permissionGroup.userCanManage && (
                       <IconButton
                         color="primary"
                         onClick={stopPropagation(() =>
@@ -156,6 +157,7 @@ const PermissionGroupList: React.FC<PermissionGroupListProps> = props => {
                       >
                         <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 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
         )}

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

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