RI-7286 - Tips/tutorials/Insights are missing a border on some screens (or the container of the screen is)

Author: KIvanow

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useParams } from 'react-router-dom'
+import styled from 'styled-components'
 
 import {
   dbAnalysisSelector,
@@ -27,6 +28,15 @@ import Header from './components/header'
 import DatabaseAnalysisTabs from './components/data-nav-tabs'
 import styles from './styles.module.scss'
 
+// Styled component for the main container with theme border
+const MainContainer = styled.div<React.HTMLAttributes<HTMLDivElement>>`
+  border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
+  border-radius: ${({ theme }) => theme.components.semanticContainer.sizes.M.borderRadius};
+  padding: ${({ theme }) => theme.components.semanticContainer.sizes.M.padding};
+  height: 100%;
+  overflow: auto;
+`
+
 const DatabaseAnalysisPage = () => {
   const { viewTab } = useSelector(analyticsSettingsSelector)
   const { loading: analysisLoading, data } = useSelector(dbAnalysisSelector)
@@ -91,7 +101,7 @@ const DatabaseAnalysisPage = () => {
   }
 
   return (
-    <div className={styles.main} data-testid="database-analysis-page">
+    <MainContainer className={styles.main} data-testid="database-analysis-page">
       <Header
         items={reports}
         selectedValue={selectedAnalysis}
@@ -104,7 +114,7 @@ const DatabaseAnalysisPage = () => {
         reports={reports}
         data={data}
       />
-    </div>
+    </MainContainer>
   )
 }
 

redisinsight/ui/src/pages/pub-sub/PubSubPage.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
+import styled from 'styled-components'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import {
   sendEventTelemetry,
@@ -23,6 +24,21 @@ import {
 
 import styles from './styles.module.scss'
 
+// Styled components
+const MainContainer = styled.div<React.HTMLAttributes<HTMLDivElement>>`
+  border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
+  border-radius: 8px;
+`
+
+const ContentPanel = styled.div`
+  flex-grow: 1;
+`
+
+const FooterPanel = styled.div`
+  margin-top: 16px;
+  padding: 10px 18px 28px;
+`
+
 const PubSubPage = () => {
   const { name: connectedInstanceName, db } = useSelector(
     connectedInstanceSelector,
@@ -71,8 +87,8 @@ const PubSubPage = () => {
   }
 
   return (
-    <div className={styles.main} data-testid="pub-sub-page">
-      <div className={styles.contentPanel}>
+    <MainContainer className={styles.main} data-testid="pub-sub-page">
+      <ContentPanel>
         <div className={styles.header}>
           <Title size="XXL" className={styles.title}>
             Pub/Sub
@@ -82,10 +98,10 @@ const PubSubPage = () => {
         <div className={styles.tableWrapper}>
           <MessagesListWrapper />
         </div>
-      </div>
-      <div className={styles.footerPanel}>
+      </ContentPanel>
+      <FooterPanel>
         <PublishMessage />
-      </div>
+      </FooterPanel>
       <div className={styles.onboardAnchor}>
         <OnboardingTour
           options={ONBOARDING_FEATURES.FINISH}
@@ -95,7 +111,7 @@ const PubSubPage = () => {
           <span />
         </OnboardingTour>
       </div>
-    </div>
+    </MainContainer>
   )
 }
 

redisinsight/ui/src/pages/pub-sub/styles.module.scss

@@ -4,20 +4,6 @@
   display: flex;
   flex-direction: column;
 
-  .contentPanel,
-  .footerPanel {
-    background-color: var(--euiColorEmptyShade);
-  }
-
-  .contentPanel {
-    flex-grow: 1;
-  }
-
-  .footerPanel {
-    margin-top: 16px;
-    padding: 10px 18px 28px;
-  }
-
   .header {
     padding: 24px 18px 12px;
     border-bottom: 1px solid var(--separatorColor);