✨ Create buttons to access the JupyterLab

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 {
             <p>
                 A <B>{notebook.value.is_running ? "running" : "stopped"}</B> notebook using <B><Code>{notebook.value.container_image}</Code></B>{locked_text}.
             </p>
+            <Form>
+                <Form.Row>
+                    <NotebookLabButton/>
+                    <NotebookLegacyButton/>
+                </Form.Row>
+            </Form>
         </Box>
     )
 }

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 (
+        <NavigateButton href={notebook.value.lab_url} disabled={!canOpen}>
+            <IconText icon={faFlask}>
+                Open JupyterLab
+            </IconText>
+        </NavigateButton>
+    )
+}

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 (
+        <NavigateButton href={notebook.value.legacy_notebook_url} disabled={!canOpen}>
+            <IconText icon={faBook}>
+                Open legacy Jupyter Notebook
+            </IconText>
+        </NavigateButton>
+    )
+}