diff --git a/src/components/ChannelsAvailability/ChannelsAvailability.stories.tsx b/src/components/ChannelsAvailability/ChannelsAvailability.stories.tsx
index 7239f2c71..3395d2e91 100644
--- a/src/components/ChannelsAvailability/ChannelsAvailability.stories.tsx
+++ b/src/components/ChannelsAvailability/ChannelsAvailability.stories.tsx
@@ -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", () => )
.add("with onChange", () => (
= ({
export const ChannelsAvailability: React.FC = props => {
const {
channelsList,
- errors,
+ errors = [],
selectedChannelsCount,
allChannelsCount,
channels,
@@ -387,6 +390,7 @@ export const ChannelsAvailability: React.FC = 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 = props =
selectedChannelsCount
}
);
+
return (
<>
@@ -408,12 +413,17 @@ export const ChannelsAvailability: React.FC = props =
description: "section header"
})}
toolbar={
-
+
+
+
}
/>
diff --git a/src/storybook/UserDecorator.tsx b/src/storybook/UserDecorator.tsx
new file mode 100644
index 000000000..744223271
--- /dev/null
+++ b/src/storybook/UserDecorator.tsx
@@ -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 => (
+
+ {storyFn()}
+
+);
+export default UserDecorator;
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index cf41379b4..24c0a8ee2 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -1303,19 +1303,7 @@ exports[`Storyshots Generics / AvailabilityCard default 1`] = `
-
-
+ />