diff --git a/src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.stories.tsx b/src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.stories.tsx index 4b43cffa7..ee5bb800d 100644 --- a/src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.stories.tsx +++ b/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", () => ) - .add("Got error", () => ( - + .add("Got permissions error", () => ( + + )) + .add("Get random permission group error", () => ( + )); diff --git a/src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.tsx b/src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.tsx index fc539cf34..930951170 100644 --- a/src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.tsx +++ b/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 = ({ }) => { 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 ( = ({ }} /> - {!!error && {error}} + {!!errorMessage && {errorMessage}} ); }; diff --git a/src/permissionGroups/views/PermissionGroupList/PermissionGroupList.tsx b/src/permissionGroups/views/PermissionGroupList/PermissionGroupList.tsx index 661ee88ed..b6f602f5d 100644 --- a/src/permissionGroups/views/PermissionGroupList/PermissionGroupList.tsx +++ b/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 = ({ >(navigate, permissionGroupListUrl, params); const permissionGroups = data?.permissionGroups?.edges.map(edge => edge.node); - const [deleteError, setDeleteError] = React.useState(); + 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 = ({ }) }); refetch(); - setDeleteError(""); + setDeleteError(undefined); closeModal(); } else { - setDeleteError( - getPermissionGroupErrorMessage( - data.permissionGroupDelete.errors[0], - intl - ) - ); + setDeleteError(data.permissionGroupDelete.errors[0]); } }; diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index c0e8783ee..0b2e2a331 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -87464,7 +87464,13 @@ exports[`Storyshots Views / Permission Groups / Permission Group Create loading `; -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`] = ` +
+`; + +exports[`Storyshots Views / Permission Groups / Permission Group Delete Got permissions error 1`] = `