Skip to content

Resolve "Refactor URL query parameter handling"

Hiru Fernando requested to merge 132-refactor-url-query-parameter-handling into elasticsearch

What does this MR do and why?

Describe why, not just what. Include links to relevant issues or discussions.

This MR is to remove extra logic for url tracking.

Looks like Elastic search does not necessarily provide fields like query search params, page number, and filters. The only thing that might provide context that we can use is the React API which gives a context provider (https://www.elastic.co/docs/current/search-ui/api/react/search-provider).

import React from "react";
import {
  SearchProvider,
  SearchBox,
  Results,
  Facet,
  Sorting,
  Paging
} from "@elastic/react-search-ui";
import { AppSearchAPIConnector } from "@elastic/search-ui-app-search-connector";

// Configure the Elasticsearch connector
const connector = new AppSearchAPIConnector({
  searchKey: "your-search-key",
  engineName: "your-engine-name",
  hostIdentifier: "your-host-identifier"
});

// Configure the search UI
const config = {
  apiConnector: connector,
  searchQuery: {
    result_fields: {
      title: { raw: {} },
      description: { raw: {} }
    },
    disjunctiveFacets: ["category", "brand"],
    facets: {
      category: { type: "value", size: 20 },
      brand: { type: "value", size: 20 },
      price: {
        type: "range",
        ranges: [
          { from: 0, to: 50, name: "Under $50" },
          { from: 50, to: 100, name: "$50 to $100" },
          { from: 100, to: 200, name: "$100 to $200" },
          { from: 200, name: "$200 and up" }
        ]
      }
    }
  }
};

function App() {
  return (
    <SearchProvider config={config}>
      <div className="App">
        <SearchBox />
        <div className="Body">
          <div className="Facets">
            <Facet field="category" label="Category" />
            <Facet field="brand" label="Brand" />
            <Facet field="price" label="Price" />
          </div>
          <div className="Results">
            <Sorting
              sortOptions={[
                {
                  name: "Relevance",
                  value: "",
                  direction: ""
                },
                {
                  name: "Price: Low to High",
                  value: "price",
                  direction: "asc"
                },
                {
                  name: "Price: High to Low",
                  value: "price",
                  direction: "desc"
                }
              ]}
            />
            <Results
              titleField="title"
              urlField="url"
              shouldTrackClickThrough
            />
            <Paging />
          </div>
        </div>
      </div>
    </SearchProvider>
  );
}

export default App;

The best option I think is instead of adding React into the application, we might just want to stick with our current URL params logic and have trackUrlState: false .

Screenshots, screen recordings, or links to review app

These are strongly recommended to assist reviewers and reduce the time to merge your change.

without-es-urltracking.mp4

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md.
  2. Do a search using home page, make sure no params are on the home page url, go to search results page and make sure the params ARE on the url. Make sure pagination still works, filters work, and each of these changes should reflect on the query params on the url.

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Closes #132 (closed)

Edited by Hiru Fernando

Merge request reports