feat: Permission component (#3407)

theopensystemslab · Jul 12, 2024 · 1060db4 · 1060db4
1 parent 67b15da
commit 1060db4
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
@@ -37,6 +37,7 @@ import {
   LINE_HEIGHT_BASE,
 } from "theme";
 import { ApplicationPath } from "types";
+import Permission from "ui/editor/Permission";
 import Reset from "ui/icons/Reset";
 
 import { useStore } from "../pages/FlowEditor/lib/store";
@@ -531,14 +532,14 @@ const EditorToolbar: React.FC<{
                 </ListItemText>
               </MenuItem>
             )}
-            {!user.isPlatformAdmin && (
+            <Permission.IsNotPlatformAdmin>
               <MenuItem disabled divider>
                 <ListItemIcon>
                   <Visibility />
                 </ListItemIcon>
                 <ListItemText>All teams</ListItemText>
               </MenuItem>
-            )}
+            </Permission.IsNotPlatformAdmin>
 
             {/* Only show team settings link if inside a team route  */}
             {isTeamSettingsVisible && (

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx
@@ -22,6 +22,7 @@ import { AxiosError } from "axios";
 import { formatLastPublishMessage } from "pages/FlowEditor/utils";
 import React, { useState } from "react";
 import { useAsync } from "react-use";
+import Permission from "ui/editor/Permission";
 import Input from "ui/shared/Input";
 
 import Questions from "../../../Preview/Questions";
@@ -163,7 +164,6 @@ const Sidebar: React.FC<{
     lastPublisher,
     validateAndDiffFlow,
     isFlowPublished,
-    isPlatformAdmin,
   ] = useStore((state) => [
     state.id,
     state.flowAnalyticsLink,
@@ -173,7 +173,6 @@ const Sidebar: React.FC<{
     state.lastPublisher,
     state.validateAndDiffFlow,
     state.isFlowPublished,
-    state.user?.isPlatformAdmin,
   ]);
   const [key, setKey] = useState<boolean>(false);
   const [lastPublishedTitle, setLastPublishedTitle] = useState<string>(
@@ -297,7 +296,7 @@ const Sidebar: React.FC<{
             </Tooltip>
           )}
 
-          {isPlatformAdmin && (
+          <Permission.IsPlatformAdmin>
             <Tooltip arrow title="Open draft service">
               <Link
                 href={props.url.replace("/published", "/draft")}
@@ -308,7 +307,7 @@ const Sidebar: React.FC<{
                 <OpenInNewOffIcon />
               </Link>
             </Tooltip>
-          )}
+          </Permission.IsPlatformAdmin>
 
           <Tooltip arrow title="Open preview of changes to publish">
             <Link

diff --git a/editor.planx.uk/src/ui/editor/Permission.tsx b/editor.planx.uk/src/ui/editor/Permission.tsx
@@ -0,0 +1,26 @@
+import { useStore } from "pages/FlowEditor/lib/store";
+import React, { PropsWithChildren } from "react";
+
+type PermissionComponent = React.FC<PropsWithChildren> & {
+  IsPlatformAdmin: React.FC<PropsWithChildren>;
+} & { IsNotPlatformAdmin: React.FC<PropsWithChildren> };
+
+const Permission: PermissionComponent = ({ children }) => {
+  return children;
+};
+
+const IsPlatformAdmin: React.FC<PropsWithChildren> = ({ children }) => {
+  const isPlatformAdmin = useStore((state) => state.user?.isPlatformAdmin);
+  return isPlatformAdmin ? children : null;
+};
+
+const IsNotPlatformAdmin: React.FC<PropsWithChildren> = ({ children }) => {
+  const isPlatformAdmin = useStore((state) => state.user?.isPlatformAdmin);
+  return !isPlatformAdmin ? children : null;
+};
+
+// Attach permission specific components as static properties
+Permission.IsPlatformAdmin = IsPlatformAdmin;
+Permission.IsNotPlatformAdmin = IsNotPlatformAdmin;
+
+export default Permission;