@oneuptime/common 14.0.0 → 14.0.2

package/Tests/App/Dashboard/WorkflowVariablesTable.test.tsx

@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom";
-import { act, cleanup, render, screen } from "@testing-library/react";
+import { act, cleanup, render, screen, waitFor } from "@testing-library/react";
 import React, { ReactElement } from "react";
 import {
   afterEach,
@@ -9,34 +9,30 @@ import {
   jest,
   test,
 } from "@jest/globals";
+import type { SpyInstance } from "jest-mock";
 
 /*
- * "I am unable to edit the variables, I am having to delete the variable and
- * add it again if I want to make a modification to it."
+ * The workflow variables list - Workflows > Global Variables and Workflow >
+ * View > Workflow Variables - after it was simplified.
  *
- * Both variable tables - Workflow > Variables (global) and Workflow > View >
- * Variables (local) - passed isEditable={false}, so a variable was immutable
- * from the moment it was saved. There was a reason for that, and it is why
- * turning the flag on is not the whole fix:
+ * What was asked for, and what every describe block below pins down:
  *
- *   `content` is write-only. Its ColumnAccessControl.read is [] while its
- *   update list is not, and ModelForm builds the edit modal's prefetch select
- *   from each field's UPDATE list (getFieldPermissions), never its read list.
- *   So an edit form that still carries the content field asks the API to select
- *   a column nobody may read, and SelectPermission refuses the whole GET - the
- *   modal opens on a red error instead of a form.
+ *   1. The list shows Name, Type and Description. The Secret, Token and
+ *      Created At columns are gone.
+ *   2. A row has one action, View, which opens the variable's own page. Show
+ *      ID, Update Content, Edit Details and Delete are no longer row actions.
+ *   3. Create makes a static variable and never asks which kind. An OAuth 2.0
+ *      variable is created from the More (⋯) menu beside it.
+ *   4. Both of the above on the global page and on a workflow's own page.
  *
- * The fix is therefore two-part, and both parts are asserted here: content is
- * marked doNotShowWhenEditing (which drops it from the edit form, its select
- * AND its payload, because ModelTable filters the array before ModelForm sees
- * it), and it gets its own door - an "Update Content" row action writing that
- * one column through ModelAPI.
- *
- * ModelTable is replaced by a prop recorder: what is under test is the
- * configuration the page hands it, and the real table fetches on mount.
+ * ModelTable, the OAuth create form and the token refresh modal are replaced
+ * by prop recorders: what is under test is the configuration the page hands
+ * them and what the page does when their callbacks fire. The real table
+ * fetches on mount.
  */
 
 let permissionsForTest: Array<unknown> = [];
+let isMasterAdminForTest: boolean = false;
 
 jest.mock("../../../UI/Utils/Permission", () => {
   return {
@@ -60,7 +56,7 @@ jest.mock("../../../UI/Utils/User", () => {
     __esModule: true,
     default: {
       isMasterAdmin: (): boolean => {
-        return false;
+        return isMasterAdminForTest;
       },
       getUserId: (): null => {
         return null;
@@ -80,37 +76,48 @@ jest.mock("../../../UI/Utils/Project", () => {
   };
 });
 
+const getLastParamAsObjectID: ReturnType<
+  typeof jest.fn<(position: number) => unknown>
+> = jest.fn<(position: number) => unknown>();
+
 jest.mock("../../../UI/Utils/Navigation", () => {
   return {
     __esModule: true,
     default: {
-      getLastParamAsObjectID: (): unknown => {
-        return WORKFLOW_ID;
+      getLastParamAsObjectID: (position: number): unknown => {
+        return getLastParamAsObjectID(position);
       },
     },
   };
 });
 
-const updateById: ReturnType<
-  typeof jest.fn<(data: unknown) => Promise<unknown>>
-> = jest.fn<(data: unknown) => Promise<unknown>>();
-
 jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
   return {
     __esModule: true,
     default: {
-      updateById: (data: unknown): Promise<unknown> => {
-        return updateById(data);
+      getCommonHeaders: (): Record<string, string> => {
+        return { tenantid: "project-header" };
       },
     },
   };
 });
 
+const apiPost: ReturnType<typeof jest.fn<(data: unknown) => Promise<unknown>>> =
+  jest.fn<(data: unknown) => Promise<unknown>>();
+
 jest.mock("../../../UI/Utils/API/API", () => {
   return {
     __esModule: true,
     default: {
+      post: (data: unknown): Promise<unknown> => {
+        return apiPost(data);
+      },
+      // The same precedence as the real one, for the two shapes used here.
       getFriendlyMessage: (error: unknown): string => {
+        if (error instanceof HTTPErrorResponse) {
+          return error.message || "Server Error. Please try again";
+        }
+
         return error instanceof Error ? error.message : "Request failed.";
       },
     },
@@ -120,38 +127,77 @@ jest.mock("../../../UI/Utils/API/API", () => {
 type FormFieldEntry = {
   field?: Record<string, unknown> | undefined;
   title?: string | undefined;
-  doNotShowWhenEditing?: boolean | undefined;
-  doNotShowWhenCreating?: boolean | undefined;
-  required?: boolean | undefined;
+  stepId?: string | undefined;
+  fieldType?: string | undefined;
+  required?:
+    | boolean
+    | ((values: Record<string, unknown>) => boolean)
+    | undefined;
   description?: string | undefined;
+  placeholder?: string | undefined;
+  validation?: Record<string, unknown> | undefined;
+  showIf?: ((values: Record<string, unknown>) => boolean) | undefined;
+  doNotShowWhenCreating?: boolean | undefined;
+  cardSelectOptions?: Array<unknown> | undefined;
+  dropdownOptions?: Array<unknown> | undefined;
 };
 
-type ActionButtonEntry = {
+type ColumnEntry = {
+  field?: Record<string, unknown> | undefined;
+  title?: string | undefined;
+  type?: string | undefined;
+  getElement?: ((item: unknown) => ReactElement) | undefined;
+};
+
+type CardButtonEntry = {
   title: string;
+  icon?: IconProp | undefined;
+  buttonStyle?: ButtonStyleType | undefined;
   disabled?: boolean | undefined;
   tooltip?: string | undefined;
-  isVisible?: ((item: unknown) => boolean | undefined) | undefined;
-  onClick: (
-    item: unknown,
-    onCompleteAction: () => void,
-    onError: (error: Error) => void,
-  ) => void;
+  onClick: () => void;
 };
 
 type CapturedTableProps = {
+  id?: string | undefined;
+  name?: string | undefined;
+  userPreferencesKey?: string | undefined;
+  saveFilterProps?: { tableId?: string | undefined } | undefined;
   isEditable?: boolean | undefined;
-  editButtonText?: string | undefined;
-  filters?: Array<{ field?: Record<string, unknown> | undefined }> | undefined;
-  selectMoreFields?: Record<string, unknown> | undefined;
-  isCreateable?: boolean | undefined;
   isDeleteable?: boolean | undefined;
+  isCreateable?: boolean | undefined;
+  isViewable?: boolean | undefined;
+  viewButtonText?: string | undefined;
+  showViewIdButton?: boolean | undefined;
+  editButtonText?: string | undefined;
+  onViewPage?: ((item: unknown) => Promise<unknown>) | undefined;
+  actionButtons?: Array<{ title: string }> | undefined;
+  cardProps?:
+    | {
+        title?: string | undefined;
+        description?: string | undefined;
+        buttons?: Array<CardButtonEntry> | undefined;
+      }
+    | undefined;
   query?: Record<string, unknown> | undefined;
+  selectMoreFields?: Record<string, unknown> | undefined;
   formFields?: Array<FormFieldEntry> | undefined;
-  actionButtons?: Array<ActionButtonEntry> | undefined;
+  formSteps?: Array<unknown> | undefined;
   onBeforeCreate?: ((item: unknown) => Promise<unknown>) | undefined;
-  cardProps?: { title?: string | undefined } | undefined;
-  columns?: Array<{ field?: Record<string, unknown> | undefined }> | undefined;
+  onFetchSuccess?:
+    | ((data: Array<unknown>, totalCount: number) => void)
+    | undefined;
+  refreshToggle?: string | undefined;
+  noItemsMessage?: string | undefined;
+  showRefreshButton?: boolean | undefined;
   searchableFields?: Array<string> | undefined;
+  filters?:
+    | Array<{
+        field?: Record<string, unknown> | undefined;
+        title?: string | undefined;
+      }>
+    | undefined;
+  columns?: Array<ColumnEntry> | undefined;
 };
 
 let capturedTableProps: CapturedTableProps | null = null;
@@ -166,37 +212,67 @@ jest.mock("../../../UI/Components/ModelTable/ModelTable", () => {
   };
 });
 
-type CapturedModalProps = {
-  title: string;
-  error?: string | undefined;
-  isLoading?: boolean | undefined;
-  description?: string | undefined;
-  onClose?: (() => void) | undefined;
-  onSubmit?: ((data: Record<string, unknown>) => void) | undefined;
-  formProps: {
-    initialValues: Record<string, unknown>;
-    fields: Array<FormFieldEntry>;
-  };
+type CapturedOAuthModalProps = {
+  workflowId?: ObjectID | undefined;
+  onClose: () => void;
+  onSuccess: (variable: WorkflowVariable) => void;
 };
 
-let capturedModalProps: CapturedModalProps | null = null;
+let capturedOAuthModalProps: CapturedOAuthModalProps | null = null;
 
-jest.mock("../../../UI/Components/FormModal/BasicFormModal", () => {
-  return {
-    __esModule: true,
-    default: (props: CapturedModalProps): ReactElement => {
-      capturedModalProps = props;
-      return <div data-testid="update-content-modal" />;
-    },
-  };
-});
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Workflow/CreateOAuthWorkflowVariableModal",
+  () => {
+    return {
+      __esModule: true,
+      default: (props: CapturedOAuthModalProps): ReactElement => {
+        capturedOAuthModalProps = props;
+        return <div data-testid="create-oauth-variable-modal" />;
+      },
+    };
+  },
+);
+
+type CapturedRefreshModalProps = {
+  variableName: string;
+  outcome: TokenRefreshOutcome | null;
+  onClose: () => void;
+};
+
+let capturedRefreshModalProps: CapturedRefreshModalProps | null = null;
+
+// Every outcome the modal was rendered with, in order - null is "pending".
+let refreshModalOutcomes: Array<TokenRefreshOutcome | null> = [];
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Workflow/WorkflowVariableTokenRefreshModal",
+  () => {
+    return {
+      __esModule: true,
+      default: (props: CapturedRefreshModalProps): ReactElement => {
+        capturedRefreshModalProps = props;
+        refreshModalOutcomes.push(props.outcome);
+        return <div data-testid="token-refresh-modal" />;
+      },
+    };
+  },
+);
 
 import GlobalVariablesPage from "../../../../App/FeatureSet/Dashboard/src/Pages/Workflow/Variable";
 import WorkflowVariablesPage from "../../../../App/FeatureSet/Dashboard/src/Pages/Workflow/View/Variable";
+import { TokenRefreshOutcome } from "../../../../App/FeatureSet/Dashboard/src/Utils/Workflow/WorkflowVariableUtil";
 import WorkflowVariable from "../../../Models/DatabaseModels/WorkflowVariable";
+import HTTPErrorResponse from "../../../Types/API/HTTPErrorResponse";
 import IsNull from "../../../Types/BaseDatabase/IsNull";
+import OneUptimeDate from "../../../Types/Date";
+import IconProp from "../../../Types/Icon/IconProp";
 import ObjectID from "../../../Types/ObjectID";
 import Permission from "../../../Types/Permission";
+import {
+  OAuth2GrantType,
+  WorkflowVariableType,
+} from "../../../Types/Workflow/WorkflowVariableOAuth";
+import { ButtonStyleType } from "../../../UI/Components/Button/Button";
 import PermissionGate from "../../../UI/Utils/PermissionGate";
 
 const PROJECT_ID: ObjectID = new ObjectID(
@@ -212,8 +288,75 @@ const OTHER_VARIABLE_ID: ObjectID = new ObjectID(
   "44444444-4444-4444-8444-444444444444",
 );
 
+const EXPIRES_AT_ISO: string = "2030-01-01T10:00:00.000Z";
+
+const OAUTH_MENU_TITLE: string = "Create OAuth 2.0 Variable";
+
+// The columns, and their fields, the list no longer shows.
+const REMOVED_COLUMN_TITLES: Array<string> = ["Secret", "Token", "Created At"];
+const REMOVED_COLUMN_FIELDS: Array<string> = [
+  "isSecret",
+  "oauthAccessTokenExpiresAt",
+  "oauthLastRefreshedAt",
+  "oauthLastRefreshError",
+  "oauthLastRefreshErrorAt",
+  "createdAt",
+];
+
+// The row actions the list used to offer, and no longer does.
+const REMOVED_ROW_ACTIONS: Array<string> = [
+  "Show ID",
+  "Update Content",
+  "Update Credentials",
+  "Edit Details",
+  "Edit",
+  "Delete",
+];
+
+// Write-only or secret columns: no list request may ever select them.
+const NEVER_SELECTED_FIELDS: Array<string> = [
+  "content",
+  "oauthClientSecret",
+  "oauthRefreshToken",
+  "oauthAccessToken",
+];
+
 type Page = "global" | "local";
 
+type PageCase = {
+  page: Page;
+  workflowId: ObjectID | undefined;
+  cardTitle: string;
+  noItemsMessage: string;
+  reference: string;
+  otherReference: string;
+  viewRoute: string;
+  otherViewRoute: string;
+};
+
+const PAGE_CASES: Array<PageCase> = [
+  {
+    page: "global",
+    workflowId: undefined,
+    cardTitle: "Global Variables",
+    noItemsMessage: "No global variables found.",
+    reference: "{{global.variables.THIS_NAME}}",
+    otherReference: "{{local.variables.THIS_NAME}}",
+    viewRoute: `/dashboard/${PROJECT_ID.toString()}/workflows/variables/${VARIABLE_ID.toString()}`,
+    otherViewRoute: `/dashboard/${PROJECT_ID.toString()}/workflows/variables/${OTHER_VARIABLE_ID.toString()}`,
+  },
+  {
+    page: "local",
+    workflowId: WORKFLOW_ID,
+    cardTitle: "Workflow Variables",
+    noItemsMessage: "No workflow variables found.",
+    reference: "{{local.variables.THIS_NAME}}",
+    otherReference: "{{global.variables.THIS_NAME}}",
+    viewRoute: `/dashboard/${PROJECT_ID.toString()}/workflows/${WORKFLOW_ID.toString()}/variables/${VARIABLE_ID.toString()}`,
+    otherViewRoute: `/dashboard/${PROJECT_ID.toString()}/workflows/${WORKFLOW_ID.toString()}/variables/${OTHER_VARIABLE_ID.toString()}`,
+  },
+];
+
 function renderPage(page: Page): void {
   const props: Record<string, unknown> = {};
 
@@ -245,10 +388,22 @@ function table(): CapturedTableProps {
   return capturedTableProps;
 }
 
+function fieldName(entry: {
+  field?: Record<string, unknown> | undefined;
+}): string {
+  return Object.keys(entry.field || {})[0] || "";
+}
+
+function formFieldNames(): Array<string> {
+  return (table().formFields || []).map((entry: FormFieldEntry) => {
+    return fieldName(entry);
+  });
+}
+
 function formField(name: string): FormFieldEntry {
   const entry: FormFieldEntry | undefined = (table().formFields || []).find(
     (field: FormFieldEntry) => {
-      return Object.keys(field.field || {})[0] === name;
+      return fieldName(field) === name;
     },
   );
 
@@ -259,510 +414,1237 @@ function formField(name: string): FormFieldEntry {
   return entry;
 }
 
-function updateContentButton(): ActionButtonEntry {
-  const button: ActionButtonEntry | undefined = (
-    table().actionButtons || []
-  ).find((entry: ActionButtonEntry) => {
-    return entry.title === "Update Content";
-  });
+function column(title: string): ColumnEntry {
+  const entry: ColumnEntry | undefined = (table().columns || []).find(
+    (candidate: ColumnEntry) => {
+      return candidate.title === title;
+    },
+  );
+
+  if (!entry) {
+    throw new Error(`The table has no ${title} column`);
+  }
+
+  return entry;
+}
+
+function moreMenuButtons(): Array<CardButtonEntry> {
+  return table().cardProps?.buttons || [];
+}
+
+function oauthMenuButton(): CardButtonEntry {
+  const button: CardButtonEntry | undefined = moreMenuButtons().find(
+    (entry: CardButtonEntry) => {
+      return entry.title === OAUTH_MENU_TITLE;
+    },
+  );
 
   if (!button) {
-    throw new Error("The table offers no Update Content action");
+    throw new Error(`The More menu offers no "${OAUTH_MENU_TITLE}"`);
   }
 
   return button;
 }
 
-function makeVariable(
-  id?: ObjectID | null | undefined,
-  name?: string | undefined,
+function isOAuthFormOpen(): boolean {
+  return screen.queryByTestId("create-oauth-variable-modal") !== null;
+}
+
+function oauthForm(): CapturedOAuthModalProps {
+  if (!isOAuthFormOpen() || !capturedOAuthModalProps) {
+    throw new Error("The OAuth 2.0 create form is not open");
+  }
+
+  return capturedOAuthModalProps;
+}
+
+function isRefreshModalOpen(): boolean {
+  return screen.queryByTestId("token-refresh-modal") !== null;
+}
+
+function refreshModal(): CapturedRefreshModalProps {
+  if (!isRefreshModalOpen() || !capturedRefreshModalProps) {
+    throw new Error("The token refresh modal is not open");
+  }
+
+  return capturedRefreshModalProps;
+}
+
+function openOAuthForm(): void {
+  act(() => {
+    oauthMenuButton().onClick();
+  });
+}
+
+function staticVariable(): WorkflowVariable {
+  const variable: WorkflowVariable = new WorkflowVariable();
+  variable._id = VARIABLE_ID.toString();
+  variable.name = "PLAIN";
+  variable.variableType = WorkflowVariableType.Static;
+  return variable;
+}
+
+function oauthVariable(
+  overrides?: Partial<Record<string, unknown>> | undefined,
 ): WorkflowVariable {
   const variable: WorkflowVariable = new WorkflowVariable();
+  variable._id = VARIABLE_ID.toString();
+  variable.name = "API_TOKEN";
+  variable.variableType = WorkflowVariableType.OAuth2;
+  variable.oauthGrantType = OAuth2GrantType.ClientCredentials;
 
-  if (id !== null) {
-    variable._id = (id || VARIABLE_ID).toString();
+  for (const [key, value] of Object.entries(overrides || {})) {
+    (variable as unknown as Record<string, unknown>)[key] = value;
   }
 
-  variable.name = name || "AirflowToken";
   return variable;
 }
 
-function openUpdateContentModal(variable?: WorkflowVariable | undefined): void {
-  act(() => {
-    updateContentButton().onClick(
-      variable || makeVariable(),
-      (): void => {
-        // onCompleteAction
-      },
-      (): void => {
-        // onError
-      },
-    );
+function refreshCall(callIndex: number = 0): {
+  url: string;
+  headers: unknown;
+  data: unknown;
+} {
+  const call: { url: unknown; headers: unknown; data: unknown } = apiPost.mock
+    .calls[callIndex]![0] as { url: unknown; headers: unknown; data: unknown };
+
+  return { url: String(call.url), headers: call.headers, data: call.data };
+}
+
+type Deferred<T> = {
+  promise: Promise<T>;
+  resolve: (value: T) => void;
+  reject: (error: unknown) => void;
+};
+
+function createDeferred<T>(): Deferred<T> {
+  let resolve: (value: T) => void = (): void => {
+    // Replaced below, synchronously, by the promise executor.
+  };
+  let reject: (error: unknown) => void = (): void => {
+    // Replaced below, synchronously, by the promise executor.
+  };
+
+  const promise: Promise<T> = new Promise<T>(
+    (res: (value: T) => void, rej: (error: unknown) => void) => {
+      resolve = res;
+      reject = rej;
+    },
+  );
+
+  return { promise, resolve, reject };
+}
+
+/*
+ * Fires the open OAuth form's onSuccess with the saved variable and lets
+ * whatever it starts settle. Waits for nothing in particular, so it also
+ * serves the cases where no token is asked for at all.
+ */
+async function saveOAuthVariable(variable: WorkflowVariable): Promise<void> {
+  await act(async () => {
+    oauthForm().onSuccess(variable);
+  });
+
+  // A few more turns, so a request sent late would still be seen.
+  await act(async () => {
+    await Promise.resolve();
+    await Promise.resolve();
   });
 }
 
-function modal(): CapturedModalProps {
-  if (!capturedModalProps) {
-    throw new Error("The Update Content modal is not open");
-  }
+/*
+ * Opens the OAuth form from the More menu and fires its onSuccess with the
+ * saved variable, then waits for the token outcome to land in the modal.
+ */
+async function createOAuthVariable(variable: WorkflowVariable): Promise<void> {
+  openOAuthForm();
+
+  await saveOAuthVariable(variable);
 
-  return capturedModalProps;
+  await waitFor(() => {
+    expect(capturedRefreshModalProps?.outcome).toBeTruthy();
+  });
 }
 
-const PAGES: Array<Page> = ["global", "local"];
+type RoleCase = {
+  label: string;
+  permissions: Array<Permission>;
+};
+
+/*
+ * Roles on WorkflowVariable's create list but not its update list. The
+ * refresh route writes the token to the variable, so it checks for update and
+ * would refuse every one of these.
+ */
+const CREATE_ONLY_ROLES: Array<RoleCase> = [
+  {
+    label: "Create and Read Workflow Variables",
+    permissions: [
+      Permission.CreateWorkflowVariable,
+      Permission.ReadWorkflowVariable,
+    ],
+  },
+  { label: "Project Member", permissions: [Permission.ProjectMember] },
+  { label: "Workflow Admin", permissions: [Permission.WorkflowAdmin] },
+  { label: "Workflow Member", permissions: [Permission.WorkflowMember] },
+  /*
+   * A workflow variable is not an operational resource, so the Edit All
+   * wildcard does not widen its update list - here or on the server.
+   */
+  {
+    label: "Create Workflow Variables with Edit All Operational Resources",
+    permissions: [
+      Permission.CreateWorkflowVariable,
+      Permission.EditAllOperationalResources,
+    ],
+  },
+];
+
+// Roles on both lists: these may create the variable and fetch its token.
+const CREATE_AND_UPDATE_ROLES: Array<RoleCase> = [
+  { label: "Project Admin", permissions: [Permission.ProjectAdmin] },
+  { label: "Project Owner", permissions: [Permission.ProjectOwner] },
+  {
+    label: "Create and Edit Workflow Variables",
+    permissions: [
+      Permission.CreateWorkflowVariable,
+      Permission.EditWorkflowVariable,
+    ],
+  },
+];
+
+let clockTick: number = 0;
+let currentDateSpy: SpyInstance<() => Date> | null = null;
 
 beforeEach(() => {
   capturedTableProps = null;
-  capturedModalProps = null;
-  updateById.mockReset();
-  updateById.mockResolvedValue(undefined);
+  capturedOAuthModalProps = null;
+  capturedRefreshModalProps = null;
+  refreshModalOutcomes = [];
+  apiPost.mockReset();
+  apiPost.mockResolvedValue({
+    data: { oauthAccessTokenExpiresAt: EXPIRES_AT_ISO },
+  });
+  getLastParamAsObjectID.mockReset();
+  getLastParamAsObjectID.mockReturnValue(WORKFLOW_ID);
   permissionsForTest = [Permission.ProjectAdmin];
+  isMasterAdminForTest = false;
   PermissionGate.clearPermissionPropsCache();
+
+  /*
+   * refreshToggle is an ISO timestamp. Two bumps inside the same millisecond
+   * would be the same string and read as "not refreshed", so every read of
+   * the clock moves it on by a second.
+   */
+  clockTick = 0;
+  currentDateSpy = jest
+    .spyOn(OneUptimeDate, "getCurrentDate")
+    .mockImplementation((): Date => {
+      clockTick++;
+      return new Date(Date.UTC(2026, 8, 23, 12, 0, 0) + clockTick * 1000);
+    });
 });
 
 afterEach(() => {
   cleanup();
+  currentDateSpy?.mockRestore();
+  currentDateSpy = null;
 });
 
-describe.each(PAGES)("the %s workflow variables table", (page: Page) => {
-  /*
-   * The customer's report, stated as a test. Everything else in this file is
-   * about making this safe rather than about making it true.
-   */
-  test("offers Edit", () => {
-    renderPage(page);
+describe("the pages", () => {
+  test("the global page lists the project's variables, with no workflow", () => {
+    renderPage("global");
 
-    expect(table().isEditable).toBe(true);
-    expect(table().isCreateable).toBe(true);
-    expect(table().isDeleteable).toBe(true);
+    expect(table().query?.["workflowId"]).toBeInstanceOf(IsNull);
+    expect(getLastParamAsObjectID).not.toHaveBeenCalled();
   });
 
-  test("keeps content off the edit form, because it can never be prefilled", () => {
-    renderPage(page);
+  // /dashboard/:projectId/workflows/:id/variables - the id is one from the end.
+  test("the workflow page reads the workflow id from the URL", () => {
+    renderPage("local");
 
-    expect(formField("content").doNotShowWhenEditing).toBe(true);
-    // Still required when creating - a variable with no content is useless.
-    expect(formField("content").required).toBe(true);
-    expect(formField("content").doNotShowWhenCreating).toBeFalsy();
+    expect(getLastParamAsObjectID).toHaveBeenCalledWith(1);
+    expect(table().query?.["workflowId"]).toBe(WORKFLOW_ID);
   });
+});
 
-  test("leaves the editable columns on the edit form", () => {
-    renderPage(page);
+describe.each(PAGE_CASES)("the $page variables list", (pageCase: PageCase) => {
+  describe("columns", () => {
+    test("are exactly Name, Type and Description", () => {
+      renderPage(pageCase.page);
+
+      expect(
+        (table().columns || []).map((entry: ColumnEntry) => {
+          return entry.title;
+        }),
+      ).toEqual(["Name", "Type", "Description"]);
+
+      expect(
+        (table().columns || []).map((entry: ColumnEntry) => {
+          return fieldName(entry);
+        }),
+      ).toEqual(["name", "variableType", "description"]);
+    });
 
-    for (const column of ["name", "description", "isSecret"]) {
-      expect(formField(column).doNotShowWhenEditing).toBeFalsy();
-    }
-  });
+    // Ask 1, stated as a test.
+    test("no longer include Secret, Token or Created At", () => {
+      renderPage(pageCase.page);
 
-  /*
-   * isSecret is on the edit form only because the model's own
-   * ColumnAccessControl.update for that column is non-empty - ModelForm drops a
-   * field whose update list is empty, silently and without an error. Asserting
-   * it here from the model keeps the two ends of that from drifting apart.
-   */
-  test("the secret toggle is actually updatable at the model level", () => {
-    const variable: WorkflowVariable = new WorkflowVariable();
-
-    expect(
-      variable.getColumnAccessControlForAllColumns()["isSecret"]?.update,
-    ).toEqual(
-      expect.arrayContaining([
-        Permission.ProjectOwner,
-        Permission.ProjectAdmin,
-        Permission.EditWorkflowVariable,
-      ]),
-    );
+      for (const entry of table().columns || []) {
+        expect(REMOVED_COLUMN_TITLES).not.toContain(entry.title);
+        expect(REMOVED_COLUMN_FIELDS).not.toContain(fieldName(entry));
+      }
+    });
 
-    // And the widening did not drag content's read list along with it.
-    expect(
-      variable.getColumnAccessControlForAllColumns()["content"]?.read,
-    ).toEqual([]);
-  });
+    test("a static variable's Type reads Static", () => {
+      renderPage(pageCase.page);
 
-  /*
-   * "Edit" is the verb a user reaches for when they want to change a variable's
-   * value, and it is the one button that cannot. Naming it for what it edits is
-   * what makes the neighbouring Update Content action findable.
-   */
-  test("names the Edit button for what it actually edits", () => {
-    renderPage(page);
+      render(column("Type").getElement!(staticVariable()));
 
-    expect(table().editButtonText).toBe("Edit Details");
-  });
+      expect(screen.getByText("Static")).toBeInTheDocument();
+      expect(screen.queryByText("OAuth 2.0")).not.toBeInTheDocument();
+    });
 
-  /*
-   * The copy this replaces asked "Should this be encrypted in the Database?".
-   * content carries no `encrypted: true` and its DDL is a plain text column, so
-   * somebody turning the toggle on would come away believing a database dump
-   * was no longer a credential exposure.
-   */
-  test("the Secret toggle describes redaction, not encryption", () => {
-    renderPage(page);
+    // Rows saved before OAuth 2.0 variables existed have no type at all.
+    test("a variable with no type reads Static", () => {
+      renderPage(pageCase.page);
+
+      const variable: WorkflowVariable = new WorkflowVariable();
+      variable._id = VARIABLE_ID.toString();
+      variable.name = "LEGACY";
+
+      render(column("Type").getElement!(variable));
+
+      expect(screen.getByText("Static")).toBeInTheDocument();
+    });
+
+    test("an OAuth 2.0 variable's Type reads OAuth 2.0, with its grant type underneath", () => {
+      renderPage(pageCase.page);
+
+      render(column("Type").getElement!(oauthVariable()));
+
+      expect(screen.getByText("OAuth 2.0")).toBeInTheDocument();
+      expect(screen.getByText("Client Credentials")).toBeInTheDocument();
+      expect(screen.queryByText("Static")).not.toBeInTheDocument();
+    });
+
+    test("names the Refresh Token grant too", () => {
+      renderPage(pageCase.page);
 
-    const description: string = formField("isSecret").description || "";
+      render(
+        column("Type").getElement!(
+          oauthVariable({ oauthGrantType: OAuth2GrantType.RefreshToken }),
+        ),
+      );
+
+      expect(screen.getByText("OAuth 2.0")).toBeInTheDocument();
+      expect(screen.getByText("Refresh Token")).toBeInTheDocument();
+    });
+
+    test("an OAuth 2.0 variable with no grant type reads OAuth 2.0 alone", () => {
+      renderPage(pageCase.page);
 
-    expect(description.toLowerCase()).not.toContain("encrypt");
-    expect(description).toContain("[REDACTED]");
-    expect(description.toLowerCase()).toContain("run logs");
+      const cell: ReturnType<typeof render> = render(
+        column("Type").getElement!(
+          oauthVariable({ oauthGrantType: undefined }),
+        ),
+      );
+
+      expect(cell.container.textContent).toBe("OAuth 2.0");
+    });
+
+    test("filters and searches only on what the list shows", () => {
+      renderPage(pageCase.page);
+
+      expect(
+        (table().filters || []).map(
+          (entry: { field?: Record<string, unknown> | undefined }) => {
+            return fieldName(entry);
+          },
+        ),
+      ).toEqual(["name", "description"]);
+      expect(table().searchableFields).toEqual(["name", "description"]);
+    });
   });
 
-  test("warns on the name field that renaming does not rewrite references", () => {
-    renderPage(page);
+  describe("row actions", () => {
+    // Ask 2, stated as a test.
+    test("are a single View button", () => {
+      renderPage(pageCase.page);
+
+      expect(table().isViewable).toBe(true);
+      expect(table().viewButtonText).toBe("View");
+      expect(table().showViewIdButton).toBeFalsy();
+      expect(table().isEditable).toBe(false);
+      expect(table().isDeleteable).toBe(false);
+      expect(table().actionButtons || []).toEqual([]);
+    });
+
+    test("no longer offer Show ID, Update Content, Update Credentials, Edit Details or Delete", () => {
+      renderPage(pageCase.page);
 
-    const description: string = formField("name").description || "";
+      const titles: Array<string> = (table().actionButtons || []).map(
+        (entry: { title: string }) => {
+          return entry.title;
+        },
+      );
 
-    expect(description).toContain(
-      page === "global" ? "global.variables." : "local.variables.",
-    );
-    expect(description.toLowerCase()).toContain("renaming");
-    expect(description.toLowerCase()).toContain("old name");
+      for (const removed of REMOVED_ROW_ACTIONS) {
+        expect(titles).not.toContain(removed);
+      }
+
+      // No Edit button left over under a new name, either.
+      expect(table().editButtonText).toBeUndefined();
+    });
+
+    test("View opens the variable's own page", async () => {
+      renderPage(pageCase.page);
+
+      const route: unknown = await table().onViewPage!(staticVariable());
+
+      expect(String(route)).toBe(pageCase.viewRoute);
+    });
+
+    test("View opens an OAuth 2.0 variable's page the same way", async () => {
+      renderPage(pageCase.page);
+
+      const route: unknown = await table().onViewPage!(oauthVariable());
+
+      expect(String(route)).toBe(pageCase.viewRoute);
+    });
+
+    test("View opens the page of the row it was pressed on", async () => {
+      renderPage(pageCase.page);
+
+      const variable: WorkflowVariable = staticVariable();
+      variable._id = OTHER_VARIABLE_ID.toString();
+
+      const route: unknown = await table().onViewPage!(variable);
+
+      expect(String(route)).toBe(pageCase.otherViewRoute);
+    });
+
+    // A route with ":id" still in it would open a page that cannot load.
+    test("View refuses a row without an id rather than opening a broken page", async () => {
+      renderPage(pageCase.page);
+
+      const variable: WorkflowVariable = new WorkflowVariable();
+      variable.name = "NO_ID";
+
+      await expect(table().onViewPage!(variable)).rejects.toThrow(
+        "This variable has no id",
+      );
+    });
   });
 
-  describe("the Update Content action", () => {
-    test("is offered, and opens a modal that prefills nothing", () => {
-      renderPage(page);
+  describe("the Create form", () => {
+    test("is still offered, on a card named for the page", () => {
+      renderPage(pageCase.page);
 
-      expect(capturedModalProps).toBeNull();
+      expect(table().isCreateable).toBe(true);
+      expect(table().cardProps?.title).toBe(pageCase.cardTitle);
+      expect(table().noItemsMessage).toBe(pageCase.noItemsMessage);
+      expect(table().name).toBe("Workflows");
+      expect(table().showRefreshButton).toBe(true);
+    });
 
-      openUpdateContentModal();
+    test("asks only for a static variable's name, description, content and secret toggle", () => {
+      renderPage(pageCase.page);
 
-      expect(modal().title).toBe("Update Content");
-      expect(modal().formProps.initialValues).toEqual({});
-      expect(Object.keys(modal().formProps.fields[0]?.field || {})).toEqual([
+      expect(formFieldNames()).toEqual([
+        "name",
+        "description",
         "content",
+        "isSecret",
       ]);
-      expect(modal().description).toContain("AirflowToken");
     });
 
-    test("writes only the content column, on the row that was clicked", async () => {
-      renderPage(page);
-      openUpdateContentModal();
+    // Ask 3, stated as a test.
+    test("never asks which kind of variable to create", () => {
+      renderPage(pageCase.page);
 
-      await act(async () => {
-        modal().onSubmit?.({ content: "rotated-token" });
+      expect(formFieldNames()).not.toContain("variableType");
+      expect(table().formSteps || []).toEqual([]);
+
+      for (const entry of table().formFields || []) {
+        expect(entry.fieldType).not.toBe("CardSelect");
+        expect(entry.cardSelectOptions).toBeUndefined();
+        // Nothing on the form hides or shows by a type the form never sets.
+        expect(entry.showIf).toBeUndefined();
+        expect(entry.stepId).toBeUndefined();
+      }
+    });
+
+    test("carries none of the OAuth 2.0 settings", () => {
+      renderPage(pageCase.page);
+
+      for (const name of formFieldNames()) {
+        expect(name.startsWith("oauth")).toBe(false);
+      }
+    });
+
+    test("requires the content, and says it cannot be viewed again", () => {
+      renderPage(pageCase.page);
+
+      expect(formField("content").required).toBe(true);
+      expect(formField("content").fieldType).toBe("LongText");
+      expect(formField("content").doNotShowWhenCreating).toBeFalsy();
+      expect(formField("content").description).toContain(
+        "cannot be viewed once saved",
+      );
+    });
+
+    test("offers the Secret toggle, optional, and describes redaction rather than encryption", () => {
+      renderPage(pageCase.page);
+
+      const secret: FormFieldEntry = formField("isSecret");
+
+      expect(secret.fieldType).toBe("Boolean");
+      expect(secret.required).toBe(false);
+      expect(secret.description).toContain("[REDACTED]");
+      expect(secret.description).toContain("cannot be turned off again");
+      expect(secret.description).not.toMatch(/encrypt/i);
+    });
+
+    test("leaves the description optional", () => {
+      renderPage(pageCase.page);
+
+      expect(formField("description").required).toBe(false);
+      expect(formField("description").fieldType).toBe("LongText");
+    });
+
+    test("validates the name", () => {
+      renderPage(pageCase.page);
+
+      const name: FormFieldEntry = formField("name");
+
+      expect(name.required).toBe(true);
+      expect(name.fieldType).toBe("Text");
+      expect(name.validation).toEqual({
+        minLength: 2,
+        noSpaces: true,
+        noSpecialCharacters: true,
       });
+    });
 
-      expect(updateById).toHaveBeenCalledTimes(1);
+    /*
+     * Nothing links a workflow to the variable row it names, so renaming a
+     * variable silently breaks every workflow using the old name. The form is
+     * the one place that can say so, in the page's own reference syntax.
+     */
+    test("shows the page's reference syntax, and warns that renaming breaks it", () => {
+      renderPage(pageCase.page);
 
-      const call: Record<string, unknown> = updateById.mock
-        .calls[0]?.[0] as Record<string, unknown>;
+      const description: string = formField("name").description || "";
 
-      expect(String(call["id"])).toBe(VARIABLE_ID.toString());
-      expect(call["data"]).toEqual({ content: "rotated-token" });
-      expect(call["modelType"]).toBe(WorkflowVariable);
+      expect(description).toContain(pageCase.reference);
+      expect(description).not.toContain(pageCase.otherReference);
+      expect(description).toContain(
+        "Renaming it does not update workflows that already refer to the old name",
+      );
     });
 
-    test("closes on success", async () => {
-      renderPage(page);
-      openUpdateContentModal();
+    test("stamps Static on what it creates", async () => {
+      renderPage(pageCase.page);
 
-      expect(screen.queryByTestId("update-content-modal")).not.toBeNull();
+      const created: WorkflowVariable = (await table().onBeforeCreate!(
+        new WorkflowVariable(),
+      )) as WorkflowVariable;
 
-      await act(async () => {
-        modal().onSubmit?.({ content: "rotated-token" });
+      expect(created.variableType).toBe(WorkflowVariableType.Static);
+    });
+
+    // The form cannot make anything else, whatever arrives in its values.
+    test("stamps Static even over a type the values claim to be OAuth 2.0", async () => {
+      renderPage(pageCase.page);
+
+      const item: WorkflowVariable = new WorkflowVariable();
+      item.variableType = WorkflowVariableType.OAuth2;
+
+      const created: WorkflowVariable = (await table().onBeforeCreate!(
+        item,
+      )) as WorkflowVariable;
+
+      expect(created.variableType).toBe(WorkflowVariableType.Static);
+    });
+
+    test(
+      pageCase.page === "global"
+        ? "leaves the workflow unset, so the variable is global"
+        : "stamps the workflow, so the variable is local to it",
+      async () => {
+        renderPage(pageCase.page);
+
+        const created: WorkflowVariable = (await table().onBeforeCreate!(
+          new WorkflowVariable(),
+        )) as WorkflowVariable;
+
+        if (pageCase.workflowId) {
+          expect(created.workflowId?.toString()).toBe(
+            pageCase.workflowId.toString(),
+          );
+        } else {
+          expect(created.workflowId).toBeUndefined();
+        }
+      },
+    );
+  });
+
+  describe("what the list reads", () => {
+    test("is scoped to the page's variables in the current project", () => {
+      renderPage(pageCase.page);
+
+      if (pageCase.workflowId) {
+        expect(table().query?.["workflowId"]).toBe(pageCase.workflowId);
+      } else {
+        expect(table().query?.["workflowId"]).toBeInstanceOf(IsNull);
+      }
+
+      expect(table().query?.["projectId"]).toBe(PROJECT_ID);
+    });
+
+    // The Type column needs the type and grant type; nothing else rides along.
+    test("selects the type and the grant type, and nothing more", () => {
+      renderPage(pageCase.page);
+
+      expect(table().selectMoreFields).toEqual({
+        variableType: true,
+        oauthGrantType: true,
       });
+    });
+
+    test("never selects content, a credential or a token", () => {
+      renderPage(pageCase.page);
+
+      const select: Array<string> = Object.keys(table().selectMoreFields || {});
+
+      for (const name of NEVER_SELECTED_FIELDS) {
+        expect(select).not.toContain(name);
 
-      /*
-       * Asked of the DOM rather than of the recorder: the recorder only ever
-       * gains props, so a modal that unmounted still has its last render
-       * sitting in it.
-       */
-      expect(screen.queryByTestId("update-content-modal")).toBeNull();
+        for (const entry of table().columns || []) {
+          expect(fieldName(entry)).not.toBe(name);
+        }
+
+        for (const filter of table().filters || []) {
+          expect(fieldName(filter)).not.toBe(name);
+        }
+
+        expect(table().searchableFields || []).not.toContain(name);
+      }
     });
 
     /*
-     * The neighbouring secret-rotation modals swallow this error, which loses
-     * whatever the user typed and looks exactly like a save that worked. On a
-     * credential that is the difference between a rotation and a silent
-     * non-rotation.
+     * The two lists keep their own saved filters and column preferences, so
+     * the ids must differ.
      */
-    test("stays open and says why when the write fails", async () => {
-      renderPage(page);
-      openUpdateContentModal();
+    test("keeps its table and filter ids apart from the other page's", () => {
+      renderPage(pageCase.page);
+
+      if (pageCase.workflowId) {
+        expect(table().id).toBe("workflow-variables-table");
+        expect(table().saveFilterProps?.tableId).toBe(
+          "workflow-view-variables-table",
+        );
+      } else {
+        expect(table().id).toBe("global-workflow-variables-table");
+        expect(table().saveFilterProps?.tableId).toBe(
+          "workflow-variables-table",
+        );
+      }
+    });
+  });
 
-      updateById.mockRejectedValue(new Error("Not authorized."));
+  describe("the More menu", () => {
+    test("holds exactly one entry: Create OAuth 2.0 Variable", () => {
+      renderPage(pageCase.page);
 
-      await act(async () => {
-        modal().onSubmit?.({ content: "rotated-token" });
-      });
+      expect(
+        moreMenuButtons().map((entry: CardButtonEntry) => {
+          return entry.title;
+        }),
+      ).toEqual([OAUTH_MENU_TITLE]);
+    });
 
-      expect(screen.queryByTestId("update-content-modal")).not.toBeNull();
-      expect(modal().error).toBe("Not authorized.");
+    /*
+     * BaseModelTable puts one button beside the search - the NORMAL button
+     * with the Add icon, or failing that the first NORMAL or PRIMARY one - and
+     * everything else in the More (⋯) menu. An OUTLINE button with its own
+     * icon can never be picked, so this entry stays in the menu even for
+     * somebody the Create button is hidden from.
+     */
+    test("is an outline button, so the table never promotes it beside the search", () => {
+      renderPage(pageCase.page);
+
+      const button: CardButtonEntry = oauthMenuButton();
+
+      expect(button.buttonStyle).toBe(ButtonStyleType.OUTLINE);
+      expect(button.buttonStyle).not.toBe(ButtonStyleType.NORMAL);
+      expect(button.buttonStyle).not.toBe(ButtonStyleType.PRIMARY);
+      expect(button.icon).toBe(IconProp.Key);
+      expect(button.icon).not.toBe(IconProp.Add);
+    });
+
+    test("the card tells people where to find it", () => {
+      renderPage(pageCase.page);
+
+      expect(table().cardProps?.description).toContain("More menu");
+      expect(table().cardProps?.description).toContain("OAuth 2.0");
+    });
+
+    test("is enabled for a project admin, and says what an OAuth variable is", () => {
+      permissionsForTest = [Permission.ProjectAdmin];
+
+      renderPage(pageCase.page);
+
+      expect(oauthMenuButton().disabled).toBe(false);
+      expect(oauthMenuButton().tooltip).toContain("access token");
+    });
+
+    // The gate follows the model's create list, not just the admin roles.
+    test("is enabled for somebody who may only create workflow variables", () => {
+      permissionsForTest = [Permission.CreateWorkflowVariable];
+
+      renderPage(pageCase.page);
+
+      expect(oauthMenuButton().disabled).toBe(false);
+    });
+
+    test("is enabled for a master admin, even before the permission snapshot arrives", () => {
+      permissionsForTest = [];
+      isMasterAdminForTest = true;
+
+      renderPage(pageCase.page);
+
+      expect(oauthMenuButton().disabled).toBe(false);
     });
 
     /*
-     * BasicFormModal unmounts its form while it is loading, so the form that
-     * comes back after a failure is a fresh one. Without the draft it comes back
-     * empty - and the person who has just pasted a long token has to go and find
-     * it again, which is exactly the friction this whole change is about.
+     * Locked, with the reason, rather than a form that 403s after somebody
+     * has pasted a client secret into it.
      */
-    test("keeps what the user typed when the write fails", async () => {
-      renderPage(page);
-      openUpdateContentModal();
+    test("is locked for a viewer, with a tooltip naming the missing permission", () => {
+      permissionsForTest = [Permission.Viewer];
 
-      expect(modal().formProps.initialValues).toEqual({});
+      renderPage(pageCase.page);
 
-      updateById.mockRejectedValue(new Error("Not authorized."));
+      const button: CardButtonEntry = oauthMenuButton();
 
-      await act(async () => {
-        modal().onSubmit?.({ content: "rotated-token" });
-      });
+      expect(button.disabled).toBe(true);
+      expect(button.tooltip).toContain(
+        "You do not have permission to create this Workflow Variable",
+      );
+      expect(button.tooltip).toContain("Create Workflow Variables");
+    });
 
-      expect(modal().formProps.initialValues).toEqual({
-        content: "rotated-token",
+    test("does nothing when pressed while locked", () => {
+      permissionsForTest = [Permission.Viewer];
+
+      renderPage(pageCase.page);
+
+      act(() => {
+        oauthMenuButton().onClick();
       });
+
+      expect(isOAuthFormOpen()).toBe(false);
+      expect(capturedOAuthModalProps).toBeNull();
     });
 
-    test("does not carry the draft into the next variable", async () => {
-      renderPage(page);
-      openUpdateContentModal();
+    /*
+     * An empty snapshot is "not loaded yet", not "not allowed": a disabled
+     * button there would blame somebody who may well hold the permission.
+     */
+    test("is hidden, not locked, while the permission snapshot is still empty", () => {
+      permissionsForTest = [];
 
-      updateById.mockRejectedValue(new Error("Not authorized."));
+      renderPage(pageCase.page);
 
-      await act(async () => {
-        modal().onSubmit?.({ content: "rotated-token" });
-      });
+      expect(moreMenuButtons()).toEqual([]);
+    });
 
-      expect(modal().formProps.initialValues).toEqual({
-        content: "rotated-token",
-      });
+    /*
+     * The snapshot rides in on an API response header. Without a re-render
+     * after the first fetch, the entry would stay hidden for the life of the
+     * page after a fresh sign-in.
+     */
+    test("appears once the list's first fetch brings the permission snapshot in", () => {
+      permissionsForTest = [];
+
+      renderPage(pageCase.page);
+
+      expect(moreMenuButtons()).toEqual([]);
+
+      permissionsForTest = [Permission.ProjectAdmin];
 
       act(() => {
-        modal().onClose?.();
+        table().onFetchSuccess!([], 0);
       });
 
-      openUpdateContentModal();
+      expect(oauthMenuButton().disabled).toBe(false);
+    });
+
+    test("opens the OAuth 2.0 create form for this page's variables", () => {
+      renderPage(pageCase.page);
 
-      expect(modal().formProps.initialValues).toEqual({});
+      expect(isOAuthFormOpen()).toBe(false);
+
+      openOAuthForm();
+
+      expect(isOAuthFormOpen()).toBe(true);
+
+      if (pageCase.workflowId) {
+        expect(oauthForm().workflowId).toBe(pageCase.workflowId);
+      } else {
+        expect(oauthForm().workflowId).toBeUndefined();
+      }
     });
 
-    test("does not keep the draft after a write that worked", async () => {
-      renderPage(page);
-      openUpdateContentModal();
+    test("closing the form without creating hides it and fetches no token", () => {
+      renderPage(pageCase.page);
 
-      await act(async () => {
-        modal().onSubmit?.({ content: "rotated-token" });
+      openOAuthForm();
+
+      act(() => {
+        oauthForm().onClose();
+      });
+
+      expect(isOAuthFormOpen()).toBe(false);
+      expect(isRefreshModalOpen()).toBe(false);
+      expect(apiPost).not.toHaveBeenCalled();
+    });
+
+    test("can be opened again after it was closed", () => {
+      renderPage(pageCase.page);
+
+      openOAuthForm();
+
+      act(() => {
+        oauthForm().onClose();
       });
 
-      openUpdateContentModal();
+      openOAuthForm();
 
-      expect(modal().formProps.initialValues).toEqual({});
+      expect(isOAuthFormOpen()).toBe(true);
     });
+  });
 
+  describe("after an OAuth 2.0 variable is created", () => {
     /*
-     * makeVariable defaulted to one id, so "the row that was clicked" could not
-     * be told apart from "whichever row was opened first" - which is the exact
-     * class of stale-selection bug this change fixes in BaseModelTable. Rotating
-     * a credential onto the wrong variable would be invisible: content is never
-     * read back, so it would surface only as a workflow authenticating with the
-     * wrong token.
+     * A token request can take up to 20 seconds. The modal opens as soon as
+     * it goes out, so something on screen says it is happening.
      */
-    test("writes the second variable when the second one was clicked", async () => {
-      renderPage(page);
+    test("closes the form and shows a pending token modal while the provider is asked", async () => {
+      const response: Deferred<unknown> = createDeferred<unknown>();
+      apiPost.mockReturnValue(response.promise);
 
-      openUpdateContentModal(makeVariable(VARIABLE_ID, "First"));
+      renderPage(pageCase.page);
+      openOAuthForm();
 
       act(() => {
-        modal().onClose?.();
+        oauthForm().onSuccess(oauthVariable());
       });
 
-      openUpdateContentModal(makeVariable(OTHER_VARIABLE_ID, "Second"));
-
-      expect(modal().description).toContain("Second");
+      expect(isOAuthFormOpen()).toBe(false);
+      expect(refreshModal().outcome).toBeNull();
+      expect(refreshModal().variableName).toBe("API_TOKEN");
+      expect(apiPost).toHaveBeenCalledTimes(1);
 
       await act(async () => {
-        modal().onSubmit?.({ content: "second-token" });
+        response.resolve({
+          data: { oauthAccessTokenExpiresAt: EXPIRES_AT_ISO },
+        });
+        await response.promise;
+      });
+
+      await waitFor(() => {
+        expect(refreshModal().outcome).not.toBeNull();
       });
+    });
+
+    test("asks for the new variable's first token through the refresh route, with the tenant header", async () => {
+      renderPage(pageCase.page);
+
+      await createOAuthVariable(oauthVariable());
+
+      expect(apiPost).toHaveBeenCalledTimes(1);
+      expect(refreshCall().url).toContain(
+        `/workflow-variable/${VARIABLE_ID.toString()}/refresh-oauth-token`,
+      );
+      expect(refreshCall().headers).toEqual({ tenantid: "project-header" });
+      expect(refreshCall().data).toEqual({});
+    });
+
+    test("shows when the new token expires once the provider answers", async () => {
+      renderPage(pageCase.page);
+
+      await createOAuthVariable(oauthVariable());
+
+      const outcome: TokenRefreshOutcome = refreshModal().outcome!;
 
-      const call: Record<string, unknown> = updateById.mock
-        .calls[0]?.[0] as Record<string, unknown>;
+      expect(outcome.variableName).toBe("API_TOKEN");
+      expect(outcome.error).toBeUndefined();
+      expect(outcome.savedWhat).toBeUndefined();
+      expect(outcome.expiresAt).toEqual(new Date(EXPIRES_AT_ISO));
 
-      expect(String(call["id"])).toBe(OTHER_VARIABLE_ID.toString());
+      // Pending first, then the answer - never the answer out of nowhere.
+      expect(refreshModalOutcomes[0]).toBeNull();
+      expect(refreshModalOutcomes[refreshModalOutcomes.length - 1]).toBe(
+        outcome,
+      );
+    });
+
+    test("says so when the provider does not say when the token expires", async () => {
+      apiPost.mockResolvedValue({ data: {} });
+
+      renderPage(pageCase.page);
+
+      await createOAuthVariable(oauthVariable());
+
+      expect(refreshModal().outcome!.error).toBeUndefined();
+      expect(refreshModal().outcome!.expiresAt).toBeNull();
     });
 
     /*
-     * BasicFormModal unmounts its form while isLoading is true. A flag left
-     * stuck on turns the error state into a modal with a message, no field to
-     * retry in, and nothing the user typed - reachable only by reloading.
+     * A mistyped secret or token URL shows up while the person who typed it
+     * is still looking, in the provider's own words.
      */
-    test("stops loading whether the write succeeds or fails", async () => {
-      renderPage(page);
-      openUpdateContentModal();
+    test("shows the provider's refusal", async () => {
+      apiPost.mockResolvedValue(
+        new HTTPErrorResponse(
+          400,
+          {
+            message:
+              "invalid_client: AADSTS7000215: Invalid client secret provided.",
+          },
+          {},
+        ),
+      );
 
-      updateById.mockRejectedValue(new Error("Not authorized."));
+      renderPage(pageCase.page);
 
-      await act(async () => {
-        modal().onSubmit?.({ content: "rotated-token" });
-      });
+      await createOAuthVariable(oauthVariable());
 
-      expect(modal().isLoading).toBe(false);
+      const outcome: TokenRefreshOutcome = refreshModal().outcome!;
 
-      updateById.mockResolvedValue(undefined);
+      expect(outcome.variableName).toBe("API_TOKEN");
+      expect(outcome.error).toBe(
+        "invalid_client: AADSTS7000215: Invalid client secret provided.",
+      );
+      expect(outcome.expiresAt).toBeUndefined();
+    });
 
-      await act(async () => {
-        modal().onSubmit?.({ content: "rotated-token" });
-      });
+    test("shows a request that never reached the provider", async () => {
+      apiPost.mockRejectedValue(new Error("Network Error"));
 
-      expect(screen.queryByTestId("update-content-modal")).toBeNull();
+      renderPage(pageCase.page);
+
+      await createOAuthVariable(oauthVariable());
+
+      expect(refreshModal().outcome!.error).toBe("Network Error");
+    });
+
+    test("does not call the refresh route for a variable that came back without an id", async () => {
+      renderPage(pageCase.page);
+
+      const variable: WorkflowVariable = oauthVariable({ _id: undefined });
+
+      await createOAuthVariable(variable);
+
+      expect(apiPost).not.toHaveBeenCalled();
+      expect(refreshModal().outcome!.error).toContain(
+        "This variable has no id",
+      );
+    });
+
+    test("calls a variable without a name 'this variable'", async () => {
+      renderPage(pageCase.page);
+
+      const variable: WorkflowVariable = oauthVariable({ name: undefined });
+
+      await createOAuthVariable(variable);
+
+      expect(refreshModal().variableName).toBe("this variable");
+      expect(refreshModal().outcome!.variableName).toBe("this variable");
     });
 
     /*
-     * The guard that replaced a bare non-null assertion on the id. It must fail
-     * loudly and leave the modal usable rather than firing a request at an
-     * undefined id.
+     * Once when the row is added, so it shows at once, and again once the
+     * refresh has written the expiry or the failure to it.
      */
-    test("refuses to write a variable that has no id", async () => {
-      renderPage(page);
-      openUpdateContentModal(makeVariable(null));
+    test("refreshes the list when the variable is created, and again once the outcome is in", async () => {
+      const response: Deferred<unknown> = createDeferred<unknown>();
+      apiPost.mockReturnValue(response.promise);
+
+      renderPage(pageCase.page);
+
+      const initialToggle: string | undefined = table().refreshToggle;
+      expect(initialToggle).toBeTruthy();
+
+      openOAuthForm();
+
+      act(() => {
+        oauthForm().onSuccess(oauthVariable());
+      });
+
+      const afterCreateToggle: string | undefined = table().refreshToggle;
+      expect(afterCreateToggle).not.toBe(initialToggle);
 
       await act(async () => {
-        modal().onSubmit?.({ content: "rotated-token" });
+        response.resolve({
+          data: { oauthAccessTokenExpiresAt: EXPIRES_AT_ISO },
+        });
+        await response.promise;
       });
 
-      expect(updateById).not.toHaveBeenCalled();
-      expect(screen.queryByTestId("update-content-modal")).not.toBeNull();
-      expect(modal().error).toContain("no id");
-      expect(modal().isLoading).toBe(false);
+      await waitFor(() => {
+        expect(table().refreshToggle).not.toBe(afterCreateToggle);
+      });
+
+      expect(table().refreshToggle).not.toBe(initialToggle);
     });
 
-    test("clears the error when reopened", async () => {
-      renderPage(page);
-      openUpdateContentModal();
+    test("closing the outcome modal removes it", async () => {
+      renderPage(pageCase.page);
 
-      updateById.mockRejectedValue(new Error("Not authorized."));
+      await createOAuthVariable(oauthVariable());
 
-      await act(async () => {
-        modal().onSubmit?.({ content: "rotated-token" });
+      expect(isRefreshModalOpen()).toBe(true);
+
+      act(() => {
+        refreshModal().onClose();
       });
 
-      expect(modal().error).toBe("Not authorized.");
+      expect(isRefreshModalOpen()).toBe(false);
+      expect(isOAuthFormOpen()).toBe(false);
+    });
+
+    test("closing the outcome modal after a failure removes it too", async () => {
+      apiPost.mockRejectedValue(new Error("Network Error"));
+
+      renderPage(pageCase.page);
+
+      await createOAuthVariable(oauthVariable());
 
       act(() => {
-        modal().onClose?.();
+        refreshModal().onClose();
       });
 
-      openUpdateContentModal();
+      expect(isRefreshModalOpen()).toBe(false);
+    });
+
+    // Only the OAuth form's success fetches a token; the Create form never does.
+    test("a static variable created from the Create form fetches no token", async () => {
+      renderPage(pageCase.page);
+
+      await act(async () => {
+        await table().onBeforeCreate!(new WorkflowVariable());
+      });
 
-      expect(modal().error).toBeUndefined();
+      expect(apiPost).not.toHaveBeenCalled();
+      expect(isRefreshModalOpen()).toBe(false);
     });
   });
 
-  describe("who may use it", () => {
-    /*
-     * The action writes through ModelAPI directly, which ModelTable's own edit
-     * gating never sees - so without its own gate a member without update
-     * permission would get a modal that 403s after they had pasted a token
-     * into it.
-     */
-    test("is locked, with the missing permission named, for a viewer", () => {
-      permissionsForTest = [Permission.Viewer];
+  /*
+   * Creating a variable and refreshing its token are different permissions.
+   * Somebody who may create but not update would only get OneUptime's own
+   * refusal back from the refresh route - shown as if their provider had said
+   * no - so the page does not ask for them.
+   */
+  describe("whose new OAuth 2.0 variable gets its first token fetched", () => {
+    test.each(CREATE_ONLY_ROLES)(
+      "not somebody who may only create variables ($label): the form closes and the list refreshes, with no token request and no token modal",
+      async (role: RoleCase) => {
+        permissionsForTest = role.permissions;
 
-      renderPage(page);
+        renderPage(pageCase.page);
 
-      expect(updateContentButton().disabled).toBe(true);
-      expect(updateContentButton().tooltip).toContain(
-        "You do not have permission to update",
-      );
-      expect(updateContentButton().isVisible?.(makeVariable())).toBe(true);
+        const initialToggle: string | undefined = table().refreshToggle;
+
+        // They may create, so the menu entry does open the form.
+        expect(oauthMenuButton().disabled).toBe(false);
+
+        openOAuthForm();
+
+        expect(isOAuthFormOpen()).toBe(true);
+
+        await saveOAuthVariable(oauthVariable());
+
+        expect(isOAuthFormOpen()).toBe(false);
+
+        // The new row still shows up at once.
+        expect(table().refreshToggle).not.toBe(initialToggle);
+
+        expect(apiPost).not.toHaveBeenCalled();
+        expect(isRefreshModalOpen()).toBe(false);
+        expect(capturedRefreshModalProps).toBeNull();
+        expect(refreshModalOutcomes).toEqual([]);
+      },
+    );
+
+    // With no token request there is nothing to wait for, so no second bump.
+    test("refreshes the list once, and only once, for somebody who may only create", async () => {
+      permissionsForTest = [
+        Permission.CreateWorkflowVariable,
+        Permission.ReadWorkflowVariable,
+      ];
+
+      renderPage(pageCase.page);
+
+      const initialToggle: string | undefined = table().refreshToggle;
+
+      openOAuthForm();
+
+      await saveOAuthVariable(oauthVariable());
+
+      const afterCreateToggle: string | undefined = table().refreshToggle;
+
+      expect(afterCreateToggle).not.toBe(initialToggle);
+
+      await act(async () => {
+        await Promise.resolve();
+      });
+
+      expect(table().refreshToggle).toBe(afterCreateToggle);
     });
 
-    test("is enabled for a key holding EditWorkflowVariable", () => {
-      permissionsForTest = [Permission.EditWorkflowVariable];
+    test("can open the form again afterwards, still without a token modal in the way", async () => {
+      permissionsForTest = [
+        Permission.CreateWorkflowVariable,
+        Permission.ReadWorkflowVariable,
+      ];
 
-      renderPage(page);
+      renderPage(pageCase.page);
 
-      expect(updateContentButton().disabled).toBe(false);
+      openOAuthForm();
+
+      await saveOAuthVariable(oauthVariable());
+
+      openOAuthForm();
+
+      expect(isOAuthFormOpen()).toBe(true);
+      expect(isRefreshModalOpen()).toBe(false);
     });
 
+    test.each(CREATE_AND_UPDATE_ROLES)(
+      "somebody who may also update variables ($label): asks for the token and shows the outcome",
+      async (role: RoleCase) => {
+        permissionsForTest = role.permissions;
+
+        renderPage(pageCase.page);
+
+        await createOAuthVariable(oauthVariable());
+
+        expect(isOAuthFormOpen()).toBe(false);
+        expect(apiPost).toHaveBeenCalledTimes(1);
+        expect(refreshCall().url).toContain(
+          `/workflow-variable/${VARIABLE_ID.toString()}/refresh-oauth-token`,
+        );
+
+        expect(refreshModal().variableName).toBe("API_TOKEN");
+        expect(refreshModal().outcome!.error).toBeUndefined();
+        expect(refreshModal().outcome!.expiresAt).toEqual(
+          new Date(EXPIRES_AT_ISO),
+        );
+        expect(refreshModalOutcomes[0]).toBeNull();
+      },
+    );
+
     /*
-     * The permission snapshot rides in on a response header, so it is empty for
-     * the first paint after a login or a project switch. PermissionGate reports
-     * that as "not allowed, no reason" precisely so callers hide the affordance
-     * rather than accuse somebody who may well hold the permission.
+     * PermissionGate lets a master admin do everything before it even looks
+     * at the snapshot, so an empty one does not stop the fetch.
      */
-    test("is hidden entirely while the permission snapshot is still empty", () => {
+    test("a master admin, even before the permission snapshot arrives", async () => {
       permissionsForTest = [];
+      isMasterAdminForTest = true;
 
-      renderPage(page);
+      renderPage(pageCase.page);
 
-      expect(updateContentButton().isVisible?.(makeVariable())).toBe(false);
+      await createOAuthVariable(oauthVariable());
+
+      expect(apiPost).toHaveBeenCalledTimes(1);
+      expect(refreshCall().url).toContain(
+        `/workflow-variable/${VARIABLE_ID.toString()}/refresh-oauth-token`,
+      );
+      expect(refreshModal().outcome!.expiresAt).toEqual(
+        new Date(EXPIRES_AT_ISO),
+      );
     });
-  });
-});
 
-describe("the two tables are scoped to different variables", () => {
-  test("the global table asks for the rows with no workflow", () => {
-    renderPage("global");
+    test("a master admin whose project role may only create", async () => {
+      permissionsForTest = [Permission.CreateWorkflowVariable];
+      isMasterAdminForTest = true;
 
-    expect(table().query?.["workflowId"]).toBeInstanceOf(IsNull);
-    expect(String(table().query?.["projectId"])).toBe(PROJECT_ID.toString());
-    expect(table().cardProps?.title).toBe("Global Variables");
-  });
+      renderPage(pageCase.page);
 
-  test("the workflow table asks for that workflow's rows", () => {
-    renderPage("local");
+      await createOAuthVariable(oauthVariable());
 
-    expect(String(table().query?.["workflowId"])).toBe(WORKFLOW_ID.toString());
-    expect(String(table().query?.["projectId"])).toBe(PROJECT_ID.toString());
-    expect(table().cardProps?.title).toBe("Workflow Variables");
-  });
+      expect(apiPost).toHaveBeenCalledTimes(1);
+      expect(isRefreshModalOpen()).toBe(true);
+    });
 
-  /*
-   * The stamp that makes a new row local rather than global. Getting it wrong
-   * in the other direction is worse: a global variable created with a
-   * workflowId disappears from the page that created it.
-   */
-  test("a variable created on the workflow page is stamped with the workflow", async () => {
-    renderPage("local");
+    // The gate is read when the variable is saved, not when the form opened.
+    test("not somebody whose role lost update while the form was open", async () => {
+      permissionsForTest = [Permission.ProjectAdmin];
 
-    const created: WorkflowVariable = (await table().onBeforeCreate?.(
-      new WorkflowVariable(),
-    )) as WorkflowVariable;
+      renderPage(pageCase.page);
 
-    expect(created.workflowId?.toString()).toBe(WORKFLOW_ID.toString());
-  });
+      openOAuthForm();
 
-  test("a variable created on the global page is left unstamped", async () => {
-    renderPage("global");
+      permissionsForTest = [
+        Permission.CreateWorkflowVariable,
+        Permission.ReadWorkflowVariable,
+      ];
 
-    const created: WorkflowVariable = (await table().onBeforeCreate?.(
-      new WorkflowVariable(),
-    )) as WorkflowVariable;
+      await saveOAuthVariable(oauthVariable());
 
-    expect(created.workflowId).toBeUndefined();
-  });
-});
+      expect(isOAuthFormOpen()).toBe(false);
+      expect(apiPost).not.toHaveBeenCalled();
+      expect(isRefreshModalOpen()).toBe(false);
+    });
 
-describe("the content column never travels back to the browser", () => {
-  /*
-   * The read-back inventory. `content` is write-only by design, so every list
-   * the table builds a select from has to stay clear of it - the columns, the
-   * filters and the search fields alike - and the Update Content modal must
-   * never fetch. If any of these ever names content, the list request stops
-   * failing loudly and starts succeeding with the secret in the response.
-   */
-  test.each(PAGES)("%s", (page: Page) => {
-    renderPage(page);
+    test("somebody whose role gained update while the form was open", async () => {
+      permissionsForTest = [
+        Permission.CreateWorkflowVariable,
+        Permission.ReadWorkflowVariable,
+      ];
+
+      renderPage(pageCase.page);
 
-    for (const column of table().columns || []) {
-      expect(Object.keys(column.field || {})).not.toContain("content");
-    }
+      openOAuthForm();
+
+      permissionsForTest = [
+        Permission.CreateWorkflowVariable,
+        Permission.EditWorkflowVariable,
+      ];
+
+      await saveOAuthVariable(oauthVariable());
+
+      await waitFor(() => {
+        expect(refreshModal().outcome).toBeTruthy();
+      });
+
+      expect(apiPost).toHaveBeenCalledTimes(1);
+    });
 
     /*
-     * A filter on content would fail the list request the same way a column
-     * would; selectMoreFields is injected straight into the select, so that one
-     * would succeed and ship every variable's value to the browser.
+     * An empty snapshot (not a master admin) is PermissionGate's "not loaded
+     * yet": it does not allow, so the page does not ask. The variable still
+     * gets its first token the first time a workflow uses it.
      */
-    for (const filter of table().filters || []) {
-      expect(Object.keys(filter.field || {})).not.toContain("content");
-    }
+    test("not while the permission snapshot is empty at the moment of saving", async () => {
+      permissionsForTest = [Permission.ProjectAdmin];
 
-    expect(Object.keys(table().selectMoreFields || {})).not.toContain(
-      "content",
-    );
-    expect(table().searchableFields || []).not.toContain("content");
+      renderPage(pageCase.page);
+
+      openOAuthForm();
+
+      permissionsForTest = [];
+
+      await saveOAuthVariable(oauthVariable());
 
-    openUpdateContentModal();
-    expect(modal().formProps.initialValues).toEqual({});
+      expect(isOAuthFormOpen()).toBe(false);
+      expect(apiPost).not.toHaveBeenCalled();
+      expect(isRefreshModalOpen()).toBe(false);
+    });
   });
 });