fix: reset scroll on ExtraParamsChanged by default

[alonsogarciapablo]

https://jira.kroger.com/jira/browse/DCPPERS-12567

Motivation and context

In the Playboard, we use the ExtraParams component (wrapped here). We often modify these extraParams programmatically.

We recently discovered a "bug" that the scroll of the ResultList(which we also use) wasn't getting reseted, causing and extra request to the search endpoint (for the second page or results) and the incorrect results displayed in the list 😢

The ScrollMixin component was already "listening" to the UserChangedExtraParams event (triggered by RenderlessExtraParam) and resetting the scroll of the scrollable element, but it wasn't "listening" to the ExtraParamsChanged event (triggered by ExtraParams).

This PR basically adds ExtraParamsChanged to the "default" list of events that should cause the scroll to be reseted.

• Dependencies. If any, specify:
• Open issue. If applicable, link:

Type of change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that causes existing functionality to not work as expected)
• Change requires a documentation update

What is the destination branch of this PR?

• Main
• Other. Specify:

How has this been tested?

Tests performed according to testing guidelines:

I tested this manually by adding the following to packages/x-components/src/views/home/Home.vue:

<template>
             ...
            <ExtraParams :values="extraParams" />
            <button @click="extraParams.a = extraParams.a + 1">Change extraParams</button>
            ...
</template>

<script>
    ...,
    components: {
      ...,
      ExtraParams
    },
    data() {
      return {
        extraParams: {
          a: 0
        }
      }
    }
<script>

Without this fix (aka HOW TO REPRODUCE the issue):

• Search for "dress"
• Scroll down a couple of "pages"
• Click the "Change extraParams" buttons
• Scroll of the list of results doesn't change and new results are fetched

With this fix:

• Search for "dress"
• Scroll down a couple of "pages"
• Click the "Change extraParams" buttons
• List of results is scrolled to the top and new results are fetched

Checklist:

• My code follows the style guidelines of this project.
• I have performed a self-review on my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes.

[diegopf]

Thanks for submitting the PR @alonsogarciapablo! We will review it as soon as we can.

[alonsogarciapablo]

We're finally solving the issue in playboard-core by using the base-scroll component and passing the list of events that should trigger the scroll reset via the resetOn prop (including ExtraParamsChanged). Still, I think this PR makes sense and we're planning to upgrade to the latest version of x-components once this is merged 👍

[annacv]

Hi @alonsogarciapablo,
Is it possible to emit the UserChangedExtraParams event with the new params as payload when you modify the extraParams?

[alonsogarciapablo]

Hey @annacv, we're using the ExtraParams component (here) which is triggering the ExtraParamsChanged.

Could we also trigger an UserChangedExtraParams event? Yes, that would be an option too. But then both events would be triggered... Also, perhaps this should happen more automagically so that anyone who uses ExtraParams can expect this behaviour?

[annacv]

Hi @alonsogarciapablo,
The ExtraParams component is not intended for changing extra-params dynamically, it is just a “register” of all the params that will be used when the application is initialized. IMO, the UserChangedExtraParams event should not be attached by default to the component in the library, but for your use case, reacting to the ExtraParams 's computed prop values's change by emitting the UserChangedExtraParams event would be a good approach.

Anyway, we can argue about changing the ScrollMixin behavior and the events it is listening to. In this case, we can remove the UserChangedExtraParams event from the list and only listen to ExtraParamsChanged. At the end, whenever theUserChangedExtraParams event will be emitted, the ExtraParamsXStoreModule will emit ExtraParamsChanged reacting to the state change.