Consolidate Vue components

Author: alexiri

astra_app/core/templates/core/account_invitations_vue.html

@@ -37,7 +37,7 @@ <h1 class="m-0">Account Invitations</h1>
     data-account-invitations-bulk-api-url="{% url 'api-account-invitations-bulk' %}"
     data-account-invitations-list-page-url="{% url 'account-invitations' %}"
     data-account-invitations-upload-page-url="{% url 'account-invitations-upload' %}"
-    data-account-invitations-page-size="50"
+    data-account-invitations-page-size="25"
     data-account-invitations-can-manage="{% if can_manage_invitations %}true{% else %}false{% endif %}"
     data-account-invitations-can-refresh="{% if can_manage_invitations %}true{% else %}false{% endif %}"
     data-account-invitations-can-resend="{% if can_manage_invitations %}true{% else %}false{% endif %}"

astra_app/core/templates/core/membership_requests.html

@@ -21,6 +21,8 @@ <h1 class="m-0">Membership Requests</h1>
     data-membership-requests-clear-filter-url="{{ clear_filter_url }}"
     data-membership-requests-pending-api-url="{% url 'api-membership-requests-pending' %}"
     data-membership-requests-on-hold-api-url="{% url 'api-membership-requests-on-hold' %}"
+    data-membership-requests-pending-page-size="25"
+    data-membership-requests-on-hold-page-size="10"
     data-membership-requests-bulk-url="{{ membership_requests_bulk_url }}"
     data-membership-request-id-sentinel="{{ membership_request_id_sentinel }}"
     data-membership-request-detail-template="{{ membership_request_detail_template }}"

frontend/src/account-invitations/AccountInvitationsPage.vue

@@ -9,7 +9,7 @@
       :total-pages="acceptedTable.totalPages.value"
       :is-loading="acceptedTable.isLoading.value"
       :error="acceptedTable.error.value"
-      title="Accepted Invitations"
+      :build-page-href="acceptedPageHref"
       scope="accepted"
       @page-change="onAcceptedPageChange"
       @bulk-success="onBulkSuccess('accepted')"
@@ -27,7 +27,7 @@
       :total-pages="pendingTable.totalPages.value"
       :is-loading="pendingTable.isLoading.value"
       :error="pendingTable.error.value"
-      title="Pending Invitations"
+      :build-page-href="pendingPageHref"
       scope="pending"
       @page-change="onPendingPageChange"
       @bulk-success="onBulkSuccess('pending')"
@@ -67,13 +67,22 @@ const isRefreshing = ref(false);
 const showPending = computed(() => props.bootstrap.canManageInvitations);
 const showAccepted = computed(() => props.bootstrap.canManageInvitations);
 
+/**
+ * Read pagination page parameter from URL.
+ */
+function readPageParam(name: string): number {
+  const params = new URLSearchParams(window.location.search);
+  const rawValue = Number.parseInt(params.get(name) || "1", 10);
+  return Number.isNaN(rawValue) || rawValue < 1 ? 1 : rawValue;
+}
+
 /**
  * Load both tables on mount.
  */
 onMounted(async () => {
   await Promise.all([
-    pendingTable.load(1),
-    acceptedTable.load(1),
+    pendingTable.load(readPageParam("pending_page")),
+    acceptedTable.load(readPageParam("accepted_page")),
   ]);
 });
 
@@ -93,6 +102,34 @@ async function onAcceptedPageChange(page: number): Promise<void> {
   syncUrl();
 }
 
+/**
+ * Build pagination URL for pending invitations.
+ */
+function pendingPageHref(pageNumber: number): string {
+  const params = new URLSearchParams(window.location.search);
+  if (pageNumber <= 1) {
+    params.delete("pending_page");
+  } else {
+    params.set("pending_page", String(pageNumber));
+  }
+  const query = params.toString();
+  return `${window.location.pathname}${query ? `?${query}` : ""}`;
+}
+
+/**
+ * Build pagination URL for accepted invitations.
+ */
+function acceptedPageHref(pageNumber: number): string {
+  const params = new URLSearchParams(window.location.search);
+  if (pageNumber <= 1) {
+    params.delete("accepted_page");
+  } else {
+    params.set("accepted_page", String(pageNumber));
+  }
+  const query = params.toString();
+  return `${window.location.pathname}${query ? `?${query}` : ""}`;
+}
+
 /**
  * Handle refresh button click.
  */

frontend/src/account-invitations/__tests__/invitationsTable.test.ts

@@ -0,0 +1,86 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it, vi } from "vitest";
+
+import InvitationsTable from "../components/InvitationsTable.vue";
+import type { AccountInvitationRow, AccountInvitationsBootstrap } from "../types";
+
+const bootstrap: AccountInvitationsBootstrap = {
+  pendingApiUrl: "/api/v1/account/invitations/pending",
+  acceptedApiUrl: "/api/v1/account/invitations/accepted",
+  refreshApiUrl: "/api/v1/account/invitations/refresh",
+  resendApiUrl: "/api/v1/account/invitations/123456789/resend",
+  dismissApiUrl: "/api/v1/account/invitations/123456789/dismiss",
+  bulkApiUrl: "/api/v1/account/invitations/bulk",
+  listPageUrl: "/account/invitations/",
+  pageSize: 50,
+  canManageInvitations: true,
+  canRefresh: true,
+  canResend: true,
+  canDismiss: true,
+  canBulkAction: true,
+  sentinelToken: "123456789",
+  csrfToken: "csrf-token",
+};
+
+const row: AccountInvitationRow = {
+  invitation_id: 10,
+  email: "alice@example.com",
+  full_name: "Alice",
+  note: "",
+  invited_by_username: "bob",
+  invited_at: "2026-04-20T10:00:00",
+  send_count: 1,
+  last_sent_at: "2026-04-20T10:00:00",
+  status: "pending",
+  organization_id: 33,
+  organization_name: "Example Org",
+};
+
+describe("InvitationsTable", () => {
+  it("renders pending invitations with tbody-based loading/error states", async () => {
+    const wrapper = mount(InvitationsTable, {
+      props: {
+        bootstrap,
+        rows: [],
+        count: 0,
+        currentPage: 1,
+        totalPages: 1,
+        isLoading: true,
+        error: null,
+        scope: "pending",
+        buildPageHref: (page: number) => `?page=${page}`,
+      },
+    });
+
+    expect(wrapper.find("tbody td").text()).toContain("Loading pending invitations...");
+
+    await wrapper.setProps({ isLoading: false, error: "Failed to load invitations." });
+    expect(wrapper.find("tbody td").text()).toContain("Failed to load invitations.");
+    expect(wrapper.find(".alert.alert-danger").exists()).toBe(false);
+  });
+
+  it("uses inline errors instead of alert dialogs for bulk-action validation", async () => {
+    const alertSpy = vi.spyOn(window, "alert").mockImplementation(() => undefined);
+
+    const wrapper = mount(InvitationsTable, {
+      props: {
+        bootstrap,
+        rows: [row],
+        count: 1,
+        currentPage: 1,
+        totalPages: 1,
+        isLoading: false,
+        error: null,
+        scope: "pending",
+        buildPageHref: (page: number) => `?page=${page}`,
+      },
+    });
+
+    await wrapper.find("form").trigger("submit");
+
+    expect(alertSpy).not.toHaveBeenCalled();
+    expect(wrapper.text()).toContain("Please select an action and at least one invitation.");
+
+    alertSpy.mockRestore();
+  });
+});