Merge pull request #3552 from RedisInsight/fe/bugfix/RI-5829_fix_styles

vlad-dargel · web-flow · commit e2eb2b0d9134 · 2024-06-26T11:07:18.000+02:00
#RI-5829 - fix table style
diff --git a/redisinsight/ui/src/components/item-list/ItemList.tsx b/redisinsight/ui/src/components/item-list/ItemList.tsx
@@ -12,7 +12,6 @@ import { findColumn, getColumnWidth, hideColumn } from './utils'
 
 import { ActionBar, DeleteAction, ExportAction } from './components'
 
-import './styles.scss'
 import styles from './styles.module.scss'
 
 export interface Props<T> {
diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx
@@ -119,7 +119,7 @@ const RedisCloudDatabaseListResult = ({ columns, onBack, onView }: Props) => {
         </EuiFormRow>
         <br />
 
-        <div className="databaseList cloudDatabaseListResult">
+        <div className="itemList databaseList cloudDatabaseListResult">
           <EuiInMemoryTable
             items={items}
             itemId="uid"
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
@@ -207,7 +207,7 @@ const RedisCloudDatabasesPage = ({
         </EuiFormRow>
         <br />
 
-        <div className="databaseList cloudDatabaseList">
+        <div className="itemList databaseList cloudDatabaseList">
           <EuiInMemoryTable
             items={items}
             itemId="databaseId"
diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx
@@ -255,7 +255,7 @@ const RedisCloudSubscriptions = ({
         </EuiFormRow>
         <br />
 
-        <div className={cx('databaseList', styles.cloudSubscriptions)}>
+        <div className={cx('databaseList', 'itemList', styles.cloudSubscriptions)}>
           <div className={styles.account}>
             <Account />
           </div>
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx
@@ -125,7 +125,7 @@ const SentinelDatabasesResult = ({
         </EuiFormRow>
         <br />
 
-        <div className="databaseList sentinelDatabaseListResult">
+        <div className="itemList databaseList sentinelDatabaseListResult">
           <EuiInMemoryTable
             items={items}
             itemId="id"
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/SentinelDatabasesPage.spec.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/SentinelDatabasesPage.spec.tsx
@@ -34,7 +34,7 @@ const mockSentinelDatabases = (props: SentinelDatabasesProps) => (
     <button type="button" onClick={() => props.onClose()} data-testid="close-btn">onClose</button>
     <button type="button" onClick={() => props.onBack()} data-testid="back-btn">onBack</button>
     <button type="button" onClick={() => props.onSubmit([])} data-testid="submit-btn">onSubmit</button>
-    <div className="databaseList sentinelDatabaseList">
+    <div className="itemList databaseList sentinelDatabaseList">
       <EuiInMemoryTable
         isSelectable
         items={props.masters}
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
@@ -216,7 +216,7 @@ const SentinelDatabases = ({
         </EuiFormRow>
         <br />
 
-        <div className="databaseList sentinelDatabaseList">
+        <div className="itemList databaseList sentinelDatabaseList">
           <EuiInMemoryTable
             isSelectable
             items={items}
diff --git a/redisinsight/ui/src/pages/rdi/constants/errors.tsx b/redisinsight/ui/src/pages/rdi/constants/errors.tsx
@@ -0,0 +1,12 @@
+import { upperFirst } from 'lodash'
+import React from 'react'
+
+export const rdiErrorMessages = {
+  invalidStructure: (name = 'Value', msg = 'Failed to convert YAML to JSON structure') => (
+    <>
+      {`${upperFirst(name)} has an invalid structure.`}
+      <br />
+      {msg}
+    </>
+  ),
+}
diff --git a/redisinsight/ui/src/pages/rdi/constants/index.ts b/redisinsight/ui/src/pages/rdi/constants/index.ts
@@ -0,0 +1 @@
+export * from './errors'
diff --git a/redisinsight/ui/src/pages/rdi/instance/InstancePage.tsx b/redisinsight/ui/src/pages/rdi/instance/InstancePage.tsx
@@ -2,8 +2,6 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useLocation, useParams } from 'react-router-dom'
 import { Formik, FormikProps } from 'formik'
-import { EuiText } from '@elastic/eui'
-import { upperFirst } from 'lodash'
 
 import {
   appContextSelector,
@@ -25,6 +23,7 @@ import {
 } from 'uiSrc/slices/rdi/pipeline'
 import { IPipeline } from 'uiSrc/slices/interfaces'
 import { createAxiosError, Nullable, pipelineToJson } from 'uiSrc/utils'
+import { rdiErrorMessages } from 'uiSrc/pages/rdi/constants'
 import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 
 import InstancePageRouter from './InstancePageRouter'
@@ -92,12 +91,7 @@ const RdiInstancePage = ({ routes = [] }: Props) => {
   const onSubmit = (values: IPipeline) => {
     const JSONValues = pipelineToJson(values, (errors) => {
       dispatch(addErrorNotification(createAxiosError({
-        message: (
-          <>
-            <EuiText>{`${upperFirst(errors[0].filename)} has an invalid structure.`}</EuiText>
-            <EuiText>{errors[0].msg}</EuiText>
-          </>
-        )
+        message: rdiErrorMessages.invalidStructure(errors[0].filename, errors[0].msg)
       })))
     })
     if (!JSONValues) {
diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.spec.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.spec.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { useFormikContext } from 'formik'
 import { cloneDeep } from 'lodash'
-import { EuiText } from '@elastic/eui'
 import { AxiosError } from 'axios'
 import { rdiPipelineSelector, setChangedFile, deleteChangedFile } from 'uiSrc/slices/rdi/pipeline'
 import { rdiTestConnectionsSelector } from 'uiSrc/slices/rdi/testConnections'
@@ -191,8 +190,9 @@ describe('Config', () => {
           data: {
             message: (
               <>
-                <EuiText>Config has an invalid structure.</EuiText>
-                <EuiText>end of the stream or a document separator is expected</EuiText>
+                Config has an invalid structure.
+                <br />
+                end of the stream or a document separator is expected
               </>
             )
           }
diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.tsx
@@ -14,6 +14,7 @@ import { FileChangeType, IPipeline, RdiPipelineTabs } from 'uiSrc/slices/interfa
 import MonacoYaml from 'uiSrc/components/monaco-editor/components/monaco-yaml'
 import TestConnectionsPanel from 'uiSrc/pages/rdi/pipeline-management/components/test-connections-panel'
 import TemplatePopover from 'uiSrc/pages/rdi/pipeline-management/components/template-popover'
+import { rdiErrorMessages } from 'uiSrc/pages/rdi/constants'
 import { testConnectionsAction, rdiTestConnectionsSelector, testConnectionsController } from 'uiSrc/slices/rdi/testConnections'
 import { appContextPipelineManagement } from 'uiSrc/slices/app/context'
 import { createAxiosError, isEqualPipelineFile, yamlToJson } from 'uiSrc/utils'
@@ -59,12 +60,7 @@ const Config = () => {
   const testConnections = () => {
     const JSONValue = yamlToJson(config, (msg) => {
       dispatch(addErrorNotification(createAxiosError({
-        message: (
-          <>
-            <EuiText>Config has an invalid structure.</EuiText>
-            <EuiText>{msg}</EuiText>
-          </>
-        )
+        message: rdiErrorMessages.invalidStructure('config', msg)
       })))
     })
     if (!JSONValue) {
diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { EuiText, EuiLink, EuiButton, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui'
 import { useFormikContext } from 'formik'
-import { upperFirst, get, throttle } from 'lodash'
+import { get, throttle } from 'lodash'
 import cx from 'classnames'
 import { monaco as monacoEditor } from 'react-monaco-editor'
 
@@ -12,6 +12,7 @@ import { deleteChangedFile, rdiPipelineSelector, setChangedFile } from 'uiSrc/sl
 import { FileChangeType, IPipeline, RdiPipelineTabs } from 'uiSrc/slices/interfaces'
 import MonacoYaml from 'uiSrc/components/monaco-editor/components/monaco-yaml'
 import DryRunJobPanel from 'uiSrc/pages/rdi/pipeline-management/components/jobs-panel'
+import { rdiErrorMessages } from 'uiSrc/pages/rdi/constants'
 import { DSL, KEYBOARD_SHORTCUTS } from 'uiSrc/constants'
 import TemplatePopover from 'uiSrc/pages/rdi/pipeline-management/components/template-popover'
 import { createAxiosError, isEqualPipelineFile, Maybe, yamlToJson } from 'uiSrc/utils'
@@ -69,12 +70,7 @@ const Job = (props: Props) => {
   const handleDryRunJob = () => {
     const JSONValue = yamlToJson(value, (msg) => {
       dispatch(addErrorNotification(createAxiosError({
-        message: (
-          <>
-            <EuiText>{`${upperFirst(name)} has an invalid structure.`}</EuiText>
-            <EuiText>{msg}</EuiText>
-          </>
-        )
+        message: rdiErrorMessages.invalidStructure(name, msg)
       })))
     })
     if (!JSONValue) {
diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/JobsWrapper.spec.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/JobsWrapper.spec.tsx
@@ -2,16 +2,15 @@ import React from 'react'
 import reactRouterDom from 'react-router-dom'
 import { useFormikContext } from 'formik'
 import { cloneDeep } from 'lodash'
+import { AxiosError } from 'axios'
+
 import { deleteChangedFile, getPipelineStrategies, rdiPipelineSelector, setChangedFile } from 'uiSrc/slices/rdi/pipeline'
 import { cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
-
 import { sendPageViewTelemetry, TelemetryPageView, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { MOCK_RDI_PIPELINE_CONFIG, MOCK_RDI_PIPELINE_DATA, MOCK_RDI_PIPELINE_JOB2 } from 'uiSrc/mocks/data/rdi'
 import { FileChangeType } from 'uiSrc/slices/interfaces'
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import JobWrapper from './JobWrapper'
-import {addErrorNotification} from "uiSrc/slices/app/notifications";
-import {EuiText} from "@elastic/eui";
-import {AxiosError} from "axios";
 
 jest.mock('uiSrc/telemetry', () => ({
   ...jest.requireActual('uiSrc/telemetry'),
@@ -207,8 +206,9 @@ describe('JobWrapper', () => {
           data: {
             message: (
               <>
-                <EuiText>JobName has an invalid structure.</EuiText>
-                <EuiText>end of the stream or a document separator is expected</EuiText>
+                JobName has an invalid structure.
+                <br />
+                end of the stream or a document separator is expected
               </>
             )
           }
diff --git a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx
@@ -159,7 +159,7 @@ const RedisClusterDatabases = ({ columns, onClose, onBack, onSubmit }: Props) =>
         </EuiFormRow>
         <br />
 
-        <div className={cx('databaseList clusterDatabaseList', styles.databaseListWrapper)}>
+        <div className={cx('itemList databaseList clusterDatabaseList', styles.databaseListWrapper)}>
           <EuiInMemoryTable
             items={items}
             itemId="uid"
diff --git a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabasesResult.tsx b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabasesResult.tsx
@@ -124,7 +124,7 @@ const RedisClusterDatabasesResult = ({ columns, onBack, onView }: Props) => {
         </EuiFormRow>
         <br />
 
-        <div className="databaseList clusterDatabaseListResult">
+        <div className="itemList databaseList clusterDatabaseListResult">
           <EuiInMemoryTable
             items={items}
             itemId="uid"
diff --git a/redisinsight/ui/src/styles/components/_components.scss b/redisinsight/ui/src/styles/components/_components.scss
@@ -21,3 +21,4 @@
 @import "modal";
 @import "markdown/index";
 @import "homePage";
+@import "itemList";
diff --git a/redisinsight/ui/src/styles/components/_itemList.scss b/redisinsight/ui/src/styles/components/_itemList.scss
@@ -1,3 +1,5 @@
+@use "../mixins/eui";
+
 .itemList {
   @include eui.scrollBar;
 
diff --git a/redisinsight/ui/src/styles/components/_table.scss b/redisinsight/ui/src/styles/components/_table.scss
@@ -52,19 +52,6 @@ body {
       &:hover {
         background-color: var(--tableRowHoverColor);
       }
-
-      .copyHostPortText,
-      .copyUrlText,
-      .copyPublicEndpointText,
-      .column_name,
-      .column_name .euiToolTipAnchor {
-        display: inline-block;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        max-width: 100%;
-        vertical-align: top;
-      }
     }
   }
 
diff --git a/redisinsight/ui/src/utils/errors.tsx b/redisinsight/ui/src/utils/errors.tsx
@@ -14,7 +14,7 @@ export const getRdiValidationMessage = (message: string = '', loc?: Array<string
   }
 
   const [, ...rest] = loc
-  const formattedLoc = rest.reduce<string[]>((acc, curr, idx) => {
+  const formattedLoc = rest.reduce<string[]>((acc, curr) => {
     if (isNumber(curr)) {
       acc[acc.length - 1] += `[${curr}]`
     } else {
