[6823] Pinia Task 6 - product-tables

frontend/src/pages/team/Tables/Table/TableExplorer/components/RowsHeader.vue

@@ -16,11 +16,14 @@
 
 <script>
 import { RefreshIcon } from '@heroicons/vue/outline'
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import MenuCollapse from '../../.././../../../components/icons/menu-collapse.js'
 import MenuExpand from '../../.././../../../components/icons/menu-expand.js'
 
+import { useProductTablesStore } from '@/stores/product-tables.js'
+
 export default {
     name: 'RowsHeader',
     components: { MenuCollapse, MenuExpand, RefreshIcon },
@@ -32,19 +35,18 @@ export default {
     },
     emits: ['toggle-collapse'],
     computed: {
-        ...mapState('account', ['team']),
-        ...mapState('product/tables', ['tableSelection'])
+        ...mapVuexState('account', ['team']),
+        ...mapState(useProductTablesStore, ['tableSelection'])
     },
     methods: {
-        ...mapActions('product/tables', ['getTableData', 'setTableLoadingState']),
+        ...mapActions(useProductTablesStore, ['getTableData', 'setTableLoadingState']),
         refreshTable () {
-            return this.setTableLoadingState(true)
-                .then(() => this.getTableData({
-                    teamId: this.team.id,
-                    databaseId: this.$route.params.id,
-                    tableName: this.tableSelection
-                }))
-                .finally(() => this.setTableLoadingState(false))
+            this.setTableLoadingState(true)
+            return this.getTableData({
+                teamId: this.team.id,
+                databaseId: this.$route.params.id,
+                tableName: this.tableSelection
+            }).finally(() => this.setTableLoadingState(false))
         }
     }
 }

frontend/src/pages/team/Tables/Table/TableExplorer/components/RowsList.vue

@@ -20,17 +20,19 @@
 </template>
 
 <script>
+import { mapActions, mapState } from 'pinia'
 import { defineComponent, markRaw } from 'vue'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapState as mapVuexState } from 'vuex'
 
 import TextCell from './table-cells/text-cell.vue'
 
