interface: use md-store %edit instead of %add

pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/ChannelPermissions.tsx

@@ -5,7 +5,7 @@ import {
 
     Text
 } from '@tlon/indigo-react';
-import { addTag, Association, Group, metadataUpdate, PermVariation, removeTag } from '@urbit/api';
+import { addTag, Association, Group, PermVariation, removeTag, metadataEdit } from '@urbit/api';
 import { Form, Formik } from 'formik';
 import _ from 'lodash';
 import React from 'react';
@@ -107,7 +107,7 @@ export function GraphPermissions(props: GraphPermissionsProps) {
     };
     const allWriters = Array.from(writers).map(w => `~${w}`);
     if (values.readerComments !== readerComments) {
-      await airlock.poke(metadataUpdate(association, {
+      await airlock.poke(metadataEdit(association, {
         vip: values.readerComments ? 'reader-comments' : ''
       }));
     }

pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Details.tsx

@@ -3,7 +3,8 @@ import {
   Label, ManagedTextInputField as Input,
   Text
 } from '@tlon/indigo-react';
-import { Association, metadataUpdate } from '@urbit/api';
+import _ from 'lodash';
+import { Association, metadataEdit } from '@urbit/api';
 import { Form, Formik } from 'formik';
 import React from 'react';
 import { uxToHex } from '~/logic/lib/util';
@@ -32,9 +33,13 @@ export function ChannelDetails(props: ChannelDetailsProps) {
   };
 
   const onSubmit = async (values: FormSchema, actions) => {
-    const { title, description } = values;
-    const color = uxToHex(values.color);
-    await airlock.poke(metadataUpdate(association, { title, color, description }));
+    values.color = uxToHex(values.color);
+    const promises = _.compact(_.map(values, (value,k) => {
+      return value !== initialValues[k]
+        ? airlock.poke(metadataEdit(association, { [k]: value }))
+        : null;
+    }));
+    await Promise.all(promises);
     actions.setStatus({ success: null });
   };
 

pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/index.tsx

@@ -8,7 +8,7 @@ import {
     leaveGraph,
     metadataRemove
 } from '@urbit/api';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { isChannelAdmin, isHost } from '~/logic/lib/group';
 import { useHashLink } from '~/logic/lib/useHashLink';
@@ -31,7 +31,6 @@ interface ChannelPopoverRoutesProps {
 export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
   const { association, group } = props;
   useHashLink();
-  const overlayRef = useRef<HTMLElement>();
   const history = useHistory();
 
   const onDismiss = useCallback(() => {
@@ -63,7 +62,6 @@ export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
       height="100%"
       width="100%"
       spacing={[3, 5, 7]}
-      ref={overlayRef}
       dismiss={onDismiss}
     >
       <Row

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

@@ -4,9 +4,10 @@ import {
     ManagedToggleSwitchField as Checkbox,
     Text
 } from '@tlon/indigo-react';
-import { changePolicy, Enc, metadataUpdate } from '@urbit/api';
+import _ from 'lodash';
+import { changePolicy, Enc } from '@urbit/api';
 import { Group, GroupPolicy } from '@urbit/api/groups';
-import { Association } from '@urbit/api/metadata';
+import { Association, metadataEdit, MetadataEditField } from '@urbit/api/metadata';
 import { Form, Formik, FormikHelpers } from 'formik';
 import React from 'react';
 import * as Yup from 'yup';
@@ -58,16 +59,26 @@ export function GroupAdminSettings(props: GroupAdminSettingsProps) {
     actions: FormikHelpers<FormSchema>
   ) => {
     try {
-      const { title, description, picture, color, isPrivate, adminMetadata } = values;
+      const { color, isPrivate, adminMetadata } = values;
+      const update = (upd: MetadataEditField) =>
+        airlock.poke(metadataEdit(association, upd));
+
       const uxColor = uxToHex(color);
       const vip = adminMetadata ? '' : 'member-metadata';
-      await airlock.poke(metadataUpdate(props.association, {
-        title,
-        description,
-        picture,
-        color: uxColor,
-        vip
-      }));
+      const promises = _.compact(_.map(['title', 'description', 'picture'] as const,
+        (k) => {
+          const edit: MetadataEditField = { [k]: values[k] };
+          return (values[k] !== initialValues[k])
+            ? update(edit)
+            : null;
+        }));
+      if(vip !== metadata.vip) {
+        promises.push(update({ vip }));
+      }
+      if(uxColor !== metadata.color) {
+        promises.push(update({ color: uxColor }));
+      }
+      await Promise.all(promises);
       if (isPrivate !== currentPrivate) {
         const resource = resourceFromPath(props.association.group);
         const newPolicy: Enc<GroupPolicy> = isPrivate

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

@@ -1,5 +1,5 @@
 import { Col, Icon, Row, Text } from '@tlon/indigo-react';
-import { Association, Group, metadataRemove, metadataUpdate } from '@urbit/api';
+import { Association, Group, metadataRemove, metadataEdit } from '@urbit/api';
 import React, { useCallback } from 'react';
 import { resourceFromPath, roleForShip } from '~/logic/lib/group';
 import { getModuleIcon, GraphModule } from '~/logic/lib/util';
@@ -22,7 +22,8 @@ export function GroupChannelSettings(props: GroupChannelSettingsProps) {
 
   const onChange = useCallback(
     async (resource: string, preview: boolean) => {
-      await airlock.poke(metadataUpdate(associations.graph[resource], { preview }));
+      const association = associations.graph[resource];
+      await airlock.poke(metadataEdit(association, { preview }));
     },
     [associations.graph]
   );

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

@@ -1,5 +1,5 @@
 import { BaseLabel, Col, Label, Text } from '@tlon/indigo-react';
-import { Association, createGroupFeed, disableGroupFeed, Group, metadataUpdate, PermVariation, resourceFromPath } from '@urbit/api';
+import { Association, createGroupFeed, disableGroupFeed, Group, metadataEdit, PermVariation, resourceFromPath } from '@urbit/api';
 import { Form, Formik, FormikHelpers } from 'formik';
 import React from 'react';
 import useMetadataState from '~/logic/state/metadata';
@@ -46,7 +46,11 @@ export function GroupFeedSettings(props: {
     values: FormSchema,
     actions: FormikHelpers<FormSchema>
   ) => {
-    await airlock.poke(metadataUpdate(feedAssoc, { vip: values.permissions.trim() as PermVariation }));
+    await airlock.poke(
+      metadataEdit(feedAssoc, {
+        vip: values.permissions.trim() as PermVariation
+      })
+    );
 
     actions.setStatus({ success: null });
   };