Merge branch 'main' of https://github.com/RedisInsight/RedisInsight into bugfix/RI-3525_electron_styles

Author: AmirAllayarovSofteq

redisinsight/ui/src/assets/img/survey_icon.svg

@@ -3,6 +3,7 @@ import cx from 'classnames'
 import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
+import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 
 import {
   clearSearchingCommand,
@@ -14,6 +15,7 @@ import {
 } from 'uiSrc/slices/cli/cli-settings'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { monitorSelector, toggleHideMonitor, toggleMonitor } from 'uiSrc/slices/cli/monitor'
+import SurveyIcon from 'uiSrc/assets/img/survey_icon.svg'
 
 import styles from '../../styles.module.scss'
 
@@ -67,6 +69,12 @@ const BottomGroupMinimized = () => {
     dispatch(toggleMonitor())
   }
 
+  const onClickSurvey = () => {
+    sendEventTelemetry({
+      event: TelemetryEvent.USER_SURVEY_LINK_CLICKED
+    })
+  }
+
   return (
     <div className={styles.containerMinimized}>
       <EuiFlexGroup
@@ -117,6 +125,19 @@ const BottomGroupMinimized = () => {
           </EuiBadge>
         </EuiFlexItem>
       </EuiFlexGroup>
+      <a
+        className={styles.surveyLink}
+        target="_blank"
+        rel="noreferrer"
+        href={EXTERNAL_LINKS.userSurvey}
+        onClick={onClickSurvey}
+        data-testid="user-survey-link"
+      >
+        <>
+          <EuiIcon type={SurveyIcon} className={styles.surveyIcon} />
+          <span>We need your opinion. Please take our survey.</span>
+        </>
+      </a>
     </div>
   )
 }

redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx

@@ -11,9 +11,31 @@
 }
 
 .containerMinimized {
+  display: flex;
+  align-items: center;
   height: 26px;
   line-height: 26px;
   border: 1px solid var(--euiColorLightShade);
+
+  .surveyLink {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 12px;
+    color: var(--htmlColor) !important;
+    font: normal normal normal 12px/18px Graphik, sans-serif;
+
+    &:hover {
+      background-color: var(--euiColorSecondary);
+      color: var(--euiColorPrimaryText) !important;
+    }
+  }
+
+  .surveyIcon {
+    margin-right: 8px;
+    width: 18px;
+    height: 18px;
+  }
 }
 
 .componentBadgeItem {

redisinsight/ui/src/components/bottom-group-components/styles.module.scss

@@ -1,16 +1,21 @@
 import cx from 'classnames'
 import * as d3 from 'd3'
 import { sumBy } from 'lodash'
-import React, { useEffect, useRef } from 'react'
-import { truncateNumberToRange } from 'uiSrc/utils'
+import React, { useEffect, useRef, useState } from 'react'
+import { flushSync } from 'react-dom'
+import { Nullable, truncateNumberToRange } from 'uiSrc/utils'
 import { rgb, RGBColor } from 'uiSrc/utils/colors'
+import { getPercentage } from 'uiSrc/utils/numbers'
 
 import styles from './styles.module.scss'
 
 export interface ChartData {
   value: number
   name: string
   color: RGBColor
+  meta?: {
+    [key: string]: any
+  }
 }
 
 interface IProps {
@@ -32,8 +37,9 @@ interface IProps {
     arcLabelValue?: string
     tooltip?: string
   }
-  renderLabel?: (value: number) => string
-  renderTooltip?: (value: number) => string
+  renderLabel?: (data: ChartData) => string
+  renderTooltip?: (data: ChartData) => React.ReactElement | string
+  labelAs?: 'value' | 'percentage'
 }
 
 const ANIMATION_DURATION_MS = 100
@@ -47,17 +53,20 @@ const DonutChart = (props: IProps) => {
     title,
     config,
     classNames,
+    labelAs = 'value',
     renderLabel,
-    renderTooltip = (v) => v,
+    renderTooltip,
   } = props
 
   const margin = config?.margin || 98
   const radius = config?.radius || (width / 2 - margin)
   const arcWidth = config?.arcWidth || 8
   const percentToShowLabel = config?.percentToShowLabel || 5
 
+  const [hoveredData, setHoveredData] = useState<Nullable<ChartData>>(null)
   const svgRef = useRef<SVGSVGElement>(null)
   const tooltipRef = useRef<HTMLDivElement>(null)
+  const sum = sumBy(data, 'value')
 
   const arc = d3.arc<d3.PieArcDatum<ChartData>>()
     .outerRadius(radius)
@@ -74,12 +83,20 @@ const DonutChart = (props: IProps) => {
       .duration(ANIMATION_DURATION_MS)
       .attr('d', arcHover)
 
-    if (tooltipRef.current) {
-      tooltipRef.current.innerHTML = `${d.data.name}: ${renderTooltip(d.value)}`
-      tooltipRef.current.style.visibility = 'visible'
-      tooltipRef.current.style.top = `${e.pageY + 15}px`
-      tooltipRef.current.style.left = `${e.pageX + 15}px`
+    if (!tooltipRef.current) {
+      return
     }
+
+    // calculate position after tooltip rendering (do update as synchronous operation)
+    if (e.type === 'mouseenter') {
+      flushSync(() => { setHoveredData(d.data) })
+    }
+
+    tooltipRef.current.style.top = `${e.pageY + 15}px`
+    tooltipRef.current.style.left = (window.innerWidth < (tooltipRef.current.scrollWidth + e.pageX + 20))
+      ? `${e.pageX - tooltipRef.current.scrollWidth - 15}px`
+      : `${e.pageX + 15}px`
+    tooltipRef.current.style.visibility = 'visible'
   }
 
   const onMouseLeaveSlice = (e: MouseEvent) => {
@@ -91,6 +108,7 @@ const DonutChart = (props: IProps) => {
 
     if (tooltipRef.current) {
       tooltipRef.current.style.visibility = 'hidden'
+      setHoveredData(null)
     }
   }
 
@@ -148,11 +166,26 @@ const DonutChart = (props: IProps) => {
       .on('mouseenter mousemove', onMouseEnterSlice)
       .on('mouseleave', onMouseLeaveSlice)
       .append('tspan')
-      .text((d) => (isShowLabel(d) ? `: ${renderLabel ? renderLabel(d.value) : truncateNumberToRange(d.value)}` : ''))
+      .text((d) => {
+        if (!isShowLabel(d)) {
+          return ''
+        }
+
+        if (renderLabel) {
+          return renderLabel(d.data)
+        }
+
+        const separator = ': '
+        if (labelAs === 'percentage') {
+          return `${separator}${getPercentage(d.value, sum)}%`
+        }
+
+        return `${separator}${truncateNumberToRange(d.value)}`
+      })
       .attr('class', cx(styles.chartLabelValue, classNames?.arcLabelValue))
   }, [data])
 
-  if (!data.length || sumBy(data, 'value') === 0) {
+  if (!data.length || sum === 0) {
     return null
   }
 
@@ -163,7 +196,9 @@ const DonutChart = (props: IProps) => {
         className={cx(styles.tooltip, classNames?.tooltip)}
         data-testid="chart-value-tooltip"
         ref={tooltipRef}
-      />
+      >
+        {(renderTooltip && hoveredData) ? renderTooltip(hoveredData) : (hoveredData?.value || '')}
+      </div>
       {title && (
         <div className={styles.innerTextContainer}>
           {title}

redisinsight/ui/src/components/charts/donut-chart/DonutChart.tsx

@@ -11,12 +11,12 @@
 
 .tooltip {
   position: fixed;
-  background: var(--separatorColor);
+  background: var(--euiTooltipBackgroundColor);
   color: var(--htmlColor);
   padding: 10px;
   visibility: hidden;
   border-radius: 4px;
-  z-index: 5;
+  z-index: 100;
 }
 
 .chartLabel {

redisinsight/ui/src/components/charts/donut-chart/styles.module.scss

@@ -167,7 +167,7 @@
     display: block;
     margin-right: 30px;
     margin-bottom: 12px;
-    font: normal normal 500 18px/24px Graphik;
+    font: normal normal 500 18px/24px Graphik, sans-serif;
   }
 
   .notificationDate {

redisinsight/ui/src/components/navigation-menu/components/notifications-center/styles.module.scss

@@ -81,7 +81,7 @@ const QueryCard = (props: Props) => {
   const [viewTypeSelected, setViewTypeSelected] = useState<WBQueryType>(queryType)
   const [summaryText, setSummaryText] = useState<string>('')
   const [selectedViewValue, setSelectedViewValue] = useState<string>(
-    getDefaultPlugin(visualizations, command) || queryType
+    getDefaultPlugin(visualizations, command || '') || queryType
   )
 
   const dispatch = useDispatch()

redisinsight/ui/src/components/query-card/QueryCard.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
+import { EMPTY_COMMAND } from 'uiSrc/constants'
 import { render } from 'uiSrc/utils/test-utils'
 import QueryCardTooltip, { Props } from './QueryCardTooltip'
 
@@ -9,4 +10,12 @@ describe('QueryCardTooltip', () => {
   it('should render', () => {
     expect(render(<QueryCardTooltip {...instance(mockedProps)} />)).toBeTruthy()
   })
+
+  it(`should show ${EMPTY_COMMAND} if command=null and summary=`, () => {
+    const { queryByTestId } = render(
+      <QueryCardTooltip {...instance(mockedProps)} query={null} summary={null} />
+    )
+
+    expect(queryByTestId('query-card-tooltip-anchor')).toHaveTextContent(EMPTY_COMMAND)
+  })
 })

redisinsight/ui/src/components/query-card/QueryCardTooltip/QueryCardTooltip.spec.tsx

@@ -3,12 +3,13 @@ import { EuiToolTip } from '@elastic/eui'
 import { take } from 'lodash'
 import cx from 'classnames'
 
-import { truncateText } from 'uiSrc/utils'
+import { Nullable, truncateText } from 'uiSrc/utils'
+import { EMPTY_COMMAND } from 'uiSrc/constants'
 import styles from './styles.module.scss'
 
 export interface Props {
-  query: string
-  summary?: string
+  query: Nullable<string>
+  summary?: Nullable<string>
   maxLinesNumber?: number
 }
 
@@ -19,10 +20,9 @@ interface IQueryLine {
 }
 
 const QueryCardTooltip = (props: Props) => {
-  const { query = '', maxLinesNumber = 20, summary } = props
+  const { query = '', maxLinesNumber = 20, summary = '' } = props
 
-  let queryLines: IQueryLine[] = query
-    .split('\n')
+  let queryLines: IQueryLine[] = (query || EMPTY_COMMAND).split('\n')
     .map((query: string, i) => ({
       value: truncateText(query, 497, '...'),
       index: i
@@ -56,7 +56,7 @@ const QueryCardTooltip = (props: Props) => {
       content={<>{contentItems}</>}
       position="bottom"
     >
-      <span>{summary || query}</span>
+      <span data-testid="query-card-tooltip-anchor">{summary || query || EMPTY_COMMAND}</span>
     </EuiToolTip>
   )
 }

redisinsight/ui/src/components/query-card/QueryCardTooltip/QueryCardTooltip.tsx

@@ -66,7 +66,6 @@ const aroundQuotesRegExp = /(^["']|["']$)/g
 let decorations: string[] = []
 let execHistoryPos: number = 0
 let execHistory: CommandExecutionUI[] = []
-let toggleGroupMode: () => void = () => {}
 
 const Query = (props: Props) => {
   const {
@@ -118,11 +117,6 @@ const Query = (props: Props) => {
     execHistoryPos = 0
   }, [execHistoryItems])
 
-  useEffect(() => {
-    // HACK: The Monaco editor memoize the state and ignores updates to it
-    toggleGroupMode = onChangeGroupMode
-  }, [resultsMode])
-
   useEffect(() => {
     if (!monacoObjects.current) return
     const commands = query.split('\n')
@@ -406,10 +400,6 @@ const Query = (props: Props) => {
       getMonacoAction(MonacoAction.Submit, (editor) => handleSubmit(editor.getValue()), monaco)
     )
 
-    editor.addAction(
-      getMonacoAction(MonacoAction.ChangeGroupMode, () => toggleGroupMode(), monaco)
-    )
-
     editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Space, () => {
       onPressWidget()
     }, SYNTAX_CONTEXT_ID)
@@ -543,18 +533,7 @@ const Query = (props: Props) => {
           </EuiToolTip>
           <EuiToolTip
             position="left"
-            content={
-              KEYBOARD_SHORTCUTS?.workbench?.changeGroupMode && (
-                <div style={{ display: 'flex', alignItems: 'baseline' }}>
-                  <EuiText className={styles.tooltipText} size="s">{`${KEYBOARD_SHORTCUTS.workbench.changeGroupMode?.label}:\u00A0\u00A0`}</EuiText>
-                  <KeyboardShortcut
-                    badgeTextClassName={styles.tooltipText}
-                    separator={KEYBOARD_SHORTCUTS?._separator}
-                    items={KEYBOARD_SHORTCUTS.workbench.changeGroupMode.keys}
-                  />
-                </div>
-              )
-            }
+            content="Group Results"
             data-testid="run-query-tooltip"
           >
             <>