Skip to content

Commit 04e3e48

Browse files
vlad-dargelvlad-dargel
authored
Revert "#RI-5473 - fix query card header"
1 parent c9d3448 commit 04e3e48

File tree

2 files changed

+176
-154
lines changed

2 files changed

+176
-154
lines changed

‎redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx‎

Lines changed: 149 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -292,8 +292,11 @@ const QueryCardHeader = (props: Props) => {
292292
data-testid="query-card-open"
293293
role="button"
294294
>
295-
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="m" responsive={false} style={{ width: '100%' }}>
296-
<EuiFlexItem className={styles.titleWrapper} grow>
295+
<EuiFlexGroup alignItems="center" gutterSize="l" responsive={false} style={{ width: '100%' }}>
296+
<EuiFlexItem
297+
className={styles.titleWrapper}
298+
grow={false}
299+
>
297300
<div className="copy-btn-wrapper">
298301
<EuiTextColor className={styles.title} color="subdued" component="div" data-testid="query-card-command">
299302
<QueryCardTooltip query={query} summary={summaryText} db={db} resultsMode={resultsMode} />
@@ -308,160 +311,156 @@ const QueryCardHeader = (props: Props) => {
308311
/>
309312
</div>
310313
</EuiFlexItem>
311-
<EuiFlexItem grow={false}>
312-
<EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
313-
<EuiFlexItem className={cx(styles.time)} data-testid="command-execution-date-time">
314-
{!!createdAt && (
315-
<EuiTextColor className={styles.timeText} component="div">
316-
{getFormatTime()}
317-
</EuiTextColor>
318-
)}
319-
</EuiFlexItem>
320-
<EuiFlexItem grow={false} className={styles.summaryTextWrapper}>
321-
{!!message && !isOpen && (
322-
<EuiTextColor className={styles.summaryText} component="div">
323-
{truncateText(message, 13)}
324-
</EuiTextColor>
325-
)}
326-
</EuiFlexItem>
327-
<EuiFlexItem grow={false} className={styles.executionTime} data-testid="command-execution-time">
328-
{isNumber(executionTime) && (
329-
<EuiToolTip
330-
title="Processing Time"
331-
content={getExecutionTimeString(executionTime)}
332-
position="left"
333-
anchorClassName={cx(styles.tooltipIcon, styles.alignCenter)}
334-
data-testid="execution-time-tooltip"
335-
>
336-
<>
337-
<EuiIcon
338-
type={ExecutionTimeIcon}
339-
data-testid="command-execution-time-icon"
340-
className={styles.iconExecutingTime}
341-
/>
342-
<EuiTextColor
343-
className={cx(styles.summaryText, styles.executionTimeValue)}
344-
data-testid="command-execution-time-value"
345-
>
346-
{getTruncatedExecutionTimeString(executionTime)}
347-
</EuiTextColor>
348-
</>
349-
</EuiToolTip>
350-
)}
351-
</EuiFlexItem>
352-
<EuiFlexItem
353-
grow={false}
354-
className={cx(styles.buttonIcon, styles.viewTypeIcon)}
355-
onClick={onDropDownViewClick}
314+
<EuiFlexItem className={cx(styles.time)} data-testid="command-execution-date-time">
315+
{!!createdAt && (
316+
<EuiTextColor className={styles.timeText} component="div">
317+
{getFormatTime()}
318+
</EuiTextColor>
319+
)}
320+
</EuiFlexItem>
321+
<EuiFlexItem grow={false} className={styles.summaryTextWrapper}>
322+
{!!message && !isOpen && (
323+
<EuiTextColor className={styles.summaryText} component="div">
324+
{truncateText(message, 13)}
325+
</EuiTextColor>
326+
)}
327+
</EuiFlexItem>
328+
<EuiFlexItem grow={false} className={styles.executionTime} data-testid="command-execution-time">
329+
{isNumber(executionTime) && (
330+
<EuiToolTip
331+
title="Processing Time"
332+
content={getExecutionTimeString(executionTime)}
333+
position="left"
334+
anchorClassName={cx(styles.tooltipIcon, styles.alignCenter)}
335+
data-testid="execution-time-tooltip"
356336
>
357-
{isOpen && canCommandProfile && !summaryText && (
358-
<div className={styles.dropdownWrapper}>
359-
<div className={styles.dropdown}>
360-
<EuiSuperSelect
361-
options={profileOptions}
362-
itemClassName={cx(styles.changeViewItem, styles.dropdownProfileItem)}
363-
className={cx(styles.changeView, styles.dropdownProfileIcon)}
364-
valueOfSelected={ProfileQueryType.Profile}
365-
onChange={(value: ProfileQueryType) => onQueryProfile(value)}
366-
data-testid="run-profile-type"
367-
/>
368-
</div>
369-
</div>
370-
)}
371-
</EuiFlexItem>
372-
<EuiFlexItem
373-
grow={false}
374-
className={cx(styles.buttonIcon, styles.viewTypeIcon)}
375-
onClick={onDropDownViewClick}
337+
<>
338+
<EuiIcon
339+
type={ExecutionTimeIcon}
340+
data-testid="command-execution-time-icon"
341+
className={styles.iconExecutingTime}
342+
/>
343+
<EuiTextColor
344+
className={cx(styles.timeText, styles.executionTimeValue)}
345+
data-testid="command-execution-time-value"
346+
>
347+
{getTruncatedExecutionTimeString(executionTime)}
348+
</EuiTextColor>
349+
</>
350+
</EuiToolTip>
351+
)}
352+
</EuiFlexItem>
353+
<EuiFlexItem
354+
grow={false}
355+
className={cx(styles.buttonIcon, styles.viewTypeIcon)}
356+
onClick={onDropDownViewClick}
357+
>
358+
{isOpen && canCommandProfile && !summaryText && (
359+
<div className={styles.dropdownWrapper}>
360+
<div className={styles.dropdown}>
361+
<EuiSuperSelect
362+
options={profileOptions}
363+
itemClassName={cx(styles.changeViewItem, styles.dropdownProfileItem)}
364+
className={cx(styles.changeView, styles.dropdownProfileIcon)}
365+
valueOfSelected={ProfileQueryType.Profile}
366+
onChange={(value: ProfileQueryType) => onQueryProfile(value)}
367+
data-testid="run-profile-type"
368+
/>
369+
</div>
370+
</div>
371+
)}
372+
</EuiFlexItem>
373+
<EuiFlexItem
374+
grow={false}
375+
className={cx(styles.buttonIcon, styles.viewTypeIcon)}
376+
onClick={onDropDownViewClick}
377+
>
378+
{isOpen && options.length > 1 && !summaryText && (
379+
<div className={styles.dropdownWrapper}>
380+
<div className={styles.dropdown}>
381+
<EuiSuperSelect
382+
options={modifiedOptions}
383+
itemClassName={cx(styles.changeViewItem)}
384+
className={cx(styles.changeView)}
385+
valueOfSelected={selectedValue}
386+
onChange={(value: string) => onChangeView(value)}
387+
data-testid="select-view-type"
388+
/>
389+
</div>
390+
</div>
391+
)}
392+
</EuiFlexItem>
393+
<EuiFlexItem grow={false} className={styles.buttonIcon} onClick={onDropDownViewClick}>
394+
{(isOpen || isFullScreen) && (
395+
<FullScreen isFullScreen={isFullScreen} onToggleFullScreen={toggleFullScreen} />
396+
)}
397+
</EuiFlexItem>
398+
<EuiFlexItem grow={false} className={styles.buttonIcon}>
399+
<EuiButtonIcon
400+
disabled={loading || clearing}
401+
iconType="trash"
402+
aria-label="Delete command"
403+
data-testid="delete-command"
404+
onClick={handleQueryDelete}
405+
/>
406+
</EuiFlexItem>
407+
{!isFullScreen && (
408+
<EuiFlexItem grow={false} className={cx(styles.buttonIcon, styles.playIcon)}>
409+
<EuiToolTip
410+
content="Run again"
411+
position="left"
376412
>
377-
{isOpen && options.length > 1 && !summaryText && (
378-
<div className={styles.dropdownWrapper}>
379-
<div className={styles.dropdown}>
380-
<EuiSuperSelect
381-
options={modifiedOptions}
382-
itemClassName={cx(styles.changeViewItem)}
383-
className={cx(styles.changeView)}
384-
valueOfSelected={selectedValue}
385-
onChange={(value: string) => onChangeView(value)}
386-
data-testid="select-view-type"
387-
/>
388-
</div>
389-
</div>
390-
)}
391-
</EuiFlexItem>
392-
<EuiFlexItem grow={false} className={styles.buttonIcon} onClick={onDropDownViewClick}>
393-
{(isOpen || isFullScreen) && (
394-
<FullScreen isFullScreen={isFullScreen} onToggleFullScreen={toggleFullScreen} />
395-
)}
396-
</EuiFlexItem>
397-
<EuiFlexItem grow={false} className={styles.buttonIcon}>
398413
<EuiButtonIcon
399-
disabled={loading || clearing}
400-
iconType="trash"
401-
aria-label="Delete command"
402-
data-testid="delete-command"
403-
onClick={handleQueryDelete}
414+
disabled={emptyCommand}
415+
iconType="play"
416+
aria-label="Re-run command"
417+
data-testid="re-run-command"
418+
onClick={handleQueryReRun}
404419
/>
405-
</EuiFlexItem>
406-
{!isFullScreen && (
407-
<EuiFlexItem grow={false} className={cx(styles.buttonIcon, styles.playIcon)}>
408-
<EuiToolTip
409-
content="Run again"
410-
position="left"
411-
>
412-
<EuiButtonIcon
413-
disabled={emptyCommand}
414-
iconType="play"
415-
aria-label="Re-run command"
416-
data-testid="re-run-command"
417-
onClick={handleQueryReRun}
418-
/>
419-
</EuiToolTip>
420-
</EuiFlexItem>
421-
)}
422-
{!isFullScreen && (
423-
<EuiFlexItem grow={false} className={styles.buttonIcon}>
424-
{!isSilentModeWithoutError(resultsMode, summary?.fail)
425-
&& <EuiButtonIcon iconType={isOpen ? 'arrowUp' : 'arrowDown'} aria-label="toggle collapse" />}
426-
</EuiFlexItem>
427-
)}
428-
<EuiFlexItem grow={false} className={styles.buttonIcon}>
429-
{(isRawMode(mode) || isGroupResults(resultsMode)) && (
430-
<EuiToolTip
431-
className={styles.tooltip}
432-
anchorClassName={styles.tooltipAnchor}
433-
content={(
434-
<>
435-
{isGroupMode(resultsMode) && (
436-
<EuiTextColor className={cx(styles.mode)} data-testid="group-mode-tooltip">
437-
<EuiIcon type={GroupModeIcon} />
438-
</EuiTextColor>
439-
)}
440-
{isSilentMode(resultsMode) && (
441-
<EuiTextColor className={cx(styles.mode)} data-testid="silent-mode-tooltip">
442-
<EuiIcon type={SilentModeIcon} />
443-
</EuiTextColor>
444-
)}
445-
{isRawMode(mode) && (
446-
<EuiTextColor className={cx(styles.mode)} data-testid="raw-mode-tooltip">
447-
-r
448-
</EuiTextColor>
449-
)}
450-
</>
420+
</EuiToolTip>
421+
</EuiFlexItem>
422+
)}
423+
{!isFullScreen && (
424+
<EuiFlexItem grow={false} className={styles.buttonIcon}>
425+
{!isSilentModeWithoutError(resultsMode, summary?.fail)
426+
&& <EuiButtonIcon iconType={isOpen ? 'arrowUp' : 'arrowDown'} aria-label="toggle collapse" />}
427+
</EuiFlexItem>
428+
)}
429+
{(isRawMode(mode) || isGroupResults(resultsMode)) && (
430+
<EuiFlexItem grow={false} className={styles.buttonIcon}>
431+
<EuiToolTip
432+
className={styles.tooltip}
433+
anchorClassName={styles.tooltipAnchor}
434+
content={(
435+
<>
436+
{isGroupMode(resultsMode) && (
437+
<EuiTextColor className={cx(styles.mode)} data-testid="group-mode-tooltip">
438+
<EuiIcon type={GroupModeIcon} />
439+
</EuiTextColor>
451440
)}
452-
position="bottom"
453-
data-testid="parameters-tooltip"
454-
>
455-
<EuiIcon
456-
color="subdued"
457-
type="boxesVertical"
458-
data-testid="parameters-anchor"
459-
/>
460-
</EuiToolTip>
441+
{isSilentMode(resultsMode) && (
442+
<EuiTextColor className={cx(styles.mode)} data-testid="silent-mode-tooltip">
443+
<EuiIcon type={SilentModeIcon} />
444+
</EuiTextColor>
445+
)}
446+
{isRawMode(mode) && (
447+
<EuiTextColor className={cx(styles.mode)} data-testid="raw-mode-tooltip">
448+
-r
449+
</EuiTextColor>
450+
)}
451+
</>
461452
)}
462-
</EuiFlexItem>
463-
</EuiFlexGroup>
464-
</EuiFlexItem>
453+
position="bottom"
454+
data-testid="parameters-tooltip"
455+
>
456+
<EuiIcon
457+
color="subdued"
458+
type="boxesVertical"
459+
data-testid="parameters-anchor"
460+
/>
461+
</EuiToolTip>
462+
</EuiFlexItem>
463+
)}
465464
</EuiFlexGroup>
466465
</div>
467466
)

‎redisinsight/ui/src/components/query-card/QueryCardHeader/styles.module.scss‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,28 @@ $marginIcon: 12px;
4343
}
4444
}
4545

46+
.titleWrapper {
47+
width: calc(100% - 552px);
48+
min-width: calc(100% - 552px);
49+
50+
@media (min-width: $breakpoint-m) {
51+
width: calc(100% - 689px);
52+
min-width: calc(100% - 689px);
53+
}
54+
}
55+
56+
:global(.fullscreen) .titleWrapper {
57+
width: calc(100% - 402px);
58+
59+
@media (min-width: $breakpoint-m) {
60+
width: calc(100% - 474px);
61+
}
62+
63+
@media (min-width: $breakpoint-l) {
64+
width: calc(100% - 519px);
65+
}
66+
}
67+
4668
.title {
4769
display: inline-block;
4870
font: normal normal normal 13px/17px Graphik, sans-serif !important;
@@ -61,8 +83,9 @@ $marginIcon: 12px;
6183
}
6284

6385
.time {
64-
max-width: 90px;
86+
max-width: 70px;
6587
position: relative;
88+
height: 18px;
6689
}
6790

6891
.mode + .mode {
@@ -148,8 +171,8 @@ $marginIcon: 12px;
148171
width: 13px;
149172

150173
@media (min-width: $breakpoint-m) {
151-
min-width: 92px;
152-
width: 92px;
174+
min-width: 58px;
175+
width: 58px;
153176
}
154177
}
155178

@@ -174,7 +197,7 @@ $marginIcon: 12px;
174197
display: flex;
175198
align-items: center;
176199
position: relative;
177-
padding: 0 0 3px 8px;
200+
padding: 3px 0 3px 8px;
178201

179202
span {
180203
margin-left: 10px;

0 commit comments

Comments
 (0)