groups: set color in settings

pkg/interface/src/logic/api/groups.ts

@@ -26,7 +26,7 @@ export default class GroupsApi extends BaseApi<StoreState> {
     return this.proxyAction({ addMembers: { resource, ships } });
   }
 
-  changePolicy(resource: Resource, diff: GroupPolicyDiff) {
+  changePolicy(resource: Resource, diff: Enc<GroupPolicyDiff>) {
     return this.proxyAction({ changePolicy: { resource, diff } });
   }
 

pkg/interface/src/logic/api/metadata.ts

@@ -1,7 +1,7 @@
 
 import BaseApi from './base';
 import { StoreState } from '../store/type';
-import { Path, Patp } from '~/types/noun';
+import { Path, Patp, Association, Metadata } from '~/types';
 
 export default class MetadataApi extends BaseApi<StoreState> {
 
@@ -27,6 +27,20 @@ export default class MetadataApi extends BaseApi<StoreState> {
     });
   }
 
+  update(association: Association, newMetadata: Partial<Metadata>) {
+    const metadata = {...association.metadata, ...newMetadata };
+    return this.metadataAction({ 
+      add: {
+        'group-path': association['group-path'], 
+        resource: {
+          'app-path': association['app-path'],
+          'app-name': association['app-name'],
+        },
+        metadata
+      }
+    });
+  }
+
   private metadataAction(data) {
     return this.action('metadata-hook', 'metadata-action', data);
   }

pkg/interface/src/logic/lib/useOutsideClick.ts

@@ -6,7 +6,11 @@ export function useOutsideClick(
 ) {
   useEffect(() => {
     function handleClick(event: MouseEvent) {
-      if (ref.current && !ref.current.contains(event.target as any)) {
+      if (
+        ref.current &&
+        !ref.current.contains(event.target as any) &&
+        !document.querySelector("#portal-root")!.contains(event.target as any)
+      ) {
         onClick();
       }
     }

pkg/interface/src/types/metadata-update.ts

@@ -45,7 +45,7 @@ export type Association = Resource & {
   metadata: Metadata;
 };
 
-interface Metadata {
+export interface Metadata {
   color: string;
   creator: Patp;
   'date-created': string;

pkg/interface/src/views/landscape/components/GroupSettings.tsx

@@ -17,16 +17,19 @@ import { Association } from "~/types/metadata-update";
 import GlobalApi from "~/logic/api/global";
 import { resourceFromPath, roleForShip } from "~/logic/lib/group";
 import { StatelessAsyncButton } from "~/views/components/StatelessAsyncButton";
+import { ColorInput } from "~/views/components/ColorInput";
 
 interface FormSchema {
-  name: string;
-  description?: string;
+  title: string;
+  description: string;
+  color: string;
   isPrivate: boolean;
 }
 
 const formSchema = Yup.object({
-  name: Yup.string().required("Group must have a name"),
+  title: Yup.string().required("Group must have a name"),
   description: Yup.string(),
+  color: Yup.string(),
   isPrivate: Yup.boolean(),
 });
 
@@ -40,8 +43,9 @@ export function GroupSettings(props: GroupSettingsProps) {
   const { metadata } = association;
   const currentPrivate = "invite" in props.group.policy;
   const initialValues: FormSchema = {
-    name: metadata.title,
+    title: metadata.title,
     description: metadata.description,
+    color: metadata.color,
     isPrivate: currentPrivate,
   };
 
@@ -50,8 +54,8 @@ export function GroupSettings(props: GroupSettingsProps) {
     actions: FormikHelpers<FormSchema>
   ) => {
     try {
-      const { name, description, isPrivate } = values;
-      await props.api.metadata.editGroup(props.association, name, description);
+      const { title, description, color, isPrivate } = values;
+      await props.api.metadata.update(props.association, { title, description, color });
       if (isPrivate !== currentPrivate) {
         const resource = resourceFromPath(props.association["group-path"]);
         const newPolicy: Enc<GroupPolicy> = isPrivate
@@ -108,7 +112,7 @@ export function GroupSettings(props: GroupSettingsProps) {
               </>
             )}
             <Input
-              id="name"
+              id="title"
               label="Group Name"
               caption="The name for your group to be called by"
               disabled={disabled}
@@ -119,6 +123,12 @@ export function GroupSettings(props: GroupSettingsProps) {
               caption="The description of your group"
               disabled={disabled}
             />
+            <ColorInput
+              id="color"
+              label="Group color"
+              caption="A color to represent your group"
+              disabled={disabled}
+            />
             <Checkbox
               id="isPrivate"
               label="Private group"

pkg/interface/src/views/landscape/components/GroupSwitcher.tsx

@@ -152,12 +152,12 @@ export function GroupSwitcher(props: {
               </Col>
             }
           >
-            <Box p={2} alignItems="center" display="flex">
-              <Box mr={1} flex='1'>
+            <Row p={2} alignItems="center">
+              <Row alignItems="center" mr={1} flex='1'>
                 <Text overflow='hidden' display='inline-block' maxWidth='144px'  style={{ textOverflow: 'ellipsis', whiteSpace: 'pre'}}>{title}</Text>
-              </Box>
+              </Row>
               <Icon mt="0px" display="block" icon="ChevronSouth" />
-            </Box>
+            </Row>
           </Dropdown>
           <Row collapse pr={1} justifyContent="flex-end" alignItems="center">
             {workspace.type === "group" && (

pkg/interface/src/views/landscape/components/PopoverRoutes.tsx

@@ -130,6 +130,7 @@ export function PopoverRoutes(
                         group={props.group}
                         contacts={props.contacts}
                         association={props.association}
+                        api={props.api}
                       />
                     )}
                     {view === "profile" && (