CB-4705 make data viewer model loaders more flexible (#2690)

* CB-4705 make data viewer model loaders more flexible * CB-4705 review fixes * CB-4705 remove unused import --------- Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>
dbeaver · Jun 11, 2024 · 3d56701 · 3d56701
1 parent 078c11c
commit 3d56701
Show file tree

Hide file tree

Showing 12 changed files with 300 additions and 251 deletions.
diff --git a/webapp/packages/plugin-connection-custom/src/DriverSelector/DriverSelectorDialog.tsx b/webapp/packages/plugin-connection-custom/src/DriverSelector/DriverSelectorDialog.tsx
@@ -30,7 +30,7 @@ export const DriverSelectorDialog: DialogComponent<null> = observer(function Dri
   );
 
   return (
-    <CommonDialogWrapper size="large" fixedSize>
+    <CommonDialogWrapper size="large" autofocus={false} fixedSize>
       <CommonDialogHeader title={translate('basicConnection_connectionDialog_newConnection')} />
       <CommonDialogBody noBodyPadding noOverflow>
         <DriverSelector className={s(style, { driverSelector: true })} drivers={enabledDrivers} onSelect={dialog.select} />

diff --git a/webapp/packages/plugin-data-viewer/src/ContainerDataSource.ts b/webapp/packages/plugin-data-viewer/src/ContainerDataSource.ts
@@ -11,6 +11,7 @@ import type { ConnectionExecutionContextService, IConnectionExecutionContext, IC
 import type { IServiceInjector } from '@cloudbeaver/core-di';
 import type { ITask } from '@cloudbeaver/core-executor';
 import {
+  AsyncTask,
   AsyncTaskInfoService,
   GraphQLService,
   ResultDataFormat,
@@ -73,46 +74,10 @@ export class ContainerDataSource extends ResultSetDataSource<IDataContainerOptio
   }
 
   async request(prevResults: IDatabaseResultSet[]): Promise<IDatabaseResultSet[]> {
-    const options = this.options;
-
-    if (!options) {
-      throw new Error('containerNodePath must be provided for table');
-    }
-
     const executionContext = await this.ensureContextCreated();
     const context = executionContext.context!;
-    const offset = this.offset;
     const limit = this.count;
-
-    let firstResultId: string | undefined;
-
-    if (
-      prevResults.length === 1 &&
-      prevResults[0].contextId === context.id &&
-      prevResults[0].connectionId === context.connectionId &&
-      prevResults[0].id !== null
-    ) {
-      firstResultId = prevResults[0].id;
-    }
-
-    const task = this.asyncTaskInfoService.create(async () => {
-      const { taskInfo } = await this.graphQLService.sdk.asyncReadDataFromContainer({
-        projectId: context.projectId,
-        connectionId: context.connectionId,
-        contextId: context.id,
-        containerNodePath: options.containerNodePath,
-        resultId: firstResultId,
-        filter: {
-          offset,
-          limit,
-          constraints: options.constraints,
-          where: options.whereFilter || undefined,
-        },
-        dataFormat: this.dataFormat,
-      });
-
-      return taskInfo;
-    });
+    const task = await this.getRequestTask(prevResults, context);
 
     this.currentTask = executionContext.run(
       async () => {
@@ -217,6 +182,58 @@ export class ContainerDataSource extends ResultSetDataSource<IDataContainerOptio
     return prevResults;
   }
 
+  protected getConfig(prevResults: IDatabaseResultSet[], context: IConnectionExecutionContextInfo) {
+    const options = this.options;
+
+    if (!options) {
+      throw new Error('Options must be provided');
+    }
+
+    const offset = this.offset;
+    const limit = this.count;
+    const resultId = this.getResultId(prevResults, context);
+
+    return {
+      projectId: context.projectId,
+      connectionId: context.connectionId,
+      contextId: context.id,
+      containerNodePath: options.containerNodePath,
+      resultId,
+      filter: {
+        offset,
+        limit,
+        constraints: options.constraints,
+        where: options.whereFilter || undefined,
+      },
+      dataFormat: this.dataFormat,
+    };
+  }
+
+  protected async getRequestTask(prevResults: IDatabaseResultSet[], context: IConnectionExecutionContextInfo): Promise<AsyncTask> {
+    const task = this.asyncTaskInfoService.create(async () => {
+      const config = this.getConfig(prevResults, context);
+      const { taskInfo } = await this.graphQLService.sdk.asyncReadDataFromContainer(config);
+      return taskInfo;
+    });
+
+    return task;
+  }
+
+  private getResultId(prevResults: IDatabaseResultSet[], context: IConnectionExecutionContextInfo) {
+    let resultId: string | undefined;
+
+    if (
+      prevResults.length === 1 &&
+      prevResults[0].contextId === context.id &&
+      prevResults[0].connectionId === context.connectionId &&
+      prevResults[0].id !== null
+    ) {
+      resultId = prevResults[0].id;
+    }
+
+    return resultId;
+  }
+
   private transformResults(executionContextInfo: IConnectionExecutionContextInfo, results: SqlQueryResults[], limit: number): IDatabaseResultSet[] {
     return results.map<IDatabaseResultSet>((result, index) => ({
       id: result.resultSet?.id || '0',
@@ -249,6 +266,7 @@ export class ContainerDataSource extends ResultSetDataSource<IDataContainerOptio
 
       this.setExecutionContext(executionContext);
     }
+
     return this.executionContext!;
   }
 }
diff --git a/webapp/packages/plugin-data-viewer/src/DataViewerPage/DataViewerPanel.tsx b/webapp/packages/plugin-data-viewer/src/DataViewerPage/DataViewerPanel.tsx
@@ -8,16 +8,17 @@
 import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
 
-import { Loader, TextPlaceholder } from '@cloudbeaver/core-blocks';
+import { TextPlaceholder, useAutoLoad, useTranslate } from '@cloudbeaver/core-blocks';
 import type { ObjectPagePanelComponent } from '@cloudbeaver/plugin-object-viewer';
 
 import type { IDataViewerPageState } from '../IDataViewerPageState';
 import { TableViewerLoader } from '../TableViewer/TableViewerLoader';
 import classes from './DataViewerPanel.module.css';
-import { useDataViewerDatabaseDataModel } from './useDataViewerDatabaseDataModel';
+import { useDataViewerPanel } from './useDataViewerPanel';
 
 export const DataViewerPanel: ObjectPagePanelComponent<IDataViewerPageState> = observer(function DataViewerPanel({ tab, page }) {
-  const dataViewerDatabaseDataModel = useDataViewerDatabaseDataModel(tab);
+  const translate = useTranslate();
+  const panel = useDataViewerPanel(tab);
   const pageState = page.getState(tab);
 
   const handlePresentationChange = useCallback(
@@ -54,25 +55,21 @@ export const DataViewerPanel: ObjectPagePanelComponent<IDataViewerPageState> = o
     [page, tab],
   );
 
+  useAutoLoad(DataViewerPanel, panel);
+
   if (!tab.handlerState.tableId) {
-    return <TextPlaceholder>Table model not loaded</TextPlaceholder>;
+    return <TextPlaceholder>{translate('data_viewer_model_not_loaded')}</TextPlaceholder>;
   }
 
   return (
-    <Loader state={dataViewerDatabaseDataModel}>
-      {tab.handlerState.tableId ? (
-        <TableViewerLoader
-          className={classes.tableViewerLoader}
-          tableId={tab.handlerState.tableId}
-          resultIndex={pageState?.resultIndex}
-          presentationId={pageState?.presentationId}
-          valuePresentationId={pageState?.valuePresentationId}
-          onPresentationChange={handlePresentationChange}
-          onValuePresentationChange={handleValuePresentationChange}
-        />
-      ) : (
-        <TextPlaceholder>Table model not loaded</TextPlaceholder>
-      )}
-    </Loader>
+    <TableViewerLoader
+      className={classes.tableViewerLoader}
+      tableId={tab.handlerState.tableId}
+      resultIndex={pageState?.resultIndex}
+      presentationId={pageState?.presentationId}
+      valuePresentationId={pageState?.valuePresentationId}
+      onPresentationChange={handlePresentationChange}
+      onValuePresentationChange={handleValuePresentationChange}
+    />
   );
 });
diff --git a/webapp/packages/plugin-data-viewer/src/DataViewerPage/useDataViewerDatabaseDataModel.ts b/webapp/packages/plugin-data-viewer/src/DataViewerPage/useDataViewerDatabaseDataModel.ts