Enhance search functionality by integrating hidden fields and removin…

.changeset/filter-search-flow.md

@@ -0,0 +1,6 @@
+---
+"@developer-overheid-nl/api-register": patch
+"@developer-overheid-nl/oss-register": patch
+---
+
+Zoeken maakt nu gebruik van de list/filter-endpoints zodat filter- en zoektermen gecombineerd gebruikt kunnen worden.

.changeset/tough-swans-mate.md

@@ -0,0 +1,7 @@
+---
+"@developer-overheid-nl/don-register-components": minor
+---
+
+Hidden fields toegevoegd om bijv search- en filters in url te behouden. In:
+  - Search component
+  - Facet Filters component

apps/api-register/src/components/FacetFiltersForm.tsx

@@ -19,11 +19,18 @@ interface FacetFiltersFormProps {
     filtersTitle: string;
     filterButtonLabel: string;
   };
+  hiddenFields?: [string, string][];
 }
 
 const FacetFiltersForm = (props: FacetFiltersFormProps) => {
   const formRef = useRef<HTMLFormElement>(null);
-  const { filters, action: formAction, method: formMethod, labels } = props;
+  const {
+    filters,
+    action: formAction,
+    method: formMethod,
+    labels,
+    hiddenFields = [],
+  } = props;
   const [{ data }, action, pending] = useActionState(
     withState(actions.getFilters),
     {
@@ -55,6 +62,14 @@ const FacetFiltersForm = (props: FacetFiltersFormProps) => {
         action={formAction}
         method={formMethod}
       >
+        {hiddenFields.map(([name, value], index) => (
+          <input
+            key={`${name}-${value}-${index}`}
+            type="hidden"
+            name={name}
+            value={value}
+          />
+        ))}
         <Overlay active={pending} />
         <FacetFilters
           id="facetfilters"

apps/api-register/src/pages/apis/pagina/[...page].astro

@@ -52,7 +52,6 @@ const { page = 1 } = Astro.params;
 
 const APIS_RESOURCE = ApiPaths.listApis;
 const FILTERS_RESOURCE = ApiPaths.listApiFilters;
-const SEARCH_RESOURCE = ApiPaths.searchApis;
 const SEARCH_QUERY_KEY = "q";
 
 const routingObj = getRouting(
@@ -71,7 +70,7 @@ const {
   error,
   response: { status, statusText, headers },
 } = await client
-  .GET(routingObj.query[SEARCH_QUERY_KEY] ? SEARCH_RESOURCE : APIS_RESOURCE, {
+  .GET(APIS_RESOURCE, {
     params: {
       query: {
         page: Number(page),
@@ -145,6 +144,15 @@ const labels = {
   filtersTitle: t("components.filters-title"),
   filterButtonLabel: t("components.filter-button-label"),
 };
+
+const searchHiddenFields = Array.from(routingObj.url.searchParams).filter(
+  ([key]) => key !== SEARCH_QUERY_KEY,
+);
+const filterHiddenFields: [string, string][] = routingObj.query[
+  SEARCH_QUERY_KEY
+]
+  ? [[SEARCH_QUERY_KEY, routingObj.query[SEARCH_QUERY_KEY] as string]]
+  : [];
 ---
 
 <DonOverview appConfig={appConfig} titlePage={t("pages.overview")}>
@@ -162,9 +170,10 @@ const labels = {
   >
   <Search
     slot="search"
-    searchUrl={new URL(`/apis/zoeken`, routingObj?.url).toString()}
+    searchUrl={new URL(`/apis`, routingObj?.url).toString()}
     searchKey={SEARCH_QUERY_KEY}
     searchTerm={routingObj.query[SEARCH_QUERY_KEY]}
+    hiddenFields={searchHiddenFields}
   />
 
   <FacetFiltersForm
@@ -174,6 +183,7 @@ const labels = {
     action={new URL(`/apis`, routingObj?.url).toString()}
     method="GET"
     labels={labels}
+    hiddenFields={filterHiddenFields}
   />
   {
     facetfiltersError && (

apps/api-register/src/types/api-schema.prod.ts

@@ -48,26 +48,6 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
-    "/apis/_search": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /**
-         * Search APIs
-         * @description Returns a list of APIs matching the search query.
-         */
-        get: operations["searchApis"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
     "/lint-results": {
         parameters: {
             query?: never;
@@ -427,6 +407,8 @@ export interface components {
         Page: number;
         /** @description Number of results per page. */
         PerPage: number;
+        /** @description Search term to combine with API filters. Matches API title. */
+        Search: string;
         /** @description Filter on organisation URI. */
         Organisation: string;
     };
@@ -456,6 +438,8 @@ export interface operations {
                 page?: components["parameters"]["Page"];
                 /** @description Number of results per page. */
                 perPage?: components["parameters"]["PerPage"];
+                /** @description Search term to combine with API filters. Matches API title. */
+                q?: components["parameters"]["Search"];
                 /** @description Filter on organisation URI. */
                 organisation?: components["parameters"]["Organisation"];
                 /** @description Comma-separated list of API IDs. */
@@ -522,6 +506,8 @@ export interface operations {
     listApiFilters: {
         parameters: {
             query?: {
+                /** @description Search term to combine with API filters. Matches API title. */
+                q?: components["parameters"]["Search"];
                 /** @description Filter on organisation URI. */
                 organisation?: components["parameters"]["Organisation"];
                 /** @description Comma-separated list of API IDs. */
@@ -554,42 +540,6 @@ export interface operations {
             400: components["responses"]["400"];
         };
     };
-    searchApis: {
-        parameters: {
-            query: {
-                /** @description Page number (1-based). */
-                page?: components["parameters"]["Page"];
-                /** @description Number of results per page. */
-                perPage?: components["parameters"]["PerPage"];
-                /** @description Filter on organisation URI. */
-                organisation?: components["parameters"]["Organisation"];
-                /** @description Search term. */
-                q: string;
-            };
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            /** @description OK */
-            200: {
-                headers: {
-                    "API-Version": components["headers"]["ApiVersion"];
-                    Link: components["headers"]["Link"];
-                    "Total-Count": components["headers"]["TotalCount"];
-                    "Current-Page": components["headers"]["CurrentPage"];
-                    "Per-Page": components["headers"]["PerPage"];
-                    "Total-Pages": components["headers"]["TotalPages"];
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ApiSummary"][];
-                };
-            };
-            400: components["responses"]["400"];
-        };
-    };
     listLintResults: {
         parameters: {
             query?: never;
@@ -823,7 +773,6 @@ export enum ApiPaths {
     listApis = "/apis",
     createApi = "/apis",
     listApiFilters = "/apis/filters",
-    searchApis = "/apis/_search",
     listLintResults = "/lint-results",
     retreiveApi = "/apis/{id}",
     updateApi = "/apis/{id}",

apps/api-register/src/types/api-schema.test.ts

@@ -48,26 +48,6 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
-    "/apis/_search": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /**
-         * Search APIs
-         * @description Returns a list of APIs matching the search query.
-         */
-        get: operations["searchApis"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
     "/lint-results": {
         parameters: {
             query?: never;
@@ -465,6 +445,8 @@ export interface components {
         Page: number;
         /** @description Number of results per page. */
         PerPage: number;
+        /** @description Search term to combine with API filters. Matches API title. */
+        Search: string;
         /** @description Filter on organisation URI. */
         Organisation: string;
         /** @description Comma-separated list of API IDs. */
@@ -504,6 +486,8 @@ export interface operations {
                 page?: components["parameters"]["Page"];
                 /** @description Number of results per page. */
                 perPage?: components["parameters"]["PerPage"];
+                /** @description Search term to combine with API filters. Matches API title. */
+                q?: components["parameters"]["Search"];
                 /** @description Filter on organisation URI. */
                 organisation?: components["parameters"]["Organisation"];
                 /** @description Comma-separated list of API IDs. */
@@ -570,6 +554,8 @@ export interface operations {
     listApiFilters: {
         parameters: {
             query?: {
+                /** @description Search term to combine with API filters. Matches API title. */
+                q?: components["parameters"]["Search"];
                 /** @description Filter on organisation URI. */
                 organisation?: components["parameters"]["Organisation"];
                 /** @description Comma-separated list of API IDs. */
@@ -602,42 +588,6 @@ export interface operations {
             400: components["responses"]["400"];
         };
     };
-    searchApis: {
-        parameters: {
-            query: {
-                /** @description Page number (1-based). */
-                page?: components["parameters"]["Page"];
-                /** @description Number of results per page. */
-                perPage?: components["parameters"]["PerPage"];
-                /** @description Filter on organisation URI. */
-                organisation?: components["parameters"]["Organisation"];
-                /** @description Search term. */
-                q: string;
-            };
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            /** @description OK */
-            200: {
-                headers: {
-                    "API-Version": components["headers"]["ApiVersion"];
-                    Link: components["headers"]["Link"];
-                    "Total-Count": components["headers"]["TotalCount"];
-                    "Current-Page": components["headers"]["CurrentPage"];
-                    "Per-Page": components["headers"]["PerPage"];
-                    "Total-Pages": components["headers"]["TotalPages"];
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ApiSummary"][];
-                };
-            };
-            400: components["responses"]["400"];
-        };
-    };
     listLintResults: {
         parameters: {
             query?: never;
@@ -871,7 +821,6 @@ export enum ApiPaths {
     listApis = "/apis",
     createApi = "/apis",
     listApiFilters = "/apis/filters",
-    searchApis = "/apis/_search",
     listLintResults = "/lint-results",
     retreiveApi = "/apis/{id}",
     updateApi = "/apis/{id}",

apps/oss-register/src/components/FacetFiltersForm.tsx

@@ -19,11 +19,18 @@ interface FacetFiltersFormProps {
     filtersTitle: string;
     filterButtonLabel: string;
   };
+  hiddenFields?: [string, string][];
 }
 
 const FacetFiltersForm = (props: FacetFiltersFormProps) => {
   const formRef = useRef<HTMLFormElement>(null);
-  const { filters, action: formAction, method: formMethod, labels } = props;
+  const {
+    filters,
+    action: formAction,
+    method: formMethod,
+    labels,
+    hiddenFields = [],
+  } = props;
   const [{ data, error }, action, pending] = useActionState(
     withState(actions.getFilters),
     {
@@ -60,6 +67,14 @@ const FacetFiltersForm = (props: FacetFiltersFormProps) => {
         action={formAction}
         method={formMethod}
       >
+        {hiddenFields.map(([name, value], index) => (
+          <input
+            key={`${name}-${value}-${index}`}
+            type="hidden"
+            name={name}
+            value={value}
+          />
+        ))}
         <Overlay active={pending} />
         <FacetFilters
           id="facetfilters"