Merge branch 'master' into vite

MuckRock · Nov 29, 2023 · 210a6b4 · 210a6b4
2 parents be02c5c + 9d11296
commit 210a6b4
Show file tree

Hide file tree

Showing 69 changed files with 3,497 additions and 276 deletions.
diff --git a/src/addons/Drawer.svelte b/src/addons/Drawer.svelte
@@ -73,7 +73,7 @@
 
   button.close {
     margin: 0;
-    top: 1em;
+    top: 1.25em;
     position: absolute;
     border-radius: 9999px;
     border: transparent;

diff --git a/src/addons/browser/AddOnListItem.svelte b/src/addons/browser/AddOnListItem.svelte
@@ -4,15 +4,15 @@
   import AddOnPin from "../AddOnPin.svelte";
   import AddOnPopularity from "../Popularity.svelte";
   import type { AddOnListItem } from "../types.js";
+  import Credit from "../../common/icons/Credit.svelte";
+  import Badge from "../../common/Badge.svelte";
 
   export let addon: AddOnListItem;
 
-  $: description = addon.parameters?.description;
-  $: if (!addon?.author) {
-    addon.author = { name: addon?.repository?.split("/")[0] };
-  }
-
-  $: url = `#add-ons/${addon.repository}`;
+  $: description = addon?.parameters?.description;
+  $: author = { name: addon?.repository?.split("/")[0] };
+  $: url = `#add-ons/${addon?.repository}`;
+  $: isPremium = addon?.parameters?.categories?.includes("premium") ?? false;
 </script>
 
 <style>
@@ -26,13 +26,18 @@
     text-align: left;
   }
 
