Chromatic fixes

.storybook/preview.ts

@@ -21,10 +21,11 @@ const preview: Preview = {
       },
     },
   },
-  // Provide the MSW addon loader globally
-  loaders: [mswLoader],
 };
 
+// Provide the MSW addon loader globally
+export const loaders = [mswLoader];
+
 export let decorators = [mockDateDecorator];
 
 export default preview;

package.json

@@ -105,6 +105,6 @@
   "engine": 18,
   "browserslist": "> 0.25%, not dead",
   "msw": {
-    "workerDirectory": "public"
+    "workerDirectory": "./public"
   }
 }

src/common/dialog/RevisionsDialog.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import { _ } from "svelte-i18n";
   import { getMe } from "../../api/orgAndUser.js";
   import { changeRevisionControl } from "../../api/document.js";
@@ -30,23 +31,38 @@
     changeRevisionControl([documentId], value);
   }
 
-  let getMePromise = getMe();
-  function retryGetMe() {
-    getMePromise = getMe();
+  let user;
+  let loading = false;
+  let error;
+
+  async function load() {
+    loading = true;
+    try {
+      user = await getMe();
+    } catch {
+      error = true;
+    }
+    loading = false;
   }
+
+  onMount(load);
 </script>
 
-{#await getMePromise}
-  <Loader active />
-{:then user}
-  <Loader active={false}>
+<Loader active={loading}>
+  {#if error}
+    <div class="mcontent">
+      <ErrorMessage message={$_("dialogRevisionsDialog.error")}
+        ><Button caution action on:click={load}>Retry</Button></ErrorMessage
+      >
+    </div>
+  {:else}
     <div class="mcontent">
       <header>
         <h3>{$_("dialogRevisionsDialog.heading")}</h3>
         <PremiumBadge />
       </header>
 
-      {#if isPremiumOrg(user.organization)}
+      {#if isPremiumOrg(user?.organization)}
         <form>
           <label class="revision-control-input">
             <input
@@ -105,17 +121,8 @@
         />
       {/if}
     </div>
-  </Loader>
-{:catch}
-  <Loader active={false}>
-    <div class="mcontent">
-      <ErrorMessage message={$_("dialogRevisionsDialog.error")}
-        ><Button caution action on:click={retryGetMe}>Retry</Button
-        ></ErrorMessage
-      >
-    </div>
-  </Loader>
-{/await}
+  {/if}
+</Loader>
 
 <style>
   .mcontent {

src/common/dialog/stories/RevisionsDialog.stories.svelte

@@ -34,10 +34,7 @@
     component: RevisionsDialog,
     parameters: {
       layout: "centered",
-      chromatic: { delay: 300 },
-      msw: {
-        handlers: [revisionControl.success, mockGetMe.data],
-      },
+      chromatic: { delay: 1000 },
     },
     argTypes: {
       enabled: {
@@ -72,13 +69,39 @@
       await expect(downloadButtons[0]).toHaveAttribute("target", "download");
     });
   }}
+  parameters={{
+    msw: {
+      handlers: [revisionControl.success, mockGetMe.data],
+    },
+  }}
+/>
+<Story
+  name="With Zero Revisions"
+  args={{ ...args, revisions: [] }}
+  parameters={{
+    msw: {
+      handlers: [revisionControl.success, mockGetMe.data],
+    },
+  }}
 />
-<Story name="With Zero Revisions" args={{ ...args, revisions: [] }} />
 <Story
   name="With Many Revisions"
   args={{ ...args, revisions: manyRevisions }}
+  parameters={{
+    msw: {
+      handlers: [revisionControl.success, mockGetMe.data],
+    },
+  }}
+/>
+<Story
+  name="Disabled Revision Control"
+  args={{ ...args, enabled: false }}
+  parameters={{
+    msw: {
+      handlers: [revisionControl.success, mockGetMe.data],
+    },
+  }}
 />
-<Story name="Disabled Revision Control" args={{ ...args, enabled: false }} />
 <Story
   name="With Change Loading"
   {args}

src/manager/orgsAndUsers.js

@@ -249,7 +249,9 @@ export function getUpgradeURL(org) {
 }
 
 export async function triggerPremiumUpgradeFlow(org) {
-  window?.open(getUpgradeUrl(org));
+  if (org) {
+    window?.open(getUpgradeUrl(org));
+  }
 }
 
 // TODO: Handle flow for purchasing premium credits (#342)