@peers-app/peers-ui 0.25.2 → 0.25.4

package/src/screens/identity/identity-routes.test.ts

@@ -0,0 +1,70 @@
+import {
+  canonicalizeRoute,
+  IDENTITY_ACCEPT_PATH,
+  IDENTITY_ACCOUNT_PATH,
+  IDENTITY_ACTIVITY_PATH,
+  IDENTITY_DEVICES_PATH,
+  IDENTITY_GROUP_NEW_PATH,
+  IDENTITY_GROUPS_PATH,
+  IDENTITY_PAIR_PATH,
+  IDENTITY_PEOPLE_INVITE_PATH,
+  IDENTITY_PEOPLE_PATH,
+  IDENTITY_PEOPLE_SHARE_PATH,
+  identityActivityFilterPath,
+  identitySectionFromPath,
+  isIdentityPath,
+  parseIdentityLocation,
+} from "./identity-routes";
+
+const PERSON_ID = "abcdefghijklmnopqrstuvwxy";
+const GROUP_ID = "zyxwvutsrqponmlkjihgfedcb";
+const DEVICE_ID = "0123456789abcdefghijklmno";
+
+describe("canonicalizeRoute", () => {
+  it.each([
+    ["contacts", IDENTITY_PEOPLE_PATH],
+    [`contacts/${PERSON_ID}`, `${IDENTITY_PEOPLE_PATH}/${PERSON_ID}`],
+    ["groups", IDENTITY_GROUPS_PATH],
+    [`groups/${GROUP_ID}`, `${IDENTITY_GROUPS_PATH}/${GROUP_ID}`],
+    ["devices", IDENTITY_DEVICES_PATH],
+    [`devices/${DEVICE_ID}`, `${IDENTITY_DEVICES_PATH}/${DEVICE_ID}`],
+    ["devices?action=pair", IDENTITY_PAIR_PATH],
+    ["devices?action=pair&foo=bar", `${IDENTITY_PAIR_PATH}?foo=bar`],
+    ["invites", IDENTITY_ACTIVITY_PATH],
+    ["invites/accept", IDENTITY_ACCEPT_PATH],
+    ["account", IDENTITY_ACCOUNT_PATH],
+    ["account?x=1", `${IDENTITY_ACCOUNT_PATH}?x=1`],
+    ["identity/account", IDENTITY_ACCOUNT_PATH],
+    ["identity/people/invite", IDENTITY_PEOPLE_INVITE_PATH],
+    ["identity/people/SHARE", IDENTITY_PEOPLE_SHARE_PATH],
+    ["identity/groups/new", IDENTITY_GROUP_NEW_PATH],
+    ["identity", IDENTITY_ACTIVITY_PATH],
+    [`/#contacts/${PERSON_ID}?x=1`, `${IDENTITY_PEOPLE_PATH}/${PERSON_ID}?x=1`],
+    ["tools/abc", "tools/abc"],
+    ["", ""],
+  ])("rewrites %s to %s", (input, expected) => {
+    expect(canonicalizeRoute(input)).toBe(expected);
+  });
+});
+
+describe("parseIdentityLocation", () => {
+  it("parses detail routes and activity filters", () => {
+    expect(parseIdentityLocation(`contacts/${PERSON_ID}`)?.personId).toBe(PERSON_ID);
+    expect(parseIdentityLocation(`groups/${GROUP_ID}`)?.groupId).toBe(GROUP_ID);
+    expect(parseIdentityLocation("devices?action=pair")?.pairing).toBe(true);
+    expect(parseIdentityLocation(`devices/${DEVICE_ID}`)?.deviceId).toBe(DEVICE_ID);
+    expect(parseIdentityLocation("invites/accept")?.accepting).toBe(true);
+    expect(parseIdentityLocation(IDENTITY_PEOPLE_INVITE_PATH)?.peopleAction).toBe("invite");
+    expect(parseIdentityLocation(IDENTITY_PEOPLE_SHARE_PATH)?.peopleAction).toBe("share");
+    expect(parseIdentityLocation(IDENTITY_GROUP_NEW_PATH)?.creatingGroup).toBe(true);
+    expect(
+      parseIdentityLocation(identityActivityFilterPath("group", GROUP_ID))?.activityFilter,
+    ).toEqual({
+      type: "group",
+      groupId: GROUP_ID,
+    });
+    expect(identitySectionFromPath("contacts")).toBe("people");
+    expect(identitySectionFromPath("account")).toBe("account");
+    expect(isIdentityPath("settings")).toBe(false);
+  });
+});

