feat(frontend): Persisnt "perPage" for tables

This commit is contained in:
x032205
2025-05-20 19:42:32 -04:00
parent 27badad3d7
commit a6bafb8adc
24 changed files with 285 additions and 58 deletions
@@ -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>(IntegrationsOrderBy.App, { initPerPage: 20 });
} = usePagination<IntegrationsOrderBy>(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 && (
@@ -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>(SecretSyncsOrderBy.Name, { initPerPage: 20 });
} = usePagination<SecretSyncsOrderBy>(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 && (
@@ -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>(DashboardSecretsOrderBy.Name);
} = usePagination<DashboardSecretsOrderBy>(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}
/>
)}
</div>
@@ -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>(DashboardSecretsOrderBy.Name);
} = usePagination<DashboardSecretsOrderBy>(DashboardSecretsOrderBy.Name, {
initPerPage: getUserTablePreference("secretDashboardTable", "perPage", 100)
});
const handlePerPageChange = (newPerPage: number) => {
setPerPage(newPerPage);
setUserTablePreference("secretDashboardTable", "perPage", newPerPage);
};
const [snapshotId, setSnapshotId] = useState<string | null>(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}
/>
)}
<Modal
@@ -25,9 +25,10 @@ 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 { useGetWsTags } from "@app/hooks/api";
import { OrderByDirection } from "@app/hooks/api/generic/types";
import { useGetWsTags } from "@app/hooks/api/tags";
import { UsePopUpState } from "@app/hooks/usePopUp";
type Props = {
@@ -61,7 +62,14 @@ export const SecretTagsTable = ({ handlePopUpOpen }: Props) => {
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 && (