UN-4290 [FEAT] Add the v1 account menu and organisation switcher

backend/account_v2/ReadMe.md

@@ -54,7 +54,7 @@
 |---|---|---|
 | `role` | The caller has a membership in the organization on this deployment. | The stored role: `admin` or `user` in OSS; `unstract_admin`, `unstract_user`, `unstract_supervisor` or `unstract_reviewer` in cloud. |
 | `member_count` | The organization exists on this deployment and, where the deployment sets `REGION`, its metadata doesn't name a different region. An organization created before the stamp and not back-filled carries no region, so a local copy of one from another region still sends the copy's count. | The people the members page lists: the organization's member records on this deployment. Platform API key accounts and pending invitations are not counted. |
-| `region` | The deployment sets `REGION`, and either the organization's metadata names a region or the organization exists on this deployment. | The region code (`US`, `EU`; `STAGING`, `DEV` or `INTEGRATION` outside production), from the metadata trimmed and uppercased, else this deployment's `REGION`. The client maps it to a label. OSS and on-prem never send it: their settings don't read `REGION`, whatever the environment sets. Cloud stamps `region` on an organization's metadata where it is created. An organization from another region that the user once opened here has a local copy; its row shows the home region and no `member_count`, since this deployment counts only the people who opened the copy. Organizations created before the stamp and not back-filled show the region of the deployment that answered. |
+| `region` | The deployment sets `REGION`, and either the organization's metadata names a region or the organization exists on this deployment. | The region code (`US`, `EU`; `STAGING`, `DEV` or `INTEGRATION` outside production), from the metadata trimmed and uppercased, else this deployment's `REGION`. The client shows the code as is. OSS and on-prem never send it: their settings don't read `REGION`, whatever the environment sets. Cloud stamps `region` on an organization's metadata where it is created. An organization from another region that the user once opened here has a local copy; its row shows the home region and no `member_count`, since this deployment counts only the people who opened the copy. Organizations created before the stamp and not back-filled show the region of the deployment that answered. |
 
 If working out these three fields fails, the list is returned without them and the failure is logged.
 

frontend/src/v1/lib/http.ts

@@ -0,0 +1,38 @@
+import axios from "axios";
+
+const SAFE_METHODS = new Set(["get", "head", "options"]);
+
+function cookie(name: string): string | undefined {
+  const prefix = `${name}=`;
+  const entry = document.cookie
+    .split("; ")
+    .find((part) => part.startsWith(prefix));
+  if (entry === undefined) {
+    return undefined;
+  }
+  try {
+    return decodeURIComponent(entry.slice(prefix.length));
+  } catch {
+    // A malformed value is no token: send no header and let the server refuse.
+    return undefined;
+  }
+}
+
+/**
+ * The one HTTP client v1 services use. Django's session cookie authenticates;
+ * unsafe methods carry the CSRF cookie back as X-CSRFToken. Set here rather
+ * than through axios's xsrf options, which only the browser adapter applies.
+ * ponytail: no 401 or error-toast handling yet; add it when a page needs it.
+ */
+export const http = axios.create({ withCredentials: true });
+
+http.interceptors.request.use((config) => {
+  const token = cookie("csrftoken");
+  if (
+    token !== undefined &&
+    !SAFE_METHODS.has((config.method ?? "get").toLowerCase())
+  ) {
+    config.headers.set("X-CSRFToken", token);
+  }
+  return config;
+});

frontend/src/v1/lib/organizations.test.ts

