From bbb83fbf3a3553ac33a931153c4c514e2c29939f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Thu, 11 Jul 2024 11:12:03 +0100
Subject: [PATCH] feat: `PlatformAdminOnly` component

---
 editor.planx.uk/src/components/Header.tsx                | 5 +++--
 .../src/pages/FlowEditor/components/Sidebar/index.tsx    | 7 +++----
 .../src/ui/editor/permissions/PlatformAdminOnly.tsx      | 9 +++++++++
 3 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 editor.planx.uk/src/ui/editor/permissions/PlatformAdminOnly.tsx

diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
index 467af46ad1..fac5091100 100644
--- 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 { PlatformAdminOnly } from "ui/editor/permissions/PlatformAdminOnly";
 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 && (
+            <PlatformAdminOnly>
               <MenuItem disabled divider>
                 <ListItemIcon>
                   <Visibility />
                 </ListItemIcon>
                 <ListItemText>All teams</ListItemText>
               </MenuItem>
-            )}
+            </PlatformAdminOnly>
 
             {/* 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
index 1b42dd65b0..3e8aae524e 100644
--- 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 { PlatformAdminOnly } from "ui/editor/permissions/PlatformAdminOnly";
 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 && (
+          <PlatformAdminOnly>
             <Tooltip arrow title="Open draft service">
               <Link
                 href={props.url.replace("/published", "/draft")}
@@ -308,7 +307,7 @@ const Sidebar: React.FC<{
                 <OpenInNewOffIcon />
               </Link>
             </Tooltip>
-          )}
+          </PlatformAdminOnly>
 
           <Tooltip arrow title="Open preview of changes to publish">
             <Link
diff --git a/editor.planx.uk/src/ui/editor/permissions/PlatformAdminOnly.tsx b/editor.planx.uk/src/ui/editor/permissions/PlatformAdminOnly.tsx
new file mode 100644
index 0000000000..a1c1c3a6e6
--- /dev/null
+++ b/editor.planx.uk/src/ui/editor/permissions/PlatformAdminOnly.tsx
@@ -0,0 +1,9 @@
+import { useStore } from "pages/FlowEditor/lib/store";
+import React, { PropsWithChildren } from "react";
+
+export const PlatformAdminOnly: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const isPlatformAdmin = useStore((state) => state.user?.isPlatformAdmin);
+  return isPlatformAdmin ? children : null;
+};