moved canEdit and canRun permissions to props

ui/packages/portal/src/controls/NotebookEditorControl.tsx

@@ -24,6 +24,10 @@ export default function NotebookEditorControl({notebook}: NotebookEditorView) {
     return (
         <NotebookEditor
             notebook={notebook}
+            projectId={'1'}
+            envId={'1'}
+            canEdit={true}
+            canRun={true}
         />
     );
 }

ui/packages/portal/src/features/notebook/Elements.tsx

@@ -6,24 +6,22 @@ import { triggerContentWidthChanged } from "./contentWidthEvent";
 import { debounce } from "lodash";
 import { usePrefixHashFragment } from "../../shared/hooks/usePrefixHashFragment";
 import { useNotebookEditorSelector } from "./NotebookEditor";
-import { ControlStarter } from "@open-smc/application/src/ControlStarter";
-import { useProject } from "../project/projectStore/hooks/useProject";
-import { useEnv } from "../project/projectStore/hooks/useEnv";
+import { ControlStarter } from "@open-smc/application/ControlStarter";
 
 export function Elements() {
     const permissions = useNotebookEditorSelector("permissions");
     const elementIds = useNotebookEditorSelector("elementIds");
     const {canEdit} = permissions;
-    const {project} = useProject();
-    const {envId} = useEnv();
+    const projectId = useNotebookEditorSelector("projectId");
+    const envId = useNotebookEditorSelector("envId");
     const notebook = useNotebookEditorSelector("notebook");
 
     usePrefixHashFragment();
 
     const renderedElements = elementIds.map(elementId => {
             return (
                 <div className={styles.elementsContainer} key={elementId}>
-                    <ControlStarter area={`element-${elementId}`} path={`notebookElement/${project.id}/${envId}/${notebook.id}/${elementId}`}/>
+                    <ControlStarter area={`element-${elementId}`} path={`notebookElement/${projectId}/${envId}/${notebook.id}/${elementId}`}/>
                     {canEdit && <AddElement afterElementId={elementId}/>}
                 </div>
             );

ui/packages/portal/src/features/notebook/NotebookEditor.tsx

@@ -27,8 +27,6 @@ import { Elements } from "./Elements";
 // import { NotebookSessionDialog } from "./NotebookSessionDialog";
 import { useSubscribeToNewElements } from "./documentStore/hooks/useSubscribeToNewElements";
 import { NotebookElementDto } from "../../controls/ElementEditorControl";
-import { useProject } from "../project/projectStore/hooks/useProject";
-import { useEnv } from "../project/projectStore/hooks/useEnv";
 import { useProjectSelector } from "../project/projectStore/projectStore";
 import { useApi } from "../../ApiProvider";
 import { makeUseSelector } from "@open-smc/store/src/useSelector";
@@ -59,20 +57,20 @@ export function useElementsStore() {
 
 interface NotebookEditorProps {
     notebook: NotebookDto;
+    projectId: string;
+    envId: string;
+    canEdit: boolean;
+    canRun: boolean;
 }
 
-export function NotebookEditor({notebook}: NotebookEditorProps) {
-    const {project: {id: projectId}} = useProject();
-    const {envId} = useEnv();
+export function NotebookEditor({notebook, projectId, envId, canEdit, canRun}: NotebookEditorProps) {
     const {path: notebookPath} = useProjectSelector("activeFile");
     const [contextValue, setContextValue] = useState<NotebookEditorContext>();
     const {EnvAccessControlApi} = useApi();
 
     useEffect(() => {
         (async function () {
             const {elementIds} = notebook;
-            const canEdit =  await EnvAccessControlApi.getPermission(projectId, 'Edit', envId, notebook.id);
-            const canRun = await EnvAccessControlApi.getPermission(projectId, 'Session', envId, notebook.id);
             const elementModels = elementIds.map(elementId => getElementModel(elementId));
             const elementsById = keyBy(elementModels, c => c.elementId);
             // const markdown = getDocumentMarkdown(elementIds, elementsById, projectId, envId, notebookPath);
@@ -84,6 +82,8 @@ export function NotebookEditor({notebook}: NotebookEditorProps) {
 
             const initialState = {
                 notebook,
+                projectId,
+                envId,
                 elementIds,
                 selectedElementIds,
                 activeElementId,

ui/packages/portal/src/features/notebook/SessionButton.tsx

@@ -10,9 +10,7 @@ import { useEffect, useState } from "react";
 import { isEmpty, round } from "lodash";
 import { SessionSpecification } from "../../app/notebookFormat";
 import { SessionTierOverlay } from "./SessionTierOverlay";
-import { useProject } from "../project/projectStore/hooks/useProject";
-import button from "@open-smc/ui-kit/src/components/buttons.module.scss"
-import { useEnv } from "../project/projectStore/hooks/useEnv";
+import button from "@open-smc/ui-kit/src/components/buttons.module.scss";
 import { ImageSettingsDto, SessionTierSpecificationDto } from "../project/projectSessionApi";
 import { rcTooltipOptions } from "../../shared/tooltipOptions";
 import { useNotebookEditorSelector } from "./NotebookEditor";
@@ -27,8 +25,8 @@ export function SessionButton() {
     const [specification, setSpecification] = useState<SessionSpecification>();
     const [availableTiers, setAvailableTiers] = useState<SessionTierSpecificationDto[]>();
     const [availableImages, setAvailableImages] = useState<ImageSettingsDto[]>();
-    const {project} = useProject();
-    const {env} = useEnv();
+    const projectId = useNotebookEditorSelector("projectId");
+    const envId = useNotebookEditorSelector("envId");
     const {canRun} = useNotebookEditorSelector("permissions");
     const [overlayOpen, setOverlayOpen] = useState(false);
     const {ProjectSessionApi, EnvSessionApi} = useApi();
@@ -44,7 +42,7 @@ export function SessionButton() {
                 if (sessionStatus === "Running") {
                     setSpecification(notebook?.currentSession?.specification);
                 } else if (!isEmpty(tiers)) {
-                    const settings = await EnvSessionApi.getSessionSettings(project.id, env.id, notebook.id);
+                    const settings = await EnvSessionApi.getSessionSettings(projectId, envId, notebook.id);
                     const defaultTier = tiers[0];
                     const defaultImage = images[0];
                     const {cpu, memory, systemName: tier} = (settings.tier ?? defaultTier);
@@ -53,7 +51,7 @@ export function SessionButton() {
                 }
             }
         )()
-    }, [env.id, project.id, notebook.id])
+    }, [envId, projectId, notebook.id])
 
     const getText = () => {
         if (sessionStatus === 'Starting' || sessionStatus === 'Initializing') {

ui/packages/portal/src/features/notebook/documentStore/documentState.ts

@@ -20,6 +20,8 @@ export interface NotebookEditorState  {
     readonly permissions: NotebookPermissions,
     readonly notebook: NotebookDto;
     readonly elementIds: string[];
+    readonly projectId: string;
+    readonly envId: string;
     readonly markdown?: Record<string, ElementMarkdown>;
     readonly updateMarkdownDebouncedFunc: DebouncedFunc<(func: () => void) => void>;
     readonly activeElementId?: string;

ui/packages/portal/src/features/notebook/documentStore/hooks/useUpdateMarkdown.ts

@@ -1,22 +1,20 @@
-import { useElementsStore, useNotebookEditorStore } from "../../NotebookEditor";
+import {useElementsStore, useNotebookEditorSelector, useNotebookEditorStore} from "../../NotebookEditor";
 import { getCompiler, getParser } from "../../markdownParser";
 import { ElementMarkdown } from "../documentState";
-import { useProject } from "../../../project/projectStore/hooks/useProject";
-import { useEnv } from "../../../project/projectStore/hooks/useEnv";
 import { useProjectSelector } from "../../../project/projectStore/projectStore";
 import { useCallback } from "react";
 
 export function useUpdateMarkdown() {
     const notebookEditorStore = useNotebookEditorStore();
     const elementsStore = useElementsStore();
-    const {env} = useEnv();
-    const {project: {id: projectId}} = useProject();
+    const projectId = useNotebookEditorSelector("projectId");
+    const envId = useNotebookEditorSelector("envId");
     const activeFile = useProjectSelector("activeFile");
 
     return useCallback((updatedElementIds?: string[]) => {
         const {elementIds, markdown} = notebookEditorStore.getState();
         const models = elementsStore.getState();
-        const parse = getParser(true, projectId, env.id, activeFile.path);
+        const parse = getParser(true, projectId, envId, activeFile.path);
         const compile = getCompiler(true);
 
         notebookEditorStore.setState(state => {
@@ -42,5 +40,5 @@ export function useUpdateMarkdown() {
 
             state.markdown = newMarkdown;
         });
-    }, [notebookEditorStore, elementsStore, env, projectId, activeFile]);
+    }, [notebookEditorStore, elementsStore, envId, projectId, activeFile]);
 }