feat(Healthcheck): use TreeView in issues viewer

Author: ariser

src/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssueViewer.scss

@@ -5,37 +5,14 @@
     align-items: center;
 
     height: 40px;
-    margin-left: 36px;
 
     cursor: pointer;
-    .km-tree-view__arrow-icon + & {
-        margin-left: 0;
-    }
 
     &_active {
         border-radius: 4px;
         background: var(--yc-color-base-info);
     }
 
-    &__wpapper {
-        & .km-tree-view__node-wrapper {
-            height: 40px;
-
-            & .km-tree-view__arrow-icon {
-                display: flex;
-                align-items: center;
-
-                width: 36px;
-                height: 36px;
-                margin: 0;
-            }
-        }
-
-        & .tree-view_item {
-            margin: 0;
-        }
-    }
-
     &__field {
         padding: 0 10px;
 
@@ -173,4 +150,15 @@
             }
         }
     }
+
+    .ydb-tree-view {
+        &__item {
+            height: 40px;
+        }
+
+        .tree-view_arrow {
+            width: 40px;
+            height: 40px;
+        }
+    }
 }

src/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssuesViewer.js

@@ -7,7 +7,8 @@ import _filter from 'lodash/fp/filter';
 import _sortBy from 'lodash/fp/sortBy';
 import _uniqBy from 'lodash/fp/uniqBy';
 
-import TreeView from '../../../../../components/TreeView/TreeView';
+import {TreeView} from 'ydb-ui-components';
+
 import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
 
 import './IssueViewer.scss';
@@ -45,7 +46,7 @@ const IssueRow = ({data, treeLevel, active, setInfoForActive, onClick}) => {
             </div>
             <div
                 className={issueBlock('field', {message: true})}
-                style={{marginLeft: -treeLevel * 25 + 'px'}}
+                style={{marginLeft: -treeLevel * 24 + 'px'}}
             >
                 {message}
             </div>
@@ -85,21 +86,20 @@ const IssuesViewer = ({issues}) => {
                 return (
                     <TreeView
                         key={id}
-                        nodeLabel={
+                        name={
                             <IssueRow
                                 data={item}
                                 treeLevel={treeLevel}
                                 active={isActive}
                                 setInfoForActive={setInfoData}
-                                onClick={() => setActiveItem(id)}
                             />
                         }
-                        className={issueBlock('wpapper', {active: isActive})}
                         collapsed={
                             typeof collapsedIssues[id] === 'undefined' || collapsedIssues[id]
                         }
                         hasArrow={hasArrow}
-                        onClick={() => {
+                        onClick={() => setActiveItem(id)}
+                        onArrowClick={() => {
                             const newValue =
                                 typeof collapsedIssues[id] === 'undefined'
                                     ? false