From 58b92a8f8fd6d6eadea540d1a63aa3be97f6e2c2 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 13 Oct 2021 05:05:34 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Generify=20`DescriptionBox`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                          | 18 +++++-------
 .../components/elements/DescriptionBox.tsx    | 29 +++++++++++++++++++
 .../generic/ResourceDescriptionBox.tsx        | 17 ++++-------
 .../informative/SophonDescriptionBox.tsx      | 14 +++++++++
 .../informative/WhatIsSophonBox.tsx           | 16 ----------
 .../instance/InstanceDescriptionBox.tsx       | 17 +++++------
 .../components/instance/InstanceStepPage.tsx  | 20 -------------
 7 files changed, 64 insertions(+), 67 deletions(-)
 create mode 100644 frontend/src/components/elements/DescriptionBox.tsx
 create mode 100644 frontend/src/components/informative/SophonDescriptionBox.tsx
 delete mode 100644 frontend/src/components/informative/WhatIsSophonBox.tsx
 delete mode 100644 frontend/src/components/instance/InstanceStepPage.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 278d5da..79c79c2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -12,9 +12,10 @@ import {GroupCreateBox} from "./components/group/GroupCreateBox"
 import {GroupListBox} from "./components/group/GroupListBox"
 import {GroupMembersBox} from "./components/group/GroupMembersBox"
 import {GroupRouter} from "./components/group/GroupRouter"
+import {SophonDescriptionBox} from "./components/informative/SophonDescriptionBox"
 import {InstanceDescriptionBox} from "./components/instance/InstanceDescriptionBox"
+import {InstanceFormBox} from "./components/instance/InstanceFormBox"
 import {InstanceRouter} from "./components/instance/InstanceRouter"
-import {InstanceStepPage} from "./components/instance/InstanceStepPage"
 import {NotebookListBox} from "./components/notebook/NotebookListBox"
 import {NotebookRouter} from "./components/notebook/NotebookRouter"
 import {DebugBox} from "./components/placeholder/DebugBox"
