Add permission component

src/components/RequirePermissions.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+import { User_permissions } from "@saleor/auth/types/User";
+import { PermissionEnum } from "@saleor/types/globalTypes";
+
+export function hasPermissions(
+  userPermissions: User_permissions[],
+  requiredPermissions: PermissionEnum[]
+): boolean {
+  return requiredPermissions.reduce(
+    (acc, perm) =>
+      acc && !!userPermissions.find(userPerm => userPerm.code === perm),
+    true
+  );
+}
+
+export interface RequirePermissionsProps {
+  children: React.ReactNode | React.ReactNodeArray;
+  requiredPermissions: PermissionEnum[];
+  userPermissions: User_permissions[];
+}
+
+const RequirePermissions: React.FC<RequirePermissionsProps> = ({
+  children,
+  requiredPermissions,
+  userPermissions
+}) =>
+  hasPermissions(userPermissions, requiredPermissions) ? <>{children}</> : null;
+
+RequirePermissions.displayName = "RequirePermissions";
+export default RequirePermissions;

src/types.ts

@@ -1,5 +1,6 @@
 import { MutationResult } from "react-apollo";
 
+import { User_permissions } from "./auth/types/User";
 import { FilterContentSubmitData } from "./components/Filter";
 import { Filter } from "./components/TableFilter";
 
@@ -158,3 +159,7 @@ export interface FetchMoreProps {
 }
 
 export type TabActionDialog = "save-search" | "delete-search";
+
+export interface UserPermissionProps {
+  userPermissions: User_permissions[];
+}