🔧 Generify DescriptionBox

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/>
-                            <InstanceDescriptionBox/>
-                        </Chapter>
                         <AuthorizationProvider>
                             <CacheProvider>
                                 <AuthorizationRouter
@@ -64,9 +64,7 @@ function App({..._}: RouteComponentProps) {
                                                         <GroupCreateBox resource={selection}/>
                                                     </>}
                                                     selectedRoute={({selection}) => <>
-                                                        <Chapter>
+                                                        <ResourceDescriptionBox resource={selection} icon={faProjectDiagram}/>
-                                                            <ResourceDescriptionBox resource={selection} icon={faProjectDiagram}/>
-                                                        </Chapter>
                                                         <NotebookRouter
                                                             projectPk={selection.value.slug}
                                                             unselectedRoute={({viewSet}) => <>
@@ -87,7 +85,7 @@ function App({..._}: RouteComponentProps) {
                     </>}
                 />
             </InstanceProvider>
-        ),
+        </>,
         [],
     )
 }

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],
+    )
+}

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>
+            <DescriptionBox
-                <Heading level={3}>
+                icon={icon}
-                    <FontAwesomeIcon icon={icon}/>&nbsp;About <Idiomatic>{resource.value.name}</Idiomatic>
+                name={resource.value.name}
-                </Heading>
+                description={resource.value.description}
-                <ReactMarkdown>
+            />
-                    {resource.value.description}
-                </ReactMarkdown>
-            </Box>
         ),
         [resource],
     )

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."}
+        />
+    )
+}

frontend/src/components/informative/WhatIsSophonBox.tsx

@@ -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>
-    )
-}

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>
+        <DescriptionBox
-            <Heading level={3}>
+            icon={faUniversity}
-                About <Idiomatic>{instance.state.details.name}</Idiomatic>
+            name={instance.state.details.name}
-            </Heading>
+            description={instance.state.details.description}
-            <ReactMarkdown>
+        />
-                {instance.state.details.description}
-            </ReactMarkdown>
-        </Box>
     )
 }

frontend/src/components/instance/InstanceStepPage.tsx

@@ -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>
-    )
-}