merge

.github/workflows/chromatic.yml

@@ -0,0 +1,26 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: "Chromatic"
+
+# Event for the workflow
+on: push
+
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Required to retrieve git history
+      - name: Use Node v18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm ci
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

package.json

@@ -50,6 +50,7 @@
     "@storybook/test": "^7.6.2",
     "@storybook/testing-library": "^0.2.2",
     "@sveltejs/vite-plugin-svelte": "^2.0.0",
+    "chromatic": "^9.1.0",
     "eslint": "^7.32.0",
     "msw": "^1.2.3",
     "msw-storybook-addon": "^1.10.0",

src/addons/dispatch/Premium.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
-  import { handlePlural } from "../../util/string";
-  import type { AddOnListItem } from "../types";
-  import Button from "../../common/Button.svelte";
-  import Credit from "../../common/icons/Credit.svelte";
+  // import Button from "../../common/Button.svelte";
+  // import Credit from "../../common/icons/Credit.svelte";
   import Price from "../../premium-credits/Price.svelte";
   import UpgradePrompt from "../../premium-credits/UpgradePrompt.svelte";
+
   import {
     isPremiumOrg,
     getCreditBalance,
-    triggerCreditPurchaseFlow,
+    // triggerCreditPurchaseFlow,
     triggerPremiumUpgradeFlow,
     isOrgAdmin,
-  } from "../../manager/orgsAndUsers";
-  import { User } from "../../pages/app/AccountNavigation/types";
+  } from "../../manager/orgsAndUsers.js";
+
+  import type { AddOnListItem } from "../types";
+  import type { User } from "../../pages/app/accounts/types";
 
   export let addon: AddOnListItem;
 
@@ -88,6 +89,7 @@
     font-weight: 600;
     margin: 0;
   }