@@ -0,0 +1,112 @@
+import { describe, expect, test } from "vitest";
+import {
+  describeOrganization,
+  initial,
+  initials,
+  landingPath,
+  organizationInitials,
+  roleLabel,
+} from "./organizations";
+
+describe("roleLabel", () => {
+  test.each([
+    ["admin", "Admin"],
+    ["unstract_admin", "Admin"],
+    ["user", "Member"],
+    ["unstract_user", "Member"],
+    ["unstract_supervisor", "Supervisor"],
+    ["unstract_reviewer", "Reviewer"],
+  ])("%s reads %s", (role, label) => {
+    expect(roleLabel(role)).toBe(label);
+  });
+
+  test("an unknown role is not guessed", () => {
+    expect(roleLabel("auditor")).toBeUndefined();
+    expect(roleLabel(undefined)).toBeUndefined();
+  });
+});
+
+describe("describeOrganization", () => {
+  test("role, member count and region, as frame NEW10 shows", () => {
+    expect(
+      describeOrganization({ role: "admin", member_count: 40, region: "US" }),
+    ).toBe("Admin · 40 members · US");
+  });
+
+  test("one member is singular", () => {
+    expect(describeOrganization({ role: "admin", member_count: 1 })).toBe(
+      "Admin · 1 member",
+    );
+  });
+
+  test("absent fields are left out, never guessed (OSS sends no region)", () => {
+    expect(describeOrganization({ role: "user" })).toBe("Member");
+    expect(describeOrganization({ member_count: 3 })).toBe("3 members");
+    expect(describeOrganization({})).toBe("");
+  });
+});
+
+describe("initials", () => {
+  test.each([
+    ["Zipstack", "Z"],
+    ["Tanushree Daga", "TD"],
+    ["Tanushree’s organisation", "TO"],
+    ["  ", "?"],
+  ])("%s gives %s", (name, expected) => {
+    expect(initials(name)).toBe(expected);
+  });
+});
+
+describe("initial", () => {
+  test.each([
+    ["Tanushree Daga", "T"],
+    ["[email protected]", "A"],
+    ["  ", "?"],
+  ])("%s gives %s", (name, expected) => {
+    expect(initial(name)).toBe(expected);
+  });
+});
+
+describe("organizationInitials", () => {
+  test.each([
+    ["Zipstack", "ZI"],
+    ["Tanushree’s organisation", "TO"],
+    ["Acme Data Labs", "AD"],
+    ["X", "X"],
+    ["  ", "?"],
+  ])("%s gives %s", (name, expected) => {
+    expect(organizationInitials(name)).toBe(expected);
+  });
+});
+
+describe("landingPath", () => {
+  test("keeps the section in the new organisation", () => {
+    expect(landingPath("/zipstack/workflows", "zipstack", "tanushree")).toBe(
+      "/tanushree/workflows",
+    );
+  });
+
+  test("drops anything under the section: that record may not exist there", () => {
+    expect(
+      landingPath("/zipstack/tools/123/settings", "zipstack", "tanushree"),
+    ).toBe("/tanushree/tools");
+  });
+
+  test("falls back to the dashboard when the path has no section", () => {
+    expect(landingPath("/zipstack", "zipstack", "tanushree")).toBe(
+      "/tanushree/dashboard",
+    );
+    expect(landingPath("/zipstack/", "zipstack", "tanushree")).toBe(
+      "/tanushree/dashboard",
+    );
+  });
+
+  test("falls back to the dashboard outside the current organisation's paths", () => {
+    expect(landingPath("/landing", "zipstack", "tanushree")).toBe(
+      "/tanushree/dashboard",
+    );
+    expect(landingPath("/otherorg/workflows", "zipstack", "tanushree")).toBe(
+      "/tanushree/dashboard",
+    );
+  });
+});

frontend/src/v1/lib/organizations.ts

