From 3ed4a330cca869878c2e41503e6d414e1cd96ff0 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Sat, 16 Oct 2021 16:31:03 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Create=20buttons=20to=20access=20th?=
 =?UTF-8?q?e=20JupyterLab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../notebook/NotebookDescriptionBox.tsx       | 10 ++++-
 .../components/notebook/NotebookLabButton.tsx | 37 +++++++++++++++++++
 .../notebook/NotebookLegacyButton.tsx         | 37 +++++++++++++++++++
 3 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/notebook/NotebookLabButton.tsx
 create mode 100644 frontend/src/components/notebook/NotebookLegacyButton.tsx

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