RI-7785 Fix Analysis tabs padding consistency

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 */
+`

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

@@ -0,0 +1,26 @@
+import React from 'react'
+import { FlexItem } from 'uiSrc/components/base/layout/flex'
+import AnalyticsTabs from 'uiSrc/components/analytics-tabs'
+import { AnalyticsPageHeaderProps } from './AnalyticsPageHeader.types'
+import {
+  HeaderContainer,
+  HeaderContent,
+  TabsWrapper,
+} from './AnalyticsPageHeader.styles'
+
+export const AnalyticsPageHeader = ({
+  actions,
+  children,
+}: AnalyticsPageHeaderProps) => (
+  <HeaderContainer>
+    <HeaderContent>
+      <FlexItem>
+        <TabsWrapper>
+          <AnalyticsTabs />
+        </TabsWrapper>
+      </FlexItem>
+      {actions && <FlexItem>{actions}</FlexItem>}
+    </HeaderContent>
+    {children}
+  </HeaderContainer>
+)

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react'
+
+export interface AnalyticsPageHeaderProps {
+  actions?: ReactNode
+  children?: ReactNode
+}

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

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

redisinsight/ui/src/pages/database-analysis/components/data-nav-tabs/DatabaseAnalysisTabs.styles.ts

@@ -1,5 +1,13 @@
 import styled from 'styled-components'
+import { Theme } from 'uiSrc/components/base/theme/types'
+import Tabs from 'uiSrc/components/base/layout/tabs'
 
-export const EmptyMessageContainer = styled.div<React.HTMLAttributes<HTMLDivElement>>`
+export const EmptyMessageContainer = styled.div<
+  React.HTMLAttributes<HTMLDivElement>
+>`
   height: calc(100% - 96px);
 `
+
+export const StyledTabs = styled(Tabs)`
+  padding-top: ${({ theme }: { theme: Theme }) => theme.core.space.space200};
+`

redisinsight/ui/src/pages/database-analysis/components/data-nav-tabs/DatabaseAnalysisTabs.tsx

@@ -13,7 +13,7 @@ import { Nullable } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { renderOnboardingTourWithChild } from 'uiSrc/utils/onboarding'
 import { recommendationsSelector } from 'uiSrc/slices/recommendations/recommendations'
-import Tabs, { TabInfo } from 'uiSrc/components/base/layout/tabs'
+import { TabInfo } from 'uiSrc/components/base/layout/tabs'
 import { Text } from 'uiSrc/components/base/text'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 import {
@@ -23,7 +23,10 @@ import {
 import Recommendations from '../recommendations-view'
 import AnalysisDataView from '../analysis-data-view'
 
-import { EmptyMessageContainer } from './DatabaseAnalysisTabs.styles'
+import {
+  EmptyMessageContainer,
+  StyledTabs,
+} from './DatabaseAnalysisTabs.styles'
 
 export interface Props {
   loading: boolean
@@ -117,7 +120,7 @@ const DatabaseAnalysisTabs = (props: Props) => {
   }
 
   return (
-    <Tabs
+    <StyledTabs
       tabs={tabs}
       value={viewTab}
       onChange={handleTabChange}

redisinsight/ui/src/pages/database-analysis/components/header/Header.styles.ts

@@ -5,9 +5,7 @@ import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
 
 export const Container = styled(Row).attrs({
   align: 'center',
-})`
-  padding: 12px 0;
-`
+})``
 export const InfoIcon = styled(RiIcon).attrs({
   type: 'InfoIcon',
   size: 'l',