@@ -30,16 +31,15 @@ import {ThemeProvider} from "./contexts/theme"
 
 function App({..._}: RouteComponentProps) {
     return React.useMemo(
-        () => (
+        () => <>
+            <SophonDescriptionBox/>
             <InstanceProvider>
                 <InstanceRouter
                     unselectedRoute={() => <>
-                        <InstanceStepPage/>
+                        <InstanceFormBox/>
                     </>}
                     selectedRoute={() => <>
-                        <Chapter>
-                            <InstanceDescriptionBox/>
-                        </Chapter>
+                        <InstanceDescriptionBox/>
                         <AuthorizationProvider>
                             <CacheProvider>
                                 <AuthorizationRouter
@@ -64,9 +64,7 @@ function App({..._}: RouteComponentProps) {
                                                         <GroupCreateBox resource={selection}/>
                                                     </>}
                                                     selectedRoute={({selection}) => <>
-                                                        <Chapter>
-                                                            <ResourceDescriptionBox resource={selection} icon={faProjectDiagram}/>
-                                                        </Chapter>
+                                                        <ResourceDescriptionBox resource={selection} icon={faProjectDiagram}/>
                                                         <NotebookRouter
                                                             projectPk={selection.value.slug}
                                                             unselectedRoute={({viewSet}) => <>
@@ -87,7 +85,7 @@ function App({..._}: RouteComponentProps) {
                     </>}
                 />
             </InstanceProvider>
-        ),
+        </>,
         [],
     )
 }
diff --git a/frontend/src/components/elements/DescriptionBox.tsx b/frontend/src/components/elements/DescriptionBox.tsx
new file mode 100644
index 0000000..b7ddda3
--- /dev/null
+++ b/frontend/src/components/elements/DescriptionBox.tsx
@@ -0,0 +1,29 @@
+import {IconDefinition} from "@fortawesome/fontawesome-svg-core"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import {Box, Heading, Idiomatic} from "@steffo/bluelib-react"
+import * as React from "react"
+import ReactMarkdown from "react-markdown"
+
+
+export interface DescriptionBox {
+    icon: IconDefinition,
+    name: string,
+    description: string,
+}
+
+
+export function DescriptionBox({icon, name, description}: DescriptionBox): JSX.Element {
+    return React.useMemo(
+        () => (
+            <Box>
+                <Heading level={3}>
+                    <FontAwesomeIcon icon={icon}/>&nbsp;About <Idiomatic>{name}</Idiomatic>
+                </Heading>
+                <ReactMarkdown>
+                    {description}
+                </ReactMarkdown>
+            </Box>
+        ),
+        [icon, name, description],
+    )
+}
diff --git a/frontend/src/components/generic/ResourceDescriptionBox.tsx b/frontend/src/components/generic/ResourceDescriptionBox.tsx
index a15d712..964d80e 100644
--- a/frontend/src/components/generic/ResourceDescriptionBox.tsx
+++ b/frontend/src/components/generic/ResourceDescriptionBox.tsx
@@ -1,9 +1,7 @@
 import {IconDefinition} from "@fortawesome/fontawesome-svg-core"
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
-import {Box, Heading, Idiomatic} from "@steffo/bluelib-react"
 import * as React from "react"
-import ReactMarkdown from "react-markdown"
 import {ManagedResource} from "../../hooks/useManagedViewSet"
+import {DescriptionBox} from "../elements/DescriptionBox"
 
 
 export interface NamedAndDescribed {
@@ -21,14 +19,11 @@ export interface ResourceDescriptionBoxProps<T extends NamedAndDescribed> {
 export function ResourceDescriptionBox<T extends NamedAndDescribed>({resource, icon}: ResourceDescriptionBoxProps<T>): JSX.Element {
     return React.useMemo(
         () => (
-            <Box>
-                <Heading level={3}>
-                    <FontAwesomeIcon icon={icon}/>&nbsp;About <Idiomatic>{resource.value.name}</Idiomatic>
-                </Heading>
-                <ReactMarkdown>
-                    {resource.value.description}
-                </ReactMarkdown>
-            </Box>
+            <DescriptionBox
+                icon={icon}
+                name={resource.value.name}
+                description={resource.value.description}
+            />
         ),
         [resource],
     )
diff --git a/frontend/src/components/informative/SophonDescriptionBox.tsx b/frontend/src/components/informative/SophonDescriptionBox.tsx
new file mode 100644
index 0000000..669df72
--- /dev/null
+++ b/frontend/src/components/informative/SophonDescriptionBox.tsx
@@ -0,0 +1,14 @@
+import {faServer} from "@fortawesome/free-solid-svg-icons"
+import * as React from "react"
+import {DescriptionBox} from "../elements/DescriptionBox"
+
+
+export function SophonDescriptionBox(): JSX.Element {
+    return (
+        <DescriptionBox
+            icon={faServer}
+            name={"Sophon"}
+            description={"Sophon is software that allows you to store, execute, and optionally share your research in a secure cloud hosted by your institution."}
+        />
+    )
+}
diff --git a/frontend/src/components/informative/WhatIsSophonBox.tsx b/frontend/src/components/informative/WhatIsSophonBox.tsx
deleted file mode 100644
index 28a9c9e..0000000
--- a/frontend/src/components/informative/WhatIsSophonBox.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {Box, Heading} from "@steffo/bluelib-react"
-import * as React from "react"
-
-
-export function WhatIsSophonBox(): JSX.Element {
-    return (
-        <Box>
-            <Heading level={3}>
-                What is Sophon?
-            </Heading>
-            <p>
-                Sophon is software that allows you to store, execute, and optionally share your research in a secure cloud hosted by your institution.
-            </p>
-        </Box>
-    )
-}
diff --git a/frontend/src/components/instance/InstanceDescriptionBox.tsx b/frontend/src/components/instance/InstanceDescriptionBox.tsx
index d26122e..51c535e 100644
--- a/frontend/src/components/instance/InstanceDescriptionBox.tsx
+++ b/frontend/src/components/instance/InstanceDescriptionBox.tsx
@@ -1,7 +1,7 @@
-import {Box, Heading, Idiomatic} from "@steffo/bluelib-react"
+import {faUniversity} from "@fortawesome/free-solid-svg-icons"
 import * as React from "react"
-import ReactMarkdown from "react-markdown"
 import {useInstanceContext} from "../../contexts/instance"
+import {DescriptionBox} from "../elements/DescriptionBox"
 import {ErrorBox} from "../errors/ErrorBox"
 
 
@@ -21,13 +21,10 @@ export function InstanceDescriptionBox(): JSX.Element | null {
     }
 
     return (
-        <Box>
-            <Heading level={3}>
-                About <Idiomatic>{instance.state.details.name}</Idiomatic>
-            </Heading>
-            <ReactMarkdown>
-                {instance.state.details.description}
-            </ReactMarkdown>
-        </Box>
+        <DescriptionBox
+            icon={faUniversity}
+            name={instance.state.details.name}
+            description={instance.state.details.description}
+        />
     )
 }
diff --git a/frontend/src/components/instance/InstanceStepPage.tsx b/frontend/src/components/instance/InstanceStepPage.tsx
deleted file mode 100644
index 033ffe4..0000000
--- a/frontend/src/components/instance/InstanceStepPage.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import {Chapter} from "@steffo/bluelib-react"
-import * as React from "react"
-import {WhatIsSophonBox} from "../informative/WhatIsSophonBox"
-import {InstanceFormBox} from "./InstanceFormBox"
-
-
-/**
- * Page displayed by the {@link InstanceRouter} whenever no instance is selected, providing some information about Sophon to the user and allowing
- * them to select an instance and proceed to login.
- *
- * @constructor
- */
-export function InstanceStepPage(): JSX.Element {
-    return (
-        <Chapter>
-            <WhatIsSophonBox/>
-            <InstanceFormBox/>
-        </Chapter>
-    )
-}