Merge pull request #504 from MuckRock/sveltekit-relayout

Updates application `MainLayout`

.storybook/decorators/OrgContextDecorator.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { writable, type Writable } from "svelte/store";
+  import type { Org } from "@/api/types";
+  import { organization } from "@/test/fixtures/accounts";
+  const orgStore: Writable<Org> = writable(null);
+  $: orgStore.set(organization as Org);
+  setContext("org", orgStore);
+</script>
+
+<slot />

.storybook/decorators/UserContextDecorator.svelte

@@ -2,7 +2,7 @@
   import { setContext } from "svelte";
   import { writable, type Writable } from "svelte/store";
   import type { User } from "@/api/types";
-  import { me } from "@/api/fixtures/orgAndUser.fixtures";
+  import { me } from "@/test/fixtures/accounts";
   const userStore: Writable<User> = writable(null);
   $: userStore.set(me as User);
   setContext("me", userStore);

.storybook/preview.ts

@@ -2,6 +2,7 @@ import type { Preview } from "@storybook/svelte";
 import { initialize, mswLoader } from "msw-storybook-addon";
 import { mockDateDecorator } from "storybook-mock-date-decorator";
 import UserContextDecorator from "./decorators/UserContextDecorator.svelte";
+import OrgContextDecorator from "./decorators/OrgContextDecorator.svelte";
 
 import "@/style/kit.css";
 import "../src/lib/i18n/index.js";
