Storybook data fixes

src/addons/browser/Browser.svelte

@@ -52,7 +52,7 @@
         return data;
       })
       .catch((err) => {
-        error = err;
+        error = err.detail;
         loading = false;
         return {};
       });

src/addons/runs/Scheduled.svelte

@@ -30,7 +30,7 @@
   $: next_url = res.next ? new URL(res.next) : null;
   $: prev_url = res.previous ? new URL(res.previous) : null;
   $: events = res.results ?? [];
-  $: empty = !loading && res.results?.length === 0;
+  $: empty = !loading && !Boolean(res.results?.length);
 
   export async function load(url?: string | URL) {
     try {

src/manager/orgsAndUsers.js

@@ -210,12 +210,12 @@ export async function inMyOrg(orgId, myId) {
   if (!orgId) return [];
   const users = await getUsers({ orgIds: [orgId] });
   // Sort by admin status, then username
-  const adminUsers = users
-    .filter((u) => u.admin_organizations?.includes(orgId))
-    .sort(alphabetizeUsers);
-  const regularUsers = users
-    .filter((u) => !adminUsers.includes(u))
-    .sort(alphabetizeUsers);
+  const adminUsers =
+    users
+      ?.filter((u) => u.admin_organizations?.includes(orgId))
+      .sort(alphabetizeUsers) ?? [];
+  const regularUsers =
+    users?.filter((u) => !adminUsers.includes(u)).sort(alphabetizeUsers) ?? [];
   // Remove me from the user list
   return [...adminUsers, ...regularUsers].filter((u) => u.id !== myId);
 }

src/pages/app/accounts/stories/OrgMemberList.stories.svelte

@@ -4,7 +4,7 @@
   import OrgMemberList from "../OrgMemberList.svelte";
   import { mockInMyOrg } from "../../../../test/handlers/accounts";
 
-  const args = { orgId: 1, myId: 4 };
+  const args = { orgId: 1, myId: 100012 };
 
   export const meta = {
     title: "App / Accounts / Menus / Org / Member List",

src/pages/app/stories/Documents.stories.svelte

@@ -30,7 +30,7 @@
     users.me,
     organizations.data,
     projects.data,
-    runs.data,
+    runs.empty,
   ];
 </script>
 

src/projects/Browser.svelte

@@ -56,7 +56,7 @@
       }
       // }
     } catch (err) {
-      error = err;
+      error = err.errorData.detail;
       projects = null;
     }
     loading = false;

src/test/fixtures/accounts.ts

@@ -2,7 +2,7 @@ import { Org, Page, User } from "../../api/types";
 import { GroupOrg, IndividualOrg } from "../../api/types/orgAndUser";
 
 export const me: User = {
-  id: 1020,
+  id: 100012,
   avatar_url: "https://cdn.muckrock.com/media/avatars/20140211-0O1A7147-2.jpg",
   feature_level: 2,
   is_staff: true,

src/test/fixtures/projects.ts

@@ -55,6 +55,7 @@ export const projectList: Page<Project> = {
       title: "Add-on test",
       updated_at: "2022-03-01T15:55:05.536919Z",
       user: 100003,
+      pinned: true,
     },
     {
       id: 200008,

src/test/handlers/accounts.ts

@@ -84,7 +84,10 @@ export const mockGetMe = {
       ctx.json({
         ...meFixture,
         organization: { ...(meFixture.organization as Org), plan: "Free" },
-        admin_organizations: [...meFixture.admin_organizations, 1],
+        admin_organizations: [
+          ...meFixture.admin_organizations,
+          (meFixture.organization as Org).id,
+        ],
       }),
     ),
   ),
@@ -95,7 +98,7 @@ export const mockGetMe = {
 };
 
 /* Mock Request Handlers */
-export const mockInMyOrg = generateGetHandler(`/users`, usersList);
+export const mockInMyOrg = generateGetHandler(`users/*`, usersList);
 
 const listOrgsUrl = new URL(`organizations/`, baseApiUrl).toString();
 export const mockGetOrgsList = {

src/test/handlers/addons.ts

@@ -10,9 +10,11 @@ import {
 import {
   createApiUrl,
   dataHandler,
+  emptyHandler,
   generateAllHandler,
   generateGetHandler,
 } from "./utils";
+import { emptyList } from "../fixtures/common";
 
 /* Mock Handlers */
 
@@ -38,4 +40,5 @@ export const progress = [
 
 export const runs = {
   data: rest.get(createApiUrl("addon_runs/"), dataHandler(runsList)),
+  empty: rest.get(createApiUrl("addon_runs/"), emptyHandler()),
 };

src/test/handlers/projects.ts

@@ -1,4 +1,18 @@
-import { generateGetHandler } from "./utils";
+import { rest } from "msw";
+import {
+  dataHandler,
+  emptyHandler,
+  errorHandler,
+  loadingHandler,
+  createApiUrl,
+} from "./utils";
 import { projectList } from "../fixtures/projects";
+import { emptyList } from "../fixtures/common";
 
-export const projects = generateGetHandler("projects/", projectList);
+const projectsUrl = createApiUrl("projects/*");
+export const projects = {
+  data: rest.get(projectsUrl, dataHandler(projectList)),
+  empty: rest.get(projectsUrl, emptyHandler(emptyList)),
+  loading: rest.get(projectsUrl, loadingHandler),
+  error: rest.get(projectsUrl, errorHandler),
+};

src/test/handlers/utils.ts

@@ -7,7 +7,7 @@ export function createApiUrl(path: string): string {
 
 export const dataHandler = (data) => (req, res, ctx) => res(ctx.json(data));
 export const emptyHandler =
-  (emptyData = []) =>
+  (emptyData: any = []) =>
   (req, res, ctx) =>
     res(ctx.json(emptyData));
 export const errorHandler = (req, res, ctx) =>