✨ Create GroupDescriptionBox

frontend/src/App.tsx

@@ -7,8 +7,10 @@ import {AuthorizationStepPage} from "./components/authorization/AuthorizationSte
 import {SophonFooter} from "./components/elements/SophonFooter"
 import {ErrorCatcherBox} from "./components/errors/ErrorCatcherBox"
 import {GroupCreateBox} from "./components/group/GroupCreateBox"
+import {GroupDescriptionBox} from "./components/group/GroupDescriptionBox"
 import {GroupListBox} from "./components/group/GroupListBox"
 import {GroupRouter} from "./components/group/GroupRouter"
+import {InstanceDescriptionBox} from "./components/instance/InstanceDescriptionBox"
 import {InstanceRouter} from "./components/instance/InstanceRouter"
 import {InstanceStepPage} from "./components/instance/InstanceStepPage"
 import {NotebookListBox} from "./components/notebook/NotebookListBox"
@@ -31,6 +33,7 @@ function App({..._}: RouteComponentProps) {
                     <InstanceStepPage/>
                 </>}
                 selectedRoute={() => <>
+                    <InstanceDescriptionBox/>
                     <AuthorizationProvider>
                         <AuthorizationRouter
                             unselectedRoute={() => <>
@@ -38,18 +41,19 @@ function App({..._}: RouteComponentProps) {
                             </>}
                             selectedRoute={() => <>
                                 <GroupRouter
-                                    unselectedRoute={(props) => <>
+                                    unselectedRoute={({viewSet}) => <>
-                                        <GroupListBox viewSet={props.viewSet}/>
+                                        <GroupListBox viewSet={viewSet}/>
-                                        <GroupCreateBox viewSet={props.viewSet}/>
+                                        <GroupCreateBox viewSet={viewSet}/>
                                     </>}
-                                    selectedRoute={(props) => <>
+                                    selectedRoute={({selection}) => <>
+                                        <GroupDescriptionBox resource={selection}/>
                                         <ProjectRouter
-                                            groupPk={props.selection.value.slug}
+                                            groupPk={selection.value.slug}
-                                            unselectedRoute={(props) => <ProjectListBox viewSet={props.viewSet}/>}
+                                            unselectedRoute={({viewSet}) => <ProjectListBox viewSet={viewSet}/>}
-                                            selectedRoute={(props) => <>
+                                            selectedRoute={({selection}) => <>
                                                 <NotebookRouter
-                                                    projectPk={props.selection.value.slug}
+                                                    projectPk={selection.value.slug}
-                                                    unselectedRoute={(props) => <NotebookListBox viewSet={props.viewSet}/>}
+                                                    unselectedRoute={({viewSet}) => <NotebookListBox viewSet={viewSet}/>}
                                                     selectedRoute={DebugBox}
                                                 />
                                             </>}

frontend/src/components/authorization/AuthorizationStepPage.tsx

@@ -1,7 +1,6 @@
 import {Chapter} from "@steffo/bluelib-react"
 import * as React from "react"
 import {useAuthorizationContext} from "../../contexts/authorization"
-import {InstanceDescriptionBox} from "../instance/InstanceDescriptionBox"
 import {AuthorizationAdminBox} from "./AuthorizationAdminBox"
 import {AuthorizationBrowseBox} from "./AuthorizationBrowseBox"
 import {AuthorizationLoginBox} from "./AuthorizationLoginBox"
@@ -43,7 +42,6 @@ export function AuthorizationStepPage(): JSX.Element {
     )
 
     return <>
-        <InstanceDescriptionBox/>
         {loginChapter}
         <Chapter>
             <AuthorizationAdminBox/>

frontend/src/components/group/GroupDescriptionBox.tsx

@@ -0,0 +1,23 @@
+import {Box, Heading} from "@steffo/bluelib-react"
+import * as React from "react"
+import {ManagedResource} from "../../hooks/useManagedViewSet"
+import {SophonResearchGroup} from "../../types/SophonTypes"
+
+
+export interface GroupDescriptionBoxProps {
+    resource: ManagedResource<SophonResearchGroup>
+}
+
+
+export function GroupDescriptionBox({resource}: GroupDescriptionBoxProps): JSX.Element {
+    return (
+        <Box>
+            <Heading level={3}>
+                {resource.value.name}
+            </Heading>
+            <pre>
+                {resource.value.description}
+            </pre>
+        </Box>
+    )
+}