Pinia Task 6 - product-tables

[n-lark]

Task 6 — product-tables (PR 7)

Gate: Phase 0 merged
Vuex module: frontend/src/store/modules/product/tables/index.js
New file: frontend/src/stores/product-tables.js
Persistence: databases, newTable → localStorage (cleared on logout)
Cross-store dependency: reads account.team.id for all API calls — use _account-bridge.js

6.1 — Create the Pinia store

// frontend/src/stores/product-tables.js
import { defineStore } from 'pinia'
import tablesApi from '../api/tables.js'
import { hashString } from '../composables/String.js'
import { useAccountBridge } from './_account-bridge.js'

const emptyColumn = { name: '', type: '', nullable: false, default: '', hasDefault: false, unsigned: false }

export const useProductTablesStore = defineStore('product-tables', {
    state: () => ({
        databases: {},
        databaseSelection: null,
        tables: {},
        tableSelection: null,
        newTable: { name: '', columns: [{ ...emptyColumn }] },
        isLoading: false
    }),
    getters: {
        database: (state) => state.databases[state.databaseSelection] ?? null,
        tables: (state) => (databaseId) => state.tables[databaseId] ?? [],
        selectedTable: (state) => {
            if (Object.keys(state.tables).includes(state.databaseSelection)) {
                return state.tables[state.databaseSelection]?.find(t => t.name === state.tableSelection)
            }
            return null
        }
    },
    actions: {
        async createDatabase ({ teamId, databaseName = '' }) {
            const database = await tablesApi.createDatabase(teamId, databaseName)
            this.databases[database.id] = database
            return database
        },
        async getDatabases () {
            const { team } = useAccountBridge()
            const databases = await tablesApi.getDataBases(team.id)
            databases.forEach(db => { this.databases[db.id] = db })
            return databases
        },
        async getTables (databaseId) {
            const { team } = useAccountBridge()
            let tables = await tablesApi.getTables(team.id, databaseId)
            tables = [...tables].sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' }))
            this.tables[databaseId] = tables
            if (tables.length > 0) this.tableSelection = tables[0].name
            return tables
        },
        clearState () { Object.assign(this, { databases: {}, databaseSelection: null, tables: {}, tableSelection: null, newTable: { name: '', columns: [{ ...emptyColumn }] }, isLoading: false }) },
        updateTableSelection (tableName) { this.tableSelection = tableName },
        updateDatabaseSelection (databaseId) { this.databaseSelection = databaseId },
        async getTableSchema ({ databaseId, tableName, teamId }) {
            const schema = await tablesApi.getTableSchema(teamId, databaseId, tableName)
            schema.forEach(col => { col.safeName = hashString(col.name) })
            Object.keys(this.tables[databaseId]).forEach(key => {
                if (this.tables[databaseId][key].name === tableName) {
                    this.tables[databaseId][key].schema = schema
                }
            })
        },
        async getTableData ({ databaseId, tableName, teamId }) {
            const data = await tablesApi.getTableData(teamId, databaseId, tableName)
            const payload = {
                data,
                safe: data.map(row => Object.fromEntries(Object.entries(row).map(([k, v]) => [hashString(k), v])))
            }
            Object.keys(this.tables[databaseId]).forEach(key => {
                if (this.tables[databaseId][key].name === tableName) {
                    this.tables[databaseId][key].payload = payload
                }
            })
        },
        async createTable ({ databaseId }) {
            const { team } = useAccountBridge()
            const sanitizedColumns = this.newTable.columns.map(col => {
                const c = { ...col }
                if (!c.hasDefault) delete c.default
                if (!c.unsigned) delete c.unsigned
                return c
            })
            return tablesApi.createTable(team.id, databaseId, { name: this.newTable.name, columns: sanitizedColumns })
        },
        deleteTable ({ teamId, databaseId, tableName }) {
            return tablesApi.deleteTable(teamId, databaseId, tableName)
        },
        addNewTableColumn () { this.newTable.columns.push({ ...emptyColumn }) },
        removeNewTableColumn (columnKey) { this.newTable.columns.splice(columnKey, 1) },
        setTableLoadingState (isLoading) { this.isLoading = isLoading }
    },
    persist: {
        pick: ['databases', 'newTable'],
        storage: localStorage
    }
})

6.2 — Bridge: clearState called from Vuex account

The Vuex account module's clearOtherStores action dispatches product/tables/clearState. Until account is migrated, add a Pinia call alongside the existing Vuex dispatch in store/modules/account/index.js:

// In Vuex account/clearOtherStores action (temporary)
async clearOtherStores ({ dispatch }) {
    // existing:
    dispatch('product/tables/clearState', null, { root: true })
    // add:
    const { useProductTablesStore } = await import('@/stores/product-tables.js')
    useProductTablesStore().clearState()
}

