From bf7e15bd2f5356bc6959d680ee5638046fe02a04 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Fri, 15 Oct 2021 17:22:11 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Create=20NotebookDescriptionBox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                          |  2 +
 .../notebook/NotebookDescriptionBox.tsx       | 45 +++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 frontend/src/components/notebook/NotebookDescriptionBox.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 41be85c..589af0a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -17,6 +17,7 @@ import {InstanceDescriptionBox} from "./components/instance/InstanceDescriptionB
 import {InstanceFormBox} from "./components/instance/InstanceFormBox"
 import {InstanceRouter} from "./components/instance/InstanceRouter"
 import {NotebookCreateBox} from "./components/notebook/NotebookCreateBox"
+import {NotebookDescriptionBox} from "./components/notebook/NotebookDescriptionBox"
 import {NotebookListBox} from "./components/notebook/NotebookListBox"
 import {NotebookRouter} from "./components/notebook/NotebookRouter"
 import {DebugBox} from "./components/placeholder/DebugBox"
@@ -81,6 +82,7 @@ function App({..._}: RouteComponentProps) {
                                                                     </>}
                                                                     selectedRoute={({selection}) => <>
                                                                         <NotebookProvider resource={selection}>
+                                                                            <NotebookDescriptionBox/>
                                                                             <NotebookCreateBox resource={selection}/>
                                                                             <DebugBox {...selection}/>
                                                                         </NotebookProvider>
diff --git a/frontend/src/components/notebook/NotebookDescriptionBox.tsx b/frontend/src/components/notebook/NotebookDescriptionBox.tsx
new file mode 100644
index 0000000..868768e
--- /dev/null
+++ b/frontend/src/components/notebook/NotebookDescriptionBox.tsx
@@ -0,0 +1,45 @@
+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 * as React from "react"
+import {useCacheContext} from "../../contexts/cache"
+import {useNotebookContext} from "../../contexts/notebook"
+
+
+export function NotebookDescriptionBox(): JSX.Element | null {
+    const cache = useCacheContext()
+    const notebook = useNotebookContext()
+
+    if(notebook) {
+        var locked_by = cache?.getUserById(notebook.value.locked_by)?.value.username
+    }
+
+    const locked_text =
+        React.useMemo(
+            () => {
+                if(!locked_by) {
+                    return null
+                }
+
+                return (
+                    <>, currently <B>locked by {locked_by}</B></>
+                )
+            },
+            [locked_by],
+        )
+
+    if(!notebook) {
+        return null
+    }
+
+    return (
+        <Box>
+            <Heading level={3}>
+                <FontAwesomeIcon icon={faBook}/>&nbsp;About <I>{notebook.value.name}</I>
+            </Heading>
+            <p>
+                A <B>{notebook.value.is_running ? "running" : "stopped"}</B> notebook using <B><Code>{notebook.value.container_image}</Code></B>{locked_text}.
+            </p>
+        </Box>
+    )
+}