Fe/feature/RI-7284 RI-7285 RI-7286 (#4815)

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

* RI-7285 - pub/sub screen subscribe input/row has misalignments

* RI-7284 - Warning icon on the pub/sub screen is not aligned

Author: Kristiyan Ivanov

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/components/messages-list/EmptyMessagesList/EmptyMessagesList.tsx

@@ -6,6 +6,7 @@ import { Text } from 'uiSrc/components/base/text'
 
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import styles from './styles.module.scss'
+import { Row } from 'uiSrc/components/base/layout/flex'
 
 export interface Props {
   connectionType?: ConnectionType
@@ -27,10 +28,12 @@ const EmptyMessagesList = ({
         Subscribe to the Channel to see all the messages published to your
         database
       </Text>
-      <Text className={styles.alert}>
+      <Row>
         <RiIcon type="ToastDangerIcon" className={styles.alertIcon} />
-        Running in production may decrease performance and memory available
-      </Text>
+        <Text className={styles.alert}>
+          Running in production may decrease performance and memory available
+        </Text>
+      </Row>
       {connectionType === ConnectionType.Cluster && isSpublishNotSupported && (
         <>
           <div className={styles.separator} />

redisinsight/ui/src/pages/pub-sub/components/subscription-panel/SubscriptionPanel.tsx

@@ -102,8 +102,11 @@ const SubscriptionPanel = () => {
       </FlexItem>
       <FlexItem>
         <Row align="center">
+          <FlexItem>
+            <ClickableAppendInfo />
+          </FlexItem>
           <FlexItem className={styles.channels}>
-            <FormField additionalText={<ClickableAppendInfo />}>
+            <FormField>
               <TextInput
                 value={channels}
                 disabled={isSubscribed}

redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.tsx

@@ -45,6 +45,7 @@ const ClickableAppendInfo = () => {
         <br />
         Supported glob-style patterns are described&nbsp;
         <Link
+          variant="small-inline"
           target="_blank"
           href={getUtmExternalLink(EXTERNAL_LINKS.pubSub, {
             medium: UTM_MEDIUMS.Main,

redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/styles.module.scss

@@ -1,15 +1,8 @@
 .infoIcon {
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
   width: 34px;
-  color: var(--iconsDefaultColor) !important;
-  background-color: var(--browserTableRowEven) !important;
 }
 
 .popover {
   max-width: 250px !important;
-  background-color: var(--euiTooltipBackgroundColor) !important;
-  color: var(--euiTooltipTitleTextColor) !important;
   border-radius: 4px;
 }

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);