fix(SchemaTree): transfer Show Preview to SchemaTree (#505)

Author: krosy1337

package-lock.json

@@ -40,7 +40,7 @@
     "reselect": "4.1.6",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "^3.2.2"
+    "ydb-ui-components": "^3.3.1"
   },
   "scripts": {
     "start": "react-app-rewired start",

package.json

@@ -9,6 +9,7 @@ import {useQueryModes} from '../../../../utils/hooks';
 
 import {isChildlessPathType, mapPathTypeToNavigationTreeType} from '../../utils/schema';
 import {getActions} from '../../utils/schemaActions';
+import {getControls} from '../../utils/schemaControls';
 
 interface SchemaTreeProps {
     rootPath: string;
@@ -78,6 +79,9 @@ export function SchemaTree(props: SchemaTreeProps) {
                 setActivePath: handleActivePathUpdate,
                 setQueryMode,
             })}
+            renderAdditionalNodeElements={getControls(dispatch, {
+                setActivePath: handleActivePathUpdate,
+            })}
             activePath={currentPath}
             onActivePathUpdate={handleActivePathUpdate}
             cache={false}

src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -6,7 +6,6 @@ import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-component
 import type {QueryMode} from '../../../types/store/query';
 import type {SetQueryModeIfAvailable} from '../../../utils/hooks';
 import {changeUserInput} from '../../../store/reducers/executeQuery';
-import {setShowPreview} from '../../../store/reducers/schema/schema';
 import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import {TENANT_QUERY_TABS_ID, TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
 import createToast from '../../../utils/createToast';
@@ -109,12 +108,6 @@ const bindActions = (
                 });
             }
         },
-        openPreview: () => {
-            dispatch(setShowPreview(true));
-            dispatch(setTenantPage(TENANT_PAGES_IDS.query));
-            dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
-            setActivePath(path);
-        },
     };
 };
 
@@ -125,14 +118,13 @@ export const getActions =
     (path: string, type: NavigationTreeNodeType) => {
         const actions = bindActions(path, dispatch, additionalEffects);
         const copyItem = {text: i18n('actions.copyPath'), action: actions.copyPath};
-        const openPreview = {text: i18n('actions.openPreview'), action: actions.openPreview};
 
         const DIR_SET: ActionsSet = [
             [copyItem],
             [{text: i18n('actions.createTable'), action: actions.createTable}],
         ];
         const TABLE_SET: ActionsSet = [
-            [openPreview, copyItem],
+            [copyItem],
             [
                 {text: i18n('actions.alterTable'), action: actions.alterTable},
                 {text: i18n('actions.selectQuery'), action: actions.selectQuery},
@@ -141,7 +133,7 @@ export const getActions =
         ];
 
         const EXTERNAL_TABLE_SET = [
-            [openPreview, copyItem],
+            [copyItem],
             [
                 {
                     text: i18n('actions.selectQuery'),
@@ -169,6 +161,7 @@ export const getActions =
 
             index_table: JUST_COPY,
             topic: JUST_COPY,
+            stream: JUST_COPY,
 
             index: JUST_COPY,
 

src/containers/Tenant/utils/schemaActions.ts

@@ -0,0 +1,69 @@
+import {Dispatch} from 'react';
+
+import {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-components';
+import {Button} from '@gravity-ui/uikit';
+
+import {setShowPreview} from '../../../store/reducers/schema/schema';
+import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
+import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
+import {IconWrapper} from '../../../components/Icon';
+
+import i18n from '../i18n';
+
+interface ControlsAdditionalEffects {
+    setActivePath: (path: string) => void;
+}
+
+const bindActions = (
+    path: string,
+    dispatch: Dispatch<any>,
+    additionalEffects: ControlsAdditionalEffects,
+) => {
+    const {setActivePath} = additionalEffects;
+
+    return {
+        openPreview: () => {
+            dispatch(setShowPreview(true));
+            dispatch(setTenantPage(TENANT_PAGES_IDS.query));
+            dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+            setActivePath(path);
+        },
+    };
+};
+
+type Controls = ReturnType<Required<NavigationTreeProps>['renderAdditionalNodeElements']>;
+
+export const getControls =
+    (dispatch: Dispatch<any>, additionalEffects: ControlsAdditionalEffects) =>
+    (path: string, type: NavigationTreeNodeType) => {
+        const options = bindActions(path, dispatch, additionalEffects);
+        const openPreview = (
+            <Button
+                view="flat-secondary"
+                onClick={options.openPreview}
+                title={i18n('actions.openPreview')}
+                size="s"
+            >
+                <IconWrapper name="tablePreview" />
+            </Button>
+        );
+
+        const nodeTypeToControls: Record<NavigationTreeNodeType, Controls> = {
+            database: undefined,
+            directory: undefined,
+
+            table: openPreview,
+            column_table: openPreview,
+
+            index_table: undefined,
+            topic: undefined,
+            stream: undefined,
+
+            index: undefined,
+
+            external_table: openPreview,
+            external_data_source: undefined,
+        };
+
+        return nodeTypeToControls[type];
+    };