Skip to content

Commit f158004

Browse files
pawelangelowpawelangelow
authored
RI-7693: Change visuals of Pub/Sub (#5164)
* RI-7693: Add patterns counting in Pub/Sub (#5165) * RI-7693: Add subscribe patterns explanation (#5166)
1 parent 509c4ba commit f158004

36 files changed

+987
-694
lines changed

‎redisinsight/ui/src/assets/img/pub-sub/light-bulb.svg‎

Lines changed: 114 additions & 0 deletions
Loading

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import styled from 'styled-components'
2+
import { Col } from 'uiSrc/components/base/layout/flex'
3+
4+
export const OnboardingWrapper = styled(Col)`
5+
align-items: flex-end;
6+
/* Custom margin for onboarding popover */
7+
/* TODO: Rework the positioning of the onboarding container in order to remove this */
8+
margin-right: 28px;
9+
`

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

Lines changed: 17 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -15,33 +15,15 @@ import { OnboardingTour } from 'uiSrc/components'
1515
import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
1616
import { incrementOnboardStepAction } from 'uiSrc/slices/app/features'
1717
import { OnboardingSteps } from 'uiSrc/constants/onboarding'
18-
import {
19-
MessagesListWrapper,
20-
PublishMessage,
21-
SubscriptionPanel,
22-
} from './components'
23-
24-
import styles from './styles.module.scss'
18+
import { MessagesListWrapper, PublishMessage } from './components'
2519

26-
// Styled components
27-
const MainContainer = styled.div<React.HTMLAttributes<HTMLDivElement>>`
28-
border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
29-
border-radius: 8px;
30-
`
31-
32-
const ContentPanel = styled.div`
33-
flex-grow: 1;
34-
`
20+
import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
21+
import { Theme } from 'uiSrc/components/base/theme/types'
22+
import { OnboardingWrapper } from './PubSubPage.styles'
3523

36-
const HeaderPanel = styled.div`
37-
padding: 12px 18px;
38-
border-bottom: 1px solid var(--separatorColor);
39-
border-color: ${({ theme }) => theme.semantic.color.border.neutral500};
40-
`
41-
42-
const FooterPanel = styled.div`
43-
margin-top: 16px;
44-
padding: 10px 18px 28px;
24+
const FooterPanel = styled(FlexItem)`
25+
border-top: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
26+
padding: ${({ theme }: { theme: Theme }) => theme.core.space.space300};
4527
`
4628

4729
const PubSubPage = () => {
@@ -92,28 +74,24 @@ const PubSubPage = () => {
9274
}
9375

9476
return (
95-
<MainContainer className={styles.main} data-testid="pub-sub-page">
96-
<ContentPanel>
97-
<HeaderPanel>
98-
<SubscriptionPanel />
99-
</HeaderPanel>
100-
<div className={styles.tableWrapper}>
101-
<MessagesListWrapper />
102-
</div>
103-
</ContentPanel>
104-
<FooterPanel>
77+
<Col data-testid="pub-sub-page" justify="between">
78+
<FlexItem grow={true}>
79+
<MessagesListWrapper />
80+
</FlexItem>
81+
82+
<FooterPanel grow={false}>
10583
<PublishMessage />
10684
</FooterPanel>
107-
<div className={styles.onboardAnchor}>
85+
86+
<OnboardingWrapper grow={false}>
10887
<OnboardingTour
10988
options={ONBOARDING_FEATURES.FINISH}
11089
anchorPosition="downRight"
111-
panelClassName={styles.onboardPanel}
11290
>
11391
<span />
11492
</OnboardingTour>
115-
</div>
116-
</MainContainer>
93+
</OnboardingWrapper>
94+
</Col>
11795
)
11896
}
11997

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import SubscriptionPanel from './subscription-panel'
21
import MessagesListWrapper from './messages-list'
32
import PublishMessage from './publish-message'
43

5-
export { SubscriptionPanel, MessagesListWrapper, PublishMessage }
4+
export { MessagesListWrapper, PublishMessage }

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

Lines changed: 43 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,71 @@
11
import React from 'react'
22
import { ConnectionType } from 'uiSrc/slices/interfaces'
3-
import { render } from 'uiSrc/utils/test-utils'
3+
import { render, screen } from 'uiSrc/utils/test-utils'
44

55
import EmptyMessagesList from './EmptyMessagesList'
66

77
describe('EmptyMessagesList', () => {
8-
it('should render', () => {
9-
expect(render(<EmptyMessagesList isSpublishNotSupported />)).toBeTruthy()
8+
it('renders base layout and copy', () => {
9+
render(<EmptyMessagesList isSpublishNotSupported />)
10+
11+
expect(screen.getByTestId('empty-messages-list')).toBeInTheDocument()
12+
13+
expect(screen.getByText('You are not subscribed')).toBeInTheDocument()
14+
expect(
15+
screen.getByText(
16+
/Subscribe to the Channel to see all the messages published to your database/i,
17+
),
18+
).toBeInTheDocument()
19+
20+
expect(
21+
screen.getByText(
22+
/Running in production may decrease performance and memory available\./i,
23+
),
24+
).toBeInTheDocument()
1025
})
1126

12-
it('should render cluster info for Cluster connection type', () => {
13-
const { queryByTestId } = render(
27+
it('shows cluster banner only when Cluster AND isSpublishNotSupported=true', () => {
28+
// visible when both conditions true
29+
const { rerender } = render(
1430
<EmptyMessagesList
1531
connectionType={ConnectionType.Cluster}
1632
isSpublishNotSupported
1733
/>,
1834
)
35+
const banner = screen.getByTestId('empty-messages-list-cluster')
36+
expect(banner).toBeInTheDocument()
37+
expect(
38+
screen.getByText(
39+
/Messages published with SPUBLISH will not appear in this channel/i,
40+
),
41+
).toBeInTheDocument()
1942

20-
expect(queryByTestId('empty-messages-list-cluster')).toBeInTheDocument()
21-
})
22-
23-
it(' not render cluster info for Cluster connection type', () => {
24-
const { queryByTestId } = render(
43+
// hide when flag is false
44+
rerender(
2545
<EmptyMessagesList
2646
connectionType={ConnectionType.Cluster}
2747
isSpublishNotSupported={false}
2848
/>,
2949
)
50+
expect(
51+
screen.queryByTestId('empty-messages-list-cluster'),
52+
).not.toBeInTheDocument()
3053

31-
expect(queryByTestId('empty-messages-list-cluster')).not.toBeInTheDocument()
32-
})
33-
34-
it('should not render cluster info for Cluster connection type', () => {
35-
const { queryByTestId } = render(
54+
// hide when connection is not Cluster
55+
rerender(
3656
<EmptyMessagesList
3757
connectionType={ConnectionType.Standalone}
3858
isSpublishNotSupported
3959
/>,
4060
)
61+
expect(
62+
screen.queryByTestId('empty-messages-list-cluster'),
63+
).not.toBeInTheDocument()
4164

42-
expect(queryByTestId('empty-messages-list-cluster')).not.toBeInTheDocument()
65+
// also hide when connectionType is undefined
66+
rerender(<EmptyMessagesList isSpublishNotSupported />)
67+
expect(
68+
screen.queryByTestId('empty-messages-list-cluster'),
69+
).not.toBeInTheDocument()
4370
})
4471
})

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import styled from 'styled-components'
2+
import { RiImage } from 'uiSrc/components/base/display'
3+
import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
4+
5+
export const HeroImage = styled(RiImage)`
6+
user-select: none;
7+
pointer-events: none;
8+
`
9+
10+
export const InnerContainer = styled(Col)`
11+
background-color: ${({ theme }) =>
12+
theme.semantic.color.background.neutral300};
13+
border-radius: ${({ theme }) => theme.core.space.space100};
14+
border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
15+
padding: ${({ theme }) => theme.core.space.space300};
16+
height: 100%;
17+
`
18+
19+
export const Wrapper = styled(FlexItem)`
20+
margin: ${({ theme }) => theme.core.space.space500};
21+
height: 100%;
22+
`

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

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from 'react'
2-
import cx from 'classnames'
3-
42
import { ConnectionType } from 'uiSrc/slices/interfaces'
5-
import { Text } from 'uiSrc/components/base/text'
3+
import { Text, Title } from 'uiSrc/components/base/text'
4+
import { Col } from 'uiSrc/components/base/layout/flex'
5+
import { Banner } from 'uiSrc/components/base/display'
6+
import { CallOut } from 'uiSrc/components/base/display/call-out/CallOut'
7+
import LightBulbImage from 'uiSrc/assets/img/pub-sub/light-bulb.svg'
68

7-
import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
8-
import styles from './styles.module.scss'
9-
import { Row } from 'uiSrc/components/base/layout/flex'
9+
import SubscribeForm from '../../subscribe-form'
10+
import { HeroImage, InnerContainer, Wrapper } from './EmptyMessagesList.styles'
1011

1112
export interface Props {
1213
connectionType?: ConnectionType
@@ -17,38 +18,42 @@ const EmptyMessagesList = ({
1718
connectionType,
1819
isSpublishNotSupported,
1920
}: Props) => (
20-
<div className={styles.container} data-testid="empty-messages-list">
21-
<div
22-
className={cx(styles.content, {
23-
[styles.contentCluster]: connectionType === ConnectionType.Cluster,
24-
})}
21+
<Wrapper>
22+
<InnerContainer
23+
align="center"
24+
justify="center"
25+
data-testid="empty-messages-list"
26+
gap="xxl"
2527
>
26-
<Text className={styles.title}>No messages to display</Text>
27-
<Text className={styles.summary}>
28-
Subscribe to the Channel to see all the messages published to your
29-
database
30-
</Text>
31-
<Row>
32-
<RiIcon type="ToastDangerIcon" className={styles.alertIcon} />
33-
<Text className={styles.alert}>
34-
Running in production may decrease performance and memory available
28+
<HeroImage src={LightBulbImage} alt="Pub/Sub" />
29+
30+
<Col align="center" justify="center" grow={false} gap="s">
31+
<Title size="XXL">You are not subscribed</Title>
32+
33+
<Text>
34+
Subscribe to the Channel to see all the messages published to your
35+
database
3536
</Text>
36-
</Row>
37+
</Col>
38+
39+
<SubscribeForm grow={false} />
40+
41+
<CallOut variant="attention">
42+
Running in production may decrease performance and memory available.
43+
</CallOut>
44+
3745
{connectionType === ConnectionType.Cluster && isSpublishNotSupported && (
3846
<>
39-
<div className={styles.separator} />
40-
<Text
41-
className={styles.cluster}
47+
<Banner
4248
data-testid="empty-messages-list-cluster"
43-
>
44-
{'Messages published with '}
45-
<span className={styles.badge}>SPUBLISH</span>
46-
{' will not appear in this channel'}
47-
</Text>
49+
variant="attention"
50+
showIcon={true}
51+
message="Messages published with SPUBLISH will not appear in this channel"
52+
/>
4853
</>
4954
)}
50-
</div>
51-
</div>
55+
</InnerContainer>
56+
</Wrapper>
5257
)
5358

5459
export default EmptyMessagesList

‎redisinsight/ui/src/pages/pub-sub/components/messages-list/EmptyMessagesList/styles.module.scss‎

Lines changed: 0 additions & 83 deletions
This file was deleted.

0 commit comments

Comments
 (0)