✨ Add group edit box

frontend/package.json

@@ -8,7 +8,7 @@
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
         "@fortawesome/react-fontawesome": "^0.1.15",
         "@reach/router": "^1.3.4",
-        "@steffo/bluelib-react": "^4.0.4",
+        "@steffo/bluelib-react": "^4.0.5",
         "@testing-library/jest-dom": "^5.11.4",
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",

frontend/src/App.tsx

@@ -57,6 +57,7 @@ function App({..._}: RouteComponentProps) {
                                                 groupPk={selection.value.slug}
                                                 unselectedRoute={({viewSet}) => <>
                                                     <ProjectListBox viewSet={viewSet}/>
+                                                    <GroupCreateBox resource={selection}/>
                                                 </>}
                                                 selectedRoute={({selection}) => <>
                                                     <NotebookRouter

frontend/src/components/group/GroupCreateBox.tsx

@@ -1,28 +1,28 @@
-import {Box, Details, Form, useFormState} from "@steffo/bluelib-react"
+import {Box, Details, Form, Idiomatic as I, useFormState} from "@steffo/bluelib-react"
 import * as React from "react"
 import {useAuthorizationContext} from "../../contexts/authorization"
 import {useCacheContext} from "../../contexts/cache"
 import {useInstanceContext} from "../../contexts/instance"
-import {ManagedViewSet} from "../../hooks/useManagedViewSet"
+import {ManagedResource, ManagedViewSet} from "../../hooks/useManagedViewSet"
 import {SophonResearchGroup} from "../../types/SophonTypes"
-import {ErrorBox} from "../errors/ErrorBox"
 
 
 export interface GroupCreateBoxProps {
-    viewSet: ManagedViewSet<SophonResearchGroup>
+    viewSet?: ManagedViewSet<SophonResearchGroup>,
+    resource?: ManagedResource<SophonResearchGroup>,
 }
 
 
-export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | null {
+export function GroupCreateBox({viewSet, resource}: GroupCreateBoxProps): JSX.Element | null {
     const instance = useInstanceContext()
     const authorization = useAuthorizationContext()
     const cache = useCacheContext()
 
     const name =
-        useFormState<string>("", val => val.length > 0 ? true : undefined)
+        useFormState<string>(resource?.value.name ?? "", val => val.length > 0 ? true : undefined)
 
     const description =
-        useFormState<string>("", val => val.length > 0 ? true : undefined)
+        useFormState<string>(resource?.value.description ?? "", val => val.length > 0 ? true : undefined)
 
     const membersOptions: { [key: string]: number } | undefined =
         React.useMemo(
@@ -37,18 +37,28 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
         )
 
     const members =
-        useFormState<number[]>([], arr => arr.length > 0 ? true : undefined)
+        useFormState<number[]>(resource?.value.members ?? [], arr => arr.length > 0 ? true : undefined)
 
     const access =
-        useFormState<"OPEN" | "MANUAL" | undefined>(undefined, val => (
+        useFormState<"OPEN" | "MANUAL" | undefined>(resource?.value.access ?? undefined, val => (
                                                                                                     val?.length
                                                                                                 ) ? true : undefined)
 
     const slug = name.value.replaceAll(/[^A-Za-z0-9-]/g, "-").toLowerCase()
 
-    const doCreate =
+    const onSubmit =
         React.useCallback(
             async () => {
+                if(resource) {
+                    await resource.update({
+                        name: name.value,
+                        slug: slug,
+                        description: description.value,
+                        members: members.value,
+                        access: access.value,
+                    })
+                }
+                else if(viewSet) {
                     await viewSet.create({
                         name: name.value,
                         slug: slug,
@@ -56,11 +66,36 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
                         members: members.value,
                         access: access.value,
                     })
+                }
             },
-            [viewSet, name, slug, description, members, access],
+            [viewSet, resource, name, slug, description, members, access],
         )
 
-    const canCreate =
+    const trueMembers =
+        React.useMemo(
+            () => resource ? [...new Set([resource.value.owner, ...resource.value.members])] : undefined,
+            [resource],
+        )
+
+    const canEdit =
+        React.useMemo(
+            () => !resource ||
+                (
+                    authorization && authorization.state.user && trueMembers?.includes(authorization.state.user.id)
+                ),
+            [authorization, resource],
+        )
+
+    const canAdministrate =
+        React.useMemo(
+            () => !resource ||
+                (
+                    authorization && authorization.state.user && authorization.state.user.id === resource.value.owner
+                ),
+            [authorization, resource],
+        )
+
+    const canSubmit =
         React.useMemo(
             () => name.validity === true && access.validity === true && Boolean(authorization?.state.user?.username),
             [name, access, authorization],
@@ -69,22 +104,31 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
     if(!authorization?.state.token) {
         return null
     }
+    if(!(
+        viewSet || resource
+    )) {
+        return null
+    }
+    if(!canEdit) {
+        return null
+    }
 
     return (
         <Box>
             <Details>
                 <Details.Summary>
-                    Create a new group
+                    {resource ? <>Edit <I>{resource.value.name}</I></> : "Create a new group"}
                 </Details.Summary>
                 <Details.Content>
                     <Form>
-                        <Form.Field label={"Name"} required {...name}/>
+                        <Form.Field label={"Name"} required disabled={!canEdit} {...name}/>
                         <Form.Field label={"Slug"} required disabled={true} value={slug} validity={slug.length > 0 ? true : undefined}/>
-                        <Form.Area label={"Description"} {...description}/>
+                        <Form.Area label={"Description"} disabled={!canEdit} {...description}/>
-                        <Form.Multiselect label={"Members"} options={membersOptions ?? {}} {...members}/>
+                        <Form.Multiselect label={"Members"} disabled={!canAdministrate} options={membersOptions ?? {}} {...members}/>
                         <Form.Field label={"Owner"} required disabled={true} value={authorization?.state.user?.username} validity={Boolean(authorization?.state.user?.username)}/>
                         <Form.Select
                             label={"Access"}
+                            disabled={!canAdministrate}
                             options={{
                                 "": undefined,
                                 "⛔️ Collaborators must be added manually": "MANUAL",
@@ -92,16 +136,13 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
                             }}
                             {...access}
                         />
-                        {
-                            viewSet.operationError ?
                         <Form.Row>
-                                <ErrorBox error={viewSet.operationError ?? undefined}/>
+                            <Form.Button
-                            </Form.Row>
+                                type={"button"} onClick={onSubmit} disabled={!canSubmit} builtinColor={(
-                                                   : null
+                                                                                                           viewSet?.operationError || resource?.error
-                        }
+                                                                                                       ) ? "red" : undefined}
-                        <Form.Row>
+                            >
-                            <Form.Button type={"button"} onClick={doCreate} disabled={!canCreate}>
+                                {resource ? "Edit" : "Create"}
-                                Create
                             </Form.Button>
                         </Form.Row>
                     </Form>

frontend/yarn.lock

@@ -1617,10 +1617,10 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@steffo/bluelib-react@^4.0.4":
+"@steffo/bluelib-react@^4.0.5":
-  version "4.0.4"
+  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/@steffo/bluelib-react/-/bluelib-react-4.0.4.tgz#1a4f4ccd3ee185603a95b7a0a183a919f29e9d32"
+  resolved "https://registry.yarnpkg.com/@steffo/bluelib-react/-/bluelib-react-4.0.5.tgz#6128454b03fc1888c4e7f4dbb1675f71fba2153c"
-  integrity sha512-ZwnAqbZ4LaYbQu56fMX0OIKBJA1X4LUfTIJsxnkJbPrr2qX0D+zQUl2vI2Jm/wlZdltvwm5ftCTLDwpqg/1h/g==
+  integrity sha512-W2TguaP5vixV0C1/chQ+SO69YydBMLWG+ml7TVgRIHoRtr3cKHpp8VVij8qxovdZ1dnkBMD9/z3skcdoRpToag==
   dependencies:
     "@babel/runtime" "^7.15.3"
     classnames "^2.3.1"