web: make table pagination size user-configurable

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/common/config.ts

@@ -26,6 +26,9 @@ export interface UIConfig {
         background: string;
         cardBackground: string;
     };
+    pagination: {
+        perPage: number;
+    };
 }
 
 export class DefaultUIConfig implements UIConfig {
@@ -43,20 +46,26 @@ export class DefaultUIConfig implements UIConfig {
         background: "",
         cardBackground: "",
     };
+    pagination = {
+        perPage: 20,
+    };
 }
 
-export function parseConfig(raw: string): UIConfig {
+let globalUiConfig: Promise<UIConfig>;
-    const c = JSON.parse(raw);
-    return Object.assign(new DefaultUIConfig(), c);
-}
 
 export function uiConfig(): Promise<UIConfig> {
-    return me().then((user) => {
+    if (!globalUiConfig) {
+        globalUiConfig = me().then((user) => {
             const settings = user.user.settings;
             let config = new DefaultUIConfig();
+            if (!settings) {
+                return config;
+            }
             if ("userInterface" in settings) {
-            config = parseConfig(settings.userInterface);
+                config = Object.assign(new DefaultUIConfig(), settings.userInterface);
             }
             return config;
         });
+    }
+    return globalUiConfig;
 }

web/src/constants.ts

@@ -4,7 +4,6 @@ export const ERROR_CLASS = "pf-m-danger";
 export const PROGRESS_CLASS = "pf-m-in-progress";
 export const CURRENT_CLASS = "pf-m-current";
 export const VERSION = "2021.9.8";
-export const PAGE_SIZE = 20;
 export const TITLE_DEFAULT = "authentik";
 export const ROUTE_SEPARATOR = ";";
 

web/src/elements/events/ObjectChangelog.ts

@@ -8,7 +8,7 @@ import { Event, EventsApi } from "@goauthentik/api";
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { EventWithContext } from "../../api/Events";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../pages/events/EventInfo";
 import "../Tabs";
 import "../buttons/Dropdown";
@@ -32,12 +32,12 @@ export class ObjectChangelog extends Table<Event> {
     @property()
     targetModelName!: string;
 
-    apiEndpoint(page: number): Promise<AKResponse<Event>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Event>> {
         return new EventsApi(DEFAULT_CONFIG).eventsEventsList({
             action: "model_",
             page: page,
             ordering: this.order,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             contextModelApp: this.targetModelApp,
             contextModelName: this.targetModelName,
             contextModelPk: this.targetModelPk.toString(),

web/src/elements/events/UserEvents.ts

@@ -8,7 +8,7 @@ import { Event, EventsApi } from "@goauthentik/api";
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { EventWithContext } from "../../api/Events";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../pages/events/EventInfo";
 import "../Tabs";
 import "../buttons/Dropdown";
@@ -26,11 +26,11 @@ export class ObjectChangelog extends Table<Event> {
     @property()
     targetUser!: string;
 
-    apiEndpoint(page: number): Promise<AKResponse<Event>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Event>> {
         return new EventsApi(DEFAULT_CONFIG).eventsEventsList({
             page: page,
             ordering: this.order,
-            pageSize: PAGE_SIZE / 2,
+            pageSize: (await uiConfig()).pagination.perPage / 2,
             username: this.targetUser,
         });
     }

web/src/elements/forms/DeleteBulkForm.ts

@@ -38,7 +38,7 @@ export class DeleteObjectsTable<T> extends Table<T> {
     }
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    apiEndpoint(page: number): Promise<AKResponse<T>> {
+    async apiEndpoint(page: number): Promise<AKResponse<T>> {
         return Promise.resolve({
             pagination: {
                 count: this.objects.length,

web/src/elements/oauth/UserCodeList.ts

@@ -7,7 +7,7 @@ import { ExpiringBaseGrantModel, Oauth2Api } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../forms/DeleteBulkForm";
 import { Table, TableColumn } from "../table/Table";
 
@@ -16,12 +16,12 @@ export class UserOAuthCodeList extends Table<ExpiringBaseGrantModel> {
     @property({ type: Number })
     userId?: number;
 
-    apiEndpoint(page: number): Promise<AKResponse<ExpiringBaseGrantModel>> {
+    async apiEndpoint(page: number): Promise<AKResponse<ExpiringBaseGrantModel>> {
         return new Oauth2Api(DEFAULT_CONFIG).oauth2AuthorizationCodesList({
             user: this.userId,
             ordering: "expires",
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
         });
     }
 

web/src/elements/oauth/UserRefreshList.ts

@@ -9,7 +9,7 @@ import { RefreshTokenModel, Oauth2Api, ExpiringBaseGrantModel } from "@goauthent
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../forms/DeleteBulkForm";
 import { Table, TableColumn } from "../table/Table";
 
@@ -24,12 +24,12 @@ export class UserOAuthRefreshList extends Table<RefreshTokenModel> {
         return super.styles.concat(PFFlex);
     }
 
-    apiEndpoint(page: number): Promise<AKResponse<RefreshTokenModel>> {
+    async apiEndpoint(page: number): Promise<AKResponse<RefreshTokenModel>> {
         return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensList({
             user: this.userId,
             ordering: "expires",
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
         });
     }
 

web/src/elements/user/SessionList.ts

@@ -7,7 +7,7 @@ import { CoreApi, AuthenticatedSession } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../forms/DeleteBulkForm";
 import { Table, TableColumn } from "../table/Table";
 
@@ -16,12 +16,12 @@ export class AuthenticatedSessionList extends Table<AuthenticatedSession> {
     @property()
     targetUser!: string;
 
-    apiEndpoint(page: number): Promise<AKResponse<AuthenticatedSession>> {
+    async apiEndpoint(page: number): Promise<AKResponse<AuthenticatedSession>> {
         return new CoreApi(DEFAULT_CONFIG).coreAuthenticatedSessionsList({
             userUsername: this.targetUser,
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
         });
     }
 

web/src/elements/user/UserConsentList.ts

@@ -7,7 +7,7 @@ import { CoreApi, UserConsent } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../forms/DeleteBulkForm";
 import { Table, TableColumn } from "../table/Table";
 
@@ -16,12 +16,12 @@ export class UserConsentList extends Table<UserConsent> {
     @property({ type: Number })
     userId?: number;
 
-    apiEndpoint(page: number): Promise<AKResponse<UserConsent>> {
+    async apiEndpoint(page: number): Promise<AKResponse<UserConsent>> {
         return new CoreApi(DEFAULT_CONFIG).coreUserConsentList({
             user: this.userId,
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
         });
     }
 

web/src/interfaces/UserInterface.ts

@@ -20,6 +20,7 @@ import { CurrentTenant, EventsApi } from "@goauthentik/api";
 import { DEFAULT_CONFIG, tenant } from "../api/Config";
 import { configureSentry } from "../api/Sentry";
 import { me } from "../api/Users";
+import { uiConfig, UserDisplay } from "../common/config";
 import { WebsocketClient } from "../common/ws";
 import {
     EVENT_API_DRAWER_TOGGLE,
@@ -34,7 +35,6 @@ import "../elements/sidebar/Sidebar";
 import { DefaultTenant } from "../elements/sidebar/SidebarBrand";
 import "../elements/sidebar/SidebarItem";
 import { ROUTES } from "../routesUser";
-import { uiConfig, UserDisplay } from "../user/config";
 import { first } from "../utils";
 import "./locale";
 

web/src/pages/applications/ApplicationListPage.ts

@@ -9,7 +9,7 @@ import { Application, CoreApi } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteBulkForm";
 import "../../elements/forms/ModalForm";
@@ -37,11 +37,11 @@ export class ApplicationListPage extends TablePage<Application> {
     @property()
     order = "name";
 
-    apiEndpoint(page: number): Promise<AKResponse<Application>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Application>> {
         return new CoreApi(DEFAULT_CONFIG).coreApplicationsList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
             superuserFullList: true,
         });

web/src/pages/crypto/CertificateKeyPairListPage.ts

@@ -9,7 +9,7 @@ import { CryptoApi, CertificateKeyPair } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteBulkForm";
 import "../../elements/forms/ModalForm";
@@ -43,11 +43,11 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
         return super.styles.concat(PFDescriptionList);
     }
 
-    apiEndpoint(page: number): Promise<AKResponse<CertificateKeyPair>> {
+    async apiEndpoint(page: number): Promise<AKResponse<CertificateKeyPair>> {
         return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/events/EventListPage.ts

@@ -8,7 +8,7 @@ import { Event, EventsApi } from "@goauthentik/api";
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { EventWithContext } from "../../api/Events";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import { TableColumn } from "../../elements/table/Table";
 import { TablePage } from "../../elements/table/TablePage";
 import "./EventInfo";
@@ -34,11 +34,11 @@ export class EventListPage extends TablePage<Event> {
     @property()
     order = "-created";
 
-    apiEndpoint(page: number): Promise<AKResponse<Event>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Event>> {
         return new EventsApi(DEFAULT_CONFIG).eventsEventsList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/events/RuleListPage.ts

@@ -7,7 +7,7 @@ import { EventsApi, NotificationRule } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteBulkForm";
 import "../../elements/forms/ModalForm";
@@ -37,11 +37,11 @@ export class RuleListPage extends TablePage<NotificationRule> {
     @property()
     order = "name";
 
-    apiEndpoint(page: number): Promise<AKResponse<NotificationRule>> {
+    async apiEndpoint(page: number): Promise<AKResponse<NotificationRule>> {
         return new EventsApi(DEFAULT_CONFIG).eventsRulesList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/events/TransportListPage.ts

@@ -7,7 +7,7 @@ import { EventsApi, NotificationTransport } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/ActionButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteBulkForm";
@@ -36,11 +36,11 @@ export class TransportListPage extends TablePage<NotificationTransport> {
     @property()
     order = "name";
 
-    apiEndpoint(page: number): Promise<AKResponse<NotificationTransport>> {
+    async apiEndpoint(page: number): Promise<AKResponse<NotificationTransport>> {
         return new EventsApi(DEFAULT_CONFIG).eventsTransportsList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/flows/BoundStagesList.ts

@@ -9,7 +9,7 @@ import { FlowsApi, FlowStageBinding, StagesApi } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/Tabs";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/SpinnerButton";
@@ -28,12 +28,12 @@ export class BoundStagesList extends Table<FlowStageBinding> {
     @property()
     target?: string;
 
-    apiEndpoint(page: number): Promise<AKResponse<FlowStageBinding>> {
+    async apiEndpoint(page: number): Promise<AKResponse<FlowStageBinding>> {
         return new FlowsApi(DEFAULT_CONFIG).flowsBindingsList({
             target: this.target || "",
             ordering: "order",
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
         });
     }
 

web/src/pages/flows/FlowListPage.ts

@@ -7,7 +7,7 @@ import { Flow, FlowsApi } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/ConfirmationForm";
 import "../../elements/forms/DeleteBulkForm";
@@ -39,11 +39,11 @@ export class FlowListPage extends TablePage<Flow> {
     @property()
     order = "slug";
 
-    apiEndpoint(page: number): Promise<AKResponse<Flow>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Flow>> {
         return new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/groups/GroupListPage.ts

@@ -7,7 +7,7 @@ import { CoreApi, Group } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteBulkForm";
 import "../../elements/forms/ModalForm";
@@ -34,11 +34,11 @@ export class GroupListPage extends TablePage<Group> {
     @property()
     order = "slug";
 
-    apiEndpoint(page: number): Promise<AKResponse<Group>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Group>> {
         return new CoreApi(DEFAULT_CONFIG).coreGroupsList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/groups/MemberSelectModal.ts

@@ -7,7 +7,7 @@ import { CoreApi, User } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/SpinnerButton";
 import { TableColumn } from "../../elements/table/Table";
 import { TableModal } from "../../elements/table/TableModal";
@@ -27,11 +27,11 @@ export class MemberSelectTable extends TableModal<User> {
 
     order = "username";
 
-    apiEndpoint(page: number): Promise<AKResponse<User>> {
+    async apiEndpoint(page: number): Promise<AKResponse<User>> {
         return new CoreApi(DEFAULT_CONFIG).coreUsersList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE / 2,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/outposts/OutpostListPage.ts

@@ -12,7 +12,7 @@ import { Outpost, OutpostsApi } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import { PFSize } from "../../elements/Spinner";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteBulkForm";
@@ -40,11 +40,11 @@ export class OutpostListPage extends TablePage<Outpost> {
     searchEnabled(): boolean {
         return true;
     }
-    apiEndpoint(page: number): Promise<AKResponse<Outpost>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Outpost>> {
         return new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/outposts/ServiceConnectionListPage.ts

@@ -9,7 +9,7 @@ import { OutpostsApi, ServiceConnection } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import { PFColor } from "../../elements/Label";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/SpinnerButton";
@@ -39,11 +39,11 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
 
     checkbox = true;
 
-    apiEndpoint(page: number): Promise<AKResponse<ServiceConnection>> {
+    async apiEndpoint(page: number): Promise<AKResponse<ServiceConnection>> {
         return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/policies/BoundPoliciesList.ts

@@ -9,7 +9,7 @@ import { PoliciesApi, PolicyBinding } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import { PFSize } from "../../elements/Spinner";
 import "../../elements/Tabs";
 import "../../elements/buttons/Dropdown";
@@ -32,12 +32,12 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
 
     checkbox = true;
 
-    apiEndpoint(page: number): Promise<AKResponse<PolicyBinding>> {
+    async apiEndpoint(page: number): Promise<AKResponse<PolicyBinding>> {
         return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsList({
             target: this.target || "",
             ordering: "order",
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
         });
     }
 

web/src/pages/policies/PolicyListPage.ts

@@ -9,7 +9,7 @@ import { PoliciesApi, Policy } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/ConfirmationForm";
@@ -48,11 +48,11 @@ export class PolicyListPage extends TablePage<Policy> {
     @property()
     order = "name";
 
-    apiEndpoint(page: number): Promise<AKResponse<Policy>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Policy>> {
         return new PoliciesApi(DEFAULT_CONFIG).policiesAllList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/policies/reputation/IPReputationListPage.ts

@@ -7,7 +7,7 @@ import { IPReputation, PoliciesApi } from "@goauthentik/api";
 
 import { AKResponse } from "../../../api/Client";
 import { DEFAULT_CONFIG } from "../../../api/Config";
-import { PAGE_SIZE } from "../../../constants";
+import { uiConfig } from "../../../common/config";
 import "../../../elements/buttons/ModalButton";
 import "../../../elements/buttons/SpinnerButton";
 import "../../../elements/forms/DeleteBulkForm";
@@ -35,11 +35,11 @@ export class IPReputationListPage extends TablePage<IPReputation> {
 
     checkbox = true;
 
-    apiEndpoint(page: number): Promise<AKResponse<IPReputation>> {
+    async apiEndpoint(page: number): Promise<AKResponse<IPReputation>> {
         return new PoliciesApi(DEFAULT_CONFIG).policiesReputationIpsList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/policies/reputation/UserReputationListPage.ts

@@ -7,7 +7,7 @@ import { UserReputation, PoliciesApi } from "@goauthentik/api";
 
 import { AKResponse } from "../../../api/Client";
 import { DEFAULT_CONFIG } from "../../../api/Config";
-import { PAGE_SIZE } from "../../../constants";
+import { uiConfig } from "../../../common/config";
 import "../../../elements/buttons/ModalButton";
 import "../../../elements/buttons/SpinnerButton";
 import "../../../elements/forms/DeleteBulkForm";
@@ -35,11 +35,11 @@ export class UserReputationListPage extends TablePage<UserReputation> {
     @property()
     order = "username";
 
-    apiEndpoint(page: number): Promise<AKResponse<UserReputation>> {
+    async apiEndpoint(page: number): Promise<AKResponse<UserReputation>> {
         return new PoliciesApi(DEFAULT_CONFIG).policiesReputationUsersList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/property-mappings/PropertyMappingListPage.ts

@@ -9,7 +9,7 @@ import { PropertyMapping, PropertymappingsApi } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteBulkForm";
@@ -47,11 +47,11 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
     @property({ type: Boolean })
     hideManaged = false;
 
-    apiEndpoint(page: number): Promise<AKResponse<PropertyMapping>> {
+    async apiEndpoint(page: number): Promise<AKResponse<PropertyMapping>> {
         return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsAllList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
             managedIsnull: this.hideManaged ? true : undefined,
         });

web/src/pages/providers/ProviderListPage.ts

@@ -9,7 +9,7 @@ import { Provider, ProvidersApi } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteBulkForm";
@@ -43,11 +43,11 @@ export class ProviderListPage extends TablePage<Provider> {
     @property()
     order = "name";
 
-    apiEndpoint(page: number): Promise<AKResponse<Provider>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Provider>> {
         return new ProvidersApi(DEFAULT_CONFIG).providersAllList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/sources/SourcesListPage.ts

@@ -9,7 +9,7 @@ import { Source, SourcesApi } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteBulkForm";
@@ -42,11 +42,11 @@ export class SourceListPage extends TablePage<Source> {
     @property()
     order = "name";
 
-    apiEndpoint(page: number): Promise<AKResponse<Source>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Source>> {
         return new SourcesApi(DEFAULT_CONFIG).sourcesAllList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/stages/StageListPage.ts

@@ -9,7 +9,7 @@ import { Stage, StagesApi } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteBulkForm";
@@ -58,11 +58,11 @@ export class StageListPage extends TablePage<Stage> {
     @property()
     order = "name";
 
-    apiEndpoint(page: number): Promise<AKResponse<Stage>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Stage>> {
         return new StagesApi(DEFAULT_CONFIG).stagesAllList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/stages/invitation/InvitationListPage.ts

@@ -7,7 +7,7 @@ import { Invitation, StagesApi } from "@goauthentik/api";
 
 import { AKResponse } from "../../../api/Client";
 import { DEFAULT_CONFIG } from "../../../api/Config";
-import { PAGE_SIZE } from "../../../constants";
+import { uiConfig } from "../../../common/config";
 import "../../../elements/buttons/ModalButton";
 import "../../../elements/buttons/SpinnerButton";
 import "../../../elements/forms/DeleteBulkForm";
@@ -39,11 +39,11 @@ export class InvitationListPage extends TablePage<Invitation> {
     @property()
     order = "expires";
 
-    apiEndpoint(page: number): Promise<AKResponse<Invitation>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Invitation>> {
         return new StagesApi(DEFAULT_CONFIG).stagesInvitationInvitationsList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/stages/prompt/PromptListPage.ts

@@ -7,7 +7,7 @@ import { Prompt, StagesApi } from "@goauthentik/api";
 
 import { AKResponse } from "../../../api/Client";
 import { DEFAULT_CONFIG } from "../../../api/Config";
-import { PAGE_SIZE } from "../../../constants";
+import { uiConfig } from "../../../common/config";
 import "../../../elements/buttons/ModalButton";
 import "../../../elements/buttons/SpinnerButton";
 import "../../../elements/forms/DeleteBulkForm";
@@ -37,11 +37,11 @@ export class PromptListPage extends TablePage<Prompt> {
     @property()
     order = "order";
 
-    apiEndpoint(page: number): Promise<AKResponse<Prompt>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Prompt>> {
         return new StagesApi(DEFAULT_CONFIG).stagesPromptPromptsList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/system-tasks/SystemTaskListPage.ts

@@ -40,7 +40,7 @@ export class SystemTaskListPage extends TablePage<Task> {
         return super.styles.concat(PFDescriptionList);
     }
 
-    apiEndpoint(page: number): Promise<AKResponse<Task>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Task>> {
         return new AdminApi(DEFAULT_CONFIG).adminSystemTasksList().then((tasks) => {
             return {
                 pagination: {

web/src/pages/tenants/TenantListPage.ts

@@ -7,7 +7,7 @@ import { CoreApi, Tenant } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteBulkForm";
 import "../../elements/forms/ModalForm";
@@ -35,11 +35,11 @@ export class TenantListPage extends TablePage<Tenant> {
     @property()
     order = "domain";
 
-    apiEndpoint(page: number): Promise<AKResponse<Tenant>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Tenant>> {
         return new CoreApi(DEFAULT_CONFIG).coreTenantsList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/tokens/TokenListPage.ts

@@ -7,7 +7,7 @@ import { CoreApi, IntentEnum, Token } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/TokenCopyButton";
 import "../../elements/forms/DeleteBulkForm";
@@ -49,11 +49,11 @@ export class TokenListPage extends TablePage<Token> {
     @property()
     order = "expires";
 
-    apiEndpoint(page: number): Promise<AKResponse<Token>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Token>> {
         return new CoreApi(DEFAULT_CONFIG).coreTokensList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
         });
     }

web/src/pages/users/GroupSelectModal.ts

@@ -7,7 +7,7 @@ import { CoreApi, Group } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/SpinnerButton";
 import { TableColumn } from "../../elements/table/Table";
 import { TableModal } from "../../elements/table/TableModal";
@@ -26,11 +26,11 @@ export class GroupSelectModal extends TableModal<Group> {
 
     order = "name";
 
-    apiEndpoint(page: number): Promise<AKResponse<Group>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Group>> {
         return new CoreApi(DEFAULT_CONFIG).coreGroupsList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE / 2,
+            pageSize: (await uiConfig()).pagination.perPage / 2,
             search: this.search || "",
         });
     }

web/src/pages/users/UserListPage.ts

@@ -10,7 +10,7 @@ import { CoreApi, User } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG, tenant } from "../../api/Config";
-import { PAGE_SIZE } from "../../constants";
+import { uiConfig } from "../../common/config";
 import "../../elements/buttons/ActionButton";
 import "../../elements/forms/DeleteBulkForm";
 import "../../elements/forms/ModalForm";
@@ -52,11 +52,11 @@ export class UserListPage extends TablePage<User> {
         return super.styles.concat(PFDescriptionList);
     }
 
-    apiEndpoint(page: number): Promise<AKResponse<User>> {
+    async apiEndpoint(page: number): Promise<AKResponse<User>> {
         return new CoreApi(DEFAULT_CONFIG).coreUsersList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
             attributes: this.hideServiceAccounts
                 ? JSON.stringify({

web/src/user/LibraryApplication.ts

@@ -14,8 +14,8 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import { Application } from "@goauthentik/api";
 
 import { me } from "../api/Users";
+import { uiConfig } from "../common/config";
 import { truncate } from "../utils";
-import { uiConfig } from "./config";
 
 @customElement("ak-library-app")
 export class LibraryApplication extends LitElement {

web/src/user/LibraryPage.ts

@@ -18,9 +18,9 @@ import { Application, CoreApi } from "@goauthentik/api";
 
 import { AKResponse } from "../api/Client";
 import { DEFAULT_CONFIG } from "../api/Config";
+import { UIConfig, uiConfig } from "../common/config";
 import { loading } from "../utils";
 import "./LibraryApplication";
-import { UIConfig, uiConfig } from "./config";
 
 @customElement("ak-library")
 export class LibraryPage extends LitElement {

web/src/user/user-settings/tokens/UserTokenList.ts

@@ -9,7 +9,7 @@ import { CoreApi, IntentEnum, Token } from "@goauthentik/api";
 
 import { AKResponse } from "../../../api/Client";
 import { DEFAULT_CONFIG } from "../../../api/Config";
-import { PAGE_SIZE } from "../../../constants";
+import { uiConfig } from "../../../common/config";
 import "../../../elements/buttons/Dropdown";
 import "../../../elements/buttons/ModalButton";
 import "../../../elements/buttons/TokenCopyButton";
@@ -31,11 +31,11 @@ export class UserTokenList extends Table<Token> {
     @property()
     order = "expires";
 
-    apiEndpoint(page: number): Promise<AKResponse<Token>> {
+    async apiEndpoint(page: number): Promise<AKResponse<Token>> {
         return new CoreApi(DEFAULT_CONFIG).coreTokensList({
             ordering: this.order,
             page: page,
-            pageSize: PAGE_SIZE,
+            pageSize: (await uiConfig()).pagination.perPage,
             search: this.search || "",
             managed: "",
         });