Default search order

app/components/form.tsx

@@ -5,6 +5,7 @@ import {
   BoxProps,
   ButtonBase,
   Checkbox as MUICheckbox,
+  InputProps,
   FormControlLabel,
   Input as MUIInput,
   Radio as MUIRadio,
@@ -340,6 +341,7 @@ export const MinimalisticSelect = ({
   onChange,
   smaller = false,
   disabled,
+  ...props
 }: {
   id: string;
   options: Option[];
@@ -379,6 +381,7 @@ export const MinimalisticSelect = ({
       onChange={onChange}
       value={value}
       disabled={disabled}
+      {...props}
     >
       {options.map((opt) => (
         <option key={opt.value} value={opt.value || undefined}>
@@ -509,32 +512,30 @@ export const SearchField = ({
   value,
   defaultValue,
   placeholder,
-  onKeyPress,
-  onReset,
-  onFocus,
-  onBlur,
   sx,
   inputRef,
+  InputProps,
 }: {
   id: string;
   label?: string | ReactNode;
   disabled?: boolean;
   defaultValue?: string;
   placeholder?: string;
-  onKeyPress?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
-  onReset?: () => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
+  InputProps?: InputProps;
   inputRef?: React.RefObject<HTMLInputElement>;
   sx?: BoxProps["sx"];
 } & FieldProps) => {
   const { search } = useBrowseContext();
-  const handleReset = useCallback(() => {
-    if (inputRef?.current) {
-      inputRef.current.value = "";
-    }
-    onReset?.();
-  }, [inputRef, onReset]);
+  const onReset = InputProps?.onReset;
+  const handleReset = useCallback(
+    (ev) => {
+      if (inputRef?.current) {
+        inputRef.current.value = "";
+      }
+      onReset?.(ev);
+    },
+    [inputRef, onReset]
+  );
   return (
     <Box
       sx={{ color: "grey.700", fontSize: "1rem", position: "relative", ...sx }}
@@ -549,16 +550,18 @@ export const SearchField = ({
         id={id}
         value={value}
         defaultValue={defaultValue}
-        onKeyPress={onKeyPress}
+        {...InputProps}
         placeholder={placeholder}
-        onFocus={onFocus}
-        onBlur={onBlur}
         autoComplete="off"
         inputRef={inputRef}
         sx={{ width: "100%", input: { borderRadius: 2 } }}
         endAdornment={
           onReset && search && search !== "" ? (
-            <ButtonBase sx={{ p: 0, cursor: "pointer" }} onClick={handleReset}>
+            <ButtonBase
+              sx={{ p: 0, cursor: "pointer" }}
+              onClick={handleReset}
+              data-testid="clearSearch"
+            >
               <VisuallyHidden>
                 <Trans id="controls.search.clear">Clear search field</Trans>
               </VisuallyHidden>

app/configurator/components/dataset-browse.tsx

@@ -242,19 +242,21 @@ export const useBrowseState = () => {
     DataCubeResultOrder.Score
   );
 
+  console.log({ order });
+
   return useMemo(
     () => ({
       includeDrafts: !!includeDrafts,
       setIncludeDrafts,
       onReset: () => {
-        setParams({ search: "", order: previousOrderRef.current });
+        setParams({ search: "", order: DataCubeResultOrder.CreatedDesc });
       },
       onSubmitSearch: (newSearch: string) => {
         setParams({
           search: newSearch,
           order:
             newSearch === ""
-              ? DataCubeResultOrder.TitleAsc
+              ? DataCubeResultOrder.CreatedDesc
               : previousOrderRef.current,
         });
       },
@@ -330,9 +332,11 @@ export const SearchDatasetBox = ({
     onReset,
     includeDrafts,
     setIncludeDrafts,
-    order,
+    order: stateOrder,
     onSetOrder,
   } = browseState;
+
+  const order = stateOrder || DataCubeResultOrder.CreatedDesc;
   const options = [
     {
       value: DataCubeResultOrder.Score,
@@ -384,10 +388,15 @@ export const SearchDatasetBox = ({
           id="datasetSearch"
           label={searchLabel}
           defaultValue={search || ""}
-          onKeyPress={handleKeyPress}
-          onReset={onReset}
+          InputProps={{
+            inputProps: {
+              "data-testid": "datasetSearch",
+            },
+            onKeyPress: handleKeyPress,
+            onReset: onReset,
+            onFocus: () => setShowDraftCheckbox(true),
+          }}
           placeholder={placeholderLabel}
-          onFocus={() => setShowDraftCheckbox(true)}
           sx={{ flexGrow: 1 }}
         />
       </Box>
@@ -442,6 +451,7 @@ export const SearchDatasetBox = ({
             id="datasetSort"
             smaller={true}
             value={order}
+            data-testid="datasetSort"
             options={isSearching ? options : options.slice(1)}
             onChange={(e) => {
               onSetOrder(e.target.value as DataCubeResultOrder);

app/docs/form.docs.tsx

@@ -182,7 +182,9 @@ ${(
             id="search-ex-2"
             label="Tier"
             value="Affe"
-            onReset={() => alert("reset search")}
+            InputProps={{
+              onReset: () => alert("reset search"),
+            }}
           />
         </BrowseStateProvider>
       </ReactSpecimen>

app/graphql/resolvers/rdf.ts

@@ -14,7 +14,6 @@ import {
   QueryResolvers,
   Resolvers,
 } from "@/graphql/resolver-types";
-import { ResolvedDataCube } from "@/graphql/shared-types";
 import { parseLocaleString } from "@/locales/locales";
 import { createSource } from "@/rdf/create-source";
 import {
@@ -33,7 +32,37 @@ import {
 } from "@/rdf/query-cube-metadata";
 import { unversionObservation } from "@/rdf/query-dimension-values";
 import { queryHierarchy } from "@/rdf/query-hierarchies";
-import { searchCubes } from "@/rdf/query-search";
+import { SearchResult, searchCubes } from "@/rdf/query-search";
+
+const sortResults = (
+  results: SearchResult[],
+  order: DataCubeResultOrder | undefined | null,
+  locale: string | undefined | null
+): SearchResult[] => {
+  const getCube = (r: SearchResult) => r.dataCube.data;
+  switch (order) {
+    case DataCubeResultOrder.TitleAsc:
+      results.sort((a, b) =>
+        getCube(a).title.localeCompare(getCube(b).title, locale ?? undefined)
+      );
+      break;
+    case DataCubeResultOrder.CreatedDesc:
+    case undefined:
+    case null:
+      results.sort((a, b) => {
+        const ra = getCube(a).datePublished || "0";
+        const rb = getCube(b).datePublished || "0";
+        return descending(ra, rb);
+      });
+      break;
+    case DataCubeResultOrder.Score:
+      break;
+    default:
+      const exhaustCheck = order;
+      return exhaustCheck;
+  }
+  return results;
+};
 
 export const dataCubes: NonNullable<QueryResolvers["dataCubes"]> = async (
   _,
@@ -42,20 +71,6 @@ export const dataCubes: NonNullable<QueryResolvers["dataCubes"]> = async (
   info
 ) => {
   const { sparqlClient, sparqlClientStream } = await setup(info);
-  const sortResults = <T extends unknown[]>(
-    results: T,
-    getter: (d: T[number]) => ResolvedDataCube["data"]
-  ) => {
-    if (order === DataCubeResultOrder.TitleAsc) {
-      results.sort((a: any, b: any) =>
-        getter(a).title.localeCompare(getter(b).title, locale ?? undefined)
-      );
-    } else if (order === DataCubeResultOrder.CreatedDesc) {
-      results.sort((a: any, b: any) =>
-        descending(getter(a).datePublished, getter(b).datePublished)
-      );
-    }
-  };
 
   const { candidates, meta } = await searchCubes({
     locale,
@@ -70,7 +85,7 @@ export const dataCubes: NonNullable<QueryResolvers["dataCubes"]> = async (
     queries.push(query);
   }
 
-  sortResults(candidates, (x) => x.dataCube.data);
+  sortResults(candidates, order, locale);
   return candidates;
 };
 

app/rdf/query-search.ts

@@ -8,6 +8,7 @@ import StreamClient from "sparql-http-client";
 import ParsingClient from "sparql-http-client/ParsingClient";
 
 import { truthy } from "@/domain/types";
+import { Awaited } from "@/domain/types";
 import { RequestQueryMeta } from "@/graphql/query-meta";
 import { DataCubeSearchFilter } from "@/graphql/resolver-types";
 import { ResolvedDataCube } from "@/graphql/shared-types";
@@ -273,3 +274,7 @@ export const searchCubes = async ({
     },
   };
 };
+
+export type SearchResult = Awaited<
+  ReturnType<typeof searchCubes>
+>["candidates"][0];

e2e/actions.ts

@@ -22,6 +22,9 @@ export const createActions = ({
   selectors,
   within,
 }: TestContext & { selectors: Selectors }) => ({
+  search: {
+    clear: async () => await screen.getByTestId("clearSearch").click(),
+  },
   datasetPreview: {
     load: async (iri: string, dataSource: "Int" | "Prod") => {
       await page.goto(

e2e/search.spec.ts

@@ -1,19 +1,22 @@
 import { within } from "@playwright-testing-library/test";
+import { Locator } from "@playwright/test";
 
 import { test, expect } from "./common";
 
+const getSelectValue = async (locator: Locator) => {
+  return locator.evaluate((ev) => (ev as HTMLSelectElement).value);
+};
+
 test("should be possible to open a search URL, and search state should be recovered", async ({
   page,
-  screen,
   selectors,
 }) => {
-  const ctx = { page, screen };
-
   test.slow();
 
-  page.goto(
+  await page.goto(
     `/en/browse?includeDrafts=true&order=SCORE&search=category&dataSource=Int`
   );
+  await selectors.search.resultsCount();
 
   expect(await selectors.search.searchInput().getAttribute("value")).toEqual(
     "category"
@@ -55,3 +58,58 @@ test("search results count coherence", async ({ page, screen, selectors }) => {
     await page.locator(`:text("${count} results")`).waitFor({ timeout: 10000 });
   }
 });
+
+test("sort order", async ({ page, selectors, screen, actions }) => {
+  await page.goto("/en/browse?dataSource=Int");
+  const resultCount = await selectors.search.resultsCount();
+  const text = await resultCount.textContent();
+  const select = selectors.search.datasetSort().locator("select");
+
+  expect(await getSelectValue(select)).toBe("CREATED_DESC");
+
+  const searchInput = screen.getAllByPlaceholderText(
+    "Name, description, organization, theme, keyword"
+  );
+
+  // Search something, order should be score
+  await searchInput.type("NFI");
+  await page.keyboard.press("Enter");
+  expect(await getSelectValue(select)).toBe("SCORE");
+
+  // Clear via input
+  await searchInput.selectText();
+  await page.keyboard.press("Delete");
+  await page.keyboard.press("Enter");
+  expect(await getSelectValue(select)).toBe("CREATED_DESC");
+
+  // Search again
+  await searchInput.type("NFI");
+  await page.keyboard.press("Enter");
+  expect(await getSelectValue(select)).toBe("SCORE");
+
+  // Clear via button
+  await actions.search.clear();
+  expect(await getSelectValue(select)).toBe("CREATED_DESC");
+  expect(await searchInput.getAttribute("value")).toEqual("");
+
+  // Search again
+  await searchInput.type("NFI");
+  await page.keyboard.press("Enter");
+  expect(await getSelectValue(select)).toBe("SCORE");
+
+  // Select another order, clear, then search
+  await select.selectOption("TITLE_ASC");
+  await actions.search.clear();
+  await searchInput.type("NFI");
+  await page.keyboard.press("Enter");
+  expect(await getSelectValue(select)).toBe("TITLE_ASC");
+
+  // Select another order, clear, then search, order should be back
+  // to previous order
+  await select.selectOption("SCORE");
+  await actions.search.clear();
+  expect(await getSelectValue(select)).toBe("CREATED_DESC");
+  await searchInput.type("NFI");
+  await page.keyboard.press("Enter");
+  expect(await getSelectValue(select)).toBe("SCORE");
+});

e2e/selectors.ts

@@ -12,8 +12,9 @@ export const createSelectors = ({ screen, page, within }: Ctx) => {
       options: () => page.locator('li[role="option"]'),
     },
     search: {
-      searchInput: () => page.locator("#datasetSearch"),
+      searchInput: () => screen.getByTestId("datasetSearch"),
       draftsCheckbox: () => page.locator("#dataset-include-drafts"),
+      datasetSort: () => screen.getByTestId("datasetSort"),
       navItem: () => screen.findByTestId("navItem"),
       navChip: () => screen.findByTestId("navChip"),
       resultsCount: () =>