diff --git a/e2e-tests/cypress/e2e/browse-data.cy.js b/e2e-tests/cypress/e2e/browse-data.cy.js index 5486ac39c..8983c441e 100644 --- a/e2e-tests/cypress/e2e/browse-data.cy.js +++ b/e2e-tests/cypress/e2e/browse-data.cy.js @@ -5,21 +5,39 @@ describe('Data browser data', () => { cy.contains('MySql-connection').click(); cy.contains('Chinook').click(); cy.contains('Album').click(); - cy.contains('Let There Be Rock'); + cy.contains('Let There Be Rock').click(); cy.contains('Rows: 347'); + cy.realPress(['Control', 'ArrowRight']); + cy.contains('Aerosmith'); }); - it('Filter model', () => { + it.only('Filter model', () => { cy.visit('http://localhost:3000'); cy.contains('MySql-connection').click(); cy.contains('Chinook').click(); cy.testid('SqlObjectList_search').clear().type('album'); + cy.contains('Tables (1/11)'); cy.contains('347 rows, InnoDB'); cy.testid('SqlObjectList_searchMenuDropDown').click(); cy.contains('Column name').click(); + cy.contains('Tables (2/11)'); cy.contains('AlbumId'); cy.contains('Column name').click(); cy.contains('AlbumId').should('not.exist'); + cy.contains('Tables (1/11)'); + }); + + it('Show raw data', () => { + cy.visit('http://localhost:3000'); + + cy.contains('MySql-connection').click(); + cy.contains('Chinook').click(); + cy.contains('Album').rightclick(); + cy.contains('Open raw data').click(); + cy.contains('Let There Be Rock').click(); + cy.contains('Rows: 347').should('not.exist'); + cy.realPress(['Control', 'ArrowRight']); + cy.contains('Aerosmith').should('not.exist'); }); }); diff --git a/packages/datalib/src/TableGridDisplay.ts b/packages/datalib/src/TableGridDisplay.ts index 5b96c6413..9f46f5e4e 100644 --- a/packages/datalib/src/TableGridDisplay.ts +++ b/packages/datalib/src/TableGridDisplay.ts @@ -37,7 +37,8 @@ export class TableGridDisplay extends GridDisplay { public displayOptions: any, serverVersion, public getDictionaryDescription: DictionaryDescriptionFunc = null, - isReadOnly = false + isReadOnly = false, + public isRawMode = false ) { super(config, setConfig, cache, setCache, driver, dbinfo, serverVersion); @@ -172,6 +173,9 @@ export class TableGridDisplay extends GridDisplay { } addHintsToSelect(select: Select): boolean { + if (this.isRawMode) { + return false; + } let res = false; const groupColumns = this.groupColumns; for (const column of this.hintBaseColumns || this.getGridColumns()) { diff --git a/packages/web/src/appobj/DatabaseObjectAppObject.svelte b/packages/web/src/appobj/DatabaseObjectAppObject.svelte index 97956891a..3e73d50ab 100644 --- a/packages/web/src/appobj/DatabaseObjectAppObject.svelte +++ b/packages/web/src/appobj/DatabaseObjectAppObject.svelte @@ -722,7 +722,7 @@ openDatabaseObjectDetail( menu.tab, menu.scriptTemplate, - { ...data, defaultActionId: menu.defaultActionId }, + { ...data, defaultActionId: menu.defaultActionId, isRawMode: menu.isRawMode }, menu.forceNewTab, menu.initialData, menu.icon, @@ -757,7 +757,7 @@ export async function openDatabaseObjectDetail( tabComponent, scriptTemplate, - { schemaName, pureName, conid, database, objectTypeField, defaultActionId }, + { schemaName, pureName, conid, database, objectTypeField, defaultActionId, isRawMode }, forceNewTab?, initialData?, icon?, @@ -791,6 +791,7 @@ objectTypeField, initialArgs: scriptTemplate ? { scriptTemplate } : null, defaultActionId, + isRawMode, }, }, initialData, @@ -857,10 +858,11 @@ database, objectTypeField, defaultActionId: prefferedAction.defaultActionId, + isRawMode: prefferedAction?.isRawMode ?? false, }, forceNewTab, null, - null, + prefferedAction.icon, data, tabPreviewMode ); diff --git a/packages/web/src/appobj/appObjectTools.ts b/packages/web/src/appobj/appObjectTools.ts index 346c94d23..3a7456a61 100644 --- a/packages/web/src/appobj/appObjectTools.ts +++ b/packages/web/src/appobj/appObjectTools.ts @@ -15,6 +15,13 @@ function getTableLikeActions(dataTab) { tab: dataTab, defaultActionId: 'openTable', }, + { + label: 'Open raw data', + tab: dataTab, + defaultActionId: 'openRawTable', + isRawMode: true, + icon: dataTab == 'ViewDataTab' ? 'img raw-view' : 'img raw-table', + }, // { // label: 'Open form', // tab: dataTab, diff --git a/packages/web/src/datagrid/LoadingDataGridCore.svelte b/packages/web/src/datagrid/LoadingDataGridCore.svelte index 18b9183e4..366b1e49a 100644 --- a/packages/web/src/datagrid/LoadingDataGridCore.svelte +++ b/packages/web/src/datagrid/LoadingDataGridCore.svelte @@ -16,6 +16,7 @@ export let preprocessLoadedRow = null; export let setLoadedRows = null; + export let isRawMode = false; // export let griderFactory; @@ -65,7 +66,7 @@ if (nextRows.errorMessage) { errorMessage = nextRows.errorMessage; } else { - if (allRowCount == null) handleLoadRowCount(); + if (allRowCount == null && !isRawMode) handleLoadRowCount(); loadedRows = [...loadedRows, ...(preprocessLoadedRow ? nextRows.map(preprocessLoadedRow) : nextRows)]; isLoadedAll = nextRows.length === 0; diff --git a/packages/web/src/datagrid/TableDataGrid.svelte b/packages/web/src/datagrid/TableDataGrid.svelte index 35394b610..8272ccccc 100644 --- a/packages/web/src/datagrid/TableDataGrid.svelte +++ b/packages/web/src/datagrid/TableDataGrid.svelte @@ -45,6 +45,8 @@ export let setCache; export let multipleGridsOnTab = false; + export let isRawMode = false; + $: connection = useConnectionInfo({ conid }); $: dbinfo = useDatabaseInfo({ conid, database }); $: serverVersion = useDatabaseServerVersion({ conid, database }); @@ -71,7 +73,8 @@ { showHintColumns: getBoolSettingsValue('dataGrid.showHintColumns', true) }, $serverVersion, table => getDictionaryDescription(table, conid, database, $apps, $connections), - $connection?.isReadOnly + $connection?.isReadOnly, + isRawMode ) : null; diff --git a/packages/web/src/icons/FontIcon.svelte b/packages/web/src/icons/FontIcon.svelte index bc080b50a..ebf3aacfb 100644 --- a/packages/web/src/icons/FontIcon.svelte +++ b/packages/web/src/icons/FontIcon.svelte @@ -255,9 +255,11 @@ 'img database': 'mdi mdi-database color-icon-gold', 'img sqlite-database': 'mdi mdi-database color-icon-blue', 'img table': 'mdi mdi-table color-icon-blue', + 'img raw-table': 'mdi mdi-table-large color-icon-blue', 'img collection': 'mdi mdi-table color-icon-red', 'img query-data': 'mdi mdi-table color-icon-yellow', 'img view': 'mdi mdi-table color-icon-magenta', + 'img raw-view': 'mdi mdi-table-large color-icon-magenta', 'img procedure': 'mdi mdi-cog color-icon-blue', 'img function': 'mdi mdi-function-variant', 'img table-structure': 'mdi mdi-tools color-icon-blue', diff --git a/packages/web/src/tabs/TableDataTab.svelte b/packages/web/src/tabs/TableDataTab.svelte index 4a6eaae88..7425dcbee 100644 --- a/packages/web/src/tabs/TableDataTab.svelte +++ b/packages/web/src/tabs/TableDataTab.svelte @@ -55,7 +55,7 @@ onClick: () => getCurrentEditor().startAutoRefresh(), }); - export const matchingProps = ['conid', 'database', 'schemaName', 'pureName']; + export const matchingProps = ['conid', 'database', 'schemaName', 'pureName', 'isRawMode']; export const allowAddToFavorites = props => true; export const allowSwitchDatabase = props => true; @@ -108,6 +108,7 @@ export let database; export let schemaName; export let pureName; + export let isRawMode = false; export const activator = createActivator('TableDataTab', true); @@ -245,6 +246,8 @@ ...INTERVALS.map(seconds => ({ command: `tableData.setAutoRefresh.${seconds}`, text: `...${seconds} seconds` })), ]; } + + $: console.log('isRawMode', isRawMode);