Merge pull request #2548 from urbit/mp/groups/delorted

groups: delete group members without shared metadata; delete groups

pkg/interface/groups/src/js/api.js

@@ -22,7 +22,8 @@ class UrbitApi {
     };
 
     this.group = {
-      add: this.groupAdd.bind(this)
+      add: this.groupAdd.bind(this),
+      delete: this.groupRemove.bind(this)
     };
 
     this.invite = {
@@ -85,6 +86,12 @@ class UrbitApi {
     });
   }
 
+  groupRemove(path, ships) {
+    return this.action("group-store", "group-action", {
+      remove: { members: ships, path }
+    })
+  }
+
   contactShare(recipient, path, ship, contact) {
     return this.contactViewAction({
       share: {

pkg/interface/groups/src/js/components/lib/contact-sidebar.js

@@ -53,18 +53,29 @@ export class ContactSidebar extends Component {
           <div
           key={member}
           className={"pl4 pt1 pb1 f9 flex justify-start content-center " +
-            "bg-white bg-gray0-d"}>
+            "bg-white bg-gray0-d relative"}>
             <Sigil
               ship={member}
               color="#000000"
               size={32}
               classes="mix-blend-diff"
               />
-            <p className="f9 w-70 dib v-mid ml2 nowrap mono"
+            <p className="f9 w-70 dib v-mid ml2 nowrap mono truncate"
               style={{ paddingTop: 6, color: '#aaaaaa' }}
               title={member}>
               {cite(member)}
             </p>
+            <p className="dib v-mid f9 mh2 red2 pointer"
+              style={{paddingTop: 6}}
+              onClick={() => {
+                props.api.setSpinner(true);
+                props.api.groupRemove(props.path, [`~${member}`])
+                .then(() => {
+                  props.api.setSpinner(false);
+                })
+              }}>
+              Remove
+            </p>
           </div>
         );
       });

pkg/interface/groups/src/js/components/lib/group-detail.js

@@ -149,6 +149,9 @@ export class GroupDetail extends Component {
     let association = ((props.association) && (props.association[channelPath]))
       ? props.association[channelPath] : {};
 
+    let deleteButtonClasses = (groupOwner) ? 'b--red2 red2 pointer bg-gray0-d' : 'b--gray3 gray3 bg-gray0-d c-default';
+
+
     return (
       <div className="pa4 w-100 h-100 white-d">
         <div className="f8 f9-m f9-l f9-xl w-100">
@@ -209,6 +212,20 @@ export class GroupDetail extends Component {
               }}
             />
           </div>
+          <p className="f8 mt3 lh-copy">Delete Group</p>
+          <p className="f9 gray2 mb4">
+          Permanently delete this group. All current members will no longer see this group.
+          </p>
+          <a className={"dib f9 ba pa2 " + deleteButtonClasses}
+          onClick={() => {
+            if (groupOwner) {
+              props.api.setSpinner(true);
+              props.api.contactView.delete(props.path).then(() => {
+                props.api.setSpinner(false);
+                props.history.push("/~groups");
+              })
+            }
+          }}>Delete this group</a>
         </div>
       </div>
     )

pkg/interface/groups/src/js/components/root.js

@@ -111,6 +111,7 @@ export class Root extends Component {
                     defaultContacts={defaultContacts}
                     group={group}
                     activeDrawer={(detail || settings) ? "detail" : "contacts"}
+                    api={api}
                     path={groupPath}
                     {...props}
                   />
@@ -151,6 +152,7 @@ export class Root extends Component {
                     group={group}
                     activeDrawer="rightPanel"
                     path={groupPath}
+                    api={api}
                     {...props}
                   />
                   <AddScreen
@@ -193,6 +195,7 @@ export class Root extends Component {
                     defaultContacts={defaultContacts}
                     group={group}
                     path={groupPath}
+                    api={api}
                     selectedContact={shipPath}
                     {...props}
                   />
@@ -241,6 +244,7 @@ export class Root extends Component {
                     defaultContacts={defaultContacts}
                     group={group}
                     path={groupPath}
+                    api={api}
                     selectedContact={shipPath}
                     {...props}
                   />