## Summary The [operations][operations dashboard]-, [environments][environments dashboard]- and [security][security dashboard] dashboard (instance level) share a [UI-component][project selector vue component] for searching and adding projects to the respective dashboard. Both the operations- and environments- dashboard use the same [Vuex related][current shared vuex] code. Even though the security dashboard could re-use most of the state and actions, it is currently using a separate [Vuex module][security dashboard project selector vuex]. The main differences between the two are: * [ETag polling][etag polling] on operations- and environments dashboard * [Drag and drop][operations dashboard project setter] ordering of added projects on operations- and environments dashboard ([using localStorage][dashboard order local storage]) This separation has already caused [a bug][ux bug] and is likely to make future [accessibility][a11y bug]- and UI improvements more difficult. ## Proposed Refactor * **Project Selector component/Vuex module** * [x] gitlab~11290567 Change `GlInfiniteScroll` to not display `totalItems` in its legend if it wasn't supplied. (This was the underlying reason for https://gitlab.com/gitlab-org/gitlab/-/issues/196526.) * https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1404 * [x] gitlab~11290567 Use `GlInfiniteScroll`'s default slot in the [project selector vue component] so that the legend can be translated. https://gitlab.com/gitlab-org/gitlab/-/merge_requests/33771 * [x] gitlab~11290567 (Maybe) Make all of the [project selector vue component]'s props `required`, since any consumer of the component almost certainly _should_ supply all of them to get reasonable behaviour. https://gitlab.com/gitlab-org/gitlab/-/merge_requests/33746 * [ ] gitlab~11290608 Extract a new Vuex module from the the existing [Instance Security Dashboard's Vuex module][security dashboard project selector vuex], with the actions/mutations/getters necessary to drive the [project selector vue component] * This likely means: * Fetching projects given a search query * The ability to page in more search results on demand * The ability to add/remove projects from a "selected" list * Exposing paging information * Other unrelated functionality, e.g., `localStorage` interactions, polling, would remain the responsibility of the _parent_ Vuex stores/modules. * [ ] gitlab~11290567 (Maybe) Add documentation to the [project selector vue component] that it's designed to be used with the newly extract Vuex module * [ ] gitlab~11290590 (Maybe) Create a Vuex-connected wrapper of the [project selector vue component], so that is somewhat abstracted away from a consuming component. The API of this would be reduced to basically nothing: `<project-selector-vuex />`. Consuming components would then inspect the relevant Vuex module for "selected" projects. * **Instance Security Dashboard** * [ ] gitlab~11290590 Migrate the Instance Security Dashboard to use the newly extract common Vuex module * [ ] gitlab~11290577 (Maybe) Migrate the Instance Security Dashboard to use the new Vuex-connected wrapper for the [project selector vue component] * **Environments Dashboard** * [ ] gitlab~11290608 Migrate the Environments dashboard over to the new Vuex module * [ ] gitlab~11290577 (Maybe) Migrate the Environments dashboard over to the new new Vuex-connected wrapper for the [project selector vue component] * **Operations Dashboard** * [ ] gitlab~11290608 Migrate the Operations dashboard over to the new Vuex module * [ ] gitlab~11290577 (Maybe) Migrate the Operations dashboard over to the new new Vuex-connected wrapper for the [project selector vue component] ## Risks * [Security Dashboard][security dashboard] Project Selector * [Operations Dashboard][operations dashboard] Project Selector * [Environments Dashboard][environments dashboard] Project Selector * [Operations Dashboard][operations dashboard] Dashboard * [Environments Dashboard][environments dashboard] Dashboard ## Involved components * [Project selector][project selector vue component] * [Operations- and Environments Dashboard vuex store][current shared vuex] * [Security Dashboard Vuex module][security dashboard project selector vuex] [project selector vue component]: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue [operations dashboard]: https://gitlab.com/-/operations [operations dashboard project setter]: https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue#L48 [environments dashboard]: https://gitlab.com/-/operations/environments [security dashboard]: https://gitlab.com/-/operations/security [etag polling]: https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/vue_shared/dashboards/store/actions.js#L98 [current shared vuex]: https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/vue_shared/dashboards/store/index.js [dashboard order local storage]: https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/vue_shared/dashboards/store/mutations.js#L23 [security dashboard project selector vuex]: https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/security_dashboard/store/modules/project_selector/index.js [ux bug]: https://gitlab.com/gitlab-org/gitlab/-/issues/196526 [a11y bug]: https://gitlab.com/gitlab-org/gitlab/-/issues/210305