Advanced URL control

[JasonStoltz]

trafficstars

We've seen asks for more control over the Search UI url to in a few different capacities. We'd like do work to enable the following:

• [ ] 1. The ability to build SEO friendly URLs including path manipulation:

  Ex. Before: ?filters=[{field: “states”, values: [“california”, “nevada”]}] After: /states/california-nevada/?size=n_20_n

• [ ] 2. Cleaner filter parameters generally:

  Ex. Before: ?filters=[{field: “states”, values: [“california”, “nevada”]}] After: ?states=california,nevada

• [ ] 3. The ability to maintain unrelated parameters to Search UI in the URL, which are currently overridden.

• [ ] 4. The ability to allowlist/denylist certain parameter from being tracked in the URL

• [ ] 5. The ability to override our paramsToState and stateToParams default behavior, for advanced customization that we don't handle. Issue: https://github.com/elastic/search-ui/issues/808

[botelastic[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.

[botelastic[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.

[JasonStoltz]

Save this bot!

[gerardosabetta]

I had to do this in my code to make searchUI not drop my queryParams when syncing to the url:

    routingOptions: {
      writeUrl(url, { replaceUrl }) {
        const currentQueryParams = querystring.parse(window.location.search);
        const parsedUrl = querystring.parse(url);

        const newUrl = querystring.stringify({
          ...parsedUrl,
          // filters the current query params to only keep the ones that we want to keep
          ...Object.entries(currentQueryParams).reduce((acc, [key, value]) => {
            if (queryParamsToKeep?.includes(key)) {
              acc[key] = value;
            }
            return acc;
          }, {})
        });


        goToView(location.pathname, newUrl, undefined, false, replaceUrl);
      }
    },

goToView is an utility function that handles the route change.

I know this issue is on "Advanced URL control" but besides allowing to override the stateToParams function I think your default stateToParams should merge with the existing queryParams instead of simply replacing them. Otherwise, users of SearchUI would have to sacrifice syncing state (unrelated to search) to URL.

[joemcelroy]

there is a feature in Search UI which allows you to control the URL serialisation / deserialisation. See routingOptions documentation https://docs.elastic.co/search-ui/api/core/configuration#routing-options