From bd208754c1a211bebcc2d1cb9ae100f02c3de7d0 Mon Sep 17 00:00:00 2001 From: zalenskiSofteq Date: Tue, 31 Oct 2023 14:50:04 +0100 Subject: [PATCH] * #RI-5095 - [FE] Scrollbar is displayed for "No keys" panel in tree view when clicked * #RI-5096 - [FE] Delete popup moved at the top left corner when hovering on the key below in list and delete popup opened * #RI-5097 - [FE] Multiple tooltips can be displayed at the same time when hovering over different namespaces after scrolling * #RI-5098 - [FE] Key details are opened for the key in tree view automatically when it wasn't opened in list view * #RI-5100 - [FE] Namespaces folders collapsed after refresh --- .../components/keys-header/KeysHeader.tsx | 1 - .../no-keys-found/styles.module.scss | 1 + .../components/virtual-tree/VirtualTree.tsx | 1 + .../virtual-tree/components/Node/Node.tsx | 70 ++++++++----------- .../components/Node/styles.module.scss | 7 +- .../components/virtual-tree/interfaces.ts | 1 + yarn.lock | 21 +----- 7 files changed, 40 insertions(+), 62 deletions(-) diff --git a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx index 04a3f9795f..24102f588f 100644 --- a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx +++ b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx @@ -117,7 +117,6 @@ const KeysHeader = (props: Props) => { } const handleRefreshKeys = () => { - dispatch(resetBrowserTree()) dispatch(fetchKeys( { searchMode, diff --git a/redisinsight/ui/src/pages/browser/components/no-keys-found/styles.module.scss b/redisinsight/ui/src/pages/browser/components/no-keys-found/styles.module.scss index 73c3a47969..d747185b18 100644 --- a/redisinsight/ui/src/pages/browser/components/no-keys-found/styles.module.scss +++ b/redisinsight/ui/src/pages/browser/components/no-keys-found/styles.module.scss @@ -1,5 +1,6 @@ .container { max-width: 400px; + min-height: 440px; margin: auto; text-align: center; diff --git a/redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx b/redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx index 54cd1795b5..552873d9b2 100644 --- a/redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx +++ b/redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx @@ -187,6 +187,7 @@ const VirtualTree = (props: Props) => { size: node.size, type: node.type, fullName: node.fullName, + shortName: node.nameString?.split(delimiter).pop(), nestingLevel, deleting, path: node.path, diff --git a/redisinsight/ui/src/pages/browser/components/virtual-tree/components/Node/Node.tsx b/redisinsight/ui/src/pages/browser/components/virtual-tree/components/Node/Node.tsx index a0ae1b7278..8739c9c7a8 100644 --- a/redisinsight/ui/src/pages/browser/components/virtual-tree/components/Node/Node.tsx +++ b/redisinsight/ui/src/pages/browser/components/virtual-tree/components/Node/Node.tsx @@ -41,6 +41,7 @@ const Node = ({ path, type, ttl, + shortName, size, deleting, nameString, @@ -64,12 +65,6 @@ const Node = ({ } }, []) - useEffect(() => { - if (isSelected && nameBuffer) { - updateStatusSelected?.(nameBuffer) - } - }, [isSelected]) - const handleClick = () => { if (isLeaf && !isSelected) { updateStatusSelected?.(nameBuffer) @@ -98,35 +93,41 @@ const Node = ({ } const Folder = () => ( - <> -
- - - - {nameString} - -
-
-
- {keyApproximate ? `${keyApproximate < 1 ? '<1' : Math.round(keyApproximate)}%` : '' } + + <> +
+ + + + {nameString} +
-
{keyCount ?? ''}
-
- +
+
+ {keyApproximate ? `${keyApproximate < 1 ? '<1' : Math.round(keyApproximate)}%` : '' } +
+
{keyCount ?? ''}
+
+ + ) const Leaf = () => ( <> - + - {isLeaf && Node} - {!isLeaf && ( - - {Node} - - )} + {Node}
) } diff --git a/redisinsight/ui/src/pages/browser/components/virtual-tree/components/Node/styles.module.scss b/redisinsight/ui/src/pages/browser/components/virtual-tree/components/Node/styles.module.scss index 653a14ad0b..dd3be8344d 100644 --- a/redisinsight/ui/src/pages/browser/components/virtual-tree/components/Node/styles.module.scss +++ b/redisinsight/ui/src/pages/browser/components/virtual-tree/components/Node/styles.module.scss @@ -1,8 +1,9 @@ .anchorTooltipNode { width: 100%; height: 42px; - display: inline-block; + display: flex !important; position: relative; + align-items: center; } .nodeContainer { @@ -39,13 +40,13 @@ :global(.moveOnHoverKey) { transition: transform ease 0.3s; - &.hide { + &:global(.hide) { transform: translateX(-8px); } } :global(.showOnHoverKey) { display: none !important; - &.show { + &:global(.show) { display: flex !important; } } diff --git a/redisinsight/ui/src/pages/browser/components/virtual-tree/interfaces.ts b/redisinsight/ui/src/pages/browser/components/virtual-tree/interfaces.ts index 8d34865532..119c843d29 100644 --- a/redisinsight/ui/src/pages/browser/components/virtual-tree/interfaces.ts +++ b/redisinsight/ui/src/pages/browser/components/virtual-tree/interfaces.ts @@ -42,6 +42,7 @@ export interface TreeData extends FixedSizeNodeData { keyCount: number keyApproximate: number fullName: string + shortName?: string leafIcon: string type: KeyTypes | ModulesKeyTypes ttl: number diff --git a/yarn.lock b/yarn.lock index 5cf651da51..5f279b5887 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11797,7 +11797,7 @@ postcss-reduce-transforms@^5.1.0: dependencies: postcss-value-parser "^4.2.0" -postcss-selector-parser@^6.0.2: +postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9: version "6.0.13" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b" integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ== @@ -11805,14 +11805,6 @@ postcss-selector-parser@^6.0.2: cssesc "^3.0.0" util-deprecate "^1.0.2" -postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9: - version "6.0.11" - resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc" - integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g== - dependencies: - cssesc "^3.0.0" - util-deprecate "^1.0.2" - postcss-svgo@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz#0a317400ced789f233a28826e77523f15857d80d" @@ -11833,7 +11825,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@^8.2.15: +postcss@^8.2.15, postcss@^8.2.9: version "8.4.31" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d" integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ== @@ -11842,15 +11834,6 @@ postcss@^8.2.15: picocolors "^1.0.0" source-map-js "^1.0.2" -postcss@^8.2.9: - version "8.4.23" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.23.tgz#df0aee9ac7c5e53e1075c24a3613496f9e6552ab" - integrity sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA== - dependencies: - nanoid "^3.3.6" - picocolors "^1.0.0" - source-map-js "^1.0.2" - postinstall-postinstall@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/postinstall-postinstall/-/postinstall-postinstall-2.1.0.tgz#4f7f77441ef539d1512c40bd04c71b06a4704ca3"