+import { useProductTablesStore } from '@/stores/product-tables.js'
+
 export default defineComponent({
     name: 'RowsList',
     computed: {
-        ...mapState('product/tables', ['tableSelection', 'isLoading']),
-        ...mapGetters('product/tables', ['selectedTable']),
-        ...mapState('account', ['team']),
+        ...mapState(useProductTablesStore, ['tableSelection', 'isLoading', 'selectedTable']),
+        ...mapVuexState('account', ['team']),
         columns () {
             return (this.selectedTable?.schema ?? []).map((row) => {
                 return {
@@ -73,7 +75,7 @@ export default defineComponent({
         this.updateTableSelection(null)
     },
     methods: {
-        ...mapActions('product/tables', ['getTableSchema', 'getTableData', 'updateTableSelection']),
+        ...mapActions(useProductTablesStore, ['getTableSchema', 'getTableData', 'updateTableSelection']),
         getTableComponent (type) {
             const componentMap = {
                 text: TextCell

frontend/src/pages/team/Tables/Table/TableExplorer/components/TablesList.vue

@@ -47,11 +47,11 @@
 import { PencilAltIcon, PlusIcon, SearchIcon, TableIcon } from '@heroicons/vue/outline'
 import { mapActions, mapState } from 'pinia'
 import { defineComponent, markRaw } from 'vue'
-import { mapGetters, mapActions as mapVuexActions, mapState as mapVuexState } from 'vuex'
 
 import CreateTable from '../drawers/CreateTable.vue'
 import TableSchema from '../drawers/TableSchema.vue'
 
+import { useProductTablesStore } from '@/stores/product-tables.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default defineComponent({
@@ -66,23 +66,22 @@ export default defineComponent({
     },
     computed: {
         ...mapState(useUxDrawersStore, ['rightDrawer']),
-        ...mapGetters('product/tables', { getTables: 'tables' }),
-        ...mapVuexState('product/tables', { tablesState: 'tables', tableSelection: 'tableSelection' }),
+        ...mapState(useProductTablesStore, { tablesState: 'tables', tableSelection: 'tableSelection' }),
         filteredTables () {
             return this.tables.filter(t => (t.name ?? '').toLowerCase().includes(this.filterTerm.toLowerCase()))
         }
     },
     watch: {
         tablesState: {
             deep: true,
-            handler (newVal) {
-                this.tables = this.getTables(this.$route.params.id)
+            handler () {
+                this.tables = this.tablesState[this.$route.params.id] ?? []
             }
         }
     },
     methods: {
         ...mapActions(useUxDrawersStore, ['openRightDrawer', 'closeRightDrawer']),
-        ...mapVuexActions('product/tables', ['updateTableSelection']),
+        ...mapActions(useProductTablesStore, ['updateTableSelection']),
 
         onCreateTable () {
             this.openRightDrawer({

frontend/src/pages/team/Tables/Table/TableExplorer/drawers/CreateTable.vue

@@ -39,12 +39,13 @@
 </template>
 
 <script>
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapGetters, mapState, mapActions as mapVuexActions } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import TableColumn from './components/TableColumn.vue'
 
+import { useProductTablesStore } from '@/stores/product-tables.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default defineComponent({
@@ -57,7 +58,7 @@ export default defineComponent({
     },
     computed: {
         ...mapGetters('account', ['team']),
-        ...mapState('product/tables', ['newTable']),
+        ...mapState(useProductTablesStore, ['newTable']),
         hasErrors () {
             return Object.values(this.errors).some(v => v != null)
         }
@@ -77,7 +78,7 @@ export default defineComponent({
     },
     methods: {
         ...mapActions(useUxDrawersStore, ['closeRightDrawer', 'setRightDrawerHeader']),
-        ...mapVuexActions('product/tables', ['createTable', 'getTables', 'addNewTableColumn', 'removeNewTableColumn']),
+        ...mapActions(useProductTablesStore, ['createTable', 'getTables', 'addNewTableColumn', 'removeNewTableColumn']),
         validateForm () {
             const columnsHaveDuplicateNames = new Set(this.newTable.columns.map(col => col.name)).size !== this.newTable.columns.length
             const allColumnDoesntHaveATypeAssigned = this.newTable.columns.some(col => !col.type)

frontend/src/pages/team/Tables/Table/TableExplorer/drawers/TableSchema.vue

@@ -27,11 +27,12 @@
 <script>
 import { mapActions } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapState, mapActions as mapVuexActions } from 'vuex'
+import { mapState } from 'vuex'
 
 import Alerts from '../../../../../../services/alerts.js'
 import Dialog from '../../../../../../services/dialog.js'
 
+import { useProductTablesStore } from '@/stores/product-tables.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default defineComponent({
@@ -50,7 +51,7 @@ export default defineComponent({
     },
     methods: {
         ...mapActions(useUxDrawersStore, ['closeRightDrawer', 'setRightDrawerHeader']),
-        ...mapVuexActions('product/tables', ['deleteTable', 'getTables']),
+        ...mapActions(useProductTablesStore, ['deleteTable', 'getTables']),
         submit () {
             Dialog.show({
                 header: 'Delete Table',

frontend/src/pages/team/Tables/Table/TableExplorer/index.vue

@@ -9,14 +9,16 @@
 </template>
 
 <script>
+import { mapActions } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapActions } from 'vuex'
 
 import RowsHeader from './components/RowsHeader.vue'
 
 import RowsList from './components/RowsList.vue'
 import TablesList from './components/TablesList.vue'
 
+import { useProductTablesStore } from '@/stores/product-tables.js'
+
 export default defineComponent({
     name: 'TableExplorer',
     components: { RowsHeader, RowsList, TablesList },
@@ -33,7 +35,7 @@ export default defineComponent({
             })
     },
     methods: {
-        ...mapActions('product/tables', ['getTables'])
+        ...mapActions(useProductTablesStore, ['getTables'])
     }
 })
 </script>

frontend/src/pages/team/Tables/Table/components/TableCredentials.vue

@@ -67,19 +67,20 @@
 
 import { DatabaseIcon, LockClosedIcon } from '@heroicons/vue/outline'
 
+import { mapState } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapGetters, mapState } from 'vuex'
 
 import TextCopier from '../../../../../components/TextCopier.vue'
 
 import PasswordField from '../../../../../ui-components/components/PasswordField.vue'
 
+import { useProductTablesStore } from '@/stores/product-tables.js'
+
 export default defineComponent({
     name: 'TableCredentials',
     components: { TextCopier, PasswordField, DatabaseIcon, LockClosedIcon },
     computed: {
-        ...mapState('product/tables', ['databases']),
-        ...mapGetters('product/tables', ['database'])
+        ...mapState(useProductTablesStore, ['database'])
     }
 })
 </script>

frontend/src/pages/team/Tables/Table/index.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script>
+
 import { defineComponent } from 'vue'
-import { mapActions, mapGetters, mapState } from 'vuex'
 
 export default defineComponent({
     name: 'TeamTable',
@@ -17,8 +17,6 @@ export default defineComponent({
         }
     },
     computed: {
-        ...mapGetters('account', ['team']),
-        ...mapState('product/tables', ['tables']),
         tabs () {
             return [
                 {
@@ -54,9 +52,6 @@ export default defineComponent({
     },
     mounted () {
         this.$emit('set-tabs', this.tabs)
-    },
-    methods: {
-        ...mapActions('product/tables', ['getTables'])
     }
 })
 </script>

frontend/src/pages/team/Tables/components/ChooseDatabase.vue

@@ -63,11 +63,14 @@
 
 <script>
 import { CheckIcon, MinusIcon } from '@heroicons/vue/outline'
+import { mapActions } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapActions, mapState } from 'vuex'
+import { mapState } from 'vuex'
 
 import MediumTile from '../../../../components/tiles/MediumTile.vue'
 
+import { useProductTablesStore } from '@/stores/product-tables.js'
+
 export default defineComponent({
     name: 'NewDatabase',
     components: {
@@ -100,7 +103,7 @@ export default defineComponent({
         }
     },
     methods: {
-        ...mapActions('product/tables', ['createDatabase']),
+        ...mapActions(useProductTablesStore, ['createDatabase']),
         onPgTableCreate () {
             this.loading = true
             return this.createDatabase({ teamId: this.team.id })

frontend/src/pages/team/Tables/components/CreateDatabase.vue

@@ -3,11 +3,14 @@
 </template>
 
 <script>
+import { mapActions } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapActions, mapGetters } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import DatabaseForm from './DatabaseForm.vue'
 
+import { useProductTablesStore } from '@/stores/product-tables.js'
+
 export default defineComponent({
     name: 'CreateDatabase',
     components: { DatabaseForm },
@@ -22,7 +25,7 @@ export default defineComponent({
         ...mapGetters('account', ['team'])
     },
     methods: {
-        ...mapActions('product/tables', ['createDatabase']),
+        ...mapActions(useProductTablesStore, ['createDatabase']),
         onSubmit (payload) {
             return this.createDatabase({ teamId: this.team.id, databaseName: payload.name })
                 .then(() => {

frontend/src/pages/team/Tables/index.vue

@@ -45,13 +45,16 @@
 </template>
 
 <script>
+import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import EmptyState from '../../../components/EmptyState.vue'
 import FeatureUnavailable from '../../../components/banners/FeatureUnavailable.vue'
 import FeatureUnavailableToTeam from '../../../components/banners/FeatureUnavailableToTeam.vue'
 
+import { useProductTablesStore } from '@/stores/product-tables.js'
+
 export default defineComponent({
     name: 'TeamTables',
     components: {
@@ -67,7 +70,7 @@ export default defineComponent({
     },
     computed: {
         ...mapGetters('account', ['featuresCheck', 'team', 'pendingTeamChange']),
-        ...mapState('product/tables', ['databases'])
+        ...mapState(useProductTablesStore, ['databases'])
     },
     watch: {
         '$route.params.id': {
@@ -105,7 +108,7 @@ export default defineComponent({
         }
     },
     methods: {
-        ...mapActions('product/tables', ['getDatabases', 'updateDatabaseSelection']),
+        ...mapActions(useProductTablesStore, ['getDatabases', 'updateDatabaseSelection']),
         redirectIfNeeded () {
             if (Object.keys(this.databases).length === 0) {
                 // if the user doesn't have any tables, we'll redirect him to the offering page

frontend/src/store/modules/account/index.js

@@ -15,6 +15,7 @@ import { useProductAssistantStore } from '@/stores/product-assistant.js'
 import { useProductExpertInsightsAgentStore } from '@/stores/product-expert-insights-agent.js'
 import { useProductExpertOperatorAgentStore } from '@/stores/product-expert-operator-agent.js'
 import { useProductExpertStore } from '@/stores/product-expert.js'
+import { useProductTablesStore } from '@/stores/product-tables.js'
 import { useUxDialogStore } from '@/stores/ux-dialog.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 import { useUxNavigationStore } from '@/stores/ux-navigation.js'
@@ -529,7 +530,7 @@ const actions = {
                     useUxDrawersStore().$reset()
                     useUxStore().$reset()
                     useContextStore().$reset()
-                    // Task 6:  useProductTablesStore().$reset()
+                    useProductTablesStore().$reset()
                     // Task 7:  useProductBrokersStore().$reset()
                     useProductAssistantStore().$reset()
                     useProductExpertInsightsAgentStore().$reset()
@@ -606,8 +607,8 @@ const actions = {
             })
             .catch(_ => {})
     },
-    async clearOtherStores (state) {
-        await state.dispatch('product/tables/clearState', null, { root: true })
+    clearOtherStores () {
+        useProductTablesStore().clearState()
     },
     async checkIfAuthenticated ({ commit }) {
         return userApi.getUser()

frontend/src/store/modules/product/index.js

@@ -1,7 +1,5 @@
 import brokerApi from '../../../api/broker.js'
 
-import tables from './tables/index.js'
-
 // initial state
 const initialState = () => ({
     flags: null,
@@ -211,7 +209,7 @@ const actions = {
 
 export default {
     namespaced: true,
-    modules: { tables },
+    modules: {},
     state,
     initialState: initialState(),
     getters,

frontend/src/stores/index.js

@@ -1,5 +1,6 @@
 // Barrel export — add store exports here as each task is merged
 export { useContextStore } from './context.js'
+export { useProductTablesStore } from './product-tables.js'
 export { useProductAssistantStore } from './product-assistant.js'
 export { useProductExpertOperatorAgentStore } from './product-expert-operator-agent.js'
 export { useProductExpertStore } from './product-expert.js'