From 610b5b512ce29a346c38b5e717f0786e3db919fc Mon Sep 17 00:00:00 2001 From: Krum Tyukenov Date: Thu, 10 Jul 2025 11:37:26 +0300 Subject: [PATCH 1/4] RI-7074: expose anchorClassName for RiTooltip --- .../src/components/base/tooltip/RITooltip.tsx | 4 +++- .../virtual-tree/components/Node/Node.tsx | 21 ++++++---------- .../components/Node/styles.module.scss | 6 +++++ .../no-key-selected/NoKeySelected.tsx | 24 ++++++++++--------- 4 files changed, 29 insertions(+), 26 deletions(-) diff --git a/redisinsight/ui/src/components/base/tooltip/RITooltip.tsx b/redisinsight/ui/src/components/base/tooltip/RITooltip.tsx index 6745a35393..0b4fd14a75 100644 --- a/redisinsight/ui/src/components/base/tooltip/RITooltip.tsx +++ b/redisinsight/ui/src/components/base/tooltip/RITooltip.tsx @@ -8,6 +8,7 @@ export interface RiTooltipProps title?: React.ReactNode position?: TooltipProps['placement'] delay?: TooltipProps['openDelayDuration'] + anchorClassName?: string } export const RiTooltip = ({ @@ -16,6 +17,7 @@ export const RiTooltip = ({ content, position, delay, + anchorClassName, ...props }: RiTooltipProps) => ( @@ -25,7 +27,7 @@ export const RiTooltip = ({ placement={position} openDelayDuration={delay} > - {children} + {children} ) 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 7a1cb1b20f..7f7bef0bba 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 @@ -13,7 +13,6 @@ import KeyRowType from 'uiSrc/pages/browser/components/key-row-type' import { RedisResponseBuffer } from 'uiSrc/slices/interfaces' import { appContextDbConfig } from 'uiSrc/slices/app/context' import { RiTooltip } from 'uiSrc/components' -import { Col, Row } from 'uiSrc/components/base/layout/flex' import { DeleteKeyPopover } from '../../../delete-key-popover/DeleteKeyPopover' import { TreeData } from '../../interfaces' import styles from './styles.module.scss' @@ -112,12 +111,8 @@ const Node = ({ } const Folder = () => ( - - + + <>
- + ) @@ -184,9 +179,7 @@ const Node = ({ ) const Node = ( - {!isLeaf && } {isLeaf && } - + ) const tooltipContent = ( - + <>
{`${keyCount} key(s) (${Math.round(keyApproximate * 100) / 100}%)`} - + ) return ( 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 5eb705ec60..f9093b0fa6 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,6 +1,9 @@ .anchorTooltipNode { + width: 100%; height: 42px; + display: flex !important; position: relative; + align-items: center; } .nodeContainer { @@ -16,9 +19,12 @@ } .nodeContent { + display: flex; + justify-content: space-between; cursor: pointer; padding: 8px 16px; color: var(--euiTextSubduedColor) !important; + align-items: center; font: normal normal normal 13px/28px Graphik, sans-serif !important; diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/no-key-selected/NoKeySelected.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/no-key-selected/NoKeySelected.tsx index a088ad6a99..871e15bb28 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/no-key-selected/NoKeySelected.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/no-key-selected/NoKeySelected.tsx @@ -44,17 +44,19 @@ export const NoKeySelected = (props: Props) => { return ( <> -
- - - -
+ + +
From 9501e6b0abb280df2208520811dee99a3e6777e6 Mon Sep 17 00:00:00 2001 From: Krum Tyukenov Date: Thu, 10 Jul 2025 14:06:37 +0300 Subject: [PATCH 2/4] revert anchorClassName prop usage for RiTooltip --- .../components/base/shared/WindowControlGroup.tsx | 12 ++++++++++-- .../consents-settings/ConsentsSettings.tsx | 2 +- .../database-list-modules/DatabaseListModules.tsx | 7 ++++++- .../database-list-options/DatabaseListOptions.tsx | 1 + .../src/components/formated-date/FormatedDate.tsx | 3 ++- .../ui/src/components/full-screen/FullScreen.tsx | 1 + .../inline-item-editor/InlineItemEditor.tsx | 1 + .../components/instance-header/InstanceHeader.tsx | 1 + .../monitor/MonitorHeader/MonitorHeader.tsx | 4 ++++ .../ui/src/components/multi-search/MultiSearch.tsx | 1 + .../components/oauth-sso-form/OAuthSsoForm.tsx | 1 + .../OAuthRecommendedSettings.tsx | 1 + .../oauth-social-buttons/OAuthSocialButtons.tsx | 1 + .../query-card/QueryCardHeader/QueryCardHeader.tsx | 14 ++++++++++++-- .../QueryCardTooltip/QueryCardTooltip.tsx | 1 + .../recommendation/badge-icon/BadgeIcon.tsx | 2 +- .../expert-chat-header/ExpertChatHeader.tsx | 6 +++++- .../components/InternalLink/InternalLink.tsx | 2 +- .../UploadTutorialForm/UploadTutorialForm.tsx | 1 + .../LiveTimeRecommendations.tsx | 1 + .../components/recommendation/Recommendation.tsx | 8 +++++++- .../src/components/TableResult/TableResult.tsx | 1 + .../RedisCloudDatabasesResultPage.tsx | 6 ++++-- .../RedisCloudDatabases/RedisCloudDatabases.tsx | 1 + .../RedisCloudDatabasesPage.tsx | 4 +++- .../RedisCloudSubscriptions.tsx | 1 + .../SentinelDatabasesResultPage.tsx | 13 +++++++------ .../sentinel-databases/SentinelDatabasesPage.tsx | 7 ++++++- .../SentinelDatabases/SentinelDatabases.tsx | 1 + .../add-items-actions/AddItemsActions.tsx | 8 ++++++-- .../pages/browser/components/add-key/AddKey.tsx | 8 ++++++-- .../components/bulk-actions/BulkActions.tsx | 6 +++++- .../BulkDeleteSummary/BulkDeleteSummary.tsx | 1 + .../CreateRedisearchIndexWrapper.tsx | 6 +++++- .../browser/components/key-row-name/KeyRowName.tsx | 1 + .../browser/components/key-row-size/KeyRowSize.tsx | 1 + .../browser/components/key-row-ttl/KeyRowTTL.tsx | 1 + .../browser/components/keys-header/KeysHeader.tsx | 1 + .../components/popover-delete/PopoverDelete.tsx | 1 + .../virtual-tree/components/Node/Node.tsx | 6 +++++- .../KeyDetailsHeaderFormatter.tsx | 1 + .../KeyDetailsHeaderName.tsx | 11 ++++++++--- .../hash-details-table/HashDetailsTable.tsx | 1 + .../add-items-action/AddItemsAction.tsx | 3 +++ .../remove-items-action/RemoveItemsAction.tsx | 3 ++- .../stream-items-action/StreamItemsAction.tsx | 3 +++ .../list-details-table/ListDetailsTable.tsx | 1 + .../StreamEntryFields/StreamEntryFields.tsx | 1 + .../add-stream-group/AddStreamGroup.tsx | 1 + .../consumers-view/ConsumersViewWrapper.tsx | 1 + .../groups-view/GroupsViewWrapper.tsx | 3 +++ .../MessageClaimPopover/MessageClaimPopover.tsx | 1 + .../stream-data-view/StreamDataViewWrapper.tsx | 1 + .../string-details-value/StringDetailsValue.tsx | 1 + .../text-details-wrapper/TextDetailsWrapper.tsx | 6 +++++- .../zset-details-table/ZSetDetailsTable.tsx | 1 + .../shared/editable-input/EditableInput.tsx | 1 + .../shared/editable-textarea/EditableTextArea.tsx | 1 + .../shared/formatted-value/FormattedValue.tsx | 1 + .../ClusterDetailsHeader.tsx | 1 + .../database-analysis/components/header/Header.tsx | 1 + .../recommendations-view/Recommendations.tsx | 2 +- .../components/top-keys/Table.tsx | 1 + .../add-database-screen/AddDatabaseScreen.tsx | 2 ++ .../cloud-connection-form/CloudConnectionForm.tsx | 1 + .../ClusterConnectionForm.tsx | 2 ++ .../DatabasesListWrapper.tsx | 6 +++++- .../pages/home/components/db-status/DbStatus.tsx | 11 ++++++++--- .../pages/home/components/form/DatabaseForm.tsx | 1 + .../ui/src/pages/home/components/form/DbInfo.tsx | 1 + .../components/form/sentinel/SentinelHostPort.tsx | 6 +++++- .../components/import-database/ImportDatabase.tsx | 1 + .../components/FooterActions.tsx | 2 ++ .../SentinelConnectionForm.tsx | 1 + .../subscription-panel/SubscriptionPanel.tsx | 5 ++++- .../components/patternsInfo/PatternsInfo.tsx | 5 +++-- .../components/ValidationTooltip.tsx | 1 + .../home/instance-list/RdiInstancesListWrapper.tsx | 6 +++++- .../reset-pipeline-button/ResetPipelineButton.tsx | 2 ++ .../start-pipeline-button/StartPipelineButton.tsx | 6 +++++- .../stop-pipeline-button/StopPipelineButton.tsx | 6 +++++- .../CurrentPipelineStatus.tsx | 5 ++++- .../pipeline-actions/PipelineActions.tsx | 1 + .../components/jobs-tree/JobsTree.tsx | 14 ++++++++++++-- .../components/navigation/Navigation.tsx | 11 +++++------ .../components/template-button/TemplateButton.tsx | 1 + .../components/template-form/TemplateForm.tsx | 1 + .../pages/redis-cluster/RedisClusterDatabases.tsx | 1 + .../redis-cluster/RedisClusterDatabasesPage.tsx | 6 +++++- .../user-api-keys-table/UserApiKeysTable.tsx | 10 ++++++++-- .../components/datetime-form/DatetimeForm.tsx | 1 + .../pages/slow-log/components/Actions/Actions.tsx | 7 ++++++- .../components/SlowLogTable/SlowLogTable.tsx | 12 +++++++----- 93 files changed, 264 insertions(+), 63 deletions(-) diff --git a/redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx b/redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx index 1772f8f8d3..a963281b97 100644 --- a/redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx +++ b/redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx @@ -22,7 +22,11 @@ export const WindowControlGroup = ({ }: Props) => ( - + - + { diff --git a/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx b/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx index 08ef5b88a3..aabbdc507b 100644 --- a/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx +++ b/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx @@ -142,7 +142,12 @@ const DatabaseListModules = React.memo((props: Props) => { !inCircle ? ( Module(moduleName, abbreviation, icon, content) ) : ( - + <>{Module(moduleName, abbreviation, icon, content)} ), diff --git a/redisinsight/ui/src/components/database-list-options/DatabaseListOptions.tsx b/redisinsight/ui/src/components/database-list-options/DatabaseListOptions.tsx index 115dfd4dcb..e7daeb3142 100644 --- a/redisinsight/ui/src/components/database-list-options/DatabaseListOptions.tsx +++ b/redisinsight/ui/src/components/database-list-options/DatabaseListOptions.tsx @@ -96,6 +96,7 @@ const DatabaseListOptions = ({ options }: Props) => { : contentProp } position="top" + anchorClassName={styles.tooltip} > {icon ? ( { const formatedDate = formatTimestamp(date, dateFormat, timezone) return ( - + {formatedDate} ) diff --git a/redisinsight/ui/src/components/full-screen/FullScreen.tsx b/redisinsight/ui/src/components/full-screen/FullScreen.tsx index 405422030a..1b2f23934a 100644 --- a/redisinsight/ui/src/components/full-screen/FullScreen.tsx +++ b/redisinsight/ui/src/components/full-screen/FullScreen.tsx @@ -19,6 +19,7 @@ const FullScreen = ({ { const ApplyBtn = ( { { ? 'Pause' : 'Resume' } + anchorClassName="inline-flex" > { content={ !isStarted || !items.length ? '' : 'Clear Profiler Window' } + anchorClassName={cx('inline-flex', { + transparent: !isStarted || !items.length, + })} > { {disableSubmit && ( {SubmitBtn()} diff --git a/redisinsight/ui/src/components/oauth/shared/oauth-form/components/oauth-sso-form/OAuthSsoForm.tsx b/redisinsight/ui/src/components/oauth/shared/oauth-form/components/oauth-sso-form/OAuthSsoForm.tsx index 1f73bbd976..e921fa1cad 100644 --- a/redisinsight/ui/src/components/oauth/shared/oauth-form/components/oauth-sso-form/OAuthSsoForm.tsx +++ b/redisinsight/ui/src/components/oauth/shared/oauth-form/components/oauth-sso-form/OAuthSsoForm.tsx @@ -61,6 +61,7 @@ const OAuthSsoForm = ({ onBack, onSubmit }: Props) => { }) => ( { } position="top" + anchorClassName={styles.recommendedSettingsToolTip} > diff --git a/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/OAuthSocialButtons.tsx b/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/OAuthSocialButtons.tsx index 4333334d20..20c2a3cbb0 100644 --- a/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/OAuthSocialButtons.tsx +++ b/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/OAuthSocialButtons.tsx @@ -60,6 +60,7 @@ const OAuthSocialButtons = (props: Props) => { diff --git a/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx b/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx index cd0bb8f82c..fb2cf26fb1 100644 --- a/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx +++ b/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx @@ -251,7 +251,11 @@ const QueryCardHeader = (props: Props) => { disabled: false, inputDisplay: (
- + { title="Processing Time" content={getExecutionTimeString(executionTime)} position="left" + anchorClassName={styles.executionTime} data-testid="execution-time-tooltip" > <> @@ -481,7 +486,11 @@ const QueryCardHeader = (props: Props) => { {!isFullScreen && ( - + { {(isRawMode(mode) || isGroupResults(resultsMode)) && ( {isGroupMode(resultsMode) && ( diff --git a/redisinsight/ui/src/components/query/query-card/QueryCardTooltip/QueryCardTooltip.tsx b/redisinsight/ui/src/components/query/query-card/QueryCardTooltip/QueryCardTooltip.tsx index 0e1a562d90..56b1521f99 100644 --- a/redisinsight/ui/src/components/query/query-card/QueryCardTooltip/QueryCardTooltip.tsx +++ b/redisinsight/ui/src/components/query/query-card/QueryCardTooltip/QueryCardTooltip.tsx @@ -72,6 +72,7 @@ const QueryCardTooltip = (props: Props) => { return ( {contentItems}} position="bottom" > diff --git a/redisinsight/ui/src/components/recommendation/badge-icon/BadgeIcon.tsx b/redisinsight/ui/src/components/recommendation/badge-icon/BadgeIcon.tsx index 6e786a3936..334a991a91 100644 --- a/redisinsight/ui/src/components/recommendation/badge-icon/BadgeIcon.tsx +++ b/redisinsight/ui/src/components/recommendation/badge-icon/BadgeIcon.tsx @@ -16,7 +16,7 @@ const BadgeIcon = ({ id, icon, name }: Props) => ( data-testid={`recommendation-badge-${id}`} >
- + {icon}
diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx index 665871312b..83bf3a3c9e 100644 --- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx @@ -63,7 +63,10 @@ const ExpertChatHeader = (props: Props) => { return (
{connectedInstanceName ? ( - + {connectedInstanceName} @@ -78,6 +81,7 @@ const ExpertChatHeader = (props: Props) => { ? undefined : 'Open relevant tutorials to learn more' } + anchorClassName={styles.headerBtnAnchor} position="bottom" > { } const content = ( - +
{children || label}
{!!summary && ( diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx index ae747eadbe..40ce30a77a 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx @@ -115,6 +115,7 @@ const UploadTutorialForm = (props: Props) => { { Tips will help you improve your database. diff --git a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/Recommendation.tsx b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/Recommendation.tsx index 6a63a0c00d..ecc8d878fd 100644 --- a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/Recommendation.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/Recommendation.tsx @@ -89,7 +89,11 @@ const RecommendationTitle = ({ className={styles.redisStackLink} data-testid={`${id}-redis-stack-link`} > - + { position="bottom" title={title} className="text-multiline-ellipsis" + anchorClassName={cx('tooltip')} content={formatLongName(value.toString())} >
diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResultPage.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResultPage.tsx index 3cfb2e7493..e2f3812b0a 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResultPage.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResultPage.tsx @@ -82,6 +82,7 @@ const RedisCloudDatabasesResultPage = () => { position="bottom" title="Database" className={styles.tooltipColumnName} + anchorClassName="truncateText" content={formatLongName(name)} > {cellContent} @@ -113,6 +114,7 @@ const RedisCloudDatabasesResultPage = () => { position="bottom" title="Subscription" className={styles.tooltipColumnName} + anchorClassName="truncateText" content={formatLongName(name)} > {cellContent} @@ -152,7 +154,7 @@ const RedisCloudDatabasesResultPage = () => { return (
{text} - + { {statusAdded === AddRedisDatabaseStatus.Success ? ( {messageAdded} ) : ( - + diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx index f6cca7e533..0e729c7084 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx @@ -167,6 +167,7 @@ const RedisCloudDatabasesPage = ({ const SubmitButton = ({ isDisabled }: { isDisabled: boolean }) => ( { position="bottom" title="Database" className={styles.tooltipColumnName} + anchorClassName="truncateText" content={formatLongName(name)} > {cellContent} @@ -178,6 +179,7 @@ const RedisCloudDatabasesPage = () => { position="bottom" title="Subscription" className={styles.tooltipColumnName} + anchorClassName="truncateText" content={formatLongName(name)} > {cellContent} @@ -217,7 +219,7 @@ const RedisCloudDatabasesPage = () => { return (
{text} - + ( { return (
{text} - + {
Database Alias - ) : null - } + content={isDisabled ? Database Alias : null} > { return (
{text} - + { onChangedInput={handleChangedInput} append={ diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx index 4ffa1ac78c..4ee059e4b7 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx @@ -175,6 +175,7 @@ const SentinelDatabases = ({ return ( { { )} {index === length - 1 && (
- +
diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKey.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKey.tsx index 0087b597a3..7586cab843 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKey.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKey.tsx @@ -132,11 +132,15 @@ const AddKey = (props: Props) => { New Key {!arePanelsCollapsed && ( - + closeKey()} /> diff --git a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActions.tsx b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActions.tsx index 5100b9c9c5..e859844b74 100644 --- a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActions.tsx +++ b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActions.tsx @@ -115,7 +115,11 @@ const BulkActions = (props: Props) => { /> )} {(!arePanelsCollapsed || isFullScreen) && ( - + { {title} {!arePanelsCollapsed && ( - + { diff --git a/redisinsight/ui/src/pages/browser/components/key-row-size/KeyRowSize.tsx b/redisinsight/ui/src/pages/browser/components/key-row-size/KeyRowSize.tsx index c20c058902..1b2990ace1 100644 --- a/redisinsight/ui/src/pages/browser/components/key-row-size/KeyRowSize.tsx +++ b/redisinsight/ui/src/pages/browser/components/key-row-size/KeyRowSize.tsx @@ -58,6 +58,7 @@ const KeyRowSize = (props: Props) => { {formatBytes(size, 3)}} > diff --git a/redisinsight/ui/src/pages/browser/components/key-row-ttl/KeyRowTTL.tsx b/redisinsight/ui/src/pages/browser/components/key-row-ttl/KeyRowTTL.tsx index 4384ea38d8..d89c44080c 100644 --- a/redisinsight/ui/src/pages/browser/components/key-row-ttl/KeyRowTTL.tsx +++ b/redisinsight/ui/src/pages/browser/components/key-row-ttl/KeyRowTTL.tsx @@ -61,6 +61,7 @@ const KeyRowTTL = (props: Props) => { 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 a5b531915a..111a75cfbe 100644 --- a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx +++ b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx @@ -404,6 +404,7 @@ const KeysHeader = (props: Props) => { { const deleteButtonWithTooltip = ( {deleteButton} 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 7f7bef0bba..fb145725bd 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 @@ -111,7 +111,11 @@ const Node = ({ } const Folder = () => ( - + <>
{ : typeSelected } position="top" + anchorClassName="flex-row" > <> {width >= MIDDLE_SCREEN_RESOLUTION ? ( diff --git a/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-name/KeyDetailsHeaderName.tsx b/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-name/KeyDetailsHeaderName.tsx index 59efb45390..68b9d36a26 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-name/KeyDetailsHeaderName.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-name/KeyDetailsHeaderName.tsx @@ -165,8 +165,9 @@ const KeyDetailsHeaderName = ({ onEditKey }: Props) => { title="Key Name" position="left" content={tooltipContent} + anchorClassName={styles.toolTipAnchorKey} > - + <> applyEditKey()} isDisabled={!keyIsEditable} @@ -199,10 +200,14 @@ const KeyDetailsHeaderName = ({ onEditKey }: Props) => { />

{key}

- + {keyIsHovering && ( - + { diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/add-items-action/AddItemsAction.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/add-items-action/AddItemsAction.tsx index ee2b19852e..12ace2a8dc 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/add-items-action/AddItemsAction.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/add-items-action/AddItemsAction.tsx @@ -20,6 +20,9 @@ const AddItemsAction = ({ width, title, openAddItemPanel }: Props) => ( MIDDLE_SCREEN_RESOLUTION ? '' : title} position="left" + anchorClassName={cx(styles.actionBtn, { + [styles.withText]: width > MIDDLE_SCREEN_RESOLUTION, + })} > ( - + ( MIDDLE_SCREEN_RESOLUTION ? '' : title} position="left" + anchorClassName={cx(styles.actionBtn, { + [styles.withText]: width > MIDDLE_SCREEN_RESOLUTION, + })} > { diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/StreamEntryFields/StreamEntryFields.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/StreamEntryFields/StreamEntryFields.tsx index f377be7b7c..764854d57b 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/StreamEntryFields/StreamEntryFields.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/StreamEntryFields/StreamEntryFields.tsx @@ -122,6 +122,7 @@ const StreamEntryFields = (props: Props) => { onFocus={() => setIsEntryIdFocused(true)} append={ { onFocus={() => setIsIdFocused(true)} append={ { > diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/groups-view/GroupsViewWrapper.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/groups-view/GroupsViewWrapper.tsx index d7920a1a52..76a0038151 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/groups-view/GroupsViewWrapper.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/groups-view/GroupsViewWrapper.tsx @@ -227,6 +227,7 @@ const GroupsViewWrapper = (props: Props) => { > @@ -285,6 +286,7 @@ const GroupsViewWrapper = (props: Props) => { @@ -373,6 +375,7 @@ const GroupsViewWrapper = (props: Props) => { onFocus={() => setIsIdFocused(true)} append={ { {button} diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/stream-data-view/StreamDataViewWrapper.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/stream-data-view/StreamDataViewWrapper.tsx index 3e71c16812..35ab26d55a 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/stream-data-view/StreamDataViewWrapper.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/stream-data-view/StreamDataViewWrapper.tsx @@ -300,6 +300,7 @@ const StreamDataViewWrapper = (props: Props) => { tooltipContent={tooltipContent} expanded={expanded} truncateLength={650} + anchorClassName="streamItem line-clamp-2" />
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-value/StringDetailsValue.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-value/StringDetailsValue.tsx index a913a2551e..9e169ea3f1 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-value/StringDetailsValue.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-value/StringDetailsValue.tsx @@ -247,6 +247,7 @@ const StringDetailsValue = (props: Props) => { return ( - + { diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/EditableInput.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/EditableInput.tsx index bc142e5891..d505a660d2 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/EditableInput.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/EditableInput.tsx @@ -61,6 +61,7 @@ const EditableInput = (props: Props) => { {isHovering && ( { {isHovering && ( diff --git a/redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/ClusterDetailsHeader.tsx b/redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/ClusterDetailsHeader.tsx index dca4e61a4b..b2ce41ab18 100644 --- a/redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/ClusterDetailsHeader.tsx +++ b/redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/ClusterDetailsHeader.tsx @@ -56,6 +56,7 @@ const ClusterDetailsHeader = () => { ) : ( {formatLongName(username || DEFAULT_USERNAME)}} > diff --git a/redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx b/redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx index ef315f737c..6a7ab30f9b 100644 --- a/redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx +++ b/redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx @@ -168,6 +168,7 @@ const Header = (props: Props) => { { className={styles.redisStackLink} data-testid={`${id}-redis-stack-link`} > - + diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx index 5018b1b4e9..1af51184bc 100644 --- a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx +++ b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx @@ -123,6 +123,7 @@ const AddDatabaseScreen = (props: Props) => { @@ -158,6 +159,7 @@ const AddDatabaseScreen = (props: Props) => { diff --git a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx index 206695cf00..ca61ebf7d9 100644 --- a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx +++ b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx @@ -132,6 +132,7 @@ const CloudConnectionForm = (props: Props) => { const SubmitButton = ({ onClick, submitIsDisabled }: ISubmitButton) => ( {
} className="homePage_tooltip" + anchorClassName="inputAppendIcon" position="right" content={
    @@ -168,6 +169,7 @@ const ClusterConnectionForm = (props: Props) => { const SubmitButton = ({ onClick, submitIsDisabled }: ISubmitButton) => ( { return (
    {text} - + { } position="right" className={styles.tooltip} + anchorClassName={cx(styles.statusAnchor, styles.warning)} >
    ! @@ -103,9 +104,13 @@ const DbStatus = (props: Props) => { if (isNew) { return ( - +
    diff --git a/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx b/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx index 98696d5660..6c24e14dad 100644 --- a/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx +++ b/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx @@ -58,6 +58,7 @@ const DatabaseForm = (props: Props) => {
    } className="homePage_tooltip" + anchorClassName="inputAppendIcon" position="right" content={
      diff --git a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx index be44d0677f..697446e5cb 100644 --- a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx +++ b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx @@ -48,6 +48,7 @@ const DbInfo = (props: Props) => { {nodes?.map(({ host: eHost, port: ePort }) => ( diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelHostPort.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelHostPort.tsx index 1ba3b94b42..436fc5b086 100644 --- a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelHostPort.tsx +++ b/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelHostPort.tsx @@ -23,7 +23,11 @@ const SentinelHostPort = (props: Props) => { Sentinel Host & Port:
      {`${host}:${port}`} - + { { }: ISubmitButton) => ( { { const SubmitButton = ({ onClick, submitIsDisabled }: ISubmitButton) => ( { {!!messages.length && ( - + { Patterns: {getChannelsCount()}{' '} + <> {channels ?.trim() .split(' ') .map((ch) =>

      {ch}

      )} - + } > { (
      {name} - + void @@ -32,6 +33,7 @@ const ResetPipelineButton = ({ ) : null } + anchorClassName={disabled || loading ? styles.disabled : styles.tooltip} > ( - + ( - + ) : ( - +
      {stateInfo.label} diff --git a/redisinsight/ui/src/pages/rdi/instance/components/header/components/pipeline-actions/PipelineActions.tsx b/redisinsight/ui/src/pages/rdi/instance/components/header/components/pipeline-actions/PipelineActions.tsx index 0b8f75f606..aac39eea7e 100644 --- a/redisinsight/ui/src/pages/rdi/instance/components/header/components/pipeline-actions/PipelineActions.tsx +++ b/redisinsight/ui/src/pages/rdi/instance/components/header/components/pipeline-actions/PipelineActions.tsx @@ -175,6 +175,7 @@ const PipelineActions = ({ collectorStatus, pipelineStatus }: Props) => { : 'Please fix the validation errors before deploying' } position="left" + anchorClassName="flex-row" > { className={styles.actions} data-testid={`rdi-nav-job-actions-${name}`} > - + { @@ -190,7 +194,11 @@ const JobsTree = (props: IProps) => { data-testid={`edit-job-name-${name}`} /> - + { { { - - - + )}
      diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/TemplateButton.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/TemplateButton.tsx index 85697aaea2..d50c467386 100644 --- a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/TemplateButton.tsx +++ b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/TemplateButton.tsx @@ -49,6 +49,7 @@ const TemplateButton = ({ setFieldValue, value }: TemplateButtonProps) => { { content={getTooltipContent(value, isNoTemplateOptions)} position="bottom" className={styles.btn} + anchorClassName="flex-row" > { !!dnsName && (
      {text} - + { return (
      {!valid && ( - + { }, }) => (
      - + { { closePopover={closePopoverClear} panelPaddingSize="m" button={ - + { Slow Log is a list of slow operations for your Redis instance. diff --git a/redisinsight/ui/src/pages/slow-log/components/SlowLogTable/SlowLogTable.tsx b/redisinsight/ui/src/pages/slow-log/components/SlowLogTable/SlowLogTable.tsx index 8e0d9b8bbe..22bda3f182 100644 --- a/redisinsight/ui/src/pages/slow-log/components/SlowLogTable/SlowLogTable.tsx +++ b/redisinsight/ui/src/pages/slow-log/components/SlowLogTable/SlowLogTable.tsx @@ -81,11 +81,13 @@ const SlowLogTable = (props: Props) => { id: 'args', label: 'Command', render: (command) => ( - - - - {command} - + + + {command} ), From cafbe941d05fbc319300917253c4634e114c489a Mon Sep 17 00:00:00 2001 From: Krum Tyukenov Date: Thu, 10 Jul 2025 14:22:55 +0300 Subject: [PATCH 3/4] revert missing styles --- .../components/database-list-modules/styles.module.scss | 4 ++++ .../ui/src/components/formated-date/styles.module.scss | 9 +++++++++ .../remove-items-action/RemoveItemsAction.tsx | 2 +- 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 redisinsight/ui/src/components/formated-date/styles.module.scss diff --git a/redisinsight/ui/src/components/database-list-modules/styles.module.scss b/redisinsight/ui/src/components/database-list-modules/styles.module.scss index 4736d8e8a8..a621cbe001 100644 --- a/redisinsight/ui/src/components/database-list-modules/styles.module.scss +++ b/redisinsight/ui/src/components/database-list-modules/styles.module.scss @@ -54,3 +54,7 @@ .abbr { vertical-align: text-top; } + +.anchorModuleTooltip { + margin-right: 18px; +} diff --git a/redisinsight/ui/src/components/formated-date/styles.module.scss b/redisinsight/ui/src/components/formated-date/styles.module.scss new file mode 100644 index 0000000000..8c420921dd --- /dev/null +++ b/redisinsight/ui/src/components/formated-date/styles.module.scss @@ -0,0 +1,9 @@ +.text { + display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + position: relative; + max-width: 100%; + vertical-align: middle; +} diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/remove-items-action/RemoveItemsAction.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/remove-items-action/RemoveItemsAction.tsx index 912c588606..86d715f6eb 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/remove-items-action/RemoveItemsAction.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/remove-items-action/RemoveItemsAction.tsx @@ -3,7 +3,7 @@ import React from 'react' import { RiTooltip } from 'uiSrc/components' import { IconButton } from 'uiSrc/components/base/forms/buttons' import { MinusInCircleIcon } from 'uiSrc/components/base/icons' -import styles from './styles.module.scss' +import styles from '../styles.module.scss' export interface Props { title: string From 515afebdb7088fc08911437e808ed4b5bb113d1e Mon Sep 17 00:00:00 2001 From: Krum Tyukenov Date: Thu, 10 Jul 2025 14:43:36 +0300 Subject: [PATCH 4/4] fix missing import --- .../ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx b/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx index f9513ef3ed..0b6c57c968 100644 --- a/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx +++ b/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx @@ -1,5 +1,6 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' +import cx from 'classnames' import { useParams } from 'react-router-dom' import { EuiIcon } from '@elastic/eui'