Review fixes

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",
@@ -17,9 +31,9 @@ const props: PermissionDeleteDialogProps = {
 storiesOf("Views / Permission Groups / Permission Group Delete", module)
   .addDecorator(Decorator)
   .add("remove single", () => <PermissionGroupDeleteDialog {...props} />)
-  .add("Got error", () => (
+  .add("Got permissions error", () => (
-    <PermissionGroupDeleteDialog
+    <PermissionGroupDeleteDialog {...props} error={permissionsError} />
-      {...props}
+  ))
-      error={"Something went realy wrong."}
+  .add("Get random permission group error", () => (
-    />
+    <PermissionGroupDeleteDialog {...props} error={requiredError} />
   ));

src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.tsx

@@ -5,10 +5,13 @@ 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;
-  error?: string;
+  error?: PermissionGroupErrorFragment;
   name: string;
   onClose: () => void;
   onConfirm: () => void;
@@ -25,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}
@@ -46,7 +60,7 @@ const PermissionGroupDeleteDialog: React.FC<PermissionDeleteDialogProps> = ({
           }}
         />
       </DialogContentText>
-      {!!error && <Typography color="error">{error}</Typography>}
+      {!!errorMessage && <Typography color="error">{errorMessage}</Typography>}
     </ActionDialog>
   );
 };

src/permissionGroups/views/PermissionGroupList/PermissionGroupList.tsx

@@ -18,7 +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 { PermissionGroupErrorFragment } from "@saleor/permissionGroups/types/PermissionGroupErrorFragment";
 import PermissionGroupListPage from "../../components/PermissionGroupListPage";
 import {
   permissionGroupListUrl,
@@ -75,7 +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<string>();
+  const [deleteError, setDeleteError] = React.useState<
+    PermissionGroupErrorFragment
+  >();
 
   const handleDeleteSuccess = (data: PermissionGroupDelete) => {
     if (data.permissionGroupDelete.errors.length === 0) {
@@ -85,15 +87,10 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
         })
       });
       refetch();
-      setDeleteError("");
+      setDeleteError(undefined);
       closeModal();
     } else {
-      setDeleteError(
+      setDeleteError(data.permissionGroupDelete.errors[0]);
-        getPermissionGroupErrorMessage(
-          data.permissionGroupDelete.errors[0],
-          intl
-        )
-      );
     }
   };
 

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

@@ -87464,7 +87464,13 @@ exports[`Storyshots Views / Permission Groups / Permission Group Create loading
 </div>
 `;
 
-exports[`Storyshots Views / Permission Groups / Permission Group Delete Got error 1`] = `
+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"
 />