package/src/screens/identity/identity-routes.ts

@@ -0,0 +1,301 @@
+/**
+ * Canonical Identity routes and legacy aliases.
+ *
+ * Contacts, Groups, Devices, Account, and the old Invites paths all render
+ * inside the Identity app. Navigation rewrites those aliases before a tab is
+ * updated.
+ */
+
+/** Top-level Identity app path. Opening this lands on Activity. */
+export const IDENTITY_APP_PATH = "identity";
+
+/** Unified invite inbox. */
+export const IDENTITY_ACTIVITY_PATH = "identity/activity";
+
+/** Paste or scan an invite. */
+export const IDENTITY_ACCEPT_PATH = "identity/activity/accept";
+
+/** People (contacts) list. */
+export const IDENTITY_PEOPLE_PATH = "identity/people";
+
+/** Issue a one-off invitation to connect with a person. */
+export const IDENTITY_PEOPLE_INVITE_PATH = "identity/people/invite";
+
+/** Show the reusable profile invitation. */
+export const IDENTITY_PEOPLE_SHARE_PATH = "identity/people/share";
+
+/** Groups list. */
+export const IDENTITY_GROUPS_PATH = "identity/groups";
+
+/** Create a group. */
+export const IDENTITY_GROUP_NEW_PATH = "identity/groups/new";
+
+/** Devices list. */
+export const IDENTITY_DEVICES_PATH = "identity/devices";
+
+/** Source-device pairing flow. */
+export const IDENTITY_PAIR_PATH = "identity/devices/pair";
+
+/** Peers Services registration. */
+export const IDENTITY_ACCOUNT_PATH = "identity/account";
+
+/** Sidebar sections of the Identity app. */
+export type IdentitySectionId = "activity" | "people" | "groups" | "devices" | "account";
+
+/** Invite kinds that can filter Activity. */
+export type IdentityInviteType = "contact" | "group" | "device";
+
+/** Parsed Identity location, including detail and filter state. */
+export interface IdentityLocation {
+  /** Active sidebar section. */
+  section: IdentitySectionId;
+  /** Canonical path without a query string. */
+  pathname: string;
+  /** Person id when a contact detail is open. */
+  personId?: string;
+  /** People action selected by a route. */
+  peopleAction?: "invite" | "share";
+  /** Group id when a group detail is open. */
+  groupId?: string;
+  /** True when the group creation panel is open. */
+  creatingGroup: boolean;
+  /** Device id when a device detail is open. */
+  deviceId?: string;
+  /** True on the pairing route. */
+  pairing: boolean;
+  /** True on the paste-or-scan route. */
+  accepting: boolean;
+  /** Activity list filter from the query string. */
+  activityFilter: {
+    type?: IdentityInviteType;
+    groupId?: string;
+  };
+}
+
+interface ParsedRoute {
+  pathname: string;
+  query: URLSearchParams;
+}
+
+const IDENTITY_SECTIONS = new Set<IdentitySectionId>([
+  "activity",
+  "people",
+  "groups",
+  "devices",
+  "account",
+]);
+const INVITE_TYPES = new Set<IdentityInviteType>(["contact", "group", "device"]);
+
+/**
+ * Split a hash path into its pathname and query.
+ *
+ * @param raw - Route with an optional leading `#` or `/` and an optional query.
+ */
+export function parseRoute(raw: string | null | undefined): ParsedRoute {
+  let trimmed = (raw ?? "").trim();
+  if (trimmed.startsWith("/#")) {
+    trimmed = trimmed.slice(2);
+  } else if (trimmed.startsWith("#")) {
+    trimmed = trimmed.slice(1);
+  }
+  const queryIndex = trimmed.indexOf("?");
+  const before = queryIndex >= 0 ? trimmed.slice(0, queryIndex) : trimmed;
+  const queryString = queryIndex >= 0 ? trimmed.slice(queryIndex + 1) : "";
+  let pathname = before.trim();
+  pathname = pathname.replace(/^\/+/, "").replace(/\/+$/, "");
+  return { pathname, query: new URLSearchParams(queryString) };
+}
+
+/**
+ * Rewrite legacy identity aliases to their canonical `identity/*` path.
+ *
+ * Unrelated routes are returned with only slash cleanup, so other apps keep
+ * their existing path casing. `devices?action=pair` becomes the pair route.
+ *
+ * @param raw - Requested route, possibly a legacy alias.
+ * @returns Canonical route, including any query that still applies.
+ */
+export function canonicalizeRoute(raw: string | null | undefined): string {
+  const { pathname, query } = parseRoute(raw);
+  if (!pathname) {
+    return "";
+  }
+  const rewritten = rewritePathname(pathname, query);
+  const queryString = query.toString();
+  return queryString ? `${rewritten}?${queryString}` : rewritten;
+}
+
+/**
+ * Whether a route belongs to the Identity app after alias rewrite.
+ *
+ * @param raw - Route to test.
+ */
+export function isIdentityPath(raw: string | null | undefined): boolean {
+  const pathname = parseRoute(canonicalizeRoute(raw)).pathname;
+  return pathname === IDENTITY_APP_PATH || pathname.startsWith(`${IDENTITY_APP_PATH}/`);
+}
+
+/**
+ * Sidebar section for an Identity route.
+ *
+ * @param raw - Identity route or legacy alias.
+ * @returns The section, or `undefined` when the route is not Identity.
+ */
+export function identitySectionFromPath(
+  raw: string | null | undefined,
+): IdentitySectionId | undefined {
+  return parseIdentityLocation(raw)?.section;
+}
+
+/**
+ * Detail, pairing, accept, and filter state for an Identity route.
+ *
+ * @param raw - Identity route or legacy alias.
+ * @returns Parsed location, or `undefined` when the route is not Identity.
+ */
+export function parseIdentityLocation(
+  raw: string | null | undefined,
+): IdentityLocation | undefined {
+  const canonical = canonicalizeRoute(raw);
+  const { pathname, query } = parseRoute(canonical);
+  const parts = pathname.split("/").filter(Boolean);
+  if (parts[0] !== IDENTITY_APP_PATH) {
+    return undefined;
+  }
+  const section = IDENTITY_SECTIONS.has(parts[1] as IdentitySectionId)
+    ? (parts[1] as IdentitySectionId)
+    : "activity";
+  const rest = parts.slice(2);
+  const pairing = section === "devices" && rest[0] === "pair";
+  const accepting = section === "activity" && rest[0] === "accept";
+  const peopleAction =
+    section === "people" && (rest[0] === "invite" || rest[0] === "share") ? rest[0] : undefined;
+  const creatingGroup = section === "groups" && rest[0] === "new";
+  const detailId =
+    rest[0] &&
+    rest[0] !== "pair" &&
+    rest[0] !== "accept" &&
+    rest[0] !== "invite" &&
+    rest[0] !== "share" &&
+    rest[0] !== "new"
+      ? rest[0]
+      : undefined;
+  const type = query.get("type");
+  return {
+    section,
+    pathname,
+    personId: section === "people" ? detailId : undefined,
+    peopleAction,
+    groupId: section === "groups" ? detailId : undefined,
+    creatingGroup,
+    deviceId: section === "devices" && !pairing ? detailId : undefined,
+    pairing,
+    accepting,
+    activityFilter: {
+      type:
+        type && INVITE_TYPES.has(type as IdentityInviteType)
+          ? (type as IdentityInviteType)
+          : undefined,
+      groupId: query.get("groupId") || undefined,
+    },
+  };
+}
+
+/**
+ * Activity route that shows one invite type, optionally one group.
+ *
+ * @param type - Invite type to show.
+ * @param groupId - Group to limit the list to.
+ */
+export function identityActivityFilterPath(type: IdentityInviteType, groupId?: string): string {
+  const query = new URLSearchParams();
+  query.set("type", type);
+  if (groupId) {
+    query.set("groupId", groupId);
+  }
+  return `${IDENTITY_ACTIVITY_PATH}?${query.toString()}`;
+}
+
+function rewritePathname(pathname: string, query: URLSearchParams): string {
+  const parts = pathname.split("/").filter(Boolean);
+  const root = parts[0]?.toLowerCase() ?? "";
+  let rewritten: string[] | undefined;
+  if (root === "identity") {
+    rewritten = rewriteIdentity(parts.slice(1));
+  } else if (root === "contacts") {
+    rewritten = ["identity", "people", ...singleId(parts.slice(1))];
+  } else if (root === "groups") {
+    rewritten = ["identity", "groups", ...singleId(parts.slice(1))];
+  } else if (root === "devices") {
+    rewritten = rewriteDevices(parts.slice(1));
+  } else if (root === "invites") {
+    rewritten =
+      parts[1]?.toLowerCase() === "accept"
+        ? ["identity", "activity", "accept"]
+        : ["identity", "activity"];
+  } else if (root === "account") {
+    rewritten = ["identity", "account"];
+  }
+
+  if (!rewritten) {
+    return pathname;
+  }
+
+  if (rewritten.join("/") === IDENTITY_DEVICES_PATH && query.get("action") === "pair") {
+    query.delete("action");
+    rewritten = ["identity", "devices", "pair"];
+  }
+  return rewritten.join("/");
+}
+
+function rewriteIdentity(rest: string[]): string[] {
+  const section = rest[0]?.toLowerCase();
+  if (section === "people") {
+    return ["identity", "people", ...rewritePeople(rest.slice(1))];
+  }
+  if (section === "groups") {
+    return ["identity", "groups", ...rewriteGroups(rest.slice(1))];
+  }
+  if (section === "devices") {
+    return rewriteDevices(rest.slice(1));
+  }
+  if (section === "activity") {
+    return rest[1]?.toLowerCase() === "accept"
+      ? ["identity", "activity", "accept"]
+      : ["identity", "activity"];
+  }
+  if (section === "account") {
+    return ["identity", "account"];
+  }
+  return ["identity", "activity"];
+}
+
+function rewritePeople(rest: string[]): string[] {
+  const head = rest[0]?.toLowerCase();
+  if (head === "invite" || head === "share") {
+    return [head];
+  }
+  return singleId(rest);
+}
+
+function rewriteGroups(rest: string[]): string[] {
+  if (rest[0]?.toLowerCase() === "new") {
+    return ["new"];
+  }
+  return singleId(rest);
+}
+
+function rewriteDevices(rest: string[]): string[] {
+  const head = rest[0]?.toLowerCase();
+  if (!head) {
+    return ["identity", "devices"];
+  }
+  if (head === "pair") {
+    return ["identity", "devices", "pair"];
+  }
+  return ["identity", "devices", rest[0]];
+}
+
+function singleId(rest: string[]): string[] {
+  return rest[0] ? [rest[0]] : [];
+}