@@ -0,0 +1,82 @@
+/** Wording and navigation rules for the organisation switcher (page 19). */
+
+// Stored roles: `admin`/`user` in OSS, `unstract_*` in cloud (account_v2/ReadMe.md).
+const ROLE_LABELS: Record<string, string> = {
+  admin: "Admin",
+  unstract_admin: "Admin",
+  user: "Member",
+  unstract_user: "Member",
+  unstract_supervisor: "Supervisor",
+  unstract_reviewer: "Reviewer",
+};
+
+export function roleLabel(role: string | undefined): string | undefined {
+  return role === undefined ? undefined : ROLE_LABELS[role];
+}
+
+export interface OrganizationDetails {
+  role?: string;
+  member_count?: number;
+  region?: string;
+}
+
+/**
+ * "Admin · 40 members · US". The list leaves a field out when this deployment
+ * cannot answer for it (OSS has no regions), so a missing part is skipped.
+ * v1 shows the region code as the backend sends it, with no label mapping.
+ */
+export function describeOrganization({
+  role,
+  member_count,
+  region,
+}: OrganizationDetails): string {
+  const members =
+    member_count === undefined
+      ? undefined
+      : `${member_count} member${member_count === 1 ? "" : "s"}`;
+  return [roleLabel(role), members, region].filter(Boolean).join(" · ");
+}
+
+export function initials(name: string): string {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) {
+    return "?";
+  }
+  return words
+    .slice(0, 2)
+    .map((word) => word[0].toUpperCase())
+    .join("");
+}
+
+/** One letter, for the small marks (the account trigger, the organisation pill). */
+export function initial(name: string): string {
+  return name.trim()[0]?.toUpperCase() ?? "?";
+}
+
+/** Two letters for an organisation avatar; a one-word name gives its first two. */
+export function organizationInitials(name: string): string {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) {
+    return "?";
+  }
+  const letters =
+    words.length === 1 ? [...words[0]].slice(0, 2) : words.map((w) => w[0]);
+  return letters.slice(0, 2).join("").toUpperCase();
+}
+
+/**
+ * Where the app lands after switching: the same section in the new
+ * organisation, else its dashboard. Paths are `/<org name>/<section>/...`.
+ * ponytail: keeps only the section, since a record id below it belongs to the
+ * old organisation; ask the route registry which sections exist once it does.
+ */
+export function landingPath(
+  pathname: string,
+  fromOrg: string,
+  toOrg: string,
+): string {
+  const [org, section] = pathname.split("/").filter(Boolean);
+  return org === fromOrg && section
+    ? `/${toOrg}/${section}`
+    : `/${toOrg}/dashboard`;
+}

frontend/src/v1/services/organizations.ts

@@ -0,0 +1,75 @@
+import { http } from "@v1/lib/http";
+import type { OrganizationDetails } from "@v1/lib/organizations";
+import axios from "axios";
+
+/** A row of GET /api/v1/organization. role, member_count and region may be absent. */
+export interface Organization extends OrganizationDetails {
+  id: string;
+  /** The URL name: paths are /<name>/... */
+  name: string;
+  display_name: string;
+}
+
+/**
+ * A refusal the backend gives a meaning to. `session-ended`: the list call
+ * answered 412 after logging the session out; `body` may name the cause.
+ * `access-removed`: the set call answered 403, so the user left that
+ * organisation after the list loaded. Any other failure is thrown as is.
+ */
+export class OrganizationError extends Error {
+  readonly kind: "session-ended" | "access-removed";
+  readonly body: unknown;
+
+  constructor(kind: OrganizationError["kind"], body?: unknown) {
+    super(`Organisation request refused: ${kind}`);
+    this.name = "OrganizationError";
+    this.kind = kind;
+    this.body = body;
+  }
+}
+
+function refusal(
+  error: unknown,
+  status: number,
+  kind: OrganizationError["kind"],
+): unknown {
+  return axios.isAxiosError(error) && error.response?.status === status
+    ? new OrganizationError(kind, error.response.data)
+    : error;
+}
+
+export async function listOrganizations(): Promise<Organization[]> {
+  let data: { organizations?: unknown } | undefined;
+  try {
+    ({ data } = await http.get<{ organizations?: unknown }>(
+      "/api/v1/organization",
+    ));
+  } catch (error) {
+    throw refusal(error, 412, "session-ended");
+  }
+  // A proxy or SPA fallback can answer 200 with some other body.
+  if (!Array.isArray(data?.organizations)) {
+    throw new Error("Organization list reply carried no organizations");
+  }
+  return data.organizations as Organization[];
+}
+
+/** Makes the organisation the session's current one. */
+export async function switchOrganization(id: string): Promise<void> {
+  try {
+    await http.post(`/api/v1/organization/${encodeURIComponent(id)}/set`);
+  } catch (error) {
+    throw refusal(error, 403, "access-removed");
+  }
+}
+
+/**
+ * Where to send the browser to switch when the identity provider picked the
+ * organisation at login (the session's `org_switch_via_login`): a new login
+ * naming it, so the provider records the choice for every product. `prompt=none`
+ * shows no screen, since the provider already has a session.
+ */
+export function organizationLoginUrl(id: string): string {
+  const query = new URLSearchParams({ organization: id, prompt: "none" });
+  return `/api/v1/login?${query.toString()}`;
+}