-  .top-row {
+  .row {
     display: flex;
     align-items: flex-end;
     gap: 0.5rem;
     margin: 0.5rem;
   }
 
+  .badge {
+    margin-bottom: -0.25em;
+    font-size: 0.8em;
+  }
+
   .metadata {
     display: flex;
     align-items: flex-end;
@@ -79,27 +84,38 @@
 
 <a class="addon-link" href={url}>
   <div class="container" id={addon.repository}>
-    <div class="top-row">
+    <div class="row">
       <div class="center-self">
         <AddOnPin {addon} />
       </div>
       <div class="stretch">
         <h3 class="addon-name">{addon.name}</h3>
       </div>
       <div class="metadata">
-        {#if addon?.author?.name}
+        {#if author?.name}
           <p class="author">
             <a
               href="http://github.com/{addon.repository}"
               target="_blank"
               rel="noopener noreferrer"
-              title={$_("addonBrowserDialog.viewsource")}>{addon.author.name}</a
+              title={$_("addonBrowserDialog.viewsource")}>{author.name}</a
             >
           </p>
         {/if}
         {#if addon.usage}
           <AddOnPopularity useCount={addon.usage} />
         {/if}
+        {#if isPremium}
+          <span class="badge"
+            ><Badge
+              label="Premium"
+              badgeColor="var(--premium)"
+              labelColor="var(--darkgray)"
+            >
+              <Credit badge slot="icon" color="var(--darkgray)" />
+            </Badge></span
+          >
+        {/if}
       </div>
     </div>
     {#if description}

diff --git a/src/addons/browser/Browser.svelte b/src/addons/browser/Browser.svelte
@@ -11,6 +11,7 @@
   import Filters, { filter, FILTERS, CATEGORIES } from "./Filters.svelte";
   import Pin from "../../common/icons/Pin.svelte";
   import Star from "../../common/icons/Star.svelte";
+  import Credit from "../../common/icons/Credit.svelte";
 
   export let visible = false;
   export let per_page = 10;
@@ -201,6 +202,13 @@
       fill: orange;
     }
   }
+  .premium.tip {
+    background-color: hsl(161, 69%, 91%);
+    border-color: var(--premium, #24cc99);
+    & .icon {
+      fill: var(--premium, #24cc99);
+    }
+  }
 </style>
 
 <Drawer bind:this={drawer} bind:visible anchor="right" on:open on:close>
@@ -225,6 +233,11 @@
             <div class="icon"><Star size={1.75} /></div>
             <p class="message">{$_("addonBrowserDialog.featuredTip")}</p>
           </aside>
+        {:else if $filter === "premium"}
+          <aside class="premium tip">
+            <div class="icon"><Credit badge size={1.75} /></div>
+            <p class="message">{$_("addonBrowserDialog.premiumTip")}</p>
+          </aside>
         {/if}
         <AddOnList {loading} {error} {items} bind:reload />
       </div>

diff --git a/src/addons/browser/Filters.svelte b/src/addons/browser/Filters.svelte
@@ -6,6 +6,7 @@
     ["all", "All"],
     ["active", "Pinned"],
     ["featured", "Featured"],
+    ["premium", "Premium"],
   ];
 
   export const CATEGORIES = [
@@ -26,6 +27,7 @@
   import Pin from "../../common/icons/Pin.svelte";
   import Star from "../../common/icons/Star.svelte";
   import Infinity from "svelte-octicons/lib/Infinity16.svelte";
+  import Credit from "../../common/icons/Credit.svelte";
 </script>
 
 <style>
@@ -59,6 +61,10 @@
   #featured:not(.selected) [slot="icon"] {
     fill: orange;
   }
+
+  #premium:not(.selected) [slot="icon"] {
+    fill: var(--premium);
+  }
 </style>
 
 <ul class="filters">
@@ -80,6 +86,12 @@
       <span slot="icon"><Pin /></span>
     </Filter>
   </li>
+  <li id="premium" class:selected={$filter.includes("premium")}>
+    <Filter name="Premium" selected={$filter.includes("premium")}>
+      <input slot="input" type="radio" value="premium" bind:group={$filter} />
+      <span slot="icon"><Credit badge /></span>
+    </Filter>
+  </li>
 </ul>
 <div class="categories">
   <h3>{$_("addonBrowserDialog.categories")}</h3>

diff --git a/src/addons/browser/stories/AddOnListItem.stories.svelte b/src/addons/browser/stories/AddOnListItem.stories.svelte
@@ -43,3 +43,12 @@
     },
   }}
 />
+<Story
+  name="Premium"
+  args={{
+    addon: {
+      ...addon,
+      parameters: { ...addon.parameters, categories: ["premium"] },
+    },
+  }}
+/>
diff --git a/src/addons/dispatch/Dispatch.svelte b/src/addons/dispatch/Dispatch.svelte
@@ -14,11 +14,17 @@
   import Selection from "./Selection.svelte";
   import ScheduledInset from "./ScheduledInset.svelte";
   import { eventValues, schedules } from "../runs/ScheduledEvent.svelte";
-
   import { baseApiUrl } from "../../api/base.js";
   import { getCsrfToken } from "../../api/session.js";
   import { pushToast } from "../../common/Toast.svelte";
   import { runs } from "../progress/AddonRun.svelte";
+  import Premium from "./Premium.svelte";
+
+  import {
+    orgsAndUsers,
+    isPremiumOrg,
+    getCreditBalance,
+  } from "../../manager/orgsAndUsers";
 
   export let visible: boolean = false;
   export let addon: AddOnListItem;
@@ -40,6 +46,12 @@
     reset();
   }
 
+  $: isPremiumUser = isPremiumOrg($orgsAndUsers?.me?.organization);
+  $: creditBalance = getCreditBalance($orgsAndUsers?.me?.organization) ?? 0;
+  $: isPremiumAddon =
+    addon?.parameters.categories?.includes("premium") ?? false;
+  $: disablePremium = isPremiumAddon && (!isPremiumUser || creditBalance === 0);
+
   onMount(() => {
     if (event) {
       $values = {
@@ -54,7 +66,7 @@
     let qs = new URLSearchParams(window.location.search);
 
     // only accept values in properties
-    const { properties } = addon.parameters;
+    const { properties } = addon?.parameters ?? {};
     const values = Object.fromEntries(
       Array.from(qs).filter(([k, v]) => properties.hasOwnProperty(k)),
     );
@@ -289,18 +301,28 @@
         <!-- todo: decide if this should render for scheduled add-ons -->
         <!-- this only applies to add-ons running against existing documents -->
         <Selection
+          slot="selection"
           bind:this={selection}
           bind:value={$values["selection"]}
-          slot="after"
           documents={new Set(addon.parameters.documents)}
         />
 
+        <Premium slot="premium" {addon} user={$orgsAndUsers?.me} />
+
         <div slot="controls" class="controls">
           <div class="primary">
             {#if event}
-              <Button type="submit" label={$_("dialog.save")} />
+              <Button
+                type="submit"
+                label={$_("dialog.save")}
+                disabled={disablePremium}
+              />
             {:else}
-              <Button type="submit" label={$_("dialog.dispatch")} />
+              <Button
+                type="submit"
+                label={$_("dialog.dispatch")}
+                disabled={disablePremium}
+              />
             {/if}
           </div>
           <div class="secondary">

diff --git a/src/addons/dispatch/Form.svelte b/src/addons/dispatch/Form.svelte
@@ -124,7 +124,9 @@
     </fieldset>
   {/if}
 
-  <slot name="after" />
+  <slot name="selection" />
+
+  <slot name="premium" />
 
   <slot name="controls">
     <div class="controls">