[BUG][Discover] Updating a filter for a saved search does not show up when sharing about opensearch-dashboards

[ananzh]

When add a new filter to a saved search, then refresh the url: If saved object id exist, in the following effect

useEffect(() => {
    (async () => {
      const savedSearchInstance = await getSavedSearchById(savedSearchId);
      setSavedSearch(savedSearchInstance);

      // sync initial app filters from savedObject to filterManager
      const filters = cloneDeep(savedSearchInstance.searchSource.getOwnField('filter'));
      const query = savedSearchInstance.searchSource.getField('query') || data.query.queryString.getDefaultQuery();
      const actualFilters = [];
      if (filters !== undefined) {
        const result = typeof filters === 'function' ? filters() : filters;
        if (result !== undefined) {
          actualFilters.push(...(Array.isArray(result) ? result : [result]));
        }
      }
      filterManager.setAppFilters(actualFilters);
      data.query.queryString.setQuery(query);
      if (savedSearchInstance !== null && savedSearchInstance !== void 0 && savedSearchInstance.id) {
        chrome.recentlyAccessed.add(savedSearchInstance.getFullPath(), savedSearchInstance.title, savedSearchInstance.id);
      }
    })();
    return () => {};
    // This effect will only run when getSavedSearchById is called, which is
    // only called when the component is first mounted.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [getSavedSearchById, savedSearchId]);

data.query.queryString.setQuery(query); will reset the filter using the saved filter in data service which will wrap out the data filter.

[ananzh]

We could modify the logic in use_search to

useEffect(() => {
    (async () => {
      const savedSearchInstance = await getSavedSearchById(savedSearchId);
      setSavedSearch(savedSearchInstance);

      // sync initial app filters from savedObject to filterManager
      const savedFilters = cloneDeep(savedSearchInstance.searchSource.getOwnField('filter'));
      const savedQuery = savedSearchInstance.searchSource.getField('query');
      // data.query.queryString.getDefaultQuery();
      const actualFilters = [];

      // Load the filters from the filter manager
      const filterManagerFilters = data.query.filterManager.getFilters();
      const queryStringQuery = data.query.queryString.getDefaultQuery();

      // Determine which set of filters to use
      let selectedFilters;
      let selectedQuery: Query | undefined;

      if (!filterManagerFilters || filterManagerFilters.length === 0) {
        // when first load, use saved object's filters
        selectedFilters = savedFilters;
        selectedQuery = savedQuery;
      } else {
        // allow update filters after load a saved search
        selectedFilters = filterManagerFilters;
        selectedQuery = queryStringQuery;
      }

      if (selectedFilters !== undefined) {
        const result = typeof selectedFilters === 'function' ? selectedFilters() : selectedFilters;
        if (result !== undefined) {
          actualFilters.push(...(Array.isArray(result) ? result : [result]));
        }
      }

      filterManager.setAppFilters(actualFilters);
      data.query.queryString.setQuery(selectedQuery);

      if (savedSearchInstance?.id) {
        chrome.recentlyAccessed.add(
          savedSearchInstance.getFullPath(),
          savedSearchInstance.title,
          savedSearchInstance.id
        );
      }
    })();

    return () => {};
    // This effect will only run when getSavedSearchById is called, which is
    // only called when the component is first mounted.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [getSavedSearchById, savedSearchId]);

1. when we load the url with id, filterManager should be empty. we just need to capture the saved filter.
2. when we modify the filter later, we need to capture the filter from data service.

[ananzh]

The query should have the same issue and we need to modify it as well