RI-7063: replace EuiPanel with Card (#4655)

* RI-7063: replace EuiPanel with Card

* revert test ids

Author: KrumTy

redisinsight/ui/src/components/base/layout/card/index.tsx

@@ -0,0 +1 @@
+export { Card } from '@redis-ui/components'

redisinsight/ui/src/components/base/layout/index.ts

@@ -2,3 +2,4 @@ import HorizontalRule from './horizontal-rule/HorizontalRule'
 import LoadingContent from './loading-content/LoadingContent'
 
 export { HorizontalRule, LoadingContent }
+export * from './card'

redisinsight/ui/src/components/connectivity-error/ConnectivityError.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import { EuiPanel } from '@elastic/eui'
 import SuspenseLoader from 'uiSrc/components/main-router/components/SuspenseLoader'
 
 import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
-import styles from './styles.module.scss'
+import { Card } from 'uiSrc/components/base/layout'
 
 export type ConnectivityErrorProps = {
   onRetry?: () => void
@@ -17,8 +16,8 @@ const ConnectivityError = ({
   error,
   onRetry,
 }: ConnectivityErrorProps) => (
-  <Col className={styles.connectivityError}>
-    <EuiPanel>
+  <Col>
+    <Card>
       <Col style={{ minHeight: '100vh' }} centered>
         {isLoading && <SuspenseLoader />}
         <Col centered gap="xl">
@@ -30,7 +29,7 @@ const ConnectivityError = ({
           )}
         </Col>
       </Col>
-    </EuiPanel>
+    </Card>
   </Col>
 )
 

redisinsight/ui/src/components/connectivity-error/styles.module.scss

@@ -1,7 +1,7 @@
 import React from 'react'
-import { EuiPanel } from '@elastic/eui'
 
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
+import { Card } from 'uiSrc/components/base/layout'
 import CreateTutorialLink from '../CreateTutorialLink'
 
 import styles from './styles.module.scss'
@@ -12,12 +12,7 @@ export interface Props {
 
 const WelcomeMyTutorials = ({ handleOpenUpload }: Props) => (
   <div className={styles.wrapper} data-testid="welcome-my-tutorials">
-    <EuiPanel
-      hasBorder={false}
-      hasShadow={false}
-      className={styles.panel}
-      paddingSize="s"
-    >
+    <Card className={styles.panel}>
       <div className={styles.link}>
         <CreateTutorialLink />
       </div>
@@ -29,7 +24,7 @@ const WelcomeMyTutorials = ({ handleOpenUpload }: Props) => (
       >
         + Upload <span className={styles.hideText}>tutorial</span>
       </PrimaryButton>
-    </EuiPanel>
+    </Card>
   </div>
 )
 

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.tsx

@@ -2,13 +2,11 @@
   padding: 16px 12px 0;
 
   .panel {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    flex-direction: row !important;
 
     background-color: var(--euiColorLightestShade) !important;
 
-    padding: 8px 18px !important;
+    padding: 8px 18px;
   }
 
   .link {

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/styles.module.scss

@@ -1,12 +1,7 @@
 import React, { useContext } from 'react'
 import { useDispatch } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
-import {
-  EuiPanel,
-  EuiAccordion,
-  EuiToolTip,
-  EuiIcon,
-} from '@elastic/eui'
+import { EuiAccordion, EuiToolTip, EuiIcon } from '@elastic/eui'
 import { isUndefined } from 'lodash'
 import cx from 'classnames'
 
@@ -42,6 +37,7 @@ import {
 
 import { openTutorialByPath } from 'uiSrc/slices/panels/sidePanels'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Card } from 'uiSrc/components/base/layout'
 import {
   IconButton,
   SecondaryButton,
@@ -251,10 +247,11 @@ const Recommendation = ({
         <FlexItem>
           <EuiToolTip
             title={`${hide ? 'Show' : 'Hide'} tip`}
-            content={`${hide
-              ? 'This tip will be shown in the list.'
-              : 'This tip will be removed from the list and not displayed again.'
-              }`}
+            content={`${
+              hide
+                ? 'This tip will be shown in the list.'
+                : 'This tip will be removed from the list and not displayed again.'
+            }`}
             position="top"
             display="inlineBlock"
             anchorClassName="flex-row"
@@ -296,9 +293,9 @@ const Recommendation = ({
         data-testid={`${name}-accordion`}
         aria-label={`${name}-accordion`}
       >
-        <EuiPanel className={styles.accordionContent} color="subdued">
+        <Card className={styles.accordionContent} color="subdued">
           {recommendationContent()}
-        </EuiPanel>
+        </Card>
       </EuiAccordion>
     </div>
   )

redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/Recommendation.tsx

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { EuiFieldText, EuiForm, EuiPanel } from '@elastic/eui'
+import { EuiFieldText, EuiForm } from '@elastic/eui'
 import { toNumber } from 'lodash'
 import {
   isVersionHigherOrEquals,
@@ -237,14 +237,8 @@ const AddKeyHash = (props: Props) => {
         Submit
       </PrimaryButton>
       <AddKeyFooter>
-        <EuiPanel
-          color="transparent"
-          className="flexItemNoFullWidth"
-          hasShadow={false}
-          borderRadius="none"
-          style={{ border: 'none' }}
-        >
-          <Row justify="end">
+        <>
+          <Row justify="end" style={{ padding: 18 }}>
             <FlexItem>
               <SecondaryButton
                 onClick={() => onCancel(true)}
@@ -265,7 +259,7 @@ const AddKeyHash = (props: Props) => {
               </PrimaryButton>
             </FlexItem>
           </Row>
-        </EuiPanel>
+        </>
       </AddKeyFooter>
     </EuiForm>
   )

redisinsight/ui/src/pages/browser/components/add-key/AddKeyHash/AddKeyHash.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { EuiForm, EuiPanel, EuiSuperSelect, EuiFieldText } from '@elastic/eui'
+import { EuiForm, EuiSuperSelect, EuiFieldText } from '@elastic/eui'
 
 import { Maybe, stringToBuffer } from 'uiSrc/utils'
 import { addKeyStateSelector, addListKey } from 'uiSrc/slices/browser/keys'
@@ -117,13 +117,8 @@ const AddKeyList = (props: Props) => {
         Submit
       </PrimaryButton>
       <AddKeyFooter>
-        <EuiPanel
-          style={{ border: 'none' }}
-          color="transparent"
-          hasShadow={false}
-          borderRadius="none"
-        >
-          <Row justify="end">
+        <>
+          <Row justify="end" style={{ padding: 18 }}>
             <FlexItem>
               <SecondaryButton
                 onClick={() => onCancel(true)}
@@ -144,7 +139,7 @@ const AddKeyList = (props: Props) => {
               </PrimaryButton>
             </FlexItem>
           </Row>
-        </EuiPanel>
+        </>
       </AddKeyFooter>
     </EuiForm>
   )

redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx

@@ -1,7 +1,7 @@
 import React, { FormEvent, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
-import { EuiForm, EuiPanel } from '@elastic/eui'
+import { EuiForm } from '@elastic/eui'
 
 import { Maybe, stringToBuffer } from 'uiSrc/utils'
 import { addKeyStateSelector, addReJSONKey } from 'uiSrc/slices/browser/keys'
@@ -104,14 +104,8 @@ const AddKeyReJSON = (props: Props) => {
         Submit
       </PrimaryButton>
       <AddKeyFooter>
-        <EuiPanel
-          color="transparent"
-          className="flexItemNoFullWidth"
-          hasShadow={false}
-          borderRadius="none"
-          style={{ border: 'none' }}
-        >
-          <Row justify="end">
+        <>
+          <Row justify="end" style={{ padding: 18 }}>
             <FlexItem>
               <div>
                 <SecondaryButton
@@ -136,7 +130,7 @@ const AddKeyReJSON = (props: Props) => {
               </div>
             </FlexItem>
           </Row>
-        </EuiPanel>
+        </>
       </AddKeyFooter>
     </EuiForm>
   )