Merge branch 'main' into e2e/feature/RI-2904-enablement-area

Author: ALENA NABOKA

jest.config.js

@@ -3,6 +3,7 @@ const { TextDecoder, TextEncoder } = require('util');
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
   testURL: 'http://localhost/',
+  runner: 'groups',
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|ico|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/redisinsight/__mocks__/fileMock.js',
@@ -44,6 +45,12 @@ module.exports = {
     '<rootDir>/redisinsight/ui/src/packages',
     '<rootDir>/redisinsight/ui/src/mocks',
   ],
+  coverageDirectory: './coverage',
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    '<rootDir>/redisinsight/api',
+    '<rootDir>/redisinsight/ui/src/packages',
+  ],
   coverageThreshold: {
     global: {
       statements: 70,

package.json

@@ -39,6 +39,8 @@
     "test": "jest ./redisinsight/ui -w 1",
     "test:watch": "jest ./redisinsight/ui --watch -w 1",
     "test:cov": "jest ./redisinsight/ui --coverage -w 1",
+    "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"
   },
   "lint-staged": {
@@ -173,6 +175,7 @@
     "ioredis-mock": "^5.5.4",
     "ip": "^1.1.8",
     "jest": "^27.5.1",
+    "jest-runner-groups": "^2.2.0",
     "jest-when": "^3.2.1",
     "lint-staged": "^10.2.11",
     "mini-css-extract-plugin": "^1.3.1",

redisinsight/ui/.eslintrc.js

@@ -79,14 +79,20 @@ module.exports = {
           'index',
         ],
         pathGroups: [
+          {
+            pattern: 'apiSrc/**',
+            group: 'internal',
+            position: 'after'
+          },
           {
             pattern: '{.,..}/*.scss', // same directory only
             // pattern: '{.,..}/**/*\.scss' // same & outside directories (e.g. import '../foo/foo.scss')
             group: 'object',
             position: 'after'
           }
         ],
-        warnOnUnassignedImports: true
+        warnOnUnassignedImports: true,
+        pathGroupsExcludedImportTypes: ['builtin']
       },
     ],
   },

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import cx from 'classnames'
-import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui'
+import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiHideFor, EuiShowFor } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
@@ -135,7 +135,12 @@ const BottomGroupMinimized = () => {
       >
         <>
           <EuiIcon type={SurveyIcon} className={styles.surveyIcon} />
-          <span>We need your opinion. Please take our survey.</span>
+          <EuiHideFor sizes={['xs', 's']}>
+            <span>We need your opinion. Please take our survey.</span>
+          </EuiHideFor>
+          <EuiShowFor sizes={['xs', 's']}>
+            <span>Survey</span>
+          </EuiShowFor>
         </>
       </a>
     </div>

redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.spec.tsx

@@ -5,7 +5,7 @@ import { validateScoreNumber } from 'uiSrc/utils'
 import InlineItemEditor, { Props } from './InlineItemEditor'
 
 const mockedProps = mock<Props>()
-const INLINE_ITEM_EDITOR = 'inline-item-editor'
+export const INLINE_ITEM_EDITOR = 'inline-item-editor'
 
 describe('InlineItemEditor', () => {
   it('should render', () => {

redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx

@@ -164,6 +164,7 @@ const InlineItemEditor = (props: Props) => {
       display="inlineBlock"
       title={isDisabled && disabledTooltipText?.title}
       content={isDisabled && disabledTooltipText?.text}
+      data-testid="apply-tooltip"
     >
       <EuiButtonIcon
         iconSize={iconSize ?? 'l'}

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

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
+import { v4 as uuidv4 } from 'uuid'
 import { EuiFlexItem, EuiIcon, EuiLoadingContent, EuiTextColor } from '@elastic/eui'
 import { pluginApi } from 'uiSrc/services/PluginAPI'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
@@ -210,7 +211,7 @@ const QueryCardCliPlugin = (props: Props) => {
   useEffect(() => {
     const view = visualizations.find((visualization: IPluginVisualization) => visualization.uniqId === id)
     if (view) {
-      generatedIframeNameRef.current = `${view.plugin.name}-${Date.now()}`
+      generatedIframeNameRef.current = `${view.plugin.name}-${uuidv4()}`
       setCurrentView(view)
 
       const { plugin } = view

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

@@ -245,8 +245,9 @@ const QueryCardHeader = (props: Props) => {
                   className={styles.tooltip}
                   content="Raw Mode"
                   position="bottom"
+                  data-testid="raw-mode-tooltip"
                 >
-                  <EuiTextColor className={cx(styles.timeText, styles.mode)}>
+                  <EuiTextColor className={cx(styles.timeText, styles.mode)} data-testid="raw-mode-anchor">
                     -r
                   </EuiTextColor>
                 </EuiToolTip>

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

@@ -3,6 +3,7 @@
 @import '@elastic/eui/src/global_styling/index';
 
 .containerWrapper {
+  min-width: 420px;
   &:nth-of-type(even) {
     background-color: var(--euiColorEmptyShade) !important;
   }

redisinsight/ui/src/pages/analytics/AnalyticsPage.spec.tsx

@@ -15,6 +15,11 @@ beforeEach(() => {
   store.clearActions()
 })
 
+/**
+ * AnalyticsPage tests
+ *
+ * @group component
+ */
 describe('AnalyticsPage', () => {
   it('should render', () => {
     expect(