refactor(plugin-sql-editor): CB-1060 remove unnecessary context usage

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

@@ -6,15 +6,13 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { useContext } from 'react';
 import styled, { css } from 'reshadow';
 
 import { Split, Pane, ResizerControls, splitStyles } from '@cloudbeaver/core-blocks';
+import { TextareaNew } from '@cloudbeaver/core-blocks';
 import { composes, useStyles } from '@cloudbeaver/core-theming';
 
 import { ExecutionPlanTree } from './ExecutionPlanTree';
-import { ExecutionPlanTreeContext } from './ExecutionPlanTreeContext';
-import { QueryPanel } from './QueryPanel';
 
 const styles = composes(
   css`
@@ -52,7 +50,14 @@ export const ExecutionPlanTreeBlock: React.FC<Props> = function ExecutionPlanTre
       </Pane>
       <ResizerControls />
       <Pane main>
-        <QueryPanel query={query} />
+        <TextareaNew
+          className={className}
+          name='value'
+          rows={3}
+          value={query}
+          readOnly
+          embedded
+        />
       </Pane>
     </Split>
   );

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

@@ -10,7 +10,6 @@ import { useCallback, useContext, useState } from 'react';
 import styled, { css } from 'reshadow';
 
 import { TableItem, TableColumnValue } from '@cloudbeaver/core-blocks';
-import type { ObjectPropertyInfo } from '@cloudbeaver/core-sdk';
 import { useStyles } from '@cloudbeaver/core-theming';
 
 import { ExecutionPlanTreeContext, IExecutionPlanNode } from './ExecutionPlanTreeContext';
@@ -49,14 +48,6 @@ export const NestedNode: React.FC<Props> = function NestedNode({ node, depth, cl
     throw new Error('Tree context must be provided');
   }
 
-  const getValue = useCallback((property: ObjectPropertyInfo | undefined) => {
-    if (!property || !treeContext.columns.find(column => column.id === property.id)) {
-      return '';
-    }
-
-    return getPropertyValue(property);
-  }, [treeContext.columns]);
-
   const expand = useCallback((event: React.MouseEvent<any, MouseEvent>) => {
     event.stopPropagation();
     setExpanded(prev => !prev);
@@ -69,7 +60,7 @@ export const NestedNode: React.FC<Props> = function NestedNode({ node, depth, cl
       <TableItem key={`${node.id}_${depth}`} className={className} item={node.id}>
         {treeContext.columns.map((column, idx) => {
           const property = node.properties.find(property => property.id === column.id);
-          const value = getValue(property);
+          const value = property ? getPropertyValue(property) : '';
           return (
             <TableColumnValue key={`${property?.id}_${depth}`} title={value}>
               <control>

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

@@ -1,37 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2021 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
-import { useContext } from 'react';
-
-import { TextareaNew } from '@cloudbeaver/core-blocks';
-
-import { ExecutionPlanTreeContext } from './ExecutionPlanTreeContext';
-
-interface Props {
-  query: string;
-  className?: string;
-}
-
-export const QueryPanel: React.FC<Props> = function QueryPanel({ className, query }) {
-  const treeContext = useContext(ExecutionPlanTreeContext);
-
-  if (!treeContext) {
-    throw new Error('Tree context must be provided');
-  }
-
-  return (
-    <TextareaNew
-      className={className}
-      name='value'
-      rows={3}
-      value={query}
-      readOnly
-      embedded
-    />
-  );
-};