From a6ffc9bd06a0795923e74ca24f0ef0e311346a4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Fri, 15 Jan 2021 14:26:05 +0000 Subject: [PATCH] chore(ui): use react-range for sliders --- ui/package-lock.json | 19 +-- ui/package.json | 2 +- .../AlertGroupConfiguration.test.tsx | 17 ++- .../Configuration/AlertGroupConfiguration.tsx | 30 ++-- .../AlertGroupWidthConfiguration.test.tsx | 23 +-- .../AlertGroupWidthConfiguration.tsx | 32 ++-- .../Configuration/FetchConfiguration.test.tsx | 19 +-- .../Configuration/FetchConfiguration.tsx | 31 ++-- .../AlertGroupConfiguration.test.tsx.snap | 47 ++---- ...AlertGroupWidthConfiguration.test.tsx.snap | 47 ++---- .../FetchConfiguration.test.tsx.snap | 47 ++---- .../__snapshots__/index.test.tsx.snap | 141 +++++------------- .../MainModalContent.test.tsx.snap | 141 +++++------------- ui/src/Styles/Components/InputRange.scss | 19 ++- ui/src/Styles/DarkTheme.scss | 4 +- ui/src/Styles/LightTheme.scss | 4 +- 16 files changed, 225 insertions(+), 398 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index 118368717..9ed1658f9 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -4740,11 +4740,6 @@ "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==" }, - "autobind-decorator": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-1.4.3.tgz", - "integrity": "sha1-TJb/p3sQYi7eJPEQ9du/VmkUF9E=" - }, "autoprefixer": { "version": "9.8.6", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz", @@ -17108,15 +17103,6 @@ "prop-types": "^15.5.8" } }, - "react-input-range": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/react-input-range/-/react-input-range-1.3.0.tgz", - "integrity": "sha1-+W0AFjGrgXQX8eJtj5+WhLSCf1k=", - "requires": { - "autobind-decorator": "^1.3.4", - "prop-types": "^15.5.8" - } - }, "react-intersection-observer": { "version": "8.31.0", "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.31.0.tgz", @@ -17209,6 +17195,11 @@ "react-popper": "^2.2.4" } }, + "react-range": { + "version": "1.8.6", + "resolved": "https://registry.npmjs.org/react-range/-/react-range-1.8.6.tgz", + "integrity": "sha512-oEWZD//akyrfCpqXUnm4PJvochNqBvFtirlo+Mn40ItBuqLt+xvz+78V2faWl2zW5QzMQgdizxZ4HS5x5Ot0bw==" + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", diff --git a/ui/package.json b/ui/package.json index ba201ada8..17b2e17ae 100644 --- a/ui/package.json +++ b/ui/package.json @@ -65,13 +65,13 @@ "react-highlighter": "0.4.3", "react-hotkeys-hook": "3.0.3", "react-idle-timer": "4.5.1", - "react-input-range": "1.3.0", "react-intersection-observer": "8.31.0", "react-js-pagination": "3.0.3", "react-json-pretty": "2.2.0", "react-linkify": "0.2.2", "react-media-hook": "0.4.9", "react-popper": "2.2.4", + "react-range": "1.8.6", "react-scripts": "4.0.1", "react-select": "3.2.0", "react-transition-group": "4.4.1", diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.test.tsx b/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.test.tsx index 7b3943f4a..fee87bc3f 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.test.tsx +++ b/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.test.tsx @@ -27,23 +27,24 @@ describe("", () => { const tree = FakeConfiguration(); expect(settingsStore.alertGroupConfig.config.defaultRenderCount).toBe(5); - const slider = tree.find(`Slider [onKeyDown]`).first(); + const slider = tree.find(`div.input-range-thumb`).first(); + slider.simulate("click"); - slider.simulate("keyDown", { keyCode: 37 }); - slider.simulate("keyUp", { keyCode: 37 }); + slider.simulate("keyDown", { key: "ArrowLeft", keyCode: 37 }); + slider.simulate("keyUp", { key: "ArrowLeft", keyCode: 37 }); expect(settingsStore.alertGroupConfig.config.defaultRenderCount).toBe(4); - slider.simulate("keyDown", { keyCode: 39 }); - slider.simulate("keyUp", { keyCode: 39 }); - slider.simulate("keyDown", { keyCode: 39 }); - slider.simulate("keyUp", { keyCode: 39 }); + slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 }); + slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 }); + slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 }); + slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 }); expect(settingsStore.alertGroupConfig.config.defaultRenderCount).toBe(6); }); it("custom interval value is rendered correctly", () => { settingsStore.alertGroupConfig.config.defaultRenderCount = 4; const component = FakeConfiguration(); - expect(component.find("InputRange").props().value).toBe(4); + expect(component.find("Range").props().values).toContain(4); }); }); diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.tsx b/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.tsx index 603d22d95..4677e20df 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.tsx +++ b/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.tsx @@ -1,15 +1,15 @@ import React, { FC, useState } from "react"; -import InputRange from "react-input-range"; +import { Range } from "react-range"; import { Settings } from "Stores/Settings"; const AlertGroupConfiguration: FC<{ settingsStore: Settings; }> = ({ settingsStore }) => { - const [defaultRenderCount, setDefaultRenderCount] = useState( - settingsStore.alertGroupConfig.config.defaultRenderCount - ); + const [defaultRenderCount, setDefaultRenderCount] = useState([ + settingsStore.alertGroupConfig.config.defaultRenderCount, + ]); const onChangeComplete = (value: number) => { settingsStore.alertGroupConfig.setDefaultRenderCount(value as number); @@ -17,13 +17,23 @@ const AlertGroupConfiguration: FC<{ return (
- setDefaultRenderCount(value as number)} - onChangeComplete={(value) => onChangeComplete(value as number)} + min={1} + max={10} + values={defaultRenderCount} + onChange={(values) => setDefaultRenderCount(values)} + onFinalChange={(values) => onChangeComplete(values[0])} + renderTrack={({ props, children }) => ( +
+ {children} +
+ )} + renderThumb={({ props }) => ( +
+ {defaultRenderCount} +
+ )} />
); diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.test.tsx b/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.test.tsx index bde168187..5b0caaccf 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.test.tsx +++ b/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.test.tsx @@ -26,24 +26,25 @@ describe("", () => { const tree = FakeConfiguration(); expect(settingsStore.gridConfig.config.groupWidth).toBe(420); - const slider = tree.find(`Slider [onKeyDown]`).first(); + const slider = tree.find(`div.input-range-thumb`).first(); + slider.simulate("click"); - slider.simulate("keyDown", { keyCode: 37 }); - slider.simulate("keyUp", { keyCode: 37 }); + slider.simulate("keyDown", { key: "ArrowLeft", keyCode: 37 }); + slider.simulate("keyUp", { key: "ArrowLeft", keyCode: 37 }); - expect(settingsStore.gridConfig.config.groupWidth).toBe(400); + expect(settingsStore.gridConfig.config.groupWidth).toBe(410); - slider.simulate("keyDown", { keyCode: 39 }); - slider.simulate("keyUp", { keyCode: 39 }); - slider.simulate("keyDown", { keyCode: 39 }); - slider.simulate("keyUp", { keyCode: 39 }); + slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 }); + slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 }); + slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 }); + slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 }); - expect(settingsStore.gridConfig.config.groupWidth).toBe(440); + expect(settingsStore.gridConfig.config.groupWidth).toBe(430); }); it("custom interval value is rendered correctly", () => { - settingsStore.gridConfig.config.groupWidth = 455; + settingsStore.gridConfig.config.groupWidth = 460; const component = FakeConfiguration(); - expect(component.find("InputRange").props().value).toBe(455); + expect(component.find("Range").props().values).toContain(460); }); }); diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.tsx b/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.tsx index e0a178f8d..468fd8bc5 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.tsx +++ b/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.tsx @@ -2,16 +2,16 @@ import React, { FC, useState } from "react"; import debounce from "lodash.debounce"; -import InputRange from "react-input-range"; +import { Range } from "react-range"; import { Settings } from "Stores/Settings"; const AlertGroupWidthConfiguration: FC<{ settingsStore: Settings; }> = ({ settingsStore }) => { - const [groupWidth, setGroupWidth] = useState( - settingsStore.gridConfig.config.groupWidth - ); + const [groupWidth, setGroupWidth] = useState([ + settingsStore.gridConfig.config.groupWidth, + ]); const onChangeComplete = debounce((value: number) => { settingsStore.gridConfig.config.groupWidth = value as number; @@ -19,13 +19,23 @@ const AlertGroupWidthConfiguration: FC<{ return (
- setGroupWidth(value as number)} - onChangeComplete={(value) => onChangeComplete(value as number)} + setGroupWidth(values)} + onFinalChange={(values) => onChangeComplete(values[0])} + renderTrack={({ props, children }) => ( +
+ {children} +
+ )} + renderThumb={({ props }) => ( +
+ {groupWidth} +
+ )} />
); diff --git a/ui/src/Components/MainModal/Configuration/FetchConfiguration.test.tsx b/ui/src/Components/MainModal/Configuration/FetchConfiguration.test.tsx index 2570bc249..7a50551a5 100644 --- a/ui/src/Components/MainModal/Configuration/FetchConfiguration.test.tsx +++ b/ui/src/Components/MainModal/Configuration/FetchConfiguration.test.tsx @@ -26,24 +26,25 @@ describe("", () => { const tree = FakeConfiguration(); expect(settingsStore.fetchConfig.config.interval).toBe(30); - const slider = tree.find(`Slider [onKeyDown]`).first(); + const slider = tree.find(`div.input-range-thumb`).first(); + slider.simulate("click"); - slider.simulate("keyDown", { keyCode: 37 }); - slider.simulate("keyUp", { keyCode: 37 }); + slider.simulate("keyDown", { key: "ArrowLeft", keyCode: 37 }); + slider.simulate("keyUp", { key: "ArrowLeft", keyCode: 37 }); expect(settingsStore.fetchConfig.config.interval).toBe(20); - slider.simulate("keyDown", { keyCode: 39 }); - slider.simulate("keyUp", { keyCode: 39 }); - slider.simulate("keyDown", { keyCode: 39 }); - slider.simulate("keyUp", { keyCode: 39 }); + slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 }); + slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 }); + slider.simulate("keyDown", { key: "ArrowRight", keyCode: 39 }); + slider.simulate("keyUp", { key: "ArrowRight", keyCode: 39 }); expect(settingsStore.fetchConfig.config.interval).toBe(40); }); it("custom interval value is rendered correctly", () => { - settingsStore.fetchConfig.setInterval(66); + settingsStore.fetchConfig.setInterval(70); const component = FakeConfiguration(); - expect(component.find("InputRange").props().value).toBe(66); + expect(component.find("Range").props().values).toContain(70); }); }); diff --git a/ui/src/Components/MainModal/Configuration/FetchConfiguration.tsx b/ui/src/Components/MainModal/Configuration/FetchConfiguration.tsx index f297caca7..4be31eff4 100644 --- a/ui/src/Components/MainModal/Configuration/FetchConfiguration.tsx +++ b/ui/src/Components/MainModal/Configuration/FetchConfiguration.tsx @@ -1,15 +1,15 @@ import React, { FC, useState } from "react"; -import InputRange from "react-input-range"; +import { Range } from "react-range"; import { Settings } from "Stores/Settings"; const FetchConfiguration: FC<{ settingsStore: Settings; }> = ({ settingsStore }) => { - const [fetchInterval, setFetchInterval] = useState( - settingsStore.fetchConfig.config.interval - ); + const [fetchInterval, setFetchInterval] = useState([ + settingsStore.fetchConfig.config.interval, + ]); const onChangeComplete = (value: number) => { settingsStore.fetchConfig.setInterval(value); @@ -17,14 +17,23 @@ const FetchConfiguration: FC<{ return (
- `${value}s`} - onChange={(value) => setFetchInterval(value as number)} - onChangeComplete={(value) => onChangeComplete(value as number)} + min={10} + max={120} + values={fetchInterval} + onChange={(values) => setFetchInterval(values)} + onFinalChange={(values) => onChangeComplete(values[0])} + renderTrack={({ props, children }) => ( +
+ {children} +
+ )} + renderThumb={({ props }) => ( +
+ {fetchInterval}s +
+ )} />
); diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.tsx.snap index 41ac24836..e6caa65bc 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.tsx.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.tsx.snap @@ -3,43 +3,20 @@ exports[` matches snapshot with default values 1`] = ` "
-
- - - 1 - - -
-
-
- - - - 5 - - -
-
- +
+ 5
- - - 10 - -
" diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupWidthConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupWidthConfiguration.test.tsx.snap index 317803808..c0149a6a8 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupWidthConfiguration.test.tsx.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupWidthConfiguration.test.tsx.snap @@ -3,43 +3,20 @@ exports[` matches snapshot with default values 1`] = ` "
-
- - - 300 - - -
-
-
- - - - 420 - - -
-
- +
+ 420
- - - 800 - -
" diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.tsx.snap index c6005c4d4..a56479873 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.tsx.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.tsx.snap @@ -3,43 +3,20 @@ exports[` matches snapshot with default values 1`] = ` "
-
- - - 10s - - -
-
-
- - - - 30s - - -
-
- +
+ 30s
- - - 120s - -
" diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap index 5fa85b4e9..f11d2ea42 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap @@ -30,43 +30,20 @@ exports[` matches snapshot 1`] = `
-
- - - 10s - - -
-
-
- - - - 30s - - -
-
- +
+ 30s
- - - 120s - -
@@ -249,43 +226,20 @@ exports[` matches snapshot 1`] = `
-
- - - 300 - - -
-
-
- - - - 420 - - -
-
- +
+ 420
- - - 800 - -
@@ -317,43 +271,20 @@ exports[` matches snapshot 1`] = `
-
- - - 1 - - -
-
-
- - - - 5 - - -
-
- +
+ 5
- - - 10 - -
diff --git a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap index d3f522749..1fcea9f68 100644 --- a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap +++ b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap @@ -49,43 +49,20 @@ exports[` matches snapshot 1`] = `
-
- - - 10s - - -
-
-
- - - - 30s - - -
-
- +
+ 30s
- - - 120s - -
@@ -268,43 +245,20 @@ exports[` matches snapshot 1`] = `
-
- - - 300 - - -
-
-
- - - - 420 - - -
-
- +
+ 420
- - - 800 - -
@@ -336,43 +290,20 @@ exports[` matches snapshot 1`] = `
-
- - - 1 - - -
-
-
- - - - 5 - - -
-
- +
+ 5
- - - 10 - -
diff --git a/ui/src/Styles/Components/InputRange.scss b/ui/src/Styles/Components/InputRange.scss index 107b1df51..182429b92 100644 --- a/ui/src/Styles/Components/InputRange.scss +++ b/ui/src/Styles/Components/InputRange.scss @@ -1,5 +1,16 @@ -$input-range-font-family: $font-family-sans-serif; -$input-range-primary-color: $primary; -$input-range-disabled-color: $text-muted; +.input-range-track { + border-radius: 0.3rem; + height: 0.3rem; + background-color: $input-range-track-background; +} -@import "~react-input-range/src/scss/input-range/input-range"; +.input-range-thumb { + color: $input-range-thumb-font-color; + font-size: 0.8rem; + border-radius: 0.5rem; + height: 1.2rem; + min-width: 1.2rem; + padding-left: 0.3rem; + padding-right: 0.3rem; + background-color: $primary; +} diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss index 6bf8e0766..ef4a35569 100644 --- a/ui/src/Styles/DarkTheme.scss +++ b/ui/src/Styles/DarkTheme.scss @@ -92,8 +92,8 @@ $bg-focused: darken($blue, 5%); $components-date-range-today-color: $white; $components-date-range-sub-color: $white; -$input-range-neutral-color: $gray-300; -$input-range-neutral-light-color: $secondary; +$input-range-track-background: $secondary; +$input-range-thumb-font-color: $white; $color-default: #708090; diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss index a9f31f404..3d22327d0 100644 --- a/ui/src/Styles/LightTheme.scss +++ b/ui/src/Styles/LightTheme.scss @@ -74,8 +74,8 @@ $bg-focused: lighten($blue, 5%); $components-date-range-today-color: $black; $components-date-range-sub-color: $black; -$input-range-neutral-color: $dark; -$input-range-neutral-light-color: $gray-400; +$input-range-track-background: $gray-400; +$input-range-thumb-font-color: $white; $color-default: #708090;