From 353490e1a65c5c1440f98473d4f75394e728c494 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Thu, 26 Sep 2019 15:16:36 +0200 Subject: [PATCH] Make account permissions and status common --- .../AccountPermissions.tsx} | 14 +++--- src/components/AccountPermissions/index.ts | 2 + .../AccountStatus/AccountStatus.tsx} | 0 src/components/AccountStatus/index.ts | 2 + src/components/Shop/query.ts | 4 ++ src/components/Shop/types/ShopInfo.ts | 9 +++- src/fixtures.ts | 48 +++++++++++++++++++ .../StaffDetailsPage/StaffDetailsPage.tsx | 14 +++--- .../components/StaffPermissions/index.ts | 2 - src/staff/components/StaffStatus/index.ts | 2 - src/staff/fixtures.ts | 45 ----------------- src/staff/queries.ts | 12 ----- src/staff/types/StaffList.ts | 14 +----- src/staff/types/StaffMemberDetails.ts | 12 ----- src/staff/views/StaffDetails.tsx | 4 +- src/staff/views/StaffList/StaffList.tsx | 4 +- .../stories/staff/StaffDetailsPage.tsx | 3 +- 17 files changed, 86 insertions(+), 105 deletions(-) rename src/{staff/components/StaffPermissions/StaffPermissions.tsx => components/AccountPermissions/AccountPermissions.tsx} (89%) create mode 100644 src/components/AccountPermissions/index.ts rename src/{staff/components/StaffStatus/StaffStatus.tsx => components/AccountStatus/AccountStatus.tsx} (100%) create mode 100644 src/components/AccountStatus/index.ts delete mode 100644 src/staff/components/StaffPermissions/index.ts delete mode 100644 src/staff/components/StaffStatus/index.ts diff --git a/src/staff/components/StaffPermissions/StaffPermissions.tsx b/src/components/AccountPermissions/AccountPermissions.tsx similarity index 89% rename from src/staff/components/StaffPermissions/StaffPermissions.tsx rename to src/components/AccountPermissions/AccountPermissions.tsx index 0db9cb39e..c695a6663 100644 --- a/src/staff/components/StaffPermissions/StaffPermissions.tsx +++ b/src/components/AccountPermissions/AccountPermissions.tsx @@ -12,8 +12,8 @@ import { FormattedMessage, useIntl } from "react-intl"; import CardTitle from "@saleor/components/CardTitle"; import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox"; +import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInfo"; import Skeleton from "@saleor/components/Skeleton"; -import { StaffMemberDetails_shop_permissions } from "../../types/StaffMemberDetails"; const styles = (theme: Theme) => createStyles({ @@ -29,8 +29,8 @@ const styles = (theme: Theme) => } }); -interface StaffPermissionsProps extends WithStyles { - permissions: StaffMemberDetails_shop_permissions[]; +interface AccountPermissionsProps extends WithStyles { + permissions: ShopInfo_shop_permissions[]; data: { hasFullAccess: boolean; permissions: string[]; @@ -39,14 +39,14 @@ interface StaffPermissionsProps extends WithStyles { onChange: (event: React.ChangeEvent, cb?: () => void) => void; } -const StaffPermissions = withStyles(styles, { name: "StaffPermissions" })( +const AccountPermissions = withStyles(styles, { name: "AccountPermissions" })( ({ classes, data, disabled, permissions, onChange - }: StaffPermissionsProps) => { + }: AccountPermissionsProps) => { const intl = useIntl(); const handleFullAccessChange = (event: React.ChangeEvent) => @@ -123,5 +123,5 @@ const StaffPermissions = withStyles(styles, { name: "StaffPermissions" })( ); } ); -StaffPermissions.displayName = "StaffPermissions"; -export default StaffPermissions; +AccountPermissions.displayName = "AccountPermissions"; +export default AccountPermissions; diff --git a/src/components/AccountPermissions/index.ts b/src/components/AccountPermissions/index.ts new file mode 100644 index 000000000..b84ad9e45 --- /dev/null +++ b/src/components/AccountPermissions/index.ts @@ -0,0 +1,2 @@ +export { default } from "./AccountPermissions"; +export * from "./AccountPermissions"; diff --git a/src/staff/components/StaffStatus/StaffStatus.tsx b/src/components/AccountStatus/AccountStatus.tsx similarity index 100% rename from src/staff/components/StaffStatus/StaffStatus.tsx rename to src/components/AccountStatus/AccountStatus.tsx diff --git a/src/components/AccountStatus/index.ts b/src/components/AccountStatus/index.ts new file mode 100644 index 000000000..eb103372d --- /dev/null +++ b/src/components/AccountStatus/index.ts @@ -0,0 +1,2 @@ +export { default } from "./AccountStatus"; +export * from "./AccountStatus"; diff --git a/src/components/Shop/query.ts b/src/components/Shop/query.ts index b67e048bb..3b8ac4d5b 100644 --- a/src/components/Shop/query.ts +++ b/src/components/Shop/query.ts @@ -28,6 +28,10 @@ const shopInfo = gql` includeTaxesInPrices name trackInventoryByDefault + permissions { + code + name + } } } `; diff --git a/src/components/Shop/types/ShopInfo.ts b/src/components/Shop/types/ShopInfo.ts index b3b4fa6d7..faf61d61c 100644 --- a/src/components/Shop/types/ShopInfo.ts +++ b/src/components/Shop/types/ShopInfo.ts @@ -2,7 +2,7 @@ /* eslint-disable */ // This file was automatically generated and should not be edited. -import { WeightUnitsEnum, LanguageCodeEnum } from "./../../../types/globalTypes"; +import { WeightUnitsEnum, LanguageCodeEnum, PermissionEnum } from "./../../../types/globalTypes"; // ==================================================== // GraphQL query operation: ShopInfo @@ -32,6 +32,12 @@ export interface ShopInfo_shop_languages { language: string; } +export interface ShopInfo_shop_permissions { + __typename: "PermissionDisplay"; + code: PermissionEnum; + name: string; +} + export interface ShopInfo_shop { __typename: "Shop"; countries: (ShopInfo_shop_countries | null)[]; @@ -44,6 +50,7 @@ export interface ShopInfo_shop { includeTaxesInPrices: boolean; name: string; trackInventoryByDefault: boolean | null; + permissions: (ShopInfo_shop_permissions | null)[]; } export interface ShopInfo { diff --git a/src/fixtures.ts b/src/fixtures.ts index d76e1d667..2bc0090ca 100644 --- a/src/fixtures.ts +++ b/src/fixtures.ts @@ -1,3 +1,4 @@ +import { ShopInfo_shop_permissions } from "./components/Shop/types/ShopInfo"; import { Filter } from "./components/TableFilter"; import { FetchMoreProps, @@ -8,6 +9,7 @@ import { SortPage, TabPageProps } from "./types"; +import { PermissionEnum } from "./types/globalTypes"; const pageInfo = { hasNextPage: true, @@ -149,3 +151,49 @@ export const sortPageProps: SortPage = { asc: true } }; + +export const permissions: ShopInfo_shop_permissions[] = [ + { + code: PermissionEnum.IMPERSONATE_USERS, + name: "Impersonate customers." + }, + { + code: PermissionEnum.MANAGE_DISCOUNTS, + name: "Manage sales and vouchers." + }, + { + code: PermissionEnum.MANAGE_MENUS, + name: "Manage navigation." + }, + { + code: PermissionEnum.MANAGE_ORDERS, + name: "Manage orders." + }, + { + code: PermissionEnum.MANAGE_PAGES, + name: "Manage pages." + }, + { + code: PermissionEnum.MANAGE_PRODUCTS, + name: "Manage products." + }, + { + code: PermissionEnum.MANAGE_SETTINGS, + name: "Manage settings." + }, + { + code: PermissionEnum.MANAGE_SHIPPING, + name: "Manage shipping." + }, + { + code: PermissionEnum.MANAGE_STAFF, + name: "Manage staff." + }, + { + code: PermissionEnum.MANAGE_USERS, + name: "Manage customers." + } +].map(perm => ({ + __typename: "PermissionDisplay" as "PermissionDisplay", + ...perm +})); diff --git a/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx b/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx index 66c67179f..7fba1c698 100644 --- a/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx +++ b/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx @@ -1,6 +1,8 @@ import React from "react"; import { useIntl } from "react-intl"; +import AccountPermissions from "@saleor/components/AccountPermissions"; +import StaffStatus from "@saleor/components/AccountStatus"; import AppHeader from "@saleor/components/AppHeader"; import CardSpacer from "@saleor/components/CardSpacer"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; @@ -9,16 +11,12 @@ import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; +import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInfo"; import { sectionNames } from "@saleor/intl"; import { getUserName, maybe } from "../../../misc"; import { PermissionEnum } from "../../../types/globalTypes"; -import { - StaffMemberDetails_shop_permissions, - StaffMemberDetails_user -} from "../../types/StaffMemberDetails"; -import StaffPermissions from "../StaffPermissions/StaffPermissions"; +import { StaffMemberDetails_user } from "../../types/StaffMemberDetails"; import StaffProperties from "../StaffProperties/StaffProperties"; -import StaffStatus from "../StaffStatus/StaffStatus"; interface FormData { hasFullAccess: boolean; @@ -34,7 +32,7 @@ export interface StaffDetailsPageProps { canEditStatus: boolean; canRemove: boolean; disabled: boolean; - permissions: StaffMemberDetails_shop_permissions[]; + permissions: ShopInfo_shop_permissions[]; saveButtonBarState: ConfirmButtonTransitionState; staffMember: StaffMemberDetails_user; onBack: () => void; @@ -99,7 +97,7 @@ const StaffDetailsPage: React.StatelessComponent = ({ {canEditStatus && (
- ({ - __typename: "PermissionDisplay" as "PermissionDisplay", - ...perm -})); export const staffMembers: StaffList_staffUsers_edges_node[] = [ { avatar: { diff --git a/src/staff/queries.ts b/src/staff/queries.ts index 5bb538eb4..fc33936c2 100644 --- a/src/staff/queries.ts +++ b/src/staff/queries.ts @@ -57,12 +57,6 @@ const staffList = gql` endCursor } } - shop { - permissions { - code - name - } - } } `; export const TypedStaffListQuery = TypedQuery( @@ -75,12 +69,6 @@ export const staffMemberDetails = gql` user(id: $id) { ...StaffMemberDetailsFragment } - shop { - permissions { - code - name - } - } } `; export const TypedStaffMemberDetailsQuery = TypedQuery< diff --git a/src/staff/types/StaffList.ts b/src/staff/types/StaffList.ts index 08f0a6471..67d8117ef 100644 --- a/src/staff/types/StaffList.ts +++ b/src/staff/types/StaffList.ts @@ -2,7 +2,7 @@ /* eslint-disable */ // This file was automatically generated and should not be edited. -import { StaffUserInput, PermissionEnum } from "./../../types/globalTypes"; +import { StaffUserInput } from "./../../types/globalTypes"; // ==================================================== // GraphQL query operation: StaffList @@ -43,20 +43,8 @@ export interface StaffList_staffUsers { pageInfo: StaffList_staffUsers_pageInfo; } -export interface StaffList_shop_permissions { - __typename: "PermissionDisplay"; - code: PermissionEnum; - name: string; -} - -export interface StaffList_shop { - __typename: "Shop"; - permissions: (StaffList_shop_permissions | null)[]; -} - export interface StaffList { staffUsers: StaffList_staffUsers | null; - shop: StaffList_shop | null; } export interface StaffListVariables { diff --git a/src/staff/types/StaffMemberDetails.ts b/src/staff/types/StaffMemberDetails.ts index d7cc5b763..8479a0672 100644 --- a/src/staff/types/StaffMemberDetails.ts +++ b/src/staff/types/StaffMemberDetails.ts @@ -30,20 +30,8 @@ export interface StaffMemberDetails_user { permissions: (StaffMemberDetails_user_permissions | null)[] | null; } -export interface StaffMemberDetails_shop_permissions { - __typename: "PermissionDisplay"; - code: PermissionEnum; - name: string; -} - -export interface StaffMemberDetails_shop { - __typename: "Shop"; - permissions: (StaffMemberDetails_shop_permissions | null)[]; -} - export interface StaffMemberDetails { user: StaffMemberDetails_user | null; - shop: StaffMemberDetails_shop | null; } export interface StaffMemberDetailsVariables { diff --git a/src/staff/views/StaffDetails.tsx b/src/staff/views/StaffDetails.tsx index 74e4a31f0..1090184a1 100644 --- a/src/staff/views/StaffDetails.tsx +++ b/src/staff/views/StaffDetails.tsx @@ -6,6 +6,7 @@ import ActionDialog from "@saleor/components/ActionDialog"; import { WindowTitle } from "@saleor/components/WindowTitle"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; +import useShop from "@saleor/hooks/useShop"; import useUser from "@saleor/hooks/useUser"; import { commonMessages } from "@saleor/intl"; import { getMutationState, maybe } from "../../misc"; @@ -40,6 +41,7 @@ export const StaffDetails: React.StatelessComponent = ({ const notify = useNotifier(); const user = useUser(); const intl = useIntl(); + const shop = useShop(); return ( = ({ }) ) } - permissions={maybe(() => data.shop.permissions)} + permissions={maybe(() => shop.permissions)} staffMember={maybe(() => data.user)} saveButtonBarState={formTransitionState} /> diff --git a/src/staff/views/StaffList/StaffList.tsx b/src/staff/views/StaffList/StaffList.tsx index 01322054a..0185aa1f1 100644 --- a/src/staff/views/StaffList/StaffList.tsx +++ b/src/staff/views/StaffList/StaffList.tsx @@ -16,6 +16,7 @@ import SaveFilterTabDialog, { } from "@saleor/components/SaveFilterTabDialog"; import { APP_MOUNT_URI } from "@saleor/config"; import { configurationMenuUrl } from "@saleor/configuration"; +import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; import { getMutationState, maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; @@ -56,6 +57,7 @@ export const StaffList: React.StatelessComponent = ({ ListViews.STAFF_MEMBERS_LIST ); const intl = useIntl(); + const shop = useShop(); const tabs = getFilterTabs(); @@ -147,7 +149,7 @@ export const StaffList: React.StatelessComponent = ({ firstName: variables.firstName, lastName: variables.lastName, permissions: variables.fullAccess - ? data.shop.permissions.map(perm => perm.code) + ? maybe(() => shop.permissions.map(perm => perm.code)) : undefined, redirectUrl: urlJoin( window.location.origin, diff --git a/src/storybook/stories/staff/StaffDetailsPage.tsx b/src/storybook/stories/staff/StaffDetailsPage.tsx index 6a19ea26b..5f2e115bb 100644 --- a/src/storybook/stories/staff/StaffDetailsPage.tsx +++ b/src/storybook/stories/staff/StaffDetailsPage.tsx @@ -2,10 +2,11 @@ import { Omit } from "@material-ui/core"; import { storiesOf } from "@storybook/react"; import React from "react"; +import { permissions } from "@saleor/fixtures"; import StaffDetailsPage, { StaffDetailsPageProps } from "../../../staff/components/StaffDetailsPage"; -import { permissions, staffMember } from "../../../staff/fixtures"; +import { staffMember } from "../../../staff/fixtures"; import Decorator from "../../Decorator"; const props: Omit = {