diff --git a/package.json b/package.json index f0831f122..efa47f4bc 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.58", "@material-ui/styles": "^4.11.4", - "@saleor/macaw-ui": "^0.3.1", + "@saleor/macaw-ui": "0.3.1", "@saleor/sdk": "^0.4.2", "@sentry/react": "^6.0.0", "@types/faker": "^5.1.6", diff --git a/src/auth/hooks/useUserPermissions.ts b/src/auth/hooks/useUserPermissions.ts new file mode 100644 index 000000000..448e8f196 --- /dev/null +++ b/src/auth/hooks/useUserPermissions.ts @@ -0,0 +1,3 @@ +import { useUser } from ".."; + +export const useUserPermissions = () => useUser().user?.userPermissions; diff --git a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx b/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx index 6e9875999..26c88ea73 100644 --- a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx +++ b/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx @@ -1,5 +1,4 @@ import { Card, CardContent, Typography } from "@material-ui/core"; -import { useUser } from "@saleor/auth"; import CardTitle from "@saleor/components/CardTitle"; import Hr from "@saleor/components/Hr"; import RequirePermissions from "@saleor/components/RequirePermissions"; @@ -28,7 +27,6 @@ export const ChannelsAvailabilityWrapper: React.FC + - - - - +
@@ -235953,107 +235853,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = ` -
-
-
-
-
- - Configuration - -
-
-
-
- -
-
- KG -
- - - -
-

- This unit will be used as default shipping weight -

-
-
-
- -
-
-
-
+
@@ -236255,107 +236055,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = ` -
-
-
-
-
- - Configuration - -
-
-
-
- -
-
- KG -
- - - -
-

- This unit will be used as default shipping weight -

