diff --git a/ui/packages/portal/src/controls/NotebookEditorControl.tsx b/ui/packages/portal/src/controls/NotebookEditorControl.tsx index 8deeb481b..5e9e2eb34 100644 --- a/ui/packages/portal/src/controls/NotebookEditorControl.tsx +++ b/ui/packages/portal/src/controls/NotebookEditorControl.tsx @@ -24,6 +24,10 @@ export default function NotebookEditorControl({notebook}: NotebookEditorView) { return ( ); } diff --git a/ui/packages/portal/src/features/notebook/Elements.tsx b/ui/packages/portal/src/features/notebook/Elements.tsx index 7dfc47b07..b308c04dc 100644 --- a/ui/packages/portal/src/features/notebook/Elements.tsx +++ b/ui/packages/portal/src/features/notebook/Elements.tsx @@ -6,16 +6,14 @@ 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(); @@ -23,7 +21,7 @@ export function Elements() { const renderedElements = elementIds.map(elementId => { return (
- + {canEdit && }
); diff --git a/ui/packages/portal/src/features/notebook/NotebookEditor.tsx b/ui/packages/portal/src/features/notebook/NotebookEditor.tsx index a7a8077f9..735605681 100644 --- a/ui/packages/portal/src/features/notebook/NotebookEditor.tsx +++ b/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,11 +57,13 @@ 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(); const {EnvAccessControlApi} = useApi(); @@ -71,8 +71,6 @@ export function NotebookEditor({notebook}: NotebookEditorProps) { 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, diff --git a/ui/packages/portal/src/features/notebook/SessionButton.tsx b/ui/packages/portal/src/features/notebook/SessionButton.tsx index a86294d2d..497eba561 100644 --- a/ui/packages/portal/src/features/notebook/SessionButton.tsx +++ b/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(); const [availableTiers, setAvailableTiers] = useState(); const [availableImages, setAvailableImages] = useState(); - 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') { diff --git a/ui/packages/portal/src/features/notebook/documentStore/documentState.ts b/ui/packages/portal/src/features/notebook/documentStore/documentState.ts index 18d955db2..ad84752e4 100644 --- a/ui/packages/portal/src/features/notebook/documentStore/documentState.ts +++ b/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; readonly updateMarkdownDebouncedFunc: DebouncedFunc<(func: () => void) => void>; readonly activeElementId?: string; diff --git a/ui/packages/portal/src/features/notebook/documentStore/hooks/useUpdateMarkdown.ts b/ui/packages/portal/src/features/notebook/documentStore/hooks/useUpdateMarkdown.ts index 36229aa1f..e6f891396 100644 --- a/ui/packages/portal/src/features/notebook/documentStore/hooks/useUpdateMarkdown.ts +++ b/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]); } \ No newline at end of file