Make account permissions and status common

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<typeof styles> {
-  permissions: StaffMemberDetails_shop_permissions[];
+interface AccountPermissionsProps extends WithStyles<typeof styles> {
+  permissions: ShopInfo_shop_permissions[];
   data: {
     hasFullAccess: boolean;
     permissions: string[];
@@ -39,14 +39,14 @@ interface StaffPermissionsProps extends WithStyles<typeof styles> {
   onChange: (event: React.ChangeEvent<any>, 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<any>) =>
@@ -123,5 +123,5 @@ const StaffPermissions = withStyles(styles, { name: "StaffPermissions" })(
     );
   }
 );
-StaffPermissions.displayName = "StaffPermissions";
-export default StaffPermissions;
+AccountPermissions.displayName = "AccountPermissions";
+export default AccountPermissions;

src/components/AccountPermissions/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./AccountPermissions";
+export * from "./AccountPermissions";

src/components/AccountStatus/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./AccountStatus";
+export * from "./AccountStatus";

src/components/Shop/query.ts

@@ -28,6 +28,10 @@ const shopInfo = gql`
       includeTaxesInPrices
       name
       trackInventoryByDefault
+      permissions {
+        code
+        name
+      }
     }
   }
 `;

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 {

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<string> = {
     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
+}));

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<StaffDetailsPageProps> = ({
             </div>
             {canEditStatus && (
               <div>
-                <StaffPermissions
+                <AccountPermissions
                   data={data}
                   disabled={disabled}
                   permissions={permissions}

src/staff/components/StaffPermissions/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./StaffPermissions";
-export * from "./StaffPermissions";

src/staff/components/StaffStatus/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./StaffStatus";
-export * from "./StaffStatus";

src/staff/fixtures.ts

@@ -3,51 +3,6 @@ import { PermissionEnum } from "../types/globalTypes";
 import { StaffList_staffUsers_edges_node } from "./types/StaffList";
 import { StaffMemberDetails_user } from "./types/StaffMemberDetails";
 
-export const 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
-}));
 export const staffMembers: StaffList_staffUsers_edges_node[] = [
   {
     avatar: {

src/staff/queries.ts

@@ -57,12 +57,6 @@ const staffList = gql`
         endCursor
       }
     }
-    shop {
-      permissions {
-        code
-        name
-      }
-    }
   }
 `;
 export const TypedStaffListQuery = TypedQuery<StaffList, StaffListVariables>(
@@ -75,12 +69,6 @@ export const staffMemberDetails = gql`
     user(id: $id) {
       ...StaffMemberDetailsFragment
     }
-    shop {
-      permissions {
-        code
-        name
-      }
-    }
   }
 `;
 export const TypedStaffMemberDetailsQuery = TypedQuery<

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 {

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 {

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<OrderListProps> = ({
   const notify = useNotifier();
   const user = useUser();
   const intl = useIntl();
+  const shop = useShop();
 
   return (
     <TypedStaffMemberDetailsQuery
@@ -163,7 +165,7 @@ export const StaffDetails: React.StatelessComponent<OrderListProps> = ({
                                     })
                                   )
                                 }
-                                permissions={maybe(() => data.shop.permissions)}
+                                permissions={maybe(() => shop.permissions)}
                                 staffMember={maybe(() => data.user)}
                                 saveButtonBarState={formTransitionState}
                               />

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<StaffListProps> = ({
     ListViews.STAFF_MEMBERS_LIST
   );
   const intl = useIntl();
+  const shop = useShop();
 
   const tabs = getFilterTabs();
 
@@ -147,7 +149,7 @@ export const StaffList: React.StatelessComponent<StaffListProps> = ({
                       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,

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<StaffDetailsPageProps, "classes"> = {