@@ -30,6 +31,10 @@ const preview: Preview = {
 // Provide the MSW addon loader globally
 export const loaders = [mswLoader];
 
-export let decorators = [mockDateDecorator, () => UserContextDecorator];
+export let decorators = [
+  mockDateDecorator,
+  () => UserContextDecorator,
+  () => OrgContextDecorator,
+];
 
 export default preview;

src/common/Dropdown2.svelte

@@ -133,8 +133,9 @@
   .title {
     display: block;
     cursor: pointer;
-    padding: 0.5rem;
-    border-radius: var(--radius);
+    padding: 0.25rem;
+    color: var(--gray-5);
+    fill: var(--gray-4);
   }
   .title.border {
     border: 1px solid rgba(0, 0, 0, 0.1);

src/common/Menu.svelte

@@ -2,18 +2,22 @@
   <slot>Define some menu items</slot>
 </div>
 
-<style lang="scss">
+<style>
   .menu {
-    @include menu;
-
-    border: 1px solid #cdcdcd;
-    padding: 7px 0;
-
-    :global(.small) {
-      color: $gray;
-      font-size: 11px;
-      text-transform: uppercase;
-      margin: 3px 0 0 0;
-    }
+    display: flex;
+    flex-direction: column;
+    margin-top: 0.25rem;
+    background: var(--white, #ffffff);
+    border-radius: 0.5rem;
+    border: 1px solid var(--gray-1);
+    box-shadow: var(--shadow);
+    padding: 0.5rem;
+    gap: 0.25rem;
+  }
+  :global(.menu.small) {
+    color: var(--gray-3);
+    font-size: 11px;
+    text-transform: uppercase;
+    margin: 3px 0 0 0;
   }
 </style>

src/common/MenuTitle.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
+  import { ChevronDown16 } from "svelte-octicons";
+
   export let label: string;
 </script>
 
 <span class="title">
   {#if $$slots.icon}<span class="icon"><slot name="icon" /></span>{/if}
   <span class="label">{label}</span>
-  <span class="dropper">▼</span>
+  <span class="dropper"><ChevronDown16 /></span>
 </span>
 
 <style>
   .title {
     display: flex;
     align-items: center;
+    gap: 0.5rem;
   }
   .label {
     flex: 1 1 auto;

src/config/config.js

@@ -33,9 +33,9 @@ export const BASE_API_URL = DC_BASE + API;
 export const DC_LOGIN = "/accounts/login/squarelet";
 export const DC_LOGOUT = "/accounts/logout/";
 export const SQUARELET_SIGNUP = "/accounts/signup/?intent=documentcloud&next=";
-export const SIGN_IN_URL = DC_BASE + DC_LOGIN;
-export const SIGN_UP_URL = SQUARELET_BASE + SQUARELET_SIGNUP;
-export const SIGN_OUT_URL = DC_BASE + DC_LOGOUT;
+export const SIGN_IN_URL = new URL(DC_LOGIN, DC_BASE).toString();
+export const SIGN_UP_URL = new URL(SQUARELET_SIGNUP, SQUARELET_BASE).toString();
+export const SIGN_OUT_URL = new URL(DC_LOGOUT, DC_BASE).toString();
 
 export const LANGUAGES = [
   ["US English", "en", "🇺🇸"],

src/lib/api/accounts.test.ts

@@ -0,0 +1,64 @@
+import { vi, test, describe, it, expect, beforeEach, afterEach } from "vitest";
+
+import { BASE_API_URL } from "@/config/config";
+import * as fixtures from "@/test/fixtures/accounts";
+
+import { getMe, getOrg } from "./accounts";
+
+describe("getMe", async () => {
+  let mockFetch;
+  beforeEach(() => {
+    mockFetch = vi.fn().mockImplementation(async () => ({
+      ok: true,
+      json: vi.fn().mockReturnValue(fixtures.me),
+    }));
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("returns the expected data", async () => {
+    const resp = await getMe(mockFetch);
+    expect(resp).toBe(fixtures.me);
+  });
+
+  it("calls the expected endpoint", async () => {
+    await getMe(mockFetch);
+    const expectedEndpoint = new URL(`users/me/`, BASE_API_URL);
+    expectedEndpoint.searchParams.set("expand", "organization");
+    expect(mockFetch).toHaveBeenCalledWith(expectedEndpoint, {
+      credentials: "include",
+    });
+  });
+
+  it("returns undefined upon server error", async () => {
+    mockFetch = vi.fn().mockImplementation(async () => ({
+      ok: false,
+      json: vi.fn().mockReturnValue(fixtures.me),
+    }));
+    const resp = await getMe(mockFetch);
+    expect(resp).toBeUndefined();
+  });
+
+  it("returns undefined upon fetch error", async () => {
+    mockFetch = vi.fn().mockRejectedValue(new Error("Fetch Error"));
+    const resp = await getMe(mockFetch);
+    expect(resp).toBeUndefined();
+  });
+});
+
+test("getOrg", async () => {
+  const mockFetch = vi.fn().mockImplementation(async () => ({
+    ok: true,
+    json: vi.fn().mockReturnValue(fixtures.organization),
+  }));
+  const resp = await getOrg(mockFetch, 1);
+  expect(resp).toEqual(fixtures.organization);
+  expect(mockFetch).toHaveBeenCalledWith(
+    new URL("organizations/1/", BASE_API_URL),
+    { credentials: "include" },
+  );
+});
+
+test.todo("users.get");
+test.todo("users.list");

src/lib/api/accounts.ts

@@ -0,0 +1,23 @@
+import type { Maybe, User, Org } from "@/api/types";
+import { BASE_API_URL } from "@/config/config.js";
+
+type Fetch = typeof globalThis.fetch;
+
+/** Get the logged-in user */
+export async function getMe(fetch: Fetch): Promise<Maybe<User>> {
+  const endpoint = new URL("users/me/", BASE_API_URL);
+  endpoint.searchParams.set("expand", "organization");
+  try {
+    const resp = await fetch(endpoint, { credentials: "include" });
+    if (!resp.ok) return;
+    return resp.json();
+  } catch (e) {
+    return;
+  }
+}
+
+export async function getOrg(fetch: Fetch, id: number): Promise<Org> {
+  const endpoint = new URL(`organizations/${id}/`, BASE_API_URL);
+  const resp = await fetch(endpoint, { credentials: "include" });
+  return resp.json();
+}

src/lib/components/ContentLayout.svelte

@@ -23,6 +23,7 @@
     flex: 1 0 0;
     align-self: stretch;
     position: relative;
+    width: 100%;
   }
   header {
     flex: 0 0 0;