RI-7785 Fix Analysis tabs padding consistency (#5255)

* feat(ui): create shared AnalysisPageContainer component
* refactor(ui): use shared AnalysisPageContainer in Database Analysis page
* fix(ui): add consistent padding to Overview page using shared container
* refactor(ui): replace local styles with styled-components in ClusterDetailsPage
* fix(ui): add consistent padding to Slow Log page using shared container
* fix(ui): integrate AnalyticsPageHeader in ClusterDetails and SlowLog pages
* refactor(ui): clean up styles in ClusterDetailsPage

References: #RI-7785

Author: valkirilov

redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.styles.ts

@@ -1,8 +1,9 @@
+import { Theme } from '@redis-ui/styles'
 import styled from 'styled-components'
+import { scrollbarStyles } from 'uiSrc/styles/mixins'
 
-export const ClusterDetailsPageWrapper = styled.div<
-  React.HTMLAttributes<HTMLDivElement>
->`
+export const ClusterDetailsPageWrapper = styled.div`
+  ${scrollbarStyles()};
   height: 100%;
-  padding: 0 1.6rem;
+  padding: 0 ${({ theme }: { theme: Theme }) => theme.core.space.space200};
 `

redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.tsx

@@ -134,7 +134,7 @@ const ClusterDetailsPage = () => {
   }
 
   return (
-    <S.ClusterDetailsPageWrapper data-testid="cluster-details-page">
+    <S.ClusterDetailsPageWrapper as="div" data-testid="cluster-details-page">
       <ClusterDetailsHeader />
       <ClusterDetailsGraphics nodes={nodes} loading={loading} />
       <ClusterNodesTable nodes={nodes} />

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

@@ -15,10 +15,10 @@ import {
   ConnectionType,
   CONNECTION_TYPE_DISPLAY,
 } from 'uiSrc/slices/interfaces'
-import AnalyticsTabs from 'uiSrc/components/analytics-tabs'
 import { clusterDetailsSelector } from 'uiSrc/slices/analytics/clusterDetails'
 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'
 
@@ -91,8 +91,7 @@ const ClusterDetailsHeader = () => {
 
   return (
     <div className={styles.container} data-testid="cluster-details-header">
-      <AnalyticsTabs />
-
+      <AnalyticsPageHeader />
       {loading && !data && (
         <div className={styles.loading} data-testid="cluster-details-loading">
           <LoadingContent lines={2} />

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

@@ -1,6 +1,5 @@
 .container {
   background-color: var(--euiColorEmptyShade);
-  max-width: 960px;
 }
 
 .content {

redisinsight/ui/src/pages/database-analysis/DatabaseAnalysisPageView.tsx

@@ -4,7 +4,7 @@ import {
   type ShortDatabaseAnalysis,
 } from 'apiSrc/modules/database-analysis/models'
 import { Nullable } from 'uiSrc/utils'
-import { MainContainer } from './components/styles'
+import { AnalysisPageContainer } from './components/analysis-page-container'
 import { Header } from './components'
 import DatabaseAnalysisTabs from './components/data-nav-tabs'
 
@@ -23,7 +23,7 @@ export const DatabaseAnalysisPageView = ({
   handleSelectAnalysis,
 }: Props) => {
   return (
-    <MainContainer data-testid="database-analysis-page">
+    <AnalysisPageContainer data-testid="database-analysis-page">
       <Header
         items={reports}
         selectedValue={selectedAnalysis}
@@ -36,6 +36,6 @@ export const DatabaseAnalysisPageView = ({
         reports={reports}
         data={data}
       />
-    </MainContainer>
+    </AnalysisPageContainer>
   )
 }

redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/AnalysisPageContainer.styles.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+import { Col } from 'uiSrc/components/base/layout/flex'
+import { Theme } from 'uiSrc/components/base/theme/types'
+
+export const StyledAnalysisPageContainer = styled(Col)`
+  overflow: auto;
+  padding-inline: ${({ theme }: { theme: Theme }) => theme.core.space.space200};
+`

redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/AnalysisPageContainer.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { StyledAnalysisPageContainer } from './AnalysisPageContainer.styles'
+import { AnalysisPageContainerProps } from './AnalysisPageContainer.types'
+
+export const AnalysisPageContainer = ({
+  children,
+  ...rest
+}: AnalysisPageContainerProps) => (
+  <StyledAnalysisPageContainer {...rest}>
+    {children}
+  </StyledAnalysisPageContainer>
+)

redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/AnalysisPageContainer.types.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef } from 'react'
+import { StyledAnalysisPageContainer } from './AnalysisPageContainer.styles'
+
+export type AnalysisPageContainerProps = ComponentPropsWithoutRef<
+  typeof StyledAnalysisPageContainer
+>

redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/index.ts

@@ -0,0 +1,2 @@
+export { AnalysisPageContainer } from './AnalysisPageContainer'
+export type { AnalysisPageContainerProps } from './AnalysisPageContainer.types'

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

@@ -0,0 +1,23 @@
+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 */
+`
+
+export const HeaderContent = styled(Row).attrs({
+  align: 'center',
+  justify: 'between',
+})`
+  min-height: 36px;
+`
+
+export const TabsWrapper = styled.div`
+  margin-bottom: -14px; /* Move it so it overlaps with the border of the tabs container */
+`