package/src/screens/identity/identity-screen.test.tsx

@@ -0,0 +1,138 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { isDesktop, mainContentPath } from "../../globals";
+import { IdentityScreen } from "./identity-screen";
+
+jest.mock("../../globals", () => {
+  const { observable } =
+    jest.requireActual<typeof import("@peers-app/peers-sdk")>("@peers-app/peers-sdk");
+  return {
+    isDesktop: observable(true),
+    mainContentPath: observable("identity/activity"),
+  };
+});
+
+jest.mock("../../ui-router/ui-loader", () => ({
+  registerInternalPeersUI: jest.fn(),
+}));
+
+jest.mock("../contacts/contact-list", () => ({
+  ContactList: () => <div>People view</div>,
+}));
+
+jest.mock("../contacts/contact-details", () => ({
+  ContactDetails: ({ userId }: { userId: string }) => <div>Person {userId}</div>,
+}));
+
+jest.mock("../groups/group-list", () => ({
+  GroupList: () => <div>Groups view</div>,
+}));
+
+jest.mock("../groups/group-details", () => ({
+  GroupDetails: ({ groupId }: { groupId: string }) => <div>Group {groupId}</div>,
+}));
+
+jest.mock("../devices/devices-list", () => ({
+  DevicesSection: ({ mode }: { mode?: string }) => <div>Devices {mode}</div>,
+}));
+
+jest.mock("../invites/accept-invite", () => ({
+  AcceptInvite: () => <div>Accept invite view</div>,
+}));
+
+jest.mock("../invites/activity-view", () => ({
+  ActivityView: () => <div>Activity view</div>,
+}));
+
+jest.mock("../account/account-screen", () => ({
+  AccountScreen: () => <div>Account view</div>,
+}));
+
+jest.mock("../invites/pending-invites-list", () => ({
+  useInviteRows: () => ({
+    rows: [
+      {
+        inviteId: "inboundcontact0000000001",
+        type: "contact",
+        status: "pending",
+        direction: "in",
+        mode: "contact",
+      },
+    ],
+    hasHistory: false,
+  }),
+  classifyInvite: (row: { direction: string; type: string; status: string }) =>
+    row.status === "pending" && row.direction === "in" && row.type === "contact"
+      ? "attention"
+      : "waiting",
+}));
+
+const PERSON_ID = "abcdefghijklmnopqrstuvwxy";
+
+describe("IdentityScreen", () => {
+  beforeEach(() => {
+    isDesktop(true);
+    mainContentPath("identity/activity");
+  });
+
+  it("highlights the parent section for a person route and keeps Activity counted", () => {
+    render(<IdentityScreen path={`identity/people/${PERSON_ID}`} />);
+
+    expect(screen.getByRole("button", { name: /People/ })).toHaveAttribute("aria-current", "page");
+    expect(screen.getByText(`Person ${PERSON_ID}`)).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Activity/ })).toHaveTextContent("1");
+  });
+
+  it("renders the accept flow on the activity section", () => {
+    render(<IdentityScreen path="invites/accept" />);
+
+    expect(screen.getByText("Accept invite view")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Activity/ })).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+  });
+
+  it("renders registration on the account section", () => {
+    render(<IdentityScreen path="account" />);
+
+    expect(screen.getByText("Account view")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Account/ })).toHaveAttribute("aria-current", "page");
+  });
+
+  it("selects a section through the canonical route", async () => {
+    render(<IdentityScreen path="identity/activity" />);
+    await userEvent.click(screen.getByRole("button", { name: /Devices/ }));
+    expect(mainContentPath()).toBe("identity/devices");
+  });
+
+  it("keeps all desktop quick actions route-backed", () => {
+    render(<IdentityScreen path="identity/activity" />);
+
+    expect(screen.getByRole("link", { name: /Add person/ })).toHaveAttribute(
+      "href",
+      "#identity/people/invite",
+    );
+    expect(screen.getByRole("link", { name: /Create group/ })).toHaveAttribute(
+      "href",
+      "#identity/groups/new",
+    );
+    expect(screen.getByRole("link", { name: /Add device/ })).toHaveAttribute(
+      "href",
+      "#identity/devices/pair",
+    );
+    expect(screen.getByRole("link", { name: /Use invite/ })).toHaveAttribute(
+      "href",
+      "#identity/activity/accept",
+    );
+  });
+
+  it("collapses add actions on a narrow screen", async () => {
+    isDesktop(false);
+    render(<IdentityScreen path="identity/activity" />);
+
+    await userEvent.click(screen.getByRole("button", { name: "Add" }));
+    expect(screen.getByRole("link", { name: /Add person/ })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /Create group/ })).toBeInTheDocument();
+  });
+});