feat(Tenant): use NavigationTree for schemas

Author: ariser

src/components/GroupTreeViewer/GroupTreeViewer.scss

@@ -1,5 +1,3 @@
-@import '../../styles/react-treeview';
-
 .group-tree-viewer {
     &__row {
         display: flex;

src/containers/App/App.scss

@@ -117,32 +117,6 @@ body,
     border-color: var(--yc-color-text-danger);
 }
 
-.tree-view_item {
-    /* stylelint-disable-next-line declaration-no-important*/
-    cursor: default !important;
-}
-
-.tree-view_children {
-    margin-left: 25px;
-}
-
-.tree-view_arrow {
-    padding: 2px;
-
-    line-height: 0.8;
-
-    transform: rotate(90deg);
-}
-
-.tree-view_arrow-collapsed {
-    transform: rotate(0deg);
-}
-
-.tree-view_arrow:after {
-    font-size: var(--yc-text-body2-font-size);
-    content: '❯';
-}
-
 .data-table__row:hover .entity-status__clipboard-button {
     display: flex;
 }

src/containers/Tenant/ObjectSummary/ObjectSummary.scss

@@ -26,8 +26,8 @@
 
     &__action-button {
         position: absolute;
-        top: 12px;
-        right: 4px;
+        top: 8px; // centered relative to the heading
+        right: 5px; // centered relative to the collapsed panel
 
         background-color: var(--yc-color-base-background);
         &_hidden {
@@ -41,32 +41,26 @@
         align-items: center;
     }
 
-    &__tree {
+    &__tree-wrapper {
         display: flex;
-        overflow: scroll;
-        flex: 0 0 auto;
         flex-direction: column;
+    }
+
+    &__tree {
+        overflow-y: scroll;
+        flex: 1 1 auto;
 
         height: 100%;
         padding: 0 12px 12px;
-
-        .tree-view_item {
-            margin: 0;
-            padding: 2px 0;
-        }
-
-        & > div > .tree-view {
-            padding-bottom: 15px;
-        }
     }
 
     &__tree-header {
         display: flex;
+        flex: 0 0 auto;
         justify-content: space-between;
         align-items: center;
 
         padding: 12px 12px 8px;
-        @include sticky-top();
     }
 
     &__tree-title {

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -7,26 +7,20 @@ import qs from 'qs';
 import _ from 'lodash';
 
 import {Button, HelpTooltip, Loader, Tabs} from '@yandex-cloud/uikit';
-//@ts-ignore
+
 import SplitPane from '../../../components/SplitPane';
-//@ts-ignore
-import SchemaNode from '../Schema/SchemaNode/SchemaNode';
-//@ts-ignore
+import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
 import Acl from '../Acl/Acl';
-//@ts-ignore
 import SchemaViewer from '../Schema/SchemaViewer/SchemaViewer';
 import CopyToClipboard from '../../../components/CopyToClipboard/CopyToClipboard';
-//@ts-ignore
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
-//@ts-ignore
 import Icon from '../../../components/Icon/Icon';
 
 import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Tenant';
 
 import {
     DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED,
     DEFAULT_SIZE_TENANT_SUMMARY_KEY,
-    //@ts-ignore
 } from '../../../utils/constants';
 import {
     TenantGeneralTabsIds,
@@ -41,10 +35,10 @@ import {
     paneVisibilityToggleReducerCreator,
     PaneVisibilityToggleButtons,
 } from '../utils/paneVisibilityToggleHelpers';
-//@ts-ignore
 import {setShowPreview} from '../../../store/reducers/schema';
 
 import './ObjectSummary.scss';
+
 const b = cn('object-summary');
 
 const getInitialIsSummaryCollapsed = () => {
@@ -103,7 +97,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
     });
 
     const {name: tenantName, info: infoTab} = queryParams;
-    const tenantData = _.get(data[tenantName as string], 'PathDescription.Self');
+    const pathData = _.get(data[tenantName as string], 'PathDescription.Self');
     const currentSchemaData = _.get(data[currentSchemaPath], 'PathDescription.Self');
 
     const tableSchema =
@@ -195,13 +189,20 @@ function ObjectSummary(props: ObjectSummaryProps) {
 
     const renderTree = () => {
         return (
-            <div>
+            <div className={b('tree-wrapper')}>
                 <div className={b('tree-header')}>
                     <div className={b('tree-title')}>Navigation</div>
                 </div>
                 <div className={b('tree')}>
-                    {tenantData && (
-                        <SchemaNode fullPath={tenantName as string} data={tenantData} isRoot />
+                    {pathData && (
+                        <SchemaTree
+                            rootPath={tenantName as string}
+                            // for the root pathData.Name contains the same string as tenantName,
+                            // but without the leading slash
+                            rootName={pathData?.Name || tenantName}
+                            rootType={pathData.PathType}
+                            currentPath={currentSchemaPath}
+                        />
                     )}
                 </div>
             </div>