WDFN_739 - Investigate how to bring in the Vue component to use for components

Before making a pull request

• Put the appropriate EXEMPT flag if needed in the MR title (see https://practices.wma.chs.usgs.gov/practice/peer_code_review/)
• Run all linters (make lint)
• Run all tests (make test)
• Update the changelog appropriately
• If making a release, update code.json, versionNumber and metadataLastUpdated.

Description

Introduced Vue to the monitoring location page javascript. In order to use Vue3, I switched the build tooling to use vite rather than rollup and buble. Vite produces a module so the script import how to change to use modules.

Vue 3 allows us to have multiple Vue "apps" within a single application which should ease the gradual transformation of the component rendering code to Vue. In addition, a plugin redux-connect-vue, allows us to easily use the existing Redux store, selectors, and actions with Vue components while making the result of the selectors reactive. We will be using the Composition API rather than the Options API in our Vue components. This is recommended by the maintainers of Vue for new Vue applications and the plugin is designed to work with the Composition API.

I choose to start with the graph-controls.js component and the tables part of the data-tables.js component. Each presented a different set of challenges.

The vue-component/graph-controls.vue demonstrated how to create reactive variables from selectors and also demonstrated calling actions from event handlers. In this case, in addition to a simple action call, we also needed to show loading indicators and call an asynchronous action to retrieve data. In this case, we needed to be able to access the redux store and the siteno which can be done by using Vue "provide" on the app and then using "inject" to get the objects.

For vue-component/data-tables.vue the challenge was using a third party javascript library to create the paginated tables. Because of the way List.js works, we had to add listeners for the selector to get the updated data and rerender the tables. In the future, we should consider creating our own Vue/USWDS paginated table component.

The two new Vue components have tests that are at least as extensive (in some cases more) than previously. Please note that due to the changes with the build tooling the percentage coverage has gone done somewhat, I believe to differences in how coverage is determined.

After making a pull request

• If appropriate, put the link to the PR in the JIRA ticket
• Assign someone to review unless the change is trivial