RI-7693: Change visuals of Pub/Sub

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

@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+import { Col } from 'uiSrc/components/base/layout/flex'
+
+export const OnboardingWrapper = styled(Col)`
+  align-items: flex-end;
+  /* Custom margin for onboarding popover */
+  /* TODO: Rework the positioning of the onboarding container in order to remove this */
+  margin-right: 28px;
+`

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

@@ -15,33 +15,15 @@ import { OnboardingTour } from 'uiSrc/components'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 import { incrementOnboardStepAction } from 'uiSrc/slices/app/features'
 import { OnboardingSteps } from 'uiSrc/constants/onboarding'
-import {
-  MessagesListWrapper,
-  PublishMessage,
-  SubscriptionPanel,
-} from './components'
-
-import styles from './styles.module.scss'
+import { MessagesListWrapper, PublishMessage } from './components'
 
-// 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;
-`
+import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
+import { Theme } from 'uiSrc/components/base/theme/types'
+import { OnboardingWrapper } from './PubSubPage.styles'
 
-const HeaderPanel = styled.div`
-  padding: 12px 18px;
-  border-bottom: 1px solid var(--separatorColor);
-  border-color: ${({ theme }) => theme.semantic.color.border.neutral500};
-`
-
-const FooterPanel = styled.div`
-  margin-top: 16px;
-  padding: 10px 18px 28px;
+const FooterPanel = styled(FlexItem)`
+  border-top: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
+  padding: ${({ theme }: { theme: Theme }) => theme.core.space.space300};
 `
 
 const PubSubPage = () => {
@@ -92,28 +74,24 @@ const PubSubPage = () => {
   }
 
   return (
-    <MainContainer className={styles.main} data-testid="pub-sub-page">
-      <ContentPanel>
-        <HeaderPanel>
-          <SubscriptionPanel />
-        </HeaderPanel>
-        <div className={styles.tableWrapper}>
-          <MessagesListWrapper />
-        </div>
-      </ContentPanel>
-      <FooterPanel>
+    <Col data-testid="pub-sub-page" justify="between">
+      <FlexItem grow={true}>
+        <MessagesListWrapper />
+      </FlexItem>
+
+      <FooterPanel grow={false}>
         <PublishMessage />
       </FooterPanel>
-      <div className={styles.onboardAnchor}>
+
+      <OnboardingWrapper grow={false}>
         <OnboardingTour
           options={ONBOARDING_FEATURES.FINISH}
           anchorPosition="downRight"
-          panelClassName={styles.onboardPanel}
         >
           <span />
         </OnboardingTour>
-      </div>
-    </MainContainer>
+      </OnboardingWrapper>
+    </Col>
   )
 }
 

redisinsight/ui/src/pages/pub-sub/components/index.ts

@@ -1,5 +1,4 @@
-import SubscriptionPanel from './subscription-panel'
 import MessagesListWrapper from './messages-list'
 import PublishMessage from './publish-message'
 
-export { SubscriptionPanel, MessagesListWrapper, PublishMessage }
+export { MessagesListWrapper, PublishMessage }

redisinsight/ui/src/pages/pub-sub/components/messages-list/EmptyMessagesList/EmptyMessagesList.spec.tsx

@@ -1,44 +1,71 @@
 import React from 'react'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
