feat: setup UserStore and basic visual feedback throughout editor based on access

editor.planx.uk/src/@planx/components/NextSteps/Public.tsx

@@ -18,7 +18,7 @@ const NextStepsComponent: React.FC<Props> = (props) => {
         policyRef={props.policyRef}
         howMeasured={props.howMeasured}
       />
-      <NextStepsList steps={props.steps} handleSubmit={props.handleSubmit}/>
+      <NextStepsList steps={props.steps} handleSubmit={props.handleSubmit} />
     </Card>
   );
 };

editor.planx.uk/src/@planx/components/Send/bops/index.ts

@@ -13,6 +13,7 @@ import { logger } from "airbrake";
 import { isEmpty } from "lodash";
 import { useStore } from "pages/FlowEditor/lib/store";
 import { getResultData } from "pages/FlowEditor/lib/store/preview";
+import striptags from "striptags";
 
 import { Store } from "../../../../pages/FlowEditor/lib/store";
 import { toPence } from "../../Pay/model";
@@ -28,7 +29,6 @@ import {
   ResponseMetaData,
   USER_ROLES,
 } from "../model";
-import striptags from "striptags";
 
 export const bopsDictionary = {
   // applicant or agent details provided via TextInput(s) or ContactInput component

editor.planx.uk/src/airbrake.ts

@@ -16,10 +16,10 @@ function getEnvForAllowedHosts(host: string) {
     case "planningservices.southwark.gov.uk":
     case "planningservices.buckinghamshire.gov.uk":
     case "editor.planx.uk":
-      return "production"
+      return "production";
 
     case "editor.planx.dev":
-      return "staging"
+      return "staging";
 
     default:
       "pullrequest";
@@ -54,7 +54,7 @@ function getErrorLogger(): ErrorLogger {
   return new Notifier({
     projectId: Number(process.env.REACT_APP_AIRBRAKE_PROJECT_ID!),
     projectKey: process.env.REACT_APP_AIRBRAKE_PROJECT_KEY!,
-    environment: getEnvForAllowedHosts(window.location.host)
+    environment: getEnvForAllowedHosts(window.location.host),
   });
 }
 

editor.planx.uk/src/lib/graphql.ts

@@ -96,6 +96,6 @@ export const publicClient = new ApolloClient({
  */
 export const publicContext: DefaultContext = {
   headers: {
-    "x-hasura-role": "public"
-  }
-}
+    "x-hasura-role": "public",
+  },
+};

editor.planx.uk/src/lib/lowcalStorage.ts

@@ -136,7 +136,7 @@ const getSessionContext = (sessionId: string): DefaultContext => ({
     "x-hasura-lowcal-email":
       // email may be absent for non save and return journeys
       useStore.getState().saveToEmail?.toLowerCase() || "",
-  }
+  },
 });
 
 /**

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx

@@ -67,11 +67,18 @@ const Checklist: React.FC<Props> = React.memo((props) => {
     copyNode(props.id);
   };
 
+  // useStore.getState().getTeam().slug undefined here, use window instead
+  const teamSlug = window.location.pathname.split("/")[1];
+
   const Icon = ICONS[props.type];
 
   return (
     <>
-      <Hanger hidden={isDragging} before={props.id} parent={parent} />
+      <Hanger
+        hidden={isDragging || !useStore.getState().canUserEditTeam(teamSlug)}
+        before={props.id}
+        parent={parent}
+      />
       <li
         className={classNames("card", "decision", {
           isDragging,

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Filter.tsx

@@ -49,9 +49,16 @@ const Filter: React.FC<Props> = React.memo((props) => {
 
   const Icon = ICONS[props.type];
 
+  // useStore.getState().getTeam().slug undefined here, use window instead
+  const teamSlug = window.location.pathname.split("/")[1];
+
   return (
     <>
-      <Hanger hidden={isDragging} before={props.id} parent={parent} />
+      <Hanger
+        hidden={isDragging || !useStore.getState().canUserEditTeam(teamSlug)}
+        before={props.id}
+        parent={parent}
+      />
       <li
         className={classNames("card", "decision", {
           isDragging,

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx

@@ -22,6 +22,9 @@ const Option: React.FC<any> = (props) => {
     color = flag?.color || color;
   } catch (e) {}
 
+  // useStore.getState().getTeam().slug undefined here, use window instead
+  const teamSlug = window.location.pathname.split("/")[1];
+
   return (
     <li
       className={classNames("card", "option", { wasVisited: props.wasVisited })}
@@ -38,7 +41,10 @@ const Option: React.FC<any> = (props) => {
         {childNodes.map((child: any) => (
           <Node key={child.id} parent={props.id} {...child} />
         ))}
-        <Hanger parent={props.id} />
+        <Hanger
+          parent={props.id}
+          hidden={!useStore.getState().canUserEditTeam(teamSlug)}
+        />
       </ol>
     </li>
   );

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx

@@ -71,9 +71,16 @@ const ExternalPortal: React.FC<any> = React.memo(
       editHref = `${window.location.pathname}/nodes/${parent}/nodes/${props.id}/edit`;
     }
 
+    // useStore.getState().getTeam().slug undefined here, use window instead
+    const teamSlug = window.location.pathname.split("/")[1];
+
     return (
       <>
-        <Hanger hidden={isDragging} before={props.id} parent={parent} />
+        <Hanger
+          hidden={isDragging || !useStore.getState().canUserEditTeam(teamSlug)}
+          before={props.id}
+          parent={parent}
+        />
         <li
           className={classNames("card", "portal", { isDragging })}
           onContextMenu={handleContext}
@@ -121,9 +128,16 @@ const InternalPortal: React.FC<any> = (props) => {
     copyNode(props.id);
   };
 
+  // useStore.getState().getTeam().slug undefined here, use window instead
+  const teamSlug = window.location.pathname.split("/")[1];
+
   return (
     <>
-      <Hanger hidden={isDragging} before={props.id} parent={parent} />
+      <Hanger
+        hidden={isDragging || !useStore.getState().canUserEditTeam(teamSlug)}
+        before={props.id}
+        parent={parent}
+      />
       <li className={classNames("card", "portal", { isDragging })}>
         <Link
           href={href}

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx

@@ -53,9 +53,16 @@ const Question: React.FC<Props> = React.memo((props) => {
   // If there is an error, the icon has a semantic meaning and needs a title
   const iconTitleAccess = props.type === "Error" ? "Error" : undefined;
 
+  // useStore.getState().getTeam().slug undefined here, use window instead
+  const teamSlug = window.location.pathname.split("/")[1];
+
   return (
     <>
-      <Hanger hidden={isDragging} before={props.id} parent={parent} />
+      <Hanger
+        hidden={isDragging || !useStore.getState().canUserEditTeam(teamSlug)}
+        before={props.id}
+        parent={parent}
+      />
       <li
         className={classNames("card", "decision", {
           isDragging,

editor.planx.uk/src/pages/FlowEditor/components/Flow/index.tsx

@@ -24,6 +24,9 @@ const Flow = ({ breadcrumbs = [] }: any) => {
     href: `${window.location.pathname.split(id)[0]}${id}`,
   }));
 
+  // useStore.getState().getTeam().slug undefined here, use window instead
+  const teamSlug = window.location.pathname.split("/")[1];
+
   return (
     <>
       <ol id="flow" data-layout={flowLayout} className="decisions">
@@ -37,7 +40,7 @@ const Flow = ({ breadcrumbs = [] }: any) => {
           <Node key={node.id} {...node} />
         ))}
 
-        <Hanger />
+        <Hanger hidden={!useStore.getState().canUserEditTeam(teamSlug)} />
         <EndPoint text="end" />
       </ol>
     </>

editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx

@@ -125,6 +125,9 @@ const PreviewBrowser: React.FC<{
     setLastPublishedTitle(formatLastPublish(date, user));
   });
 
+  // useStore.getState().getTeam().slug undefined here, use window instead
+  const teamSlug = window.location.pathname.split("/")[1];
+
   return (
     <Box id="embedded-browser">
       <Header>
@@ -177,6 +180,7 @@ const PreviewBrowser: React.FC<{
               sx={{ width: "100% " }}
               variant="contained"
               color="primary"
+              disabled={!useStore.getState().canUserEditTeam(teamSlug)}
               onClick={async () => {
                 try {
                   setLastPublishedTitle("Checking for changes...");

editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx

@@ -109,6 +109,9 @@ const FormModal: React.FC<{
   ]);
   const handleClose = () => navigate(rootFlowPath(true));
 
+  // useStore.getState().getTeam().slug undefined here, use window instead
+  const teamSlug = window.location.pathname.split("/")[1];
+
   return (
     <StyledDialog
       open
@@ -183,6 +186,7 @@ const FormModal: React.FC<{
                   handleDelete();
                   navigate(rootFlowPath(true));
                 }}
+                disabled={!useStore.getState().canUserEditTeam(teamSlug)}
               >
                 delete
               </Button>
@@ -197,6 +201,7 @@ const FormModal: React.FC<{
                   makeUnique(id, parent);
                   navigate(rootFlowPath(true));
                 }}
+                disabled={!useStore.getState().canUserEditTeam(teamSlug)}
               >
                 make unique
               </Button>
@@ -210,6 +215,7 @@ const FormModal: React.FC<{
               variant="contained"
               color="primary"
               form="modal"
+              disabled={!useStore.getState().canUserEditTeam(teamSlug)}
             >
               {handleDelete ? `Update ${type}` : `Create ${type}`}
             </Button>

editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts

@@ -23,6 +23,7 @@ import { FlowLayout } from "../../components/Flow";
 import { connectToDB, getConnection } from "./../sharedb";
 import type { Store } from ".";
 import type { SharedStore } from "./shared";
+import { UserStore } from "./user";
 
 let doc: any;
 
@@ -40,7 +41,7 @@ export interface EditorUIStore {
 }
 
 export const editorUIStore: StateCreator<
-  SharedStore & EditorUIStore,
+  SharedStore & EditorUIStore & UserStore,
   [],
   [],
   EditorUIStore
@@ -82,7 +83,7 @@ export interface EditorStore extends Store.Store {
 }
 
 export const editorStore: StateCreator<
-  SharedStore & EditorStore,
+  SharedStore & EditorStore & UserStore,
   [],
   [],
   EditorStore

editor.planx.uk/src/pages/FlowEditor/lib/store/index.ts

@@ -14,6 +14,7 @@ import type { SharedStore } from "./shared";
 import { sharedStore } from "./shared";
 import type { TeamStore } from "./team";
 import { teamStore } from "./team";
+import { UserStore, userStore } from "./user";
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export declare namespace Store {
@@ -52,7 +53,7 @@ export type PublicStore = SharedStore &
   SettingsStore &
   TeamStore;
 
-export type FullStore = PublicStore & EditorStore & EditorUIStore;
+export type FullStore = PublicStore & EditorStore & EditorUIStore & UserStore;
 
 interface PlanXStores {
   // Non-React implementation (e.g. for use in tests)
@@ -87,6 +88,7 @@ const createFullStore = (): StoreApi<FullStore> => {
     ...editorUIStore(...args),
     ...settingsStore(...args),
     ...teamStore(...args),
+    ...userStore(...args),
   }));
 };
 

editor.planx.uk/src/pages/FlowEditor/lib/store/user.ts

@@ -0,0 +1,48 @@
+import { Team, User } from "types";
+import type { StateCreator } from "zustand";
+
+export interface UserStore {
+  name: string;
+  email: string;
+  isPlatformAdmin: boolean;
+  roles: { teamSlug: Team["slug"]; role: "teamEditor" | "teamViewer" }[] | [];
+
+  setUser: (user: User) => void;
+  getUser: () => User;
+  canUserEditTeam: (teamSlug: Team["slug"]) => boolean;
+}
+
+export const userStore: StateCreator<UserStore, [], [], UserStore> = (
+  set,
+  get,
+) => ({
+  name: "",
+  email: "",
+  isPlatformAdmin: false,
+  roles: [],
+
+  setUser: (user) =>
+    set({
+      name: user.name,
+      email: user.email,
+      isPlatformAdmin: user.isPlatformAdmin,
+      roles: user.roles,
+    }),
+
+  getUser: () => ({
+    name: get().name,
+    email: get().email,
+    roles: get().roles,
+    isPlatformAdmin: get().isPlatformAdmin,
+  }),
+
+  canUserEditTeam: (teamSlug) => {
+    return (
+      get().roles.filter(
+        (r) =>
+          (r.role === "teamEditor" && r.teamSlug === teamSlug) ||
+          get().isPlatformAdmin,
+      ).length > 0
+    );
+  },
+});