RI-7785 Make Analysis tabs borders and action buttons consitent (#5259)

* fix(ui): integrate AnalyticsPageHeader in ClusterDetails and SlowLog pages

References: #RI-7785

Author: valkirilov

redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/ClusterDetailsHeader.styles.ts

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components'
+import { Row, Col } from 'uiSrc/components/base/layout/flex'
+
+export const Container = styled(Col)`
+  background-color: ${({ theme }) =>
+    theme.semantic.color.background.neutral100};
+`
+
+export const Content = styled(Row)`
+  padding-top: ${({ theme }) => theme.core.space.space150};
+  padding-bottom: ${({ theme }) => theme.core.space.space250};
+`
+
+export const Item = styled(Col)<{ $borderLeft?: boolean }>`
+  padding-right: ${({ theme }) => theme.core.space.space150};
+
+  ${({ $borderLeft, theme }) =>
+    $borderLeft &&
+    css`
+      border-left: 2px solid ${theme.semantic.color.border.neutral500};
+      padding-left: ${theme.core.space.space150};
+    `}
+`
+
+export const Loading = styled.div`
+  width: 422px;
+  padding-top: ${({ theme }) => theme.core.space.space200};
+`

redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/ClusterDetailsHeader.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
-import cx from 'classnames'
-import { capitalize } from 'lodash'
 
 import { LoadingContent } from 'uiSrc/components/base/layout'
 import {
@@ -20,7 +18,12 @@ import { Text } from 'uiSrc/components/base/text'
 import { RiTooltip } from 'uiSrc/components'
 import { AnalyticsPageHeader } from 'uiSrc/pages/database-analysis/components/analytics-page-header'
 
-import styles from './styles.module.scss'
+import {
+  Container,
+  Content,
+  Item,
+  Loading,
+} from './ClusterDetailsHeader.styles'
 
 interface IMetrics {
   label: string
@@ -55,7 +58,6 @@ const ClusterDetailsHeader = () => {
           username || DEFAULT_USERNAME
         ) : (
           <RiTooltip
-            className={styles.tooltip}
             anchorClassName="truncateText"
             position="bottom"
             content={<>{formatLongName(username || DEFAULT_USERNAME)}</>}
@@ -71,7 +73,6 @@ const ClusterDetailsHeader = () => {
       border: 'left',
       value: (
         <RiTooltip
-          className={styles.tooltip}
           position="top"
           content={
             <>
@@ -90,33 +91,28 @@ const ClusterDetailsHeader = () => {
   ]
 
   return (
-    <div className={styles.container} data-testid="cluster-details-header">
+    <Container data-testid="cluster-details-header">
       <AnalyticsPageHeader />
       {loading && !data && (
-        <div className={styles.loading} data-testid="cluster-details-loading">
+        <Loading as="div" data-testid="cluster-details-loading">
           <LoadingContent lines={2} />
-        </div>
+        </Loading>
       )}
       {data && (
-        <div
-          className={cx(styles.content)}
-          data-testid="cluster-details-content"
-        >
+        <Content data-testid="cluster-details-content">
           {metrics.map(({ value, label, border }) => (
-            <div
-              className={cx(styles.item, styles[`border${capitalize(border)}`])}
+            <Item
               key={label}
+              $borderLeft={border === 'left'}
               data-testid={`cluster-details-item-${label}`}
             >
-              <Text color="subdued" className={styles.value}>
-                {value}
-              </Text>
-              <Text className={styles.label}>{label}</Text>
-            </div>
+              <Text color="subdued">{value}</Text>
+              <Text>{label}</Text>
+            </Item>
           ))}
-        </div>
+        </Content>
       )}
-    </div>
+    </Container>
   )
 }
 

redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/styles.module.scss

@@ -1,14 +1,12 @@
 import styled from 'styled-components'
 import { Row } from 'uiSrc/components/base/layout/flex'
-import { Theme } from 'uiSrc/components/base/theme/types'
-
-const getBorderColor = (theme: Theme) =>
-  theme.name === 'dark' ? theme.color.dark600 : theme.color.dusk150
 
 export const HeaderContainer = styled.div`
   width: 100%;
-  border-bottom: 4px solid
-    ${({ theme }: { theme: Theme }) => getBorderColor(theme)}; /* Mimic the tabs border width and color */
+  border-bottom: ${({ theme }) => {
+    const { tabsLine } = theme.components.tabs.variants.default
+    return `${tabsLine.size} solid ${tabsLine.color}`
+  }};
 `
 
 export const HeaderContent = styled(Row).attrs({

redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/AnalyticsPageHeader.styles.ts

@@ -8,10 +8,7 @@ import {
   TabsWrapper,
 } from './AnalyticsPageHeader.styles'
 
-export const AnalyticsPageHeader = ({
-  actions,
-  children,
-}: AnalyticsPageHeaderProps) => (
+export const AnalyticsPageHeader = ({ actions }: AnalyticsPageHeaderProps) => (
   <HeaderContainer>
     <HeaderContent>
       <FlexItem>
@@ -21,6 +18,5 @@ export const AnalyticsPageHeader = ({
       </FlexItem>
       {actions && <FlexItem>{actions}</FlexItem>}
     </HeaderContent>
-    {children}
   </HeaderContainer>
 )

redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/AnalyticsPageHeader.tsx

@@ -2,5 +2,4 @@ import { ReactNode } from 'react'
 
 export interface AnalyticsPageHeaderProps {
   actions?: ReactNode
-  children?: ReactNode
 }