Refactor the filter component to rely on props instead of vuex actions
Summary
We're about to move the security dashboard to a GraphQL approach. In order to do this, we need to pull out some of the Vuex stuff and fall back to prop drilling whilst we're in this transition phase.
Currently, the <dashboard-filters>
and <dashboard-filter>
components are very heavily tied to Vuex.
My proposal is to remove the Vuex stuff out of the <dashboard-filter>
component and pull it up to the <dashboard-filters>
component. Then we can pass the data down with props, and bubble the events up with emitters.
Doing this will allow us to create a new filter bar that uses all the GraphQL goodness for first class vulnerabilities and calls on the <dashboard-filter>
component for all the interactivity.
Improvements
This approach not only makes moving to GraphQL easier, but it allows us to still use the same filter component on the pipeline dashboard so we wouldn't have to make any filter improvements to two different components.
Risks
I can't forsee any risks here, but they sound like famous last words
Involved components
ee/app/assets/javascripts/security_dashboard/components/filter.vue
ee/app/assets/javascripts/security_dashboard/components/filters.vue
Along with the relevant test files.