Tide Custom Collection filters using aggregations don't update their field options after aggregations load.

[alan-cole]

Environment

• Operating System: Darwin
• Node Version: v16.16.0
• Nuxt Version: 3.6.5
• Nitro Version: 2.5.2
• Package Manager: npm@8.12.1
• Builder: vite
• User Config: extends
• Runtime Modules: -
• Build Modules: -

Reproduction

Create a Custom Collection using a filter that is loaded through aggregations, e.g.

{
  "id": "demo",
  "component": "TideSearchFilterDropdown",
  "filter": {
    "type": "term",
    "value": "field_location_category_name",
    "multiple": false
  },
  "aggregations": {
    "field": "field_location_category_name",
    "source": "elastic"
  },
  "props": {
    "id": "demo",
    "label": "Demo field",
    "placeholder": "Select",
    "type": "RplFormDropdown",
    "multiple": false
  }
}

As we have no props.options defined, it should update it's dynamicOptions after the aggregations have completed.

Describe the bug

TideCustomCollection.vue has:

1. a prop userFilters which is passed to TideSearchFilters attribute filterInputs to defined form elements for user changeable filters.
2. a reactive variable uiFilters which is initially set to userFilters.
3. a hook onAggregationUpdateHook that runs when aggregations are retrieved.

When onAggregationUpdateHook runs, it updates the options in the uiFilters ref, but these new options are not reflected to the user because TideSearchFilters's attribute filterInputs is not populated from uiFilters, but from userFilters.

By changing this line:

https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-tide-search/components/global/TideCustomCollection.vue#L498

from :filterInputs="userFilters" to :filterInputs="uiFilters", when aggregations become available, the form options will correctly update.

Additional context

This bug may also be present in TideSearchListingPage, as it seems to have the same pattern:

https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-tide-search/components/TideSearchListingPage.vue#L150C7-L150C16
uiFilters that update

https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-tide-search/components/TideSearchListingPage.vue#L385
userFilters that is passed to the form.

Solution example

Below are 2 videos to show the difference between the bug as it currently is, and the proposed solution.

https://github.com/dpc-sdp/ripple-framework/assets/12739575/49857c0f-79ce-41a8-b6fe-114d33c12300
In this video using the OOTB TideCustomCollection, the "Area of law" dropdown is still not populated with aggregated results even after the pins have loaded.

https://github.com/dpc-sdp/ripple-framework/assets/12739575/ae38e116-79aa-4920-9521-b4440406aca9
In this video using a modified TideCustomCollection with the uiFilters change, the aggregate results appear as soon as the pins have loaded.

Logs

No response

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[lambry]

Closing issue as this has been address here: #1183