Show unverified in doc browser

MuckRock · Nov 20, 2024 · 113df60 · 113df60
1 parent 54eea51
commit 113df60
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/src/lib/components/accounts/Unverified.svelte b/src/lib/components/accounts/Unverified.svelte
@@ -17,7 +17,7 @@ a user who is logged in but has `verified_journalist = false`.
   } from "@/config/config.js";
   import { isOrg } from "$lib/api/accounts";
 
-  export let user: Nullable<User>;
+  export let user: Nullable<User> = null;
 
   const FAQ = "https://www.documentcloud.org/help/faq#verification";
 

diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
@@ -102,9 +102,9 @@
 </script>
 
 <div class="container" data-sveltekit-preload-data={preload}>
-  <slot name="start" />
-  {#each results as document (document.id)}
-    <Flex direction="column">
+  <Flex direction="column">
+    <slot name="start" />
+    {#each results as document (document.id)}
       <Flex gap={0.625} align="center">
         {#if !embed}
           <label>
@@ -126,13 +126,14 @@
       {#if document.note_highlights}
         <NoteHighlights {document} />
       {/if}
-    </Flex>
-  {:else}
-    <Empty icon={Search24}>
-      <h2>{$_("noDocuments.noSearchResults")}</h2>
-      <p>{$_("noDocuments.queryNoResults")}</p>
-    </Empty>
-  {/each}
+    {:else}
+      <Empty icon={Search24}>
+        <h2>{$_("noDocuments.noSearchResults")}</h2>
+        <p>{$_("noDocuments.queryNoResults")}</p>
+      </Empty>
+    {/each}
+  </Flex>
+
   <div bind:this={end} class="end">
     {#if next}
       <Button

diff --git a/src/lib/components/documents/stories/ResultsList.stories.svelte b/src/lib/components/documents/stories/ResultsList.stories.svelte
@@ -4,6 +4,9 @@
   import { Story } from "@storybook/addon-svelte-csf";
   import ResultsList from "../ResultsList.svelte";
   import Pending from "../Pending.svelte";
+  import Unverified from "../../accounts/Unverified.svelte";
+
+  import { me } from "@/test/fixtures/accounts";
 
   // typescript complains without the type assertion
   import searchResults from "@/test/fixtures/documents/search-highlight.json";
@@ -23,6 +26,8 @@
     component: ResultsList,
     tags: ["autodocs"],
   };
+
+  const user = { ...me, verified_journalist: false };
 </script>
 
 <Story name="With Results">
@@ -46,3 +51,9 @@
 <Story name="Highlighted">
   <ResultsList results={highlighted} {count} {next} />
 </Story>
+
+<Story name="Unverified user">
+  <ResultsList {results} {count} {next}>
+    <Unverified {user} slot="start" />
+  </ResultsList>
+</Story>
diff --git a/src/lib/components/layouts/DocumentBrowser.svelte b/src/lib/components/layouts/DocumentBrowser.svelte
@@ -36,24 +36,25 @@
 
   // Form components
   import Dropzone from "$lib/components/inputs/Dropzone.svelte";
-  import BulkActions from "@/lib/components/documents/BulkActions.svelte";
+  import BulkActions from "$lib/components/documents/BulkActions.svelte";
   import Search from "$lib/components/forms/Search.svelte";
   import {
     filesToUpload,
     uploadToProject,
   } from "$lib/components/forms/DocumentUpload.svelte";
 
   // Layout comopnents
-  import ContentLayout from "$lib/components/layouts/ContentLayout.svelte";
+  import ContentLayout from "./ContentLayout.svelte";
+  import Dropdown from "../common/Dropdown.svelte";
+  import Menu from "../common/Menu.svelte";
+  import Unverified from "../accounts/Unverified.svelte";
   import { sidebars } from "$lib/components/layouts/Sidebar.svelte";
 
   // Utilities
   import { deleted } from "$lib/api/documents";
   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);
 
@@ -182,7 +183,13 @@
             next={documentsResults.next}
             count={documentsResults.count}
             auto
-          />
+          >
+            <svelte:fragment slot="start">
+              {#if $me && !canUploadFiles($me)}
+                <Unverified user={$me} />
+              {/if}
+            </svelte:fragment>
+          </ResultsList>
         {/if}
       {:catch}
         <Error>{uiText.error}</Error>