interface: surface member-metadata functionality

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

@@ -31,6 +31,7 @@ interface FormSchema {
   color: string;
   isPrivate: boolean;
   picture: string;
+  adminMetadata: boolean;
 }
 
 const formSchema = Yup.object({
@@ -38,6 +39,7 @@ const formSchema = Yup.object({
   description: Yup.string(),
   color: Yup.string(),
   isPrivate: Yup.boolean(),
+  adminMetadata: Yup.boolean()
 });
 
 interface GroupAdminSettingsProps {
@@ -58,6 +60,7 @@ export function GroupAdminSettings(props: GroupAdminSettingsProps) {
     color: metadata?.color,
     picture: metadata?.picture,
     isPrivate: currentPrivate,
+    adminMetadata: metadata.vip !== 'member-metadata'
   };
 
   const onSubmit = async (
@@ -65,13 +68,15 @@ export function GroupAdminSettings(props: GroupAdminSettingsProps) {
     actions: FormikHelpers<FormSchema>
   ) => {
     try {
-      const { title, description, picture, color, isPrivate } = values;
+      const { title, description, picture, color, isPrivate, adminMetadata } = values;
       const uxColor = uxToHex(color);
+      const vip = adminMetadata ? '' : 'member-metadata';
       await props.api.metadata.update(props.association, {
         title,
         description,
         picture,
         color: uxColor,
+        vip
       });
       if (isPrivate !== currentPrivate) {
         const resource = resourceFromPath(props.association.group);
@@ -135,6 +140,13 @@ export function GroupAdminSettings(props: GroupAdminSettingsProps) {
             caption="If enabled, users must be invited to join the group"
             disabled={disabled}
           />
+          <Checkbox
+            id="adminMetadata"
+            label="Restrict channel adding to admins"
+            caption="If enabled, users must be an admin to add a channel to the group"
+            disabled={disabled}
+          />
+
           <AsyncButton
             disabled={disabled}
             primary

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

@@ -85,6 +85,7 @@ export function Sidebar(props: SidebarProps) {
         workspace={props.workspace}
       />
       <SidebarListHeader
+        associations={associations}
         contacts={props.contacts}
         baseUrl={props.baseUrl}
         groups={props.groups}

pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx

@@ -16,10 +16,11 @@ import { SidebarListConfig, Workspace } from "./types";
 import { Link, useHistory } from 'react-router-dom';
 import { getGroupFromWorkspace } from "~/logic/lib/workspace";
 import { roleForShip } from "~/logic/lib/group";
-import {Groups, Rolodex} from "~/types";
+import {Groups, Rolodex, Associations} from "~/types";
 
 export function SidebarListHeader(props: {
   initialValues: SidebarListConfig;
+  associations: Associations;
   groups: Groups;
   contacts: Rolodex;
   baseUrl: string;
@@ -39,7 +40,10 @@ export function SidebarListHeader(props: {
 
   const groupPath = getGroupFromWorkspace(props.workspace);
   const role = props.groups?.[groupPath] ? roleForShip(props.groups[groupPath], window.ship) : undefined;
-  const isAdmin = (role === "admin") || (props.workspace?.type === 'home');
+  const memberMetadata = 
+    groupPath ? props.associations.contacts?.[groupPath].metadata.vip === 'member-metadata' : false;
+
+  const isAdmin = memberMetadata || (role === "admin") || (props.workspace?.type === 'home');
 
   return (
     <Row