ChannelSettings: refine delete/remove logic and buttons

pkg/arvo/ted/graph/delete.hoon

@@ -1,4 +1,4 @@
-/-  spider, graph-view, graph=graph-store, *metadata-store, *group
+/-  spider, graph-view, graph=graph-store, *metadata-store, *group, group-store
 /+  strandio, resource
 =>
 |% 
@@ -48,6 +48,28 @@
       (en-path:resource group-rid)
     [%graph (en-path:resource rid)]
   (pure:m ~)
+::
+++  delete-tags
+  |=  [graph=resource grp-rid=resource =group]
+  =/  m  (strand ,~)
+  ^-  form:m
+  =/  tags=(list [=tag tagged=(set ship)])
+    %+  skim  ~(tap by tags.group)
+    |=  [=tag tagged=(set ship)]
+    ?@  tag  %.n
+    ?&  =(app.tag %graph)
+        =(resource.tag graph)
+    ==
+  |-  =*  loop  $
+  ^-  form:m
+  ?~  tags
+    (pure:m ~)
+  ;<  ~  bind:m
+    %+  poke  [entity.grp-rid %group-push-hook]
+    :-  %group-update
+    !>  ^-  update:group-store
+    [%remove-tag grp-rid tag.i.tags tagged.i.tags]
+  loop(tags t.tags)
 --
 ::
 ^-  thread:spider
@@ -64,6 +86,8 @@
 ?~  ugroup-rid  !!
 ;<  =group  bind:m
   (scry-group u.ugroup-rid)
+;<  ~  bind:m
+  (delete-tags rid.action u.ugroup-rid group)
 ?.  hidden.group
   ;<  ~  bind:m
     (delete-graph u.ugroup-rid rid.action)

pkg/interface/src/views/components/ShipSearch.tsx

@@ -122,8 +122,6 @@ export function ShipSearch<I extends string, V extends Value<I>>(
 
   const selected: string[] = values[id] ?? [];
 
-  console.log(selected);
-
   const name = () => `${props.id}[${inputIdx.current}]`;
 
   const pills = selected.slice(0, inputIdx.current);

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

@@ -54,11 +54,21 @@ export function ChannelPopoverRoutesSidebar(props: {
             text="Permissions"
             to={relativePath("/settings#permissions")}
           />
-          <SidebarItem
-            icon="TrashCan"
-            text="Archive Channel"
-            to={relativePath("/settings#archive")}
-          />
+          { isOwner ? (
+            <SidebarItem
+              icon="TrashCan"
+              text="Archive Channel"
+              to={relativePath("/settings#archive")}
+              color="red"
+            />
+          ) : (
+            <SidebarItem
+              icon="TrashCan"
+              text="Archive Channel"
+              to={relativePath("/settings#remove")}
+              color="red"
+            />
+          )}
         </>
       )}
     </Col>

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

@@ -31,7 +31,7 @@ interface ChannelPopoverRoutesProps {
 }
 
 export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
-  const { association, group } = props;
+  const { association, group, api } = props;
   useHashLink();
   const overlayRef = useRef<HTMLElement>();
   const history = useHistory();
@@ -41,11 +41,20 @@ export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
   });
 
   const handleUnsubscribe = async () => {
-    await wait(150);
+    const [,,ship,name] = association.resource.split('/');
+    await api.graph.leaveGraph(ship, name);
+  };
+  const handleRemove = async () => {
+    await api.metadata.remove('graph', association.resource, association.group);
+  };
+  const handleArchive = async () => {
+    const [,,,name] = association.resource.split('/');
+    await api.graph.deleteGraph(name);
   };
 
   const canAdmin = isChannelAdmin(group, association.resource);
   const isOwner = isHost(association.resource);
+
   return (
     <ModalOverlay
       bg="transparent"
@@ -89,6 +98,41 @@ export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
             <>
               <ChannelDetails {...props} />
               <GraphPermissions {...props} />
+              { isOwner ? (
+              <Col mt="5" mb="6">
+              <Text id="archive" fontSize="2" fontWeight="bold">
+                Archive channel
+              </Text>
+              <Text mt="1" maxWidth="450px" gray>
+                Archiving a channel will prevent further updates to the channel.
+                Users who are currently joined to the channel will retain a copy
+                of the channel.
+              </Text>
+              <Row mt="3">
+                <StatelessAsyncButton destructive onClick={handleArchive}>
+                  Archive {props.association.metadata.title}
+                </StatelessAsyncButton>
+              </Row>
+            </Col> 
+
+              ) : (
+              <Col mt="5" mb="6">
+              <Text id="remove" fontSize="2" fontWeight="bold">
+                Remove channel from group
+              </Text>
+              <Text mt="1" maxWidth="450px" gray>
+                Removing a channel will prevent further updates to the channel.
+                Users who are currently joined to the channel will retain a copy
+                of the channel.
+              </Text>
+              <Row mt="3">
+                <StatelessAsyncButton destructive onClick={handleRemove}>
+                  Remove {props.association.metadata.title}
+                </StatelessAsyncButton>
+              </Row>
+            </Col> 
+
+              )}
             </>
           )}
         </Col>

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

@@ -76,9 +76,7 @@ export function NewChannel(props: NewChannelProps & RouteComponentProps) {
         };
 
         const resource = resourceFromPath(group); 
-        console.log(writers);
         writers = _.compact(writers);
-        console.log(writers);
         const us = `~${window.ship}`;
         if(values.writePerms === 'self') {
           await api.groups.addTag(resource, tag, [us]);