Merge pull request #827 from MuckRock/allanlasser/browser-actions

Consolidate document browser actions

src/langs/json/en.json

@@ -1009,11 +1009,12 @@
   "bulk": {
     "title": "Edit",
     "actions": {
-      "edit": "Access and metadata",
-      "data": "Add tags and data",
+      "share": "Share",
+      "edit": "Edit metadata",
+      "data": "Edit tags & data",
+      "project": "Move to project",
       "reprocess": "Reprocess",
-      "delete": "Delete documents",
-      "project": "Add to project"
+      "delete": "Delete"
     }
   },
   "addonDispatchDialog": {

src/lib/components/forms/BulkActions.svelte → src/lib/components/documents/BulkActions.svelte

@@ -3,65 +3,57 @@ This is a menu that wraps all logic around bulk actions for documents.
 Most actual actions are deferred to their own forms, so this is more of a switchboard.
 -->
 <script context="module" lang="ts">
-  export type Action = "edit" | "data" | "reprocess" | "delete" | "project";
+  type Action = "share" | "edit" | "data" | "reprocess" | "delete" | "project";
+  type ActionDetail = [label: string, icon: ComponentType];
 </script>
 
 <script lang="ts">
   import type { Readable } from "svelte/store";
-  import type { Document, Nullable } from "$lib/api/types";
+  import type { Document, Maybe, Nullable } from "$lib/api/types";
 
   import { getContext, type ComponentType } from "svelte";
   import { _ } from "svelte-i18n";
   import {
     Alert16,
-    ChevronUp12,
     FileDirectory16,
     IssueReopened16,
     Pencil16,
+    Share16,
     Tag16,
   } from "svelte-octicons";
 
-  import Dropdown, {
-    type Placement,
-  } from "$lib/components/common/Dropdown.svelte";
-  import Menu from "$lib/components/common/Menu.svelte";
   import Modal from "../layouts/Modal.svelte";
   import Portal from "../layouts/Portal.svelte";
   import SidebarItem from "../sidebar/SidebarItem.svelte";
 
   // forms
-  import ConfirmDelete from "./ConfirmDelete.svelte";
-  import EditDataMany from "./EditDataMany.svelte";
-  import EditMany from "./EditMany.svelte";
-  import Reprocess from "./Reprocess.svelte";
-  import Projects from "./Projects.svelte";
+  import ConfirmDelete from "../forms/ConfirmDelete.svelte";
+  import EditDataMany from "../forms/EditDataMany.svelte";
+  import EditMany from "../forms/EditMany.svelte";
+  import Reprocess from "../forms/Reprocess.svelte";
+  import Projects from "../forms/Projects.svelte";
 
   import { getCurrentUser } from "$lib/utils/permissions";
+  import Share from "./Share.svelte";
 
-  export let position: Placement = "top-start";
+  export let afterClick: Maybe<() => void> = undefined;
 
   const me = getCurrentUser();
   const selected: Readable<Document[]> = getContext("selected");
 
-  const actions: Record<Action, string> = {
-    edit: $_("bulk.actions.edit"),
-    data: $_("bulk.actions.data"),
-    reprocess: $_("bulk.actions.reprocess"),
-    delete: $_("bulk.actions.delete"),
-    project: $_("bulk.actions.project"),
-  };
-
-  const icons: Record<Action, ComponentType> = {
-    edit: Pencil16,
-    data: Tag16,
-    reprocess: IssueReopened16,
-    delete: Alert16,
-    project: FileDirectory16,
+  const actions: Record<Action, ActionDetail> = {
+    share: [$_("bulk.actions.share"), Share16],
+    edit: [$_("bulk.actions.edit"), Pencil16],
+    data: [$_("bulk.actions.data"), Tag16],
+    project: [$_("bulk.actions.project"), FileDirectory16],
+    reprocess: [$_("bulk.actions.reprocess"), IssueReopened16],
+    delete: [$_("bulk.actions.delete"), Alert16],
   };
 
   let visible: Nullable<Action> = null;
 
   // svelte 5 will let us do type coercion in templates
+  $: toShare = $selected[0]!;
   function show(action: string) {
     visible = action as Action;
   }
@@ -71,33 +63,32 @@ Most actual actions are deferred to their own forms, so this is more of a switch
   }
 </script>
 
-<Dropdown {position}>
-  <SidebarItem slot="anchor" disabled={!$me || $selected?.length < 1}>
-    {$_("bulk.title")}
-    <ChevronUp12 slot="end" />
+<!-- for now, we can only share individual documents -->
+{#each Object.entries(actions) as [action, [label, icon]]}
+  <SidebarItem
+    hover
+    disabled={action === "share"
+      ? $selected?.length !== 1
+      : !$me || !$selected?.length}
+    on:click={() => {
+      show(action);
+      afterClick?.();
+    }}
+  >
+    <svelte:component this={icon} slot="start" />
+    {label}
   </SidebarItem>
-
-  <Menu slot="default" let:close>
-    {#each Object.entries(actions) as [action, label]}
-      <SidebarItem
-        hover
-        disabled={!$me || $selected?.length < 1}
-        on:click={() => {
-          close();
-          show(action);
-        }}
-      >
-        <svelte:component this={icons[action]} slot="start" />
-        {label}
-      </SidebarItem>
-    {/each}
-  </Menu>
-</Dropdown>
+{/each}
 
 {#if visible}
   <Portal>
     <Modal on:close={close}>
-      <h1 slot="title">{actions[visible]}</h1>
+      <h1 slot="title">{actions[visible][0]}</h1>
+
+      {#if visible === "share"}
+        <Share document={toShare} />
+      {/if}
+
       {#if visible === "edit"}
         <EditMany documents={$selected} on:close={close}>
           {#if $selected?.length}

src/lib/components/layouts/DocumentBrowser.svelte

@@ -15,6 +15,7 @@
     Hourglass24,
     Upload24,
     SidebarExpand16,
+    ChevronUp12,
   } from "svelte-octicons";
 
   // Common components
@@ -35,7 +36,7 @@
 
   // Form components
   import Dropzone from "$lib/components/inputs/Dropzone.svelte";
-  import BulkActions from "$lib/components/forms/BulkActions.svelte";
+  import BulkActions from "@/lib/components/documents/BulkActions.svelte";
   import Search from "$lib/components/forms/Search.svelte";
   import {
     filesToUpload,
@@ -51,6 +52,8 @@
   import { isSupported } from "$lib/utils/files";
   import { canUploadFiles, getCurrentUser } from "$lib/utils/permissions";
   import { remToPx } from "$lib/utils/layout";
+  import Dropdown from "../common/Dropdown.svelte";
+  import Menu from "../common/Menu.svelte";
 
   setContext("selected", selected);
 
@@ -206,7 +209,19 @@
                   {/if}
                 </label>
               </SidebarItem>
-              <BulkActions />
+              <Dropdown position="top-start">
+                <SidebarItem
+                  slot="anchor"
+                  disabled={!$me || $selected?.length < 1}
+                >
+                  {$_("bulk.title")}
+                  <ChevronUp12 slot="end" />
+                </SidebarItem>
+
+                <Menu slot="default" let:close>
+                  <BulkActions afterClick={() => close()} />
+                </Menu>
+              </Dropdown>
             </Flex>
             {#if !BREAKPOINTS.HIDE_COUNT && $visible && $total}
               <p class="resultsCount">

src/lib/components/layouts/stories/AppLayout.stories.svelte

@@ -10,7 +10,7 @@
   import Projects from "@/routes/(app)/documents/sidebar/Projects.svelte";
   import Button from "../../common/Button.svelte";
   import { PlusCircle16 } from "svelte-octicons";
-  import Actions from "@/routes/(app)/documents/sidebar/Actions.svelte";
+  import BulkActions from "$lib/components/documents/BulkActions.svelte";
   import AddOns from "$lib/components/common/AddOns.svelte";
 
   import { documentsList } from "@/test/fixtures/documents";
@@ -55,7 +55,7 @@
         <Button mode="primary" href="/upload/">
           <PlusCircle16 />{$_("sidebar.upload")}
         </Button>
-        <Actions />
+        <BulkActions />
         <AddOns pinnedAddOns={Promise.resolve({ data: activeAddons })} />
       </svelte:fragment>
     </SidebarLayout>

src/lib/components/layouts/stories/SidebarLayout.stories.svelte

@@ -8,7 +8,7 @@
   import DocumentBrowser from "../DocumentBrowser.svelte";
   import Button from "$lib/components/common/Button.svelte";
 
-  import Actions from "@/routes/(app)/documents/sidebar/Actions.svelte";
+  import BulkActions from "$lib/components/documents/BulkActions.svelte";
   import AddOns from "@/lib/components/common/AddOns.svelte";
   import Documents from "@/routes/(app)/documents/sidebar/Documents.svelte";
   import Projects from "@/routes/(app)/documents/sidebar/Projects.svelte";
@@ -54,7 +54,7 @@
         <Button mode="primary" href="/upload/">
           <PlusCircle16 />{$_("sidebar.upload")}
         </Button>
-        <Actions />
+        <BulkActions />
         <AddOns pinnedAddOns={Promise.resolve({ data: activeAddons })} />
       </svelte:fragment>
     </SidebarLayout>

src/routes/(app)/documents/+page.svelte

@@ -8,7 +8,7 @@
   import SignedIn from "$lib/components/common/SignedIn.svelte";
   import SidebarLayout from "$lib/components/layouts/SidebarLayout.svelte";
 
-  import Actions from "../documents/sidebar/Actions.svelte";
+  import BulkActions from "@/lib/components/documents/BulkActions.svelte";
   import Documents from "../documents/sidebar/Documents.svelte";
   import Projects from "../documents/sidebar/Projects.svelte";
 
@@ -54,7 +54,7 @@
           <PlusCircle16 />{$_("sidebar.upload")}
         </Button>
       {/if}
-      <Actions />
+      <BulkActions />
       <AddOns pinnedAddOns={data.pinnedAddons} />
     {/if}
   </svelte:fragment>