disable Manage channels for user without permission (#858)

* create ChannelsAvailabilityWithPermission component

* revert changes in ChannelsAvailability, update snapshots

* replace hasManageChannelPermission with hasManageChannelsPermission

* use RequirePermissions in ChannelsAvailability, create UserDecorator
This commit is contained in:
AlicjaSzu 2020-11-30 14:08:09 +01:00 committed by GitHub
parent 375de15a6b
commit 6456cd21d2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 97 additions and 515 deletions

View file

@ -1,6 +1,9 @@
import { createChannelsDataFromProduct } from "@saleor/channels/utils";
import { User } from "@saleor/fragments/types/User";
import { product } from "@saleor/products/fixtures";
import Decorator from "@saleor/storybook/Decorator";
import UserDecorator from "@saleor/storybook/UserDecorator";
import { PermissionEnum } from "@saleor/types/globalTypes";
import { storiesOf } from "@storybook/react";
import React from "react";
@ -8,6 +11,22 @@ import ChannelsAvailability, {
ChannelsAvailabilityProps
} from "./ChannelsAvailability";
const user: User = {
__typename: "User",
avatar: null,
email: "email@example.com",
firstName: "User",
id: "123",
lastName: "User",
userPermissions: [
{
__typename: "UserPermission",
code: PermissionEnum.MANAGE_CHANNELS,
name: "Manage Channels"
}
]
};
const productChannels = createChannelsDataFromProduct(product(""));
const props: ChannelsAvailabilityProps = {
@ -24,6 +43,7 @@ const props: ChannelsAvailabilityProps = {
storiesOf("Generics / ChannelsAvailability", module)
.addDecorator(Decorator)
.addDecorator(UserDecorator(user))
.add("default", () => <ChannelsAvailability {...props} />)
.add("with onChange", () => (
<ChannelsAvailability

View file

@ -8,11 +8,14 @@ import CardTitle from "@saleor/components/CardTitle";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import Hr from "@saleor/components/Hr";
import RadioSwitchField from "@saleor/components/RadioSwitchField";
import RequirePermissions from "@saleor/components/RequirePermissions";
import { CollectionChannelListingErrorFragment } from "@saleor/fragments/types/CollectionChannelListingErrorFragment";
import { ProductChannelListingErrorFragment } from "@saleor/fragments/types/ProductChannelListingErrorFragment";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
import useUser from "@saleor/hooks/useUser";
import ArrowDropdown from "@saleor/icons/ArrowDropdown";
import { RequireOnlyOne } from "@saleor/misc";
import { PermissionEnum } from "@saleor/types/globalTypes";
import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors";
import classNames from "classnames";
import React, { useState } from "react";
@ -58,7 +61,7 @@ interface ChannelsAvailability {
channels: ChannelData[];
channelsList: ChannelList[];
channelsMessages?: { [id: string]: Message };
errors: Error[];
errors?: Error[];
selectedChannelsCount: number;
allChannelsCount: number;
disabled?: boolean;
@ -377,7 +380,7 @@ const Channel: React.FC<ChannelProps> = ({
export const ChannelsAvailability: React.FC<ChannelsAvailabilityProps> = props => {
const {
channelsList,
errors,
errors = [],
selectedChannelsCount,
allChannelsCount,
channels,
@ -387,6 +390,7 @@ export const ChannelsAvailability: React.FC<ChannelsAvailabilityProps> = props =
} = props;
const intl = useIntl();
const classes = useStyles({});
const { user } = useUser();
const channelsAvailabilityText = intl.formatMessage(
{
defaultMessage:
@ -399,6 +403,7 @@ export const ChannelsAvailability: React.FC<ChannelsAvailabilityProps> = props =
selectedChannelsCount
}
);
return (
<>
<Card>
@ -408,12 +413,17 @@ export const ChannelsAvailability: React.FC<ChannelsAvailabilityProps> = props =
description: "section header"
})}
toolbar={
<Button color="primary" onClick={openModal}>
{intl.formatMessage({
defaultMessage: "Manage",
description: "section header button"
})}
</Button>
<RequirePermissions
userPermissions={user?.userPermissions || []}
requiredPermissions={[PermissionEnum.MANAGE_CHANNELS]}
>
<Button color="primary" onClick={openModal}>
{intl.formatMessage({
defaultMessage: "Manage",
description: "section header button"
})}
</Button>
</RequirePermissions>
}
/>
<CardContent className={classes.card}>

View file

@ -0,0 +1,20 @@
import { UserContext } from "@saleor/auth";
import { User } from "@saleor/fragments/types/User";
import React from "react";
export const UserDecorator = (user: User) => storyFn => (
<UserContext.Provider
value={{
login: undefined,
loginByToken: undefined,
logout: undefined,
tokenAuthLoading: false,
tokenRefresh: undefined,
tokenVerifyLoading: false,
user
}}
>
{storyFn()}
</UserContext.Provider>
);
export default UserDecorator;

View file

@ -1303,19 +1303,7 @@ exports[`Storyshots Generics / AvailabilityCard default 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -14120,19 +14108,7 @@ exports[`Storyshots Shipping / ShippingZoneRates page default price 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -14571,19 +14547,7 @@ exports[`Storyshots Shipping / ShippingZoneRates page default weight 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -15116,19 +15080,7 @@ exports[`Storyshots Shipping / ShippingZoneRates page loading 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -15834,19 +15786,7 @@ exports[`Storyshots Shipping / ShippingZoneRates page update price 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -16369,19 +16309,7 @@ exports[`Storyshots Shipping / ShippingZoneRates page update weight 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -45543,19 +45471,7 @@ exports[`Storyshots Views / Collections / Collection details default 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -46845,19 +46761,7 @@ exports[`Storyshots Views / Collections / Collection details form errors 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -47556,19 +47460,7 @@ exports[`Storyshots Views / Collections / Collection details loading 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -48407,19 +48299,7 @@ exports[`Storyshots Views / Collections / Collection details no products 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -50378,19 +50258,7 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -51108,19 +50976,7 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -51832,19 +51688,7 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -63908,19 +63752,7 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -64914,19 +64746,7 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -65919,19 +65739,7 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -67286,19 +67094,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -68653,19 +68449,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -70035,19 +69819,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -71451,19 +71223,7 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -73182,19 +72942,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -76814,19 +76562,7 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -78297,19 +78033,7 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -80545,19 +80269,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -82834,19 +82546,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -84679,19 +84379,7 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -154166,19 +153854,7 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -155194,19 +154870,7 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -156379,19 +156043,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -163416,19 +163068,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -164921,19 +164561,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -166663,19 +166291,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -168342,19 +167958,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -170218,19 +169822,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -171982,19 +171574,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -173067,19 +172647,7 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -174719,19 +174287,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -176595,19 +176151,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"
@ -178359,19 +177903,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Manage
</span>
</button>
</div>
/>
</div>
<div
class="CardTitle-children-id"