Merge pull request #2706 from RedisInsight/fe/feature/RI-4828_Rework_Tree_view

#RI-4828 - Rework the Tree view

Author: vlad-dargel

jest.config.cjs

@@ -39,7 +39,6 @@ module.exports = {
     'json',
   ],
   testEnvironment: 'jest-environment-jsdom',
-  // type: 'module',
   transformIgnorePatterns: [
     'node_modules/(?!(monaco-editor|react-monaco-editor)/)',
   ],
@@ -61,8 +60,5 @@ module.exports = {
       functions: 72,
       lines: 80,
     },
-    // './redisinsight/ui/src/slices/**/*.ts': {
-    //   statements: 90,
-    // },
   },
 }

package.json

@@ -33,7 +33,7 @@
     "package:mac": "yarn build:prod && electron-builder build --mac -p never",
     "package:mac:arm": "yarn build:prod && electron-builder build --mac --arm64 -p never",
     "package:linux": "yarn build:prod && electron-builder build --linux -p never",
-    "postinstall": "skip-postinstall || (electron-builder install-app-deps && cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./configs/webpack.config.renderer.dev.dll.ts && opencollective-postinstall && yarn-deduplicate yarn.lock)",
+    "postinstall": "patch-package && skip-postinstall || (electron-builder install-app-deps && cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./configs/webpack.config.renderer.dev.dll.ts && opencollective-postinstall && yarn-deduplicate yarn.lock)",
     "start": "ts-node ./scripts/check-port-in-use.js && yarn start:renderer",
     "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./configs/webpack.config.renderer.dev.ts",
     "start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./configs/webpack.config.preload.dev.ts",
@@ -42,7 +42,7 @@
     "start:web:public": "cross-env PUBLIC_DEV=true NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./configs/webpack.config.web.dev.ts",
     "test": "jest ./redisinsight/ui -w 1",
     "test:watch": "jest ./redisinsight/ui --watch -w 1",
-    "test:cov": "jest ./redisinsight/ui --coverage --no-cache --forceExit -w 3",
+    "test:cov": "jest ./redisinsight/ui --silent --coverage --no-cache --forceExit -w 3",
     "test:cov:unit": "jest ./redisinsight/ui --group=-component --coverage -w 1",
     "test:cov:component": "jest ./redisinsight/ui --group=component --coverage -w 1",
     "type-check:ui": "tsc --project redisinsight/ui --noEmit"
@@ -204,6 +204,8 @@
     "msw": "^1.3.2",
     "node-sass": "^8.0.0",
     "opencollective-postinstall": "^2.0.3",
+    "patch-package": "^8.0.0",
+    "postinstall-postinstall": "^2.1.0",
     "react-hot-loader": "^4.13.0",
     "react-refresh": "^0.9.0",
     "redux-mock-store": "^1.5.4",

patches/react-vtree+3.0.0-beta.3.patch

@@ -0,0 +1,49 @@
+diff --git a/node_modules/react-vtree/dist/cjs/Tree.js b/node_modules/react-vtree/dist/cjs/Tree.js
+index c46ce3e..879f0a6 100644
+--- a/node_modules/react-vtree/dist/cjs/Tree.js
++++ b/node_modules/react-vtree/dist/cjs/Tree.js
+@@ -33,6 +33,7 @@ var Row = function Row(_ref) {
+   return /*#__PURE__*/_react.default.createElement(Node, Object.assign({
+     isScrolling: isScrolling,
+     style: style,
++    index: index,
+     treeData: treeData
+   }, data));
+ };
+diff --git a/node_modules/react-vtree/dist/es/Tree.d.ts b/node_modules/react-vtree/dist/es/Tree.d.ts
+index 5e7f57e..b216b36 100644
+--- a/node_modules/react-vtree/dist/es/Tree.d.ts
++++ b/node_modules/react-vtree/dist/es/Tree.d.ts
+@@ -24,6 +24,8 @@ export declare type NodePublicState<TData extends NodeData> = Readonly<{
+     data: TData;
+     setOpen: (state: boolean) => Promise<void>;
+ }> & {
++    index: number;
++    style: object;
+     isOpen: boolean;
+ };
+ export declare type NodeRecord<TNodePublicState extends NodePublicState<any>> = Readonly<{
+diff --git a/node_modules/react-vtree/dist/es/Tree.js b/node_modules/react-vtree/dist/es/Tree.js
+index 2b1c7c0..b22e873 100644
+--- a/node_modules/react-vtree/dist/es/Tree.js
++++ b/node_modules/react-vtree/dist/es/Tree.js
+@@ -19,6 +19,7 @@ export var Row = function Row(_ref) {
+   return /*#__PURE__*/React.createElement(Node, Object.assign({
+     isScrolling: isScrolling,
+     style: style,
++    index: index,
+     treeData: treeData
+   }, data));
+ };
+diff --git a/node_modules/react-vtree/dist/lib/Tree.js b/node_modules/react-vtree/dist/lib/Tree.js
+index fb824bd..6feba4e 100644
+--- a/node_modules/react-vtree/dist/lib/Tree.js
++++ b/node_modules/react-vtree/dist/lib/Tree.js
+@@ -17,6 +17,7 @@ export const Row = ({
+   return /*#__PURE__*/React.createElement(Node, Object.assign({
+     isScrolling: isScrolling,
+     style: style,
++    index: index,
+     treeData: treeData
+   }, data));
+ };

redisinsight/ui/src/assets/img/browser/treeViewSort.svg

@@ -2,10 +2,14 @@ import React from 'react'
 import cx from 'classnames'
 import { isNull } from 'lodash'
 import { EuiText, EuiTextColor } from '@elastic/eui'
+import { useSelector } from 'react-redux'
 
 import { numberWithSpaces, nullableNumberWithSpaces } from 'uiSrc/utils/numbers'
-import ScanMore from '../scan-more'
+import { KeyViewType } from 'uiSrc/slices/interfaces/keys'
+import { keysSelector } from 'uiSrc/slices/browser/keys'
+import { KeyTreeSettings } from 'uiSrc/pages/browser/components/key-tree'
 
+import ScanMore from '../scan-more'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -41,6 +45,8 @@ const KeysSummary = (props: Props) => {
     && nextCursor !== '0'
     ? '~' : ''
 
+  const { viewType } = useSelector(keysSelector)
+
   return (
     <>
       {(!!totalItemsCount || isNull(totalItemsCount)) && (
@@ -88,6 +94,9 @@ const KeysSummary = (props: Props) => {
               </EuiText>
             )}
           </EuiText>
+          {viewType === KeyViewType.Tree && (
+            <KeyTreeSettings loading={loading} />
+          )}
         </div>
       )}
       {loading && !totalItemsCount && !isNull(totalItemsCount) && (

redisinsight/ui/src/components/keys-summary/KeysSummary.tsx

@@ -1,3 +1,7 @@
+.content {
+  display: flex;
+}
+
 .loading {
   opacity: 0;
 }