rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Populate subprocessor filters from server facets

Browse Source 
The subprocessors toolbar derived its category and region filter
options client-side from a second, unfiltered subprocessors(first: 250)
fetch, shipping up to 250 rows purely to compute two small facet sets
and silently capping the options at that limit.

Expose subprocessorCategories and subprocessorCountries on TrustCenter,
each backed by a DISTINCT query over the organization's third parties
scoped to show_on_trust_center, and read them directly in the toolbar.
The page now issues one filtered list query plus two tiny arrays, and
the options only ever include values that can actually return results.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-07-08 10:24:06 -04:00
parent 1e946d065c
commit 52b6ccac55
7 changed files with 181 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/compliance-portal/src/pages/subprocessors/SubprocessorsPage.tsx
View File

@@ -19,16 +19,16 @@ import { graphql, usePreloadedQuery, useRefetchableFragment } from "react-relay"
import { PageHeader } from "#/components/PageHeader/PageHeader";
import { SubprocessorCategorySection } from "./_components/SubprocessorCategorySection";
import type { SubprocessorsPage_query$key } from "./__generated__/SubprocessorsPage_query.graphql";
import type { SubprocessorsPageQuery } from "./__generated__/SubprocessorsPageQuery.graphql";
import type { SubprocessorsPageRefetchQuery } from "./__generated__/SubprocessorsPageRefetchQuery.graphql";
import type { SubprocessorNode } from "./_components/SubprocessorCategorySection";
import { SubprocessorCategorySection } from "./_components/SubprocessorCategorySection";
import { SubprocessorsEmpty } from "./_components/SubprocessorsEmpty";
import { SubprocessorsToolbar } from "./_components/SubprocessorsToolbar";
import { groupByCategory } from "./_lib/groupByCategory";
import { toQueryVariables } from "./_lib/toQueryVariables";
import { useSubprocessorFilters } from "./_lib/useSubprocessorFilters";
import type { SubprocessorsPageQuery } from "./__generated__/SubprocessorsPageQuery.graphql";
import type { SubprocessorsPageRefetchQuery } from "./__generated__/SubprocessorsPageRefetchQuery.graphql";
import type { SubprocessorsPage_query$key } from "./__generated__/SubprocessorsPage_query.graphql";
export const subprocessorsPageQuery = graphql`
query SubprocessorsPageQuery($query: String, $category: SubprocessorCategory, $country: CountryCode) {

6
apps/compliance-portal/src/pages/subprocessors/SubprocessorsPageLoader.tsx
View File

@@ -15,11 +15,11 @@
import { useEffect, useRef } from "react";
import { useQueryLoader } from "react-relay";
import { SubprocessorsPage, subprocessorsPageQuery } from "./SubprocessorsPage";
import { SubprocessorsPageSkeleton } from "./SubprocessorsPageSkeleton";
import type { SubprocessorsPageQuery } from "./__generated__/SubprocessorsPageQuery.graphql";
import { toQueryVariables } from "./_lib/toQueryVariables";
import { useSubprocessorFilters } from "./_lib/useSubprocessorFilters";
import type { SubprocessorsPageQuery } from "./__generated__/SubprocessorsPageQuery.graphql";
import { SubprocessorsPage, subprocessorsPageQuery } from "./SubprocessorsPage";
import { SubprocessorsPageSkeleton } from "./SubprocessorsPageSkeleton";
export default function SubprocessorsPageLoader() {
const filters = useSubprocessorFilters();

31
apps/compliance-portal/src/pages/subprocessors/_components/SubprocessorsToolbar.tsx
View File

@@ -12,11 +12,11 @@
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { TextField } from "@probo/ui/src/v2/form/TextField";
import { Select } from "@probo/ui/src/v2/Select/Select";
import { SelectItem } from "@probo/ui/src/v2/Select/SelectItem";
import { SelectPopup } from "@probo/ui/src/v2/Select/SelectPopup";
import { SelectTrigger } from "@probo/ui/src/v2/Select/SelectTrigger";
import { TextField } from "@probo/ui/src/v2/form/TextField";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { graphql, useFragment } from "react-relay";
@@ -27,21 +27,14 @@ import { useSubprocessorSearch } from "../_lib/useSubprocessorSearch";
import type { SubprocessorsToolbar_query$key } from "./__generated__/SubprocessorsToolbar_query.graphql";
// Unfiltered facet data: the distinct categories and countries actually present,
// used to populate the filter dropdowns (aliased so it does not collide with the
// filtered list selection on the same trust center).
// Facet data: the distinct categories and countries actually present across the
// trust center's published subprocessors, used to populate the filter dropdowns
// (server-computed so the options never dead-end on an empty result).
const subprocessorsToolbarFragment = graphql`
fragment SubprocessorsToolbar_query on Query {
currentTrustCenter @required(action: THROW) {
allSubprocessors: subprocessors(first: 250) {
edges {
node {
id
category
countries
}
}
}
subprocessorCategories
subprocessorCountries
}
}
`;
@@ -59,17 +52,15 @@ export function SubprocessorsToolbar({ queryKey }: SubprocessorsToolbarProps) {
const { category, country, setCategory, setCountry } = useSubprocessorFilters();
const [queryInput, setQueryInput] = useSubprocessorSearch();
const nodes = data.currentTrustCenter.allSubprocessors.edges.map(edge => edge.node);
const { subprocessorCategories, subprocessorCountries } = data.currentTrustCenter;
const categoryOptions = useMemo(() => {
const present = [...new Set(nodes.map(node => node.category))];
return present.sort((a, b) => t(`categories.${a}.label`).localeCompare(t(`categories.${b}.label`)));
}, [nodes, t]);
return [...subprocessorCategories].sort((a, b) => t(`categories.${a}.label`).localeCompare(t(`categories.${b}.label`)));
}, [subprocessorCategories, t]);
const countryOptions = useMemo(() => {
const present = [...new Set(nodes.flatMap(node => node.countries))];
return present.sort((a, b) => countryLabel(a).localeCompare(countryLabel(b)));
}, [nodes, countryLabel]);
return [...subprocessorCountries].sort((a, b) => countryLabel(a).localeCompare(countryLabel(b)));
}, [subprocessorCountries, countryLabel]);
return (
<div className="flex flex-wrap items-center gap-3">