feat(xai): add Grok account management UI with four-locale strings

Add XaiOAuthSection (device-code login, account list, default selection) backed by the generalized useManagedAuth hook, wire it into the Auth Center and both Claude provider forms, and expose model fetching for signed-in accounts. - Accounts requiring re-auth stay visible in the account selector as disabled items with an expired badge instead of silently vanishing. - Auth status refetches periodically so a revoked refresh token surfaces without reloading the panel. - All strings ship in zh/en/ja/zh-TW; a locale coverage test pins every required key in all four locales.
2026-07-24 12:44:18 +08:00 · 2026-07-19 00:20:17 +08:00
parent 615c99c62b
commit e9317f476e
16 changed files with 936 additions and 68 deletions
@@ -0,0 +1,63 @@
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { XaiOAuthSection } from "@/components/providers/forms/XaiOAuthSection";
+
+const mockUseXaiOauth = vi.hoisted(() => vi.fn());
+
+vi.mock("@/components/providers/forms/hooks/useXaiOauth", () => ({
+  useXaiOauth: mockUseXaiOauth,
+}));
+
+describe("XaiOAuthSection", () => {
+  beforeEach(() => {
+    mockUseXaiOauth.mockReturnValue({
+      accounts: [
+        {
+          id: "expired-account",
+          login: "expired@example.com",
+          avatar_url: null,
+          authenticated_at: 1,
+          github_domain: "x.ai",
+          requires_reauth: true,
+        },
+        {
+          id: "usable-account",
+          login: "usable@example.com",
+          avatar_url: null,
+          authenticated_at: 2,
+          github_domain: "x.ai",
+          requires_reauth: false,
+        },
+      ],
+      defaultAccountId: "usable-account",
+      hasAnyAccount: true,
+      isAuthenticated: true,
+      pollingState: "idle",
+      deviceCode: null,
+      error: null,
+      isPolling: false,
+      isAddingAccount: false,
+      isRemovingAccount: false,
+      isSettingDefaultAccount: false,
+      addAccount: vi.fn(),
+      removeAccount: vi.fn(),
+      setDefaultAccount: vi.fn(),
+      cancelAuth: vi.fn(),
+      logout: vi.fn(),
+    });
+  });
+
+  it("keeps a selected account visible when it requires reauthentication", () => {
+    render(
+      <XaiOAuthSection
+        selectedAccountId="expired-account"
+        onAccountSelect={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole("combobox")).toHaveTextContent(
+      "expired@example.com",
+    );
+    expect(screen.getByRole("combobox")).toHaveTextContent("凭据已失效");
+  });
+});
@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import en from "@/i18n/locales/en.json";
+import ja from "@/i18n/locales/ja.json";
+import zhTW from "@/i18n/locales/zh-TW.json";
+import zh from "@/i18n/locales/zh.json";
+
+const requiredKeys = [
+  "xaiOauth.authStatus",
+  "xaiOauth.accountCount",
+  "xaiOauth.reauthRequired",
+  "xaiOauth.notAuthenticated",
+  "xaiOauth.selectAccount",
+  "xaiOauth.selectAccountPlaceholder",
+  "xaiOauth.useDefaultAccount",
+  "xaiOauth.accounts",
+  "xaiOauth.defaultAccount",
+  "xaiOauth.expired",
+  "xaiOauth.setAsDefault",
+  "xaiOauth.removeAccount",
+  "xaiOauth.addOrReauth",
+  "xaiOauth.login",
+  "xaiOauth.waitingForAuth",
+  "xaiOauth.enterCode",
+  "xaiOauth.retry",
+  "xaiOauth.logoutAll",
+  "xaiOauth.loginRequired",
+  "managedAuth.selectedAccountNeedsReauth",
+  "managedAuth.selectedAccountUnavailable",
+  "providerForm.providerKeyStatusLoading",
+  "settings.authCenter.xaiOauthDescription",
+] as const;
+
+type TranslationTree = Record<string, unknown>;
+
+function readTranslation(tree: TranslationTree, path: string): unknown {
+  return path.split(".").reduce<unknown>((value, segment) => {
+    if (typeof value !== "object" || value === null) return undefined;
+    return (value as TranslationTree)[segment];
+  }, tree);
+}
+
+describe("xAI OAuth locale coverage", () => {
+  it.each([
+    ["zh", zh],
+    ["zh-TW", zhTW],
+    ["en", en],
+    ["ja", ja],
+  ])("defines every required key in %s", (_locale, translations) => {
+    const missing = requiredKeys.filter((key) => {
+      const value = readTranslation(translations, key);
+      return typeof value !== "string" || value.trim().length === 0;
+    });
+
+    expect(missing).toEqual([]);
+  });
+});