[VisBuilder ] Fix filter and query bugs in the saved objects

[ananzh]

Description

• Save filter and query in vb
• Clean filterManager when start vb
• Add opensearch_dashboards_context to embeddable. This can add filter and query in the expression.

Issues Resolved

• [BUG][VisBuilder] filter (_q) is not saved which causes un-persistent state #5643 This issue is about filter and query are not saved.

The fix is this part in the src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx

    const searchSourceInstance = savedVisBuilderVis.searchSourceFields;
    searchSourceInstance.query = data.query.queryString.getQuery() || null;
    searchSourceInstance.filter = data.query.filterManager.getFilters() || null;
    savedVisBuilderVis.searchSourceFields = searchSourceInstance;

VisBuilder is using searchSourceFields to save states. This is different from Discover which uses searchSource. This fix will ensure the searchSourceInstance get updated filer and query and allow them to be saved in the saved object.

• [BUG][VisBuilder] Filter state is not cleaned when change to vis builder #5644 This issue is about the filter state is not cleaned. So if you add a filter in Discover then open VisBuilder, you will see the same filter loaded. This is not the behavior of other vis.

The fix is in src/plugins/vis_builder/public/plugin.ts to ensure filter state is cleaned if not pin filter.

// make sure the filterManager is refreshed
const filters = pluginsStart.data.query.filterManager.getFilters();
const pinFilters = filters.filter(opensearchFilters.isFilterPinned);
pluginsStart.data.query.filterManager.setFilters(pinFilters ? pinFilters : []);

• [BUG][VisBuilder Migration] Missing filter and query (_q state) when reload a saved legacy vis builder #5646 This issue is about how to load the filter and query in VisBuilder when they are saved.

The fix is in src/plugins/vis_builder/public/application/utils/use/use_saved_vis_builder_vis.ts

const filters = savedVisBuilderVis.searchSourceFields.filter;
 const query = savedVisBuilderVis.searchSourceFields.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]));
      }
}
data.query.filterManager.setAppFilters(actualFilters);
data.query.queryString.setQuery(query);

Basically it loads filter and query from saved object and do some type check. Then it updates data service.

• [BUG] VisBuilder Embeddable don't have filter and query  #6512 This is about emdeddable vis builder can't load filter and query

The fix is in src/plugins/vis_builder/public/embeddable/vis_builder_embeddable.tsx and src/plugins/vis_builder/public/embeddable/vis_builder_embeddable_factory.tsx and src/plugins/visualizations/public/index.ts (just export prepareJson method). The bug is due to we don't have opensearch_dashboards_context in vis builder which is normally used for filter and quey info.

Screenshot

• Filter from other application will not be applied to vis builder. This is consistent with other applications, like discover and table vis. This resolves [BUG][VisBuilder] Filter state is not cleaned when change to vis builder #5644.

fiter-not-global.mov

• Filter and query can be saved in vis builder saved object. This resolves [BUG][VisBuilder] filter (_q) is not saved which causes un-persistent state #5643 and [BUG][VisBuilder Migration] Missing filter and query (_q state) when reload a saved legacy vis builder #5646.

save-filter-query.mov

• When a dashboard loads a saved vis builder, any saved filters and queries will automatically be applied to the embedded vis builder. If new filters or queries are added within the dashboard, these will also apply to the embedded visualization builder. However, these newly added filters and queries will not impact the original settings of the saved vis builder. This is consistent with other applications, like discover and table vis. This resolves [BUG] VisBuilder Embeddable don't have filter and query  #6512.

filter_query_embeddable.mov

• Also checks and ensures the pinned filter work.

pin-filter.mov

Changelog

• skip

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[github-actions]

❌ Invalid Changelog Heading

The '## Changelog' heading in your PR description is either missing or malformed. Please make sure that your PR description includes a '## Changelog' heading with proper spelling, capitalization, spacing, and Markdown syntax.

[github-actions]

❌ Invalid Changelog Heading

The '## Changelog' heading in your PR description is either missing or malformed. Please make sure that your PR description includes a '## Changelog' heading with proper spelling, capitalization, spacing, and Markdown syntax.

[github-actions]

❌ Invalid Prefix For Manual Changeset Creation

Invalid description prefix. Found "fix". Only "skip" entry option is permitted for manual commit of changeset files.

If you were trying to skip the changelog entry, please use the "skip" entry option in the ##Changelog section of your PR description.

[github-actions]

❌ Invalid Prefix For Manual Changeset Creation

Invalid description prefix. Found "fix". Only "skip" entry option is permitted for manual commit of changeset files.

If you were trying to skip the changelog entry, please use the "skip" entry option in the ##Changelog section of your PR description.

[codecov]

Codecov Report

Attention: Patch coverage is 17.85714% with 23 lines in your changes are missing coverage. Please review.

Project coverage is 67.73%. Comparing base (876224b) to head (2baae30).

Files	Patch %	Lines
...ilder/public/embeddable/vis_builder_embeddable.tsx	0.00%	12 Missing ⚠️
...application/utils/use/use_saved_vis_builder_vis.ts	0.00%	8 Missing ⚠️
src/plugins/vis_builder/public/plugin.ts	0.00%	3 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6460   +/-   ##
=======================================
  Coverage   67.73%   67.73%           
=======================================
  Files        3414     3414           
  Lines       66838    66860   +22     
  Branches    10872    10879    +7     
=======================================
+ Hits        45270    45285   +15     
- Misses      18923    18930    +7     
  Partials     2645     2645           

Flag	Coverage Δ
Linux_1	33.20% <17.85%> (-0.01%)	⬇️
Linux_2	55.56% <ø> (ø)
Linux_3	45.25% <ø> (ø)
Linux_4	34.87% <ø> (ø)
Windows_1	33.25% <17.85%> (+0.01%)	⬆️
Windows_2	55.53% <ø> (ø)
Windows_3	45.25% <ø> (ø)
Windows_4	34.87% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ananzh]

@ashwin-pc I moved the save button logic from this PR to #6636

For tests, I think these behavior should better be tested in ftr. Create a meta issue to add cypress tests for VisBuilder #6635

[ashwin-pc]

Suggested one change, but approving since i dont think its a release blocker. However it would be nice if you can make it.

[ashwin-pc]

instead of passing the saved object down, cant you modify the getStateFromSavedObject function to return the searchSourceFields as a part of savedVis too.

export interface VisBuilderSavedVis
  extends Pick<
    VisBuilderSavedObjectAttributes,
    'id' | 'title' | 'description' | 'searchSourceFields'
  > {
  state: RenderState;
}

[ananzh]

Yeah we could. let me polish the code.

[ashwin-pc]

nit: Why do we need this change? Feels like the original logic was intentional.

[ananzh]

don't remember why but it is a request change. otherwise will see

[ashwin-pc]

Nice!

[AMoo-Miki]

nit: pinnedFilters