From a6bafb8adcfc1ce043a5a3ff7d10fba9844357b4 Mon Sep 17 00:00:00 2001 From: x032205 Date: Tue, 20 May 2025 19:42:32 -0400 Subject: [PATCH] feat(frontend): Persisnt "perPage" for tables --- .../certificate/certificate-service.ts | 2 +- frontend/src/helpers/userTablePreferences.ts | 69 +++++++++++++++++++ .../KmipPage/components/KmipClientTable.tsx | 12 +++- .../kms/OverviewPage/components/CmekTable.tsx | 12 +++- .../OrgGroupsSection/OrgGroupsTable.tsx | 12 +++- .../IdentitySection/IdentityTable.tsx | 13 +++- .../OrgMembersSection/OrgMembersTable.tsx | 12 +++- .../components/AppConnectionsTable.tsx | 12 +++- .../GroupMembersSection/GroupMembersTable.tsx | 12 +++- .../IdentityProjectsTable.tsx | 12 +++- .../components/AllProjectView.tsx | 13 +++- .../components/MyProjectView.tsx | 13 +++- .../SecretScanningPage/SecretScanningPage.tsx | 32 +++++---- .../OrgSecretShareLimitSection.tsx | 2 +- .../UserProjectsSection/UserGroupsTable.tsx | 12 +++- .../UserProjectsSection/UserProjectsTable.tsx | 12 +++- .../components/GroupsSection/GroupsTable.tsx | 12 +++- .../components/IdentityTab/IdentityTab.tsx | 12 +++- .../MembersTab/components/MembersTable.tsx | 5 +- .../IntegrationsTable.tsx | 12 +++- .../SecretSyncTable/SecretSyncsTable.tsx | 12 +++- .../OverviewPage/OverviewPage.tsx | 12 +++- .../SecretDashboardPage.tsx | 12 +++- .../SecretTagsSection/SecretTagsTable.tsx | 14 +++- 24 files changed, 285 insertions(+), 58 deletions(-) create mode 100644 frontend/src/helpers/userTablePreferences.ts diff --git a/backend/src/services/certificate/certificate-service.ts b/backend/src/services/certificate/certificate-service.ts index 292b5f109..be3f8677e 100644 --- a/backend/src/services/certificate/certificate-service.ts +++ b/backend/src/services/certificate/certificate-service.ts @@ -8,6 +8,7 @@ import { ProjectPermissionCertificateActions, ProjectPermissionSub } from "@app/ee/services/permission/project-permission"; +import { NotFoundError } from "@app/lib/errors"; import { TCertificateBodyDALFactory } from "@app/services/certificate/certificate-body-dal"; import { TCertificateDALFactory } from "@app/services/certificate/certificate-dal"; import { TCertificateAuthorityCertDALFactory } from "@app/services/certificate-authority/certificate-authority-cert-dal"; @@ -29,7 +30,6 @@ import { TGetCertPrivateKeyDTO, TRevokeCertDTO } from "./certificate-types"; -import { NotFoundError } from "@app/lib/errors"; type TCertificateServiceFactoryDep = { certificateDAL: Pick; diff --git a/frontend/src/helpers/userTablePreferences.ts b/frontend/src/helpers/userTablePreferences.ts new file mode 100644 index 000000000..95b219f67 --- /dev/null +++ b/frontend/src/helpers/userTablePreferences.ts @@ -0,0 +1,69 @@ +const TABLE_PREFERENCES_KEY = "userTablePreferences"; + +interface TableSpecificPreferences { + [preferenceKey: string]: any; +} + +interface UserTablePreferences { + [tableName: string]: TableSpecificPreferences; +} + +// Retrieves all table preferences from localStorage +const getAllTablePreferences = (): UserTablePreferences => { + try { + const preferencesString = localStorage.getItem(TABLE_PREFERENCES_KEY); + if (preferencesString) { + return JSON.parse(preferencesString) as UserTablePreferences; + } + } catch (error) { + console.error("Error reading user table preferences from localStorage:", error); + } + return {}; +}; + +// Saves all table preferences to localStorage +const saveAllTablePreferences = (preferences: UserTablePreferences): void => { + try { + localStorage.setItem(TABLE_PREFERENCES_KEY, JSON.stringify(preferences)); + } catch (error) { + console.error("Error saving user table preferences to localStorage:", error); + } +}; + +// Retrieves a specific preference for a given table +export const getUserTablePreference = ( + tableName: string, + preferenceKey: string, + defaultValue: T +): T => { + const preferences = getAllTablePreferences(); + if ( + preferences && + typeof preferences === "object" && + tableName in preferences && + preferenceKey in preferences[tableName] + ) { + const value = preferences[tableName][preferenceKey]; + + if (value !== undefined && value !== null) { + return value as T; + } + } + return defaultValue; +}; + +// Sets a specific preference for a given table and saves it to localStorage +export const setUserTablePreference = ( + tableName: string, + preferenceKey: string, + value: any +): void => { + const preferences = getAllTablePreferences(); + + if (!preferences[tableName]) { + preferences[tableName] = {}; + } + + preferences[tableName][preferenceKey] = value; + saveAllTablePreferences(preferences); +}; diff --git a/frontend/src/pages/kms/KmipPage/components/KmipClientTable.tsx b/frontend/src/pages/kms/KmipPage/components/KmipClientTable.tsx index a9d29d24a..aae8e81b3 100644 --- a/frontend/src/pages/kms/KmipPage/components/KmipClientTable.tsx +++ b/frontend/src/pages/kms/KmipPage/components/KmipClientTable.tsx @@ -43,6 +43,7 @@ import { useSubscription, useWorkspace } from "@app/context"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks"; import { OrderByDirection } from "@app/hooks/api/generic/types"; import { useGetKmipClientsByProjectId } from "@app/hooks/api/kmip"; @@ -71,7 +72,14 @@ export const KmipClientTable = () => { perPage, page, setPerPage - } = usePagination(KmipClientOrderBy.Name); + } = usePagination(KmipClientOrderBy.Name, { + initPerPage: getUserTablePreference("kmipClientTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("kmipClientTable", "perPage", newPerPage); + }; const { data, isPending, isFetching } = useGetKmipClientsByProjectId({ projectId, @@ -290,7 +298,7 @@ export const KmipClientTable = () => { page={page} perPage={perPage} onChangePage={(newPage) => setPage(newPage)} - onChangePerPage={(newPerPage) => setPerPage(newPerPage)} + onChangePerPage={handlePerPageChange} /> )} {!isPending && kmipClients.length === 0 && ( diff --git a/frontend/src/pages/kms/OverviewPage/components/CmekTable.tsx b/frontend/src/pages/kms/OverviewPage/components/CmekTable.tsx index c6902b4fa..248cad09d 100644 --- a/frontend/src/pages/kms/OverviewPage/components/CmekTable.tsx +++ b/frontend/src/pages/kms/OverviewPage/components/CmekTable.tsx @@ -53,6 +53,7 @@ import { useWorkspace } from "@app/context"; import { kmsKeyUsageOptions } from "@app/helpers/kms"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { usePagination, usePopUp, useResetPageHelper, useTimedReset } from "@app/hooks"; import { useGetCmeksByProjectId, useUpdateCmek } from "@app/hooks/api/cmeks"; import { CmekOrderBy, KmsKeyUsage, TCmek } from "@app/hooks/api/cmeks/types"; @@ -100,7 +101,14 @@ export const CmekTable = () => { perPage, page, setPerPage - } = usePagination(CmekOrderBy.Name); + } = usePagination(CmekOrderBy.Name, { + initPerPage: getUserTablePreference("cmekClientTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("cmekClientTable", "perPage", newPerPage); + }; const { data, isPending, isFetching } = useGetCmeksByProjectId({ projectId, @@ -508,7 +516,7 @@ export const CmekTable = () => { page={page} perPage={perPage} onChangePage={(newPage) => setPage(newPage)} - onChangePerPage={(newPerPage) => setPerPage(newPerPage)} + onChangePerPage={handlePerPageChange} /> )} {!isPending && keys.length === 0 && ( diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx index e7b89c48d..7369bbc11 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx @@ -34,6 +34,7 @@ import { Tr } from "@app/components/v2"; import { OrgPermissionGroupActions, OrgPermissionSubjects, useOrganization } from "@app/context"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { usePagination, useResetPageHelper } from "@app/hooks"; import { useGetOrganizationGroups, useGetOrgRoles, useUpdateGroup } from "@app/hooks/api"; import { OrderByDirection } from "@app/hooks/api/generic/types"; @@ -103,7 +104,14 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => { setOrderBy, setOrderDirection, toggleOrderDirection - } = usePagination(GroupsOrderBy.Name, { initPerPage: 20 }); + } = usePagination(GroupsOrderBy.Name, { + initPerPage: getUserTablePreference("orgGroupsTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("orgGroupsTable", "perPage", newPerPage); + }; const filteredGroups = useMemo(() => { const filtered = search @@ -376,7 +384,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => { page={page} perPage={perPage} onChangePage={setPage} - onChangePerPage={setPerPage} + onChangePerPage={handlePerPageChange} /> )} {!isPending && !filteredGroups?.length && ( diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx index ddfcc7a7c..03cd3ac06 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx @@ -42,6 +42,7 @@ import { Tr } from "@app/components/v2"; import { OrgPermissionIdentityActions, OrgPermissionSubjects, useOrganization } from "@app/context"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { usePagination, useResetPageHelper } from "@app/hooks"; import { useGetOrgRoles, useSearchIdentities, useUpdateIdentity } from "@app/hooks/api"; import { OrderByDirection } from "@app/hooks/api/generic/types"; @@ -76,7 +77,15 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => { perPage, page, setPerPage - } = usePagination(OrgIdentityOrderBy.Name); + } = usePagination(OrgIdentityOrderBy.Name, { + initPerPage: getUserTablePreference("identityTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("identityTable", "perPage", newPerPage); + }; + const [filteredRoles, setFilteredRoles] = useState([]); const organizationId = currentOrg?.id || ""; @@ -379,7 +388,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => { page={page} perPage={perPage} onChangePage={(newPage) => setPage(newPage)} - onChangePerPage={(newPerPage) => setPerPage(newPerPage)} + onChangePerPage={handlePerPageChange} /> )} {!isPending && data && data?.identities.length === 0 && ( diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx index a79da885b..e9c9d1f16 100644 --- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx +++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx @@ -42,6 +42,7 @@ import { useSubscription, useUser } from "@app/context"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { usePagination, useResetPageHelper } from "@app/hooks"; import { useFetchServerStatus, @@ -170,7 +171,14 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro setOrderBy, setOrderDirection, toggleOrderDirection - } = usePagination(OrgMembersOrderBy.Name, { initPerPage: 20 }); + } = usePagination(OrgMembersOrderBy.Name, { + initPerPage: getUserTablePreference("orgMembersTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("orgMembersTable", "perPage", newPerPage); + }; const filteredUsers = useMemo( () => @@ -513,7 +521,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro page={page} perPage={perPage} onChangePage={setPage} - onChangePerPage={setPerPage} + onChangePerPage={handlePerPageChange} /> )} {!isMembersLoading && !filteredUsers?.length && ( diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx index 379ce877c..ffaac835e 100644 --- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx +++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx @@ -30,6 +30,7 @@ import { Tr } from "@app/components/v2"; import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks"; import { TAppConnection, useListAppConnections } from "@app/hooks/api/appConnections"; import { AppConnection } from "@app/hooks/api/appConnections/enums"; @@ -76,7 +77,14 @@ export const AppConnectionsTable = () => { orderBy, setOrderDirection, setOrderBy - } = usePagination(AppConnectionsOrderBy.App, { initPerPage: 20 }); + } = usePagination(AppConnectionsOrderBy.App, { + initPerPage: getUserTablePreference("appConnectionsTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("appConnectionsTable", "perPage", newPerPage); + }; const filteredAppConnections = useMemo( () => @@ -282,7 +290,7 @@ export const AppConnectionsTable = () => { page={page} perPage={perPage} onChangePage={setPage} - onChangePerPage={setPerPage} + onChangePerPage={handlePerPageChange} /> )} {!isPending && !filteredAppConnections?.length && ( diff --git a/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersTable.tsx b/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersTable.tsx index b6af10f2f..360dc95c9 100644 --- a/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersTable.tsx +++ b/frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersTable.tsx @@ -25,6 +25,7 @@ import { Tr } from "@app/components/v2"; import { OrgPermissionGroupActions, OrgPermissionSubjects, useOrganization } from "@app/context"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { usePagination, useResetPageHelper } from "@app/hooks"; import { useListGroupUsers, useOidcManageGroupMembershipsEnabled } from "@app/hooks/api"; import { OrderByDirection } from "@app/hooks/api/generic/types"; @@ -57,7 +58,14 @@ export const GroupMembersTable = ({ groupId, groupSlug, handlePopUpOpen }: Props offset, orderDirection, toggleOrderDirection - } = usePagination(GroupMembersOrderBy.Name, { initPerPage: 10 }); + } = usePagination(GroupMembersOrderBy.Name, { + initPerPage: getUserTablePreference("groupMembersTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("groupMembersTable", "perPage", newPerPage); + }; const { currentOrg } = useOrganization(); @@ -163,7 +171,7 @@ export const GroupMembersTable = ({ groupId, groupSlug, handlePopUpOpen }: Props page={page} perPage={perPage} onChangePage={setPage} - onChangePerPage={setPerPage} + onChangePerPage={handlePerPageChange} /> )} {!isPending && !filteredGroupMemberships?.length && ( diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx index 680bb8035..c32c3226a 100644 --- a/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx +++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx @@ -21,6 +21,7 @@ import { THead, Tr } from "@app/components/v2"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { usePagination, useResetPageHelper } from "@app/hooks"; import { useGetIdentityProjectMemberships } from "@app/hooks/api"; import { OrderByDirection } from "@app/hooks/api/generic/types"; @@ -53,7 +54,14 @@ export const IdentityProjectsTable = ({ identityId, handlePopUpOpen }: Props) => offset, orderDirection, toggleOrderDirection - } = usePagination(IdentityProjectsOrderBy.Name, { initPerPage: 10 }); + } = usePagination(IdentityProjectsOrderBy.Name, { + initPerPage: getUserTablePreference("identityProjectsTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("identityProjectsTable", "perPage", newPerPage); + }; const filteredProjectMemberships = useMemo( () => @@ -132,7 +140,7 @@ export const IdentityProjectsTable = ({ identityId, handlePopUpOpen }: Props) => page={page} perPage={perPage} onChangePage={setPage} - onChangePerPage={setPerPage} + onChangePerPage={handlePerPageChange} /> )} {!isPending && !filteredProjectMemberships?.length && ( diff --git a/frontend/src/pages/organization/SecretManagerOverviewPage/components/AllProjectView.tsx b/frontend/src/pages/organization/SecretManagerOverviewPage/components/AllProjectView.tsx index 5fd4252e3..cf27a9961 100644 --- a/frontend/src/pages/organization/SecretManagerOverviewPage/components/AllProjectView.tsx +++ b/frontend/src/pages/organization/SecretManagerOverviewPage/components/AllProjectView.tsx @@ -28,6 +28,7 @@ import { } from "@app/components/v2"; import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context"; import { getProjectHomePage } from "@app/helpers/project"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks"; import { useRequestProjectAccess, useSearchProjects } from "@app/hooks/api"; import { ProjectType, Workspace } from "@app/hooks/api/workspace/types"; @@ -104,7 +105,15 @@ export const AllProjectView = ({ limit, toggleOrderDirection, orderDirection - } = usePagination("name", { initPerPage: 50 }); + } = usePagination("name", { + initPerPage: getUserTablePreference("allProjectsTable", "perPage", 50) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("allProjectsTable", "perPage", newPerPage); + }; + const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp([ "requestAccessConfirmation" ] as const); @@ -274,7 +283,7 @@ export const AllProjectView = ({ count={searchedProjects?.totalCount || 0} page={page} onChangePage={setPage} - onChangePerPage={setPerPage} + onChangePerPage={handlePerPageChange} /> )} {!isProjectLoading && !searchedProjects?.totalCount && ( diff --git a/frontend/src/pages/organization/SecretManagerOverviewPage/components/MyProjectView.tsx b/frontend/src/pages/organization/SecretManagerOverviewPage/components/MyProjectView.tsx index e723e1dfe..3e84e1809 100644 --- a/frontend/src/pages/organization/SecretManagerOverviewPage/components/MyProjectView.tsx +++ b/frontend/src/pages/organization/SecretManagerOverviewPage/components/MyProjectView.tsx @@ -19,6 +19,7 @@ import { OrgPermissionCan } from "@app/components/permissions"; import { Button, IconButton, Input, Pagination, Skeleton, Tooltip } from "@app/components/v2"; import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context"; import { getProjectHomePage } from "@app/helpers/project"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { usePagination, useResetPageHelper } from "@app/hooks"; import { useGetUserWorkspaces } from "@app/hooks/api"; import { OrderByDirection } from "@app/hooks/api/generic/types"; @@ -63,7 +64,15 @@ export const MyProjectView = ({ limit, toggleOrderDirection, orderDirection - } = usePagination(ProjectOrderBy.Name, { initPerPage: 24 }); + } = usePagination(ProjectOrderBy.Name, { + initPerPage: getUserTablePreference("myProjectsTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("myProjectsTable", "perPage", newPerPage); + }; + const { data: projectFavorites, isPending: isProjectFavoritesLoading } = useGetUserProjectFavorites(currentOrg?.id); @@ -415,7 +424,7 @@ export const MyProjectView = ({ count={filteredWorkspaces.length} page={page} onChangePage={setPage} - onChangePerPage={setPerPage} + onChangePerPage={handlePerPageChange} /> )} {isWorkspaceEmpty && ( diff --git a/frontend/src/pages/organization/SecretScanningPage/SecretScanningPage.tsx b/frontend/src/pages/organization/SecretScanningPage/SecretScanningPage.tsx index 23cdcf800..41dec2981 100644 --- a/frontend/src/pages/organization/SecretScanningPage/SecretScanningPage.tsx +++ b/frontend/src/pages/organization/SecretScanningPage/SecretScanningPage.tsx @@ -13,6 +13,7 @@ import { useOrganization, useServerConfig } from "@app/context"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { withPermission } from "@app/hoc"; import { usePagination, usePopUp } from "@app/hooks"; import { @@ -28,8 +29,6 @@ import { SecretScanningFilter } from "./components/SecretScanningFilters"; import { SecretScanningFilterFormData, secretScanningFilterFormSchema } from "./components/types"; import { SecretScanningLogsTable } from "./components"; -const PER_PAGE_INIT = 25; - export const SecretScanningPage = withPermission( () => { const queryParams = useSearch({ @@ -49,9 +48,14 @@ export const SecretScanningPage = withPermission( const { offset, limit, orderBy, setPage, perPage, page, setPerPage } = usePagination( SecretScanningOrderBy.CreatedAt, - { initPerPage: PER_PAGE_INIT } + { initPerPage: getUserTablePreference("secretScanningTable", "perPage", 20) } ); + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("secretScanningTable", "perPage", newPerPage); + }; + const repositoryNames = watch("repositoryNames"); const resolvedStatus = watch("resolved"); @@ -191,18 +195,16 @@ export const SecretScanningPage = withPermission( )} - {!isPending && - risksData?.totalCount !== undefined && - risksData.totalCount >= PER_PAGE_INIT && ( - setPage(newPage)} - onChangePerPage={(newPerPage) => setPerPage(newPerPage)} - /> - )} + {!isPending && risksData?.totalCount !== undefined && ( + setPage(newPage)} + onChangePerPage={handlePerPageChange} + /> + )} diff --git a/frontend/src/pages/organization/SecretSharingSettingsPage/components/OrgSecretShareLimitSection/OrgSecretShareLimitSection.tsx b/frontend/src/pages/organization/SecretSharingSettingsPage/components/OrgSecretShareLimitSection/OrgSecretShareLimitSection.tsx index e0d88a082..d65b76b16 100644 --- a/frontend/src/pages/organization/SecretSharingSettingsPage/components/OrgSecretShareLimitSection/OrgSecretShareLimitSection.tsx +++ b/frontend/src/pages/organization/SecretSharingSettingsPage/components/OrgSecretShareLimitSection/OrgSecretShareLimitSection.tsx @@ -1,7 +1,7 @@ +import { useEffect } from "react"; import { Controller, useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; -import { useEffect } from "react"; import { createNotification } from "@app/components/notifications"; import { OrgPermissionCan } from "@app/components/permissions"; diff --git a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserGroupsTable.tsx b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserGroupsTable.tsx index b22b1377f..12d4e89c9 100644 --- a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserGroupsTable.tsx +++ b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserGroupsTable.tsx @@ -20,6 +20,7 @@ import { THead, Tr } from "@app/components/v2"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { usePagination, useResetPageHelper } from "@app/hooks"; import { OrderByDirection } from "@app/hooks/api/generic/types"; import { OrgUser } from "@app/hooks/api/types"; @@ -52,7 +53,14 @@ export const UserGroupsTable = ({ handlePopUpOpen, orgMembership }: Props) => { offset, orderDirection, toggleOrderDirection - } = usePagination(UserGroupsOrderBy.Name, { initPerPage: 10 }); + } = usePagination(UserGroupsOrderBy.Name, { + initPerPage: getUserTablePreference("userGroupsTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("userGroupsTable", "perPage", newPerPage); + }; const filteredGroupMemberships = useMemo( () => @@ -119,7 +127,7 @@ export const UserGroupsTable = ({ handlePopUpOpen, orgMembership }: Props) => { page={page} perPage={perPage} onChangePage={setPage} - onChangePerPage={setPerPage} + onChangePerPage={handlePerPageChange} /> )} {!isPending && !filteredGroupMemberships?.length && ( diff --git a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserProjectsTable.tsx b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserProjectsTable.tsx index ff9ed9bbc..c15c48cd3 100644 --- a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserProjectsTable.tsx +++ b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserProjectsTable.tsx @@ -22,6 +22,7 @@ import { Tr } from "@app/components/v2"; import { useOrganization } from "@app/context"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { usePagination, useResetPageHelper } from "@app/hooks"; import { useGetOrgMembershipProjectMemberships } from "@app/hooks/api"; import { OrderByDirection } from "@app/hooks/api/generic/types"; @@ -54,7 +55,14 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => { offset, orderDirection, toggleOrderDirection - } = usePagination(UserProjectsOrderBy.Name, { initPerPage: 10 }); + } = usePagination(UserProjectsOrderBy.Name, { + initPerPage: getUserTablePreference("userProjectsTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("userProjectsTable", "perPage", newPerPage); + }; const { data: projectMemberships = [], isPending } = useGetOrgMembershipProjectMemberships( orgId, @@ -136,7 +144,7 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => { page={page} perPage={perPage} onChangePage={setPage} - onChangePerPage={setPerPage} + onChangePerPage={handlePerPageChange} /> )} {!isPending && !filteredProjectMemberships?.length && ( diff --git a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx index 24f459a93..731bb18d4 100644 --- a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx +++ b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx @@ -27,6 +27,7 @@ import { Tr } from "@app/components/v2"; import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { usePagination, useResetPageHelper } from "@app/hooks"; import { useListWorkspaceGroups } from "@app/hooks/api"; import { OrderByDirection } from "@app/hooks/api/generic/types"; @@ -62,7 +63,14 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => { orderDirection, orderBy, toggleOrderDirection - } = usePagination(GroupsOrderBy.Name, { initPerPage: 20 }); + } = usePagination(GroupsOrderBy.Name, { + initPerPage: getUserTablePreference("projectGroupsTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("projectGroupsTable", "perPage", newPerPage); + }; const { data: groupMemberships = [], isPending } = useListWorkspaceGroups( currentWorkspace?.id || "" @@ -183,7 +191,7 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => { page={page} perPage={perPage} onChangePage={setPage} - onChangePerPage={setPerPage} + onChangePerPage={handlePerPageChange} /> )} {!isPending && !filteredGroupMemberships?.length && ( diff --git a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx index c9e563065..730d5336d 100644 --- a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx +++ b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx @@ -42,6 +42,7 @@ import { } from "@app/components/v2"; import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context"; import { formatProjectRoleName } from "@app/helpers/roles"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { withProjectPermission } from "@app/hoc"; import { usePagination, useResetPageHelper } from "@app/hooks"; import { useDeleteIdentityFromWorkspace, useGetWorkspaceIdentityMemberships } from "@app/hooks/api"; @@ -72,7 +73,14 @@ export const IdentityTab = withProjectPermission( perPage, page, setPerPage - } = usePagination(ProjectIdentityOrderBy.Name); + } = usePagination(ProjectIdentityOrderBy.Name, { + initPerPage: getUserTablePreference("projectIdentityTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("projectIdentityTable", "perPage", newPerPage); + }; const workspaceId = currentWorkspace?.id ?? ""; @@ -403,7 +411,7 @@ export const IdentityTab = withProjectPermission( page={page} perPage={perPage} onChangePage={(newPage) => setPage(newPage)} - onChangePerPage={(newPerPage) => setPerPage(newPerPage)} + onChangePerPage={handlePerPageChange} /> )} {!isPending && data && data?.identityMemberships.length === 0 && ( diff --git a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx index c03f7f793..c409e503b 100644 --- a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx +++ b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx @@ -51,6 +51,7 @@ import { useWorkspace } from "@app/context"; import { formatProjectRoleName } from "@app/helpers/roles"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { usePagination, useResetPageHelper } from "@app/hooks"; import { useGetProjectRoles, useGetWorkspaceUsers } from "@app/hooks/api"; import { OrderByDirection } from "@app/hooks/api/generic/types"; @@ -101,12 +102,12 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => { setOrderDirection, toggleOrderDirection } = usePagination(MembersOrderBy.Name, { - initPerPage: parseInt(localStorage.getItem("PROJECT_MEMBERS_TABLE_PER_PAGE") || "20", 10) + initPerPage: getUserTablePreference("projectMembersTable", "perPage", 20) }); const handlePerPageChange = (newPerPage: number) => { setPerPage(newPerPage); - localStorage.setItem("PROJECT_MEMBERS_TABLE_PER_PAGE", newPerPage.toString()); + setUserTablePreference("projectMembersTable", "perPage", newPerPage); }; const { data: members = [], isPending: isMembersLoading } = useGetWorkspaceUsers( diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationsTable.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationsTable.tsx index a8d2cccd5..db250a2e7 100644 --- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationsTable.tsx +++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/IntegrationsTable.tsx @@ -32,6 +32,7 @@ import { Tooltip, Tr } from "@app/components/v2"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { usePagination, useResetPageHelper } from "@app/hooks"; import { OrderByDirection } from "@app/hooks/api/generic/types"; import { useSyncIntegration } from "@app/hooks/api/integrations/queries"; @@ -110,7 +111,14 @@ export const IntegrationsTable = ({ orderBy, setOrderDirection, setOrderBy - } = usePagination(IntegrationsOrderBy.App, { initPerPage: 20 }); + } = usePagination(IntegrationsOrderBy.App, { + initPerPage: getUserTablePreference("integrationsTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("integrationsTable", "perPage", newPerPage); + }; useEffect(() => { if (integrations?.some((integration) => integration.isSynced === false)) @@ -437,7 +445,7 @@ export const IntegrationsTable = ({ page={page} perPage={perPage} onChangePage={setPage} - onChangePerPage={setPerPage} + onChangePerPage={handlePerPageChange} /> )} {!isLoading && !filteredIntegrations?.length && ( diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncsTable.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncsTable.tsx index 802e88bc1..e9c50b05f 100644 --- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncsTable.tsx +++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncsTable.tsx @@ -38,6 +38,7 @@ import { } from "@app/components/v2"; import { useWorkspace } from "@app/context"; import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks"; import { OrderByDirection } from "@app/hooks/api/generic/types"; import { @@ -119,7 +120,14 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => { orderBy, setOrderDirection, setOrderBy - } = usePagination(SecretSyncsOrderBy.Name, { initPerPage: 20 }); + } = usePagination(SecretSyncsOrderBy.Name, { + initPerPage: getUserTablePreference("secretSyncTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("secretSyncTable", "perPage", newPerPage); + }; const filteredSecretSyncs = useMemo( () => @@ -465,7 +473,7 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => { page={page} perPage={perPage} onChangePage={setPage} - onChangePerPage={setPerPage} + onChangePerPage={handlePerPageChange} /> )} {!filteredSecretSyncs?.length && ( diff --git a/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx b/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx index 5f0d90f6c..ad91c30eb 100644 --- a/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx +++ b/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx @@ -64,6 +64,7 @@ import { useWorkspace } from "@app/context"; import { ProjectPermissionSecretRotationActions } from "@app/context/ProjectPermissionContext/types"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks"; import { useCreateFolder, @@ -180,7 +181,14 @@ export const OverviewPage = () => { page, setPerPage, orderBy - } = usePagination(DashboardSecretsOrderBy.Name); + } = usePagination(DashboardSecretsOrderBy.Name, { + initPerPage: getUserTablePreference("secretOverviewTable", "perPage", 100) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("secretOverviewTable", "perPage", newPerPage); + }; const resetSelectedEntries = useCallback(() => { setSelectedEntries({ @@ -1416,7 +1424,7 @@ export const OverviewPage = () => { page={page} perPage={perPage} onChangePage={(newPage) => setPage(newPage)} - onChangePerPage={(newPerPage) => setPerPage(newPerPage)} + onChangePerPage={handlePerPageChange} /> )} diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx index d28f28392..0873b5064 100644 --- a/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx +++ b/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx @@ -29,6 +29,7 @@ import { ProjectPermissionSecretActions, ProjectPermissionSecretRotationActions } from "@app/context/ProjectPermissionContext/types"; +import { getUserTablePreference, setUserTablePreference } from "@app/helpers/userTablePreferences"; import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks"; import { useGetImportedSecretsSingleEnv, @@ -98,7 +99,14 @@ const Page = () => { page, setPerPage, orderBy - } = usePagination(DashboardSecretsOrderBy.Name); + } = usePagination(DashboardSecretsOrderBy.Name, { + initPerPage: getUserTablePreference("secretDashboardTable", "perPage", 100) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("secretDashboardTable", "perPage", newPerPage); + }; const [snapshotId, setSnapshotId] = useState(null); const isRollbackMode = Boolean(snapshotId); @@ -558,7 +566,7 @@ const Page = () => { page={page} perPage={perPage} onChangePage={(newPage) => setPage(newPage)} - onChangePerPage={(newPerPage) => setPerPage(newPerPage)} + onChangePerPage={handlePerPageChange} /> )} { offset, orderDirection, toggleOrderDirection - } = usePagination(TagsOrderBy.Slug, { initPerPage: 10 }); + } = usePagination(TagsOrderBy.Slug, { + initPerPage: getUserTablePreference("secretTagsTable", "perPage", 20) + }); + + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("secretTagsTable", "perPage", newPerPage); + }; const filteredTags = useMemo( () => @@ -151,7 +159,7 @@ export const SecretTagsTable = ({ handlePopUpOpen }: Props) => { page={page} perPage={perPage} onChangePage={setPage} - onChangePerPage={setPerPage} + onChangePerPage={handlePerPageChange} /> )} {!isPending && !filteredTags?.length && (