diff --git a/redisinsight/ui/src/pages/pubSub/components/subscription-panel/SubscriptionPanel.tsx b/redisinsight/ui/src/pages/pubSub/components/subscription-panel/SubscriptionPanel.tsx index 5ec7081323..f8376d16c1 100644 --- a/redisinsight/ui/src/pages/pubSub/components/subscription-panel/SubscriptionPanel.tsx +++ b/redisinsight/ui/src/pages/pubSub/components/subscription-panel/SubscriptionPanel.tsx @@ -1,10 +1,11 @@ -import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText } from '@elastic/eui' +import { EuiButton, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui' +import cx from 'classnames' import React, { useContext } from 'react' import { useDispatch, useSelector } from 'react-redux' import { Theme } from 'uiSrc/constants' import { ThemeContext } from 'uiSrc/contexts/themeContext' import { PUB_SUB_DEFAULT_CHANNEL } from 'uiSrc/pages/pubSub/PubSubPage' -import { pubSubSelector, toggleSubscribeTriggerPubSub } from 'uiSrc/slices/pubsub/pubsub' +import { clearPubSubMessages, pubSubSelector, toggleSubscribeTriggerPubSub } from 'uiSrc/slices/pubsub/pubsub' import { ReactComponent as UserInCircle } from 'uiSrc/assets/img/icons/user_in_circle.svg' import SubscribedIconDark from 'uiSrc/assets/img/pub-sub/subscribed.svg' @@ -15,7 +16,7 @@ import NotSubscribedIconLight from 'uiSrc/assets/img/pub-sub/not-subscribed-lt.s import styles from './styles.module.scss' const SubscriptionPanel = () => { - const { isSubscribed, loading, count } = useSelector(pubSubSelector) + const { messages, isSubscribed, loading, count } = useSelector(pubSubSelector) const dispatch = useDispatch() const { theme } = useContext(ThemeContext) @@ -24,6 +25,10 @@ const SubscriptionPanel = () => { dispatch(toggleSubscribeTriggerPubSub([PUB_SUB_DEFAULT_CHANNEL])) } + const onClickClear = () => { + dispatch(clearPubSubMessages()) + } + const subscribedIcon = theme === Theme.Dark ? SubscribedIconDark : SubscribedIconLight const notSubscribedIcon = theme === Theme.Dark ? NotSubscribedIconDark : NotSubscribedIconLight @@ -53,19 +58,38 @@ const SubscriptionPanel = () => { - - { isSubscribed ? 'Unsubscribe' : 'Subscribe' } - + + {!!messages.length && ( + + + + + + )} + + + { isSubscribed ? 'Unsubscribe' : 'Subscribe' } + + + ) diff --git a/redisinsight/ui/src/slices/pubsub/pubsub.ts b/redisinsight/ui/src/slices/pubsub/pubsub.ts index e5c8f94ba2..dfc12c37e8 100644 --- a/redisinsight/ui/src/slices/pubsub/pubsub.ts +++ b/redisinsight/ui/src/slices/pubsub/pubsub.ts @@ -57,6 +57,10 @@ const pubSubSlice = createSlice({ state.messages = newItems }, + clearPubSubMessages: (state) => { + state.messages = [] + state.count = 0 + }, setLoading: (state, { payload }: PayloadAction) => { state.loading = payload }, @@ -87,6 +91,7 @@ export const { setIsPubSubSubscribed, setIsPubSubUnSubscribed, concatPubSubMessages, + clearPubSubMessages, setLoading, disconnectPubSub, publishMessage,