#RI-3013,3014 - scroll, update success messages (#736)

* #RI-3013,3014 - scroll, update success messages

Author: AmirAllayarovSofteq

redisinsight/ui/src/components/notifications/success-messages.tsx

@@ -137,5 +137,9 @@ export default {
         {actionName}.
       </>
     ),
+  }),
+  NO_CLAIMED_MESSAGES: () => ({
+    title: 'No messages claimed',
+    message: 'No messages exceed the minimum idle time.',
   })
 }

redisinsight/ui/src/pages/browser/components/stream-details/messages-view/MessageClaimPopover/MessageClaimPopover.tsx

@@ -13,7 +13,8 @@ import {
   EuiSwitch,
   EuiText,
   EuiCheckbox,
-  EuiSpacer
+  EuiSpacer,
+  EuiToolTip
 } from '@elastic/eui'
 import { useFormik } from 'formik'
 import { orderBy, filter } from 'lodash'
@@ -106,9 +107,35 @@ const MessageClaimPopover = (props: Props) => {
     }
   }, [consumers, currentConsumerName])
 
+  const button = (
+    <EuiButton
+      size="s"
+      color="secondary"
+      aria-label="Claim pending message"
+      onClick={showPopover}
+      data-testid="claim-pending-message"
+      className={styles.claimBtn}
+      disabled={consumers.length < 2}
+    >
+      CLAIM
+    </EuiButton>
+  )
+
+  const buttonTooltip = (
+    <EuiToolTip
+      content="There is no consumer to claim the message."
+      position="top"
+      display="inlineBlock"
+      anchorClassName="flex-row"
+    >
+      {button}
+    </EuiToolTip>
+  )
+
   return (
     <EuiPopover
       key={id}
+      onWheel={(e) => e.stopPropagation()}
       anchorPosition="leftCenter"
       ownFocus
       isOpen={isOpen}
@@ -117,18 +144,7 @@ const MessageClaimPopover = (props: Props) => {
       anchorClassName="claimPendingMessage"
       panelClassName={styles.popoverWrapper}
       closePopover={() => {}}
-      button={(
-        <EuiButton
-          size="s"
-          color="secondary"
-          aria-label="Claim pending message"
-          onClick={showPopover}
-          data-testid="claim-pending-message"
-          className={styles.claimBtn}
-        >
-          CLAIM
-        </EuiButton>
-      )}
+      button={consumers.length < 2 ? buttonTooltip : button}
     >
       <EuiForm>
         <EuiFlexGroup>

redisinsight/ui/src/pages/browser/components/stream-details/messages-view/MessageClaimPopover/styles.module.scss

@@ -64,6 +64,7 @@
   font: normal normal normal 13px/24px Graphik;
   letter-spacing: -0.13px;
   color: var(--inputPlaceholderColor) !important;
+  white-space: nowrap;
 }
 
 .consumerOption :global(.euiContextMenu__itemLayout) .pendingCount {
@@ -119,3 +120,8 @@
 .popoverWrapper .container .grow {
   flex-grow: 2;
 }
+
+.consumerName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

redisinsight/ui/src/slices/browser/stream.ts

@@ -959,9 +959,15 @@ export function claimPendingMessages(
         dispatch(claimConsumerMessagesSuccess())
         dispatch<any>(fetchConsumerMessages())
         dispatch<any>(fetchConsumers())
-        dispatch(addMessageNotification(
-          successMessages.MESSAGE_ACTION(data.affected[0], 'claimed')
-        ))
+        if (data.affected.length) {
+          dispatch(addMessageNotification(
+            successMessages.MESSAGE_ACTION(data.affected[0], 'claimed')
+          ))
+        } else {
+          dispatch(addMessageNotification(
+            successMessages.NO_CLAIMED_MESSAGES()
+          ))
+        }
         onSuccess?.(data)
       }
     } catch (_err) {