Require permissions in home section

src/home/components/HomeNotificationTable/HomeNotificationTable.tsx

@@ -14,7 +14,10 @@ import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import RequirePermissions from "@saleor/components/RequirePermissions";
 import Skeleton from "@saleor/components/Skeleton";
+import { UserPermissionProps } from "@saleor/types";
+import { PermissionEnum } from "@saleor/types/globalTypes";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -26,7 +29,7 @@ const styles = (theme: Theme) =>
     }
   });
 
-interface HomeNotificationTableProps extends WithStyles<typeof styles> {
+interface HomeNotificationTableProps extends UserPermissionProps {
   ordersToCapture: number;
   ordersToFulfill: number;
   productsOutOfStock: number;
@@ -45,11 +48,16 @@ const HomeNotificationTable = withStyles(styles, {
     onProductsOutOfStockClick,
     ordersToCapture,
     ordersToFulfill,
-    productsOutOfStock
+    productsOutOfStock,
-  }: HomeNotificationTableProps) => (
+    userPermissions
+  }: HomeNotificationTableProps & WithStyles<typeof styles>) => (
     <Card>
       <Table>
         <TableBody className={classes.tableRow}>
+          <RequirePermissions
+            userPermissions={userPermissions}
+            requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
+          >
             <TableRow hover={true} onClick={onOrdersToFulfillClick}>
               <TableCell>
                 {ordersToFulfill === undefined ? (
@@ -110,6 +118,11 @@ const HomeNotificationTable = withStyles(styles, {
                 <KeyboardArrowRight />
               </TableCell>
             </TableRow>
+          </RequirePermissions>
+          <RequirePermissions
+            userPermissions={userPermissions}
+            requiredPermissions={[PermissionEnum.MANAGE_PRODUCTS]}
+          >
             <TableRow hover={true} onClick={onProductsOutOfStockClick}>
               <TableCell>
                 {productsOutOfStock === undefined ? (
@@ -140,6 +153,7 @@ const HomeNotificationTable = withStyles(styles, {
                 <KeyboardArrowRight />
               </TableCell>
             </TableRow>
+          </RequirePermissions>
         </TableBody>
       </Table>
     </Card>

src/home/components/HomePage/HomePage.tsx

@@ -10,7 +10,10 @@ import CardSpacer from "@saleor/components/CardSpacer";
 import Container from "@saleor/components/Container";
 import Grid from "@saleor/components/Grid";
 import Money from "@saleor/components/Money";
+import RequirePermissions from "@saleor/components/RequirePermissions";
 import Skeleton from "@saleor/components/Skeleton";
+import { UserPermissionProps } from "@saleor/types";
+import { PermissionEnum } from "@saleor/types/globalTypes";
 import Orders from "../../../icons/Orders";
 import Sales from "../../../icons/Sales";
 import {
@@ -39,7 +42,7 @@ const styles = (theme: Theme) =>
     }
   });
 
-export interface HomePageProps extends WithStyles<typeof styles> {
+export interface HomePageProps extends UserPermissionProps {
   activities: Home_activities_edges_node[];
   orders: number;
   ordersToCapture: number;
@@ -68,13 +71,18 @@ const HomePage = withStyles(styles, { name: "HomePage" })(
     onProductsOutOfStockClick,
     ordersToCapture,
     ordersToFulfill,
-    productsOutOfStock
+    productsOutOfStock,
-  }: HomePageProps) => (
+    userPermissions
+  }: HomePageProps & WithStyles<typeof styles>) => (
     <Container>
       <HomeHeader userName={userName} />
       <CardSpacer />
       <Grid>
         <div>
+          <RequirePermissions
+            userPermissions={userPermissions}
+            requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
+          >
             <div className={classes.cardContainer}>
               <HomeAnalyticsCard
                 title={"Sales"}
@@ -97,6 +105,7 @@ const HomePage = withStyles(styles, { name: "HomePage" })(
                 )}
               </HomeAnalyticsCard>
             </div>
+          </RequirePermissions>
           <HomeNotificationTable
             onOrdersToCaptureClick={onOrdersToCaptureClick}
             onOrdersToFulfillClick={onOrdersToFulfillClick}
@@ -104,16 +113,27 @@ const HomePage = withStyles(styles, { name: "HomePage" })(
             ordersToCapture={ordersToCapture}
             ordersToFulfill={ordersToFulfill}
             productsOutOfStock={productsOutOfStock}
+            userPermissions={userPermissions}
           />
           <CardSpacer />
+          <RequirePermissions
+            userPermissions={userPermissions}
+            requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
+          >
             <HomeProductListCard
               onRowClick={onProductClick}
               topProducts={topProducts}
             />
             <CardSpacer />
+          </RequirePermissions>
         </div>
         <div>
+          <RequirePermissions
+            userPermissions={userPermissions}
+            requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
+          >
             <HomeActivityCard activities={activities} />
+          </RequirePermissions>
         </div>
       </Grid>
     </Container>

src/home/views/index.tsx

@@ -56,6 +56,7 @@ const HomeSection = () => {
           ordersToFulfill={maybe(() => data.ordersToFulfill.totalCount)}
           productsOutOfStock={maybe(() => data.productsOutOfStock.totalCount)}
           userName={getUserName(user, true)}
+          userPermissions={maybe(() => user.permissions, [])}
         />
       )}
     </HomePageQuery>