diff --git a/frontend/src/components/notebook/NotebookDescriptionBox.tsx b/frontend/src/components/notebook/NotebookDescriptionBox.tsx index 10613d9..962396f 100644 --- a/frontend/src/components/notebook/NotebookDescriptionBox.tsx +++ b/frontend/src/components/notebook/NotebookDescriptionBox.tsx @@ -1,9 +1,11 @@ import {faBook} from "@fortawesome/free-solid-svg-icons" import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" -import {Box, BringAttention as B, Code, Heading, Idiomatic as I} from "@steffo/bluelib-react" +import {Box, BringAttention as B, Code, Form, Heading, Idiomatic as I} from "@steffo/bluelib-react" import * as React from "react" import {useCacheContext} from "../../contexts/cache" import {useNotebookContext} from "../../contexts/notebook" +import {NotebookLabButton} from "./NotebookLabButton" +import {NotebookLegacyButton} from "./NotebookLegacyButton" export function NotebookDescriptionBox(): JSX.Element | null { @@ -40,6 +42,12 @@ export function NotebookDescriptionBox(): JSX.Element | null {

A {notebook.value.is_running ? "running" : "stopped"} notebook using {notebook.value.container_image}{locked_text}.

+
+ + + + +
) } diff --git a/frontend/src/components/notebook/NotebookLabButton.tsx b/frontend/src/components/notebook/NotebookLabButton.tsx new file mode 100644 index 0000000..695ef98 --- /dev/null +++ b/frontend/src/components/notebook/NotebookLabButton.tsx @@ -0,0 +1,37 @@ +import {faFlask} from "@fortawesome/free-solid-svg-icons" +import * as React from "react" +import {useAuthorizationContext} from "../../contexts/authorization" +import {useNotebookContext} from "../../contexts/notebook" +import {IconText} from "../elements/IconText" +import {NavigateButton} from "../elements/NavigateButton" + + +export function NotebookLabButton(): JSX.Element | null { + const authorization = useAuthorizationContext() + const notebook = useNotebookContext() + + const canOpen = + React.useMemo( + () => authorization && + notebook && + ( + notebook.value.locked_by === null || notebook.value.locked_by === authorization?.state.user?.id + ), + [notebook, authorization], + ) + + if(!notebook) { + return null + } + if(!notebook.value.lab_url) { + return null + } + + return ( + + + Open JupyterLab + + + ) +} diff --git a/frontend/src/components/notebook/NotebookLegacyButton.tsx b/frontend/src/components/notebook/NotebookLegacyButton.tsx new file mode 100644 index 0000000..154cd17 --- /dev/null +++ b/frontend/src/components/notebook/NotebookLegacyButton.tsx @@ -0,0 +1,37 @@ +import {faBook} from "@fortawesome/free-solid-svg-icons" +import * as React from "react" +import {useAuthorizationContext} from "../../contexts/authorization" +import {useNotebookContext} from "../../contexts/notebook" +import {IconText} from "../elements/IconText" +import {NavigateButton} from "../elements/NavigateButton" + + +export function NotebookLegacyButton(): JSX.Element | null { + const authorization = useAuthorizationContext() + const notebook = useNotebookContext() + + const canOpen = + React.useMemo( + () => authorization && + notebook && + ( + notebook.value.locked_by === null || notebook.value.locked_by === authorization?.state.user?.id + ), + [notebook, authorization], + ) + + if(!notebook) { + return null + } + if(!notebook.value.legacy_notebook_url) { + return null + } + + return ( + + + Open legacy Jupyter Notebook + + + ) +}