Merge branch 'feature/open-raw'

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');
   });
 });

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()) {

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
     );

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,

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;

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;
 

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',

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;
 </script>
@@ -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);
 </script>
 
 <ToolStripContainer>