-
-
-
- -
-
-
-
+
diff --git a/src/storybook/stories/components/ActionDialog.tsx b/src/storybook/stories/components/ActionDialog.tsx index 6d5ab6961..6efd4d566 100644 --- a/src/storybook/stories/components/ActionDialog.tsx +++ b/src/storybook/stories/components/ActionDialog.tsx @@ -1,8 +1,15 @@ -import ActionDialog from "@saleor/components/ActionDialog"; +import ActionDialogComponent from "@saleor/components/ActionDialog"; import { storiesOf } from "@storybook/react"; import React from "react"; import Decorator from "../../Decorator"; +import { MockedUserProvider } from "../customers/MockedUserProvider"; + +const ActionDialog = props => ( + + + +); storiesOf("Generics / ActionDialog", module) .addDecorator(Decorator) diff --git a/src/storybook/stories/customers/CustomerDetailsPage.tsx b/src/storybook/stories/customers/CustomerDetailsPage.tsx index 6557eadc1..cc2c1c5c9 100644 --- a/src/storybook/stories/customers/CustomerDetailsPage.tsx +++ b/src/storybook/stories/customers/CustomerDetailsPage.tsx @@ -2,11 +2,12 @@ import { AccountErrorCode } from "@saleor/types/globalTypes"; import { storiesOf } from "@storybook/react"; import React from "react"; -import CustomerDetailsPage, { +import CustomerDetailsPageComponent, { CustomerDetailsPageProps } from "../../../customers/components/CustomerDetailsPage"; import { customer } from "../../../customers/fixtures"; import Decorator from "../../Decorator"; +import { MockedUserProvider } from "./MockedUserProvider"; const props: Omit = { customer, @@ -28,6 +29,12 @@ interface CustomerDetailsPageErrors { note: string; } +const CustomerDetailsPage = props => ( + + + +); + storiesOf("Views / Customers / Customer details", module) .addDecorator(Decorator) .add("default", () => ) diff --git a/src/storybook/stories/customers/CustomerListPage.tsx b/src/storybook/stories/customers/CustomerListPage.tsx index b8c018d53..a64450a00 100644 --- a/src/storybook/stories/customers/CustomerListPage.tsx +++ b/src/storybook/stories/customers/CustomerListPage.tsx @@ -2,7 +2,7 @@ import { CustomerListUrlSortField } from "@saleor/customers/urls"; import { storiesOf } from "@storybook/react"; import React from "react"; -import CustomerListPage, { +import CustomerListPageComponent, { CustomerListPageProps } from "../../../customers/components/CustomerListPage"; import { customerList } from "../../../customers/fixtures"; @@ -15,6 +15,7 @@ import { tabPageProps } from "../../../fixtures"; import Decorator from "../../Decorator"; +import { MockedUserProvider } from "./MockedUserProvider"; const props: CustomerListPageProps = { ...filterPageProps, @@ -46,6 +47,12 @@ const props: CustomerListPageProps = { } }; +const CustomerListPage = props => ( + + + +); + storiesOf("Views / Customers / Customer list", module) .addDecorator(Decorator) .add("default", () => ) diff --git a/src/storybook/stories/customers/MockedUserProvider.tsx b/src/storybook/stories/customers/MockedUserProvider.tsx new file mode 100644 index 000000000..a4d8eb17f --- /dev/null +++ b/src/storybook/stories/customers/MockedUserProvider.tsx @@ -0,0 +1,31 @@ +import { UserContext } from "@saleor/auth"; +import { adminUserPermissions } from "@saleor/fixtures"; +import { User_userPermissions } from "@saleor/fragments/types/User"; +import * as React from "react"; + +export const MockedUserProvider: React.FC<{ + customPermissions?: User_userPermissions[]; +}> = ({ customPermissions, children }) => ( + + {children} + +); diff --git a/src/storybook/stories/home/HomePage.tsx b/src/storybook/stories/home/HomePage.tsx index 551b46067..543ea7c56 100644 --- a/src/storybook/stories/home/HomePage.tsx +++ b/src/storybook/stories/home/HomePage.tsx @@ -5,9 +5,12 @@ import { mapEdgesToItems } from "@saleor/utils/maps"; import { storiesOf } from "@storybook/react"; import React from "react"; -import HomePage, { HomePageProps } from "../../../home/components/HomePage"; +import HomePageComponent, { + HomePageProps +} from "../../../home/components/HomePage"; import { shop as shopFixture } from "../../../home/fixtures"; import Decorator from "../../Decorator"; +import { MockedUserProvider } from "../customers/MockedUserProvider"; const shop = shopFixture(placeholderImage); @@ -25,8 +28,17 @@ const homePageProps: Omit = { productsOutOfStock: shop.productsOutOfStock.totalCount, sales: shop.salesToday.gross, topProducts: mapEdgesToItems(shop.productTopToday), - userName: "admin@example.com", - userPermissions: adminUserPermissions + userName: "admin@example.com" +}; + +const HomePage = props => { + const customPermissions = props?.customPermissions; + + return ( + + + + ); }; storiesOf("Views / HomePage", module) @@ -49,12 +61,12 @@ storiesOf("Views / HomePage", module) )) .add("no permissions", () => ( - + )) .add("product permissions", () => ( perm.code === PermissionEnum.MANAGE_PRODUCTS )} /> @@ -62,7 +74,7 @@ storiesOf("Views / HomePage", module) .add("order permissions", () => ( perm.code === PermissionEnum.MANAGE_ORDERS )} /> diff --git a/src/storybook/stories/orders/OrderCustomer.tsx b/src/storybook/stories/orders/OrderCustomer.tsx index ea34b40c9..dbc8060f4 100644 --- a/src/storybook/stories/orders/OrderCustomer.tsx +++ b/src/storybook/stories/orders/OrderCustomer.tsx @@ -1,12 +1,12 @@ -import { adminUserPermissions } from "@saleor/fixtures"; import { storiesOf } from "@storybook/react"; import React from "react"; -import OrderCustomer, { +import OrderCustomerComponent, { OrderCustomerProps } from "../../../orders/components/OrderCustomer"; import { clients, order as orderFixture } from "../../../orders/fixtures"; import Decorator from "../../Decorator"; +import { MockedUserProvider } from "../customers/MockedUserProvider"; const order = orderFixture(""); @@ -19,10 +19,19 @@ const props: Omit = { onProfileView: () => undefined, onShippingAddressEdit: undefined, order, - userPermissions: adminUserPermissions, users: clients }; +const OrderCustomer = props => { + const customPermissions = props?.customPermissions; + + return ( + + + + ); +}; + storiesOf("Orders / OrderCustomer", module) .addDecorator(Decorator) .add("default", () => ) @@ -40,5 +49,5 @@ storiesOf("Orders / OrderCustomer", module) )) .add("no user permissions", () => ( - + )); diff --git a/src/storybook/stories/orders/OrderDetailsPage.tsx b/src/storybook/stories/orders/OrderDetailsPage.tsx index 4ab521f4b..85480c5a7 100644 --- a/src/storybook/stories/orders/OrderDetailsPage.tsx +++ b/src/storybook/stories/orders/OrderDetailsPage.tsx @@ -1,5 +1,4 @@ import placeholderImage from "@assets/images/placeholder60x60.png"; -import { adminUserPermissions } from "@saleor/fixtures"; import { storiesOf } from "@storybook/react"; import React from "react"; @@ -43,8 +42,7 @@ const props: Omit = { onSubmit: () => undefined, order, shop: shopFixture, - saveButtonBarState: "default", - userPermissions: adminUserPermissions + saveButtonBarState: "default" }; storiesOf("Views / Orders / Order details", module) diff --git a/src/storybook/stories/orders/OrderDraftPage/OrderDraftPage.tsx b/src/storybook/stories/orders/OrderDraftPage/OrderDraftPage.tsx index 65e3fc61f..dde69d00c 100644 --- a/src/storybook/stories/orders/OrderDraftPage/OrderDraftPage.tsx +++ b/src/storybook/stories/orders/OrderDraftPage/OrderDraftPage.tsx @@ -1,13 +1,14 @@ import placeholderImage from "@assets/images/placeholder60x60.png"; -import { adminUserPermissions, fetchMoreProps } from "@saleor/fixtures"; +import { fetchMoreProps } from "@saleor/fixtures"; import { storiesOf } from "@storybook/react"; import React from "react"; -import OrderDraftPage, { +import OrderDraftPageComponent, { OrderDraftPageProps } from "../../../../orders/components/OrderDraftPage"; import { clients, draftOrder } from "../../../../orders/fixtures"; import Decorator from "../../../Decorator"; +import { MockedUserProvider } from "../../customers/MockedUserProvider"; import { getDiscountsProvidersWrapper } from "./utils"; const order = draftOrder(placeholderImage); @@ -31,13 +32,22 @@ const props: Omit = { onShippingMethodEdit: undefined, order, saveButtonBarState: "default", - userPermissions: adminUserPermissions, users: clients, usersLoading: false }; const DiscountsDecorator = getDiscountsProvidersWrapper(order); +const OrderDraftPage = props => { + const customPermissions = props?.customPermissions; + + return ( + + + + ); +}; + storiesOf("Views / Orders / Order draft", module) .addDecorator(Decorator) .addDecorator(DiscountsDecorator) @@ -49,5 +59,5 @@ storiesOf("Views / Orders / Order draft", module) )) .add("no user permissions", () => ( - + ));