#RI-2957 - update styles, max and min range value (#677)

* #RI-2957 - update styles, max and min range value

Author: AmirAllayarovSofteq

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

@@ -14,6 +14,8 @@ export interface Props {
   end: number
   handleChangeStart: (value: number, shouldSentEventTelemetry: boolean) => void
   handleChangeEnd: (value: number, shouldSentEventTelemetry: boolean) => void
+  handleUpdateRangeMax: (value: number) => void
+  handleUpdateRangeMin: (value: number) => void
   handleResetFilter: () => void
 }
 
@@ -26,7 +28,17 @@ function usePrevious(value: any) {
 }
 
 const RangeFilter = (props: Props) => {
-  const { max, min, start, end, handleChangeStart, handleChangeEnd, handleResetFilter } = props
+  const {
+    max,
+    min,
+    start,
+    end,
+    handleChangeStart,
+    handleChangeEnd,
+    handleUpdateRangeMax,
+    handleUpdateRangeMin,
+    handleResetFilter
+  } = props
 
   const [startVal, setStartVal] = useState(start)
   const [endVal, setEndVal] = useState(end)
@@ -44,9 +56,10 @@ const RangeFilter = (props: Props) => {
 
   const onChangeStart = useCallback(
     ({ target: { value } }) => {
-      setStartVal(value)
+      const newValue = Math.min(+value, endVal - 1)
+      setStartVal(newValue)
     },
-    []
+    [endVal]
   )
 
   const onMouseUpStart = useCallback(
@@ -65,9 +78,10 @@ const RangeFilter = (props: Props) => {
 
   const onChangeEnd = useCallback(
     ({ target: { value } }) => {
-      setEndVal(value)
+      const newValue = Math.max(+value, startVal + 1)
+      setEndVal(newValue)
     },
-    []
+    [startVal]
   )
 
   useEffect(() => {
@@ -103,10 +117,10 @@ const RangeFilter = (props: Props) => {
 
   useEffect(() => {
     if (max && prevValue && prevValue.max !== max && end === prevValue.max) {
-      handleChangeEnd(max, false)
+      handleUpdateRangeMax(max)
     }
     if (min && prevValue && prevValue.min !== min && start === prevValue.min) {
-      handleChangeStart(min, false)
+      handleUpdateRangeMin(min)
     }
   }, [prevValue])
 

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

@@ -37,10 +37,16 @@
   z-index: 1;
 }
 
-.sliderRange {
-  height: 5px;
+.rangeWrapper .sliderRange {
+  height: 1px;
   background-color: var(--euiColorPrimary);
   z-index: 2;
+  transform: translateY(2px);
+}
+
+.rangeWrapper:hover .sliderRange {
+  height: 5px;
+  transform: translateY(0px);
 }
 
 .sliderLeftValue,
@@ -56,6 +62,14 @@
   margin-top: -30px;
 }
 
+.rangeWrapper:hover .sliderLeftValue {
+  margin-top: -28px;
+}
+
+.rangeWrapper:hover .sliderRightValue {
+  margin-top: 22px;
+}
+
 .sliderLeftValue.leftPosition {
   transform: translateX(-100%);
 }
@@ -96,39 +110,62 @@
 }
 
 .thumb::-moz-range-thumb {
-  width: 2px;
+  width: 24px;
   height: 12px;
-  background-color: var(--euiColorPrimary);
   border: none;
+  border-radius: 0;
   cursor: ew-resize;
   margin-top: 4px;
   pointer-events: all;
   position: relative;
+  background: transparent;
+  border-bottom: 1px solid var(--euiColorPrimary);
+  border-left: 1px solid var(--euiColorPrimary);
+}
+
+.rangeWrapper:hover .thumb::-moz-range-thumb {
+  border-bottom: 5px solid var(--euiColorPrimary);
 }
 
 .thumbZindex3::-moz-range-thumb {
   transform: translateY(-4px);
 }
 
 .thumbZindex4::-moz-range-thumb {
-  transform: translateY(8px);
+  transform: translateY(8px) rotate(180deg);
 }
 
 input[type='range']::-webkit-slider-thumb {
-  width: 2px;
+  width: 24px;
   height: 12px;
-  background-color: var(--euiColorPrimary);
   border: none;
+  border-radius: 0;
   cursor: ew-resize;
   margin-top: 4px;
   pointer-events: all;
   position: relative;
+  background: transparent;
+  border-bottom: 1px solid var(--euiColorPrimary);
+  border-left: 1px solid var(--euiColorPrimary);
+}
+
+.rangeWrapper:hover input[type='range']::-webkit-slider-thumb{
+  border-bottom: 5px solid var(--euiColorPrimary);
+  margin-top: 2px;
 }
 
 input[type='range']:first-child::-webkit-slider-thumb {
-  transform: translateY(-4px);
+  transform: translateY(-5px);
 }
 
 input[type='range']:last-of-type::-webkit-slider-thumb {
-  transform: translateY(8px);
+  transform: translateY(6px) rotate(180deg);
 }
+
+.rangeWrapper:hover input[type='range']:first-child::-webkit-slider-thumb {
+  transform: translateY(-2px);
+}
+
+.rangeWrapper:hover input[type='range']:last-of-type::-webkit-slider-thumb {
+  transform: translateY(5px) rotate(180deg);
+}

redisinsight/ui/src/pages/browser/components/stream-details/StreamDetails/StreamDetails.tsx

@@ -173,6 +173,20 @@ const StreamDetails = (props: Props) => {
     [lastEntryTimeStamp, firstEntryTimeStamp]
   )
 
+  const handleUpdateRangeMin = useCallback(
+    (min: number) => {
+      dispatch(updateStart(min.toString()))
+    },
+    []
+  )
+
+  const handleUpdateRangeMax = useCallback(
+    (max: number) => {
+      dispatch(updateEnd(max.toString()))
+    },
+    []
+  )
+
   useEffect(() => {
     if (isNull(firstEntry)) {
       dispatch(updateStart(''))
@@ -193,6 +207,14 @@ const StreamDetails = (props: Props) => {
 
   return (
     <>
+      {loading && (
+        <EuiProgress
+          color="primary"
+          size="xs"
+          position="absolute"
+          data-testid="progress-key-stream"
+        />
+      )}
       {shouldFilterRender ? (
         <RangeFilter
           max={lastEntryTimeStamp}
@@ -202,6 +224,8 @@ const StreamDetails = (props: Props) => {
           handleChangeStart={handleChangeStartFilter}
           handleChangeEnd={handleChangeEndFilter}
           handleResetFilter={handleResetFilter}
+          handleUpdateRangeMax={handleUpdateRangeMax}
+          handleUpdateRangeMin={handleUpdateRangeMin}
         />
       )
         : (
@@ -218,14 +242,6 @@ const StreamDetails = (props: Props) => {
         )}
         data-test-id="stream-entries-container"
       >
-        {loading && (
-          <EuiProgress
-            color="primary"
-            size="xs"
-            position="absolute"
-            data-testid="progress-key-stream"
-          />
-        )}
         {/* <div className={styles.columnManager}>
           <EuiButtonIcon iconType="boxesVertical" aria-label="manage columns" />
         </div> */}