+  /*
   .spendingLimit {
     display: flex;
     gap: 0.5rem;
@@ -127,6 +129,7 @@
   .spendingLimit .limitInput::-webkit-outer-spin-button {
     -webkit-appearance: none;
   }
+  */
   .creditBalance {
     margin: 0;
     font-weight: 600;
@@ -153,7 +156,7 @@
           {#if amount}
             <h3 class="prettyCost">
               {$_("addonDispatchDialog.cost", {
-                values: { amount: amount, unit: unit, price: price || 1},
+                values: { amount: amount, unit: unit, price: price || 1 },
               })}
             </h3>
           {/if}

src/addons/dispatch/fields/ArrayField.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import { beforeUpdate } from "svelte";
   import Plus16 from "svelte-octicons/lib/Plus16.svelte";
+
   import Checkbox from "./Checkbox.svelte";
   import X16 from "svelte-octicons/lib/X16.svelte";
   import Number from "./Number.svelte";
@@ -15,9 +17,16 @@
   };
 
   export let count: number = 1;
-  export let value = Array(count).fill(null);
+  export let value: [any] = Array(count).fill(null);
+
+  $: numItems = value?.length ?? 0;
 
-  $: numItems = value.length;
+  beforeUpdate(() => {
+    // value should always be an array
+    if (!Array.isArray(value)) {
+      value = [];
+    }
+  });
 
   // only one level of nesting allowed
   const types = {

src/addons/progress/AddonRun.svelte

@@ -57,7 +57,7 @@
     const resp = await fetch(endpoint, options);
 
     if (!resp.ok) {
-      throw new Error(resp.statusText);
+      throw new Error(`Error updating add-on run: ${resp.statusText}`);
     }
 
     // delete returns an empty response
@@ -220,7 +220,9 @@
   {#if run.message || run.file_url}
     <div class="info message processingText" class:compact>
       {#if run.message}{run.message}{/if}
-      {#if run.message && run.file_url} - {/if}
+      {#if run.message && run.file_url}
+        -
+      {/if}
       {#if run.file_url}<a href={run.file_url}>{$_("addonProgress.download")}</a
         >{/if}
     </div>

src/addons/progress/AddonStatus.svelte

@@ -22,7 +22,10 @@
     const resp = await fetch(endpoint, options);
 
     if (!resp.ok) {
-      throw new Error(resp.statusText);
+      // just bail on errors and try again next cycle
+      return console.error(
+        `Failed to load add-on run status: ${resp.statusText}`,
+      );
     }
 
     const { results } = await resp.json();

src/addons/types.ts

@@ -26,6 +26,7 @@ interface AddOnParameters {
   properties: Record<string, AddOnProperty>;
   cost: {
     amount: number;
+    price: number;
     unit: string;
   };
   eventOptions: {

src/langs/json/en.json

@@ -384,7 +384,8 @@
       "personalAcct": "Personal Account",
       "adminRole": "Admin",
       "memberListError": "An error occurred while loading the member list.",
-      "memberListEmpty": "This organization has no other members."
+      "memberListEmpty": "This organization has no other members.",
+      "userCount":"{n, plural, one {# organization member} other {# organization members}}"
     },
     "credits": {
       "monthlyOrg": "Monthly Org Allowance",
@@ -442,6 +443,10 @@
     "delete": "Delete",
     "diagnosticInfo": "Diagnostic Info"
   },
+  "manager.documents": {
+    "added": "Successfully added {n, plural, one {# document} other {# documents}} to {project}",
+    "removed": "Successfully removed {n, plural, one {# document} other {# documents}} from {project}"
+  },
   "metaFields": {
     "defaultFieldInvalidText": "The document already has this {fieldName}",
 
@@ -486,7 +491,9 @@
     "newProject": "+ New Project",
     "projMembership": "Project Membership",
     "selectDocs": "Select documents to place them in projects",
-    "createProj": "Create a project to organize and share documents"
+    "createProj": "Create a project to organize and share documents",
+    "remove": "Remove {n, plural, one {document} other {# documents}} from project",
+    "add": "Add {n, plural, one {document} other {# documents}} to project"
   },
   "addonsMenu": {
     "newAddon": "Request new Add-on from Staff",

src/manager/documents.js

@@ -19,8 +19,6 @@ import { wrapLoad, wrapSeparate } from "@/util/wrapLoad.js";
 import { showConfirm } from "./confirmDialog.js";
 import { router } from "@/router/router.js";
 import { search, handleUpload, setDocuments } from "@/search/search.js";
-import { pushToast } from "../common/Toast.svelte";
-import { handlePlural } from "@/util/string.js";
 import { removeFromArray, addToArrayIfUnique } from "@/util/array.js";
 import { modifications } from "./modifications.js";
 import { docEquals, copyDoc } from "@/structure/document.js";
@@ -99,6 +97,7 @@ export const documents = new Svue({
       return allDocuments;
     },
     pendingExisting(docsById, pending) {
+      if (!pending) return [];
       return pending.filter((x) => {
         const id = x.doc_id;
         return docsById[id] != null;
@@ -585,7 +584,7 @@ export async function initDocuments() {
   updatePending();
 }
 
-export async function addDocsToProject(project, documents, showToast = true) {
+export async function addDocsToProject(project, documents) {
   documents = documents.filter((doc) => !doc.projectIds.includes(project.id));
   if (documents.length == 0) return;
   await wrapLoad(layout, async () => {
@@ -604,22 +603,9 @@ export async function addDocsToProject(project, documents, showToast = true) {
       ),
     );
   });
-  if (!layout.error && showToast) {
-    pushToast(
-      `Successfully added ${handlePlural(
-        documents.length,
-        "document",
-        true,
-      )} to ${project.title}.`,
-    );
-  }
 }
 
-export async function removeDocsFromProject(
-  project,
-  documents,
-  showToast = true,
-) {
+export async function removeDocsFromProject(project, documents) {
   documents = documents.filter((doc) => doc.projectIds.includes(project.id));
   if (documents.length == 0) return;
   await wrapLoad(layout, async () => {
@@ -638,13 +624,4 @@ export async function removeDocsFromProject(
       ),
     );
   });
-  if (!layout.error && showToast) {
-    pushToast(
-      `Successfully removed ${handlePlural(
-        documents.length,
-        "document",
-        true,
-      )} from project (${project.title}).`,
-    );
-  }
 }

src/pages/app/Documents.svelte

@@ -7,7 +7,7 @@
   import AddonStatus from "../../addons/progress/AddonStatus.svelte";
   import ActionBar from "./ActionBar.svelte";
   import Anonymous from "./Anonymous.svelte";
-  import AccountNavigation from "./AccountNavigation/AccountNavigation.svelte";
+  import AccountNavigation from "./accounts/AccountNavigation.svelte";
   import Button from "@/common/Button.svelte";
   import Draggable from "@/common/Draggable.svelte";
   import Document from "./Document.svelte";

src/pages/app/AccountNavigation/OrgMemberList.svelte → src/pages/app/accounts/OrgMemberList.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
+  import { People24, Person16 } from "svelte-octicons";
 
   import Loader from "../../../common/Loader.svelte";
   import Error from "../../../common/icons/Error.svelte";
-  import { inMyOrg } from "../../../manager/orgsAndUsers.js";
   import Link from "../../../router/Link.svelte";
-  import { userUrl } from "../../../search/search";
-  import { People24, Person16 } from "svelte-octicons";
-  import { handlePlural } from "../../../util/string";
   import Button from "../../../common/Button.svelte";
 
+  import { userUrl } from "../../../search/search.js";
+  import { inMyOrg } from "../../../manager/orgsAndUsers.js";
+
   export let orgId;
   export let myId;
 
@@ -106,7 +106,9 @@
   <Loader active center pad />
 {:then users}
   {#if users.length > 0}
-    <p class="userCount">{handlePlural(users.length, "organization member")}</p>
+    <p class="userCount">
+      {$_("authSection.org.userCount", { values: { n: users.length } })}
+    </p>
     <ul class="userList">
       {#each users as user}
         <li>

src/pages/app/menus/ProjectMenuItem.svelte

@@ -1,26 +1,25 @@
 <script>
+  import { _ } from "svelte-i18n";
+
   import MenuItem from "@/common/MenuItem.svelte";
   import Tooltip from "@/common/Tooltip.svelte";
   import { layout } from "@/manager/layout.js";
+
   import {
     selectedDocsInProject,
     addSelectedDocsToProject,
     removeSelectedDocsFromProject,
   } from "@/manager/projects.js";
-  import { handlePlural } from "@/util/string.js";
 
   export let project;
 
   $: scope =
     $layout.selected.length > 0 ? selectedDocsInProject(project) : "none";
 
   $: caption =
-    scope == "fully"
-      ? `Remove ${handlePlural(
-          $layout.selected.length,
-          "document",
-        )} from project`
-      : `Add ${handlePlural($layout.selected.length, "document")} to project`;
+    scope === "fully"
+      ? $_("projectsMenu.remove", { values: { n: $layout.selected.length } })
+      : $_("projectsMenu.add", { values: { n: $layout.selected.length } });
 
   function handleClick() {
     if (scope == "fully") {
@@ -31,9 +30,9 @@
   }
 </script>
 
-<style lang="scss">
+<style>
   .scope {
-    color: gray;
+    color: var(--gray);
     float: right;
     margin-left: 7px;
   }
@@ -43,7 +42,7 @@
   <Tooltip delay={500} {caption}>
     {project.title}
     <span class="scope">
-      {#if scope == "fully"}✓{/if}
+      {#if scope === "fully"}✓{/if}
     </span>
   </Tooltip>
 </MenuItem>

src/pages/home/Home.svelte

@@ -30,7 +30,7 @@
     const resp = await fetch(endpoint);
 
     if (!resp.ok) {
-      throw new Error(resp.statusText);
+      throw new Error(`Error fetching flat page: ${resp.statusText}`);
     }
 
     return resp.json();