-import { render } from 'uiSrc/utils/test-utils'
+import { render, screen } from 'uiSrc/utils/test-utils'
 
 import EmptyMessagesList from './EmptyMessagesList'
 
 describe('EmptyMessagesList', () => {
-  it('should render', () => {
-    expect(render(<EmptyMessagesList isSpublishNotSupported />)).toBeTruthy()
+  it('renders base layout and copy', () => {
+    render(<EmptyMessagesList isSpublishNotSupported />)
+
+    expect(screen.getByTestId('empty-messages-list')).toBeInTheDocument()
+
+    expect(screen.getByText('You are not subscribed')).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        /Subscribe to the Channel to see all the messages published to your database/i,
+      ),
+    ).toBeInTheDocument()
+
+    expect(
+      screen.getByText(
+        /Running in production may decrease performance and memory available\./i,
+      ),
+    ).toBeInTheDocument()
   })
 
-  it('should render cluster info for Cluster connection type', () => {
-    const { queryByTestId } = render(
+  it('shows cluster banner only when Cluster AND isSpublishNotSupported=true', () => {
+    // visible when both conditions true
+    const { rerender } = render(
       <EmptyMessagesList
         connectionType={ConnectionType.Cluster}
         isSpublishNotSupported
       />,
     )
+    const banner = screen.getByTestId('empty-messages-list-cluster')
+    expect(banner).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        /Messages published with SPUBLISH will not appear in this channel/i,
+      ),
+    ).toBeInTheDocument()
 
-    expect(queryByTestId('empty-messages-list-cluster')).toBeInTheDocument()
-  })
-
-  it(' not render cluster info for Cluster connection type', () => {
-    const { queryByTestId } = render(
+    // hide when flag is false
+    rerender(
       <EmptyMessagesList
         connectionType={ConnectionType.Cluster}
         isSpublishNotSupported={false}
       />,
     )
+    expect(
+      screen.queryByTestId('empty-messages-list-cluster'),
+    ).not.toBeInTheDocument()
 
-    expect(queryByTestId('empty-messages-list-cluster')).not.toBeInTheDocument()
-  })
-
-  it('should not render cluster info for Cluster connection type', () => {
-    const { queryByTestId } = render(
+    // hide when connection is not Cluster
+    rerender(
       <EmptyMessagesList
         connectionType={ConnectionType.Standalone}
         isSpublishNotSupported
       />,
     )
+    expect(
+      screen.queryByTestId('empty-messages-list-cluster'),
+    ).not.toBeInTheDocument()
 
-    expect(queryByTestId('empty-messages-list-cluster')).not.toBeInTheDocument()
+    // also hide when connectionType is undefined
+    rerender(<EmptyMessagesList isSpublishNotSupported />)
+    expect(
+      screen.queryByTestId('empty-messages-list-cluster'),
+    ).not.toBeInTheDocument()
   })
 })

redisinsight/ui/src/pages/pub-sub/components/messages-list/EmptyMessagesList/EmptyMessagesList.styles.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+import { RiImage } from 'uiSrc/components/base/display'
+import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
+
+export const HeroImage = styled(RiImage)`
+  user-select: none;
+  pointer-events: none;
+`
+
+export const InnerContainer = styled(Col)`
+  background-color: ${({ theme }) =>
+    theme.semantic.color.background.neutral300};
+  border-radius: ${({ theme }) => theme.core.space.space100};
+  border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
+  padding: ${({ theme }) => theme.core.space.space300};
+  height: 100%;
+`
+
+export const Wrapper = styled(FlexItem)`
+  margin: ${({ theme }) => theme.core.space.space500};
+  height: 100%;
+`

redisinsight/ui/src/pages/pub-sub/components/messages-list/EmptyMessagesList/EmptyMessagesList.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
-import cx from 'classnames'
-
 import { ConnectionType } from 'uiSrc/slices/interfaces'
-import { Text } from 'uiSrc/components/base/text'
+import { Text, Title } from 'uiSrc/components/base/text'
+import { Col } from 'uiSrc/components/base/layout/flex'
+import { Banner } from 'uiSrc/components/base/display'
+import { CallOut } from 'uiSrc/components/base/display/call-out/CallOut'
+import LightBulbImage from 'uiSrc/assets/img/pub-sub/light-bulb.svg'
 
-import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
-import styles from './styles.module.scss'
-import { Row } from 'uiSrc/components/base/layout/flex'
+import SubscribeForm from '../../subscribe-form'
+import { HeroImage, InnerContainer, Wrapper } from './EmptyMessagesList.styles'
 
 export interface Props {
   connectionType?: ConnectionType
@@ -17,38 +18,42 @@ const EmptyMessagesList = ({
   connectionType,
   isSpublishNotSupported,
 }: Props) => (
-  <div className={styles.container} data-testid="empty-messages-list">
-    <div
-      className={cx(styles.content, {
-        [styles.contentCluster]: connectionType === ConnectionType.Cluster,
-      })}
+  <Wrapper>
+    <InnerContainer
+      align="center"
+      justify="center"
+      data-testid="empty-messages-list"
+      gap="xxl"
     >
-      <Text className={styles.title}>No messages to display</Text>
-      <Text className={styles.summary}>
-        Subscribe to the Channel to see all the messages published to your
-        database
-      </Text>
-      <Row>
-        <RiIcon type="ToastDangerIcon" className={styles.alertIcon} />
-        <Text className={styles.alert}>
-          Running in production may decrease performance and memory available
+      <HeroImage src={LightBulbImage} alt="Pub/Sub" />
+
+      <Col align="center" justify="center" grow={false} gap="s">
+        <Title size="XXL">You are not subscribed</Title>
+
+        <Text>
+          Subscribe to the Channel to see all the messages published to your
+          database
         </Text>
-      </Row>
+      </Col>
+
+      <SubscribeForm grow={false} />
+
+      <CallOut variant="attention">
+        Running in production may decrease performance and memory available.
+      </CallOut>
+
       {connectionType === ConnectionType.Cluster && isSpublishNotSupported && (
         <>
-          <div className={styles.separator} />
-          <Text
-            className={styles.cluster}
+          <Banner
             data-testid="empty-messages-list-cluster"
-          >
-            {'Messages published with '}
-            <span className={styles.badge}>SPUBLISH</span>
-            {' will not appear in this channel'}
-          </Text>
+            variant="attention"
+            showIcon={true}
+            message="Messages published with SPUBLISH will not appear in this channel"
+          />
         </>
       )}
-    </div>
-  </div>
+    </InnerContainer>
+  </Wrapper>
 )
 
 export default EmptyMessagesList