Remove the bridge once account is migrated.

6.3 — Find and update all consumers

grep -rl "product/tables\|mapState.*tables\|mapActions.*tables\|mapGetters.*tables" frontend/src/

Primary consumers: frontend/src/pages/team/Tables/ (20+ files).

For each consumer, check if it's inside a mixin or rendered as <component :is="..."> inside <ff-dialog> — use Pattern C from PINIA_COMPONENT_PATTERNS.md (mapState / mapActions from Pinia) — this works correctly in all component types.

6.4 — Delete the Vuex module

Remove tables from store/modules/product/index.js modules registration. Delete frontend/src/store/modules/product/tables/index.js.

Logout bridge: uncomment useProductTablesStore().$reset() in the Vuex logout action (Task 0.7).

6.5 — Write store tests

frfr

6.6 — Export from stores index

export { useProductTablesStore } from './product-tables.js'

[n-lark]

Task 6 Manual Test Plan — product-tables Pinia Migration

Scope

Tests covering the areas affected by migrating the product/tables Vuex module → useProductTablesStore Pinia store. Covers database listing, table explorer, create/delete table, table schema and credentials, and logout reset.

Requires Tables feature: The Tables feature must be enabled for the platform and team. If it is not, the feature-unavailable banner will show instead of the Tables UI.

---

1. Tables page — loads and redirects correctly

Files: pages/team/Tables/index.vue

• Navigate to the Tables section of a team → Pinia DevTools: product-tables store is present; databases populates after load
• If no databases exist: redirected to the "add database" / choose page automatically
• If databases exist and no id param in the URL: redirected to the first database's table view
• Navigate to a specific database URL (/team/:slug/tables/:id) → Pinia DevTools: product-tables.databaseSelection updates to match the route param

---

2. Create a database

Files: pages/team/Tables/components/ChooseDatabase.vue, pages/team/Tables/components/CreateDatabase.vue

• On the choose-database page, click "Select" on the Managed PostgreSQL tile → database is created; Pinia DevTools: product-tables.databases gains a new entry
• Redirected to the team tables view after creation; no console errors

---

3. Table explorer — tables list

Files: pages/team/Tables/Table/TableExplorer/index.vue, pages/team/Tables/Table/TableExplorer/components/TablesList.vue

• Open a database with existing tables → Pinia DevTools: product-tables.tables[databaseId] populates; tables are sorted alphabetically
• Pinia DevTools: product-tables.tableSelection is set to the first table's name
• The tables list sidebar shows all tables; type in the filter input → list narrows to matching names
• Click a different table in the list → product-tables.tableSelection updates; row data reloads

---

4. Table explorer — row data and schema

Files: pages/team/Tables/Table/TableExplorer/components/RowsList.vue, pages/team/Tables/Table/TableExplorer/components/RowsHeader.vue

• Select a table → schema loads; column headers appear in the data grid; rows display
• Click the refresh button (RowsHeader) → data reloads; no console errors; loading spinner appears and clears
• Pinia DevTools: product-tables.isLoading briefly becomes true during refresh then returns to false
• Click the collapse/expand button → table list sidebar collapses and expands

---

5. Create a table

Files: pages/team/Tables/Table/TableExplorer/drawers/CreateTable.vue

• Click the "+" button in the tables list → the Create Table drawer opens
• Leave name blank and try to save → validation error: "A table name is mandatory."
• Enter an invalid name (e.g. with spaces) → validation error shown; save button disabled
• Enter a valid name, add columns with names and types → save button enables
• Submit → Pinia DevTools: product-tables.tables[databaseId] gains the new table; drawer closes; no console errors
• Submit with duplicate column names → validation error: "Columns must have different names."
• Click "Add a new column" → a new column row appears; Pinia DevTools: product-tables.newTable.columns gains an entry
• Click remove on a column → that column row disappears; newTable.columns loses the entry

---

6. Delete a table

Files: pages/team/Tables/Table/TableExplorer/drawers/TableSchema.vue

• Click the schema icon on a table → the TableSchema drawer opens showing column definitions
• Click "Delete" → confirmation dialog appears
• Confirm deletion → table is removed; Pinia DevTools: product-tables.tables[databaseId] no longer contains the deleted table; success alert shown

---

7. Table credentials

Files: pages/team/Tables/Table/components/TableCredentials.vue

• Navigate to the Credentials tab for a database → host, port, database name, username and password display correctly
• Pinia DevTools: product-tables.database getter returns the correct selected database object
• Copy buttons work for each credential field; password reveal toggle works

---

8. Logout — product-tables store is reset

Files: store/modules/account/index.js

• Navigate to the Tables section; verify product-tables.databases is populated in Pinia DevTools
• Log out
• Pinia DevTools (before navigating away): tables store is cleared.
• Log back in → Tables section loads fresh with no stale data

---