Merge branch 'main' of https://github.com/RedisInsight/RedisInsight into fe/feature/RI-5009_refactor_database_form

Author: AmirAllayarovSofteq

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;
 }

redisinsight/ui/src/components/keys-summary/styles.module.scss

@@ -28,7 +28,7 @@ const FilterNotAvailable = ({ onClose } : { onClose?: () => void }) => {
       {!!freeInstance && (
         <>
           <EuiText color="subdued">
-            Use your free all-in-one Redis Enterprise Cloud database to start exploring these capabilities.
+            Use your free all-in-one Redis Cloud database to start exploring these capabilities.
           </EuiText>
           <EuiSpacer size="l" />
           <OAuthConnectFreeDb source={OAuthSocialSource.BrowserFiltering} onSuccessClick={onClose} />

redisinsight/ui/src/components/messages/filter-not-available/FilterNotAvailable.tsx

@@ -84,7 +84,7 @@ const ModuleNotLoaded = ({ moduleName, id, type = 'workbench', onClose }: IProps
     </EuiText>
   ) : (
     <EuiText className={cx(styles.text, styles.marginBottom, styles.textFooter)}>
-      Use your free all-in-one Redis Enterprise Cloud database to start exploring these capabilities.
+      Use your free all-in-one Redis Cloud database to start exploring these capabilities.
     </EuiText>
   )), [freeInstance])
 

redisinsight/ui/src/components/messages/module-not-loaded/ModuleNotLoaded.tsx

@@ -55,7 +55,7 @@ export const INFINITE_MESSAGES = {
       >
         <EuiTitle className="infiniteMessage__title"><span>Congratulations!</span></EuiTitle>
         <EuiText size="xs">
-          You can now use your Redis Stack database in Redis Enterprise Cloud
+          You can now use your Redis Stack database in Redis Cloud
           to start exploring all its developer capabilities via RedisInsight tutorials.
         </EuiText>
         <EuiSpacer size="m" />
@@ -84,7 +84,7 @@ export const INFINITE_MESSAGES = {
         onMouseUp={(e) => { e.preventDefault() }}
         data-testid="database-exists-notification"
       >
-        <EuiTitle className="infiniteMessage__title"><span>You already have a free Redis Enterprise Cloud subscription.</span></EuiTitle>
+        <EuiTitle className="infiniteMessage__title"><span>You already have a free Redis Cloud subscription.</span></EuiTitle>
         <EuiText size="xs">
           Do you want to import your existing database into RedisInsight?
         </EuiText>
@@ -125,7 +125,7 @@ export const INFINITE_MESSAGES = {
         onMouseUp={(e) => { e.preventDefault() }}
         data-testid="subscription-exists-notification"
       >
-        <EuiTitle className="infiniteMessage__title"><span>Your subscription does not have a free Redis Enterprise Cloud database.</span></EuiTitle>
+        <EuiTitle className="infiniteMessage__title"><span>Your subscription does not have a free Redis Cloud database.</span></EuiTitle>
         <EuiText size="xs">
           Do you want to create a free database in your existing subscription?
         </EuiText>

redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx

@@ -125,7 +125,7 @@ const OAuthSelectAccountDialog = () => {
       <EuiModalBody className={styles.modalBody}>
         <section className={styles.content}>
           <EuiTitle size="s">
-            <h3 className={styles.title}>Connect to Redis Enterprise Cloud</h3>
+            <h3 className={styles.title}>Connect to Redis Cloud</h3>
           </EuiTitle>
           <EuiText className={styles.subTitle}>
             Select an account to connect to: