#RI-3021-update filter styles, add fetch consumers after ack (#741)

Author: AmirAllayarovSofteq

redisinsight/ui/src/components/range-filter/RangeFilter.tsx

@@ -174,11 +174,21 @@ const RangeFilter = (props: Props) => {
         />
         <div className={styles.slider}>
           <div className={styles.sliderTrack} />
-          <div ref={range} className={styles.sliderRange}>
+          <div
+            ref={range}
+            className={
+              cx(styles.sliderRange,
+                {
+                  [styles.leftPosition]: max - startVal < (max - min) / 2,
+                  [styles.disabled]: disabled
+                })
+            }
+          >
             <div className={
               cx(styles.sliderLeftValue,
                 {
-                  [styles.leftPosition]: max - startVal < (max - min) / 2
+                  [styles.leftPosition]: max - startVal < (max - min) / 2,
+                  [styles.disabled]: disabled
                 })
               }
             >
@@ -187,7 +197,8 @@ const RangeFilter = (props: Props) => {
             <div className={
               cx(styles.sliderRightValue,
                 {
-                  [styles.rightPosition]: max - endVal > (max - min) / 2
+                  [styles.rightPosition]: max - endVal > (max - min) / 2,
+                  [styles.disabled]: disabled
                 })
               }
             >

redisinsight/ui/src/components/range-filter/styles.module.scss

@@ -63,12 +63,11 @@
   }
 }
 
-.rangeWrapper:hover .sliderRange {
+.rangeWrapper:hover .sliderRange:not(.disabled) {
   height: 5px;
   transform: translateY(0px);
 
   &:before {
-
     width: 2px;
     height: 12px;
     top: -7px;
@@ -93,11 +92,11 @@
   margin-top: -25px;
 }
 
-.rangeWrapper:hover .sliderLeftValue {
+.rangeWrapper:hover .sliderLeftValue:not(.disabled) {
   margin-top: -23px;
 }
 
-.rangeWrapper:hover .sliderRightValue {
+.rangeWrapper:hover .sliderRightValue:not(.disabled) {
   margin-top: 10px;
 }
 
@@ -132,12 +131,6 @@
   outline: none;
 }
 
-@-moz-document url-prefix() {
-  .thumb {
-    margin-top: 0.33px;
-  }
-}
-
 .thumbZindex3 {
   z-index: 3;
 }
@@ -158,12 +151,16 @@
   background: transparent;
 }
 
+.thumb::-moz-range-thumb:disabled {
+  cursor: auto;
+}
+
 .thumbZindex3::-moz-range-thumb {
-  transform: translateY(-4px);
+  transform: translate(-18px, -4px);
 }
 
 .thumbZindex4::-moz-range-thumb {
-  transform: translateY(8px) rotate(180deg);
+  transform: translate(-20px, 8px) rotate(180deg);
 }
 
 input[type='range']::-webkit-slider-thumb {
@@ -183,9 +180,9 @@ input[type='range'][disabled]::-webkit-slider-thumb {
 }
 
 input[type='range']:first-child::-webkit-slider-thumb {
-  transform: translateY(-4px);
+  transform: translate(-18px, -4px);
 }
 
 input[type='range']:last-of-type::-webkit-slider-thumb {
-  transform: translateY(8px) rotate(180deg);
+  transform: translate(-20px, 8px) rotate(180deg);
 }

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

@@ -1014,6 +1014,7 @@ export function ackPendingEntriesAction(
         onSuccessAction?.()
         dispatch(ackPendingEntriesSuccess())
         dispatch(deleteMessageFromList(entries[0]))
+        dispatch<any>(fetchConsumers())
         dispatch(addMessageNotification(
           successMessages.MESSAGE_ACTION(entries[0], 'acknowledged')
         ))

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

@@ -1404,6 +1404,7 @@ describe('stream slice', () => {
         const entries = ['0-1']
         const responsePayload = { status: 200 }
 
+        apiService.post = jest.fn().mockResolvedValue(responsePayload)
         apiService.post = jest.fn().mockResolvedValue(responsePayload)
 
         // Act
@@ -1414,6 +1415,7 @@ describe('stream slice', () => {
           ackPendingEntries(),
           ackPendingEntriesSuccess(),
           deleteMessageFromList('0-1'),
+          loadConsumerGroups(),
           addMessageNotification(
             successMessages.MESSAGE_ACTION(
               entries.join(''),