fix(plugin-data-spreadsheet): ag-grid refresh

CB-255

webapp/packages/plugin-data-spreadsheet/src/AgGridTable/AgGridTable.tsx

@@ -7,7 +7,7 @@
  */
 
 import { observer, Observer } from 'mobx-react';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useMemo, useRef } from 'react';
 import styled from 'reshadow';
 
 import { AgGridReactProps } from '@ag-grid-community/react';
@@ -48,8 +48,11 @@ export const AgGridTable = observer(function AgGridTable({
   className,
   ...rest
 }: AgGridTableProps) {
+  const refreshRef = useRef(0);
   const styles = useStyles(agGridStyles);
   const controller = useController(AgGridTableController, tableModel);
+  useMemo(() => refreshRef.current === controller.refreshId && controller.refresh(), [tableModel]);
+  refreshRef.current = controller.refreshId;
 
   return (
     <ComplexLoader

webapp/packages/plugin-data-spreadsheet/src/AgGridTable/AgGridTableController.ts

@@ -114,7 +114,7 @@ export class AgGridTableController implements IInitializableController, IDestruc
     return this.gridOptions;
   }
 
-  private refresh() {
+  refresh() {
     this.refreshId++;
   }
 

webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultPanel/SqlResultPanel.tsx

@@ -65,22 +65,20 @@ export const SqlResultPanel = observer(function SqlResultPanel({ tab, panelInit
           )}
         </error>
       )}
-      {controller.state === EPanelState.MESSAGE_RESULT
-        && (
-          <wrapper as="div">
-            <messages as="div">
-              <message as="div">{controller.executionResult}</message>
-              <hr/>
-              <query as="pre">
-                {controller.getQuery()}
-              </query>
-            </messages>
-          </wrapper>
-        )
-      }
-      {controller.state === EPanelState.TABLE_RESULT
-        && <TableViewer tableId={controller.getTableId()}/>
-      }
+      {controller.state === EPanelState.MESSAGE_RESULT && (
+        <wrapper as="div">
+          <messages as="div">
+            <message as="div">{controller.executionResult}</message>
+            <hr/>
+            <query as="pre">
+              {controller.getQuery()}
+            </query>
+          </messages>
+        </wrapper>
+      )}
+      {controller.state === EPanelState.TABLE_RESULT && (
+        <TableViewer tableId={controller.getTableId()}/>
+      )}
     </result-panel>
   );
 });

webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultPanel/SqlResultPanelController.ts

@@ -97,28 +97,25 @@ implements IInitializableController, IDestructibleController {
 
         const connectionInfo = await this.connectionInfoResource.load(this.group.sqlQueryParams.connectionId);
 
-        let tableModel = this.tableViewerStorageService.get(this.getTableId());
-
-        if (!tableModel) {
-          tableModel = this.tableViewerStorageService.create({
-            tableId: this.getTableId(),
-            connectionId: this.group.sqlQueryParams.connectionId,
-            executionContext: this.group.sqlQueryParams,
-            resultId: dataSet.resultSet.id,
-            sourceName: this.group.sqlQueryParams.query,
-            access: connectionInfo.readOnly ? AccessMode.Readonly : AccessMode.Default,
-            requestDataAsync: this.requestDataAsync.bind(this, sqlExecutionContext),
-            noLoaderWhileRequestingDataAsync: true,
-            saveChanges: this.saveChanges.bind(this),
-          });
-
-          tableModel.insertRows(0, initialState.rows, !initialState.isFullyLoaded);
-          tableModel.setColumns(initialState.columns);
-          tableModel.updateInfo(initialState.statusMessage, initialState.duration);
-        } else {
-          await this.updateTableInfo(tableModel, dataSet.resultSet.id);
-          tableModel.refresh();
+        if (this.tableViewerStorageService.has(this.getTableId())) {
+          this.tableViewerStorageService.remove(this.getTableId());
         }
+
+        const tableModel = this.tableViewerStorageService.create({
+          tableId: this.getTableId(),
+          connectionId: this.group.sqlQueryParams.connectionId,
+          executionContext: this.group.sqlQueryParams,
+          resultId: dataSet.resultSet.id,
+          sourceName: this.group.sqlQueryParams.query,
+          access: connectionInfo.readOnly ? AccessMode.Readonly : AccessMode.Default,
+          requestDataAsync: this.requestDataAsync.bind(this, sqlExecutionContext),
+          noLoaderWhileRequestingDataAsync: true,
+          saveChanges: this.saveChanges.bind(this),
+        });
+
+        tableModel.insertRows(0, initialState.rows, !initialState.isFullyLoaded);
+        tableModel.setColumns(initialState.columns);
+        tableModel.updateInfo(initialState.statusMessage, initialState.duration);
       }
 
     } catch (exception) {

webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultTabs.tsx

@@ -55,16 +55,18 @@ export const SqlResultTabs = observer(function SqlDataResult({ tab }: SqlDataRes
 
   const orderedTabs = useMemo(
     () => computed(
-      () => tab.handlerState.resultTabs.sort((tabA, tabB) => {
-        if (tabA.groupId === tabB.groupId) {
-          return tabA.order - tabB.order;
-        }
+      () => tab.handlerState.resultTabs
+        .slice()
+        .sort((tabA, tabB) => {
+          if (tabA.groupId === tabB.groupId) {
+            return tabA.order - tabB.order;
+          }
 
-        const groupA = tab.handlerState.queryTabGroups.find(group => group.groupId === tabA.groupId)!;
-        const groupB = tab.handlerState.queryTabGroups.find(group => group.groupId === tabB.groupId)!;
+          const groupA = tab.handlerState.queryTabGroups.find(group => group.groupId === tabA.groupId)!;
+          const groupB = tab.handlerState.queryTabGroups.find(group => group.groupId === tabB.groupId)!;
 
-        return groupA.order - groupB.order;
-      })
+          return groupA.order - groupB.order;
+        })
     ),
     [tab]
   );