From d37707292077a52770936afaaf75ff08e0b94154 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 7 May 2025 12:28:57 +0300 Subject: [PATCH 001/154] add redis-ui --- package.json | 3 + yarn.lock | 552 ++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 553 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index f7310ef097..9ac75d3efb 100644 --- a/package.json +++ b/package.json @@ -234,6 +234,9 @@ "dependencies": { "@elastic/datemath": "^5.0.3", "@elastic/eui": "34.6.0", + "@redislabsdev/redis-ui-components": "^37.0.0", + "@redislabsdev/redis-ui-icons": "^4.16.1", + "@redislabsdev/redis-ui-styles": "^11.0.1", "@reduxjs/toolkit": "^1.6.2", "@stablelib/snappy": "^1.0.2", "ajv": "^8.17.1", diff --git a/yarn.lock b/yarn.lock index d5da96da3d..b8c82ae8d6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1434,6 +1434,33 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@floating-ui/core@^1.7.0": + version "1.7.0" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.7.0.tgz#1aff27a993ea1b254a586318c29c3b16ea0f4d0a" + integrity sha512-FRdBLykrPPA6P76GGGqlex/e7fbe0F1ykgxHYNXQsH/iTEtjMj/f9bpY5oQqbjt5VgZvgz/uKXbGuROijh3VLA== + dependencies: + "@floating-ui/utils" "^0.2.9" + +"@floating-ui/dom@^1.0.0": + version "1.7.0" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.7.0.tgz#f9f83ee4fee78ac23ad9e65b128fc11a27857532" + integrity sha512-lGTor4VlXcesUMh1cupTUTDoCxMb0V6bm3CnxHzQcw8Eaf1jQbgQX4i02fYgT0vJ82tb5MZ4CZk1LRGkktJCzg== + dependencies: + "@floating-ui/core" "^1.7.0" + "@floating-ui/utils" "^0.2.9" + +"@floating-ui/react-dom@^2.0.0": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31" + integrity sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A== + dependencies: + "@floating-ui/dom" "^1.0.0" + +"@floating-ui/utils@^0.2.9": + version "0.2.9" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.9.tgz#50dea3616bc8191fb8e112283b49eaff03e78429" + integrity sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg== + "@gar/promisify@^1.1.3": version "1.1.3" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" @@ -1929,6 +1956,471 @@ resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570" integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw== +"@radix-ui/number@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.1.1.tgz#7b2c9225fbf1b126539551f5985769d0048d9090" + integrity sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g== + +"@radix-ui/primitive@1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.2.tgz#83f415c4425f21e3d27914c12b3272a32e3dae65" + integrity sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA== + +"@radix-ui/react-arrow@1.1.6": + version "1.1.6" + resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.1.6.tgz#4b460fdbc1ac097a4964e04ca404c25c2f6d7d3f" + integrity sha512-2JMfHJf/eVnwq+2dewT3C0acmCWD3XiVA1Da+jTDqo342UlU13WvXtqHhG+yJw5JeQmu4ue2eMy6gcEArLBlcw== + dependencies: + "@radix-ui/react-primitive" "2.1.2" + +"@radix-ui/react-checkbox@^1.0.3": + version "1.3.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.3.1.tgz#c5c978ed49dcc8a81a8126bde9d547c7b928285b" + integrity sha512-xTaLKAO+XXMPK/BpVTSaAAhlefmvMSACjIhK9mGsImvX2ljcTDm8VGR1CuS1uYcNdR5J+oiOhoJZc5un6bh3VQ== + dependencies: + "@radix-ui/primitive" "1.1.2" + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-context" "1.1.2" + "@radix-ui/react-presence" "1.1.4" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-use-controllable-state" "1.2.2" + "@radix-ui/react-use-previous" "1.1.1" + "@radix-ui/react-use-size" "1.1.1" + +"@radix-ui/react-collapsible@^1.0.3": + version "1.1.10" + resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.1.10.tgz#a0e75e5cd9666e8c8100d539a9f57c50d113e38b" + integrity sha512-O2mcG3gZNkJ/Ena34HurA3llPOEA/M4dJtIRMa6y/cknRDC8XY5UZBInKTsUwW5cUue9A4k0wi1XU5fKBzKe1w== + dependencies: + "@radix-ui/primitive" "1.1.2" + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-context" "1.1.2" + "@radix-ui/react-id" "1.1.1" + "@radix-ui/react-presence" "1.1.4" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-use-controllable-state" "1.2.2" + "@radix-ui/react-use-layout-effect" "1.1.1" + +"@radix-ui/react-collection@1.1.6": + version "1.1.6" + resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.6.tgz#fecf74475e4660ee99c7eb1ebfa5ccfb1a219fe4" + integrity sha512-PbhRFK4lIEw9ADonj48tiYWzkllz81TM7KVYyyMMw2cwHO7D5h4XKEblL8NlaRisTK3QTe6tBEhDccFUryxHBQ== + dependencies: + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-context" "1.1.2" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-slot" "1.2.2" + +"@radix-ui/react-compose-refs@1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz#a2c4c47af6337048ee78ff6dc0d090b390d2bb30" + integrity sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg== + +"@radix-ui/react-context@1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.2.tgz#61628ef269a433382c364f6f1e3788a6dc213a36" + integrity sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA== + +"@radix-ui/react-dialog@^1.0.5": + version "1.1.13" + resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.13.tgz#8c868a97ec70765efb125fd48708c9993c7ae683" + integrity sha512-ARFmqUyhIVS3+riWzwGTe7JLjqwqgnODBUZdqpWar/z1WFs9z76fuOs/2BOWCR+YboRn4/WN9aoaGVwqNRr8VA== + dependencies: + "@radix-ui/primitive" "1.1.2" + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-context" "1.1.2" + "@radix-ui/react-dismissable-layer" "1.1.9" + "@radix-ui/react-focus-guards" "1.1.2" + "@radix-ui/react-focus-scope" "1.1.6" + "@radix-ui/react-id" "1.1.1" + "@radix-ui/react-portal" "1.1.8" + "@radix-ui/react-presence" "1.1.4" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-slot" "1.2.2" + "@radix-ui/react-use-controllable-state" "1.2.2" + aria-hidden "^1.2.4" + react-remove-scroll "^2.6.3" + +"@radix-ui/react-direction@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.1.tgz#39e5a5769e676c753204b792fbe6cf508e550a14" + integrity sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw== + +"@radix-ui/react-dismissable-layer@1.1.9": + version "1.1.9" + resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.9.tgz#46e025ba6e6f403677e22fbb7d99b63cf7b32bca" + integrity sha512-way197PiTvNp+WBP7svMJasHl+vibhWGQDb6Mgf5mhEWJkgb85z7Lfl9TUdkqpWsf8GRNmoopx9ZxCyDzmgRMQ== + dependencies: + "@radix-ui/primitive" "1.1.2" + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-use-callback-ref" "1.1.1" + "@radix-ui/react-use-escape-keydown" "1.1.1" + +"@radix-ui/react-dropdown-menu@^2.0.4": + version "2.1.14" + resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.14.tgz#94033ab8e2e905b9595085701cfc5d75a155c7b6" + integrity sha512-lzuyNjoWOoaMFE/VC5FnAAYM16JmQA8ZmucOXtlhm2kKR5TSU95YLAueQ4JYuRmUJmBvSqXaVFGIfuukybwZJQ== + dependencies: + "@radix-ui/primitive" "1.1.2" + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-context" "1.1.2" + "@radix-ui/react-id" "1.1.1" + "@radix-ui/react-menu" "2.1.14" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-use-controllable-state" "1.2.2" + +"@radix-ui/react-focus-guards@1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz#4ec9a7e50925f7fb661394460045b46212a33bed" + integrity sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA== + +"@radix-ui/react-focus-scope@1.1.6": + version "1.1.6" + resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.6.tgz#a265c5f2c6fa4365cb16bdf4fee69e36b62f728a" + integrity sha512-r9zpYNUQY+2jWHWZGyddQLL9YHkM/XvSFHVcWs7bdVuxMAnCwTAuy6Pf47Z4nw7dYcUou1vg/VgjjrrH03VeBw== + dependencies: + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-use-callback-ref" "1.1.1" + +"@radix-ui/react-id@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.1.tgz#1404002e79a03fe062b7e3864aa01e24bd1471f7" + integrity sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg== + dependencies: + "@radix-ui/react-use-layout-effect" "1.1.1" + +"@radix-ui/react-menu@2.1.14": + version "2.1.14" + resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.1.14.tgz#613804ed5e94a052ade694775a27d47220d1dd26" + integrity sha512-0zSiBAIFq9GSKoSH5PdEaQeRB3RnEGxC+H2P0egtnKoKKLNBH8VBHyVO6/jskhjAezhOIplyRUj7U2lds9A+Yg== + dependencies: + "@radix-ui/primitive" "1.1.2" + "@radix-ui/react-collection" "1.1.6" + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-context" "1.1.2" + "@radix-ui/react-direction" "1.1.1" + "@radix-ui/react-dismissable-layer" "1.1.9" + "@radix-ui/react-focus-guards" "1.1.2" + "@radix-ui/react-focus-scope" "1.1.6" + "@radix-ui/react-id" "1.1.1" + "@radix-ui/react-popper" "1.2.6" + "@radix-ui/react-portal" "1.1.8" + "@radix-ui/react-presence" "1.1.4" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-roving-focus" "1.1.9" + "@radix-ui/react-slot" "1.2.2" + "@radix-ui/react-use-callback-ref" "1.1.1" + aria-hidden "^1.2.4" + react-remove-scroll "^2.6.3" + +"@radix-ui/react-popover@^1.0.3": + version "1.1.13" + resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.1.13.tgz#100eaf48f15909bd63ade0c6f8bc786ec062bc59" + integrity sha512-84uqQV3omKDR076izYgcha6gdpN8m3z6w/AeJ83MSBJYVG/AbOHdLjAgsPZkeC/kt+k64moXFCnio8BbqXszlw== + dependencies: + "@radix-ui/primitive" "1.1.2" + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-context" "1.1.2" + "@radix-ui/react-dismissable-layer" "1.1.9" + "@radix-ui/react-focus-guards" "1.1.2" + "@radix-ui/react-focus-scope" "1.1.6" + "@radix-ui/react-id" "1.1.1" + "@radix-ui/react-popper" "1.2.6" + "@radix-ui/react-portal" "1.1.8" + "@radix-ui/react-presence" "1.1.4" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-slot" "1.2.2" + "@radix-ui/react-use-controllable-state" "1.2.2" + aria-hidden "^1.2.4" + react-remove-scroll "^2.6.3" + +"@radix-ui/react-popper@1.2.6": + version "1.2.6" + resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.2.6.tgz#227d2882f19d80933796525c7bbd0d3ddf699ac0" + integrity sha512-7iqXaOWIjDBfIG7aq8CUEeCSsQMLFdn7VEE8TaFz704DtEzpPHR7w/uuzRflvKgltqSAImgcmxQ7fFX3X7wasg== + dependencies: + "@floating-ui/react-dom" "^2.0.0" + "@radix-ui/react-arrow" "1.1.6" + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-context" "1.1.2" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-use-callback-ref" "1.1.1" + "@radix-ui/react-use-layout-effect" "1.1.1" + "@radix-ui/react-use-rect" "1.1.1" + "@radix-ui/react-use-size" "1.1.1" + "@radix-ui/rect" "1.1.1" + +"@radix-ui/react-portal@1.1.8": + version "1.1.8" + resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.8.tgz#0181e85bc0d8c67229dd8cf198204f5f4cc7c09c" + integrity sha512-hQsTUIn7p7fxCPvao/q6wpbxmCwgLrlz+nOrJgC+RwfZqWY/WN+UMqkXzrtKbPrF82P43eCTl3ekeKuyAQbFeg== + dependencies: + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-use-layout-effect" "1.1.1" + +"@radix-ui/react-presence@1.1.4": + version "1.1.4" + resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.4.tgz#253ac0ad4946c5b4a9c66878335f5cf07c967ced" + integrity sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA== + dependencies: + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-use-layout-effect" "1.1.1" + +"@radix-ui/react-primitive@2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.1.2.tgz#03f64f957719c761d22c2f92cc43ffb64bd42cc8" + integrity sha512-uHa+l/lKfxuDD2zjN/0peM/RhhSmRjr5YWdk/37EnSv1nJ88uvG85DPexSm8HdFQROd2VdERJ6ynXbkCFi+APw== + dependencies: + "@radix-ui/react-slot" "1.2.2" + +"@radix-ui/react-progress@^1.1.0": + version "1.1.6" + resolved "https://registry.yarnpkg.com/@radix-ui/react-progress/-/react-progress-1.1.6.tgz#bec8368fffe28446895be48a4b85f71eb91709f6" + integrity sha512-QzN9a36nKk2eZKMf9EBCia35x3TT+SOgZuzQBVIHyRrmYYi73VYBRK3zKwdJ6az/F5IZ6QlacGJBg7zfB85liA== + dependencies: + "@radix-ui/react-context" "1.1.2" + "@radix-ui/react-primitive" "2.1.2" + +"@radix-ui/react-radio-group@^1.1.2": + version "1.3.6" + resolved "https://registry.yarnpkg.com/@radix-ui/react-radio-group/-/react-radio-group-1.3.6.tgz#36f7bdc64b10212fa029badc487b91804b0b34ce" + integrity sha512-1tfTAqnYZNVwSpFhCT273nzK8qGBReeYnNTPspCggqk1fvIrfVxJekIuBFidNivzpdiMqDwVGnQvHqXrRPM4Og== + dependencies: + "@radix-ui/primitive" "1.1.2" + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-context" "1.1.2" + "@radix-ui/react-direction" "1.1.1" + "@radix-ui/react-presence" "1.1.4" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-roving-focus" "1.1.9" + "@radix-ui/react-use-controllable-state" "1.2.2" + "@radix-ui/react-use-previous" "1.1.1" + "@radix-ui/react-use-size" "1.1.1" + +"@radix-ui/react-roving-focus@1.1.9": + version "1.1.9" + resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.9.tgz#37fcacb7dfcc9ea45401b2dd07bd97ccbb8911b2" + integrity sha512-ZzrIFnMYHHCNqSNCsuN6l7wlewBEq0O0BCSBkabJMFXVO51LRUTq71gLP1UxFvmrXElqmPjA5VX7IqC9VpazAQ== + dependencies: + "@radix-ui/primitive" "1.1.2" + "@radix-ui/react-collection" "1.1.6" + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-context" "1.1.2" + "@radix-ui/react-direction" "1.1.1" + "@radix-ui/react-id" "1.1.1" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-use-callback-ref" "1.1.1" + "@radix-ui/react-use-controllable-state" "1.2.2" + +"@radix-ui/react-select@^2.1.0": + version "2.2.4" + resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-2.2.4.tgz#56eeffd9d5ee23392bba4635e7ae3f381ada793d" + integrity sha512-/OOm58Gil4Ev5zT8LyVzqfBcij4dTHYdeyuF5lMHZ2bIp0Lk9oETocYiJ5QC0dHekEQnK6L/FNJCceeb4AkZ6Q== + dependencies: + "@radix-ui/number" "1.1.1" + "@radix-ui/primitive" "1.1.2" + "@radix-ui/react-collection" "1.1.6" + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-context" "1.1.2" + "@radix-ui/react-direction" "1.1.1" + "@radix-ui/react-dismissable-layer" "1.1.9" + "@radix-ui/react-focus-guards" "1.1.2" + "@radix-ui/react-focus-scope" "1.1.6" + "@radix-ui/react-id" "1.1.1" + "@radix-ui/react-popper" "1.2.6" + "@radix-ui/react-portal" "1.1.8" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-slot" "1.2.2" + "@radix-ui/react-use-callback-ref" "1.1.1" + "@radix-ui/react-use-controllable-state" "1.2.2" + "@radix-ui/react-use-layout-effect" "1.1.1" + "@radix-ui/react-use-previous" "1.1.1" + "@radix-ui/react-visually-hidden" "1.2.2" + aria-hidden "^1.2.4" + react-remove-scroll "^2.6.3" + +"@radix-ui/react-slot@1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.2.2.tgz#18e6533e778a2051edc2ad0773da8e22f03f626a" + integrity sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ== + dependencies: + "@radix-ui/react-compose-refs" "1.1.2" + +"@radix-ui/react-switch@^1.1.2": + version "1.2.4" + resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.2.4.tgz#3318007c4147df69c04141aa7a77c034baea7169" + integrity sha512-yZCky6XZFnR7pcGonJkr9VyNRu46KcYAbyg1v/gVVCZUr8UJ4x+RpncC27hHtiZ15jC+3WS8Yg/JSgyIHnYYsQ== + dependencies: + "@radix-ui/primitive" "1.1.2" + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-context" "1.1.2" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-use-controllable-state" "1.2.2" + "@radix-ui/react-use-previous" "1.1.1" + "@radix-ui/react-use-size" "1.1.1" + +"@radix-ui/react-tabs@^1.0.3": + version "1.1.11" + resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.1.11.tgz#9dc002ea6f8ad6830bc20f349afdc57c6039009c" + integrity sha512-4FiKSVoXqPP/KfzlB7lwwqoFV6EPwkrrqGp9cUYXjwDYHhvpnqq79P+EPHKcdoTE7Rl8w/+6s9rTlsfXHES9GA== + dependencies: + "@radix-ui/primitive" "1.1.2" + "@radix-ui/react-context" "1.1.2" + "@radix-ui/react-direction" "1.1.1" + "@radix-ui/react-id" "1.1.1" + "@radix-ui/react-presence" "1.1.4" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-roving-focus" "1.1.9" + "@radix-ui/react-use-controllable-state" "1.2.2" + +"@radix-ui/react-toggle@^1.0.3": + version "1.1.8" + resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-1.1.8.tgz#49966facbf94aa7d51293790c78c67c1f7487aef" + integrity sha512-hrpa59m3zDnsa35LrTOH5s/a3iGv/VD+KKQjjiCTo/W4r0XwPpiWQvAv6Xl1nupSoaZeNNxW6sJH9ZydsjKdYQ== + dependencies: + "@radix-ui/primitive" "1.1.2" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-use-controllable-state" "1.2.2" + +"@radix-ui/react-tooltip@^1.0.4": + version "1.2.6" + resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.2.6.tgz#2311da593951f85d36cd45f4025816bf6feda87e" + integrity sha512-zYb+9dc9tkoN2JjBDIIPLQtk3gGyz8FMKoqYTb8EMVQ5a5hBcdHPECrsZVI4NpPAUOixhkoqg7Hj5ry5USowfA== + dependencies: + "@radix-ui/primitive" "1.1.2" + "@radix-ui/react-compose-refs" "1.1.2" + "@radix-ui/react-context" "1.1.2" + "@radix-ui/react-dismissable-layer" "1.1.9" + "@radix-ui/react-id" "1.1.1" + "@radix-ui/react-popper" "1.2.6" + "@radix-ui/react-portal" "1.1.8" + "@radix-ui/react-presence" "1.1.4" + "@radix-ui/react-primitive" "2.1.2" + "@radix-ui/react-slot" "1.2.2" + "@radix-ui/react-use-controllable-state" "1.2.2" + "@radix-ui/react-visually-hidden" "1.2.2" + +"@radix-ui/react-use-callback-ref@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz#62a4dba8b3255fdc5cc7787faeac1c6e4cc58d40" + integrity sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg== + +"@radix-ui/react-use-controllable-state@1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz#905793405de57d61a439f4afebbb17d0645f3190" + integrity sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg== + dependencies: + "@radix-ui/react-use-effect-event" "0.0.2" + "@radix-ui/react-use-layout-effect" "1.1.1" + +"@radix-ui/react-use-effect-event@0.0.2": + version "0.0.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz#090cf30d00a4c7632a15548512e9152217593907" + integrity sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA== + dependencies: + "@radix-ui/react-use-layout-effect" "1.1.1" + +"@radix-ui/react-use-escape-keydown@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz#b3fed9bbea366a118f40427ac40500aa1423cc29" + integrity sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g== + dependencies: + "@radix-ui/react-use-callback-ref" "1.1.1" + +"@radix-ui/react-use-layout-effect@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz#0c4230a9eed49d4589c967e2d9c0d9d60a23971e" + integrity sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ== + +"@radix-ui/react-use-previous@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz#1a1ad5568973d24051ed0af687766f6c7cb9b5b5" + integrity sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ== + +"@radix-ui/react-use-rect@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz#01443ca8ed071d33023c1113e5173b5ed8769152" + integrity sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w== + dependencies: + "@radix-ui/rect" "1.1.1" + +"@radix-ui/react-use-size@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz#6de276ffbc389a537ffe4316f5b0f24129405b37" + integrity sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ== + dependencies: + "@radix-ui/react-use-layout-effect" "1.1.1" + +"@radix-ui/react-visually-hidden@1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.2.tgz#aa6d0f95b0cd50f08b02393d25132f52ca7861dc" + integrity sha512-ORCmRUbNiZIv6uV5mhFrhsIKw4UX/N3syZtyqvry61tbGm4JlgQuSn0hk5TwCARsCjkcnuRkSdCE3xfb+ADHew== + dependencies: + "@radix-ui/react-primitive" "2.1.2" + +"@radix-ui/rect@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.1.tgz#78244efe12930c56fd255d7923865857c41ac8cb" + integrity sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw== + +"@react-hook/latest@^1.0.2": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@react-hook/latest/-/latest-1.0.3.tgz#c2d1d0b0af8b69ec6e2b3a2412ba0768ac82db80" + integrity sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg== + +"@react-hook/passive-layout-effect@^1.2.0": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz#c06dac2d011f36d61259aa1c6df4f0d5e28bc55e" + integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg== + +"@react-hook/resize-observer@^2.0.2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@react-hook/resize-observer/-/resize-observer-2.0.2.tgz#f49fe4e6b9de86c583d136df7fae430684528092" + integrity sha512-tzKKzxNpfE5TWmxuv+5Ae3IF58n0FQgQaWJmcbYkjXTRZATXxClnTprQ2uuYygYTpu1pqbBskpwMpj6jpT1djA== + dependencies: + "@react-hook/latest" "^1.0.2" + "@react-hook/passive-layout-effect" "^1.2.0" + +"@redislabsdev/redis-ui-components@^37.0.0": + version "37.0.0" + resolved "https://npm.pkg.github.com/download/@redislabsdev/redis-ui-components/37.0.0/e3de3f5419a48e2bd10fcb26e9198966645bc6f0#e3de3f5419a48e2bd10fcb26e9198966645bc6f0" + integrity sha512-k7NTOaVUTCDZxVSgBuWtRyOMJkrDyGApCUUew2B7h3fMP702eoE4X4pNwi/DdpP9CDEnu/P7s8eruQq+jKdeVg== + dependencies: + "@radix-ui/react-checkbox" "^1.0.3" + "@radix-ui/react-collapsible" "^1.0.3" + "@radix-ui/react-dialog" "^1.0.5" + "@radix-ui/react-dropdown-menu" "^2.0.4" + "@radix-ui/react-popover" "^1.0.3" + "@radix-ui/react-progress" "^1.1.0" + "@radix-ui/react-radio-group" "^1.1.2" + "@radix-ui/react-select" "^2.1.0" + "@radix-ui/react-switch" "^1.1.2" + "@radix-ui/react-tabs" "^1.0.3" + "@radix-ui/react-toggle" "^1.0.3" + "@radix-ui/react-tooltip" "^1.0.4" + "@react-hook/resize-observer" "^2.0.2" + react-children-utilities "2.9.0" + react-day-picker "^8.6.0" + react-hotkeys-hook "^4.6.1" + react-loading-skeleton "^3.3.1" + react-toastify "^9.1.3" + type-fest "^3.13.1" + virtua "^0.36.3" + +"@redislabsdev/redis-ui-icons@^4.16.1": + version "4.16.1" + resolved "https://npm.pkg.github.com/download/@redislabsdev/redis-ui-icons/4.16.1/b27dfe9ab0356f049bd260bd2befda220393ce86#b27dfe9ab0356f049bd260bd2befda220393ce86" + integrity sha512-+j9J70nwRSABWMmEi9d+xM07/pwOissBib26HUDkuJlieNO0kptNw4hHZoI1jB7R7EiAIq3D+FGFDe2ri+FAGw== + +"@redislabsdev/redis-ui-styles@^11.0.1": + version "11.0.1" + resolved "https://npm.pkg.github.com/download/@redislabsdev/redis-ui-styles/11.0.1/4479aa97609e2602c5d57457d40b8d985c0f7268#4479aa97609e2602c5d57457d40b8d985c0f7268" + integrity sha512-k5K0EbYhimbocmf4ig5fEMn2puIY0cwKCBWoyd4Px8LH3SCJ9wXpj54WpbZDt92ZvbsxlOLhkaiMimd+xoGvQQ== + dependencies: + color-alpha "^2.0.0" + "@reduxjs/toolkit@^1.6.2": version "1.9.5" resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.5.tgz#d3987849c24189ca483baa7aa59386c8e52077c4" @@ -3797,7 +4289,7 @@ argparse@^2.0.1: resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38" integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== -aria-hidden@^1.2.2: +aria-hidden@^1.2.2, aria-hidden@^1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.4.tgz#b78e383fdbc04d05762c78b4a25a501e736c4522" integrity sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A== @@ -4679,6 +5171,13 @@ collect-v8-coverage@^1.0.0: resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz#c0b29bcd33bcd0779a1344c2136051e6afd3d9e9" integrity sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q== +color-alpha@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/color-alpha/-/color-alpha-2.0.0.tgz#ffaf6661022a2cb7ef566c224f57fc3d6534ae64" + integrity sha512-AFicJNV27HMw2l3KZPngmoL9euIe+7YDVprQHuJbChyh1x/R4AjKdL9WKvfE5/nXIok+WfYhm+I6GsXaFgB7Xg== + dependencies: + color-parse "^2.0.0" + color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" @@ -4698,11 +5197,23 @@ color-name@1.1.3: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== +color-name@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/color-name/-/color-name-2.0.0.tgz#03ff6b1b5aec9bb3cf1ed82400c2790dfcd01d2d" + integrity sha512-SbtvAMWvASO5TE2QP07jHBMXKafgdZz8Vrsrn96fiL+O92/FN/PLARzUW5sKt013fjAprK2d2iCn2hk2Xb5oow== + color-name@~1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +color-parse@^2.0.0: + version "2.0.2" + resolved "https://registry.yarnpkg.com/color-parse/-/color-parse-2.0.2.tgz#37b46930424924060988edf25b24e6ffb4a1dc3f" + integrity sha512-eCtOz5w5ttWIUcaKLiktF+DxZO1R9KLNY/xhbV6CkhM7sR3GhVghmt6X6yOnzeaM24po+Z9/S1apbXMwA3Iepw== + dependencies: + color-name "^2.0.0" + colord@^2.9.3: version "2.9.3" resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43" @@ -11226,6 +11737,11 @@ react-beautiful-dnd@^13.0.0: redux "^4.0.4" use-memo-one "^1.1.1" +react-children-utilities@2.9.0: + version "2.9.0" + resolved "https://registry.yarnpkg.com/react-children-utilities/-/react-children-utilities-2.9.0.tgz#03deea009fc9fa1857a14fb351afa68d870f646f" + integrity sha512-B3enhwcibIziobkMVccLd+6uIRoiCC9OZ1nR2B5sFCTnUYoGOCqgPOWUL+IC4S8IYaaN5AeF+SS0X1wernPdZA== + react-clientside-effect@^1.2.7: version "1.2.7" resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.7.tgz#78eb62e3be36208d4d8d5b2668ae630a32deca73" @@ -11241,6 +11757,11 @@ react-contenteditable@^3.3.5: fast-deep-equal "^3.1.3" prop-types "^15.7.1" +react-day-picker@^8.6.0: + version "8.10.1" + resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-8.10.1.tgz#4762ec298865919b93ec09ba69621580835b8e80" + integrity sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA== + react-dom@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" @@ -11309,6 +11830,11 @@ react-hotkeys-hook@^3.3.1: dependencies: hotkeys-js "3.9.4" +react-hotkeys-hook@^4.6.1: + version "4.6.2" + resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-4.6.2.tgz#26dd20f59d23204814f223d5c5f3979a3fe83c88" + integrity sha512-FmP+ZriY3EG59Ug/lxNfrObCnW9xQShgk7Nb83+CkpfkcCpfS95ydv+E9JuXA5cp8KtskU7LGlIARpkc92X22Q== + react-input-autosize@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2" @@ -11355,6 +11881,11 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-loading-skeleton@^3.3.1: + version "3.5.0" + resolved "https://registry.yarnpkg.com/react-loading-skeleton/-/react-loading-skeleton-3.5.0.tgz#da2090355b4dedcad5c53cb3f0ed364e3a76d6ca" + integrity sha512-gxxSyLbrEAdXTKgfbpBEFZCO/P153DnqSCQau2+o6lNy1jgMRr2MmRmOzMmyrwSaSYLRB8g7b0waYPmUjz7IhQ== + react-merge-refs@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06" @@ -11402,7 +11933,7 @@ react-remove-scroll-bar@^2.3.7: react-style-singleton "^2.2.2" tslib "^2.0.0" -react-remove-scroll@^2.6.0: +react-remove-scroll@^2.6.0, react-remove-scroll@^2.6.3: version "2.6.3" resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz#df02cde56d5f2731e058531f8ffd7f9adec91ac2" integrity sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ== @@ -11458,6 +11989,13 @@ react-style-singleton@^2.2.1, react-style-singleton@^2.2.2, react-style-singleto get-nonce "^1.0.0" tslib "^2.0.0" +react-toastify@^9.1.3: + version "9.1.3" + resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.1.3.tgz#1e798d260d606f50e0fab5ee31daaae1d628c5ff" + integrity sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg== + dependencies: + clsx "^1.1.1" + react-virtualized-auto-sizer@^1.0.2, react-virtualized-auto-sizer@^1.0.6: version "1.0.15" resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.15.tgz#84558bcab61a625d13ec37876639bb09c5a3ec0b" @@ -13333,6 +13871,11 @@ type-fest@^2.17.0, type-fest@^2.19.0: resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b" integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA== +type-fest@^3.13.1: + version "3.13.1" + resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-3.13.1.tgz#bb744c1f0678bea7543a2d1ec24e83e68e8c8706" + integrity sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g== + typed-array-buffer@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3" @@ -13835,6 +14378,11 @@ vfile@^5.0.0: unist-util-stringify-position "^3.0.0" vfile-message "^3.0.0" +virtua@^0.36.3: + version "0.36.3" + resolved "https://registry.yarnpkg.com/virtua/-/virtua-0.36.3.tgz#1adb458aafa453bba4403cc3b7e16d2470f3b05e" + integrity sha512-W5LovCjIJPT7plfka9r6XZIlsHxNbEyw9m9uTKdlB+R9+AoldsT+RFVW2/iVqHU8pmHv8csc3yw25A77OD5wwg== + vite-bundle-visualizer@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/vite-bundle-visualizer/-/vite-bundle-visualizer-1.0.1.tgz#56dd88942c9415921213d47f0e78274325339c78" From 3a3696b23fed3109bb9e0044d8d1bfd9ee5fb37a Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 7 May 2025 12:49:45 +0300 Subject: [PATCH 002/154] add forms/button --- .../components/base/forms/buttons/Button.tsx | 65 +++++++++++++++++++ .../base/forms/buttons/DestructiveButton.tsx | 7 ++ .../base/forms/buttons/OutlineButton.tsx | 7 ++ .../base/forms/buttons/PrimaryButton.tsx | 7 ++ .../base/forms/buttons/SecondaryButton.tsx | 22 +++++++ .../base/forms/buttons/button.styles.ts | 34 ++++++++++ .../components/base/forms/buttons/index.tsx | 6 ++ 7 files changed, 148 insertions(+) create mode 100644 redisinsight/ui/src/components/base/forms/buttons/Button.tsx create mode 100644 redisinsight/ui/src/components/base/forms/buttons/DestructiveButton.tsx create mode 100644 redisinsight/ui/src/components/base/forms/buttons/OutlineButton.tsx create mode 100644 redisinsight/ui/src/components/base/forms/buttons/PrimaryButton.tsx create mode 100644 redisinsight/ui/src/components/base/forms/buttons/SecondaryButton.tsx create mode 100644 redisinsight/ui/src/components/base/forms/buttons/button.styles.ts create mode 100644 redisinsight/ui/src/components/base/forms/buttons/index.tsx diff --git a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx new file mode 100644 index 0000000000..d7f1786ff4 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx @@ -0,0 +1,65 @@ +import { Button } from '@redislabsdev/redis-ui-components' +import React from 'react' +import { LoaderLargeIcon } from '@redislabsdev/redis-ui-icons/multicolor' +import { + BaseButtonProps, + IconContainer, + IconSizes, +} from 'uiSrc/components/base/forms/buttons/button.styles' + +export const BaseButton = ({ + children, + icon, + iconSide = 'left', + loading, + ...props +}: BaseButtonProps) => ( + +) + +export type ButtonIconProps = Pick< + BaseButtonProps, + 'icon' | 'iconSide' | 'loading' | 'size' +> & { + side: 'left' | 'right' +} + +const ButtonIcon = ({ + side, + icon, + iconSide, + loading, + size = 'medium', +}: ButtonIconProps) => { + if (iconSide !== side) { + return null + } + let renderIcon = icon + if (loading) { + renderIcon = LoaderLargeIcon + } + if (!renderIcon) { + return null + } + return ( + + + + ) +} diff --git a/redisinsight/ui/src/components/base/forms/buttons/DestructiveButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/DestructiveButton.tsx new file mode 100644 index 0000000000..011181b531 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/buttons/DestructiveButton.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import { ButtonProps } from 'uiSrc/components/base/forms/buttons/button.styles' +import { BaseButton } from 'uiSrc/components/base/forms/buttons/Button' + +export const DestructiveButton = (props: ButtonProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/forms/buttons/OutlineButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/OutlineButton.tsx new file mode 100644 index 0000000000..4a81e796b3 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/buttons/OutlineButton.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import { OutlineButtonProps } from 'uiSrc/components/base/forms/buttons/button.styles' +import { SecondaryButton } from 'uiSrc/components/base/forms/buttons/SecondaryButton' + +export const OutlineButton = (props: OutlineButtonProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/forms/buttons/PrimaryButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/PrimaryButton.tsx new file mode 100644 index 0000000000..1caae3167d --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/buttons/PrimaryButton.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import { BaseButton } from 'uiSrc/components/base/forms/buttons/Button' +import { ButtonProps } from 'uiSrc/components/base/forms/buttons/button.styles' + +export const PrimaryButton = (props: ButtonProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/forms/buttons/SecondaryButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/SecondaryButton.tsx new file mode 100644 index 0000000000..0a3a1fda63 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/buttons/SecondaryButton.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { + BaseButtonProps, + SecondaryButtonProps, +} from 'uiSrc/components/base/forms/buttons/button.styles' +import { BaseButton } from 'uiSrc/components/base/forms/buttons/Button' + +export const SecondaryButton = ({ + filled, + inverted, + ...props +}: SecondaryButtonProps) => { + let variant: BaseButtonProps['variant'] = 'secondary-fill' + + if (filled === false) { + variant = 'secondary-ghost' + } + if (inverted === true) { + variant = 'secondary-invert' + } + return +} diff --git a/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts b/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts new file mode 100644 index 0000000000..8ef64959ae --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts @@ -0,0 +1,34 @@ +import React from 'react' +import { Button } from '@redislabsdev/redis-ui-components' +import { IconType } from '@redislabsdev/redis-ui-icons' +import styled from 'styled-components' + +export type BaseButtonProps = React.ComponentProps & { + icon?: IconType + iconSide?: 'left' | 'right' + loading?: boolean +} +export type ButtonProps = Omit +export type SecondaryButtonProps = ButtonProps & { + filled?: boolean + inverted?: boolean +} +export type OutlineButtonProps = Omit< + SecondaryButtonProps, + 'filled' | 'inverted' +> +export const IconSizes = { + small: '16px', + medium: '20px', + large: '24px', +} + +export const IconContainer = styled.span<{ + left?: boolean + right?: boolean + children: React.ReactNode +}>` + display: inline-block; + margin-right: ${(props) => (props.left ? '5px' : '0')}; + margin-left: ${(props) => (props.right ? '5px' : '0')}; +` diff --git a/redisinsight/ui/src/components/base/forms/buttons/index.tsx b/redisinsight/ui/src/components/base/forms/buttons/index.tsx new file mode 100644 index 0000000000..5c9bcbb014 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/buttons/index.tsx @@ -0,0 +1,6 @@ +import { SecondaryButton } from 'uiSrc/components/base/forms/buttons/SecondaryButton' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons/PrimaryButton' +import { OutlineButton } from 'uiSrc/components/base/forms/buttons/OutlineButton' +import { DestructiveButton } from 'uiSrc/components/base/forms/buttons/DestructiveButton' + +export { PrimaryButton, SecondaryButton, DestructiveButton, OutlineButton } From ba385ab0718851f5e3024a563d128b348e59417a Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 7 May 2025 12:51:55 +0300 Subject: [PATCH 003/154] run format --- .../DatabaseListHeader.tsx | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx b/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx index 44d61c5a4f..7c50976a86 100644 --- a/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx +++ b/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx @@ -13,11 +13,11 @@ import cx from 'classnames' import ColumnsIcon from 'uiSrc/assets/img/icons/columns.svg?react' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' -import { instancesSelector, setShownColumns } from 'uiSrc/slices/instances/instances' import { - OAuthSocialAction, - OAuthSocialSource, -} from 'uiSrc/slices/interfaces' + instancesSelector, + setShownColumns, +} from 'uiSrc/slices/instances/instances' +import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces' import PromoLink from 'uiSrc/components/promo-link/PromoLink' import { FeatureFlagComponent, OAuthSsoHandlerDialog } from 'uiSrc/components' @@ -28,7 +28,11 @@ import { contentSelector } from 'uiSrc/slices/content/create-redis-buttons' import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features' import { getContentByFeature } from 'uiSrc/utils/content' import { ThemeContext } from 'uiSrc/contexts/themeContext' -import { COLUMN_FIELD_NAME_MAP, DatabaseListColumn, FeatureFlags } from 'uiSrc/constants' +import { + COLUMN_FIELD_NAME_MAP, + DatabaseListColumn, + FeatureFlags, +} from 'uiSrc/constants' import SearchDatabasesList from '../search-databases-list' import styles from './styles.module.scss' @@ -113,8 +117,8 @@ const DatabaseListHeader = ({ onAddInstance }: Props) => { event: TelemetryEvent.DATABASE_LIST_COLUMNS_CLICKED, eventData: { shown, - hidden - } + hidden, + }, }) } @@ -222,7 +226,7 @@ const DatabaseListHeader = ({ onAddInstance }: Props) => { anchorPosition="downLeft" isOpen={columnsConfigShown} closePopover={() => setColumnsConfigShown(false)} - data-testid='columns-config-popover' + data-testid="columns-config-popover" button={ Date: Wed, 7 May 2025 16:46:47 +0300 Subject: [PATCH 004/154] add icons --- .../src/components/base/icons/BulkActions.tsx | 7 +++ .../ui/src/components/base/icons/Cloud.tsx | 5 ++ .../ui/src/components/base/icons/Copilot.tsx | 7 +++ .../ui/src/components/base/icons/Github.tsx | 7 +++ .../ui/src/components/base/icons/Group.tsx | 7 +++ .../ui/src/components/base/icons/Icon.tsx | 56 +++++++++++++++++++ .../ui/src/components/base/icons/RawMode.tsx | 7 +++ .../src/components/base/icons/RedisLogo.tsx | 7 +++ .../ui/src/components/base/icons/Trigger.tsx | 7 +++ .../components/base/icons/UserInCircle.tsx | 7 +++ 10 files changed, 117 insertions(+) create mode 100644 redisinsight/ui/src/components/base/icons/BulkActions.tsx create mode 100644 redisinsight/ui/src/components/base/icons/Cloud.tsx create mode 100644 redisinsight/ui/src/components/base/icons/Copilot.tsx create mode 100644 redisinsight/ui/src/components/base/icons/Github.tsx create mode 100644 redisinsight/ui/src/components/base/icons/Group.tsx create mode 100644 redisinsight/ui/src/components/base/icons/Icon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/RawMode.tsx create mode 100644 redisinsight/ui/src/components/base/icons/RedisLogo.tsx create mode 100644 redisinsight/ui/src/components/base/icons/Trigger.tsx create mode 100644 redisinsight/ui/src/components/base/icons/UserInCircle.tsx diff --git a/redisinsight/ui/src/components/base/icons/BulkActions.tsx b/redisinsight/ui/src/components/base/icons/BulkActions.tsx new file mode 100644 index 0000000000..10b7a67a38 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/BulkActions.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import BulkActionsIcon from 'uiSrc/assets/img/icons/bulk_actions.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' + +export const BulkActions = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/Cloud.tsx b/redisinsight/ui/src/components/base/icons/Cloud.tsx new file mode 100644 index 0000000000..67e6c9b5b7 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/Cloud.tsx @@ -0,0 +1,5 @@ +import React from 'react' +import CloudIcon from 'uiSrc/assets/img/oauth/cloud.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' + +export const Cloud = (props: IconProps) => diff --git a/redisinsight/ui/src/components/base/icons/Copilot.tsx b/redisinsight/ui/src/components/base/icons/Copilot.tsx new file mode 100644 index 0000000000..5a403e90ab --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/Copilot.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import CopilotIcon from 'uiSrc/assets/img/icons/copilot.svg?react' +import { Icon, IconProps } from './Icon' + +export const Copilot = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/Github.tsx b/redisinsight/ui/src/components/base/icons/Github.tsx new file mode 100644 index 0000000000..57ff6d18c9 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/Github.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import GithubIcon from 'uiSrc/assets/img/sidebar/github.svg?react' +import { Icon, IconProps } from './Icon' + +export const Github = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/Group.tsx b/redisinsight/ui/src/components/base/icons/Group.tsx new file mode 100644 index 0000000000..58d33a7667 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/Group.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import GroupModeIcon from 'uiSrc/assets/img/icons/group_mode.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' + +export const Group = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/Icon.tsx b/redisinsight/ui/src/components/base/icons/Icon.tsx new file mode 100644 index 0000000000..b17f98b6fb --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/Icon.tsx @@ -0,0 +1,56 @@ +import React from 'react' +import { MonochromeIconProps } from '@redislabsdev/redis-ui-icons' +import { useTheme } from '@redislabsdev/redis-ui-styles' +import RedisLogo from 'uiSrc/assets/img/logo_small.svg?react' +import RawModeIcon from 'uiSrc/assets/img/icons/raw_mode.svg?react' +import GithubIcon from 'uiSrc/assets/img/sidebar/github.svg?react' +import CopilotIcon from 'uiSrc/assets/img/icons/copilot.svg?react' + +type BaseIconProps = MonochromeIconProps & { + icon: React.ComponentType +} +const sizesMap = { + XS: 8, + S: 12, + M: 16, + L: 20, + XL: 24, +} + +export const Icon = ({ + icon: IconComponent, + customSize, + customColor, + title: titleProp, + color = 'primary600', + size = 'L', + ...rest +}: BaseIconProps) => { + const sizeValue = customSize || sizesMap[size] + const theme = useTheme() + const colorValue = customColor || theme.semantic.color.icon[color] + const props = { + color: colorValue, + width: sizeValue, + height: sizeValue, + ...rest, + } + + return +} + +export type IconProps = Omit + +export const IconRedisLogo = (props: IconProps) => ( + +) + +export const IconRawMode = (props: IconProps) => ( + +) +export const IconGithub = (props: IconProps) => ( + +) +export const IconCopilot = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/RawMode.tsx b/redisinsight/ui/src/components/base/icons/RawMode.tsx new file mode 100644 index 0000000000..1db8d9ba04 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/RawMode.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RawModeIcon from 'uiSrc/assets/img/icons/raw_mode.svg?react' +import { Icon, IconProps } from './Icon' + +export const RawMode = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/RedisLogo.tsx b/redisinsight/ui/src/components/base/icons/RedisLogo.tsx new file mode 100644 index 0000000000..31098289b2 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/RedisLogo.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisLogoSvg from 'uiSrc/assets/img/logo_small.svg?react' +import { Icon, IconProps } from './Icon' + +export const RedisLogo = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/Trigger.tsx b/redisinsight/ui/src/components/base/icons/Trigger.tsx new file mode 100644 index 0000000000..2ccb87b159 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/Trigger.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import TriggerIcon from 'uiSrc/assets/img/bulb.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' + +export const Trigger = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/UserInCircle.tsx b/redisinsight/ui/src/components/base/icons/UserInCircle.tsx new file mode 100644 index 0000000000..8f53869d17 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/UserInCircle.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import UserInCircleSvg from 'uiSrc/assets/img/icons/user_in_circle.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' + +export const UserInCircle = (props: IconProps) => ( + +) From 3c3b65fe85339c24d94b85c1381e87597bb101a2 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 7 May 2025 16:51:16 +0300 Subject: [PATCH 005/154] add general export --- .../ui/src/components/base/icons/Icon.tsx | 18 ------------------ .../ui/src/components/base/icons/index.ts | 10 ++++++++++ 2 files changed, 10 insertions(+), 18 deletions(-) create mode 100644 redisinsight/ui/src/components/base/icons/index.ts diff --git a/redisinsight/ui/src/components/base/icons/Icon.tsx b/redisinsight/ui/src/components/base/icons/Icon.tsx index b17f98b6fb..8f342a852d 100644 --- a/redisinsight/ui/src/components/base/icons/Icon.tsx +++ b/redisinsight/ui/src/components/base/icons/Icon.tsx @@ -1,10 +1,6 @@ import React from 'react' import { MonochromeIconProps } from '@redislabsdev/redis-ui-icons' import { useTheme } from '@redislabsdev/redis-ui-styles' -import RedisLogo from 'uiSrc/assets/img/logo_small.svg?react' -import RawModeIcon from 'uiSrc/assets/img/icons/raw_mode.svg?react' -import GithubIcon from 'uiSrc/assets/img/sidebar/github.svg?react' -import CopilotIcon from 'uiSrc/assets/img/icons/copilot.svg?react' type BaseIconProps = MonochromeIconProps & { icon: React.ComponentType @@ -40,17 +36,3 @@ export const Icon = ({ } export type IconProps = Omit - -export const IconRedisLogo = (props: IconProps) => ( - -) - -export const IconRawMode = (props: IconProps) => ( - -) -export const IconGithub = (props: IconProps) => ( - -) -export const IconCopilot = (props: IconProps) => ( - -) diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts new file mode 100644 index 0000000000..7fbd552f6f --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -0,0 +1,10 @@ +export { Icon } from './Icon' +export { BulkActions } from './BulkActions' +export { Cloud } from './Cloud' +export { Copilot } from './Copilot' +export { Github } from './Github' +export { Group } from './Group' +export { RawMode } from './RawMode' +export { RedisLogo } from './RedisLogo' +export { Trigger } from './Trigger' +export { UserInCircle } from './UserInCircle' From 1832c1af097e988379c40d884c040b5e006b1d25 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 7 May 2025 17:06:36 +0300 Subject: [PATCH 006/154] re-export icons from ui-icons --- .../components/base/forms/buttons/Button.tsx | 7 +++--- .../ui/src/components/base/icons/index.ts | 2 ++ .../components/export-action/ExportAction.tsx | 23 ++++++++----------- .../add-set-members/AddSetMembers.tsx | 19 ++++++++------- 4 files changed, 25 insertions(+), 26 deletions(-) diff --git a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx index d7f1786ff4..d101d85dea 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx @@ -12,15 +12,16 @@ export const BaseButton = ({ icon, iconSide = 'left', loading, + size = 'small', ...props }: BaseButtonProps) => ( - ) diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index 7fbd552f6f..3d0e80d60a 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -8,3 +8,5 @@ export { RawMode } from './RawMode' export { RedisLogo } from './RedisLogo' export { Trigger } from './Trigger' export { UserInCircle } from './UserInCircle' + +export * from '@redislabsdev/redis-ui-icons' diff --git a/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx b/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx index 208d2b653b..f7d9183bb3 100644 --- a/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx +++ b/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx @@ -1,6 +1,5 @@ import React, { useState } from 'react' import { - EuiButton, EuiCheckbox, EuiFlexGroup, EuiFlexItem, @@ -11,6 +10,8 @@ import { } from '@elastic/eui' import { formatLongName } from 'uiSrc/utils' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' +import { ExportIcon } from 'uiSrc/components/base/icons' import styles from '../styles.module.scss' export interface Props { @@ -27,17 +28,15 @@ const ExportAction = ( const [withSecrets, setWithSecrets] = useState(true) const exportBtn = ( - setIsPopoverOpen((prevState) => !prevState)} - fill - color="secondary" - size="s" - iconType="exportAction" + size="small" + icon={ExportIcon} className={styles.actionBtn} data-testid="export-btn" > Export - + ) return ( @@ -81,11 +80,9 @@ const ExportAction = ( />
- { setIsPopoverOpen(false) onExport(selection, withSecrets) @@ -93,7 +90,7 @@ const ExportAction = ( data-testid="export-selected-dbs" > Export - +
) diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/add-set-members/AddSetMembers.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/add-set-members/AddSetMembers.tsx index 4c689eb9c0..8c9e1a670d 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/add-set-members/AddSetMembers.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/add-set-members/AddSetMembers.tsx @@ -2,7 +2,6 @@ import React, { ChangeEvent, useEffect, useRef, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' import { - EuiButton, EuiTextColor, EuiFlexGroup, EuiFlexItem, @@ -32,6 +31,10 @@ import { } from 'uiSrc/pages/browser/components/add-key/AddKeySet/interfaces' import AddMultipleFields from 'uiSrc/pages/browser/components/add-multiple-fields' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -183,26 +186,22 @@ const AddSetMembers = (props: Props) => { > - closePanel(true)} data-testid="cancel-members-btn" > Cancel - + - Save - + From e5ed77b810073585cb2ad5d4d8ca93cc97b45e66 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 7 May 2025 17:33:04 +0300 Subject: [PATCH 007/154] add theme config in themeContext.tsx --- redisinsight/ui/src/contexts/themeContext.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/redisinsight/ui/src/contexts/themeContext.tsx b/redisinsight/ui/src/contexts/themeContext.tsx index 93247bded2..26220041c1 100644 --- a/redisinsight/ui/src/contexts/themeContext.tsx +++ b/redisinsight/ui/src/contexts/themeContext.tsx @@ -1,4 +1,13 @@ import React from 'react' +import { ThemeProvider as StyledThemeProvider } from 'styled-components' +import { + theme as redisUiOldTheme, + themeLight, + themeDark, +} from '@redislabsdev/redis-ui-styles' +import '@redislabsdev/redis-ui-styles/normalized-styles.css' +import '@redislabsdev/redis-ui-styles/fonts.css' + import { ipcThemeChange } from 'uiSrc/electron/utils' import { BrowserStorageItem, @@ -71,7 +80,12 @@ export class ThemeProvider extends React.Component { render() { const { children } = this.props const { theme, usingSystemTheme }: any = this.state - + const uiTheme = + theme === Theme.Dark + ? themeDark + : theme === Theme.Light + ? themeLight + : redisUiOldTheme return ( { changeTheme: this.changeTheme, }} > - {children} + {children} ) } From 8026a6cb44c0a01da22d3c615b3e2d1674c770db Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 7 May 2025 17:58:45 +0300 Subject: [PATCH 008/154] make SecondaryButton.tsx outlined by default --- .../base/forms/buttons/SecondaryButton.tsx | 2 +- .../components/delete-action/DeleteAction.tsx | 25 +++++++++---------- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/redisinsight/ui/src/components/base/forms/buttons/SecondaryButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/SecondaryButton.tsx index 0a3a1fda63..978dd46c9c 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/SecondaryButton.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/SecondaryButton.tsx @@ -6,7 +6,7 @@ import { import { BaseButton } from 'uiSrc/components/base/forms/buttons/Button' export const SecondaryButton = ({ - filled, + filled = false, inverted, ...props }: SecondaryButtonProps) => { diff --git a/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx b/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx index 83e470555b..5da12682a1 100644 --- a/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx +++ b/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx @@ -1,6 +1,5 @@ import React, { useState } from 'react' import { - EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon, @@ -9,6 +8,11 @@ import { } from '@elastic/eui' import { formatLongName } from 'uiSrc/utils' +import { + DestructiveButton, + PrimaryButton, +} from 'uiSrc/components/base/forms/buttons' +import { DeleteIcon } from 'uiSrc/components/base/icons' import styles from '../styles.module.scss' export interface Props { @@ -32,17 +36,15 @@ const DeleteAction = ( } const deleteBtn = ( - Delete - + ) return ( @@ -76,11 +78,8 @@ const DeleteAction = ( ))}
- { closePopover() onDelete() @@ -89,7 +88,7 @@ const DeleteAction = ( data-testid="delete-selected-dbs" > Delete - +
) From 36e23a12c9c311d1e69a9d54f6704eb332349e2c Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 7 May 2025 20:29:23 +0300 Subject: [PATCH 009/154] add EmptyButton.tsx --- .../components/base/forms/buttons/Button.tsx | 2 +- .../base/forms/buttons/EmptyButton.tsx | 37 ++++++++++++++++++ .../components/base/forms/buttons/index.tsx | 9 ++++- .../connectivity-error/ConnectivityError.tsx | 7 ++-- .../ManageTagsModal.tsx | 39 ++++++++----------- 5 files changed, 66 insertions(+), 28 deletions(-) create mode 100644 redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx diff --git a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx index d101d85dea..a9f07bfb02 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx @@ -41,7 +41,7 @@ export type ButtonIconProps = Pick< side: 'left' | 'right' } -const ButtonIcon = ({ +export const ButtonIcon = ({ side, icon, iconSide, diff --git a/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx new file mode 100644 index 0000000000..ab83c2c50d --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import { TextButton } from '@redislabsdev/redis-ui-components' +import { IconType } from '@redislabsdev/redis-ui-icons' +import { ButtonIcon } from 'uiSrc/components/base/forms/buttons/Button' + +export type ButtonProps = React.ComponentProps & { + icon?: IconType + iconSide?: 'left' | 'right' + loading?: boolean + size?: 'small' | 'large' | 'medium' +} +export const EmptyButton = ({ + children, + icon, + iconSide = 'left', + loading, + size = 'small', + ...rest +}: ButtonProps) => ( + + + {children} + + +) diff --git a/redisinsight/ui/src/components/base/forms/buttons/index.tsx b/redisinsight/ui/src/components/base/forms/buttons/index.tsx index 5c9bcbb014..ae4de801f6 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/index.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/index.tsx @@ -2,5 +2,12 @@ import { SecondaryButton } from 'uiSrc/components/base/forms/buttons/SecondaryBu import { PrimaryButton } from 'uiSrc/components/base/forms/buttons/PrimaryButton' import { OutlineButton } from 'uiSrc/components/base/forms/buttons/OutlineButton' import { DestructiveButton } from 'uiSrc/components/base/forms/buttons/DestructiveButton' +import { EmptyButton } from 'uiSrc/components/base/forms/buttons/EmptyButton' -export { PrimaryButton, SecondaryButton, DestructiveButton, OutlineButton } +export { + PrimaryButton, + SecondaryButton, + DestructiveButton, + OutlineButton, + EmptyButton, +} diff --git a/redisinsight/ui/src/components/connectivity-error/ConnectivityError.tsx b/redisinsight/ui/src/components/connectivity-error/ConnectivityError.tsx index 863ee506e8..a8bb0b6265 100644 --- a/redisinsight/ui/src/components/connectivity-error/ConnectivityError.tsx +++ b/redisinsight/ui/src/components/connectivity-error/ConnectivityError.tsx @@ -1,7 +1,8 @@ import React from 'react' -import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui' +import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui' import SuspenseLoader from 'uiSrc/components/main-router/components/SuspenseLoader' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export type ConnectivityErrorProps = { @@ -30,9 +31,7 @@ const ConnectivityError = ({ {onRetry && ( - - Retry - + Retry )} diff --git a/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/ManageTagsModal.tsx b/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/ManageTagsModal.tsx index a1eec0204d..63d8b896ee 100644 --- a/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/ManageTagsModal.tsx +++ b/redisinsight/ui/src/pages/home/components/database-manage-tags-modal/ManageTagsModal.tsx @@ -1,14 +1,8 @@ /* eslint-disable react/no-array-index-key */ -import React, { useState, useMemo, useCallback } from 'react' +import React, { useCallback, useMemo, useState } from 'react' import { useDispatch } from 'react-redux' -import { - EuiButton, - EuiIcon, - EuiSpacer, - EuiTitle, - EuiText, - EuiButtonEmpty, -} from '@elastic/eui' +import { EuiIcon, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui' +import { PlusIcon } from 'uiSrc/components/base/icons' import { ConnectionProvider, Instance } from 'uiSrc/slices/interfaces' import { FormDialog } from 'uiSrc/components' import WarningIcon from 'uiSrc/assets/img/warning.svg?react' @@ -16,6 +10,11 @@ import WarningIcon from 'uiSrc/assets/img/warning.svg?react' import { updateInstanceAction } from 'uiSrc/slices/instances/instances' import { addMessageNotification } from 'uiSrc/slices/app/notifications' import successMessages from 'uiSrc/components/notifications/success-messages' +import { + PrimaryButton, + SecondaryButton, + EmptyButton, +} from 'uiSrc/components/base/forms/buttons' import { VALID_TAG_KEY_REGEX, VALID_TAG_VALUE_REGEX } from './constants' import { TagInputField } from './TagInputField' import { getInvalidTagErrors } from './utils' @@ -128,19 +127,16 @@ export const ManageTagsModal = ({ )}
- + Close - - + Save tags - +
} @@ -190,16 +186,15 @@ export const ManageTagsModal = ({ - Add additional tag - + ) } From e2a9bfedd7626fe96527ed09c9c3de88d1694fbc Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 7 May 2025 20:41:27 +0300 Subject: [PATCH 010/154] add key panels --- .../add-key/AddKeyHash/AddKeyHash.tsx | 30 +++++++------- .../add-key/AddKeyList/AddKeyList.tsx | 40 +++++++++---------- .../add-key/AddKeyReJSON/AddKeyReJSON.tsx | 29 +++++++------- .../add-key/AddKeySet/AddKeySet.tsx | 26 ++++++------ .../add-key/AddKeyStream/AddKeyStream.tsx | 31 ++++++-------- .../add-key/AddKeyString/AddKeyString.tsx | 32 +++++++-------- .../add-key/AddKeyZset/AddKeyZset.tsx | 34 ++++++++-------- 7 files changed, 102 insertions(+), 120 deletions(-) diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyHash/AddKeyHash.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyHash/AddKeyHash.tsx index d53c4455ac..96ea09e204 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyHash/AddKeyHash.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyHash/AddKeyHash.tsx @@ -7,13 +7,11 @@ import React, { } from 'react' import { useDispatch, useSelector } from 'react-redux' import { - EuiButton, EuiFieldText, - EuiFormRow, - EuiTextColor, - EuiForm, EuiFlexGroup, EuiFlexItem, + EuiForm, + EuiFormRow, EuiPanel, } from '@elastic/eui' import { toNumber } from 'lodash' @@ -30,6 +28,10 @@ import { CommandsVersions } from 'uiSrc/constants/commandsVersions' import { connectedInstanceOverviewSelector } from 'uiSrc/slices/instances/instances' import { FeatureFlags } from 'uiSrc/constants' import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import { CreateHashWithExpireDto, HashFieldDto, @@ -236,9 +238,9 @@ const AddKeyHash = (props: Props) => { )} - + Submit - + { > - onCancel(true)} className="btn-cancel btn-back" > - Cancel - + Cancel + - Add Key - + diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx index 2b6d590cda..17e754ed18 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx @@ -1,19 +1,25 @@ -import React, { ChangeEvent, FormEvent, useState, useEffect } from 'react' +import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { - EuiButton, - EuiTextColor, - EuiForm, + EuiFieldText, EuiFlexGroup, EuiFlexItem, + EuiForm, EuiPanel, - EuiFieldText, EuiSuperSelect, } from '@elastic/eui' import { Maybe, stringToBuffer } from 'uiSrc/utils' import { addKeyStateSelector, addListKey } from 'uiSrc/slices/browser/keys' +import { + optionsDestinations, + TAIL_DESTINATION, +} from 'uiSrc/pages/browser/modules/key-details/components/list-details/add-list-elements/AddListElements' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import { CreateListWithExpireDto, ListElementDestination, @@ -22,10 +28,6 @@ import { import { AddListFormConfig as config } from '../constants/fields-config' import AddKeyFooter from '../AddKeyFooter/AddKeyFooter' import AddMultipleFields from '../../add-multiple-fields' -import { - optionsDestinations, - TAIL_DESTINATION, -} from 'uiSrc/pages/browser/modules/key-details/components/list-details/add-list-elements/AddListElements' export interface Props { keyName: string @@ -118,9 +120,9 @@ const AddKeyList = (props: Props) => { /> )} - + Submit - + { > - onCancel(true)} className="btn-cancel btn-back" > - Cancel - + Cancel + - Add Key - + diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyReJSON/AddKeyReJSON.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyReJSON/AddKeyReJSON.tsx index e922cd0fd1..d37a0c9161 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyReJSON/AddKeyReJSON.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyReJSON/AddKeyReJSON.tsx @@ -2,13 +2,12 @@ import React, { FormEvent, useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useParams } from 'react-router-dom' import { - EuiButton, - EuiFormRow, - EuiTextColor, - EuiForm, EuiFlexGroup, EuiFlexItem, + EuiForm, + EuiFormRow, EuiPanel, + EuiTextColor, } from '@elastic/eui' import { Maybe, stringToBuffer } from 'uiSrc/utils' @@ -17,6 +16,10 @@ import { addKeyStateSelector, addReJSONKey } from 'uiSrc/slices/browser/keys' import { MonacoJson } from 'uiSrc/components/monaco-editor' import UploadFile from 'uiSrc/components/upload-file' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import { CreateRejsonRlWithExpireDto } from 'apiSrc/modules/browser/rejson-rl/dto' import { AddJSONFormConfig as config } from '../constants/fields-config' @@ -101,9 +104,9 @@ const AddKeyReJSON = (props: Props) => { - + Submit - + {
- onCancel(true)} className="btn-cancel btn-back" > Cancel - +
- Add Key - +
diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeySet/AddKeySet.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeySet/AddKeySet.tsx index 88f0c0b3dd..7014785385 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeySet/AddKeySet.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeySet/AddKeySet.tsx @@ -7,10 +7,8 @@ import React, { } from 'react' import { useDispatch, useSelector } from 'react-redux' import { - EuiButton, EuiFieldText, EuiFormRow, - EuiTextColor, EuiForm, EuiFlexGroup, EuiFlexItem, @@ -20,6 +18,10 @@ import { Maybe, stringToBuffer } from 'uiSrc/utils' import { addSetKey, addKeyStateSelector } from 'uiSrc/slices/browser/keys' import AddMultipleFields from 'uiSrc/pages/browser/components/add-multiple-fields' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import { CreateSetWithExpireDto } from 'apiSrc/modules/browser/set/dto' import { INITIAL_SET_MEMBER_STATE, ISetMemberState } from './interfaces' @@ -162,9 +164,9 @@ const AddKeySet = (props: Props) => { )} - + Submit - + { > - onCancel(true)} className="btn-cancel btn-back" > - Cancel - + Cancel + - Add Key - + diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyStream/AddKeyStream.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyStream/AddKeyStream.tsx index 3005b9b8fc..d57492eebb 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyStream/AddKeyStream.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyStream/AddKeyStream.tsx @@ -1,13 +1,6 @@ import React, { FormEvent, useEffect, useState } from 'react' import { useDispatch } from 'react-redux' -import { - EuiButton, - EuiTextColor, - EuiForm, - EuiFlexGroup, - EuiFlexItem, - EuiPanel, -} from '@elastic/eui' +import { EuiFlexGroup, EuiFlexItem, EuiForm, EuiPanel } from '@elastic/eui' import { addStreamKey } from 'uiSrc/slices/browser/keys' import { entryIdRegex, @@ -17,6 +10,10 @@ import { } from 'uiSrc/utils' import { AddStreamFormConfig as config } from 'uiSrc/pages/browser/components/add-key/constants/fields-config' import { StreamEntryFields } from 'uiSrc/pages/browser/modules/key-details/components/stream-details/add-stream-entity' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import { CreateStreamDto } from 'apiSrc/modules/browser/stream/dto' import AddKeyFooter from '../AddKeyFooter/AddKeyFooter' @@ -104,9 +101,9 @@ const AddKeyStream = (props: Props) => { setFields={setFields} setEntryID={setEntryID} /> - + Submit - + {
- onCancel(true)} className="btn-cancel btn-back" > - Cancel - + Cancel +
- Add Key - +
diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyString/AddKeyString.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyString/AddKeyString.tsx index a3ed0b18cd..7b04a77554 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyString/AddKeyString.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyString/AddKeyString.tsx @@ -1,13 +1,11 @@ -import React, { ChangeEvent, FormEvent, useState, useEffect } from 'react' +import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { - EuiButton, - EuiFormRow, - EuiTextColor, - EuiForm, EuiFlexGroup, EuiFlexItem, + EuiForm, + EuiFormRow, EuiPanel, EuiTextArea, } from '@elastic/eui' @@ -15,6 +13,10 @@ import { Maybe, stringToBuffer } from 'uiSrc/utils' import { addKeyStateSelector, addStringKey } from 'uiSrc/slices/browser/keys' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import { SetStringWithExpireDto } from 'apiSrc/modules/browser/string/dto' import AddKeyFooter from '../AddKeyFooter/AddKeyFooter' import { AddStringFormConfig as config } from '../constants/fields-config' @@ -72,9 +74,9 @@ const AddKeyString = (props: Props) => { data-testid="string-value" /> - + Submit - + {
- onCancel(true)} className="btn-cancel btn-back" > - Cancel - + Cancel +
- Add Key - +
diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyZset/AddKeyZset.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyZset/AddKeyZset.tsx index e7983cbd76..e10b1f8c12 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyZset/AddKeyZset.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyZset/AddKeyZset.tsx @@ -1,25 +1,23 @@ import React, { ChangeEvent, FormEvent, - useState, useEffect, useRef, + useState, } from 'react' import { useDispatch, useSelector } from 'react-redux' import { toNumber } from 'lodash' import { - EuiButton, EuiFieldText, - EuiFormRow, - EuiTextColor, - EuiForm, EuiFlexGroup, EuiFlexItem, + EuiForm, + EuiFormRow, EuiPanel, } from '@elastic/eui' import { Maybe, stringToBuffer, validateScoreNumber } from 'uiSrc/utils' import { isNaNConvertedString } from 'uiSrc/utils/numbers' -import { addZsetKey, addKeyStateSelector } from 'uiSrc/slices/browser/keys' +import { addKeyStateSelector, addZsetKey } from 'uiSrc/slices/browser/keys' import AddMultipleFields from 'uiSrc/pages/browser/components/add-multiple-fields' import { ISetMemberState } from 'uiSrc/pages/browser/components/add-key/AddKeySet/interfaces' @@ -27,6 +25,10 @@ import { INITIAL_ZSET_MEMBER_STATE, IZsetMemberState, } from 'uiSrc/pages/browser/components/add-key/AddKeyZset/interfaces' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import { CreateZSetWithExpireDto } from 'apiSrc/modules/browser/z-set/dto' import AddKeyFooter from '../AddKeyFooter/AddKeyFooter' import { AddZsetFormConfig as config } from '../constants/fields-config' @@ -237,9 +239,9 @@ const AddKeyZset = (props: Props) => { )} - + Submit - + {
- onCancel(true)} className="btn-cancel btn-back" > - Cancel - + Cancel +
- Add Key - +
From f580b985cb032d4d513af536f5e5580f5f9b4f39 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 7 May 2025 20:52:45 +0300 Subject: [PATCH 011/154] icon button added --- .../base/forms/buttons/IconButton.tsx | 7 ++++ .../components/base/forms/buttons/index.tsx | 2 + .../popover-delete/PopoverDelete.tsx | 39 ++++++++----------- .../monaco-editor/MonacoEditor.tsx | 19 +++++---- 4 files changed, 34 insertions(+), 33 deletions(-) create mode 100644 redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx diff --git a/redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx new file mode 100644 index 0000000000..053be1dbd3 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import { IconButton as RedisUiIconButton } from '@redislabsdev/redis-ui-components' + +export type ButtonProps = React.ComponentProps +export const IconButton = (props: ButtonProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/forms/buttons/index.tsx b/redisinsight/ui/src/components/base/forms/buttons/index.tsx index ae4de801f6..ee3ed6ad14 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/index.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/index.tsx @@ -3,6 +3,7 @@ import { PrimaryButton } from 'uiSrc/components/base/forms/buttons/PrimaryButton import { OutlineButton } from 'uiSrc/components/base/forms/buttons/OutlineButton' import { DestructiveButton } from 'uiSrc/components/base/forms/buttons/DestructiveButton' import { EmptyButton } from 'uiSrc/components/base/forms/buttons/EmptyButton' +import { IconButton } from 'uiSrc/components/base/forms/buttons/IconButton' export { PrimaryButton, @@ -10,4 +11,5 @@ export { DestructiveButton, OutlineButton, EmptyButton, + IconButton, } diff --git a/redisinsight/ui/src/pages/browser/components/popover-delete/PopoverDelete.tsx b/redisinsight/ui/src/pages/browser/components/popover-delete/PopoverDelete.tsx index 5104d3053c..a6fa7e510c 100644 --- a/redisinsight/ui/src/pages/browser/components/popover-delete/PopoverDelete.tsx +++ b/redisinsight/ui/src/pages/browser/components/popover-delete/PopoverDelete.tsx @@ -1,16 +1,15 @@ import React from 'react' -import { - EuiButton, - EuiButtonEmpty, - EuiButtonIcon, - EuiPopover, - EuiText, - EuiToolTip, -} from '@elastic/eui' +import { EuiPopover, EuiText, EuiToolTip } from '@elastic/eui' +import { DeleteIcon } from 'uiSrc/components/base/icons' import { RedisString } from 'uiSrc/slices/interfaces' import { isTruncatedString } from 'uiSrc/utils' import { TEXT_DISABLED_ACTION_WITH_TRUNCATED_DATA } from 'uiSrc/constants' +import { + DestructiveButton, + EmptyButton, + IconButton, +} from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -63,26 +62,23 @@ const PopoverDelete = (props: Props) => { } const deleteButton = buttonLabel ? ( - {} : onButtonClick} data-testid={testid ? `${testid}-icon` : 'remove-icon'} - isDisabled={isDisabled} > {buttonLabel} - + ) : ( - {} : onButtonClick} data-testid={testid ? `${testid}-icon` : 'remove-icon'} - isDisabled={isDisabled} /> ) @@ -119,16 +115,13 @@ const PopoverDelete = (props: Props) => { {appendInfo}
- handleDeleteItem(itemRaw || item)} data-testid={testid || 'remove'} > Remove - +
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/monaco-editor/MonacoEditor.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/monaco-editor/MonacoEditor.tsx index 9b3e9fa540..f49ab7dc48 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/monaco-editor/MonacoEditor.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/monaco-editor/MonacoEditor.tsx @@ -1,6 +1,6 @@ import React, { useRef, useState } from 'react' import { useDispatch } from 'react-redux' -import { EuiButton, EuiFlexItem } from '@elastic/eui' +import { EuiFlexItem } from '@elastic/eui' import { monaco } from 'react-monaco-editor' import { @@ -8,6 +8,10 @@ import { useMonacoValidation, } from 'uiSrc/components/monaco-editor' import { setReJSONDataAction } from 'uiSrc/slices/browser/rejson' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import { BaseProps } from '../interfaces' import { useChangeEditorType } from '../../change-editor-type-button' @@ -52,25 +56,20 @@ const MonacoEditor = (props: BaseProps) => { /> - Cancel - + - Overwrite Data - + ) From 192aa1fed123ba27f611ca295bd6f7686bcff694 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 7 May 2025 21:09:23 +0300 Subject: [PATCH 012/154] edit json icons --- .../EditEntireItemAction.tsx | 14 ++++++-------- .../edit-item-field-action/EditItemFieldAction.tsx | 9 +++++---- .../components/rejson-details/styles.module.scss | 1 + 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx index 98bd183853..ba1d5b74c6 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx @@ -1,6 +1,5 @@ import React, { ChangeEvent, useState } from 'react' import { - EuiButtonIcon, EuiFlexItem, EuiFocusTrap, EuiForm, @@ -10,9 +9,11 @@ import { } from '@elastic/eui' import cx from 'classnames' +import { CancelSlimIcon, CheckThinIcon } from 'uiSrc/components/base/icons' import FieldMessage from 'uiSrc/components/field-message/FieldMessage' import { Nullable } from 'uiSrc/utils' import { OutsideClickDetector } from 'uiSrc/components/base/utils' +import { IconButton } from 'uiSrc/components/base/forms/buttons' import { isValidJSON } from '../../utils' import { JSONErrors } from '../../constants' @@ -74,18 +75,15 @@ const EditEntireItemAction = (props: Props) => { />
- - - Date: Thu, 8 May 2025 13:27:54 +0300 Subject: [PATCH 013/154] analysis page --- .../components/auto-refresh/AutoRefresh.tsx | 20 ++++----- .../inline-item-editor/InlineItemEditor.tsx | 23 +++++----- .../BrowserSearchPanel.tsx | 30 ++++++------- .../browser-search-panel/styles.module.scss | 5 +++ .../ChangeEditorTypeButton.tsx | 9 ++-- .../components/add-item/AddItem.tsx | 15 ++++--- .../rejson-details/RejsonDetails.tsx | 7 ++- .../rejson-scalar/RejsonScalar.tsx | 2 +- .../components/base/TableTextBtn.tsx | 43 +++++++++++++++++++ .../components/base/TextBtn.tsx | 32 ++++++++++++++ .../components/header/Header.tsx | 12 +++--- .../components/top-keys/Table.tsx | 7 ++- .../components/top-keys/TopKeys.tsx | 33 ++++++-------- .../components/top-namespace/Table.tsx | 41 +++++++++--------- .../components/top-namespace/TopNamespace.tsx | 27 +++++------- .../slow-log/components/Actions/Actions.tsx | 33 +++++++------- 16 files changed, 202 insertions(+), 137 deletions(-) create mode 100644 redisinsight/ui/src/pages/database-analysis/components/base/TableTextBtn.tsx create mode 100644 redisinsight/ui/src/pages/database-analysis/components/base/TextBtn.tsx diff --git a/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx b/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx index 26bc5ae2ed..e8538e6498 100644 --- a/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx +++ b/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from 'react' import { - EuiButtonIcon, EuiIcon, EuiPopover, EuiSwitch, @@ -8,8 +7,7 @@ import { EuiToolTip, } from '@elastic/eui' import cx from 'classnames' - -import { EuiButtonIconSizes } from '@elastic/eui/src/components/button/button_icon/button_icon' +import { ChevronDownIcon, RefreshIcon } from 'uiSrc/components/base/icons' import { errorValidateRefreshRateNumber, MIN_REFRESH_RATE, @@ -19,10 +17,11 @@ import { import InlineItemEditor from 'uiSrc/components/inline-item-editor' import { localStorageService } from 'uiSrc/services' import { BrowserStorageItem } from 'uiSrc/constants' +import { IconButton } from 'uiSrc/components/base/forms/buttons' import { - getTextByRefreshTime, DEFAULT_REFRESH_RATE, DURATION_FIRST_REFRESH_TIME, + getTextByRefreshTime, MINUTE, NOW, } from './utils' @@ -50,7 +49,7 @@ export interface Props { ) => void minimumRefreshRate?: number defaultRefreshRate?: string - iconSize?: EuiButtonIconSizes + iconSize?: 'S' | 'M' | 'L' disabled?: boolean disabledRefreshButtonMessage?: string enableAutoRefreshDefault?: boolean @@ -71,7 +70,7 @@ const AutoRefresh = ({ onRefreshClicked, onEnableAutoRefresh, onChangeAutoRefreshRate, - iconSize = 'm', + iconSize = 'M', disabled, disabledRefreshButtonMessage, minimumRefreshRate, @@ -235,9 +234,9 @@ const AutoRefresh = ({ content={disabled ? disabledRefreshButtonMessage : refreshMessage} data-testid={getDataTestid('refresh-tooltip')} > - { title: string; content: string | React.ReactNode } | undefined declineOnUnmount?: boolean - iconSize?: IconSize + iconSize?: 'S' | 'M' | 'L' viewChildrenMode?: boolean autoComplete?: string controlsClassName?: string @@ -179,13 +179,13 @@ const InlineItemEditor = (props: Props) => { } data-testid="apply-tooltip" > - @@ -242,14 +242,13 @@ const InlineItemEditor = (props: Props) => { controlsClassName, )} > - {!approveByValidation && ApplyBtn} diff --git a/redisinsight/ui/src/pages/browser/components/browser-search-panel/BrowserSearchPanel.tsx b/redisinsight/ui/src/pages/browser/components/browser-search-panel/BrowserSearchPanel.tsx index ed19cb9a2b..002cf23216 100644 --- a/redisinsight/ui/src/pages/browser/components/browser-search-panel/BrowserSearchPanel.tsx +++ b/redisinsight/ui/src/pages/browser/components/browser-search-panel/BrowserSearchPanel.tsx @@ -3,13 +3,7 @@ import React, { FC, SVGProps, useCallback, useState } from 'react' import cx from 'classnames' -import { - EuiButton, - EuiButtonIcon, - EuiModal, - EuiModalBody, - EuiToolTip, -} from '@elastic/eui' +import { EuiButtonIcon, EuiModal, EuiModalBody, EuiToolTip } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { FeatureFlagComponent, @@ -22,7 +16,7 @@ import FilterKeyType from 'uiSrc/pages/browser/components/filter-key-type' import RediSearchIndexesList from 'uiSrc/pages/browser/components/redisearch-key-list' import SearchKeyList from 'uiSrc/pages/browser/components/search-key-list' -import BulkActionsIcon from 'uiSrc/assets/img/icons/bulk_actions.svg?react' +import { BulkActions as BulkActionsIcon } from 'uiSrc/components/base/icons' import VectorIcon from 'uiSrc/assets/img/icons/vector.svg?react' import RediSearchIcon from 'uiSrc/assets/img/modules/RedisSearchLight.svg?react' @@ -44,6 +38,10 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' import { setBulkActionType } from 'uiSrc/slices/browser/bulkActions' import { RedisDefaultModules } from 'uiSrc/slices/interfaces' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' interface ISwitchType { @@ -189,30 +187,26 @@ const BrowserSearchPanel = (props: Props) => { ) const AddKeyBtn = ( - + Key - + ) const BulkActionsBtn = ( - Bulk Actions - + ) const SearchModeSwitch = () => ( @@ -261,7 +255,7 @@ const BrowserSearchPanel = (props: Props) => { )}
-
+
{BulkActionsBtn} diff --git a/redisinsight/ui/src/pages/browser/components/browser-search-panel/styles.module.scss b/redisinsight/ui/src/pages/browser/components/browser-search-panel/styles.module.scss index 058accac98..2e0dd45027 100644 --- a/redisinsight/ui/src/pages/browser/components/browser-search-panel/styles.module.scss +++ b/redisinsight/ui/src/pages/browser/components/browser-search-panel/styles.module.scss @@ -134,3 +134,8 @@ .browserFilterOnboard { margin-left: -5px; } + +.bulkActionsText { + // todo: remove after redis-ui is implemented + font-size: 14px; +} diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/change-editor-type-button/ChangeEditorTypeButton.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/change-editor-type-button/ChangeEditorTypeButton.tsx index 6243117d94..01c71abccd 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/change-editor-type-button/ChangeEditorTypeButton.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/change-editor-type-button/ChangeEditorTypeButton.tsx @@ -1,5 +1,7 @@ import React from 'react' -import { EuiButtonIcon, EuiToolTip } from '@elastic/eui' +import { EuiToolTip } from '@elastic/eui' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { EditIcon } from 'uiSrc/components/base/icons' import { useChangeEditorType } from './useChangeEditorType' export enum ButtonMode { @@ -24,8 +26,9 @@ const ChangeEditorTypeButton = ({ return ( - { onConfirm={confirmApply} >
- onCancel?.()} /> - { )} {!addRootKVPair && ( - { onDecline={onDeclineChanges} onChange={() => setError('')} onApply={(value) => onApplyValue(value)} - iconSize="m" + iconSize="M" /> {!!error && (
diff --git a/redisinsight/ui/src/pages/database-analysis/components/base/TableTextBtn.tsx b/redisinsight/ui/src/pages/database-analysis/components/base/TableTextBtn.tsx new file mode 100644 index 0000000000..35f7dd50e5 --- /dev/null +++ b/redisinsight/ui/src/pages/database-analysis/components/base/TableTextBtn.tsx @@ -0,0 +1,43 @@ +import styled, { css } from 'styled-components' +import React from 'react' +import { EmptyButton } from 'uiSrc/components/base/forms/buttons' + +const expandedStyle = css` + padding: 0 20px 0 12px; + color: var(--euiTextSubduedColor) !important; + + &:hover, + &:focus { + color: var(--euiTextSubduedColorHover) !important; + } +` +/** + * Text button component in top namespaces table + * + * This is how we can implement custom styles + */ +export const TableTextBtn = styled(EmptyButton)< + React.ComponentProps & { + $expanded?: boolean + } +>` + width: max-content; + + &:hover, + &:focus { + background-color: transparent !important; + text-decoration: underline; + color: var(--euiTextSubduedColorHover); + } + padding: 0; + font: + normal normal normal 13px/17px Graphik, + sans-serif; + color: var(--buttonSecondaryTextColor) !important; + ${({ $expanded }) => { + if (!$expanded) { + return '' + } + return expandedStyle + }} +` diff --git a/redisinsight/ui/src/pages/database-analysis/components/base/TextBtn.tsx b/redisinsight/ui/src/pages/database-analysis/components/base/TextBtn.tsx new file mode 100644 index 0000000000..09fdf8c39d --- /dev/null +++ b/redisinsight/ui/src/pages/database-analysis/components/base/TextBtn.tsx @@ -0,0 +1,32 @@ +import styled from 'styled-components' +import React from 'react' +import { EmptyButton } from 'uiSrc/components/base/forms/buttons' +/** + * Text button component + * + * This is how we can implement custom styles + */ +export const TextBtn = styled(EmptyButton)< + React.ComponentProps & { + $active?: boolean + } +>` + border: none; + min-width: auto; + min-height: auto; + border-radius: 4px; + opacity: ${({ $active }) => ($active ? '1' : '')}; + background: ${({ $active }) => + $active ? 'var(--browserComponentActive)' : 'transparent'}; + color: ${({ $active }) => + $active ? 'var(--wbActiveIconColor)' : 'var(--wbHoverIconColor)'}; + margin-left: 18px; + box-shadow: none; + font: + normal normal normal 13px/17px Graphik, + sans-serif; + + &:hover { + color: var(--wbHoverIconColor); + } +` diff --git a/redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx b/redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx index 5617f3b508..df5360f6cc 100644 --- a/redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx +++ b/redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx @@ -7,13 +7,13 @@ import { EuiFlexGroup, EuiFlexItem, EuiIcon, - EuiButton, EuiText, EuiHideFor, } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { useParams } from 'react-router-dom' +import { CaretRightIcon } from 'uiSrc/components/base/icons' import { createNewAnalysis } from 'uiSrc/slices/analytics/dbAnalysis' import { numberWithSpaces } from 'uiSrc/utils/numbers' import { getApproximatePercentage } from 'uiSrc/utils/validations' @@ -29,6 +29,7 @@ import { } from 'uiSrc/constants/recommendations' import { FormatedDate } from 'uiSrc/components' import { DEFAULT_DELIMITER } from 'uiSrc/constants' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { ShortDatabaseAnalysis } from 'apiSrc/modules/database-analysis/models' import { AnalysisProgress } from 'apiSrc/modules/database-analysis/models/analysis-progress' @@ -162,19 +163,16 @@ const Header = (props: Props) => { responsive={false} > - New Report - + { position="bottom" content={tooltipContent} > - handleRedirect(name)} > {cellContent} - +
) diff --git a/redisinsight/ui/src/pages/database-analysis/components/top-keys/TopKeys.tsx b/redisinsight/ui/src/pages/database-analysis/components/top-keys/TopKeys.tsx index 365cdf6e98..5e08636215 100644 --- a/redisinsight/ui/src/pages/database-analysis/components/top-keys/TopKeys.tsx +++ b/redisinsight/ui/src/pages/database-analysis/components/top-keys/TopKeys.tsx @@ -1,9 +1,10 @@ import React, { useState } from 'react' import cx from 'classnames' -import { EuiButton, EuiTitle } from '@elastic/eui' +import { EuiTitle } from '@elastic/eui' import { TableView } from 'uiSrc/pages/database-analysis' import { Nullable } from 'uiSrc/utils' import { TableLoader } from 'uiSrc/pages/database-analysis/components' +import { TextBtn } from 'uiSrc/pages/database-analysis/components/base/TextBtn' import { DatabaseAnalysis } from 'apiSrc/modules/database-analysis/models' import Table from './Table' @@ -15,6 +16,7 @@ export interface Props { delimiter?: string } +const MAX_TOP_KEYS = 15 const TopKeys = ({ data, loading }: Props) => { const { topKeysLength = [], topKeysMemory = [], delimiter } = data || {} const [tableView, setTableView] = useState(TableView.MEMORY) @@ -32,37 +34,30 @@ const TopKeys = ({ data, loading }: Props) => {

- {topKeysLength.length < 15 && topKeysMemory?.length < 15 + {topKeysLength.length < MAX_TOP_KEYS && + topKeysMemory?.length < MAX_TOP_KEYS ? 'TOP KEYS' - : 'TOP 15 KEYS'} + : `TOP ${MAX_TOP_KEYS} KEYS`}

- setTableView(TableView.MEMORY)} disabled={tableView === TableView.MEMORY} - className={cx(styles.textBtn, { - [styles.activeBtn]: tableView === TableView.MEMORY, - })} data-testid="btn-change-table-memory" > by Memory - - + setTableView(TableView.KEYS)} disabled={tableView === TableView.KEYS} - className={cx(styles.textBtn, { - [styles.activeBtn]: tableView === TableView.KEYS, - })} data-testid="btn-change-table-keys" > by Length - +
{tableView === TableView.MEMORY && ( diff --git a/redisinsight/ui/src/pages/database-analysis/components/top-namespace/Table.tsx b/redisinsight/ui/src/pages/database-analysis/components/top-namespace/Table.tsx index aa96999b54..d326c2aea8 100644 --- a/redisinsight/ui/src/pages/database-analysis/components/top-namespace/Table.tsx +++ b/redisinsight/ui/src/pages/database-analysis/components/top-namespace/Table.tsx @@ -3,12 +3,10 @@ import React, { useEffect, useState } from 'react' import { EuiBasicTableColumn, EuiInMemoryTable, - EuiButtonIcon, - EuiButtonEmpty, EuiToolTip, PropertySort, } from '@elastic/eui' -import { useParams, useHistory } from 'react-router-dom' +import { useHistory, useParams } from 'react-router-dom' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' @@ -23,12 +21,12 @@ import { numberWithSpaces } from 'uiSrc/utils/numbers' import { GroupBadge } from 'uiSrc/components' import { Pages } from 'uiSrc/constants' import { - setFilter, - setSearchMatch, - resetKeysData, + changeSearchMode, fetchKeys, keysSelector, - changeSearchMode, + resetKeysData, + setFilter, + setSearchMatch, } from 'uiSrc/slices/browser/keys' import { SCAN_COUNT_DEFAULT, @@ -36,10 +34,13 @@ import { } from 'uiSrc/constants/api' import { KeyViewType, SearchMode } from 'uiSrc/slices/interfaces/keys' import { - setBrowserTreeDelimiter, - setBrowserKeyListDataLoaded, resetBrowserTree, + setBrowserKeyListDataLoaded, + setBrowserTreeDelimiter, } from 'uiSrc/slices/app/context' +import { TableTextBtn } from 'uiSrc/pages/database-analysis/components/base/TableTextBtn' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { ChevronDownIcon, ChevronUpIcon } from 'uiSrc/components/base/icons' import { NspSummary } from 'apiSrc/modules/database-analysis/models/nsp-summary' import { NspTypeSummary } from 'apiSrc/modules/database-analysis/models/nsp-type-summary' @@ -155,12 +156,12 @@ const NameSpacesTable = (props: Props) => { position="bottom" content={`${item.nsp}:*`} > - handleRedirect(item.nsp as string, type.type)} > {`${item.nsp}${delimiter}*`} - +
@@ -209,12 +210,9 @@ const NameSpacesTable = (props: Props) => { position="bottom" content={tooltipContent} > - handleRedirect(nsp, filterType)} - > + handleRedirect(nsp, filterType)}> {cellContent} - +
) @@ -298,16 +296,17 @@ const NameSpacesTable = (props: Props) => { return ( <> {types.length > 1 && ( - toggleDetails(item)} aria-label={ itemIdToExpandedRowMap[nsp as string] ? 'Collapse' : 'Expand' } - iconType={ + icon={ itemIdToExpandedRowMap[nsp as string] - ? 'arrowUp' - : 'arrowDown' + ? ChevronUpIcon + : ChevronDownIcon } data-testid={`expand-arrow-${nsp}`} /> diff --git a/redisinsight/ui/src/pages/database-analysis/components/top-namespace/TopNamespace.tsx b/redisinsight/ui/src/pages/database-analysis/components/top-namespace/TopNamespace.tsx index 860f075a07..4c2ef104ce 100644 --- a/redisinsight/ui/src/pages/database-analysis/components/top-namespace/TopNamespace.tsx +++ b/redisinsight/ui/src/pages/database-analysis/components/top-namespace/TopNamespace.tsx @@ -1,4 +1,4 @@ -import { EuiButton, EuiLink, EuiSwitch, EuiTitle } from '@elastic/eui' +import { EuiLink, EuiSwitch, EuiTitle } from '@elastic/eui' import { isNull } from 'lodash' import cx from 'classnames' import React, { useEffect, useState } from 'react' @@ -15,6 +15,7 @@ import { resetBrowserTree } from 'uiSrc/slices/app/context' import { changeKeyViewType } from 'uiSrc/slices/browser/keys' import { KeyViewType } from 'uiSrc/slices/interfaces/keys' import { Nullable } from 'uiSrc/utils' +import { TextBtn } from 'uiSrc/pages/database-analysis/components/base/TextBtn' import { DatabaseAnalysis } from 'apiSrc/modules/database-analysis/models' import Table from './Table' import styles from './styles.module.scss' @@ -98,32 +99,24 @@ const TopNamespace = (props: Props) => {

TOP NAMESPACES

 - setTableView(TableView.MEMORY)} disabled={tableView === TableView.MEMORY} - className={cx(styles.textBtn, { - [styles.activeBtn]: tableView === TableView.MEMORY, - })} data-testid="btn-change-table-memory" > by Memory - - + setTableView(TableView.KEYS)} disabled={tableView === TableView.KEYS} - className={cx(styles.textBtn, { - [styles.activeBtn]: tableView === TableView.KEYS, - })} data-testid="btn-change-table-keys" > by Number of Keys - + {extrapolation !== DEFAULT_EXTRAPOLATION && ( {
- handleClearClick()} className={styles.popoverDeleteBtn} data-testid="reset-confirm-btn" > Clear - +
@@ -158,16 +161,15 @@ const Actions = (props: Props) => { closePopover={() => {}} panelClassName={cx('popover-without-top-tail', styles.configWrapper)} button={ - showConfigPopover()} data-testid="configure-btn" > Configure - + } > { anchorClassName={styles.icon} content="Clear Slow Log" > - showClearPopover()} data-testid="clear-btn" From f1051e21357194b7579d8d38b15dd165993e72d4 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 8 May 2025 15:08:04 +0300 Subject: [PATCH 014/154] update font size --- redisinsight/ui/src/styles/base/_typography.scss | 6 +++++- redisinsight/ui/src/styles/elastic.css | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/redisinsight/ui/src/styles/base/_typography.scss b/redisinsight/ui/src/styles/base/_typography.scss index 3619486df2..f1591a31c8 100644 --- a/redisinsight/ui/src/styles/base/_typography.scss +++ b/redisinsight/ui/src/styles/base/_typography.scss @@ -1,6 +1,10 @@ +html { + font-size: 62.5%; +} + body { font-family: 'Graphik', sans-serif; - font-size: 14px; + font-size: 1.12rem; letter-spacing: -0.14px; b { diff --git a/redisinsight/ui/src/styles/elastic.css b/redisinsight/ui/src/styles/elastic.css index f50e7af950..15b8a8233f 100644 --- a/redisinsight/ui/src/styles/elastic.css +++ b/redisinsight/ui/src/styles/elastic.css @@ -558,7 +558,7 @@ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-kerning: normal; - font-size: 16px; + font-size: 62.5%; color: #343741; height: 100%; background-color: var(--euiPageBackgroundColor); From 31da78e38368f8193d9435f2de2b850ebe28205c Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 8 May 2025 15:47:24 +0300 Subject: [PATCH 015/154] DatetimeForm.tsx --- .../components/base/forms/buttons/Button.tsx | 43 +++++++++++-------- .../base/forms/buttons/EmptyButton.tsx | 4 +- .../base/forms/buttons/button.styles.ts | 16 ------- .../ui/src/components/base/icons/index.ts | 1 + .../components/datetime-form/DatetimeForm.tsx | 21 ++++----- 5 files changed, 38 insertions(+), 47 deletions(-) diff --git a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx index a9f07bfb02..d47a451c8a 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx @@ -1,23 +1,19 @@ import { Button } from '@redislabsdev/redis-ui-components' import React from 'react' -import { LoaderLargeIcon } from '@redislabsdev/redis-ui-icons/multicolor' -import { - BaseButtonProps, - IconContainer, - IconSizes, -} from 'uiSrc/components/base/forms/buttons/button.styles' +import { LoaderLargeIcon } from 'uiSrc/components/base/icons' +import { BaseButtonProps } from 'uiSrc/components/base/forms/buttons/button.styles' export const BaseButton = ({ children, icon, iconSide = 'left', loading, - size = 'small', + size = 'medium', ...props }: BaseButtonProps) => (
@@ -459,9 +472,9 @@ const QueryCardHeader = (props: Props) => { )} - { className={cx(styles.buttonIcon, styles.playIcon)} > - Date: Thu, 8 May 2025 16:42:39 +0300 Subject: [PATCH 018/154] QueryCardHeader.tsx --- .../QueryCardHeader/QueryCardHeader.tsx | 22 ++++++------------- redisinsight/ui/src/styles/base/_helpers.scss | 5 ++++- 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx b/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx index c21e2517d5..1f37f7bbdc 100644 --- a/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx +++ b/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx @@ -2,7 +2,6 @@ import React, { useContext } from 'react' import cx from 'classnames' import { useSelector } from 'react-redux' import { - EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIcon, @@ -14,7 +13,11 @@ import { import { useParams } from 'react-router-dom' import { findIndex, isNumber } from 'lodash' -import { DeleteIcon } from '@redislabsdev/redis-ui-icons' +import { + ChevronDownIcon, + ChevronUpIcon, + DeleteIcon, +} from '@redislabsdev/redis-ui-icons' import { CopyIcon, PlayIcon } from 'uiSrc/components/base/icons' import { Theme } from 'uiSrc/constants' import { @@ -72,7 +75,6 @@ export interface Props { activeResultsMode?: ResultsMode summary?: ResultsSummary summaryText?: string - queryType: WBQueryType selectedValue: string loading?: boolean clearing?: boolean @@ -337,16 +339,6 @@ const QueryCardHeader = (props: Props) => { resultsMode={resultsMode} /> - - handleCopy(event, query || '') - } - data-testid="copy-command" - /> { {!isFullScreen && ( {!isSilentModeWithoutError(resultsMode, summary?.fail) && ( - )} diff --git a/redisinsight/ui/src/styles/base/_helpers.scss b/redisinsight/ui/src/styles/base/_helpers.scss index df1ea9001a..e4922007ad 100644 --- a/redisinsight/ui/src/styles/base/_helpers.scss +++ b/redisinsight/ui/src/styles/base/_helpers.scss @@ -66,6 +66,7 @@ margin-left: 25px; opacity: 0; height: 100% !important; + flex-shrink: 0; transition: opacity 250ms ease-in-out; } @@ -77,7 +78,9 @@ position: relative; display: flex; max-width: 100%; - float: left; + justify-content: flex-start; + align-items: center; + gap: 0.5rem; &:hover .copy-btn, &:hover .copy-near-btn { From d07d5d2587367746dcb7f95bb2f17e8a41a1f407 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 8 May 2025 16:50:38 +0300 Subject: [PATCH 019/154] QueryActions.tsx --- .../ui/src/components/base/icons/index.ts | 4 +-- .../query/query-actions/QueryActions.tsx | 36 +++++++++---------- 2 files changed, 19 insertions(+), 21 deletions(-) diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index fb3f297af7..42317b1b86 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -3,10 +3,10 @@ export { BulkActions } from './BulkActions' export { Cloud } from './Cloud' export { Copilot } from './Copilot' export { Github } from './Github' -export { Group } from './Group' +export { Group as GroupModeIcon } from './Group' export { Play as PlayIcon } from './Play' export { PlayFilled as PlayFilledIcon } from './PlayFilled' -export { RawMode } from './RawMode' +export { RawMode as RawModeIcon } from './RawMode' export { RedisLogo } from './RedisLogo' export { Trigger } from './Trigger' export { UserInCircle } from './UserInCircle' diff --git a/redisinsight/ui/src/components/query/query-actions/QueryActions.tsx b/redisinsight/ui/src/components/query/query-actions/QueryActions.tsx index 733eb053b5..a68f7e311d 100644 --- a/redisinsight/ui/src/components/query/query-actions/QueryActions.tsx +++ b/redisinsight/ui/src/components/query/query-actions/QueryActions.tsx @@ -1,16 +1,20 @@ import React, { useRef } from 'react' import cx from 'classnames' -import { EuiButton, EuiSpacer, EuiText, EuiToolTip } from '@elastic/eui' +import { EuiSpacer, EuiText, EuiToolTip } from '@elastic/eui' import { ResultsMode, RunQueryMode } from 'uiSrc/slices/interfaces' import { KEYBOARD_SHORTCUTS } from 'uiSrc/constants' import { KeyboardShortcut } from 'uiSrc/components' import { isGroupMode } from 'uiSrc/utils' -import GroupModeIcon from 'uiSrc/assets/img/icons/group_mode.svg?react' -import RawModeIcon from 'uiSrc/assets/img/icons/raw_mode.svg?react' +import { + GroupModeIcon, + PlayFilledIcon, + RawModeIcon, +} from 'uiSrc/components/base/icons' import Divider from 'uiSrc/components/divider/Divider' +import { EmptyButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -59,12 +63,9 @@ const QueryActions = (props: Props) => { content="Enables the raw output mode" data-testid="change-mode-tooltip" > - onChangeMode()} - iconType={RawModeIcon} + icon={RawModeIcon} disabled={isLoading} className={cx(styles.btn, styles.textBtn, { [styles.activeBtn]: activeMode === RunQueryMode.Raw, @@ -72,7 +73,7 @@ const QueryActions = (props: Props) => { data-testid="btn-change-mode" > Raw mode - + )} {onChangeGroupMode && ( @@ -88,20 +89,17 @@ const QueryActions = (props: Props) => { } data-testid="group-results-tooltip" > - onChangeGroupMode()} disabled={isLoading} - iconType={GroupModeIcon} + icon={GroupModeIcon} className={cx(styles.btn, styles.textBtn, { [styles.activeBtn]: isGroupMode(resultsMode), })} data-testid="btn-change-group-mode" > Group results - + )} { } data-testid="run-query-tooltip" > - { onSubmit() setTimeout(() => runTooltipRef?.current?.hideToolTip?.(), 0) }} - isLoading={isLoading} + loading={isLoading} disabled={isLoading} - iconType="playFilled" + icon={PlayFilledIcon} className={cx(styles.btn, styles.submitButton)} aria-label="submit" data-testid="btn-submit" > Run - + ) From eee47b2ebba6665d0ca0ce392673046fd35831e4 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 8 May 2025 17:07:43 +0300 Subject: [PATCH 020/154] InternalPage.tsx --- .../components/InternalPage/InternalPage.tsx | 22 ++++++++-------- .../InternalPage/styles.module.scss | 25 +++++++++++-------- .../components/Pagination/Pagination.tsx | 24 ++++++++---------- 3 files changed, 37 insertions(+), 34 deletions(-) diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx index 9ba971bb39..1f392adb86 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx @@ -2,7 +2,6 @@ import React, { useMemo, useRef, useEffect, useState } from 'react' import { EuiFlyoutHeader, EuiText, - EuiButtonEmpty, EuiLoadingContent, EuiHorizontalRule, EuiPopover, @@ -13,6 +12,7 @@ import { debounce } from 'lodash' import { useLocation, useParams } from 'react-router-dom' import { useSelector } from 'react-redux' +import { ChevronLeftIcon } from 'uiSrc/components/base/icons' import { ExternalLink } from 'uiSrc/components' import { IEnablementAreaItem } from 'uiSrc/slices/interfaces' import { @@ -35,6 +35,7 @@ import { CloudLink, RedisInsightLink, } from 'uiSrc/components/markdown' +import { EmptyButton } from 'uiSrc/components/base/forms/buttons' import { getTutorialSection } from '../../utils' import { EmptyPrompt, Pagination, Code } from '..' @@ -184,15 +185,16 @@ const InternalPage = (props: Props) => { panelPaddingSize="m" closePopover={() => setShowCapabilityPopover(false)} button={ - - {backTitle} - +
+ + {backTitle} + +
} >
diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/styles.module.scss b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/styles.module.scss index 00f508be27..6918bd36b2 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/styles.module.scss +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/styles.module.scss @@ -38,18 +38,21 @@ max-height: 30px; line-height: 24px; width: 100%; - font: - normal normal 14px/24px Graphik, + & > button { + font: normal normal 14px/24px Graphik, sans-serif !important; - text-decoration: none; - color: var(--euiTextSubduedColor) !important; - & > span { - justify-content: flex-start; - } - &:hover { - background-color: var(--hoverInListColorDarken); - color: var(--euiTextColor) !important; - text-decoration: none !important; + text-decoration: none; + color: var(--euiTextSubduedColor) !important; + + & > span { + justify-content: flex-start; + } + + &:hover { + background-color: var(--hoverInListColorDarken); + color: var(--euiTextColor) !important; + text-decoration: none !important; + } } } .content { diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Pagination/Pagination.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Pagination/Pagination.tsx index bf122e3731..e09dd46665 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Pagination/Pagination.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Pagination/Pagination.tsx @@ -1,16 +1,17 @@ import React, { useContext, useEffect, useState } from 'react' import { - EuiButton, EuiContextMenuPanel, EuiContextMenuItem, EuiPopover, } from '@elastic/eui' import cx from 'classnames' import { isNil } from 'lodash' +import { ChevronLeftIcon, ChevronRightIcon } from 'uiSrc/components/base/icons' import { IEnablementAreaItem } from 'uiSrc/slices/interfaces' import EnablementAreaContext from 'uiSrc/pages/workbench/contexts/enablementAreaContext' import { Nullable } from 'uiSrc/utils' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -99,6 +100,7 @@ const Pagination = ({ ) + const size = compressed ? 'small' : 'medium' return (
{activePage > 0 && ( - handleOpenPage(activePage - 1)} - size={compressed ? 's' : 'm'} + size={size} className={cx(styles.prevPage, { [styles.prevPageCompressed]: compressed, })} > Back - + )}
@@ -129,21 +129,19 @@ const Pagination = ({
{activePage < items.length - 1 && ( - handleOpenPage(activePage + 1)} className={cx(styles.nextPage, { [styles.nextPageCompressed]: compressed, })} - size={compressed ? 's' : 'm'} + size={size} > Next - + )}
From 6301a55d0ce43651acf4d1e6cae704aed425ba5f Mon Sep 17 00:00:00 2001 From: pd-redis Date: Mon, 12 May 2025 10:24:10 +0300 Subject: [PATCH 021/154] move all icon imports --- .../query/query-card/QueryCardHeader/QueryCardHeader.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx b/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx index 6eb10244f9..90d55ab9ac 100644 --- a/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx +++ b/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx @@ -11,10 +11,13 @@ import { import { useParams } from 'react-router-dom' import { findIndex, isNumber } from 'lodash' -import { CopyIcon, PlayIcon, +import { + CopyIcon, + PlayIcon, ChevronDownIcon, ChevronUpIcon, - DeleteIcon, } from 'uiSrc/components/base/icons' + DeleteIcon, +} from 'uiSrc/components/base/icons' import { Theme } from 'uiSrc/constants' import { getCommandNameFromQuery, From 05ef98627a5bb2e9a5b8fd5cc9013f8db6871067 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Mon, 12 May 2025 12:44:56 +0300 Subject: [PATCH 022/154] checkpoint --- .../ui/src/assets/img/icons/extend.svg | 9 +++++ .../src/assets/img/icons/plus_in_circle.svg | 5 +++ .../ui/src/assets/img/icons/shrink.svg | 9 +++++ .../base/forms/buttons/ActionIconButton.tsx | 7 ++++ .../components/base/forms/buttons/index.tsx | 2 + .../src/components/base/icons/ExtendIcon.tsx | 7 ++++ .../components/base/icons/PlusInCircle.tsx | 7 ++++ .../src/components/base/icons/ShrinkIcon.tsx | 7 ++++ .../ui/src/components/base/icons/index.ts | 3 ++ .../consents-settings/ConsentsSettings.tsx | 11 +++-- .../src/components/full-screen/FullScreen.tsx | 8 ++-- .../components/multi-search/MultiSearch.tsx | 40 ++++++++++--------- .../multi-search/styles.module.scss | 18 +-------- .../add-items-actions/AddItemsActions.tsx | 7 ++-- .../add-key/AddKeyString/AddKeyString.tsx | 9 +---- .../add-multiple-fields/AddMultipleFields.tsx | 21 +++++----- .../add-multiple-fields/styles.module.scss | 6 --- .../load-sample-data/LoadSampleData.tsx | 11 +++-- .../components/no-keys-found/NoKeysFound.tsx | 7 ++-- .../key-details-header/KeyDetailsHeader.tsx | 16 +++++--- .../KeyDetailsHeaderDelete.tsx | 24 ++++++----- .../add-hash-fields/AddHashFields.tsx | 30 ++++++-------- .../add-items-action/AddItemsAction.tsx | 21 +++++----- .../add-list-elements/AddListElements.tsx | 22 +++++----- .../components/add-item/ConfirmOverwrite.tsx | 21 +++++----- .../StreamDataView/StreamDataView.tsx | 3 -- .../StringDetailsValue.tsx | 30 ++++++-------- .../shared/editable-input/EditableInput.tsx | 13 +++--- .../editable-textarea/EditableTextArea.tsx | 11 ++--- .../DatabasesListWrapper.tsx | 11 ++--- 30 files changed, 216 insertions(+), 180 deletions(-) create mode 100644 redisinsight/ui/src/assets/img/icons/extend.svg create mode 100644 redisinsight/ui/src/assets/img/icons/plus_in_circle.svg create mode 100644 redisinsight/ui/src/assets/img/icons/shrink.svg create mode 100644 redisinsight/ui/src/components/base/forms/buttons/ActionIconButton.tsx create mode 100644 redisinsight/ui/src/components/base/icons/ExtendIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/PlusInCircle.tsx create mode 100644 redisinsight/ui/src/components/base/icons/ShrinkIcon.tsx diff --git a/redisinsight/ui/src/assets/img/icons/extend.svg b/redisinsight/ui/src/assets/img/icons/extend.svg new file mode 100644 index 0000000000..28de7a5b2e --- /dev/null +++ b/redisinsight/ui/src/assets/img/icons/extend.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/redisinsight/ui/src/assets/img/icons/plus_in_circle.svg b/redisinsight/ui/src/assets/img/icons/plus_in_circle.svg new file mode 100644 index 0000000000..f6f285bd32 --- /dev/null +++ b/redisinsight/ui/src/assets/img/icons/plus_in_circle.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/redisinsight/ui/src/assets/img/icons/shrink.svg b/redisinsight/ui/src/assets/img/icons/shrink.svg new file mode 100644 index 0000000000..b0ac6e3cf1 --- /dev/null +++ b/redisinsight/ui/src/assets/img/icons/shrink.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/redisinsight/ui/src/components/base/forms/buttons/ActionIconButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/ActionIconButton.tsx new file mode 100644 index 0000000000..63587ea217 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/buttons/ActionIconButton.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import { ActionIconButton as RedisUiActionIconButton } from '@redislabsdev/redis-ui-components' + +export type ButtonProps = React.ComponentProps +export const ActionIconButton = (props: ButtonProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/forms/buttons/index.tsx b/redisinsight/ui/src/components/base/forms/buttons/index.tsx index ee3ed6ad14..b5752ebf60 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/index.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/index.tsx @@ -4,6 +4,7 @@ import { OutlineButton } from 'uiSrc/components/base/forms/buttons/OutlineButton import { DestructiveButton } from 'uiSrc/components/base/forms/buttons/DestructiveButton' import { EmptyButton } from 'uiSrc/components/base/forms/buttons/EmptyButton' import { IconButton } from 'uiSrc/components/base/forms/buttons/IconButton' +import { ActionIconButton } from 'uiSrc/components/base/forms/buttons/ActionIconButton' export { PrimaryButton, @@ -12,4 +13,5 @@ export { OutlineButton, EmptyButton, IconButton, + ActionIconButton, } diff --git a/redisinsight/ui/src/components/base/icons/ExtendIcon.tsx b/redisinsight/ui/src/components/base/icons/ExtendIcon.tsx new file mode 100644 index 0000000000..1642725d7e --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/ExtendIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import ExtendSvg from 'uiSrc/assets/img/icons/extend.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' + +export const ExtendIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/PlusInCircle.tsx b/redisinsight/ui/src/components/base/icons/PlusInCircle.tsx new file mode 100644 index 0000000000..2e93fc5d86 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/PlusInCircle.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import PlusInCircleSvg from 'uiSrc/assets/img/icons/plus_in_circle.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' + +export const PlusInCircle = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/ShrinkIcon.tsx b/redisinsight/ui/src/components/base/icons/ShrinkIcon.tsx new file mode 100644 index 0000000000..3ba2e466d3 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/ShrinkIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import ShrinkSvg from 'uiSrc/assets/img/icons/shrink.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' + +export const ShrinkIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index 42317b1b86..2abb9460aa 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -10,6 +10,9 @@ export { RawMode as RawModeIcon } from './RawMode' export { RedisLogo } from './RedisLogo' export { Trigger } from './Trigger' export { UserInCircle } from './UserInCircle' +export { PlusInCircle as PlusInCircleIcon } from './PlusInCircle' +export { ExtendIcon } from './ExtendIcon' +export { ShrinkIcon } from './ShrinkIcon' export * from '@redislabsdev/redis-ui-icons' export { LoaderLargeIcon } from '@redislabsdev/redis-ui-icons/multicolor' diff --git a/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx b/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx index af40f36a09..72d86f6752 100644 --- a/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx +++ b/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx @@ -5,7 +5,6 @@ import { isEmpty, forEach } from 'lodash' import { EuiSwitch, EuiText, - EuiButton, EuiTitle, EuiToolTip, EuiForm, @@ -24,6 +23,8 @@ import { import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' +import { InfoIcon } from 'uiSrc/components/base/icons' import ConsentOption from './ConsentOption' import styles from './styles.module.scss' @@ -354,18 +355,16 @@ const ConsentsSettings = ({ onSubmitted }: Props) => { ) : null } > - {}} disabled={submitIsDisabled()} - iconType={submitIsDisabled() ? 'iInCircle' : undefined} + icon={submitIsDisabled() ? InfoIcon : undefined} data-testid="btn-submit" > Submit - + diff --git a/redisinsight/ui/src/components/full-screen/FullScreen.tsx b/redisinsight/ui/src/components/full-screen/FullScreen.tsx index 9836b9f9c8..34505e9051 100644 --- a/redisinsight/ui/src/components/full-screen/FullScreen.tsx +++ b/redisinsight/ui/src/components/full-screen/FullScreen.tsx @@ -1,5 +1,7 @@ -import { EuiButtonIcon, EuiToolTip } from '@elastic/eui' +import { EuiToolTip } from '@elastic/eui' import React from 'react' +import { ExtendIcon, ShrinkIcon } from 'uiSrc/components/base/icons' +import { IconButton } from 'uiSrc/components/base/forms/buttons' export interface Props { isFullScreen: boolean @@ -19,8 +21,8 @@ const FullScreen = ({ position="left" anchorClassName={anchorClassName} > - { } const SubmitBtn = () => ( - @@ -236,9 +243,9 @@ const MultiSearch = (props: Props) => { > {value} - { @@ -268,15 +275,14 @@ const MultiSearch = (props: Props) => { )} {(value || !!options.length) && ( - )} @@ -285,11 +291,9 @@ const MultiSearch = (props: Props) => { content={suggestions?.buttonTooltipTitle} position="bottom" > - { setShowAutoSuggestions((v) => !v) diff --git a/redisinsight/ui/src/components/multi-search/styles.module.scss b/redisinsight/ui/src/components/multi-search/styles.module.scss index b24f031f0f..d515fbecb9 100644 --- a/redisinsight/ui/src/components/multi-search/styles.module.scss +++ b/redisinsight/ui/src/components/multi-search/styles.module.scss @@ -48,22 +48,7 @@ } .clearButton { - color: var(--htmlColor) !important; - width: 16px; - height: 16px; - background-color: var(--separatorColor); - border-radius: 100%; margin-left: 5px; - - &:hover, - &:focus { - background-color: var(--separatorColor) !important; - } - - :global(.euiIcon) { - width: 10px; - height: 10px; - } } .autoSuggestions { @@ -121,8 +106,7 @@ } .historyIcon { - margin-left: 8px; - margin-right: -4px; + margin-inline: 8px; } .clearHistory { diff --git a/redisinsight/ui/src/pages/browser/components/add-items-actions/AddItemsActions.tsx b/redisinsight/ui/src/pages/browser/components/add-items-actions/AddItemsActions.tsx index 2deb0529e2..41ea4f41b4 100644 --- a/redisinsight/ui/src/pages/browser/components/add-items-actions/AddItemsActions.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-items-actions/AddItemsActions.tsx @@ -1,6 +1,8 @@ import React from 'react' import { EuiButtonIcon, EuiToolTip } from '@elastic/eui' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { PlusInCircleIcon } from 'uiSrc/components/base/icons' export interface Props { id: number @@ -71,9 +73,8 @@ const AddItemsActions = (props: Props) => { position="left" anchorClassName={anchorClassName} > - { hasShadow={false} borderRadius="none" > - +
{ @@ -27,10 +32,9 @@ const AddMultipleFields = (props: Props) => { {child} - onClickRemove(item, index)} data-testid="remove-item" @@ -50,10 +54,9 @@ const AddMultipleFields = (props: Props) => { - { panelPaddingSize="none" anchorClassName={cx(styles.buttonWrapper, anchorClassName)} button={ - setIsConfirmationOpen(true)} className={styles.loadDataBtn} - isLoading={loading} - isDisabled={loading} + loading={loading} + disabled={loading} data-testid="load-sample-data-btn" > Load sample data - + } > diff --git a/redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.tsx b/redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.tsx index 22d888dec8..4950dfbaf2 100644 --- a/redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.tsx +++ b/redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { EuiTitle, EuiImage, EuiButtonEmpty } from '@elastic/eui' +import { EuiTitle, EuiImage } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' import TelescopeImg from 'uiSrc/assets/img/telescope-dark.svg' @@ -20,6 +20,7 @@ import { SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api' import { TutorialsIds } from 'uiSrc/constants' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { EmptyButton } from 'uiSrc/components/base/forms/buttons' import LoadSampleData from '../load-sample-data' import styles from './styles.module.scss' @@ -69,13 +70,13 @@ const NoKeysFound = (props: Props) => {
- onAddKeyPanel(true)} className={styles.addKey} data-testid="add-key-msg-btn" > + Add key manually - +
) diff --git a/redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.tsx b/redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.tsx index 236406aa42..3676d78ada 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.tsx @@ -1,10 +1,15 @@ -import { EuiButtonIcon, EuiToolTip } from '@elastic/eui' +import { EuiToolTip } from '@elastic/eui' import React, { ReactElement } from 'react' import { isUndefined } from 'lodash' import { useDispatch, useSelector } from 'react-redux' import AutoSizer from 'react-virtualized-auto-sizer' -import { GroupBadge, AutoRefresh, FullScreen, LoadingContent } from 'uiSrc/components' +import { + GroupBadge, + AutoRefresh, + FullScreen, + LoadingContent, +} from 'uiSrc/components' import { HIDE_LAST_REFRESH } from 'uiSrc/constants' import { deleteSelectedKeyAction, @@ -25,6 +30,8 @@ import { } from 'uiSrc/telemetry' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { CancelSlimIcon } from 'uiSrc/components/base/icons' +import { IconButton } from 'uiSrc/components/base/forms/buttons' import { KeyDetailsHeaderName } from './components/key-details-header-name' import { KeyDetailsHeaderTTL } from './components/key-details-header-ttl' import { KeyDetailsHeaderDelete } from './components/key-details-header-delete' @@ -148,9 +155,8 @@ const KeyDetailsHeader = ({ {(!arePanelsCollapsed || isFullScreen) && ( - onCloseKey()} diff --git a/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-delete/KeyDetailsHeaderDelete.tsx b/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-delete/KeyDetailsHeaderDelete.tsx index ae5eff62f2..b873877bf9 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-delete/KeyDetailsHeaderDelete.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-delete/KeyDetailsHeaderDelete.tsx @@ -1,4 +1,4 @@ -import { EuiButton, EuiButtonIcon, EuiPopover, EuiText } from '@elastic/eui' +import { EuiPopover, EuiText } from '@elastic/eui' import React, { useState } from 'react' import { useSelector } from 'react-redux' @@ -16,6 +16,11 @@ import { } from 'uiSrc/telemetry' import { formatLongName } from 'uiSrc/utils' +import { DeleteIcon } from 'uiSrc/components/base/icons' +import { + DestructiveButton, + IconButton, +} from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -64,9 +69,8 @@ const KeyDetailsHeaderDelete = ({ onDelete }: Props) => { closePopover={closePopoverDelete} panelPaddingSize="l" button={ - { will be deleted.
- onDelete(keyBuffer)} + onDelete(keyBuffer!)} className={styles.popoverDeleteBtn} data-testid="delete-key-confirm-btn" > Delete - +
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/add-hash-fields/AddHashFields.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/add-hash-fields/AddHashFields.tsx index f085f4eb16..d01031ac15 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/add-hash-fields/AddHashFields.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/add-hash-fields/AddHashFields.tsx @@ -1,13 +1,7 @@ import React, { ChangeEvent, useEffect, useRef, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' -import { - EuiButton, - EuiFieldText, - EuiFormRow, - EuiPanel, - EuiTextColor, -} from '@elastic/eui' +import { EuiFieldText, EuiFormRow, EuiPanel } from '@elastic/eui' import { toNumber } from 'lodash' import { keysSelector, @@ -33,6 +27,10 @@ import { INITIAL_HASH_FIELD_STATE, } from 'uiSrc/pages/browser/components/add-key/AddKeyHash/interfaces' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import { AddFieldsToHashDto, HashFieldDto, @@ -254,31 +252,27 @@ const AddHashFields = (props: Props) => { hasShadow={false} className="flexItemNoFullWidth" > - +
- closePanel(true)} data-testid="cancel-fields-btn" > - Cancel - + Cancel +
- Save - +
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/add-items-action/AddItemsAction.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/add-items-action/AddItemsAction.tsx index 24cd7ae66b..03e05bedc5 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/add-items-action/AddItemsAction.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/add-items-action/AddItemsAction.tsx @@ -1,8 +1,13 @@ import React from 'react' -import { EuiButton, EuiButtonIcon, EuiToolTip } from '@elastic/eui' +import { EuiToolTip } from '@elastic/eui' import cx from 'classnames' import { MIDDLE_SCREEN_RESOLUTION } from 'uiSrc/constants' +import { PlusInCircleIcon } from 'uiSrc/components/base/icons' +import { + IconButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import styles from '../styles.module.scss' export interface Props { @@ -21,20 +26,18 @@ const AddItemsAction = ({ width, title, openAddItemPanel }: Props) => ( > <> {width > MIDDLE_SCREEN_RESOLUTION ? ( - {title} - + ) : ( - { hasShadow={false} className="flexItemNoFullWidth" > - +
- closePanel(true)} data-testid="cancel-members-btn" > - Cancel - + Cancel +
- Save - +
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/ConfirmOverwrite.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/ConfirmOverwrite.tsx index 08e3623df2..a257470567 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/ConfirmOverwrite.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/ConfirmOverwrite.tsx @@ -1,7 +1,11 @@ import React from 'react' import cx from 'classnames' -import { EuiButton, EuiPopover, EuiText } from '@elastic/eui' +import { EuiPopover, EuiText } from '@elastic/eui' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import styles from '../../styles.module.scss' interface ConfirmOverwriteProps { @@ -35,26 +39,23 @@ const ConfirmOverwrite = ({
- Cancel - + - Overwrite - +
) diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/stream-data-view/StreamDataView/StreamDataView.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/stream-data-view/StreamDataView/StreamDataView.tsx index 92bc40c6e5..42df84de44 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/stream-data-view/StreamDataView/StreamDataView.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/stream-data-view/StreamDataView/StreamDataView.tsx @@ -99,9 +99,6 @@ const StreamDataView = (props: Props) => { )} data-testid="stream-entries-container" > - {/*
- -
*/} { }) } - const handleDownloadString = (e: React.MouseEvent) => { + const handleDownloadString = (e: React.MouseEvent) => { e.preventDefault() dispatch(fetchDownloadStringValue(key, downloadFile)) sendEventTelemetry({ @@ -328,31 +324,29 @@ const StringDetailsValue = (props: Props) => { {!isFullStringLoaded(initialValue?.data?.length, length) && ( - handleLoadAll(key, keyType)} > Load all - + )} {!isTruncatedValue && ( - Download - + )} diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/EditableInput.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/EditableInput.tsx index 65daa7a28a..68b6296873 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/EditableInput.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-input/EditableInput.tsx @@ -1,9 +1,11 @@ import React, { useState } from 'react' -import { EuiButtonIcon, EuiText, EuiToolTip } from '@elastic/eui' +import { EuiText, EuiToolTip } from '@elastic/eui' import cx from 'classnames' import { StopPropagation } from 'uiSrc/components/virtual-table' import InlineItemEditor from 'uiSrc/components/inline-item-editor' +import { EditIcon } from 'uiSrc/components/base/icons' +import { IconButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -60,12 +62,11 @@ const EditableInput = (props: Props) => { anchorClassName={styles.editBtnAnchor} data-testid={`${testIdPrefix}_edit-tooltip-${field}`} > - { e.stopPropagation() onEdit?.(true) @@ -89,7 +90,7 @@ const EditableInput = (props: Props) => { placeholder={placeholder} fieldName={field} expandable - iconSize="m" + iconSize="M" onDecline={(event) => { onDecline(event) onEdit?.(false) diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-textarea/EditableTextArea.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-textarea/EditableTextArea.tsx index 6e1b3af9a9..cf2932b389 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-textarea/EditableTextArea.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-textarea/EditableTextArea.tsx @@ -1,10 +1,12 @@ import React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react' import AutoSizer from 'react-virtualized-auto-sizer' -import { EuiButtonIcon, EuiText, EuiTextArea, EuiToolTip } from '@elastic/eui' +import { EuiText, EuiTextArea, EuiToolTip } from '@elastic/eui' import cx from 'classnames' import { StopPropagation } from 'uiSrc/components/virtual-table' import InlineItemEditor from 'uiSrc/components/inline-item-editor' +import { EditIcon } from 'uiSrc/components/base/icons' +import { IconButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -102,12 +104,11 @@ const EditableTextArea = (props: Props) => { anchorClassName={styles.editBtnAnchor} data-testid={`${testIdPrefix}_edit-tooltip-${field}`} > - { e.stopPropagation() onEdit?.(true) diff --git a/redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx b/redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx index 0279755ec6..0a7bc80226 100644 --- a/redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx +++ b/redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx @@ -1,6 +1,5 @@ import { Criteria, - EuiButtonEmpty, EuiButtonIcon, EuiIcon, EuiLink, @@ -85,6 +84,8 @@ import { CREATE_CLOUD_DB_ID, HELP_LINKS } from 'uiSrc/pages/home/constants' import { Tag } from 'uiSrc/slices/interfaces/tag' import { FeatureFlagComponent } from 'uiSrc/components' +import { EditIcon } from 'uiSrc/components/base/icons' +import { EmptyButton } from 'uiSrc/components/base/forms/buttons' import DbStatus from '../db-status' import { TagsCell } from '../tags-cell/TagsCell' @@ -622,15 +623,15 @@ const DatabasesListWrapper = (props: Props) => { >
- handleClickEditInstance(instance)} + data-testid={`edit-instance-${instance.id}`} > Edit database - +
Date: Mon, 12 May 2025 13:26:59 +0300 Subject: [PATCH 023/154] add db dialog --- .../ui/src/components/base/icons/index.ts | 8 ++-- .../add-database-screen/AddDatabaseScreen.tsx | 41 ++++++++++--------- .../DatabaseListHeader.tsx | 22 +++++----- .../DatabasePanelDialog.tsx | 9 ++-- .../ManualConnectionForm.tsx | 9 ++-- .../components/FooterActions.tsx | 40 ++++++++++-------- 6 files changed, 69 insertions(+), 60 deletions(-) diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index 2abb9460aa..0378853ade 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -1,18 +1,18 @@ -export { Icon } from './Icon' export { BulkActions } from './BulkActions' export { Cloud } from './Cloud' export { Copilot } from './Copilot' +export { ExtendIcon } from './ExtendIcon' export { Github } from './Github' export { Group as GroupModeIcon } from './Group' +export { Icon } from './Icon' export { Play as PlayIcon } from './Play' export { PlayFilled as PlayFilledIcon } from './PlayFilled' +export { PlusInCircle as PlusInCircleIcon } from './PlusInCircle' export { RawMode as RawModeIcon } from './RawMode' export { RedisLogo } from './RedisLogo' +export { ShrinkIcon } from './ShrinkIcon' export { Trigger } from './Trigger' export { UserInCircle } from './UserInCircle' -export { PlusInCircle as PlusInCircleIcon } from './PlusInCircle' -export { ExtendIcon } from './ExtendIcon' -export { ShrinkIcon } from './ShrinkIcon' export * from '@redislabsdev/redis-ui-icons' export { LoaderLargeIcon } from '@redislabsdev/redis-ui-icons/multicolor' diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx index 7110070e3f..8d18e068c4 100644 --- a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx +++ b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { EuiButton, EuiButtonEmpty, EuiForm, EuiToolTip } from '@elastic/eui' +import { EuiForm, EuiToolTip } from '@elastic/eui' import { useFormik } from 'formik' import { useDispatch, useSelector } from 'react-redux' import { useHistory } from 'react-router' @@ -16,6 +16,12 @@ import { import { Pages } from 'uiSrc/constants' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { + EmptyButton, + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' +import { InfoIcon } from 'uiSrc/components/base/icons' import ConnectivityOptions from './components/connectivity-options' import ConnectionUrl from './components/connection-url' import { Values } from './constants' @@ -112,7 +118,7 @@ const AddDatabaseScreen = (props: Props) => { - + { ) : null } > - Test Connection - + - handleProceedForm(AddDbType.manual)} data-testid="btn-connection-settings" > Connection Settings - + { ) : null } > - Add Database - + diff --git a/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx b/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx index 3b44d75e7c..d30c4ac47e 100644 --- a/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx +++ b/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx @@ -1,10 +1,9 @@ import React, { useContext, useEffect, useState } from 'react' -import { EuiButton, EuiCheckbox, EuiPopover } from '@elastic/eui' +import { EuiCheckbox, EuiPopover } from '@elastic/eui' import { useSelector, useDispatch } from 'react-redux' import { isEmpty } from 'lodash' import cx from 'classnames' -import ColumnsIcon from 'uiSrc/assets/img/icons/columns.svg?react' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { instancesSelector, @@ -28,6 +27,11 @@ import { } from 'uiSrc/constants' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' +import { ColumnsIcon } from 'uiSrc/components/base/icons' import SearchDatabasesList from '../search-databases-list' import styles from './styles.module.scss' @@ -118,15 +122,13 @@ const DatabaseListHeader = ({ onAddInstance }: Props) => { } const AddInstanceBtn = () => ( - + Add Redis database - + ) const CreateBtn = ({ content }: { content: ContentCreateRedis }) => { @@ -219,17 +221,15 @@ const DatabaseListHeader = ({ onAddInstance }: Props) => { closePopover={() => setColumnsConfigShown(false)} data-testid="columns-config-popover" button={ - Columns - + } > {columnCheckboxes} diff --git a/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx b/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx index 34dc7f450b..a3631db018 100644 --- a/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx +++ b/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { EuiButtonIcon, EuiTitle } from '@elastic/eui' +import { EuiTitle } from '@elastic/eui' import cx from 'classnames' import { Nullable } from 'uiSrc/utils' import { UrlHandlingActions } from 'uiSrc/slices/interfaces/urlHandling' @@ -33,6 +33,8 @@ import { FormDialog } from 'uiSrc/components' import { ModalHeaderProvider } from 'uiSrc/contexts/ModalTitleProvider' import ClusterConnectionFormWrapper from 'uiSrc/pages/home/components/cluster-connection' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { ArrowLeftIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export interface Props { @@ -165,10 +167,9 @@ const DatabasePanelDialog = (props: Props) => { withBack && content ? ( - diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx index a66d0d21ec..5b0e5e3ba8 100644 --- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx +++ b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx @@ -1,4 +1,4 @@ -import { EuiButtonIcon, EuiTab, EuiTabs, EuiTitle, keys } from '@elastic/eui' +import { EuiTab, EuiTabs, EuiTitle, keys } from '@elastic/eui' import { FormikErrors, useFormik } from 'formik' import { isEmpty, pick } from 'lodash' import React, { useEffect, useRef, useState } from 'react' @@ -25,6 +25,8 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { useModalHeader } from 'uiSrc/contexts/ModalTitleProvider' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { ArrowLeftIcon } from 'uiSrc/components/base/icons' +import { IconButton } from 'uiSrc/components/base/forms/buttons' import { MANUAL_FORM_TABS, ManualFormTab } from './constants' import CloneConnection from './components/CloneConnection' import FooterActions from './components/FooterActions' @@ -155,10 +157,9 @@ const ManualConnectionForm = (props: Props) => { setModalHeader( - diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/FooterActions.tsx b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/FooterActions.tsx index 5a1153d128..700185d90c 100644 --- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/FooterActions.tsx +++ b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/FooterActions.tsx @@ -1,11 +1,18 @@ import React from 'react' -import { EuiButton, EuiButtonEmpty, EuiToolTip, } from '@elastic/eui' +import { EuiButton, EuiButtonEmpty, EuiToolTip } from '@elastic/eui' import { FormikErrors } from 'formik' +import { isInvalid } from '@elastic/eui/src/components/color_picker/color_stops/utils' import validationErrors from 'uiSrc/constants/validationErrors' import { getSubmitButtonContent } from 'uiSrc/pages/home/utils' import { DbConnectionInfo, ISubmitButton } from 'uiSrc/pages/home/interfaces' import { SubmitBtnText } from 'uiSrc/pages/home/constants' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { + EmptyButton, + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' +import { InfoIcon } from 'uiSrc/components/base/icons' export interface Props { submitIsDisable: () => boolean @@ -43,19 +50,17 @@ const FooterActions = (props: Props) => { } content={getSubmitButtonContent(errors, submitIsDisabled)} > - {text} - + ) @@ -72,33 +77,32 @@ const FooterActions = (props: Props) => { } content={getSubmitButtonContent(errors, submitIsDisable())} > - Test Connection - + {onClose && ( - Cancel - + )} Date: Mon, 12 May 2025 13:47:03 +0300 Subject: [PATCH 024/154] notifications --- .../notifications/Notifications.tsx | 12 +++++----- .../DefaultErrorContent.tsx | 11 ++++----- .../EncryptionErrorContent.tsx | 24 +++++++++---------- .../delete-key-popover/DeleteKeyPopover.tsx | 23 ++++++++++-------- 4 files changed, 36 insertions(+), 34 deletions(-) diff --git a/redisinsight/ui/src/components/notifications/Notifications.tsx b/redisinsight/ui/src/components/notifications/Notifications.tsx index 560435a18c..d07f87b05f 100644 --- a/redisinsight/ui/src/components/notifications/Notifications.tsx +++ b/redisinsight/ui/src/components/notifications/Notifications.tsx @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' -import { EuiGlobalToastList, EuiButton, EuiTextColor } from '@elastic/eui' +import { EuiGlobalToastList, EuiTextColor } from '@elastic/eui' import { Toast } from '@elastic/eui/src/components/toast/global_toast_list' import cx from 'classnames' import { @@ -20,6 +20,7 @@ import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' import errorMessages from './error-messages' import { InfiniteMessagesIds } from './components' @@ -53,15 +54,15 @@ const Notifications = () => { - onSubmitNotification(toast, group)} className={styles.toastSuccessBtn} data-testid="submit-tooltip-btn" > Ok - + @@ -82,7 +83,6 @@ const Notifications = () => { } toast.text = getSuccessText(message, toast, group) toast.onClose = () => removeToast(toast) - return toast }) diff --git a/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx b/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx index 724e25497e..c246c3da72 100644 --- a/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx +++ b/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx @@ -1,6 +1,7 @@ -import { EuiButton, EuiTextColor } from '@elastic/eui' +import { EuiTextColor } from '@elastic/eui' import React from 'react' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' export interface Props { text: string | JSX.Element | JSX.Element[] @@ -11,16 +12,14 @@ const DefaultErrorContent = ({ text, onClose = () => {} }: Props) => ( <> {text} - Ok - + ) diff --git a/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx b/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx index 508a5dcaf4..da15d1606e 100644 --- a/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx +++ b/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx @@ -1,11 +1,15 @@ import React from 'react' -import { EuiButton, EuiTextColor } from '@elastic/eui' +import { EuiTextColor } from '@elastic/eui' import { matchPath, useHistory, useLocation } from 'react-router-dom' import { useDispatch } from 'react-redux' import { Pages } from 'uiSrc/constants' import { updateUserConfigSettingsAction } from 'uiSrc/slices/user/user-settings' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { + DestructiveButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' export interface Props { onClose?: () => void @@ -50,32 +54,28 @@ const EncryptionErrorContent = (props: Props) => { with databases. - +
- Disable Encryption - +
- Cancel - +
diff --git a/redisinsight/ui/src/pages/browser/components/delete-key-popover/DeleteKeyPopover.tsx b/redisinsight/ui/src/pages/browser/components/delete-key-popover/DeleteKeyPopover.tsx index a2cdbc14e0..6278be3308 100644 --- a/redisinsight/ui/src/pages/browser/components/delete-key-popover/DeleteKeyPopover.tsx +++ b/redisinsight/ui/src/pages/browser/components/delete-key-popover/DeleteKeyPopover.tsx @@ -1,4 +1,4 @@ -import { EuiButton, EuiButtonIcon, EuiPopover, EuiText } from '@elastic/eui' +import { EuiPopover, EuiText } from '@elastic/eui' import React from 'react' @@ -7,6 +7,11 @@ import { KeyTypes, ModulesKeyTypes } from 'uiSrc/constants' import { formatLongName } from 'uiSrc/utils' import { RedisResponseBuffer } from 'uiSrc/slices/interfaces' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { + DestructiveButton, + IconButton, +} from 'uiSrc/components/base/forms/buttons' +import { DeleteIcon } from 'uiSrc/components/base/icons' export interface DeleteProps { nameString: string @@ -36,8 +41,8 @@ export const DeleteKeyPopover = ({ closePopover={() => onOpenPopover(-1, type)} panelPaddingSize="l" button={ - onOpenPopover(rowId, type)} aria-label="Delete Key" data-testid={`delete-key-btn-${nameString}`} @@ -53,17 +58,15 @@ export const DeleteKeyPopover = ({ will be deleted. - onDelete(name)} data-testid="submit-delete-key" > Delete - + ) From 226baf2e93906a519dc843ff7487c081573b4ce3 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Mon, 12 May 2025 14:02:35 +0300 Subject: [PATCH 025/154] remove unused imports --- .../manual-connection-form/components/FooterActions.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/FooterActions.tsx b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/FooterActions.tsx index 700185d90c..c459eb19b0 100644 --- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/FooterActions.tsx +++ b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/FooterActions.tsx @@ -1,7 +1,6 @@ import React from 'react' -import { EuiButton, EuiButtonEmpty, EuiToolTip } from '@elastic/eui' +import { EuiToolTip } from '@elastic/eui' import { FormikErrors } from 'formik' -import { isInvalid } from '@elastic/eui/src/components/color_picker/color_stops/utils' import validationErrors from 'uiSrc/constants/validationErrors' import { getSubmitButtonContent } from 'uiSrc/pages/home/utils' import { DbConnectionInfo, ISubmitButton } from 'uiSrc/pages/home/interfaces' From 1acb93a9010c8927eea5604f97ab7f976f1913dc Mon Sep 17 00:00:00 2001 From: pd-redis Date: Mon, 12 May 2025 14:53:40 +0300 Subject: [PATCH 026/154] fix ZSetDetails.tsx overflow --- .../key-details-header/KeyDetailsHeader.tsx | 4 +-- .../KeyDetailsSubheader.tsx | 4 +-- .../components/zset-details/ZSetDetails.tsx | 18 ++++++++---- .../add-zset-members/AddZsetMembers.tsx | 28 ++++++++----------- 4 files changed, 27 insertions(+), 27 deletions(-) diff --git a/redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.tsx b/redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.tsx index 3676d78ada..9b90d0757b 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.tsx @@ -126,7 +126,7 @@ const KeyDetailsHeader = ({ } return ( -
@@ -192,7 +192,7 @@ const KeyDetailsHeader = ({ )} )} -
+ ) } diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.tsx index 7197b5336b..4751db41d6 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.tsx @@ -14,7 +14,7 @@ export interface Props { } export const KeyDetailsSubheader = ({ keyType, Actions }: Props) => ( -
+ {({ width = 0 }) => (
@@ -36,7 +36,7 @@ export const KeyDetailsSubheader = ({ keyType, Actions }: Props) => (
)} -
+ ) export default KeyDetailsSubheader diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/ZSetDetails.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/ZSetDetails.tsx index 8c54e74096..53c5cf9a94 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/ZSetDetails.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/ZSetDetails.tsx @@ -9,6 +9,7 @@ import { KeyDetailsHeader, KeyDetailsHeaderProps, } from 'uiSrc/pages/browser/modules' +import { Col, FlexItem } from 'uiSrc/components/base/layout/flex' import { ZSetDetailsTable } from './zset-details-table' import AddZsetMembers from './add-zset-members/AddZsetMembers' import { AddItemsAction } from '../key-details-actions' @@ -50,22 +51,27 @@ const ZSetDetails = (props: Props) => { ) return ( -
+ -
+ {!loading && ( -
+ -
+ )} {isAddItemPanelOpen && (
)} -
-
+ + ) } diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/add-zset-members/AddZsetMembers.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/add-zset-members/AddZsetMembers.tsx index d1983c37a8..a61a0216c0 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/add-zset-members/AddZsetMembers.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/add-zset-members/AddZsetMembers.tsx @@ -2,13 +2,7 @@ import React, { ChangeEvent, useEffect, useRef, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { toNumber } from 'lodash' import cx from 'classnames' -import { - EuiButton, - EuiFieldText, - EuiFormRow, - EuiPanel, - EuiTextColor, -} from '@elastic/eui' +import { EuiFieldText, EuiFormRow, EuiPanel } from '@elastic/eui' import { stringToBuffer, validateScoreNumber } from 'uiSrc/utils' import { isNaNConvertedString } from 'uiSrc/utils/numbers' @@ -28,6 +22,10 @@ import AddMultipleFields from 'uiSrc/pages/browser/components/add-multiple-field import { ISetMemberState } from 'uiSrc/pages/browser/components/add-key/AddKeySet/interfaces' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -250,28 +248,24 @@ const AddZsetMembers = (props: Props) => {
- closePanel(true)} data-testid="cancel-members-btn" > - Cancel - + Cancel +
- Save - +
From e8369249b65cd01b810002b2014fd26227a0ed70 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Mon, 12 May 2025 14:59:00 +0300 Subject: [PATCH 027/154] command helper --- .../CommandHelperHeader/CommandHelperHeader.tsx | 16 +++++++++------- .../command-helper-info/CHCommandInfo.tsx | 8 +++++--- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx b/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx index 0cdb1d22ef..c3899c00de 100644 --- a/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx +++ b/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx @@ -2,7 +2,7 @@ import React from 'react' import { useDispatch } from 'react-redux' import { useParams } from 'react-router-dom' -import { EuiButtonIcon, EuiText, EuiToolTip, EuiIcon } from '@elastic/eui' +import { EuiText, EuiToolTip, EuiIcon } from '@elastic/eui' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { resetCliHelperSettings, @@ -13,6 +13,8 @@ import { OnboardingTour } from 'uiSrc/components' import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { MinusIcon, CancelSlimIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' const CommandHelperHeader = () => { @@ -61,9 +63,9 @@ const CommandHelperHeader = () => { display="inlineBlock" anchorClassName="flex-row" > - { display="inlineBlock" anchorClassName="flex-row" > - { return (
- Date: Mon, 12 May 2025 15:17:45 +0300 Subject: [PATCH 028/154] refactor window controls --- .../base/shared/WindowControlGroup.tsx | 59 +++++++++++++++++++ .../cli/components/cli-header/CliHeader.tsx | 45 +++----------- .../CommandHelperHeader.tsx | 47 +++------------ 3 files changed, 75 insertions(+), 76 deletions(-) create mode 100644 redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx diff --git a/redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx b/redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx new file mode 100644 index 0000000000..ace7dcaea9 --- /dev/null +++ b/redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx @@ -0,0 +1,59 @@ +import { EuiToolTip } from '@elastic/eui' +import React from 'react' +import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CancelSlimIcon, MinusIcon } from 'uiSrc/components/base/icons' + +type Props = { + onClose: () => void + onHide: () => void + id?: string + label?: string + closeContent?: string + hideContent?: string +} +export const WindowControlGroup = ({ + onClose, + onHide, + id, + label, + closeContent = 'Close', + hideContent = 'Minimize', +}: Props) => ( + + + + + + + + + + + + +) diff --git a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx b/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx index b85c051b98..c1ec613f4b 100644 --- a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx +++ b/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react' import { useDispatch } from 'react-redux' import { useParams } from 'react-router-dom' -import { EuiButtonIcon, EuiText, EuiToolTip, EuiIcon } from '@elastic/eui' +import { EuiText, EuiIcon } from '@elastic/eui' import { toggleCli, @@ -16,6 +16,7 @@ import { OnboardingTour } from 'uiSrc/components' import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { WindowControlGroup } from 'uiSrc/components/base/shared/WindowControlGroup' import styles from './styles.module.scss' const CliHeader = () => { @@ -73,42 +74,12 @@ const CliHeader = () => { - - - - - - - - - - +
) diff --git a/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx b/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx index c3899c00de..47abc1d896 100644 --- a/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx +++ b/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx @@ -2,7 +2,7 @@ import React from 'react' import { useDispatch } from 'react-redux' import { useParams } from 'react-router-dom' -import { EuiText, EuiToolTip, EuiIcon } from '@elastic/eui' +import { EuiText, EuiIcon } from '@elastic/eui' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { resetCliHelperSettings, @@ -13,8 +13,7 @@ import { OnboardingTour } from 'uiSrc/components' import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { MinusIcon, CancelSlimIcon } from 'uiSrc/components/base/icons' +import { WindowControlGroup } from 'uiSrc/components/base/shared/WindowControlGroup' import styles from './styles.module.scss' const CommandHelperHeader = () => { @@ -56,42 +55,12 @@ const CommandHelperHeader = () => { - - - - - - - - - - +
) From 0f0e74f1349edf727aa8cf52929a9d6c3bb6dcab Mon Sep 17 00:00:00 2001 From: pd-redis Date: Mon, 12 May 2025 16:18:03 +0300 Subject: [PATCH 029/154] checkpoint --- .../ui/src/assets/img/icons/three_dots.svg | 8 ++--- .../components/base/icons/ThreeDotsIcon.tsx | 8 +++++ .../ui/src/components/base/icons/index.ts | 1 + .../RemoveListElements.tsx | 32 +++++++++---------- .../AddItemFieldAction.tsx | 8 +++-- .../rejson-details/styles.module.scss | 3 +- .../DatabasesListWrapper.tsx | 22 ++++++------- 7 files changed, 46 insertions(+), 36 deletions(-) create mode 100644 redisinsight/ui/src/components/base/icons/ThreeDotsIcon.tsx diff --git a/redisinsight/ui/src/assets/img/icons/three_dots.svg b/redisinsight/ui/src/assets/img/icons/three_dots.svg index 3f5dc306a5..159f4658cf 100644 --- a/redisinsight/ui/src/assets/img/icons/three_dots.svg +++ b/redisinsight/ui/src/assets/img/icons/three_dots.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/redisinsight/ui/src/components/base/icons/ThreeDotsIcon.tsx b/redisinsight/ui/src/components/base/icons/ThreeDotsIcon.tsx new file mode 100644 index 0000000000..ee680ceaeb --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/ThreeDotsIcon.tsx @@ -0,0 +1,8 @@ +import React from 'react' + +import ThreeDotsSvg from 'uiSrc/assets/img/icons/three_dots.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' + +export const ThreeDotsIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index 0378853ade..c06f3478e4 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -12,6 +12,7 @@ export { RawMode as RawModeIcon } from './RawMode' export { RedisLogo } from './RedisLogo' export { ShrinkIcon } from './ShrinkIcon' export { Trigger } from './Trigger' +export { ThreeDotsIcon } from './ThreeDotsIcon' export { UserInCircle } from './UserInCircle' export * from '@redislabsdev/redis-ui-icons' diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/remove-list-elements/RemoveListElements.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/remove-list-elements/RemoveListElements.tsx index 4b6ff0b62f..3cfd5fb47d 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/remove-list-elements/RemoveListElements.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/remove-list-elements/RemoveListElements.tsx @@ -3,8 +3,6 @@ import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' import { toNumber } from 'lodash' import { - EuiButton, - EuiTextColor, EuiFormRow, EuiFieldText, EuiPanel, @@ -43,6 +41,12 @@ import { import { AddListFormConfig as config } from 'uiSrc/pages/browser/components/add-key/constants/fields-config' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { + DestructiveButton, + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' +import { DeleteIcon } from 'uiSrc/components/base/icons' import { DeleteListElementsDto } from 'apiSrc/modules/browser/list/dto' import { @@ -174,16 +178,13 @@ const RemoveListElements = (props: Props) => { panelClassName={styles.panelCancelBtn} panelPaddingSize="l" button={ - Remove - + } >
@@ -208,17 +209,15 @@ const RemoveListElements = (props: Props) => { )} - Remove - +
) @@ -308,13 +307,12 @@ const RemoveListElements = (props: Props) => {
- closePanel(true)} data-testid="cancel-elements-btn" > - Cancel - + Cancel +
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item-field-action/AddItemFieldAction.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item-field-action/AddItemFieldAction.tsx index 26450a51f7..97b99f0011 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item-field-action/AddItemFieldAction.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item-field-action/AddItemFieldAction.tsx @@ -1,5 +1,6 @@ import React from 'react' -import { EuiButtonIcon } from '@elastic/eui' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { PlusIcon } from 'uiSrc/components/base/icons' import { getBrackets } from '../../utils' import styles from '../../styles.module.scss' @@ -12,8 +13,9 @@ export interface Props { const AddItemFieldAction = ({ leftPadding, type, onClickSetKVPair }: Props) => (
{getBrackets(type, 'end')} - { }) const controlsButton = (instanceId: string) => ( - toggleControlsPopover(instanceId)} - /> + > + â‹® + ) const columns: EuiTableFieldDataColumnType[] = useMemo( @@ -455,8 +455,8 @@ const DatabasesListWrapper = (props: Props) => { content="Copy" anchorClassName="copyHostPortTooltip" > - handleCopy(text, id)} @@ -585,8 +585,8 @@ const DatabasesListWrapper = (props: Props) => { <> {databaseManagementFeature?.flag && ( - Date: Mon, 12 May 2025 16:24:42 +0300 Subject: [PATCH 030/154] stream --- .../add-key/AddKeyStream/AddKeyStream.tsx | 2 +- .../stream-items-action/StreamItemsAction.tsx | 21 +++++++++++-------- .../no-key-selected/NoKeySelected.tsx | 9 ++++---- 3 files changed, 18 insertions(+), 14 deletions(-) diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyStream/AddKeyStream.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyStream/AddKeyStream.tsx index 52a574469a..1e86cab928 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyStream/AddKeyStream.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyStream/AddKeyStream.tsx @@ -113,7 +113,7 @@ const AddKeyStream = (props: Props) => { borderRadius="none" style={{ border: 'none' }} > - +
( > <> {width > MIDDLE_SCREEN_RESOLUTION ? ( - {title} - + ) : ( - { position="left" anchorClassName={styles.closeRightPanel} > - Date: Tue, 13 May 2025 11:10:05 +0300 Subject: [PATCH 031/154] monitor, browser search, connection --- .../src/assets/img/icons/minus_in_circle.svg | 4 ++ .../ui/src/assets/img/icons/play-filled.svg | 2 +- .../ui/src/assets/img/icons/vector.svg | 2 +- .../base/forms/buttons/EmptyButton.tsx | 2 +- .../base/forms/buttons/button.styles.ts | 2 +- .../src/components/base/icons/BannedIcon.tsx | 7 ++ .../ui/src/components/base/icons/Icon.tsx | 2 +- .../components/base/icons/MinusInCircle.tsx | 7 ++ .../src/components/base/icons/PlayFilled.tsx | 6 +- .../ui/src/components/base/icons/index.ts | 4 +- .../base/layout/flex/flex.styles.ts | 18 ++++- .../base/shared/WindowControlGroup.tsx | 4 +- .../cli/components/cli-header/CliHeader.tsx | 1 - .../components/monitor/Monitor/Monitor.tsx | 15 ++-- .../monitor/MonitorHeader/MonitorHeader.tsx | 68 ++++++------------- .../monitor/MonitorLog/MonitorLog.tsx | 28 ++++---- .../monitor/MonitorLog/styles.module.scss | 1 - .../BrowserSearchPanel.tsx | 25 ++++--- .../components/keys-header/KeysHeader.tsx | 46 ++++++------- .../RediSearchIndexesList.tsx | 28 ++++---- .../redisearch-key-list/styles.module.scss | 4 +- .../edit-item-action/EditItemAction.tsx | 9 +-- .../remove-items-action/RemoveItemsAction.tsx | 9 +-- .../EditItemFieldAction.tsx | 2 +- .../rejson-details/RejsonDetails.tsx | 3 +- .../DatabasesListWrapper.tsx | 15 ++-- .../components/CloneConnection.tsx | 12 ++-- .../slow-log/components/Actions/Actions.tsx | 10 +-- 28 files changed, 174 insertions(+), 162 deletions(-) create mode 100644 redisinsight/ui/src/assets/img/icons/minus_in_circle.svg create mode 100644 redisinsight/ui/src/components/base/icons/BannedIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/MinusInCircle.tsx diff --git a/redisinsight/ui/src/assets/img/icons/minus_in_circle.svg b/redisinsight/ui/src/assets/img/icons/minus_in_circle.svg new file mode 100644 index 0000000000..4e8132d4bb --- /dev/null +++ b/redisinsight/ui/src/assets/img/icons/minus_in_circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/redisinsight/ui/src/assets/img/icons/play-filled.svg b/redisinsight/ui/src/assets/img/icons/play-filled.svg index f3e9a02a83..2efccf9171 100644 --- a/redisinsight/ui/src/assets/img/icons/play-filled.svg +++ b/redisinsight/ui/src/assets/img/icons/play-filled.svg @@ -1,4 +1,4 @@ - + diff --git a/redisinsight/ui/src/assets/img/icons/vector.svg b/redisinsight/ui/src/assets/img/icons/vector.svg index c367a6e31e..08d04a23ab 100644 --- a/redisinsight/ui/src/assets/img/icons/vector.svg +++ b/redisinsight/ui/src/assets/img/icons/vector.svg @@ -1,3 +1,3 @@ - + diff --git a/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx index e288c681f9..0179571076 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx @@ -1,7 +1,7 @@ import React from 'react' import { TextButton } from '@redislabsdev/redis-ui-components' -import { IconType } from '@redislabsdev/redis-ui-icons' import { ButtonIcon } from 'uiSrc/components/base/forms/buttons/Button' +import { IconType } from 'uiSrc/components/base/icons' export type ButtonProps = React.ComponentProps & { icon?: IconType diff --git a/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts b/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts index 3ea0405d27..c51f79ffd9 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts +++ b/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts @@ -1,6 +1,6 @@ import React from 'react' import { Button } from '@redislabsdev/redis-ui-components' -import { IconType } from '@redislabsdev/redis-ui-icons' +import { IconType } from 'uiSrc/components/base/icons' export type BaseButtonProps = React.ComponentProps & { icon?: IconType diff --git a/redisinsight/ui/src/components/base/icons/BannedIcon.tsx b/redisinsight/ui/src/components/base/icons/BannedIcon.tsx new file mode 100644 index 0000000000..7bdb7c117c --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/BannedIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import BanIconSvg from 'uiSrc/assets/img/monitor/ban.svg?react' + +export const BannedIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/Icon.tsx b/redisinsight/ui/src/components/base/icons/Icon.tsx index 8f342a852d..dd63213fa2 100644 --- a/redisinsight/ui/src/components/base/icons/Icon.tsx +++ b/redisinsight/ui/src/components/base/icons/Icon.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { MonochromeIconProps } from '@redislabsdev/redis-ui-icons' import { useTheme } from '@redislabsdev/redis-ui-styles' +import { MonochromeIconProps } from 'uiSrc/components/base/icons' type BaseIconProps = MonochromeIconProps & { icon: React.ComponentType diff --git a/redisinsight/ui/src/components/base/icons/MinusInCircle.tsx b/redisinsight/ui/src/components/base/icons/MinusInCircle.tsx new file mode 100644 index 0000000000..166bbb2ed0 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/MinusInCircle.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import MinusInCircleSvg from 'uiSrc/assets/img/icons/minus_in_circle.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' + +export const MinusInCircleIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/PlayFilled.tsx b/redisinsight/ui/src/components/base/icons/PlayFilled.tsx index ddf4770ebc..f65d1679c7 100644 --- a/redisinsight/ui/src/components/base/icons/PlayFilled.tsx +++ b/redisinsight/ui/src/components/base/icons/PlayFilled.tsx @@ -1,7 +1,7 @@ import React from 'react' -import PlayFilledIcon from 'uiSrc/assets/img/icons/play-filled.svg?react' +import PlayFilledSvg from 'uiSrc/assets/img/icons/play-filled.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' -export const PlayFilled = (props: IconProps) => ( - +export const PlayFilledIcon = (props: IconProps) => ( + ) diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index c06f3478e4..254f6b124d 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -1,12 +1,14 @@ +export { BannedIcon } from './BannedIcon' export { BulkActions } from './BulkActions' export { Cloud } from './Cloud' export { Copilot } from './Copilot' export { ExtendIcon } from './ExtendIcon' export { Github } from './Github' export { Group as GroupModeIcon } from './Group' +export { MinusInCircleIcon } from './MinusInCircle' export { Icon } from './Icon' export { Play as PlayIcon } from './Play' -export { PlayFilled as PlayFilledIcon } from './PlayFilled' +export { PlayFilledIcon } from './PlayFilled' export { PlusInCircle as PlusInCircleIcon } from './PlusInCircle' export { RawMode as RawModeIcon } from './RawMode' export { RedisLogo } from './RedisLogo' diff --git a/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts b/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts index 64a382132a..23c4187af8 100644 --- a/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts +++ b/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts @@ -250,11 +250,27 @@ export type FlexItemProps = React.HTMLAttributes & PropsWithChildren & CommonProps & { grow?: (typeof VALID_GROW_VALUES)[number] + $direction?: (typeof dirValues)[number] } export const StyledFlexItem = styled.div` display: flex; - flex-direction: column; + flex-direction: ${({ $direction = 'column' }) => { + if (!dirValues.includes($direction)) { + return 'column' + } + switch ($direction) { + case 'row': + return 'row' + case 'rowReverse': + return 'row-reverse' + case 'column': + return 'column' + case 'columnReverse': + default: + return 'column-reverse' + } + }}; ${(props) => { const { grow } = props if (!grow) { diff --git a/redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx b/redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx index ace7dcaea9..5600966afa 100644 --- a/redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx +++ b/redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx @@ -32,7 +32,7 @@ export const WindowControlGroup = ({ size="S" icon={MinusIcon} id={`hide-${id}`} - aria-label={`hide ${label}`} + aria-label={`hide ${label || id || ''}`} data-testid={`hide-${id}`} onClick={onHide} /> @@ -49,7 +49,7 @@ export const WindowControlGroup = ({ size="S" icon={CancelSlimIcon} id={`close-${id}`} - aria-label={`close ${label}`} + aria-label={`close ${label || id || ''}`} data-testid={`close-${id}`} onClick={onClose} /> diff --git a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx b/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx index c1ec613f4b..30726ebcf6 100644 --- a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx +++ b/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx @@ -78,7 +78,6 @@ const CliHeader = () => { onClose={handleCloseCli} onHide={handleHideCli} id="cli" - label="cli" />
diff --git a/redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx b/redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx index 8980118d5f..ed5694b2bd 100644 --- a/redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx +++ b/redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx @@ -1,18 +1,14 @@ import React, { useState } from 'react' import cx from 'classnames' -import { - EuiButtonIcon, - EuiIcon, - EuiSwitch, - EuiTextColor, - EuiToolTip, -} from '@elastic/eui' +import { EuiIcon, EuiSwitch, EuiTextColor, EuiToolTip } from '@elastic/eui' import AutoSizer from 'react-virtualized-auto-sizer' import { IMonitorDataPayload } from 'uiSrc/slices/interfaces' import BanIcon from 'uiSrc/assets/img/monitor/ban.svg?react' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { PlayFilledIcon } from 'uiSrc/components/base/icons' import MonitorLog from '../MonitorLog' import MonitorOutputList from '../MonitorOutputList' @@ -48,10 +44,9 @@ const Monitor = (props: Props) => {
- handleRunMonitor(saveLogValue)} aria-label="start monitor" data-testid="start-monitor" diff --git a/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx b/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx index 94fd80f7ed..9432c3e8bd 100644 --- a/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx +++ b/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx @@ -2,7 +2,7 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' import { useParams } from 'react-router-dom' -import { EuiButtonIcon, EuiText, EuiToolTip, EuiIcon } from '@elastic/eui' +import { EuiText, EuiToolTip, EuiIcon } from '@elastic/eui' import { monitorSelector, @@ -12,11 +12,18 @@ import { toggleMonitor, } from 'uiSrc/slices/cli/monitor' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' -import BanIcon from 'uiSrc/assets/img/monitor/ban.svg' import { OnboardingTour } from 'uiSrc/components' import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { + PlayIcon, + PauseIcon, + DeleteIcon, + BannedIcon, +} from 'uiSrc/components/base/icons' +import { WindowControlGroup } from 'uiSrc/components/base/shared/WindowControlGroup' import styles from './styles.module.scss' export interface Props { @@ -84,7 +91,7 @@ const MonitorHeader = ({ handleRunMonitor }: Props) => { {isStarted && ( - + { } anchorClassName="inline-flex" > - handleRunMonitor()} aria-label="start/stop monitor" @@ -117,8 +124,8 @@ const MonitorHeader = ({ handleRunMonitor }: Props) => { transparent: !isStarted || !items.length, })} > - { )} - - - - - - - - - - +
) diff --git a/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx b/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx index 78435247ef..0b8b6cec8e 100644 --- a/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx +++ b/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx @@ -1,4 +1,4 @@ -import { EuiButton, EuiIcon, EuiText } from '@elastic/eui' +import { EuiIcon, EuiText } from '@elastic/eui' import { format, formatDuration, intervalToDuration } from 'date-fns' import React from 'react' import { useDispatch, useSelector } from 'react-redux' @@ -14,6 +14,11 @@ import { downloadFile } from 'uiSrc/utils/dom/downloadFile' import { fetchMonitorLog } from 'uiSrc/slices/cli/cli-output' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' +import { RefreshIcon, DownloadIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' const PADDINGS_OUTSIDE = 12 @@ -63,7 +68,7 @@ const MonitorLog = () => { style={{ display: 'none' }} /> - {({ width }) => ( + {({ width = 0 }) => (
{ {isSaveToFile && ( - { > {width > SMALL_SCREEN_RESOLUTION && ' Download '} Log - + )} - Reset {width > SMALL_SCREEN_RESOLUTION && ' Profiler'} - +
diff --git a/redisinsight/ui/src/components/monitor/MonitorLog/styles.module.scss b/redisinsight/ui/src/components/monitor/MonitorLog/styles.module.scss index 64ef4dc966..66b2ec88f4 100644 --- a/redisinsight/ui/src/components/monitor/MonitorLog/styles.module.scss +++ b/redisinsight/ui/src/components/monitor/MonitorLog/styles.module.scss @@ -29,7 +29,6 @@ .btn { height: 36px !important; line-height: 36px !important; - box-shadow: none !important; } .container { diff --git a/redisinsight/ui/src/pages/browser/components/browser-search-panel/BrowserSearchPanel.tsx b/redisinsight/ui/src/pages/browser/components/browser-search-panel/BrowserSearchPanel.tsx index 002cf23216..114080e870 100644 --- a/redisinsight/ui/src/pages/browser/components/browser-search-panel/BrowserSearchPanel.tsx +++ b/redisinsight/ui/src/pages/browser/components/browser-search-panel/BrowserSearchPanel.tsx @@ -1,10 +1,16 @@ /* eslint-disable react/no-this-in-sfc */ /* eslint-disable react/destructuring-assignment */ -import React, { FC, SVGProps, useCallback, useState } from 'react' +import React, { useCallback, useState } from 'react' import cx from 'classnames' -import { EuiButtonIcon, EuiModal, EuiModalBody, EuiToolTip } from '@elastic/eui' +import { EuiModal, EuiModalBody, EuiToolTip } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' +import { + BulkActions as BulkActionsIcon, + FilterTableIcon, + QuerySearchIcon, + IconType, +} from 'uiSrc/components/base/icons' import { FeatureFlagComponent, ModuleNotLoaded, @@ -16,10 +22,6 @@ import FilterKeyType from 'uiSrc/pages/browser/components/filter-key-type' import RediSearchIndexesList from 'uiSrc/pages/browser/components/redisearch-key-list' import SearchKeyList from 'uiSrc/pages/browser/components/search-key-list' -import { BulkActions as BulkActionsIcon } from 'uiSrc/components/base/icons' -import VectorIcon from 'uiSrc/assets/img/icons/vector.svg?react' -import RediSearchIcon from 'uiSrc/assets/img/modules/RedisSearchLight.svg?react' - import { changeSearchMode, keysSelector } from 'uiSrc/slices/browser/keys' import { isRedisearchAvailable } from 'uiSrc/utils' import { @@ -39,6 +41,7 @@ import { setBulkActionType } from 'uiSrc/slices/browser/bulkActions' import { RedisDefaultModules } from 'uiSrc/slices/interfaces' import { + IconButton, PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' @@ -53,7 +56,7 @@ interface ISwitchType { getClassName: () => string onClick: () => void isActiveView: () => boolean - getIconType: () => string | FC> + getIconType: () => IconType } export interface Props { @@ -87,7 +90,7 @@ const BrowserSearchPanel = (props: Props) => { }) }, getIconType() { - return VectorIcon + return FilterTableIcon }, onClick() { handleSwitchSearchMode(this.type) @@ -108,7 +111,7 @@ const BrowserSearchPanel = (props: Props) => { }) }, getIconType() { - return RediSearchIcon + return QuerySearchIcon }, onClick() { if (this.disabled) { @@ -177,9 +180,9 @@ const BrowserSearchPanel = (props: Props) => { }, []) const SwitchModeBtn = (item: ISwitchType) => ( - item.onClick?.()} data-testid={item.dataTestId} diff --git a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx index 763f4fea0c..c7a393bdb0 100644 --- a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx +++ b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx @@ -1,19 +1,16 @@ /* eslint-disable react/destructuring-assignment */ /* eslint-disable react/no-this-in-sfc */ -import { - EuiButton, - EuiButtonIcon, - EuiCheckbox, - EuiIcon, - EuiPopover, - EuiToolTip, -} from '@elastic/eui' +import { EuiCheckbox, EuiIcon, EuiPopover, EuiToolTip } from '@elastic/eui' import cx from 'classnames' -import React, { FC, Ref, SVGProps, useRef, useState } from 'react' +import React, { Ref, useRef, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import AutoSizer from 'react-virtualized-auto-sizer' -import ColumnsIcon from 'uiSrc/assets/img/icons/columns.svg?react' -import TreeViewIcon from 'uiSrc/assets/img/icons/treeview.svg?react' +import { + IconType, + ColumnsIcon, + EqualIcon, + FoldersIcon, +} from 'uiSrc/components/base/icons' import KeysSummary from 'uiSrc/components/keys-summary' import { SCAN_COUNT_DEFAULT, @@ -55,6 +52,10 @@ import { BrowserColumns, KeyValueFormat } from 'uiSrc/constants' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { setConnectivityError } from 'uiSrc/slices/app/connectivity' +import { + IconButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' const HIDE_REFRESH_LABEL_WIDTH = 640 @@ -68,7 +69,7 @@ interface ISwitchType { getClassName: () => string onClick: () => void isActiveView: () => boolean - getIconType: () => string | FC> + getIconType: () => IconType } export interface Props { @@ -120,7 +121,7 @@ const KeysHeader = (props: Props) => { return cx(styles.viewTypeBtn, { [styles.active]: this.isActiveView() }) }, getIconType() { - return 'menu' + return EqualIcon }, onClick() { handleSwitchView(this.type) @@ -141,7 +142,7 @@ const KeysHeader = (props: Props) => { return cx(styles.viewTypeBtn, { [styles.active]: this.isActiveView() }) }, getIconType() { - return TreeViewIcon + return FoldersIcon }, onClick() { handleSwitchView(this.type) @@ -295,10 +296,10 @@ const KeysHeader = (props: Props) => { position="top" key={view.tooltipText} > - view.onClick()} data-testid={view.dataTestId} @@ -347,7 +348,7 @@ const KeysHeader = (props: Props) => { searchMode === SearchMode.Redisearch && !selectedIndex } disabledRefreshButtonMessage="Select an index to refresh keys." - iconSize="xs" + iconSize="S" postfix="keys" loading={loading} lastRefreshTime={keysState.lastRefreshTime} @@ -367,10 +368,9 @@ const KeysHeader = (props: Props) => { panelClassName={styles.popoverWrapper} closePopover={() => setColumnsConfigShown(false)} button={ - { Columns - + } > diff --git a/redisinsight/ui/src/pages/browser/components/redisearch-key-list/RediSearchIndexesList.tsx b/redisinsight/ui/src/pages/browser/components/redisearch-key-list/RediSearchIndexesList.tsx index 7f9f4a48ed..112931922d 100644 --- a/redisinsight/ui/src/pages/browser/components/redisearch-key-list/RediSearchIndexesList.tsx +++ b/redisinsight/ui/src/pages/browser/components/redisearch-key-list/RediSearchIndexesList.tsx @@ -1,15 +1,10 @@ -import { - EuiButtonEmpty, - EuiButtonIcon, - EuiSuperSelect, - EuiSuperSelectOption, - EuiToolTip, -} from '@elastic/eui' +import { EuiSuperSelect, EuiSuperSelectOption, EuiToolTip } from '@elastic/eui' import cx from 'classnames' import React, { useEffect, useState } from 'react' import { isString } from 'lodash' import { useDispatch, useSelector } from 'react-redux' +import styled from 'styled-components' import { setSelectedIndex, redisearchSelector, @@ -39,6 +34,8 @@ import { localStorageService } from 'uiSrc/services' import { BrowserStorageItem } from 'uiSrc/constants' import { OutsideClickDetector } from 'uiSrc/components/base/utils' +import { EmptyButton, IconButton } from 'uiSrc/components/base/forms/buttons' +import { RefreshIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export const CREATE = 'create' @@ -178,20 +175,20 @@ const RediSearchIndexesList = (props: Props) => { data-testid="select-search-mode" /> {!selectedIndex && ( - setIsSelectOpen(true)} data-testid="select-index-placeholder" > Select Index - + )}
- { ) } +const Button = styled(EmptyButton)` + justify-content: flex-start; + max-width: 200px; + padding-left: 1.275rem; + padding-right: 2.4rem; +` + export default RediSearchIndexesList diff --git a/redisinsight/ui/src/pages/browser/components/redisearch-key-list/styles.module.scss b/redisinsight/ui/src/pages/browser/components/redisearch-key-list/styles.module.scss index 9ba0dd2a89..669e2a159f 100644 --- a/redisinsight/ui/src/pages/browser/components/redisearch-key-list/styles.module.scss +++ b/redisinsight/ui/src/pages/browser/components/redisearch-key-list/styles.module.scss @@ -162,10 +162,10 @@ right: 1px; transform: translateY(-50%); z-index: 6; + height: 100%; + width: 32px; .refreshBtn { - width: 30px; - &:hover { transform: translateY(0) !important; } diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/edit-item-action/EditItemAction.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/edit-item-action/EditItemAction.tsx index 7917316f89..a235089d49 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/edit-item-action/EditItemAction.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/edit-item-action/EditItemAction.tsx @@ -1,7 +1,9 @@ import React from 'react' -import { EuiButtonIcon, EuiToolTip } from '@elastic/eui' +import { EuiToolTip } from '@elastic/eui' import { Nullable } from 'uiSrc/utils' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { EditIcon } from 'uiSrc/components/base/icons' import styles from '../styles.module.scss' export interface Props { @@ -19,10 +21,9 @@ const EditItemAction = ({ }: Props) => (
- ( position="left" anchorClassName={styles.actionBtn} > - { }) const controlsButton = (instanceId: string) => ( - toggleControlsPopover(instanceId)} - > - â‹® - + /> ) const columns: EuiTableFieldDataColumnType[] = useMemo( diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/CloneConnection.tsx b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/CloneConnection.tsx index 29c812cc0e..8dde9309fb 100644 --- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/CloneConnection.tsx +++ b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/CloneConnection.tsx @@ -1,8 +1,9 @@ import React from 'react' -import { EuiButton } from '@elastic/eui' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' +import { CopyIcon } from 'uiSrc/components/base/icons' export interface Props { id?: string @@ -26,16 +27,15 @@ const CloneConnection = (props: Props) => { <> - Clone Connection - + diff --git a/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx b/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx index 06d875eb12..6eb0974a37 100644 --- a/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx +++ b/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx @@ -1,14 +1,8 @@ -import { - EuiIcon, - EuiPopover, - EuiText, - EuiToolTip, -} from '@elastic/eui' +import { EuiIcon, EuiPopover, EuiText, EuiToolTip } from '@elastic/eui' import React, { useState } from 'react' import { useSelector } from 'react-redux' import cx from 'classnames' import { useParams } from 'react-router-dom' -import { EraserIcon } from '@redislabsdev/redis-ui-icons' import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' import { DurationUnits } from 'uiSrc/constants' import { slowLogSelector } from 'uiSrc/slices/analytics/slowlog' @@ -17,12 +11,12 @@ import { Nullable } from 'uiSrc/utils' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { EraserIcon, SettingsIcon } from 'uiSrc/components/base/icons' import { DestructiveButton, IconButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' -import { SettingsIcon } from 'uiSrc/components/base/icons' import SlowLogConfig from '../SlowLogConfig' import styles from './styles.module.scss' From 321112b0df970df003a74bd17b8e8c1895df8def Mon Sep 17 00:00:00 2001 From: pd-redis Date: Tue, 13 May 2025 11:23:40 +0300 Subject: [PATCH 032/154] InstanceHeader.tsx, WbNoResultsMessage.tsx --- .../instance-header/InstanceHeader.tsx | 16 ++++++---------- .../insights-trigger/InsightsTrigger.tsx | 16 +++++++--------- .../wb-no-results-message/WbNoResultsMessage.tsx | 13 ++++++------- 3 files changed, 19 insertions(+), 26 deletions(-) diff --git a/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx b/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx index f1457042dd..ef7c0a23aa 100644 --- a/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx +++ b/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx @@ -2,13 +2,7 @@ import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' import cx from 'classnames' -import { - EuiButtonEmpty, - EuiFieldNumber, - EuiIcon, - EuiText, - EuiToolTip, -} from '@elastic/eui' +import { EuiFieldNumber, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui' import { FeatureFlags, Pages } from 'uiSrc/constants' import { selectOnFocus, validateNumber } from 'uiSrc/utils' @@ -41,6 +35,8 @@ import { getConfig } from 'uiSrc/config' import { appReturnUrlSelector } from 'uiSrc/slices/app/url-handling' import UserProfile from 'uiSrc/components/instance-header/components/user-profile/UserProfile' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { EmptyButton } from 'uiSrc/components/base/forms/buttons' +import { EditIcon } from 'uiSrc/components/base/icons' import InstancesNavigationPopover from './components/instances-navigation-popover' import styles from './styles.module.scss' @@ -243,8 +239,8 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => {
) : ( - setIsDbIndexEditing(true)} className={styles.buttonDbIndex} @@ -259,7 +255,7 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => { > db{db || 0} - + )}
diff --git a/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx b/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx index 1462b23955..e83d868834 100644 --- a/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx +++ b/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from 'react' import cx from 'classnames' -import { EuiButton, EuiToolTip } from '@elastic/eui' +import { EuiToolTip } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { useLocation, useParams } from 'react-router-dom' @@ -12,8 +12,6 @@ import { toggleSidePanel, } from 'uiSrc/slices/panels/sidePanels' -import TriggerIcon from 'uiSrc/assets/img/bulb.svg?react' - import { recommendationsSelector, resetRecommendationsHighlighting, @@ -26,6 +24,8 @@ import { } from 'uiSrc/telemetry' import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { LightBulbIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export interface Props { @@ -88,20 +88,18 @@ const InsightsTrigger = (props: Props) => { : 'Open interactive tutorials to learn more about Redis or Redis Stack capabilities, or use tips to improve your database.' } > - {isHighlighted && instanceId && ( )} - +
) diff --git a/redisinsight/ui/src/pages/workbench/components/wb-no-results-message/WbNoResultsMessage.tsx b/redisinsight/ui/src/pages/workbench/components/wb-no-results-message/WbNoResultsMessage.tsx index 2b6a9a4d60..b3504ff217 100644 --- a/redisinsight/ui/src/pages/workbench/components/wb-no-results-message/WbNoResultsMessage.tsx +++ b/redisinsight/ui/src/pages/workbench/components/wb-no-results-message/WbNoResultsMessage.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { EuiButton, EuiPanel, EuiText, EuiTitle, } from '@elastic/eui' +import { EuiPanel, EuiText, EuiTitle } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { useParams } from 'react-router-dom' @@ -13,10 +13,11 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import BulbImg from 'uiSrc/assets/img/workbench/bulb.svg' import ArrowToGuidesIcon from 'uiSrc/assets/img/workbench/arrow-to-guides.svg?react' -import TriggerIcon from 'uiSrc/assets/img/bulb.svg?react' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' +import { LightBulbIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' const WbNoResultsMessage = () => { @@ -84,16 +85,14 @@ const WbNoResultsMessage = () => {
- handleOpenInsights()} className={styles.exploreBtn} data-testid="no-results-explore-btn" > Explore - +
From 735ad961db18d34f9786e95e3b5147d70761d165 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Tue, 13 May 2025 13:22:55 +0300 Subject: [PATCH 033/154] rdi --- .../components/base/forms/buttons/Button.tsx | 49 ++++++++++++------- .../base/forms/buttons/button.styles.ts | 7 ++- .../database-overview/DatabaseOverview.tsx | 19 +++---- .../ui/src/packages/clients-list/yarn.lock | 10 ++-- .../ui/src/packages/redisearch/yarn.lock | 10 ++-- .../ui/src/packages/redisgraph/yarn.lock | 12 ++--- .../packages/redistimeseries-app/yarn.lock | 10 ++-- .../ui/src/packages/ri-explain/yarn.lock | 12 ++--- .../home/connection-form/ConnectionForm.tsx | 21 ++++---- .../rdi/home/empty-message/EmptyMessage.tsx | 11 ++--- .../src/pages/rdi/home/header/RdiHeader.tsx | 14 ++---- .../rdi/pipeline-management/pages/job/Job.tsx | 1 - .../SlowLogConfig/SlowLogConfig.tsx | 45 +++++++++-------- 13 files changed, 115 insertions(+), 106 deletions(-) diff --git a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx index d47a451c8a..affef0f3e7 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx @@ -10,25 +10,36 @@ export const BaseButton = ({ loading, size = 'medium', ...props -}: BaseButtonProps) => ( - -) +}: BaseButtonProps) => { + let btnSize: 'small' | 'medium' | 'large' = 'medium' + + if (size === 's') { + btnSize = 'small' + } else if (size === 'm') { + btnSize = 'medium' + } else if (size === 'l') { + btnSize = 'large' + } + return ( + + ) +} export type ButtonIconProps = Pick< BaseButtonProps, diff --git a/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts b/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts index c51f79ffd9..f6f1d21ce1 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts +++ b/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts @@ -1,11 +1,16 @@ import React from 'react' import { Button } from '@redislabsdev/redis-ui-components' +import { buttonSizes } from '@redislabsdev/redis-ui-components/dist/Button/Button.types' import { IconType } from 'uiSrc/components/base/icons' -export type BaseButtonProps = React.ComponentProps & { +export type BaseButtonProps = Omit< + React.ComponentProps, + 'size' +> & { icon?: IconType iconSide?: 'left' | 'right' loading?: boolean + size?: (typeof buttonSizes)[number] | 's' | 'm' | 'l' } export type ButtonProps = Omit export type SecondaryButtonProps = ButtonProps & { diff --git a/redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx b/redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx index 7cfa5cbdb0..aa3e8f1362 100644 --- a/redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx +++ b/redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx @@ -1,6 +1,6 @@ import React from 'react' import cx from 'classnames' -import { EuiButton, EuiIcon, EuiToolTip } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import { getConfig } from 'uiSrc/config' import { @@ -15,6 +15,7 @@ import MetricItem, { import { useDatabaseOverview } from 'uiSrc/components/database-overview/hooks/useDatabaseOverview' import { IMetric } from 'uiSrc/components/database-overview/components/OverviewMetrics' +import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' import AutoRefresh from '../auto-refresh' import styles from './styles.module.scss' @@ -37,9 +38,10 @@ const DatabaseOverview = () => { return ( - + {connectivityError && ( { className={styles.upgradeBtnItem} style={{ borderRight: 'none' }} > - = 75} + = 75} className={cx(styles.upgradeBtn)} style={{ fontWeight: '400' }} onClick={() => { @@ -69,7 +70,7 @@ const DatabaseOverview = () => { data-testid="upgrade-ri-db-button" > Upgrade plan - + )} {metrics?.map((overviewItem) => ( @@ -88,7 +89,7 @@ const DatabaseOverview = () => { { - Cancel - + - {editInstance ? 'Apply Changes' : 'Add Endpoint'} - + diff --git a/redisinsight/ui/src/pages/rdi/home/empty-message/EmptyMessage.tsx b/redisinsight/ui/src/pages/rdi/home/empty-message/EmptyMessage.tsx index 5018c95f9c..8181894f0b 100644 --- a/redisinsight/ui/src/pages/rdi/home/empty-message/EmptyMessage.tsx +++ b/redisinsight/ui/src/pages/rdi/home/empty-message/EmptyMessage.tsx @@ -1,4 +1,4 @@ -import { EuiButton, EuiIcon, EuiImage, EuiLink, EuiText } from '@elastic/eui' +import { EuiIcon, EuiImage, EuiLink, EuiText } from '@elastic/eui' import React, { useContext } from 'react' import { EXTERNAL_LINKS, UTM_MEDIUMS } from 'uiSrc/constants/links' @@ -11,6 +11,7 @@ import { Theme } from 'uiSrc/constants' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' const subTitleText = @@ -37,15 +38,13 @@ const EmptyMessage = ({ onAddInstanceClick }: Props) => { {subTitleText} - + Add RDI Endpoint - + or diff --git a/redisinsight/ui/src/pages/rdi/home/header/RdiHeader.tsx b/redisinsight/ui/src/pages/rdi/home/header/RdiHeader.tsx index a381221594..bcec86bc54 100644 --- a/redisinsight/ui/src/pages/rdi/home/header/RdiHeader.tsx +++ b/redisinsight/ui/src/pages/rdi/home/header/RdiHeader.tsx @@ -1,10 +1,10 @@ -import { EuiButton } from '@elastic/eui' import React from 'react' import { useSelector } from 'react-redux' import { instancesSelector } from 'uiSrc/slices/rdi/instances' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import SearchRdiList from '../search/SearchRdiList' export interface Props { @@ -16,20 +16,14 @@ const RdiHeader = ({ onRdiInstanceClick }: Props) => { return (
- + - + Endpoint - + {instances.length > 0 && ( diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.tsx index ec9a8735e2..d0b623e348 100644 --- a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.tsx +++ b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.tsx @@ -18,7 +18,6 @@ import { fetchPipelineStrategies, rdiPipelineSelector, setChangedFile, - setPipeline, setPipelineJobs, } from 'uiSrc/slices/rdi/pipeline' import { FileChangeType } from 'uiSrc/slices/interfaces' diff --git a/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/SlowLogConfig.tsx b/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/SlowLogConfig.tsx index 34fba4c157..aadc8335a9 100644 --- a/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/SlowLogConfig.tsx +++ b/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/SlowLogConfig.tsx @@ -1,6 +1,4 @@ import { - EuiButton, - EuiButtonEmpty, EuiFieldText, EuiForm, EuiFormRow, @@ -31,6 +29,12 @@ import { errorValidateNegativeInteger, validateNumber } from 'uiSrc/utils' import { numberWithSpaces } from 'uiSrc/utils/numbers' import { useConnectionType } from 'uiSrc/components/hooks/useConnectionType' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { + EmptyButton, + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' +import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { convertNumberByUnits } from '../../utils' import styles from './styles.module.scss' @@ -129,15 +133,13 @@ const SlowLogConfig = ({ closePopover, onRefresh }: Props) => { - Ok - + ) @@ -238,36 +240,33 @@ const SlowLogConfig = ({ closePopover, onRefresh }: Props) => { -
-
+ + NOTE: This is server configuration -
-
- + + Default - - + Cancel - - + Save - -
-
+ + + )}
From 42a16fb7749b1d2cee2145370770aff3eb6b6aef Mon Sep 17 00:00:00 2001 From: pd-redis Date: Tue, 13 May 2025 13:28:26 +0300 Subject: [PATCH 034/154] InlineItemEditor.tsx --- .../inline-item-editor/InlineItemEditor.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx index e92661e700..a847f8d16d 100644 --- a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx +++ b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx @@ -2,7 +2,6 @@ import React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react' import { capitalize } from 'lodash' import cx from 'classnames' import { - EuiButton, EuiFieldText, EuiForm, EuiToolTip, @@ -16,7 +15,10 @@ import { WindowEvent } from 'uiSrc/components/base/utils/WindowEvent' import { FocusTrap } from 'uiSrc/components/base/utils/FocusTrap' import { OutsideClickDetector } from 'uiSrc/components/base/utils' import { CancelSlimIcon, CheckThinIcon } from 'uiSrc/components/base/icons' -import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { + DestructiveButton, + IconButton, +} from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' @@ -283,17 +285,15 @@ const InlineItemEditor = (props: Props) => {
- Save - +
From 6803376e5e4f9f56e65f9b93b958424b4bb3df42 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Tue, 13 May 2025 16:57:32 +0300 Subject: [PATCH 035/154] rdi --- redisinsight/ui/src/assets/img/rdi/reset.svg | 2 +- .../base/forms/buttons/OutlineButton.tsx | 7 ----- .../components/base/forms/buttons/index.tsx | 2 -- .../src/components/base/icons/RIResetIcon.tsx | 7 +++++ .../components/base/icons/RIRocketIcon.tsx | 7 +++++ .../src/components/base/icons/RIStopIcon.tsx | 7 +++++ .../ui/src/components/base/icons/index.ts | 3 ++ .../import-file-modal/ImportFileModal.tsx | 30 +++++++------------ .../rdi-instance-header/RdiInstanceHeader.tsx | 2 +- .../instance-list/RdiInstancesListWrapper.tsx | 12 ++++---- .../instance/components/download/Download.tsx | 11 ++++--- .../DeployPipelineButton.tsx | 19 +++++------- .../ResetPipelineButton.tsx | 19 ++++++------ .../StartPipelineButton.tsx | 19 +++++------- .../StopPipelineButton.tsx | 19 +++++------- .../FetchPipelinePopover.tsx | 22 ++++++-------- .../RdiConfigFileActionMenu.tsx | 17 +++++------ .../components/jobs-panel/Panel.tsx | 14 ++++----- .../components/jobs-tree/JobsTree.tsx | 7 ++--- .../template-button/TemplateButton.tsx | 13 ++++---- .../components/template-form/TemplateForm.tsx | 20 ++++++------- .../template-popover/TemplatePopover.tsx | 9 +++--- .../pages/config/Config.tsx | 11 ++++--- .../rdi/pipeline-management/pages/job/Job.tsx | 24 +++++++-------- .../src/pages/rdi/statistics/empty/Empty.tsx | 9 +++--- 25 files changed, 150 insertions(+), 162 deletions(-) delete mode 100644 redisinsight/ui/src/components/base/forms/buttons/OutlineButton.tsx create mode 100644 redisinsight/ui/src/components/base/icons/RIResetIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/RIRocketIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/RIStopIcon.tsx diff --git a/redisinsight/ui/src/assets/img/rdi/reset.svg b/redisinsight/ui/src/assets/img/rdi/reset.svg index 87911554ce..e8c721ddec 100644 --- a/redisinsight/ui/src/assets/img/rdi/reset.svg +++ b/redisinsight/ui/src/assets/img/rdi/reset.svg @@ -1,4 +1,4 @@ - + diff --git a/redisinsight/ui/src/components/base/forms/buttons/OutlineButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/OutlineButton.tsx deleted file mode 100644 index 4a81e796b3..0000000000 --- a/redisinsight/ui/src/components/base/forms/buttons/OutlineButton.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' -import { OutlineButtonProps } from 'uiSrc/components/base/forms/buttons/button.styles' -import { SecondaryButton } from 'uiSrc/components/base/forms/buttons/SecondaryButton' - -export const OutlineButton = (props: OutlineButtonProps) => ( - -) diff --git a/redisinsight/ui/src/components/base/forms/buttons/index.tsx b/redisinsight/ui/src/components/base/forms/buttons/index.tsx index b5752ebf60..83a0f8ba48 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/index.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/index.tsx @@ -1,6 +1,5 @@ import { SecondaryButton } from 'uiSrc/components/base/forms/buttons/SecondaryButton' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons/PrimaryButton' -import { OutlineButton } from 'uiSrc/components/base/forms/buttons/OutlineButton' import { DestructiveButton } from 'uiSrc/components/base/forms/buttons/DestructiveButton' import { EmptyButton } from 'uiSrc/components/base/forms/buttons/EmptyButton' import { IconButton } from 'uiSrc/components/base/forms/buttons/IconButton' @@ -10,7 +9,6 @@ export { PrimaryButton, SecondaryButton, DestructiveButton, - OutlineButton, EmptyButton, IconButton, ActionIconButton, diff --git a/redisinsight/ui/src/components/base/icons/RIResetIcon.tsx b/redisinsight/ui/src/components/base/icons/RIResetIcon.tsx new file mode 100644 index 0000000000..806ad17859 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/RIResetIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import ResetSvg from 'uiSrc/assets/img/rdi/reset.svg?react' +import { Icon, IconProps } from './Icon' + +export const RiResetIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/RIRocketIcon.tsx b/redisinsight/ui/src/components/base/icons/RIRocketIcon.tsx new file mode 100644 index 0000000000..5c2f7689a1 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/RIRocketIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RocketSvg from 'uiSrc/assets/img/rdi/rocket.svg?react' +import { Icon, IconProps } from './Icon' + +export const RiRocketIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/RIStopIcon.tsx b/redisinsight/ui/src/components/base/icons/RIStopIcon.tsx new file mode 100644 index 0000000000..ebb45c8112 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/RIStopIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import StopIconSvg from 'uiSrc/assets/img/rdi/stopFilled.svg?react' +import { Icon, IconProps } from './Icon' + +export const RiStopIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index 254f6b124d..ce6c0dc82b 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -12,6 +12,9 @@ export { PlayFilledIcon } from './PlayFilled' export { PlusInCircle as PlusInCircleIcon } from './PlusInCircle' export { RawMode as RawModeIcon } from './RawMode' export { RedisLogo } from './RedisLogo' +export { RiResetIcon } from './RIResetIcon' +export { RiRocketIcon } from './RIRocketIcon' +export { RiStopIcon } from './RIStopIcon' export { ShrinkIcon } from './ShrinkIcon' export { Trigger } from './Trigger' export { ThreeDotsIcon } from './ThreeDotsIcon' diff --git a/redisinsight/ui/src/components/import-file-modal/ImportFileModal.tsx b/redisinsight/ui/src/components/import-file-modal/ImportFileModal.tsx index 664e11fb1a..a0eb9ad180 100644 --- a/redisinsight/ui/src/components/import-file-modal/ImportFileModal.tsx +++ b/redisinsight/ui/src/components/import-file-modal/ImportFileModal.tsx @@ -1,5 +1,4 @@ import { - EuiButton, EuiFilePicker, EuiIcon, EuiLoadingSpinner, @@ -19,6 +18,10 @@ import { Nullable } from 'uiSrc/utils' import { UploadWarning } from 'uiSrc/components' import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -147,36 +150,25 @@ const ImportFileModal = ({ {data && ( - + Ok - + )} {isShowForm && ( - + Cancel - + - {submitBtnText || 'Import'} - + )} diff --git a/redisinsight/ui/src/components/rdi-instance-header/RdiInstanceHeader.tsx b/redisinsight/ui/src/components/rdi-instance-header/RdiInstanceHeader.tsx index 34c24d69fb..105abb8e26 100644 --- a/redisinsight/ui/src/components/rdi-instance-header/RdiInstanceHeader.tsx +++ b/redisinsight/ui/src/components/rdi-instance-header/RdiInstanceHeader.tsx @@ -32,7 +32,7 @@ const RdiInstanceHeader = () => { return ( - +
- handleCopy(name, id)} @@ -220,8 +222,8 @@ const RdiInstancesListWrapper = ({ name: '', render: (_act: any, instance: RdiInstance) => ( <> - { } return ( - Save to file - + ) } diff --git a/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx b/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx index 4d950d018b..e74b0c7ad5 100644 --- a/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx +++ b/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx @@ -1,5 +1,4 @@ import { - EuiButton, EuiCheckbox, EuiIcon, EuiPopover, @@ -12,7 +11,6 @@ import React, { useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useParams } from 'react-router-dom' -import RocketIcon from 'uiSrc/assets/img/rdi/rocket.svg?react' import { deployPipelineAction, getPipelineStatusAction, @@ -27,6 +25,8 @@ import { rdiErrorMessages } from 'uiSrc/pages/rdi/constants' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { OutsideClickDetector } from 'uiSrc/components/base/utils' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' +import { RiRocketIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export interface Props { @@ -118,18 +118,16 @@ const DeployPipelineButton = ({ loading, disabled, onReset }: Props) => { scrollLock: true, }} button={ - Deploy Pipeline - + } > @@ -170,8 +168,7 @@ const DeployPipelineButton = ({ loading, disabled, onReset }: Props) => {
- { data-testid="deploy-confirm-btn" > Deploy - + diff --git a/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/reset-pipeline-button/ResetPipelineButton.tsx b/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/reset-pipeline-button/ResetPipelineButton.tsx index 53fb514320..e7a17e1b0a 100644 --- a/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/reset-pipeline-button/ResetPipelineButton.tsx +++ b/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/reset-pipeline-button/ResetPipelineButton.tsx @@ -1,8 +1,9 @@ import React from 'react' -import { EuiButton, EuiToolTip } from '@elastic/eui' -import cx from 'classnames' -import ResetIcon from 'uiSrc/assets/img/rdi/reset.svg?react' +import { EuiToolTip } from '@elastic/eui' + +import { RiResetIcon } from 'uiSrc/components/base/icons' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' import styles from '../styles.module.scss' export interface PipelineButtonProps { @@ -34,19 +35,17 @@ const ResetPipelineButton = ({ } anchorClassName={disabled || loading ? styles.disabled : styles.tooltip} > - Reset Pipeline - + ) diff --git a/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/start-pipeline-button/StartPipelineButton.tsx b/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/start-pipeline-button/StartPipelineButton.tsx index d1260bb8f5..02d347ce40 100644 --- a/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/start-pipeline-button/StartPipelineButton.tsx +++ b/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/start-pipeline-button/StartPipelineButton.tsx @@ -1,9 +1,8 @@ import React from 'react' -import { EuiButton, EuiToolTip } from '@elastic/eui' -import cx from 'classnames' - -import StartIcon from 'uiSrc/assets/img/rdi/playFilled.svg?react' +import { EuiToolTip } from '@elastic/eui' +import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' +import { PlayFilledIcon } from 'uiSrc/components/base/icons' import { PipelineButtonProps } from '../reset-pipeline-button/ResetPipelineButton' import styles from '../styles.module.scss' @@ -16,19 +15,17 @@ const StartPipelineButton = ({ content="Start the pipeline to resume processing new data arrivals." anchorClassName={disabled ? styles.disabled : styles.tooltip} > - Start Pipeline - + ) diff --git a/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/stop-pipeline-button/StopPipelineButton.tsx b/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/stop-pipeline-button/StopPipelineButton.tsx index 4fd576c9ec..39c36af339 100644 --- a/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/stop-pipeline-button/StopPipelineButton.tsx +++ b/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/stop-pipeline-button/StopPipelineButton.tsx @@ -1,9 +1,8 @@ import React from 'react' -import { EuiButton, EuiToolTip } from '@elastic/eui' -import cx from 'classnames' - -import StopIcon from 'uiSrc/assets/img/rdi/stopFilled.svg?react' +import { EuiToolTip } from '@elastic/eui' +import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' +import { RiStopIcon } from 'uiSrc/components/base/icons' import { PipelineButtonProps } from '../reset-pipeline-button/ResetPipelineButton' import styles from '../styles.module.scss' @@ -16,19 +15,17 @@ const StopPipelineButton = ({ content="Stop the pipeline to prevent processing of new data arrivals." anchorClassName={disabled ? styles.disabled : undefined} > - Stop Pipeline - + ) diff --git a/redisinsight/ui/src/pages/rdi/instance/components/header/components/fetch-pipeline-popover/FetchPipelinePopover.tsx b/redisinsight/ui/src/pages/rdi/instance/components/header/components/fetch-pipeline-popover/FetchPipelinePopover.tsx index dc986deeff..fdf5c9f844 100644 --- a/redisinsight/ui/src/pages/rdi/instance/components/header/components/fetch-pipeline-popover/FetchPipelinePopover.tsx +++ b/redisinsight/ui/src/pages/rdi/instance/components/header/components/fetch-pipeline-popover/FetchPipelinePopover.tsx @@ -1,4 +1,4 @@ -import { EuiButton, EuiButtonEmpty, EuiText } from '@elastic/eui' +import { EuiText } from '@elastic/eui' import React from 'react' import { useDispatch, useSelector } from 'react-redux' import { useParams } from 'react-router-dom' @@ -10,8 +10,9 @@ import { } from 'uiSrc/slices/rdi/pipeline' import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry' import Download from 'uiSrc/pages/rdi/instance/components/download/Download' -import downloadIcon from 'uiSrc/assets/img/rdi/download.svg?react' +import { DownloadIcon } from 'uiSrc/components/base/icons' +import { EmptyButton, PrimaryButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -55,28 +56,23 @@ const FetchPipelinePopover = ({ onClose }: Props) => { } submitBtn={ - + Download from server - + } onConfirm={handleRefreshClick} button={ - Download from server - + } onButtonClick={handleRefreshWarning} appendAction={} diff --git a/redisinsight/ui/src/pages/rdi/instance/components/header/components/rdi-config-file-action-menu/RdiConfigFileActionMenu.tsx b/redisinsight/ui/src/pages/rdi/instance/components/header/components/rdi-config-file-action-menu/RdiConfigFileActionMenu.tsx index ed2f9d3d25..0a6aed2157 100644 --- a/redisinsight/ui/src/pages/rdi/instance/components/header/components/rdi-config-file-action-menu/RdiConfigFileActionMenu.tsx +++ b/redisinsight/ui/src/pages/rdi/instance/components/header/components/rdi-config-file-action-menu/RdiConfigFileActionMenu.tsx @@ -1,11 +1,11 @@ import React, { useState } from 'react' -import { EuiButtonEmpty, EuiButtonIcon, EuiPopover } from '@elastic/eui' +import { EuiPopover } from '@elastic/eui' import cx from 'classnames' -import threeDots from 'uiSrc/assets/img/icons/three_dots.svg?react' -import uploadIcon from 'uiSrc/assets/img/rdi/upload.svg?react' import UploadModal from 'uiSrc/pages/rdi/pipeline-management/components/upload-modal/UploadModal' import Download from 'uiSrc/pages/rdi/instance/components/download' import { Col, FlexItem } from 'uiSrc/components/base/layout/flex' +import { EmptyButton, IconButton } from 'uiSrc/components/base/forms/buttons' +import { UploadIcon, MoreactionsIcon } from 'uiSrc/components/base/icons' import FetchPipelinePopover from '../fetch-pipeline-popover' import styles from './styles.module.scss' @@ -22,10 +22,10 @@ const RdiConfigFileActionMenu = () => { } const button = ( - { - Upload from file - + diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/components/jobs-panel/Panel.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/components/jobs-panel/Panel.tsx index d3192f33d8..2aab266534 100644 --- a/redisinsight/ui/src/pages/rdi/pipeline-management/components/jobs-panel/Panel.tsx +++ b/redisinsight/ui/src/pages/rdi/pipeline-management/components/jobs-panel/Panel.tsx @@ -1,7 +1,6 @@ import React, { useCallback, useEffect, useState } from 'react' import cx from 'classnames' import { - EuiButton, EuiButtonIcon, EuiSuperSelect, EuiSuperSelectOption, @@ -29,6 +28,8 @@ import { createAxiosError, formatLongName, yamlToJson } from 'uiSrc/utils' import { addErrorNotification } from 'uiSrc/slices/app/notifications' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { EmptyButton } from 'uiSrc/components/base/forms/buttons' +import { PlayFilledIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export interface Props { @@ -250,19 +251,18 @@ const DryRunJobPanel = (props: Props) => { content={isFormValid ? null : 'Input should have JSON format'} position="top" > - Dry run - + diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/components/jobs-tree/JobsTree.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/components/jobs-tree/JobsTree.tsx index 5b4e8ca8f3..1e71a6e5e3 100644 --- a/redisinsight/ui/src/pages/rdi/pipeline-management/components/jobs-tree/JobsTree.tsx +++ b/redisinsight/ui/src/pages/rdi/pipeline-management/components/jobs-tree/JobsTree.tsx @@ -1,6 +1,5 @@ import { EuiAccordion, - EuiButton, EuiButtonIcon, EuiIcon, EuiLoadingSpinner, @@ -29,6 +28,7 @@ import { isEqualPipelineFile, Nullable } from 'uiSrc/utils' import statusErrorIcon from 'uiSrc/assets/img/rdi/pipelineStatuses/status_error.svg?react' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { DestructiveButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface IProps { @@ -210,14 +210,13 @@ const JobsTree = (props: IProps) => { } submitBtn={ - Delete - + } onConfirm={() => handleDeleteClick(name)} button={ diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/TemplateButton.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/TemplateButton.tsx index bcc2c7cf9d..c73c958835 100644 --- a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/TemplateButton.tsx +++ b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/TemplateButton.tsx @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' -import { EuiButton, EuiToolTip } from '@elastic/eui' +import { EuiToolTip } from '@elastic/eui' import { useParams } from 'react-router-dom' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' @@ -9,6 +9,7 @@ import { rdiPipelineStrategiesSelector, } from 'uiSrc/slices/rdi/pipeline' import { RdiPipelineTabs } from 'uiSrc/slices/interfaces' +import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' import { getTooltipContent } from '../template-form/TemplateForm' import { INGEST_OPTION } from '../template-form/constants' import styles from './styles.module.scss' @@ -51,18 +52,18 @@ const TemplateButton = ({ setFieldValue, value }: TemplateButtonProps) => { display="inlineBlock" anchorClassName="flex-row" > - Insert template - + ) } diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-form/TemplateForm.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-form/TemplateForm.tsx index 438261f843..839d725c76 100644 --- a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-form/TemplateForm.tsx +++ b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-form/TemplateForm.tsx @@ -1,5 +1,4 @@ import { - EuiButton, EuiForm, EuiFormRow, EuiSuperSelect, @@ -21,6 +20,10 @@ import { import { RdiPipelineTabs } from 'uiSrc/slices/interfaces/rdi' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import { NO_TEMPLATE_VALUE, NO_OPTIONS, INGEST_OPTION } from './constants' import styles from './styles.module.scss' @@ -196,15 +199,14 @@ const TemplateForm = (props: Props) => { )}
- Cancel - + { className={styles.btn} anchorClassName="flex-row" > - Apply - +
diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-popover/TemplatePopover.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-popover/TemplatePopover.tsx index 38786eb0d1..72ec180e58 100644 --- a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-popover/TemplatePopover.tsx +++ b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-popover/TemplatePopover.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { EuiButton, EuiPopover } from '@elastic/eui' +import { EuiPopover } from '@elastic/eui' import { useDispatch } from 'react-redux' import { useParams } from 'react-router-dom' @@ -8,6 +8,7 @@ import { fetchPipelineStrategies } from 'uiSrc/slices/rdi/pipeline' import { RdiPipelineTabs } from 'uiSrc/slices/interfaces' import { OutsideClickDetector } from 'uiSrc/components/base/utils' +import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -52,8 +53,8 @@ const TemplatePopover = (props: Props) => { className={styles.anchor} panelClassName={styles.popoverWrapper} button={ - { data-testid={`template-trigger-${source}`} > Insert template - + } > { @@ -194,17 +195,15 @@ const Config = () => { /> )}
- Test Connection - +
{isPanelOpen && } diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.tsx index d0b623e348..4490bf795e 100644 --- a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.tsx +++ b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.tsx @@ -1,12 +1,6 @@ import React, { useState, useEffect, useRef, useCallback } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { - EuiText, - EuiLink, - EuiButton, - EuiLoadingSpinner, - EuiToolTip, -} from '@elastic/eui' +import { EuiText, EuiLink, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui' import { get, throttle } from 'lodash' import cx from 'classnames' import { monaco as monacoEditor } from 'react-monaco-editor' @@ -35,6 +29,10 @@ import { getUtmExternalLink } from 'uiSrc/utils/links' import { KeyboardShortcut } from 'uiSrc/components' import { addErrorNotification } from 'uiSrc/slices/app/notifications' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import TemplateButton from '../../components/template-button' import styles from './styles.module.scss' @@ -197,15 +195,14 @@ const Job = (props: Props) => { } data-testid="open-dedicated-editor-tooltip" > - setShouldOpenDedicatedEditor(true)} data-testid="open-dedicated-editor-btn" > SQL and JMESPath Editor - + { )}
- Dry Run - +
{isPanelOpen && ( diff --git a/redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx b/redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx index 98110d87ca..462fa3ecb2 100644 --- a/redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx +++ b/redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx @@ -1,10 +1,11 @@ -import { EuiButton, EuiImage, EuiText } from '@elastic/eui' +import { EuiImage, EuiText } from '@elastic/eui' import React from 'react' import { useHistory } from 'react-router-dom' import EmptyPipelineIcon from 'uiSrc/assets/img/rdi/empty_pipeline.svg' import { Pages } from 'uiSrc/constants' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import Panel from '../components/panel' import styles from './styles.module.scss' @@ -26,17 +27,15 @@ const Empty = ({ rdiInstanceId }: Props) => { Create your first pipeline to get started! - { history.push(Pages.rdiPipelineConfig(rdiInstanceId)) }} > Add Pipeline - + ) From c4045c9f7289f60c42bde59e994114281fecd817 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 14 May 2025 10:33:21 +0300 Subject: [PATCH 036/154] NotFoundErrorPage.tsx --- .../ui/src/pages/not-found-error/NotFoundErrorPage.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/redisinsight/ui/src/pages/not-found-error/NotFoundErrorPage.tsx b/redisinsight/ui/src/pages/not-found-error/NotFoundErrorPage.tsx index 8d4343a2c5..dc5b6aaab7 100644 --- a/redisinsight/ui/src/pages/not-found-error/NotFoundErrorPage.tsx +++ b/redisinsight/ui/src/pages/not-found-error/NotFoundErrorPage.tsx @@ -1,5 +1,5 @@ import React, { useCallback } from 'react' -import { EuiButton, EuiIcon, EuiText, EuiTitle } from '@elastic/eui' +import { EuiIcon, EuiText, EuiTitle } from '@elastic/eui' import { useHistory } from 'react-router-dom' import { useSelector } from 'react-redux' import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features' @@ -8,6 +8,7 @@ import { getConfig } from 'uiSrc/config' import Logo from 'uiSrc/assets/img/logo.svg?react' import Robot from 'uiSrc/assets/img/robot.svg?react' import { Col, FlexItem } from 'uiSrc/components/base/layout/flex' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' const NotFoundErrorPage = () => { @@ -53,15 +54,13 @@ const NotFoundErrorPage = () => { We searched every shard,
But couldn't find the page you're after.

- Databases page - + From 4937213a3eb3fe3296ec466a5efd445149695901 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 14 May 2025 11:23:45 +0300 Subject: [PATCH 037/154] update to public packages --- package.json | 6 ++--- .../components/base/forms/buttons/Button.tsx | 2 +- .../base/forms/buttons/EmptyButton.tsx | 2 +- .../base/forms/buttons/IconButton.tsx | 2 +- .../base/forms/buttons/button.styles.ts | 4 ++-- .../ui/src/components/base/icons/Icon.tsx | 2 +- .../ui/src/components/base/icons/index.ts | 4 ++-- .../ui/src/components/base/theme/index.ts | 2 +- redisinsight/ui/src/contexts/themeContext.tsx | 6 ++--- yarn.lock | 22 +++++++++---------- 10 files changed, 26 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 9ac75d3efb..2d33e0dd6c 100644 --- a/package.json +++ b/package.json @@ -234,9 +234,9 @@ "dependencies": { "@elastic/datemath": "^5.0.3", "@elastic/eui": "34.6.0", - "@redislabsdev/redis-ui-components": "^37.0.0", - "@redislabsdev/redis-ui-icons": "^4.16.1", - "@redislabsdev/redis-ui-styles": "^11.0.1", + "@redis-ui/components": "^38.0.0", + "@redis-ui/icons": "^4.16.1", + "@redis-ui/styles": "^11.0.2", "@reduxjs/toolkit": "^1.6.2", "@stablelib/snappy": "^1.0.2", "ajv": "^8.17.1", diff --git a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx index affef0f3e7..60fd007362 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx @@ -1,4 +1,4 @@ -import { Button } from '@redislabsdev/redis-ui-components' +import { Button } from '@redis-ui/components' import React from 'react' import { LoaderLargeIcon } from 'uiSrc/components/base/icons' import { BaseButtonProps } from 'uiSrc/components/base/forms/buttons/button.styles' diff --git a/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx index 0179571076..8ab479dda7 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { TextButton } from '@redislabsdev/redis-ui-components' +import { TextButton } from '@redis-ui/components' import { ButtonIcon } from 'uiSrc/components/base/forms/buttons/Button' import { IconType } from 'uiSrc/components/base/icons' diff --git a/redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx index 053be1dbd3..2a90a3fb5f 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { IconButton as RedisUiIconButton } from '@redislabsdev/redis-ui-components' +import { IconButton as RedisUiIconButton } from '@redis-ui/components' export type ButtonProps = React.ComponentProps export const IconButton = (props: ButtonProps) => ( diff --git a/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts b/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts index f6f1d21ce1..69b7708555 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts +++ b/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts @@ -1,6 +1,6 @@ import React from 'react' -import { Button } from '@redislabsdev/redis-ui-components' -import { buttonSizes } from '@redislabsdev/redis-ui-components/dist/Button/Button.types' +import { Button } from '@redis-ui/components' +import { buttonSizes } from '@redis-ui/components/dist/Button/Button.types' import { IconType } from 'uiSrc/components/base/icons' export type BaseButtonProps = Omit< diff --git a/redisinsight/ui/src/components/base/icons/Icon.tsx b/redisinsight/ui/src/components/base/icons/Icon.tsx index dd63213fa2..a9c01b6d4e 100644 --- a/redisinsight/ui/src/components/base/icons/Icon.tsx +++ b/redisinsight/ui/src/components/base/icons/Icon.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { useTheme } from '@redislabsdev/redis-ui-styles' +import { useTheme } from '@redis-ui/styles' import { MonochromeIconProps } from 'uiSrc/components/base/icons' type BaseIconProps = MonochromeIconProps & { diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index ce6c0dc82b..89f4d7f7e7 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -20,5 +20,5 @@ export { Trigger } from './Trigger' export { ThreeDotsIcon } from './ThreeDotsIcon' export { UserInCircle } from './UserInCircle' -export * from '@redislabsdev/redis-ui-icons' -export { LoaderLargeIcon } from '@redislabsdev/redis-ui-icons/multicolor' +export * from '@redis-ui/icons' +export { LoaderLargeIcon } from '@redis-ui/icons/multicolor' diff --git a/redisinsight/ui/src/components/base/theme/index.ts b/redisinsight/ui/src/components/base/theme/index.ts index b90401b230..952ab1e072 100644 --- a/redisinsight/ui/src/components/base/theme/index.ts +++ b/redisinsight/ui/src/components/base/theme/index.ts @@ -1,4 +1,4 @@ -// import { theme } from '@redislabsdev/redis-ui-styles' +// import { theme } from '@redis-ui/styles' // todo: after integration with redis-ui, override the theme here export const theme = { diff --git a/redisinsight/ui/src/contexts/themeContext.tsx b/redisinsight/ui/src/contexts/themeContext.tsx index 26220041c1..9b2e468ebf 100644 --- a/redisinsight/ui/src/contexts/themeContext.tsx +++ b/redisinsight/ui/src/contexts/themeContext.tsx @@ -4,9 +4,9 @@ import { theme as redisUiOldTheme, themeLight, themeDark, -} from '@redislabsdev/redis-ui-styles' -import '@redislabsdev/redis-ui-styles/normalized-styles.css' -import '@redislabsdev/redis-ui-styles/fonts.css' +} from '@redis-ui/styles' +import '@redis-ui/styles/normalized-styles.css' +import '@redis-ui/styles/fonts.css' import { ipcThemeChange } from 'uiSrc/electron/utils' import { diff --git a/yarn.lock b/yarn.lock index b8c82ae8d6..a25890a9fa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2383,10 +2383,10 @@ "@react-hook/latest" "^1.0.2" "@react-hook/passive-layout-effect" "^1.2.0" -"@redislabsdev/redis-ui-components@^37.0.0": - version "37.0.0" - resolved "https://npm.pkg.github.com/download/@redislabsdev/redis-ui-components/37.0.0/e3de3f5419a48e2bd10fcb26e9198966645bc6f0#e3de3f5419a48e2bd10fcb26e9198966645bc6f0" - integrity sha512-k7NTOaVUTCDZxVSgBuWtRyOMJkrDyGApCUUew2B7h3fMP702eoE4X4pNwi/DdpP9CDEnu/P7s8eruQq+jKdeVg== +"@redis-ui/components@^38.0.0": + version "38.0.0" + resolved "https://registry.yarnpkg.com/@redis-ui/components/-/components-38.0.0.tgz#9cd99d3077fc5ced530ce79a1149f43d27c410f5" + integrity sha512-RD0DaAhN3LEyR+/6ozDaHih2rRTeSZwmcmQdo+z1njIQN361sQ3FMFsb+dBHWCJTS5+U2EFFRxKFWETPClPI6w== dependencies: "@radix-ui/react-checkbox" "^1.0.3" "@radix-ui/react-collapsible" "^1.0.3" @@ -2409,15 +2409,15 @@ type-fest "^3.13.1" virtua "^0.36.3" -"@redislabsdev/redis-ui-icons@^4.16.1": +"@redis-ui/icons@^4.16.1": version "4.16.1" - resolved "https://npm.pkg.github.com/download/@redislabsdev/redis-ui-icons/4.16.1/b27dfe9ab0356f049bd260bd2befda220393ce86#b27dfe9ab0356f049bd260bd2befda220393ce86" - integrity sha512-+j9J70nwRSABWMmEi9d+xM07/pwOissBib26HUDkuJlieNO0kptNw4hHZoI1jB7R7EiAIq3D+FGFDe2ri+FAGw== + resolved "https://registry.yarnpkg.com/@redis-ui/icons/-/icons-4.16.1.tgz#87fc6ab073a203de6b313a4868c0a84f076c8580" + integrity sha512-ZRQWzambHq9A/5zWx4HXEBNU8uCFwf6Ap0NKZryoMq5iGfygBF8k8A89RmwUXuSlJ99NRxW+RvmbcMd+Tyosmg== -"@redislabsdev/redis-ui-styles@^11.0.1": - version "11.0.1" - resolved "https://npm.pkg.github.com/download/@redislabsdev/redis-ui-styles/11.0.1/4479aa97609e2602c5d57457d40b8d985c0f7268#4479aa97609e2602c5d57457d40b8d985c0f7268" - integrity sha512-k5K0EbYhimbocmf4ig5fEMn2puIY0cwKCBWoyd4Px8LH3SCJ9wXpj54WpbZDt92ZvbsxlOLhkaiMimd+xoGvQQ== +"@redis-ui/styles@^11.0.2": + version "11.0.2" + resolved "https://registry.yarnpkg.com/@redis-ui/styles/-/styles-11.0.2.tgz#9c9bf40cbcf256a056c1664a613725d310b051f2" + integrity sha512-Lx2+WQ1obHq64W9tJV1zG+fRJIP9DoLbhc3JsAApyw/Xd4+e19Kqrvm7kysMMUCqKyYHu8eyx1WfmlS0nprX2A== dependencies: color-alpha "^2.0.0" From f33e3da147f8ad5f6cc0bfe26b79b35e320248a3 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 14 May 2025 11:30:28 +0300 Subject: [PATCH 038/154] ensure color is supported --- .../ui/src/components/base/icons/Icon.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/redisinsight/ui/src/components/base/icons/Icon.tsx b/redisinsight/ui/src/components/base/icons/Icon.tsx index a9c01b6d4e..4a56169f14 100644 --- a/redisinsight/ui/src/components/base/icons/Icon.tsx +++ b/redisinsight/ui/src/components/base/icons/Icon.tsx @@ -13,6 +13,19 @@ const sizesMap = { XL: 24, } +/** + * Type guard function to check if a color is a valid icon color in the theme + * @param theme The current theme object + * @param color The color string to check + * @returns A boolean indicating if the color is valid and a type predicate + */ +function isValidIconColor( + theme: ReturnType, + color: string, +): color is keyof typeof theme.semantic.color.icon { + return color in theme.semantic.color.icon +} + export const Icon = ({ icon: IconComponent, customSize, @@ -24,7 +37,10 @@ export const Icon = ({ }: BaseIconProps) => { const sizeValue = customSize || sizesMap[size] const theme = useTheme() - const colorValue = customColor || theme.semantic.color.icon[color] + let colorValue = customColor + if (!colorValue && isValidIconColor(theme, color)) { + colorValue = theme.semantic.color.icon[color] + } const props = { color: colorValue, width: sizeValue, From d4ef6ef358517aa739908d56368a08e92916b107 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 14 May 2025 12:22:07 +0300 Subject: [PATCH 039/154] connectivity screens --- .../base/forms/buttons/ActionIconButton.tsx | 2 +- .../components/base/forms/buttons/index.tsx | 14 ++- .../CloudConnectionForm.tsx | 21 ++-- .../ClusterConnectionForm.tsx | 21 ++-- .../database-alias/DatabaseAlias.tsx | 108 ++++++++--------- .../components/empty-message/EmptyMessage.tsx | 9 +- .../import-database/ImportDatabase.tsx | 32 +++-- .../SentinelConnectionForm.tsx | 22 ++-- .../publish-message/PublishMessage.tsx | 11 +- .../subscription-panel/SubscriptionPanel.tsx | 41 +++---- .../redis-cluster/RedisClusterDatabases.tsx | 109 +++++++++--------- .../RedisClusterDatabasesResult.tsx | 41 ++++--- 12 files changed, 206 insertions(+), 225 deletions(-) diff --git a/redisinsight/ui/src/components/base/forms/buttons/ActionIconButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/ActionIconButton.tsx index 63587ea217..06329b8c7c 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/ActionIconButton.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/ActionIconButton.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { ActionIconButton as RedisUiActionIconButton } from '@redislabsdev/redis-ui-components' +import { ActionIconButton as RedisUiActionIconButton } from '@redis-ui/components' export type ButtonProps = React.ComponentProps export const ActionIconButton = (props: ButtonProps) => ( diff --git a/redisinsight/ui/src/components/base/forms/buttons/index.tsx b/redisinsight/ui/src/components/base/forms/buttons/index.tsx index 83a0f8ba48..11ef91b557 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/index.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/index.tsx @@ -1,15 +1,17 @@ -import { SecondaryButton } from 'uiSrc/components/base/forms/buttons/SecondaryButton' -import { PrimaryButton } from 'uiSrc/components/base/forms/buttons/PrimaryButton' +import { ActionIconButton } from 'uiSrc/components/base/forms/buttons/ActionIconButton' +import { BaseButton } from 'uiSrc/components/base/forms/buttons/Button' import { DestructiveButton } from 'uiSrc/components/base/forms/buttons/DestructiveButton' import { EmptyButton } from 'uiSrc/components/base/forms/buttons/EmptyButton' import { IconButton } from 'uiSrc/components/base/forms/buttons/IconButton' -import { ActionIconButton } from 'uiSrc/components/base/forms/buttons/ActionIconButton' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons/PrimaryButton' +import { SecondaryButton } from 'uiSrc/components/base/forms/buttons/SecondaryButton' export { - PrimaryButton, - SecondaryButton, + ActionIconButton, + BaseButton as Button, DestructiveButton, EmptyButton, IconButton, - ActionIconButton, + PrimaryButton, + SecondaryButton, } diff --git a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx index 64c1187e79..f4f72d548a 100644 --- a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx +++ b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx @@ -3,7 +3,6 @@ import ReactDOM from 'react-dom' import { FormikErrors, useFormik } from 'formik' import { isEmpty } from 'lodash' import { - EuiButton, EuiFieldText, EuiForm, EuiFormRow, @@ -26,6 +25,11 @@ import { MessageCloudApiKeys } from 'uiSrc/pages/home/components/form/Messages' import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { WindowEvent } from 'uiSrc/components/base/utils/WindowEvent' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { InfoIcon } from 'uiSrc/components/base/icons' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import { ICloudConnectionSubmit } from '../CloudConnectionFormWrapper' import styles from '../styles.module.scss' @@ -112,15 +116,14 @@ const CloudConnectionForm = (props: Props) => { } const CancelButton = ({ onClick }: { onClick: () => void }) => ( - Cancel - + ) const SubmitButton = ({ onClick, submitIsDisabled }: ISubmitButton) => ( @@ -140,19 +143,17 @@ const CloudConnectionForm = (props: Props) => { ) : null } > - Submit - + ) diff --git a/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx index c6e251b2c9..8d24ecb568 100644 --- a/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx +++ b/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx @@ -3,7 +3,6 @@ import ReactDOM from 'react-dom' import { isEmpty } from 'lodash' import { FormikErrors, useFormik } from 'formik' import { - EuiButton, EuiFieldNumber, EuiFieldPassword, EuiFieldText, @@ -26,6 +25,11 @@ import { ICredentialsRedisCluster } from 'uiSrc/slices/interfaces' import { MessageEnterpriceSoftware } from 'uiSrc/pages/home/components/form/Messages' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { WindowEvent } from 'uiSrc/components/base/utils/WindowEvent' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' +import { InfoIcon } from 'uiSrc/components/base/icons' export interface Props { host: string @@ -162,15 +166,14 @@ const ClusterConnectionForm = (props: Props) => { ) const CancelButton = ({ onClick }: { onClick: () => void }) => ( - Cancel - + ) const SubmitButton = ({ onClick, submitIsDisabled }: ISubmitButton) => ( @@ -190,19 +193,17 @@ const ClusterConnectionForm = (props: Props) => { ) : null } > - Submit - + ) diff --git a/redisinsight/ui/src/pages/home/components/database-alias/DatabaseAlias.tsx b/redisinsight/ui/src/pages/home/components/database-alias/DatabaseAlias.tsx index 1ce69eb615..156414ab69 100644 --- a/redisinsight/ui/src/pages/home/components/database-alias/DatabaseAlias.tsx +++ b/redisinsight/ui/src/pages/home/components/database-alias/DatabaseAlias.tsx @@ -1,17 +1,15 @@ import React, { ChangeEvent, useState, useEffect, useContext } from 'react' -import { - EuiButton, - EuiButtonIcon, - EuiFieldText, - EuiIcon, - EuiText, - EuiToolTip, -} from '@elastic/eui' +import { EuiFieldText, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui' import cx from 'classnames' import { useDispatch, useSelector } from 'react-redux' import { toNumber } from 'lodash' import { useHistory } from 'react-router' +import { + CopyIcon, + ArrowLeftIcon, + DoubleChevronRightIcon, +} from 'uiSrc/components/base/icons' import { BuildType } from 'uiSrc/constants/env' import { appInfoSelector } from 'uiSrc/slices/app/info' import { Nullable, getDbIndex } from 'uiSrc/utils' @@ -23,10 +21,7 @@ import RediStackLightMin from 'uiSrc/assets/img/modules/redistack/RediStackLight import RediStackLightLogo from 'uiSrc/assets/img/modules/redistack/RedisStackLogoLight.svg' import RediStackDarkLogo from 'uiSrc/assets/img/modules/redistack/RedisStackLogoDark.svg' -import { - sendEventTelemetry, - TelemetryEvent, -} from 'uiSrc/telemetry' +import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { changeInstanceAliasAction, checkConnectToInstanceAction, @@ -39,7 +34,7 @@ import { setAppContextInitialState, } from 'uiSrc/slices/app/context' import { FlexItem, Grid, Row } from 'uiSrc/components/base/layout/flex' -import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module' +import { IconButton, PrimaryButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -50,9 +45,7 @@ export interface Props { isRediStack?: boolean isCloneMode: boolean id?: string - provider?: string setIsCloneMode: (value: boolean) => void - modules: AdditionalRedisModule[] } const DatabaseAlias = (props: Props) => { @@ -60,13 +53,11 @@ const DatabaseAlias = (props: Props) => { alias, database, id, - provider, onAliasEdited, isLoading, isRediStack, isCloneMode, setIsCloneMode, - modules, } = props const { server } = useSelector(appInfoSelector) @@ -159,10 +150,9 @@ const DatabaseAlias = (props: Props) => { {isCloneMode && ( - { > {!isCloneMode && (isEditing || isLoading) ? ( - - <> - + + - - ) : ( - '' - ) - } - autoComplete="off" - data-testid="alias-input" - /> - -

{value}

- + onChange={onChange} + append={ + !isEditing ? ( + + ) : ( + '' + ) + } + autoComplete="off" + data-testid="alias-input" + /> + +

{value}

 ) : ( @@ -276,31 +264,29 @@ const DatabaseAlias = (props: Props) => { {!isCloneMode && ( - Open - + {server?.buildType !== BuildType.RedisStack && ( - Clone - + )} diff --git a/redisinsight/ui/src/pages/home/components/empty-message/EmptyMessage.tsx b/redisinsight/ui/src/pages/home/components/empty-message/EmptyMessage.tsx index 8953e50fad..8fe73a996e 100644 --- a/redisinsight/ui/src/pages/home/components/empty-message/EmptyMessage.tsx +++ b/redisinsight/ui/src/pages/home/components/empty-message/EmptyMessage.tsx @@ -1,4 +1,4 @@ -import { EuiButton, EuiImage, EuiLink, EuiText } from '@elastic/eui' +import { EuiImage, EuiLink, EuiText } from '@elastic/eui' import React from 'react' import CakeIcon from 'uiSrc/assets/img/databases/cake.svg' @@ -8,6 +8,7 @@ import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces' import { EXTERNAL_LINKS, UTM_CAMPAINGS } from 'uiSrc/constants/links' import { getUtmExternalLink } from 'uiSrc/utils/links' import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -23,10 +24,8 @@ const EmptyMessage = ({ onAddInstanceClick }: Props) => ( No databases yet, let's add one! - { sendEventTelemetry({ event: TelemetryEvent.CONFIG_DATABASES_CLICKED, @@ -39,7 +38,7 @@ const EmptyMessage = ({ onAddInstanceClick }: Props) => ( data-testid="empty-rdi-instance-button" > + Add Redis database - + {(ssoCloudHandlerClick) => ( { if (error) { return ReactDOM.createPortal(
- Retry - +
, footerEl, ) @@ -125,16 +128,14 @@ const ImportDatabase = (props: Props) => { if (data) { return ReactDOM.createPortal(
- Ok - +
, footerEl, ) @@ -142,33 +143,30 @@ const ImportDatabase = (props: Props) => { return ReactDOM.createPortal(
- Cancel - + - Submit - +
, footerEl, diff --git a/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.tsx index 28d8a3b34a..430bfd2a14 100644 --- a/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.tsx +++ b/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.tsx @@ -1,4 +1,4 @@ -import { EuiButton, EuiForm, EuiToolTip, keys } from '@elastic/eui' +import { EuiForm, EuiToolTip, keys } from '@elastic/eui' import { FormikErrors, useFormik } from 'formik' import { isEmpty, pick } from 'lodash' import React, { useRef, useState } from 'react' @@ -14,6 +14,11 @@ import { TlsDetails, } from 'uiSrc/pages/home/components/form' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { InfoIcon } from 'uiSrc/components/base/icons' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' export interface Props { loading: boolean @@ -85,20 +90,18 @@ const SentinelConnectionForm = (props: Props) => { } content={getSubmitButtonContent(errors, submitIsDisabled)} > - Discover Database - + ) @@ -109,15 +112,14 @@ const SentinelConnectionForm = (props: Props) => { return ReactDOM.createPortal(
{onClose && ( - Cancel - + )} { - + Publish - + diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/SubscriptionPanel.tsx b/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/SubscriptionPanel.tsx index 964966c2d6..55c537d1e4 100644 --- a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/SubscriptionPanel.tsx +++ b/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/SubscriptionPanel.tsx @@ -1,11 +1,4 @@ -import { - EuiButton, - EuiButtonIcon, - EuiFieldText, - EuiIcon, - EuiText, - EuiToolTip, -} from '@elastic/eui' +import { EuiFieldText, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui' import cx from 'classnames' import React, { useContext, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' @@ -19,7 +12,6 @@ import { } from 'uiSrc/slices/pubsub/pubsub' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' -import UserInCircle from 'uiSrc/assets/img/icons/user_in_circle.svg?react' import SubscribedIconDark from 'uiSrc/assets/img/pub-sub/subscribed.svg' import SubscribedIconLight from 'uiSrc/assets/img/pub-sub/subscribed-lt.svg' import NotSubscribedIconDark from 'uiSrc/assets/img/pub-sub/not-subscribed.svg' @@ -27,6 +19,12 @@ import NotSubscribedIconLight from 'uiSrc/assets/img/pub-sub/not-subscribed-lt.s import { DEFAULT_SEARCH_MATCH } from 'uiSrc/constants/api' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { + UserIcon, + IndicatorExcludedIcon, + DeleteIcon, +} from 'uiSrc/components/base/icons' +import { Button, IconButton } from 'uiSrc/components/base/forms/buttons' import PatternsInfo from './components/patternsInfo' import ClickableAppendInfo from './components/clickable-append-info' import styles from './styles.module.scss' @@ -75,11 +73,7 @@ const SubscriptionPanel = () => { const displayMessages = count !== 0 || isSubscribed return ( - + @@ -127,19 +121,16 @@ const SubscriptionPanel = () => { /> - - {isSubscribed ? 'Unsubscribe' : 'Subscribe'} - + Subscribe + {!!messages.length && ( @@ -147,8 +138,8 @@ const SubscriptionPanel = () => { content="Clear Messages" anchorClassName={cx('inline-flex')} > - Cancel - + } > @@ -132,15 +136,13 @@ const RedisClusterDatabases = ({
- Proceed - +
) @@ -200,54 +202,55 @@ const RedisClusterDatabases = ({ )}
-
- + - Back to adding databases - -
- - - {validationErrors.NO_DBS_SELECTED} - - ) : null - } + - + + + + {validationErrors.NO_DBS_SELECTED} + + ) : null + } > - Add selected Databases - - -
-
+ + Add selected Databases + + + + + ) } diff --git a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabasesResult.tsx b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabasesResult.tsx index 0ad48d7cf6..d3a6e1b952 100644 --- a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabasesResult.tsx +++ b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabasesResult.tsx @@ -22,6 +22,10 @@ import MessageBar from 'uiSrc/components/message-bar/MessageBar' import { AutodiscoveryPageTemplate } from 'uiSrc/templates' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -130,25 +134,24 @@ const RedisClusterDatabasesResult = ({ columns, onBack, onView }: Props) => { /> -
- onBack(false)} - color="secondary" - className="btn-cancel btn-back" - data-testid="btn-back-to-adding" - > - Back to adding databases - - onView(false)} - color="secondary" - data-testid="btn-view-databases" - > - View Databases - -
+ + + onBack(false)} + className="btn-cancel btn-back" + data-testid="btn-back-to-adding" + > + Back to adding databases + + onView(false)} + data-testid="btn-view-databases" + > + View Databases + + + ) } From 85ab56d7f2af048d8de566ce28f9756ff4ef14ad Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 14 May 2025 12:28:56 +0300 Subject: [PATCH 040/154] ConnectivityOptions.tsx --- .../ConnectivityOptions.tsx | 32 +++++++++++-------- .../connectivity-options/styles.module.scss | 2 +- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx index 5cb094cc78..8da15c588b 100644 --- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx +++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { EuiBadge, EuiButton, EuiTitle, } from '@elastic/eui' +import { EuiBadge, EuiTitle } from '@elastic/eui' import cx from 'classnames' import { AddDbType } from 'uiSrc/pages/home/constants' import { FeatureFlagComponent, OAuthSsoHandlerDialog } from 'uiSrc/components' @@ -11,8 +11,9 @@ import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces' import CloudIcon from 'uiSrc/assets/img/oauth/cloud_centered.svg?react' import RocketIcon from 'uiSrc/assets/img/oauth/rocket.svg?react' -import { FlexItem, Grid } from 'uiSrc/components/base/layout/flex' +import { Col, FlexItem, Grid } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' import { CONNECTIVITY_OPTIONS } from '../../constants' import styles from './styles.module.scss' @@ -34,21 +35,22 @@ const ConnectivityOptions = (props: Props) => { - onClickOption(AddDbType.cloud)} data-testid="discover-cloud-btn" > - - Add databases - + + + Add databases + + {(ssoCloudHandlerClick, isSSOEnabled) => ( - { Free - - New database - + + + New database + + )} @@ -86,7 +92,7 @@ const ConnectivityOptions = (props: Props) => { {CONNECTIVITY_OPTIONS.map(({ id, type, title, icon }) => ( - onClickOption(type)} @@ -94,7 +100,7 @@ const ConnectivityOptions = (props: Props) => { > {icon?.({ className: styles.btnIcon })} {title} - + ))} diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/styles.module.scss b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/styles.module.scss index bd2340df78..0011c5665f 100644 --- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/styles.module.scss +++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/styles.module.scss @@ -18,7 +18,7 @@ border-color: var(--separatorColorLight) !important; color: var(--buttonSecondaryTextColor) !important; - box-shadow: none !important; + //box-shadow: none !important; &.small { padding: 0 8px; From 47ab453737bc3765735393c84dd24908d056fa1c Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 14 May 2025 12:42:25 +0300 Subject: [PATCH 041/154] Recommendations.tsx --- .../src/components/base/icons/SnoozeIcon.tsx | 7 ++++ .../src/components/base/icons/StarsIcon.tsx | 7 ++++ .../ui/src/components/base/icons/index.ts | 6 ++-- .../WelcomeMyTutorials/WelcomeMyTutorials.tsx | 9 +++-- .../recommendation/Recommendation.tsx | 33 ++++++++++--------- .../welcome-screen/WelcomeScreen.tsx | 9 +++-- .../recommendations-view/Recommendations.tsx | 10 +++--- 7 files changed, 48 insertions(+), 33 deletions(-) create mode 100644 redisinsight/ui/src/components/base/icons/SnoozeIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/StarsIcon.tsx diff --git a/redisinsight/ui/src/components/base/icons/SnoozeIcon.tsx b/redisinsight/ui/src/components/base/icons/SnoozeIcon.tsx new file mode 100644 index 0000000000..b55243db55 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/SnoozeIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import SnoozeSvg from 'uiSrc/assets/img/icons/snooze.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' + +export const SnoozeIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/StarsIcon.tsx b/redisinsight/ui/src/components/base/icons/StarsIcon.tsx new file mode 100644 index 0000000000..bbaefa4ea0 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/StarsIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import StarsSvg from 'uiSrc/assets/img/icons/stars.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' + +export const StarsIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index 89f4d7f7e7..2eb5691aaa 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -5,8 +5,8 @@ export { Copilot } from './Copilot' export { ExtendIcon } from './ExtendIcon' export { Github } from './Github' export { Group as GroupModeIcon } from './Group' -export { MinusInCircleIcon } from './MinusInCircle' export { Icon } from './Icon' +export { MinusInCircleIcon } from './MinusInCircle' export { Play as PlayIcon } from './Play' export { PlayFilledIcon } from './PlayFilled' export { PlusInCircle as PlusInCircleIcon } from './PlusInCircle' @@ -16,8 +16,10 @@ export { RiResetIcon } from './RIResetIcon' export { RiRocketIcon } from './RIRocketIcon' export { RiStopIcon } from './RIStopIcon' export { ShrinkIcon } from './ShrinkIcon' -export { Trigger } from './Trigger' +export { SnoozeIcon } from './SnoozeIcon' +export { StarsIcon } from './StarsIcon' export { ThreeDotsIcon } from './ThreeDotsIcon' +export { Trigger } from './Trigger' export { UserInCircle } from './UserInCircle' export * from '@redis-ui/icons' diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.tsx index 09cfcb615a..1d0d71fa3c 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.tsx @@ -1,6 +1,7 @@ import React from 'react' -import { EuiButton, EuiPanel } from '@elastic/eui' +import { EuiPanel } from '@elastic/eui' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import CreateTutorialLink from '../CreateTutorialLink' import styles from './styles.module.scss' @@ -20,16 +21,14 @@ const WelcomeMyTutorials = ({ handleOpenUpload }: Props) => (
- handleOpenUpload()} data-testid="upload-tutorial-btn" > + Upload tutorial - + ) diff --git a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/Recommendation.tsx b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/Recommendation.tsx index 9894fe927d..dca5eb68ee 100644 --- a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/Recommendation.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/Recommendation.tsx @@ -2,14 +2,12 @@ import React, { useContext } from 'react' import { useDispatch } from 'react-redux' import { useHistory, useParams } from 'react-router-dom' import { - EuiButton, EuiText, EuiLink, EuiPanel, EuiAccordion, EuiToolTip, EuiIcon, - EuiButtonIcon, } from '@elastic/eui' import { isUndefined } from 'lodash' import cx from 'classnames' @@ -37,11 +35,19 @@ import { import RediStackDarkMin from 'uiSrc/assets/img/modules/redistack/RediStackDark-min.svg' import RediStackLightMin from 'uiSrc/assets/img/modules/redistack/RediStackLight-min.svg' -import SnoozeIcon from 'uiSrc/assets/img/icons/snooze.svg?react' -import StarsIcon from 'uiSrc/assets/img/icons/stars.svg?react' +import { + SnoozeIcon, + StarsIcon, + HideIcon, + ShowIcon, +} from 'uiSrc/components/base/icons' import { openTutorialByPath } from 'uiSrc/slices/panels/sidePanels' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { + IconButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface IProps { @@ -149,17 +155,16 @@ const Recommendation = ({ const recommendationContent = () => ( {!isUndefined(tutorialId) && ( - {tutorialId ? 'Start Tutorial' : 'Workbench'} - + )} - - { : ANALYZE_TOOLTIP_MESSAGE } > - setIsShowInfo(true)} data-testid="insights-db-analysis-link" > Analyze Database - + ) : ( diff --git a/redisinsight/ui/src/pages/database-analysis/components/recommendations-view/Recommendations.tsx b/redisinsight/ui/src/pages/database-analysis/components/recommendations-view/Recommendations.tsx index 1fa5f1a036..ac9e51081f 100644 --- a/redisinsight/ui/src/pages/database-analysis/components/recommendations-view/Recommendations.tsx +++ b/redisinsight/ui/src/pages/database-analysis/components/recommendations-view/Recommendations.tsx @@ -4,7 +4,6 @@ import { useHistory, useParams } from 'react-router-dom' import { isNull } from 'lodash' import { EuiAccordion, - EuiButton, EuiIcon, EuiLink, EuiPanel, @@ -36,6 +35,7 @@ import { sortRecommendations } from 'uiSrc/utils/recommendation' import { openTutorialByPath } from 'uiSrc/slices/panels/sidePanels' import { findTutorialPath } from 'uiSrc/utils' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' const Recommendations = () => { @@ -78,7 +78,7 @@ const Recommendations = () => { } const onRedisStackClick = ( - event: React.MouseEvent, + event: React.MouseEvent, ) => event.stopPropagation() const renderButtonContent = ( @@ -220,15 +220,13 @@ const Recommendations = () => { {tutorialId && ( - goToTutorial(tutorialId, id)} data-testid={`${id}-to-tutorial-btn`} > Tutorial - + )} From 0d1e8eebf887d881344ec38196f9b25984437440 Mon Sep 17 00:00:00 2001 From: Krum Tyukenov Date: Thu, 15 May 2025 10:31:20 +0300 Subject: [PATCH 042/154] update vite config --- redisinsight/ui/vite.config.mjs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/redisinsight/ui/vite.config.mjs b/redisinsight/ui/vite.config.mjs index 900d228df9..fb5dcf4bd7 100644 --- a/redisinsight/ui/vite.config.mjs +++ b/redisinsight/ui/vite.config.mjs @@ -46,6 +46,8 @@ export default defineConfig({ alias: { lodash: 'lodash-es', '@elastic/eui$': '@elastic/eui/optimize/lib', + '@redislabsdev/redis-ui-styles': '@redis-ui/styles', + '@redislabsdev/redis-ui-icons': '@redis-ui/icons', uiSrc: fileURLToPath(new URL('./src', import.meta.url)), apiSrc: fileURLToPath(new URL('../api/src', import.meta.url)), }, From 38a54bb09d46bcb0db038ad8d7904c67716dc27d Mon Sep 17 00:00:00 2001 From: Krum Tyukenov Date: Thu, 15 May 2025 14:23:42 +0300 Subject: [PATCH 043/154] update jest config --- jest.config.cjs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/jest.config.cjs b/jest.config.cjs index 3347146a70..9f367cd721 100644 --- a/jest.config.cjs +++ b/jest.config.cjs @@ -12,6 +12,8 @@ module.exports = { '\\.(css|less|sass|scss)$': 'identity-obj-proxy', '\\.scss\\?inline$': '/redisinsight/__mocks__/scssRaw.js', 'uiSrc/(.*)': '/redisinsight/ui/src/$1', + '@redislabsdev/redis-ui-styles': '@redis-ui/styles', + '@redislabsdev/redis-ui-icons': '@redis-ui/icons', 'monaco-editor': '/redisinsight/__mocks__/monacoMock.js', 'monaco-yaml': '/redisinsight/__mocks__/monacoYamlMock.js', unified: '/redisinsight/__mocks__/unified.js', From 88c342b788879874e33c666ce3dc2574e00258e7 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 14 May 2025 13:48:12 +0300 Subject: [PATCH 044/154] OnboardingStartPopover.tsx --- .../components/base/forms/buttons/Button.tsx | 21 +++++++---- .../ui/src/pages/browser/BrowserPage.tsx | 14 ++++---- .../KeyTreeSettings/KeyTreeSettings.tsx | 23 ++++++------ .../load-sample-data/LoadSampleData.tsx | 10 +++--- .../OnboardingStartPopover.tsx | 20 ++++------- .../add-stream-entity/AddStreamEntries.tsx | 20 ++++++----- .../add-stream-group/AddStreamGroup.tsx | 20 +++++------ .../MessageAckPopover/MessageAckPopover.tsx | 17 ++++----- .../MessageClaimPopover.tsx | 22 ++++++------ .../editable-popover/EditablePopover.tsx | 36 +++++++++---------- 10 files changed, 101 insertions(+), 102 deletions(-) diff --git a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx index 60fd007362..357104278f 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx @@ -3,6 +3,17 @@ import React from 'react' import { LoaderLargeIcon } from 'uiSrc/components/base/icons' import { BaseButtonProps } from 'uiSrc/components/base/forms/buttons/button.styles' +type ButtonSize = 'small' | 'medium' | 'large' +type SizeKey = 'small' | 's' | 'medium' | 'm' | 'large' | 'l' + +const buttonSizeMap: Record = { + small: 'small', + s: 'small', + medium: 'medium', + m: 'medium', + large: 'large', + l: 'large', +} export const BaseButton = ({ children, icon, @@ -11,14 +22,10 @@ export const BaseButton = ({ size = 'medium', ...props }: BaseButtonProps) => { - let btnSize: 'small' | 'medium' | 'large' = 'medium' + let btnSize: ButtonSize = 'medium' - if (size === 's') { - btnSize = 'small' - } else if (size === 'm') { - btnSize = 'medium' - } else if (size === 'l') { - btnSize = 'large' + if (size in buttonSizeMap) { + btnSize = buttonSizeMap[size] } return ( )} ) From 4817dfc94af69ae90e248236a9d5385b2915ed6c Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 15 May 2025 18:38:55 +0300 Subject: [PATCH 066/154] ChatForm.tsx, ErrorMessage.tsx, ExpertChatHeader.tsx --- .../expert-chat-header/ExpertChatHeader.tsx | 15 ++++----------- .../components/shared/chat-form/ChatForm.tsx | 17 ++++++----------- .../shared/error-message/ErrorMessage.tsx | 10 +++++----- 3 files changed, 15 insertions(+), 27 deletions(-) diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx index dc4503f390..f73b5ff5d9 100644 --- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx @@ -1,11 +1,5 @@ import React, { useState } from 'react' -import { - EuiButton, - EuiButtonEmpty, - EuiPopover, - EuiText, - EuiToolTip, -} from '@elastic/eui' +import { EuiButtonEmpty, EuiPopover, EuiText, EuiToolTip } from '@elastic/eui' import cx from 'classnames' import { useDispatch } from 'react-redux' @@ -27,6 +21,7 @@ import { import { RestartChat } from 'uiSrc/components/side-panels/panels/ai-assistant/components/shared' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -118,16 +113,14 @@ const ExpertChatHeader = (props: Props) => { Open relevant tutorials to learn more about search and query. - Open tutorials - + diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx index 32ba18c245..0240ef9550 100644 --- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx @@ -1,6 +1,5 @@ import React, { Ref, useRef, useState } from 'react' import { - EuiButton, EuiForm, EuiPopover, EuiText, @@ -13,9 +12,9 @@ import { import cx from 'classnames' import { isModifiedEvent } from 'uiSrc/services' -import SendIcon from 'uiSrc/assets/img/icons/send.svg?react' - import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' +import { SendIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export interface Props { @@ -151,13 +150,11 @@ const ChatForm = (props: Props) => { )} anchorClassName={styles.popoverAnchor} button={ - { <> {agreements} - { data-testid="ai-accept-agreements" > I accept - + diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/error-message/ErrorMessage.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/error-message/ErrorMessage.tsx index 73b13ce20e..d99fe9d95b 100644 --- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/error-message/ErrorMessage.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/error-message/ErrorMessage.tsx @@ -1,11 +1,12 @@ import React from 'react' -import { EuiButton } from '@elastic/eui' import { EXTERNAL_LINKS } from 'uiSrc/constants/links' import { CustomErrorCodes } from 'uiSrc/constants' import { AI_CHAT_ERRORS } from 'uiSrc/constants/apiErrors' import ApiStatusCode from 'uiSrc/constants/apiStatusCode' +import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' +import { DeleteIcon } from 'uiSrc/components/base/icons' import RestartChat from '../restart-chat' import styles from './styles.module.scss' @@ -90,15 +91,14 @@ const ErrorMessage = (props: Props) => { Restart session - + } onConfirm={onRestart} /> From 1d6d38a7e851cf96cdfb0b9ce64122719a811ce8 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 15 May 2025 20:40:15 +0300 Subject: [PATCH 067/154] RestartChat.tsx --- .../components/shared/restart-chat/RestartChat.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.tsx index 820d26ff62..c9b1faae4c 100644 --- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.tsx @@ -1,8 +1,9 @@ import React, { useState } from 'react' import cx from 'classnames' -import { EuiButton, EuiPopover, EuiText, EuiTitle } from '@elastic/eui' +import { EuiPopover, EuiText, EuiTitle } from '@elastic/eui' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -50,16 +51,14 @@ const RestartChat = (props: Props) => { session. - Restart - + ) From 7ef621e091fe27365a1f09a80dc303d0336b1f64 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 15 May 2025 20:40:20 +0300 Subject: [PATCH 068/154] DeleteTutorialButton.tsx --- .../DeleteTutorialButton/DeleteTutorialButton.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx index a37bf843b6..b53459f1dd 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx @@ -1,8 +1,10 @@ import React, { useState } from 'react' -import { EuiButton, EuiIcon, EuiPopover, EuiText } from '@elastic/eui' +import { EuiIcon, EuiPopover, EuiText } from '@elastic/eui' import { formatLongName } from 'uiSrc/utils' +import { DestructiveButton } from 'uiSrc/components/base/forms/buttons' +import { DeleteIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export interface Props { @@ -48,17 +50,15 @@ const DeleteTutorialButton = (props: Props) => { will be deleted.
- Delete - +
From 3b897fae25355e41768f4cfe55f56fac508761d1 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 15 May 2025 20:41:26 +0300 Subject: [PATCH 069/154] PopoverRunAnalyze.tsx --- .../popover-run-analyze/PopoverRunAnalyze.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/popover-run-analyze/PopoverRunAnalyze.tsx b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/popover-run-analyze/PopoverRunAnalyze.tsx index ae440ba21b..20f5e643cc 100644 --- a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/popover-run-analyze/PopoverRunAnalyze.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/popover-run-analyze/PopoverRunAnalyze.tsx @@ -1,7 +1,8 @@ -import { EuiButton, EuiPopover, EuiText } from '@elastic/eui' +import { EuiPopover, EuiText } from '@elastic/eui' import React from 'react' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -43,18 +44,15 @@ const PopoverRunAnalyze = (props: Props) => { {popoverContent} - Analyze - + ) From ba26fac0009dae573915ab6ce48efe4e4ec5cf35 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 15 May 2025 20:47:34 +0300 Subject: [PATCH 070/154] CopilotTrigger.tsx --- redisinsight/ui/src/assets/img/icons/copilot.svg | 2 +- .../ui/src/components/base/icons/Copilot.tsx | 6 +++--- redisinsight/ui/src/components/base/icons/index.ts | 2 +- .../triggers/copilot-trigger/CopilotTrigger.tsx | 12 +++++------- 4 files changed, 10 insertions(+), 12 deletions(-) diff --git a/redisinsight/ui/src/assets/img/icons/copilot.svg b/redisinsight/ui/src/assets/img/icons/copilot.svg index 6d470ef70f..95b7f70f1e 100644 --- a/redisinsight/ui/src/assets/img/icons/copilot.svg +++ b/redisinsight/ui/src/assets/img/icons/copilot.svg @@ -1,4 +1,4 @@ - + diff --git a/redisinsight/ui/src/components/base/icons/Copilot.tsx b/redisinsight/ui/src/components/base/icons/Copilot.tsx index 5a403e90ab..eb9d973bb6 100644 --- a/redisinsight/ui/src/components/base/icons/Copilot.tsx +++ b/redisinsight/ui/src/components/base/icons/Copilot.tsx @@ -1,7 +1,7 @@ import React from 'react' -import CopilotIcon from 'uiSrc/assets/img/icons/copilot.svg?react' +import CopilotSvg from 'uiSrc/assets/img/icons/copilot.svg?react' import { Icon, IconProps } from './Icon' -export const Copilot = (props: IconProps) => ( - +export const CopilotIcon = (props: IconProps) => ( + ) diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index ca306c3d06..474942cd92 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -1,7 +1,7 @@ export { BannedIcon } from './BannedIcon' export { BulkActions } from './BulkActions' export { Cloud } from './Cloud' -export { Copilot } from './Copilot' +export { CopilotIcon } from './Copilot' export { ExtendIcon } from './ExtendIcon' export { Github } from './Github' export { Group as GroupModeIcon } from './Group' diff --git a/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx index 845e2bfd1b..6f99fe7cc3 100644 --- a/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx +++ b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx @@ -1,6 +1,6 @@ import React from 'react' import cx from 'classnames' -import { EuiButton, EuiToolTip } from '@elastic/eui' +import { EuiToolTip } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { @@ -8,8 +8,9 @@ import { toggleSidePanel, } from 'uiSrc/slices/panels/sidePanels' -import CopilotIcon from 'uiSrc/assets/img/icons/copilot.svg?react' +import { CopilotIcon } from 'uiSrc/components/base/icons' import { SidePanels } from 'uiSrc/slices/interfaces/insights' +import { EmptyButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' const CopilotTrigger = () => { @@ -28,13 +29,10 @@ const CopilotTrigger = () => { })} > - From 6db708355e5c4af2951533ced652c4b20ca2301c Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 15 May 2025 22:15:14 +0300 Subject: [PATCH 071/154] RedisCloudDatabasesResult.tsx --- .../components/base/layout/flex/flex.spec.tsx | 11 +- .../base/layout/flex/flex.styles.ts | 120 ++++++++++++++++-- .../src/components/base/layout/flex/flex.tsx | 27 ++-- .../monitor/MonitorHeader/MonitorHeader.tsx | 2 +- .../RedisCloudDatabasesResult.tsx | 41 +++--- .../redis-cluster/RedisClusterDatabases.tsx | 2 +- redisinsight/ui/src/utils/test-utils.tsx | 6 +- 7 files changed, 160 insertions(+), 49 deletions(-) diff --git a/redisinsight/ui/src/components/base/layout/flex/flex.spec.tsx b/redisinsight/ui/src/components/base/layout/flex/flex.spec.tsx index c1b5e02b46..c8d19b6168 100644 --- a/redisinsight/ui/src/components/base/layout/flex/flex.spec.tsx +++ b/redisinsight/ui/src/components/base/layout/flex/flex.spec.tsx @@ -1,16 +1,15 @@ import React from 'react' import { render } from 'uiSrc/utils/test-utils' -import { theme } from 'uiSrc/components/base/theme' import { alignValues, dirValues, gapSizes, justifyValues } from './flex.styles' import { Col, FlexGroup as Flex, FlexItem, Grid, Row } from './flex' const gapStyles = { none: '', - xs: theme.semantic.core.space.xs, - s: theme.semantic.core.space.s, - m: theme.semantic.core.space.m, - l: theme.semantic.core.space.l, - xl: theme.semantic.core.space.xl, + xs: '0.2rem', + s: '0.4rem', + m: '0.8rem', + l: '2rem', + xl: '2.4rem', } describe('Flex Components', () => { it('should render', () => { diff --git a/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts b/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts index 23c4187af8..8a66a1cfac 100644 --- a/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts +++ b/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts @@ -1,7 +1,7 @@ import React, { HTMLAttributes, PropsWithChildren, ReactNode } from 'react' import styled, { css } from 'styled-components' -import { theme } from 'uiSrc/components/base/theme' +import { useTheme } from '@redis-ui/styles' import { CommonProps } from 'uiSrc/components/base/theme/types' export const gapSizes = ['none', 'xs', 's', 'm', 'l', 'xl'] as const @@ -17,6 +17,9 @@ export type GridProps = HTMLAttributes & { centered?: boolean responsive?: boolean } + +type ThemeType = ReturnType + const flexGridStyles = { columns: { 1: css` @@ -85,19 +88,19 @@ const flexGroupStyles = { gapSizes: { none: css``, xs: css` - gap: ${theme.semantic.core.space.xs}; + gap: ${({ theme }: { theme: ThemeType }) => theme.core.space.space025}; `, s: css` - gap: ${theme.semantic.core.space.s}; + gap: ${({ theme }: { theme: ThemeType }) => theme.core.space.space050}; `, m: css` - gap: ${theme.semantic.core.space.m}; + gap: ${({ theme }: { theme: ThemeType }) => theme.core.space.space100}; `, l: css` - gap: ${theme.semantic.core.space.l}; + gap: ${({ theme }: { theme: ThemeType }) => theme.core.space.space250}; `, xl: css` - gap: ${theme.semantic.core.space.xl}; + gap: ${({ theme }: { theme: ThemeType }) => theme.core.space.space300}; `, }, justify: { @@ -184,7 +187,12 @@ export const StyledFlex = styled.div` ${({ centered = false }) => (centered ? flexGroupStyles.centered : '')} ${({ responsive = false }) => (responsive ? flexGroupStyles.responsive : '')} ${({ wrap = false }) => (wrap ? flexGroupStyles.wrap : '')} - ${({ full = false }) => (full ? 'height: 100%;' : '')} + ${({ full = false, direction = 'row' }) => + full + ? direction === 'row' || direction === 'rowReverse' + ? 'width: 100%' // if it is row make it full width + : 'height: 100%;' // else, make it full height + : ''} ` export const flexItemStyles = { growZero: css` @@ -226,6 +234,64 @@ export const flexItemStyles = { flex-grow: 10; `, }, + padding: { + '0': css` + padding: ${({ theme }: { theme: ThemeType }) => + theme.core.space.space000}; + `, + '1': css` + padding: ${({ theme }: { theme: ThemeType }) => + theme.core.space.space010}; + `, + '2': css` + padding: ${({ theme }: { theme: ThemeType }) => + theme.core.space.space025}; + `, + '3': css` + padding: ${({ theme }: { theme: ThemeType }) => + theme.core.space.space050}; + `, + '4': css` + padding: ${({ theme }: { theme: ThemeType }) => + theme.core.space.space100}; + `, + '5': css` + padding: ${({ theme }: { theme: ThemeType }) => + theme.core.space.space150}; + `, + '6': css` + padding: ${({ theme }: { theme: ThemeType }) => + theme.core.space.space200}; + `, + '7': css` + padding: ${({ theme }: { theme: ThemeType }) => + theme.core.space.space250}; + `, + '8': css` + padding: ${({ theme }: { theme: ThemeType }) => + theme.core.space.space300}; + `, + '9': css` + padding: ${({ theme }: { theme: ThemeType }) => + theme.core.space.space400}; + `, + '10': css` + padding: ${({ theme }: { theme: ThemeType }) => + theme.core.space.space500}; + `, + '11': css` + padding: ${({ theme }: { theme: ThemeType }) => + theme.core.space.space550}; + `, + '12': css` + padding: ${({ theme }: { theme: ThemeType }) => + theme.core.space.space600}; + `, + '13': css` + padding: ${({ theme }: { theme: ThemeType }) => + theme.core.space.space800}; + `, + }, } export const VALID_GROW_VALUES = [ @@ -246,11 +312,33 @@ export const VALID_GROW_VALUES = [ 10, ] as const +export const VALID_PADDING_VALUES = [ + null, + undefined, + true, + false, + 0, // '0', + 1, // '0.1rem: 1,25px', + 2, // '0.2rem: 2,5px', + 3, // '0.4rem: 5px', + 4, // '0.8rem: 10px', + 5, // '1.2rem: 15px', + 6, // '1.6rem: 20px', + 7, // '2rem: 25px', + 8, // '2.4rem: 30px', + 9, // '3.2rem: 40px', + 10, // '4rem: 50px', + 11, // '4.4rem: 55px', + 12, // '4.8rem: 60px', + 13, // '6.4rem: 80px', +] as const + export type FlexItemProps = React.HTMLAttributes & PropsWithChildren & CommonProps & { grow?: (typeof VALID_GROW_VALUES)[number] $direction?: (typeof dirValues)[number] + $padding?: (typeof VALID_PADDING_VALUES)[number] } export const StyledFlexItem = styled.div` @@ -271,8 +359,7 @@ export const StyledFlexItem = styled.div` return 'column-reverse' } }}; - ${(props) => { - const { grow } = props + ${({ grow }) => { if (!grow) { return flexItemStyles.growZero } @@ -284,4 +371,19 @@ export const StyledFlexItem = styled.div` } return result.join('\n') }} + ${({ $padding }) => { + if ($padding === null || $padding === undefined || $padding === false) { + return '' + } + if ($padding === true) { + return flexItemStyles.padding['4'] // Default padding (space100) + } + if ( + typeof $padding === 'number' && + flexItemStyles.padding[$padding] !== undefined + ) { + return flexItemStyles.padding[$padding] + } + return '' + }} ` diff --git a/redisinsight/ui/src/components/base/layout/flex/flex.tsx b/redisinsight/ui/src/components/base/layout/flex/flex.tsx index e531c0e3a5..c914f5f517 100644 --- a/redisinsight/ui/src/components/base/layout/flex/flex.tsx +++ b/redisinsight/ui/src/components/base/layout/flex/flex.tsx @@ -1,13 +1,14 @@ import React from 'react' import classNames from 'classnames' import { + dirValues, FlexItemProps, FlexProps, GridProps, StyledFlex, StyledFlexItem, StyledGrid, - VALID_GROW_VALUES, + VALID_PADDING_VALUES, } from 'uiSrc/components/base/layout/flex/flex.styles' export const Grid = ({ children, className, ...rest }: GridProps) => { @@ -51,10 +52,10 @@ export const FlexGroup = ({ children, className, ...rest }: FlexProps) => { * Column Component * * A Column component is a special type of FlexGroup that is meant to be used when you - * want to layout out a group of items in a vertical column. It is functionally equivalent to + * want to layout a group of items in a vertical column. It is functionally equivalent to * using a FlexGroup with a direction of 'column', but includes some additional conveniences. * - * This is the preferred API of a component, that is not meant to be distributed, but widely used in our project + * This is the preferred API of a component that is not meant to be distributed but widely used in our project * * @example * @@ -109,7 +110,7 @@ export const Row = ({ /** * Flex item component * - * This represents more or less direct implementation of `EuiFlexItem` + * This represents a more or less direct implementation of `EuiFlexItem` * * @remarks * This component is useful when you want to create a flex item that can @@ -124,14 +125,22 @@ export const FlexItem = ({ children, className, grow = false, + padding, + direction, ...rest -}: FlexItemProps) => { - if (!VALID_GROW_VALUES.includes(grow)) { - throw new Error(`Invalid grow value: ${grow}`) - } +}: Omit & { + padding?: (typeof VALID_PADDING_VALUES)[number] + direction?: (typeof dirValues)[number] +}) => { const classes = classNames('RI-flex-item', className) return ( - + {children} ) diff --git a/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx b/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx index 9432c3e8bd..2b5408d0ea 100644 --- a/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx +++ b/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx @@ -91,7 +91,7 @@ const MonitorHeader = ({ handleRunMonitor }: Props) => { {isStarted && ( - + { /> -
- - Back to adding databases - - - View Databases - -
+ + + + Back to adding databases + + + View Databases + + + ) } diff --git a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx index 75e2ea8d58..86fd6e2b26 100644 --- a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx +++ b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx @@ -218,7 +218,7 @@ const RedisClusterDatabases = ({ > Back to adding databases - + { const Wrapper = ({ children }: { children: JSX.Element }) => ( - {children} + + {children} + ) const wrapper = !withRouter ? Wrapper : BrowserRouter From 960bcc9897956f4462b7a85fe4b92e50e6f706dd Mon Sep 17 00:00:00 2001 From: pd-redis Date: Fri, 16 May 2025 10:11:15 +0300 Subject: [PATCH 072/154] RedisCloudDatabases.tsx --- .../RedisCloudDatabases.tsx | 57 ++++++++++--------- 1 file changed, 29 insertions(+), 28 deletions(-) diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx index 7b6cf6bc57..0303e47bee 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx @@ -4,7 +4,6 @@ import { EuiBasicTableColumn, EuiTableSelectionType, PropertySort, - EuiButton, EuiPopover, EuiText, EuiTitle, @@ -15,15 +14,19 @@ import { import { map, pick } from 'lodash' import { useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' -import cx from 'classnames' -import { Pages } from 'uiSrc/constants' import { cloudSelector } from 'uiSrc/slices/instances/cloud' import { InstanceRedisCloud } from 'uiSrc/slices/interfaces' import validationErrors from 'uiSrc/constants/validationErrors' import { AutodiscoveryPageTemplate } from 'uiSrc/templates' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { InfoIcon } from 'uiSrc/components/base/icons' +import { + DestructiveButton, + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import styles from '../styles.module.scss' export interface Props { @@ -134,14 +137,13 @@ const RedisCloudDatabasesPage = ({ panelClassName={styles.panelCancelBtn} panelPaddingSize="l" button={ - Cancel - + } > @@ -152,15 +154,13 @@ const RedisCloudDatabasesPage = ({
- Proceed - +
) @@ -180,18 +180,16 @@ const RedisCloudDatabasesPage = ({ ) : null } > - Add selected Databases - + ) @@ -242,18 +240,21 @@ const RedisCloudDatabasesPage = ({ /> -
- - Back to adding databases - - - -
+ + + + Back to adding databases + +
+ + +
+ + ) } From ba662a9a9bf66eefff017a3a483ce23c1cf72326 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Fri, 16 May 2025 10:24:51 +0300 Subject: [PATCH 073/154] RedisCloudSubscriptions.tsx --- .../RedisCloudDatabases.tsx | 1 + .../RedisCloudSubscriptions.tsx | 55 ++++++++++--------- 2 files changed, 30 insertions(+), 26 deletions(-) diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx index 0303e47bee..fe343b4889 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx @@ -27,6 +27,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { Pages } from 'uiSrc/constants' import styles from '../styles.module.scss' export interface Props { diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx index edafe77e22..cff448e469 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx @@ -5,7 +5,6 @@ import { EuiBasicTableColumn, EuiTableSelectionType, PropertySort, - EuiButton, EuiPopover, EuiText, EuiTitle, @@ -27,6 +26,12 @@ import validationErrors from 'uiSrc/constants/validationErrors' import { AutodiscoveryPageTemplate } from 'uiSrc/templates' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { + DestructiveButton, + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' +import { InfoIcon } from 'uiSrc/components/base/icons' import styles from '../styles.module.scss' export interface Props { @@ -138,14 +143,13 @@ const RedisCloudSubscriptions = ({ panelClassName={styles.panelCancelBtn} panelPaddingSize="l" button={ - Cancel - + } > @@ -156,15 +160,13 @@ const RedisCloudSubscriptions = ({
- Proceed - +
) @@ -184,18 +186,16 @@ const RedisCloudSubscriptions = ({ ) : null } > - Show databases - + ) @@ -301,18 +301,21 @@ const RedisCloudSubscriptions = ({ )} -
- - Back to adding databases - - - -
+ + + + Back to adding databases + + + + + + + ) } From ee882ea9f65ce548efcf4499af21cd8c3c8fa6f9 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Fri, 16 May 2025 10:32:52 +0300 Subject: [PATCH 074/154] SentinelDatabasesResult.tsx, SentinelDatabasesResultPage.tsx --- .../SentinelDatabasesResultPage.tsx | 22 +++++----- .../SentinelDatabasesResult.tsx | 43 ++++++++++--------- 2 files changed, 32 insertions(+), 33 deletions(-) diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/SentinelDatabasesResultPage.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/SentinelDatabasesResultPage.tsx index 48c1271cf4..7dd68bc79a 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/SentinelDatabasesResultPage.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/SentinelDatabasesResultPage.tsx @@ -1,11 +1,9 @@ import { EuiBasicTableColumn, - EuiButtonIcon, EuiLoadingSpinner, EuiTextColor, EuiText, EuiIcon, - EuiButton, EuiToolTip, } from '@elastic/eui' import { pick } from 'lodash' @@ -32,6 +30,8 @@ import { InputFieldSentinel } from 'uiSrc/components' import validationErrors from 'uiSrc/constants/validationErrors' import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel' +import { IconButton, PrimaryButton } from 'uiSrc/components/base/forms/buttons' +import { InfoIcon } from 'uiSrc/components/base/icons' import SentinelDatabasesResult from './components' import styles from '../styles.module.scss' @@ -53,7 +53,7 @@ const SentinelDatabasesResultPage = () => { useEffect(() => { if (!masters.length) { - history.push(Pages.home) + // history.push(Pages.home) } dispatch(resetLoadedSentinel(LoadedSentinel.MastersAdded)) @@ -207,8 +207,8 @@ const SentinelDatabasesResultPage = () => { content="Copy" anchorClassName="copyPublicEndpointTooltip" > - handleCopy(text)} @@ -358,17 +358,15 @@ const SentinelDatabasesResultPage = () => { ) : null } > - handleAddInstance(name)} - iconType={isDisabled ? 'iInCircle' : undefined} + icon={isDisabled ? InfoIcon : undefined} > Add Primary Group - + ) diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx index 1032b2c585..a7e49c1450 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx @@ -1,10 +1,8 @@ import React, { useState, useEffect } from 'react' -import cx from 'classnames' import { EuiInMemoryTable, EuiBasicTableColumn, PropertySort, - EuiButton, EuiText, EuiTitle, EuiFieldSearch, @@ -18,6 +16,10 @@ import MessageBar from 'uiSrc/components/message-bar/MessageBar' import { AutodiscoveryPageTemplate } from 'uiSrc/templates' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -137,25 +139,24 @@ const SentinelDatabasesResult = ({ /> -
- - Back to adding databases - - - View Databases - -
+ + + + Back to adding databases + + + View Databases + + + ) } From 79e5e2994ff655b59f5d6f1199b985330dd15605 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Fri, 16 May 2025 10:39:09 +0300 Subject: [PATCH 075/154] SentinelDatabases.tsx --- .../SentinelDatabases/SentinelDatabases.tsx | 55 +++++++++++-------- 1 file changed, 31 insertions(+), 24 deletions(-) diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx index ccbe67e260..a7a2e90585 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx @@ -5,7 +5,6 @@ import { EuiBasicTableColumn, EuiTableSelectionType, PropertySort, - EuiButton, EuiPopover, EuiText, EuiTitle, @@ -21,6 +20,12 @@ import validationErrors from 'uiSrc/constants/validationErrors' import { AutodiscoveryPageTemplate } from 'uiSrc/templates' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { + DestructiveButton, + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' +import { InfoIcon } from 'uiSrc/components/base/icons' import styles from '../../../styles.module.scss' export interface Props { @@ -127,14 +132,14 @@ const SentinelDatabases = ({ panelClassName={styles.panelCancelBtn} panelPaddingSize="l" button={ - Cancel - + } > @@ -145,15 +150,13 @@ const SentinelDatabases = ({
- Proceed - +
) @@ -184,18 +187,16 @@ const SentinelDatabases = ({ ) : null } > - Add Primary Group - + ) } @@ -252,18 +253,24 @@ const SentinelDatabases = ({ )} -
- + - Back to adding databases - - - -
+ + Back to adding databases + +
+ + +
+ + ) } From ecefce7029f4a90666bf9fc74a987b3dab397468 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Fri, 16 May 2025 10:42:29 +0300 Subject: [PATCH 076/154] BulkDeleteFooter.tsx --- .../BulkDeleteFooter/BulkDeleteFooter.tsx | 40 +++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/BulkDeleteFooter/BulkDeleteFooter.tsx b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/BulkDeleteFooter/BulkDeleteFooter.tsx index 8338c8eb65..e9448ba98c 100644 --- a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/BulkDeleteFooter/BulkDeleteFooter.tsx +++ b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/BulkDeleteFooter/BulkDeleteFooter.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { EuiButton, EuiIcon, EuiPopover, EuiText } from '@elastic/eui' +import { EuiIcon, EuiPopover, EuiText } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { useParams } from 'react-router-dom' import cx from 'classnames' @@ -20,6 +20,12 @@ import { BulkActionsType } from 'uiSrc/constants' import { getRangeForNumber, BULK_THRESHOLD_BREAKPOINTS } from 'uiSrc/utils' import { DEFAULT_SEARCH_MATCH } from 'uiSrc/constants/api' +import { + DestructiveButton, + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' +import { RefreshIcon } from 'uiSrc/components/base/icons' import BulkDeleteContent from '../BulkDeleteContent' import { isProcessedBulkAction } from '../../utils' @@ -90,24 +96,22 @@ const BulkDeleteFooter = (props: Props) => { {status && }
{!loading && ( - {isProcessedBulkAction(status) ? 'Close' : 'Cancel'} - + )} {loading && ( - Stop - + )} {!isProcessedBulkAction(status) && ( @@ -119,16 +123,14 @@ const BulkDeleteFooter = (props: Props) => { panelClassName={styles.panelPopover} panelPaddingSize="none" button={ - Delete - + } > {
{`All keys with ${filter ? filter?.toUpperCase() : 'all'} key type and selected pattern will be deleted.`}
- Delete - + )} {isProcessedBulkAction(status) && ( - Start New - + )}
From 93c5de694f6dccf031c4ad62b97de4a6bd34311b Mon Sep 17 00:00:00 2001 From: pd-redis Date: Fri, 16 May 2025 10:46:55 +0300 Subject: [PATCH 077/154] BulkDeleteSummaryButton.tsx --- .../bulk-actions/BulkDelete/BulkDelete.tsx | 2 +- .../BulkDeleteSummaryButton.tsx | 18 +++++++++++------- .../redis-cluster/RedisClusterDatabases.tsx | 2 +- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/BulkDelete.tsx b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/BulkDelete.tsx index 69dac299f7..b55b9232ce 100644 --- a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/BulkDelete.tsx +++ b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/BulkDelete.tsx @@ -61,7 +61,7 @@ const BulkDelete = (props: Props) => { > - {isCompleted && ( + {true && (
{ const fileUrl = useMemo(() => { @@ -37,16 +40,17 @@ const BulkDeleteSummaryButton = ({ ) return ( - + > + + {children} + + ) } diff --git a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx index 86fd6e2b26..480d2acf8f 100644 --- a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx +++ b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx @@ -14,7 +14,6 @@ import { import cx from 'classnames' import { map } from 'lodash' import { useSelector } from 'react-redux' -import { InfoIcon } from '@redis-ui/icons' import { Maybe } from 'uiSrc/utils' import { InstanceRedisCluster } from 'uiSrc/slices/interfaces' import { clusterSelector } from 'uiSrc/slices/instances/cluster' @@ -22,6 +21,7 @@ import validationErrors from 'uiSrc/constants/validationErrors' import { AutodiscoveryPageTemplate } from 'uiSrc/templates' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { InfoIcon } from 'uiSrc/components/base/icons' import { DestructiveButton, PrimaryButton, From c9aeaf991c4a11bd957477a638c8a2ec5d0d2508 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Fri, 16 May 2025 12:12:34 +0300 Subject: [PATCH 078/154] CreateRedisearchIndex.tsx --- .../CreateRedisearchIndex.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx b/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx index ea34b15497..6157a04908 100644 --- a/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx +++ b/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx @@ -1,5 +1,4 @@ import { - EuiButton, EuiButtonIcon, EuiComboBox, EuiFieldText, @@ -12,7 +11,6 @@ import { EuiSuperSelect, EuiSuperSelectOption, EuiText, - EuiTextColor, } from '@elastic/eui' import { EuiComboBoxOptionOption } from '@elastic/eui/src/components/combo_box/types' import cx from 'classnames' @@ -32,6 +30,10 @@ import { getFieldTypeOptions } from 'uiSrc/utils/redisearch' import { getUtmExternalLink } from 'uiSrc/utils/links' import AddMultipleFields from 'uiSrc/pages/browser/components/add-multiple-fields' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { + PrimaryButton, + SecondaryButton, +} from 'uiSrc/components/base/forms/buttons' import { CreateRedisearchIndexDto } from 'apiSrc/modules/browser/redisearch/dto' import { KEY_TYPE_OPTIONS, RedisearchIndexKeyType } from './constants' @@ -340,27 +342,25 @@ const CreateRedisearchIndex = ({ onClosePanel, onCreateIndex }: Props) => { > - onClosePanel?.()} className="btn-cancel btn-back" data-testid="create-index-cancel-btn" > - Cancel - + Cancel + - Create Index - + From c2df4350b4d7b585e2c5ff1b24d8ef498c790558 Mon Sep 17 00:00:00 2001 From: Krum Tyukenov Date: Tue, 20 May 2025 11:25:07 +0300 Subject: [PATCH 079/154] RI-7051: Replace EuiFieldPassword with PasswordInput (#4552) * RI-7051: add PasswordInput component * RI-7051: replace EuiFieldPassword with PasswordInput * RI-7051: remove euiFieldPassword styles * RI-7051: adjust info icon in rdi form * RI-7051: change PasswordInput import path * remove leftover * RI-7051: move PasswordInput a folder level up * RI-7051: PasswordInput leftover --- .../components/base/inputs/PasswordInput.tsx | 9 + .../ui/src/components/base/inputs/index.ts | 1 + .../components/form-dialog/styles.module.scss | 4 +- .../InputFieldSentinel.tsx | 7 +- .../ClusterConnectionForm.tsx | 7 +- .../home/components/form/DatabaseForm.tsx | 10 +- .../pages/home/components/form/SSHDetails.tsx | 17 +- .../form/sentinel/SentinelMasterDatabase.tsx | 9 +- .../home/connection-form/ConnectionForm.tsx | 19 +- .../home/connection-form/styles.module.scss | 4 - .../ui/src/pages/settings/styles.module.scss | 1 - redisinsight/ui/src/styles/base/_inputs.scss | 5 - .../ui/src/styles/base/_typography.scss | 1 - .../ui/src/styles/components/_accordion.scss | 1 - .../ui/src/styles/components/_forms.scss | 2 - redisinsight/ui/src/styles/elastic.css | 232 ------------------ 16 files changed, 38 insertions(+), 291 deletions(-) create mode 100644 redisinsight/ui/src/components/base/inputs/PasswordInput.tsx create mode 100644 redisinsight/ui/src/components/base/inputs/index.ts diff --git a/redisinsight/ui/src/components/base/inputs/PasswordInput.tsx b/redisinsight/ui/src/components/base/inputs/PasswordInput.tsx new file mode 100644 index 0000000000..6e94fdd9e8 --- /dev/null +++ b/redisinsight/ui/src/components/base/inputs/PasswordInput.tsx @@ -0,0 +1,9 @@ +import React, { ComponentProps } from 'react' + +import { PasswordInput as RedisPasswordInput } from '@redis-ui/components' + +export type RedisPasswordInputProps = ComponentProps + +export default function PasswordInput(props: RedisPasswordInputProps) { + return +} diff --git a/redisinsight/ui/src/components/base/inputs/index.ts b/redisinsight/ui/src/components/base/inputs/index.ts new file mode 100644 index 0000000000..21c9adb49f --- /dev/null +++ b/redisinsight/ui/src/components/base/inputs/index.ts @@ -0,0 +1 @@ +export { default as PasswordInput } from './PasswordInput' diff --git a/redisinsight/ui/src/components/form-dialog/styles.module.scss b/redisinsight/ui/src/components/form-dialog/styles.module.scss index 4afd9292a3..d7feb5a393 100644 --- a/redisinsight/ui/src/components/form-dialog/styles.module.scss +++ b/redisinsight/ui/src/components/form-dialog/styles.module.scss @@ -52,7 +52,6 @@ .euiFieldText, .euiFieldNumber, - .euiFieldPassword, .euiFieldSearch, .euiSelect, .euiSuperSelectControl, @@ -81,8 +80,7 @@ .euiSuperSelectControl:not(.euiSuperSelectControl--compressed), .euiSelect:not(.euiSelect--compressed), .euiFieldText:not(.euiFieldText--compressed), - .euiFieldNumber:not(.euiFieldNumber--compressed), - .euiFieldPassword { + .euiFieldNumber:not(.euiFieldNumber--compressed) { height: 40px !important; } } diff --git a/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx b/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx index 64b611155f..162284e29f 100644 --- a/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx +++ b/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx @@ -1,6 +1,5 @@ import { EuiFieldText, - EuiFieldPassword, EuiIcon, EuiFieldNumber, } from '@elastic/eui' @@ -9,6 +8,7 @@ import React, { useState } from 'react' import cx from 'classnames' import { useDebouncedEffect } from 'uiSrc/services' import { validateNumber } from 'uiSrc/utils' +import { PasswordInput } from 'uiSrc/components/base/inputs' import styles from './styles.module.scss' @@ -68,11 +68,10 @@ const InputFieldSentinel = (props: Props) => { /> )} {inputType === SentinelInputFieldType.Password && ( - handleChange(e.target?.value)} + onChange={(value) => handleChange(value)} data-testid="sentinel-input-password" /> )} diff --git a/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx index 8d24ecb568..5f5faf03c1 100644 --- a/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx +++ b/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx @@ -4,7 +4,6 @@ import { isEmpty } from 'lodash' import { FormikErrors, useFormik } from 'formik' import { EuiFieldNumber, - EuiFieldPassword, EuiFieldText, EuiForm, EuiFormRow, @@ -30,6 +29,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { InfoIcon } from 'uiSrc/components/base/icons' +import { PasswordInput } from 'uiSrc/components/base/inputs' export interface Props { host: string @@ -300,18 +300,15 @@ const ClusterConnectionForm = (props: Props) => { - diff --git a/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx b/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx index 148ff2b6e5..17bee465f8 100644 --- a/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx +++ b/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx @@ -4,7 +4,6 @@ import { FormikProps } from 'formik' import { EuiFieldNumber, - EuiFieldPassword, EuiFieldText, EuiFormRow, EuiIcon, @@ -24,6 +23,7 @@ import { } from 'uiSrc/utils' import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { PasswordInput } from 'uiSrc/components/base/inputs' interface IShowFields { alias: boolean @@ -192,13 +192,10 @@ const DatabaseForm = (props: Props) => { - { ? SECURITY_FIELD : (formik.values.password ?? '') } - onChange={formik.handleChange} + onChangeCapture={formik.handleChange} onFocus={() => { if (formik.values.password === true) { formik.setFieldValue('password', '') } }} - dualToggleProps={{ color: 'text' }} autoComplete="new-password" disabled={isFieldDisabled('password')} /> diff --git a/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx b/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx index 114f7331e0..7e429e95ef 100644 --- a/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx +++ b/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx @@ -2,7 +2,6 @@ import React, { ChangeEvent } from 'react' import { EuiCheckbox, EuiFieldNumber, - EuiFieldPassword, EuiFieldText, EuiFormRow, EuiRadioGroup, @@ -26,6 +25,7 @@ import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { PasswordInput } from 'uiSrc/components/base/inputs' import styles from '../styles.module.scss' export interface Props { @@ -164,13 +164,10 @@ const SSHDetails = (props: Props) => { - { ? SECURITY_FIELD : (formik.values.sshPassword ?? '') } - onChange={formik.handleChange} + onChangeCapture={formik.handleChange} onFocus={() => { if (formik.values.sshPassword === true) { formik.setFieldValue('sshPassword', '') @@ -201,7 +198,6 @@ const SSHDetails = (props: Props) => { id="sshPrivateKey" data-testid="sshPrivateKey" fullWidth - className="passwordField" maxLength={50_000} placeholder="Enter SSH Private Key in PEM format" value={ @@ -225,13 +221,10 @@ const SSHDetails = (props: Props) => { - { ? SECURITY_FIELD : (formik.values.sshPassphrase ?? '') } - onChange={formik.handleChange} + onChangeCapture={formik.handleChange} onFocus={() => { if (formik.values.sshPassphrase === true) { formik.setFieldValue('sshPassphrase', '') diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx index 4724806e02..4766e0eec2 100644 --- a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx +++ b/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx @@ -1,6 +1,5 @@ import React from 'react' import { - EuiFieldPassword, EuiFieldText, EuiFormRow, EuiText, @@ -11,6 +10,7 @@ import { FormikProps } from 'formik' import { Nullable } from 'uiSrc/utils' import { SECURITY_FIELD } from 'uiSrc/constants' import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' +import { PasswordInput } from 'uiSrc/components/base/inputs' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import styles from '../../styles.module.scss' @@ -59,13 +59,11 @@ const SentinelMasterDatabase = (props: Props) => { - { ? SECURITY_FIELD : (formik.values.sentinelMasterPassword ?? '') } - onChange={formik.handleChange} + onChangeCapture={formik.handleChange} onFocus={() => { if (formik.values.sentinelMasterPassword === true) { formik.setFieldValue('sentinelMasterPassword', '') } }} - dualToggleProps={{ color: 'text' }} autoComplete="new-password" /> diff --git a/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx b/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx index cc36245725..62c5eda59d 100644 --- a/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx +++ b/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx @@ -1,5 +1,4 @@ import { - EuiFieldPassword, EuiFieldText, EuiForm, EuiFormRow, @@ -33,6 +32,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { InfoIcon } from 'uiSrc/components/base/icons' +import { PasswordInput } from 'uiSrc/components/base/inputs' import ValidationTooltip from './components/ValidationTooltip' import styles from './styles.module.scss' @@ -231,7 +231,14 @@ const ConnectionForm = (props: Props) => { - + + Password + + + } + > {({ field, @@ -242,13 +249,12 @@ const ConnectionForm = (props: Props) => { form: FormikHelpers meta: FieldMetaProps }) => ( - { form.setFieldValue('password', '') } }} - append={ - - } /> )} diff --git a/redisinsight/ui/src/pages/rdi/home/connection-form/styles.module.scss b/redisinsight/ui/src/pages/rdi/home/connection-form/styles.module.scss index 06519ccd18..91e35db27d 100644 --- a/redisinsight/ui/src/pages/rdi/home/connection-form/styles.module.scss +++ b/redisinsight/ui/src/pages/rdi/home/connection-form/styles.module.scss @@ -13,10 +13,6 @@ margin: 0 !important; } -.passwordField { - padding-left: 12px !important; -} - .testConnectionBtn { border-color: transparent !important; } diff --git a/redisinsight/ui/src/pages/settings/styles.module.scss b/redisinsight/ui/src/pages/settings/styles.module.scss index d3b72a6deb..62375a5d04 100644 --- a/redisinsight/ui/src/pages/settings/styles.module.scss +++ b/redisinsight/ui/src/pages/settings/styles.module.scss @@ -80,7 +80,6 @@ .euiFieldText, .euiFieldNumber, - .euiFieldPassword, .euiSelect, .euiSuperSelectControl, .euiTextArea { diff --git a/redisinsight/ui/src/styles/base/_inputs.scss b/redisinsight/ui/src/styles/base/_inputs.scss index df1938840e..d0f49e292a 100644 --- a/redisinsight/ui/src/styles/base/_inputs.scss +++ b/redisinsight/ui/src/styles/base/_inputs.scss @@ -1,7 +1,6 @@ .euiFormControlLayout--group { .euiFieldText, .euiFieldNumber, - .euiFieldPassword, .euiSelect, .euiSuperSelectControl, .euiTextArea { @@ -31,10 +30,6 @@ input[name='sshPassphrase'] ~ .euiFormControlLayoutIcons { display: none; } -.euiFieldPassword.euiFieldPassword--compressed { - padding: 8px !important; -} - .inputAppendIcon.inputAppendIcon { height: auto; } diff --git a/redisinsight/ui/src/styles/base/_typography.scss b/redisinsight/ui/src/styles/base/_typography.scss index f1591a31c8..ba809a1847 100644 --- a/redisinsight/ui/src/styles/base/_typography.scss +++ b/redisinsight/ui/src/styles/base/_typography.scss @@ -99,7 +99,6 @@ body { .euiFieldText, .euiFieldSearch, .euiFieldNumber, -.euiFieldPassword, .euiTextArea { font-family: 'Graphik', sans-serif !important; color: var(--htmlColor) !important; diff --git a/redisinsight/ui/src/styles/components/_accordion.scss b/redisinsight/ui/src/styles/components/_accordion.scss index 668f819fe9..7a83e51439 100644 --- a/redisinsight/ui/src/styles/components/_accordion.scss +++ b/redisinsight/ui/src/styles/components/_accordion.scss @@ -43,7 +43,6 @@ .euiFieldText, .euiFieldNumber, - .euiFieldPassword, .euiSelect, .euiSuperSelectControl, .euiTextArea { diff --git a/redisinsight/ui/src/styles/components/_forms.scss b/redisinsight/ui/src/styles/components/_forms.scss index 85fe0ebda7..8ed13761d6 100644 --- a/redisinsight/ui/src/styles/components/_forms.scss +++ b/redisinsight/ui/src/styles/components/_forms.scss @@ -86,7 +86,6 @@ .euiFieldText, .euiFieldNumber, -.euiFieldPassword, .euiFieldSearch, .euiSelect, .euiSuperSelectControl, @@ -208,7 +207,6 @@ } .euiFieldSearch:focus, -.euiFieldPassword:focus, .euiTextArea:focus, .euiSuperSelectControl:focus, .euiFieldNumber:focus, diff --git a/redisinsight/ui/src/styles/elastic.css b/redisinsight/ui/src/styles/elastic.css index 15b8a8233f..21bae5ba7d 100644 --- a/redisinsight/ui/src/styles/elastic.css +++ b/redisinsight/ui/src/styles/elastic.css @@ -8751,238 +8751,6 @@ .euiFieldNumber--withIcon.euiFieldNumber--compressed { padding-left: 32px; } - .euiFieldPassword { - max-width: 400px; - width: 100%; - height: 40px; - background-color: #fbfcfd; - background-repeat: no-repeat; - background-size: 0% 100%; - box-shadow: - 0 1px 1px -1px rgba(152, 162, 179, 0.2), - 0 3px 2px -2px rgba(152, 162, 179, 0.2), - inset 0 0 0 1px rgba(16, 38, 118, 0.1); - transition: - box-shadow 150ms ease-in, - background-image 150ms ease-in, - background-size 150ms ease-in, - background-color 150ms ease-in; - font-family: - 'Inter UI', - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Helvetica, - Arial, - sans-serif, - 'Apple Color Emoji', - 'Segoe UI Emoji', - 'Segoe UI Symbol'; - font-weight: 400; - letter-spacing: -0.005em; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - font-kerning: normal; - font-size: 14px; - color: #343741; - border: none; - border-radius: 0; - padding: 12px; - padding-left: 40px; - } - .euiFieldPassword--fullWidth { - max-width: 100%; - } - .euiFieldPassword--compressed { - height: 32px; - } - .euiFieldPassword--inGroup { - height: 100%; - } - @supports (-moz-appearance: none) { - .euiFieldPassword { - transition-property: box-shadow, background-image, background-size; - } - } - @media screen and (-ms-high-contrast: active), - screen and (-ms-high-contrast: none) { - .euiFieldPassword { - line-height: 1em; - } - } - .euiFieldPassword::-webkit-input-placeholder { - color: #6a717d; - opacity: 1; - } - .euiFieldPassword::-moz-placeholder { - color: #6a717d; - opacity: 1; - } - .euiFieldPassword:-ms-input-placeholder { - color: #6a717d; - opacity: 1; - } - .euiFieldPassword:-moz-placeholder { - color: #6a717d; - opacity: 1; - } - .euiFieldPassword::placeholder { - color: #6a717d; - opacity: 1; - } - .euiFieldPassword:invalid { - background-image: linear-gradient( - to top, - #bd271e, - #bd271e 2px, - transparent 2px, - transparent 100% - ); - background-size: 100%; - } - .euiFieldPassword:focus { - background-color: #fff; - background-image: linear-gradient( - to top, - #006bb4, - #006bb4 2px, - transparent 2px, - transparent 100% - ); - background-size: 100% 100%; - box-shadow: - 0 1px 1px -1px rgba(152, 162, 179, 0.2), - 0 4px 4px -2px rgba(152, 162, 179, 0.2), - inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldPassword:disabled { - color: #98a2b3; - -webkit-text-fill-color: #98a2b3; - cursor: not-allowed; - background: #eef2f7; - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldPassword:disabled::-webkit-input-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword:disabled::-moz-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword:disabled:-ms-input-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword:disabled:-moz-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword:disabled::placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword[readOnly] { - cursor: default; - background: rgba(211, 218, 230, 0.05); - border-color: rgba(0, 0, 0, 0); - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldPassword:-webkit-autofill { - -webkit-text-fill-color: #343741; - } - .euiFieldPassword:-webkit-autofill ~ .euiFormControlLayoutIcons { - color: #343741; - } - .euiFieldPassword--compressed { - background-color: #fbfcfd; - background-repeat: no-repeat; - background-size: 0% 100%; - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - transition: - box-shadow 150ms ease-in, - background-image 150ms ease-in, - background-size 150ms ease-in, - background-color 150ms ease-in; - padding: 8px; - border-radius: 2px; - } - @supports (-moz-appearance: none) { - .euiFieldPassword--compressed { - transition-property: box-shadow, background-image, background-size; - } - } - .euiFieldPassword--compressed:invalid { - background-image: linear-gradient( - to top, - #bd271e, - #bd271e 2px, - transparent 2px, - transparent 100% - ); - background-size: 100%; - } - .euiFieldPassword--compressed:focus { - background-color: #fff; - background-image: linear-gradient( - to top, - #006bb4, - #006bb4 2px, - transparent 2px, - transparent 100% - ); - background-size: 100% 100%; - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldPassword--compressed:disabled { - color: #98a2b3; - -webkit-text-fill-color: #98a2b3; - cursor: not-allowed; - background: #eef2f7; - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldPassword--compressed:disabled::-webkit-input-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword--compressed:disabled::-moz-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword--compressed:disabled:-ms-input-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword--compressed:disabled:-moz-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword--compressed:disabled::placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword--compressed[readOnly] { - cursor: default; - background: rgba(211, 218, 230, 0.05); - border-color: rgba(0, 0, 0, 0); - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldPassword--inGroup { - box-shadow: none !important; - border-radius: 0; - } - .euiFieldPassword-isLoading { - padding-right: 40px; - } - .euiFieldPassword-isLoading.euiFieldPassword--compressed { - padding-right: 32px; - } - .euiFieldPassword.euiFieldPassword--compressed { - padding-left: 32px; - } - .euiFieldPassword--withToggle::-ms-reveal { - display: none; - } .euiFieldSearch { max-width: 400px; width: 100%; From 97b2d468eb3e0b9b2854cf6a0e2ca5d8ffe699bb Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 28 May 2025 10:05:41 +0300 Subject: [PATCH 080/154] fix Config.spec.tsx --- .../pages/config/Config.spec.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.spec.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.spec.tsx index 107de9da42..ecd214bd69 100644 --- a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.spec.tsx +++ b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.spec.tsx @@ -242,12 +242,11 @@ describe('Config', () => { rdiPipelineSelectorMock, ) - render() + const { getByTestId } = render() // check is btn has loader - expect( - screen.getByTestId('rdi-test-connection-btn').children[0].children[0], - ).toHaveClass('euiLoadingSpinner') + const child = getByTestId('rdi-test-connection-btn').children[0].children[0] + expect(child.tagName.toLowerCase()).toEqual('svg') }) it('should render loader on btn', () => { @@ -258,12 +257,11 @@ describe('Config', () => { rdiTestConnectionsSelectorMock, ) - render() + const { getByTestId } = render() // check is btn has loader - expect( - screen.getByTestId('rdi-test-connection-btn').children[0].children[0], - ).toHaveClass('euiLoadingSpinner') + const child = getByTestId('rdi-test-connection-btn').children[0].children[0] + expect(child.tagName.toLowerCase()).toEqual('svg') }) it('should send telemetry event when clicking Test Connection button', async () => { From 901d5ecdd9b83619863f976116a9dbdadb0d1a5b Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 28 May 2025 10:09:49 +0300 Subject: [PATCH 081/154] fic AddKeyList.spec.tsx, AddKeyList.tsx, RdiDeployErrorContent.tsx, RdiDeployErrorContent.spec.tsx --- .../RdiDeployErrorContent.spec.tsx | 5 +---- .../RdiDeployErrorContent.tsx | 12 ++++++------ .../add-key/AddKeyList/AddKeyList.spec.tsx | 2 +- .../components/add-key/AddKeyList/AddKeyList.tsx | 7 +------ 4 files changed, 9 insertions(+), 17 deletions(-) diff --git a/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.spec.tsx b/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.spec.tsx index 62f0e62b89..70f452511c 100644 --- a/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.spec.tsx +++ b/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.spec.tsx @@ -1,9 +1,6 @@ import React from 'react' -import { instance, mock } from 'ts-mockito' import { render, screen } from 'uiSrc/utils/test-utils' -import RdiDeployErrorContent, { Props } from './RdiDeployErrorContent' - -const mockedProps = mock() +import RdiDeployErrorContent from './RdiDeployErrorContent' describe('RdiDeployErrorContent', () => { const mockMessage = 'Test error log content' diff --git a/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.tsx b/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.tsx index 328e39d88d..b148263edc 100644 --- a/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.tsx +++ b/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.tsx @@ -32,12 +32,12 @@ const RdiDeployErrorContent = (props: Props) => { Review the error log for details. - - + + Download Error Log File diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.spec.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.spec.tsx index 55ab26e274..ce5052710a 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.spec.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.spec.tsx @@ -1,9 +1,9 @@ import React from 'react' import { instance, mock } from 'ts-mockito' import { render, screen, fireEvent } from 'uiSrc/utils/test-utils' +import { HEAD_DESTINATION } from 'uiSrc/pages/browser/modules/key-details/components/list-details/add-list-elements/AddListElements' import AddKeyList, { Props } from './AddKeyList' import AddKeyFooter from '../AddKeyFooter/AddKeyFooter' -import { HEAD_DESTINATION } from 'uiSrc/pages/browser/modules/key-details/components/list-details/add-list-elements/AddListElements' const mockedProps = mock() diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx index 5f603cea95..99fa9a7c0d 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx @@ -1,12 +1,7 @@ import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { - EuiTextColor, - EuiForm, - EuiPanel, - EuiSuperSelect, -} from '@elastic/eui' +import { EuiForm, EuiPanel, EuiSuperSelect, EuiFieldText } from '@elastic/eui' import { Maybe, stringToBuffer } from 'uiSrc/utils' import { addKeyStateSelector, addListKey } from 'uiSrc/slices/browser/keys' From 7de2983b5e6c9fc828dfeb99f4cd43fc3fd5406c Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 28 May 2025 10:11:57 +0300 Subject: [PATCH 082/154] fic SentinelDatabasesResultPage.tsx --- .../SentinelDatabasesResultPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/SentinelDatabasesResultPage.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/SentinelDatabasesResultPage.tsx index 7dd68bc79a..909619098d 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/SentinelDatabasesResultPage.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/SentinelDatabasesResultPage.tsx @@ -31,7 +31,7 @@ import validationErrors from 'uiSrc/constants/validationErrors' import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel' import { IconButton, PrimaryButton } from 'uiSrc/components/base/forms/buttons' -import { InfoIcon } from 'uiSrc/components/base/icons' +import { InfoIcon, CopyIcon } from 'uiSrc/components/base/icons' import SentinelDatabasesResult from './components' import styles from '../styles.module.scss' @@ -53,7 +53,7 @@ const SentinelDatabasesResultPage = () => { useEffect(() => { if (!masters.length) { - // history.push(Pages.home) + history.push(Pages.home) } dispatch(resetLoadedSentinel(LoadedSentinel.MastersAdded)) @@ -208,7 +208,7 @@ const SentinelDatabasesResultPage = () => { anchorClassName="copyPublicEndpointTooltip" > handleCopy(text)} From 65531880715dd9074f75cacee586771ee9192f54 Mon Sep 17 00:00:00 2001 From: Krum Tyukenov Date: Wed, 28 May 2025 11:44:06 +0300 Subject: [PATCH 083/154] RI-7053: replace EuiFlyout with Drawer (#4582) * RI-7053: use Drawer for ShortcutsFlyout * RI-7053: remove EuiFlyout styles * RI-7053: remove EuiFlyoutHeader reference --- .../components/base/layout/drawer/index.ts | 7 + .../shortcuts-flyout/ShortcutsFlyout.spec.tsx | 5 + .../shortcuts-flyout/ShortcutsFlyout.tsx | 36 +-- .../shortcuts-flyout/styles.module.scss | 5 - .../components/InternalPage/InternalPage.tsx | 10 +- .../panels/enablement-area/styles.module.scss | 12 - .../ui/src/styles/components/_components.scss | 1 - .../ui/src/styles/components/_flyout.scss | 9 - redisinsight/ui/src/styles/elastic.css | 284 ------------------ 9 files changed, 27 insertions(+), 342 deletions(-) create mode 100644 redisinsight/ui/src/components/base/layout/drawer/index.ts delete mode 100644 redisinsight/ui/src/styles/components/_flyout.scss diff --git a/redisinsight/ui/src/components/base/layout/drawer/index.ts b/redisinsight/ui/src/components/base/layout/drawer/index.ts new file mode 100644 index 0000000000..d0636763b6 --- /dev/null +++ b/redisinsight/ui/src/components/base/layout/drawer/index.ts @@ -0,0 +1,7 @@ +import { Drawer } from '@redis-ui/components' + +const DrawerHeader = Drawer.Header +const DrawerBody = Drawer.Body +const DrawerFooter = Drawer.Footer + +export { Drawer, DrawerHeader, DrawerBody, DrawerFooter } diff --git a/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.spec.tsx b/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.spec.tsx index 5d324d4b6f..f7ab8610e9 100644 --- a/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.spec.tsx +++ b/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.spec.tsx @@ -11,6 +11,11 @@ beforeEach(() => { store.clearActions() }) +jest.mock('uiSrc/components/base/layout/drawer', () => ({ + ...jest.requireActual('uiSrc/components/base/layout/drawer'), + DrawerHeader: jest.fn().mockReturnValue(null), +})) + const appInfoSlicesPath = 'uiSrc/slices/app/info' jest.mock(appInfoSlicesPath, () => ({ diff --git a/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.tsx b/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.tsx index 65ff2dc926..dd9455db46 100644 --- a/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.tsx +++ b/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.tsx @@ -1,17 +1,12 @@ import React from 'react' import cx from 'classnames' import { useDispatch, useSelector } from 'react-redux' -import { - EuiBasicTableColumn, - EuiFlyout, - EuiFlyoutBody, - EuiInMemoryTable, - EuiTitle, -} from '@elastic/eui' +import { EuiBasicTableColumn, EuiInMemoryTable, EuiTitle } from '@elastic/eui' import { appInfoSelector, setShortcutsFlyoutState } from 'uiSrc/slices/app/info' import { KeyboardShortcut } from 'uiSrc/components' import { BuildType } from 'uiSrc/constants/env' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { Drawer, DrawerHeader, DrawerBody } from 'uiSrc/components/base/layout/drawer' import { SHORTCUTS, ShortcutGroup, separator } from './schema' import styles from './styles.module.scss' @@ -53,29 +48,22 @@ const ShortcutsFlyout = () => {
) - return isShortcutsFlyoutOpen ? ( - dispatch(setShortcutsFlyoutState(false))} + return ( + dispatch(setShortcutsFlyoutState(isOpen))} data-test-subj="shortcuts-flyout" + title="Shortcuts" > - - -

Shortcuts

- - + + {SHORTCUTS.filter( ({ excludeFor }) => !excludeFor || !excludeFor.includes(server?.buildType as BuildType), ).map(ShortcutsTable)} - - - ) : null + + + ) } export default ShortcutsFlyout diff --git a/redisinsight/ui/src/components/shortcuts-flyout/styles.module.scss b/redisinsight/ui/src/components/shortcuts-flyout/styles.module.scss index e6d3a74ba0..90f5f98d2e 100644 --- a/redisinsight/ui/src/components/shortcuts-flyout/styles.module.scss +++ b/redisinsight/ui/src/components/shortcuts-flyout/styles.module.scss @@ -1,8 +1,3 @@ -.title { - font-size: 18px; - font-weight: 600 !important; -} - .table { :global(thead) { display: none; diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx index ac152ccb92..e7851b2cb2 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx @@ -1,9 +1,5 @@ import React, { useMemo, useRef, useEffect, useState } from 'react' -import { - EuiFlyoutHeader, - EuiText, - EuiPopover, -} from '@elastic/eui' +import { EuiText, EuiPopover } from '@elastic/eui' import JsxParser from 'react-jsx-parser' import cx from 'classnames' import { debounce } from 'lodash' @@ -168,7 +164,7 @@ const InternalPage = (props: Props) => { return (
- +
{ {title?.toUpperCase()}
- +
Date: Wed, 28 May 2025 11:44:24 +0300 Subject: [PATCH 084/154] RI-7054: replace EuiFormRow with FormField (#4585) --- .../ui/src/components/base/forms/FormField.ts | 3 + .../components/form-dialog/styles.module.scss | 2 +- .../components/export-action/ExportAction.tsx | 6 +- .../oauth-sso-form/OAuthSsoForm.tsx | 6 +- .../RedisCloudDatabasesResult.tsx | 6 +- .../RedisCloudDatabases.tsx | 6 +- .../RedisCloudSubscriptions.tsx | 6 +- .../SentinelDatabasesResult.tsx | 6 +- .../SentinelDatabases/SentinelDatabases.tsx | 6 +- .../AddKeyCommonFields/AddKeyCommonFields.tsx | 14 +-- .../add-key/AddKeyHash/AddKeyHash.tsx | 21 ++--- .../add-key/AddKeyReJSON/AddKeyReJSON.tsx | 12 +-- .../add-key/AddKeySet/AddKeySet.tsx | 6 +- .../add-key/AddKeyString/AddKeyString.tsx | 7 +- .../add-key/AddKeyZset/AddKeyZset.tsx | 16 ++-- .../CreateRedisearchIndex.tsx | 22 ++--- .../add-hash-fields/AddHashFields.tsx | 15 ++-- .../RemoveListElements.tsx | 10 +-- .../add-set-members/AddSetMembers.tsx | 6 +- .../StreamEntryFields/StreamEntryFields.tsx | 15 ++-- .../add-stream-group/AddStreamGroup.tsx | 10 +-- .../MessageClaimPopover.tsx | 26 +++--- .../MessageClaimPopover/styles.module.scss | 4 - .../add-zset-members/AddZsetMembers.tsx | 11 +-- .../connection-url/ConnectionUrl.tsx | 7 +- .../CloudConnectionForm.tsx | 10 +-- .../ClusterConnectionForm.tsx | 20 ++--- .../home/components/form/DatabaseForm.tsx | 26 +++--- .../home/components/form/DbCompressor.tsx | 10 +-- .../pages/home/components/form/DbIndex.tsx | 10 +-- .../home/components/form/ForceStandalone.tsx | 6 +- .../components/form/KeyFormatSelector.tsx | 7 +- .../pages/home/components/form/SSHDetails.tsx | 26 +++--- .../pages/home/components/form/TlsDetails.tsx | 34 +++---- .../form/sentinel/PrimaryGroupSentinel.tsx | 11 +-- .../form/sentinel/SentinelMasterDatabase.tsx | 10 +-- .../forms/EditSentinelConnection.tsx | 7 +- .../components/tags-cell/TagsCellHeader.tsx | 6 +- redisinsight/ui/src/pages/home/styles.scss | 15 ---- .../publish-message/PublishMessage.tsx | 10 +-- .../home/connection-form/ConnectionForm.tsx | 23 +++-- .../components/template-form/TemplateForm.tsx | 10 +-- .../template-form/styles.module.scss | 14 --- .../redis-cluster/RedisClusterDatabases.tsx | 6 +- .../RedisClusterDatabasesResult.tsx | 7 +- .../ui/src/pages/settings/SettingsPage.tsx | 6 +- .../workbench-settings/WorkbenchSettings.tsx | 7 +- .../SlowLogConfig/SlowLogConfig.tsx | 10 +-- .../SlowLogConfig/styles.module.scss | 10 --- .../ui/src/styles/components/_forms.scss | 55 ------------ redisinsight/ui/src/styles/elastic.css | 88 ------------------- 51 files changed, 252 insertions(+), 441 deletions(-) create mode 100644 redisinsight/ui/src/components/base/forms/FormField.ts diff --git a/redisinsight/ui/src/components/base/forms/FormField.ts b/redisinsight/ui/src/components/base/forms/FormField.ts new file mode 100644 index 0000000000..09d1d5f368 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/FormField.ts @@ -0,0 +1,3 @@ +import { FormField } from '@redis-ui/components' + +export { FormField } diff --git a/redisinsight/ui/src/components/form-dialog/styles.module.scss b/redisinsight/ui/src/components/form-dialog/styles.module.scss index d7feb5a393..bb80a830d5 100644 --- a/redisinsight/ui/src/components/form-dialog/styles.module.scss +++ b/redisinsight/ui/src/components/form-dialog/styles.module.scss @@ -70,7 +70,7 @@ border-color: var(--separatorColor) !important; } - .euiFormRow, .euiFormControlLayout { + .euiFormControlLayout { max-width: none; .euiFormControlLayout:not(.euiFormControlLayout--compressed) { diff --git a/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx b/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx index 7895256eaf..098df99254 100644 --- a/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx +++ b/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx @@ -1,11 +1,11 @@ import React, { useState } from 'react' import { EuiCheckbox, - EuiFormRow, EuiIcon, EuiPopover, EuiText, } from '@elastic/eui' +import { FormField } from '@redis-ui/components' import { formatLongName } from 'uiSrc/utils' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' @@ -63,7 +63,7 @@ const ExportAction = ( ))}
- + ( onChange={(e) => setWithSecrets(e.target.checked)} data-testid="export-passwords" /> - +
{ - + { ) }} /> - + diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx index 661033920b..3f0a13d748 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx @@ -7,8 +7,8 @@ import { EuiText, EuiTitle, EuiFieldSearch, - EuiFormRow, } from '@elastic/eui' +import { FormField } from '@redis-ui/components' import { InstanceRedisCloud, AddRedisDatabaseStatus, @@ -100,7 +100,7 @@ const RedisCloudDatabaseListResult = ({ columns, onBack, onView }: Props) => { - + { aria-label="Search" data-testid="search" /> - +
diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx index fe343b4889..a1fba5139d 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx @@ -8,12 +8,12 @@ import { EuiText, EuiTitle, EuiFieldSearch, - EuiFormRow, EuiToolTip, } from '@elastic/eui' import { map, pick } from 'lodash' import { useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' +import { FormField } from '@redis-ui/components' import { cloudSelector } from 'uiSrc/slices/instances/cloud' import { InstanceRedisCloud } from 'uiSrc/slices/interfaces' @@ -214,7 +214,7 @@ const RedisCloudDatabasesPage = ({ - + - +
diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx index cff448e469..7c8ed5f5d8 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx @@ -9,10 +9,10 @@ import { EuiText, EuiTitle, EuiFieldSearch, - EuiFormRow, EuiToolTip, } from '@elastic/eui' import cx from 'classnames' +import { FormField } from '@redis-ui/components' import { InstanceRedisCloud, RedisCloudAccount, @@ -266,7 +266,7 @@ const RedisCloudSubscriptions = ({ - + - +
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx index a7e49c1450..20b10e239b 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx @@ -6,10 +6,10 @@ import { EuiText, EuiTitle, EuiFieldSearch, - EuiFormRow, } from '@elastic/eui' import { useSelector } from 'react-redux' +import { FormField } from '@redis-ui/components' import { sentinelSelector } from 'uiSrc/slices/instances/sentinel' import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' import MessageBar from 'uiSrc/components/message-bar/MessageBar' @@ -115,7 +115,7 @@ const SentinelDatabasesResult = ({ - + - +
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx index a7a2e90585..86df3345b5 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx @@ -9,11 +9,11 @@ import { EuiText, EuiTitle, EuiFieldSearch, - EuiFormRow, EuiToolTip, } from '@elastic/eui' import { useSelector } from 'react-redux' +import { FormField } from '@redis-ui/components' import { sentinelSelector } from 'uiSrc/slices/instances/sentinel' import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' import validationErrors from 'uiSrc/constants/validationErrors' @@ -219,7 +219,7 @@ const SentinelDatabases = ({ - + - +
diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyCommonFields/AddKeyCommonFields.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyCommonFields/AddKeyCommonFields.tsx index ee6f09c675..c7f8b90bd5 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyCommonFields/AddKeyCommonFields.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyCommonFields/AddKeyCommonFields.tsx @@ -3,9 +3,9 @@ import { toNumber } from 'lodash' import { EuiFieldText, EuiFormFieldset, - EuiFormRow, EuiSuperSelect, } from '@elastic/eui' +import { FormField } from '@redis-ui/components' import { MAX_TTL_NUMBER, Maybe, validateTTLNumberForAddKey } from 'uiSrc/utils' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' @@ -54,7 +54,7 @@ const AddKeyCommonFields = (props: Props) => { - + { onChange={(value: string) => onChangeType(value)} data-testid="select-key-type" /> - + - + { autoComplete="off" data-testid="ttl" /> - + - + { autoComplete="off" data-testid="key" /> - +
) } diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyHash/AddKeyHash.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyHash/AddKeyHash.tsx index 0eab2484c4..9f7e2e5b21 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyHash/AddKeyHash.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyHash/AddKeyHash.tsx @@ -6,13 +6,7 @@ import React, { useState, } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { - EuiFieldText, - EuiFormRow, - EuiTextColor, - EuiForm, - EuiPanel, -} from '@elastic/eui' +import { EuiFieldText, EuiForm, EuiPanel } from '@elastic/eui' import { toNumber } from 'lodash' import { isVersionHigherOrEquals, @@ -32,6 +26,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { CreateHashWithExpireDto, HashFieldDto, @@ -178,7 +173,7 @@ const AddKeyHash = (props: Props) => { {(item, index) => ( - + { } data-testid="field-name" /> - + - + { } data-testid="field-value" /> - + {isTTLAvailable && ( - + { } data-testid="hash-ttl" /> - + )} diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyReJSON/AddKeyReJSON.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyReJSON/AddKeyReJSON.tsx index 5f8c94fc14..2683874d1b 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyReJSON/AddKeyReJSON.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyReJSON/AddKeyReJSON.tsx @@ -1,12 +1,7 @@ import React, { FormEvent, useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useParams } from 'react-router-dom' -import { - EuiFormRow, - EuiTextColor, - EuiForm, - EuiPanel, -} from '@elastic/eui' +import { EuiTextColor, EuiForm, EuiPanel } from '@elastic/eui' import { Maybe, stringToBuffer } from 'uiSrc/utils' import { addKeyStateSelector, addReJSONKey } from 'uiSrc/slices/browser/keys' @@ -19,6 +14,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { CreateRejsonRlWithExpireDto } from 'apiSrc/modules/browser/rejson-rl/dto' import { AddJSONFormConfig as config } from '../constants/fields-config' @@ -83,7 +79,7 @@ const AddKeyReJSON = (props: Props) => { return ( - + <> { - + Submit diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeySet/AddKeySet.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeySet/AddKeySet.tsx index 1e39673de7..838588f42b 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeySet/AddKeySet.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeySet/AddKeySet.tsx @@ -9,7 +9,6 @@ import { useDispatch, useSelector } from 'react-redux' import { EuiFieldText, EuiForm, - EuiFormRow, EuiPanel, } from '@elastic/eui' import { Maybe, stringToBuffer } from 'uiSrc/utils' @@ -21,6 +20,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { CreateSetWithExpireDto } from 'apiSrc/modules/browser/set/dto' import { INITIAL_SET_MEMBER_STATE, ISetMemberState } from './interfaces' @@ -142,7 +142,7 @@ const AddKeySet = (props: Props) => { {(item, index) => ( - + { disabled={loading} data-testid="member-name" /> - + )} diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyString/AddKeyString.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyString/AddKeyString.tsx index 8d8a7b9146..3247c39cef 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyString/AddKeyString.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyString/AddKeyString.tsx @@ -1,7 +1,7 @@ import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { EuiFormRow, EuiForm, EuiPanel, EuiTextArea } from '@elastic/eui' +import { EuiForm, EuiPanel, EuiTextArea } from '@elastic/eui' import { Maybe, stringToBuffer } from 'uiSrc/utils' import { addKeyStateSelector, addStringKey } from 'uiSrc/slices/browser/keys' @@ -11,6 +11,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { SetStringWithExpireDto } from 'apiSrc/modules/browser/string/dto' import AddKeyFooter from '../AddKeyFooter/AddKeyFooter' import { AddStringFormConfig as config } from '../constants/fields-config' @@ -53,7 +54,7 @@ const AddKeyString = (props: Props) => { return ( - + { disabled={loading} data-testid="string-value" /> - + Submit diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyZset/AddKeyZset.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyZset/AddKeyZset.tsx index 7177558f39..982f244b07 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyZset/AddKeyZset.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyZset/AddKeyZset.tsx @@ -7,12 +7,7 @@ import React, { } from 'react' import { useDispatch, useSelector } from 'react-redux' import { toNumber } from 'lodash' -import { - EuiFieldText, - EuiFormRow, - EuiForm, - EuiPanel, -} from '@elastic/eui' +import { EuiFieldText, EuiForm, EuiPanel } from '@elastic/eui' import { Maybe, stringToBuffer, validateScoreNumber } from 'uiSrc/utils' import { isNaNConvertedString } from 'uiSrc/utils/numbers' import { addKeyStateSelector, addZsetKey } from 'uiSrc/slices/browser/keys' @@ -28,6 +23,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { CreateZSetWithExpireDto } from 'apiSrc/modules/browser/z-set/dto' import AddKeyFooter from '../AddKeyFooter/AddKeyFooter' import { AddZsetFormConfig as config } from '../constants/fields-config' @@ -196,7 +192,7 @@ const AddKeyZset = (props: Props) => { {(item, index) => ( - + { disabled={loading} data-testid="member-name" /> - + - + { disabled={loading} data-testid="member-score" /> - + )} diff --git a/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx b/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx index 6157a04908..edd08019b6 100644 --- a/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx +++ b/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx @@ -3,7 +3,6 @@ import { EuiComboBox, EuiFieldText, EuiFormFieldset, - EuiFormRow, EuiHealth, EuiLink, EuiPanel, @@ -34,6 +33,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { CreateRedisearchIndexDto } from 'apiSrc/modules/browser/redisearch/dto' import { KEY_TYPE_OPTIONS, RedisearchIndexKeyType } from './constants' @@ -222,7 +222,7 @@ const CreateRedisearchIndex = ({ onClosePanel, onCreateIndex }: Props) => {
- + { autoComplete="off" data-testid="index-name" /> - + - + { } data-testid="key-type" /> - + - + { className={styles.combobox} data-testid="prefix-combobox" /> - + { {(item, index) => ( - + { autoComplete="off" data-testid={`identifier-${item.id}`} /> - + - + { } data-testid={`field-type-${item.id}`} /> - + )} diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/add-hash-fields/AddHashFields.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/add-hash-fields/AddHashFields.tsx index d01031ac15..0c01261506 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/add-hash-fields/AddHashFields.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/add-hash-fields/AddHashFields.tsx @@ -1,7 +1,7 @@ import React, { ChangeEvent, useEffect, useRef, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' -import { EuiFieldText, EuiFormRow, EuiPanel } from '@elastic/eui' +import { EuiFieldText, EuiPanel } from '@elastic/eui' import { toNumber } from 'lodash' import { keysSelector, @@ -31,6 +31,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { AddFieldsToHashDto, HashFieldDto, @@ -186,7 +187,7 @@ const AddHashFields = (props: Props) => { {(item, index) => ( - + { } data-testid="hash-field" /> - + - + { } data-testid="hash-value" /> - + {isExpireFieldsAvailable && ( - + { } data-testid="hash-ttl" /> - + )} diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/remove-list-elements/RemoveListElements.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/remove-list-elements/RemoveListElements.tsx index 3cfd5fb47d..941de1a74c 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/remove-list-elements/RemoveListElements.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/remove-list-elements/RemoveListElements.tsx @@ -3,7 +3,6 @@ import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' import { toNumber } from 'lodash' import { - EuiFormRow, EuiFieldText, EuiPanel, EuiSuperSelect, @@ -47,6 +46,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { DeleteIcon } from 'uiSrc/components/base/icons' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { DeleteListElementsDto } from 'apiSrc/modules/browser/list/dto' import { @@ -263,7 +263,7 @@ const RemoveListElements = (props: Props) => { - + { } data-testid="destination-select" /> - + - + { disabled={!canRemoveMultiple} append={!canRemoveMultiple ? InfoBoxPopover() : <>} /> - + diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/add-set-members/AddSetMembers.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/add-set-members/AddSetMembers.tsx index 01a103b745..7a7f0fde6d 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/add-set-members/AddSetMembers.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/add-set-members/AddSetMembers.tsx @@ -3,7 +3,6 @@ import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' import { EuiTextColor, - EuiFormRow, EuiFieldText, EuiPanel, } from '@elastic/eui' @@ -34,6 +33,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { FormField } from 'uiSrc/components/base/forms/FormField' import styles from './styles.module.scss' export interface Props { @@ -155,7 +155,7 @@ const AddSetMembers = (props: Props) => { {(item, index) => ( - + { disabled={loading} data-testid="member-name" /> - + )} diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/StreamEntryFields/StreamEntryFields.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/StreamEntryFields/StreamEntryFields.tsx index bf08d1cf20..b8ee79e06e 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/StreamEntryFields/StreamEntryFields.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/StreamEntryFields/StreamEntryFields.tsx @@ -1,5 +1,5 @@ import React, { ChangeEvent, useEffect, useRef } from 'react' -import { EuiFieldText, EuiFormRow, EuiIcon, EuiToolTip } from '@elastic/eui' +import { EuiFieldText, EuiIcon, EuiToolTip } from '@elastic/eui' import cx from 'classnames' import { validateEntryId } from 'uiSrc/utils' import { INITIAL_STREAM_FIELD_STATE } from 'uiSrc/pages/browser/components/add-key/AddKeyStream/AddKeyStream' @@ -8,6 +8,7 @@ import AddMultipleFields from 'uiSrc/pages/browser/components/add-multiple-field import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { FormField } from 'uiSrc/components/base/forms/FormField' import styles from '../styles.module.scss' export interface Props { @@ -107,7 +108,7 @@ const StreamEntryFields = (props: Props) => { return (
- + { autoComplete="off" data-testid={config.entryId.id} /> - + {!showEntryError && ( Timestamp - Sequence Number or * @@ -165,7 +166,7 @@ const StreamEntryFields = (props: Props) => { {(item, index) => ( - + { autoComplete="off" data-testid="field-name" /> - + - + { autoComplete="off" data-testid="field-value" /> - + )} diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-group/AddStreamGroup.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-group/AddStreamGroup.tsx index 83d1b8f8b9..fe8f54cd48 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-group/AddStreamGroup.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-group/AddStreamGroup.tsx @@ -1,6 +1,5 @@ import { EuiFieldText, - EuiFormRow, EuiIcon, EuiPanel, EuiToolTip, @@ -24,6 +23,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { CreateConsumerGroupsDto } from 'apiSrc/modules/browser/stream/dto' import styles from './styles.module.scss' @@ -110,7 +110,7 @@ const AddStreamGroup = (props: Props) => { - + { autoComplete="off" data-testid="group-name-field" /> - + - + { autoComplete="off" data-testid="id-field" /> - + {!showIdError && ( Timestamp - Sequence Number or $ diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/MessageClaimPopover.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/MessageClaimPopover.tsx index 9f132573e2..4cd2357a41 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/MessageClaimPopover.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/MessageClaimPopover.tsx @@ -6,7 +6,6 @@ import { EuiSuperSelectOption, EuiPopover, EuiForm, - EuiFormRow, EuiFieldNumber, EuiSwitch, EuiText, @@ -33,6 +32,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { ClaimPendingEntryDto, ClaimPendingEntriesResponse, @@ -216,7 +216,7 @@ const MessageClaimPopover = (props: Props) => { - + { } data-testid="destination-select" /> - + - + { type="text" min={0} /> - + {isOptionalShow && ( @@ -258,7 +258,7 @@ const MessageClaimPopover = (props: Props) => { - + { type="text" min={0} /> - + - + { onChange={handleChangeTimeFormat} data-testid="time-option-select" /> - + - + { type="text" min={0} /> - + - + { }} data-testid="force-claim-checkbox" /> - + diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/styles.module.scss b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/styles.module.scss index ce47121b5f..a4ac4dae42 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/styles.module.scss +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/styles.module.scss @@ -85,10 +85,6 @@ margin-left: 0; } -.popoverWrapper .hiddenLabel :global(.euiFormRow__label) { - font-size: 0; -} - .popoverWrapper :global(.euiFlexGroup--gutterLarge > .euiFlexItem) { margin: 9px; } diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/add-zset-members/AddZsetMembers.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/add-zset-members/AddZsetMembers.tsx index a61a0216c0..38322acc1a 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/add-zset-members/AddZsetMembers.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/add-zset-members/AddZsetMembers.tsx @@ -2,7 +2,7 @@ import React, { ChangeEvent, useEffect, useRef, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { toNumber } from 'lodash' import cx from 'classnames' -import { EuiFieldText, EuiFormRow, EuiPanel } from '@elastic/eui' +import { EuiFieldText, EuiPanel } from '@elastic/eui' import { stringToBuffer, validateScoreNumber } from 'uiSrc/utils' import { isNaNConvertedString } from 'uiSrc/utils/numbers' @@ -26,6 +26,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { FormField } from 'uiSrc/components/base/forms/FormField' import styles from './styles.module.scss' export interface Props { @@ -197,7 +198,7 @@ const AddZsetMembers = (props: Props) => { {(item, index) => ( - + { disabled={loading} data-testid="member-name" /> - + - + { disabled={loading} data-testid="member-score" /> - + )} diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/ConnectionUrl.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/ConnectionUrl.tsx index 9fc242a55b..1ae3b86bfa 100644 --- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/ConnectionUrl.tsx +++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/ConnectionUrl.tsx @@ -1,6 +1,7 @@ import React from 'react' -import { EuiFormRow, EuiIcon, EuiTextArea, EuiToolTip } from '@elastic/eui' +import { EuiIcon, EuiTextArea, EuiToolTip } from '@elastic/eui' +import { FormField } from 'uiSrc/components/base/forms/FormField' import styles from './styles.module.scss' export interface Props { @@ -9,7 +10,7 @@ export interface Props { } const ConnectionUrl = ({ value, onChange }: Props) => ( -
Connection URL
@@ -50,7 +51,7 @@ const ConnectionUrl = ({ value, onChange }: Props) => ( style={{ height: 88 }} data-testid="connection-url" /> - + ) export default ConnectionUrl diff --git a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx index f4f72d548a..b7c6654727 100644 --- a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx +++ b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx @@ -5,7 +5,6 @@ import { isEmpty } from 'lodash' import { EuiFieldText, EuiForm, - EuiFormRow, EuiRadioGroup, EuiText, EuiToolTip, @@ -30,6 +29,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { ICloudConnectionSubmit } from '../CloudConnectionFormWrapper' import styles from '../styles.module.scss' @@ -184,7 +184,7 @@ const CloudConnectionForm = (props: Props) => { - + { ) }} /> - + - + { ) }} /> - +
diff --git a/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx index 5f5faf03c1..492a5563b9 100644 --- a/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx +++ b/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx @@ -6,7 +6,6 @@ import { EuiFieldNumber, EuiFieldText, EuiForm, - EuiFormRow, EuiIcon, EuiToolTip, keys, @@ -29,6 +28,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { InfoIcon } from 'uiSrc/components/base/icons' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { PasswordInput } from 'uiSrc/components/base/inputs' export interface Props { @@ -233,7 +233,7 @@ const ClusterConnectionForm = (props: Props) => { - + { } append={} /> - + - { min={0} max={MAX_PORT_NUMBER} /> - + - + { value={formik.values.username} onChange={formik.handleChange} /> - + - + { onChange={formik.handleChange} autoComplete="new-password" /> - + diff --git a/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx b/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx index 17bee465f8..27b229662f 100644 --- a/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx +++ b/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx @@ -5,7 +5,6 @@ import { FormikProps } from 'formik' import { EuiFieldNumber, EuiFieldText, - EuiFormRow, EuiIcon, EuiToolTip, } from '@elastic/eui' @@ -23,6 +22,7 @@ import { } from 'uiSrc/utils' import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { PasswordInput } from 'uiSrc/components/base/inputs' interface IShowFields { @@ -96,7 +96,7 @@ const DatabaseForm = (props: Props) => { {showFields.alias && ( - + { onChange={formik.handleChange} disabled={isFieldDisabled('alias')} /> - + )} @@ -118,7 +118,7 @@ const DatabaseForm = (props: Props) => { {showFields.host && ( - + { append={} disabled={isFieldDisabled('host')} /> - + )} {isShowPort && ( - + { max={MAX_PORT_NUMBER} disabled={isFieldDisabled('port')} /> - + )} @@ -175,7 +175,7 @@ const DatabaseForm = (props: Props) => { - + { onChange={formik.handleChange} disabled={isFieldDisabled('username')} /> - + - + { autoComplete="new-password" disabled={isFieldDisabled('password')} /> - + {showFields.timeout && ( - + { max={MAX_TIMEOUT_NUMBER} disabled={isFieldDisabled('timeout')} /> - + diff --git a/redisinsight/ui/src/pages/home/components/form/DbCompressor.tsx b/redisinsight/ui/src/pages/home/components/form/DbCompressor.tsx index 84bdf5b358..3d544e293b 100644 --- a/redisinsight/ui/src/pages/home/components/form/DbCompressor.tsx +++ b/redisinsight/ui/src/pages/home/components/form/DbCompressor.tsx @@ -1,7 +1,6 @@ import React, { ChangeEvent } from 'react' import { EuiCheckbox, - EuiFormRow, EuiSuperSelect, EuiSuperSelectOption, htmlIdGenerator, @@ -13,6 +12,7 @@ import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' import { NONE } from 'uiSrc/pages/home/constants' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { FormField } from 'uiSrc/components/base/forms/FormField' export interface Props { formik: FormikProps @@ -67,7 +67,7 @@ const DbCompressor = (props: Props) => { <> - + { onChange={handleChangeDbCompressorCheckbox} data-testid="showCompressor" /> - + @@ -85,7 +85,7 @@ const DbCompressor = (props: Props) => { - + { }} data-testid="select-compressor" /> - + diff --git a/redisinsight/ui/src/pages/home/components/form/DbIndex.tsx b/redisinsight/ui/src/pages/home/components/form/DbIndex.tsx index 03073de8ac..340d05df60 100644 --- a/redisinsight/ui/src/pages/home/components/form/DbIndex.tsx +++ b/redisinsight/ui/src/pages/home/components/form/DbIndex.tsx @@ -2,7 +2,6 @@ import React, { ChangeEvent } from 'react' import { EuiCheckbox, EuiFieldNumber, - EuiFormRow, htmlIdGenerator, } from '@elastic/eui' import { FormikProps } from 'formik' @@ -12,6 +11,7 @@ import { validateNumber } from 'uiSrc/utils' import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { FormField } from 'uiSrc/components/base/forms/FormField' import styles from '../styles.module.scss' export interface Props { @@ -36,7 +36,7 @@ const DbIndex = (props: Props) => { <> - + { onChange={handleChangeDbIndexCheckbox} data-testid="showDb" /> - + @@ -54,7 +54,7 @@ const DbIndex = (props: Props) => { - + { type="text" min={0} /> - + diff --git a/redisinsight/ui/src/pages/home/components/form/ForceStandalone.tsx b/redisinsight/ui/src/pages/home/components/form/ForceStandalone.tsx index 973e0e9ce0..1622846e33 100644 --- a/redisinsight/ui/src/pages/home/components/form/ForceStandalone.tsx +++ b/redisinsight/ui/src/pages/home/components/form/ForceStandalone.tsx @@ -1,7 +1,6 @@ import React, { ChangeEvent } from 'react' import { EuiCheckbox, - EuiFormRow, EuiIcon, EuiToolTip, htmlIdGenerator, @@ -10,6 +9,7 @@ import { FormikProps } from 'formik' import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { FormField } from 'uiSrc/components/base/forms/FormField' export interface Props { formik: FormikProps @@ -50,7 +50,7 @@ const ForceStandalone = (props: Props) => { return ( - + { onChange={handleChangeForceStandaloneCheckbox} data-testid="forceStandalone" /> - + ) diff --git a/redisinsight/ui/src/pages/home/components/form/KeyFormatSelector.tsx b/redisinsight/ui/src/pages/home/components/form/KeyFormatSelector.tsx index 772b5891ba..903a16eb2d 100644 --- a/redisinsight/ui/src/pages/home/components/form/KeyFormatSelector.tsx +++ b/redisinsight/ui/src/pages/home/components/form/KeyFormatSelector.tsx @@ -1,10 +1,11 @@ import React from 'react' import { FormikProps } from 'formik' -import { EuiFormRow, EuiSuperSelect, EuiSuperSelectOption } from '@elastic/eui' +import { EuiSuperSelect, EuiSuperSelectOption } from '@elastic/eui' import { KeyValueFormat } from 'uiSrc/constants' import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { FormField } from 'uiSrc/components/base/forms/FormField' export interface Props { formik: FormikProps @@ -27,7 +28,7 @@ const KeyFormatSelector = (props: Props) => { return ( - + { }} data-testid="select-key-name-format" /> - + diff --git a/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx b/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx index 7e429e95ef..c707645ee8 100644 --- a/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx +++ b/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx @@ -3,7 +3,6 @@ import { EuiCheckbox, EuiFieldNumber, EuiFieldText, - EuiFormRow, EuiRadioGroup, EuiRadioGroupOption, EuiTextArea, @@ -25,6 +24,7 @@ import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { PasswordInput } from 'uiSrc/components/base/inputs' import styles from '../styles.module.scss' @@ -76,7 +76,7 @@ const SSHDetails = (props: Props) => { <> - + { ) }} /> - + - + { min={0} max={MAX_PORT_NUMBER} /> - + - + { ) }} /> - + @@ -163,7 +163,7 @@ const SSHDetails = (props: Props) => { {formik.values.sshPassType === SshPassType.Password && ( - + { }} autoComplete="new-password" /> - + )} @@ -192,7 +192,7 @@ const SSHDetails = (props: Props) => { <> - + { } }} /> - + - + { }} autoComplete="new-password" /> - + diff --git a/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx b/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx index 3102a8dc94..55c6bc79d9 100644 --- a/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx +++ b/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx @@ -2,7 +2,6 @@ import React, { ChangeEvent, useState } from 'react' import { EuiCheckbox, EuiFieldText, - EuiFormRow, EuiSuperSelect, EuiSuperSelectOption, EuiTextArea, @@ -31,6 +30,7 @@ import { deleteCaCertificateAction } from 'uiSrc/slices/instances/caCerts' import { deleteClientCertAction } from 'uiSrc/slices/instances/clientCerts' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { FormField } from 'uiSrc/components/base/forms/FormField' import styles from '../styles.module.scss' const suffix = '_tls_details' @@ -212,7 +212,7 @@ const TlsDetails = (props: Props) => { - + { } data-testid="sni-servername" /> - + @@ -256,7 +256,7 @@ const TlsDetails = (props: Props) => { - { }} data-testid="select-ca-cert" /> - + {formik.values.tls && formik.values.selectedCaCertName === ADD_NEW_CA_CERT && ( - + { } data-testid="qa-ca-cert" /> - + )} @@ -307,7 +307,7 @@ const TlsDetails = (props: Props) => { formik.values.selectedCaCertName === ADD_NEW_CA_CERT && ( - + { placeholder="Enter CA Certificate" data-testid="new-ca-cert" /> - + )} @@ -347,7 +347,7 @@ const TlsDetails = (props: Props) => { > - + { }} data-testid="select-cert" /> - + {formik.values.tls && formik.values.tlsClientAuthRequired && formik.values.selectedTlsClientCertId === 'ADD_NEW' && ( - + { } data-testid="new-tsl-cert-pair-name" /> - + )} @@ -391,7 +391,7 @@ const TlsDetails = (props: Props) => { <> - + { placeholder="Enter Client Certificate" data-testid="new-tls-client-cert" /> - + - + { fullWidth data-testid="new-tls-client-cert-key" /> - + diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/PrimaryGroupSentinel.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/PrimaryGroupSentinel.tsx index 41382960cf..79c5244d08 100644 --- a/redisinsight/ui/src/pages/home/components/form/sentinel/PrimaryGroupSentinel.tsx +++ b/redisinsight/ui/src/pages/home/components/form/sentinel/PrimaryGroupSentinel.tsx @@ -1,9 +1,10 @@ import React from 'react' -import { EuiFieldText, EuiFormRow } from '@elastic/eui' +import { EuiFieldText } from '@elastic/eui' import { FormikProps } from 'formik' import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { FormField } from 'uiSrc/components/base/forms/FormField' export interface Props { flexGroupClassName?: string @@ -17,7 +18,7 @@ const PrimaryGroupSentinel = (props: Props) => { <> - + { maxLength={500} onChange={formik.handleChange} /> - + - + { onChange={formik.handleChange} disabled /> - + diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx index 4766e0eec2..8c29a6cf5b 100644 --- a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx +++ b/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx @@ -1,7 +1,6 @@ import React from 'react' import { EuiFieldText, - EuiFormRow, EuiText, EuiTextColor, } from '@elastic/eui' @@ -13,6 +12,7 @@ import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' import { PasswordInput } from 'uiSrc/components/base/inputs' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { FormField } from 'uiSrc/components/base/forms/FormField' import styles from '../../styles.module.scss' export interface Props { @@ -43,7 +43,7 @@ const SentinelMasterDatabase = (props: Props) => { )} - + { onChange={formik.handleChange} data-testid="sentinel-mater-username" /> - + - + { }} autoComplete="new-password" /> - + diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditSentinelConnection.tsx b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditSentinelConnection.tsx index f42c315be7..c8c72fdf96 100644 --- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditSentinelConnection.tsx +++ b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditSentinelConnection.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { EuiFieldText, EuiForm, EuiFormRow, EuiTitle } from '@elastic/eui' +import { EuiFieldText, EuiForm, EuiTitle } from '@elastic/eui' import { FormikProps } from 'formik' import { PrimaryGroupSentinel, @@ -15,6 +15,7 @@ import { import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { FormField } from 'uiSrc/components/base/forms/FormField' import DecompressionAndFormatters from './DecompressionAndFormatters' import { ManualFormTab } from '../constants' @@ -86,7 +87,7 @@ const EditSentinelConnection = (props: Props) => { <> - + { maxLength={500} onChange={formik.handleChange} /> - + diff --git a/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.tsx b/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.tsx index 3e5b9a6677..3635306fc3 100644 --- a/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.tsx +++ b/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.tsx @@ -1,6 +1,5 @@ import { EuiFieldText, - EuiFormRow, EuiIcon, EuiPopover, EuiCheckbox, @@ -9,6 +8,7 @@ import React, { memo } from 'react' import FilterSvg from 'uiSrc/assets/img/icons/filter.svg' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { useFilterTags } from './useFilterTags' import styles from './styles.module.scss' @@ -52,7 +52,7 @@ export const TagsCellHeader = memo(() => { {/* stop propagation to prevent sorting by column header */} {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
e.stopPropagation()}> - + { setTagSearch(e.target.value) }} /> - + {Object.keys(groupedTags).map((key) => (
diff --git a/redisinsight/ui/src/pages/home/styles.scss b/redisinsight/ui/src/pages/home/styles.scss index e77a535f09..63949f5772 100644 --- a/redisinsight/ui/src/pages/home/styles.scss +++ b/redisinsight/ui/src/pages/home/styles.scss @@ -18,11 +18,6 @@ } } - .euiFormRow { - max-width: 100% !important; - padding-top: 15px; - } - .euiRadioGroup__item { display: inline-block; vertical-align: top !important; @@ -31,16 +26,6 @@ margin-right: 30px !important; } - .euiFormRow__fieldWrapper { - position: relative; - } - - .euiFormRow__text { - position: relative; - top: -10px; - margin-bottom: -10px; - } - .euiFormHelpText { color: var(--euiColorMediumShade); } diff --git a/redisinsight/ui/src/pages/pub-sub/components/publish-message/PublishMessage.tsx b/redisinsight/ui/src/pages/pub-sub/components/publish-message/PublishMessage.tsx index f35eff701f..9719474c03 100644 --- a/redisinsight/ui/src/pages/pub-sub/components/publish-message/PublishMessage.tsx +++ b/redisinsight/ui/src/pages/pub-sub/components/publish-message/PublishMessage.tsx @@ -2,7 +2,6 @@ import { EuiBadge, EuiFieldText, EuiForm, - EuiFormRow, EuiIcon, } from '@elastic/eui' import cx from 'classnames' @@ -26,6 +25,7 @@ import { useConnectionType } from 'uiSrc/components/hooks/useConnectionType' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' +import { FormField } from 'uiSrc/components/base/forms/FormField' import styles from './styles.module.scss' const HIDE_BADGE_TIMER = 3000 @@ -94,7 +94,7 @@ const PublishMessage = () => { > - + { autoComplete="off" data-testid="field-channel-name" /> - + - + <> { )} - + diff --git a/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx b/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx index 62c5eda59d..2ab15bf4af 100644 --- a/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx +++ b/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx @@ -1,7 +1,6 @@ import { EuiFieldText, EuiForm, - EuiFormRow, EuiIcon, EuiTitle, EuiToolTip, @@ -32,6 +31,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { InfoIcon } from 'uiSrc/components/base/icons' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { PasswordInput } from 'uiSrc/components/base/inputs' import ValidationTooltip from './components/ValidationTooltip' @@ -177,9 +177,8 @@ const ConnectionForm = (props: Props) => { data-testid="connection-form" >
- @@ -193,8 +192,8 @@ const ConnectionForm = (props: Props) => { /> )} - - + + {({ field }: { field: FieldInputProps }) => ( { /> )} - - + + - + {({ field }: { field: FieldInputProps }) => ( { /> )} - + - Password @@ -266,10 +265,10 @@ const ConnectionForm = (props: Props) => { /> )} - + - +
{ {pipelineTypeOptions?.length > 1 && ( - + <>
Pipeline type
{ data-testid="pipeline-type-select" /> - + )} {source === RdiPipelineTabs.Config && ( - + <>
Database type
{ data-testid="db-type-select" /> - + )}
diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-form/styles.module.scss b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-form/styles.module.scss index 4e57aaf460..9a0320f66a 100644 --- a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-form/styles.module.scss +++ b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-form/styles.module.scss @@ -3,20 +3,6 @@ } .formRow { - :global(.euiFormRow__fieldWrapper) { - display: flex; - align-items: center; - justify-content: space-between; - } - - :global(.euiFormControlLayout__childrenWrapper) { - height: 36px; - } - - :global(.euiFormRow + .euiFormRow) { - margin-top: 8px; - } - .selectWrapper { width: 155px; } diff --git a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx index 480d2acf8f..6f0bf5c838 100644 --- a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx +++ b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react' import { EuiBasicTableColumn, EuiFieldSearch, - EuiFormRow, EuiInMemoryTable, EuiPopover, EuiTableSelectionType, @@ -27,6 +26,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { FormField } from 'uiSrc/components/base/forms/FormField' import styles from './styles.module.scss' interface Props { @@ -167,7 +167,7 @@ const RedisClusterDatabases = ({ )} - + - +
diff --git a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabasesResult.tsx b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabasesResult.tsx index d3a6e1b952..a2d240875a 100644 --- a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabasesResult.tsx +++ b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabasesResult.tsx @@ -3,11 +3,9 @@ import { EuiInMemoryTable, EuiBasicTableColumn, PropertySort, - EuiButton, EuiText, EuiTitle, EuiFieldSearch, - EuiFormRow, } from '@elastic/eui' import cx from 'classnames' import { useSelector } from 'react-redux' @@ -26,6 +24,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { FormField } from 'uiSrc/components/base/forms/FormField' import styles from './styles.module.scss' export interface Props { @@ -109,7 +108,7 @@ const RedisClusterDatabasesResult = ({ columns, onBack, onView }: Props) => { - + { aria-label="Search" data-testid="search" /> - +
diff --git a/redisinsight/ui/src/pages/settings/SettingsPage.tsx b/redisinsight/ui/src/pages/settings/SettingsPage.tsx index 917b22c36f..a9b6a96a4f 100644 --- a/redisinsight/ui/src/pages/settings/SettingsPage.tsx +++ b/redisinsight/ui/src/pages/settings/SettingsPage.tsx @@ -4,7 +4,6 @@ import { EuiCallOut, EuiCollapsibleNavGroup, EuiForm, - EuiFormRow, EuiLoadingSpinner, EuiSuperSelect, EuiText, @@ -41,6 +40,7 @@ import { PageHeader, PageContentBody, } from 'uiSrc/components/base/layout/page' +import { FormField } from 'uiSrc/components/base/forms/FormField' import { AdvancedSettings, CloudSettings, @@ -99,7 +99,7 @@ const SettingsPage = () => {

Color Theme

- + { style={{ marginTop: '12px' }} data-test-subj="select-theme" /> - + diff --git a/redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.tsx b/redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.tsx index 2cc88ac60a..a6f09d8051 100644 --- a/redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.tsx +++ b/redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.tsx @@ -1,4 +1,4 @@ -import { EuiFormRow, EuiLink, EuiSwitch, EuiTitle } from '@elastic/eui' +import { EuiLink, EuiSwitch, EuiTitle } from '@elastic/eui' import { toNumber } from 'lodash' import React from 'react' import { useDispatch, useSelector } from 'react-redux' @@ -14,6 +14,7 @@ import { import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { validateNumber } from 'uiSrc/utils' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { FormField } from 'uiSrc/components/base/forms/FormField' const WorkbenchSettings = () => { const { cleanup } = useSelector(userSettingsWBSelector) @@ -43,7 +44,7 @@ const WorkbenchSettings = () => {

Editor Cleanup

- + { className={styles.switchOption} data-testid="switch-workbench-cleanup" /> - + { {connectionType !== ConnectionType.Cluster && ( <> - + <>
slowlog-log-slower-than
@@ -211,8 +211,8 @@ const SlowLogConfig = ({ closePopover, onRefresh }: Props) => {
- - + + <>
slowlog-max-len
@@ -236,7 +236,7 @@ const SlowLogConfig = ({ closePopover, onRefresh }: Props) => {
- + diff --git a/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/styles.module.scss b/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/styles.module.scss index 3d4aaedea5..f01e5a5f98 100644 --- a/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/styles.module.scss +++ b/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/styles.module.scss @@ -29,16 +29,6 @@ width: 600px !important; max-width: 600px !important; padding-bottom: 2px; - - :global(.euiFormRow__fieldWrapper) { - width: 100% !important; - min-width: 100% !important; - - :global(.euiFormControlLayout) { - display: inline-block; - width: 120px; - } - } } .rowFields { diff --git a/redisinsight/ui/src/styles/components/_forms.scss b/redisinsight/ui/src/styles/components/_forms.scss index 8ed13761d6..5006578100 100644 --- a/redisinsight/ui/src/styles/components/_forms.scss +++ b/redisinsight/ui/src/styles/components/_forms.scss @@ -1,52 +1,5 @@ @use "../mixins/eui"; -.euiFormRow { - .euiSuperSelectControl:not(.euiSuperSelectControl--compressed), - .euiSelect:not(.euiSelect--compressed), - .euiFormControlLayout:not(.euiFormControlLayout--compressed), - .euiFieldText:not(.euiFieldText--compressed), - .euiFieldNumber:not(.euiFieldNumber--compressed) { - height: 100%; - } - .euiFormLegend, - .euiFormRow__label, - .euiRadio__label, - .euiCheckbox__label { - font-size: 13px; - line-height: 18px; - font-weight: 400; - letter-spacing: -0.13px; - - &:not(.euiFormLabel-isFocused, .euiFormLabel-isInvalid) { - color: var(--euiTextSubduedColor); - } - } - - .euiSuperSelectControl { - display: flex; - align-items: center; - font-size: 13px; - line-height: 41px; - } - - .euiFormRow__label { - padding-bottom: 2px; - } - - .euiFieldText:disabled { - background-color: initial; - color: #b5b6c0; - } - - .euiButtonIcon { - align-self: center; - } -} - -.euiFormLabel.euiFormLabel-isFocused { - color: var(--euiColorPrimary); -} - .euiButton, .euiCollapsibleNav, .euiHeaderSectionItem__button { @@ -177,14 +130,6 @@ } } } - - .euiFormRow .euiSuperSelectControl:not(.euiSuperSelectControl--compressed), - .euiFormRow .euiSelect:not(.euiSelect--compressed), - .euiFormRow .euiFormControlLayout:not(.euiFormControlLayout--compressed), - .euiFormRow .euiFieldText:not(.euiFieldText--compressed), - .euiFormRow .euiFieldNumber:not(.euiFieldNumber--compressed) { - height: 43px; - } } .euiComboBox .euiComboBox__inputWrap { diff --git a/redisinsight/ui/src/styles/elastic.css b/redisinsight/ui/src/styles/elastic.css index 3018eca1a5..0ccfdbf07b 100644 --- a/redisinsight/ui/src/styles/elastic.css +++ b/redisinsight/ui/src/styles/elastic.css @@ -8220,21 +8220,11 @@ .euiDescribedFormGroup .euiDescribedFormGroup__fields { padding-top: 0; } - .euiDescribedFormGroup - .euiDescribedFormGroup__fields - > .euiFormRow--hasEmptyLabelSpace:first-child { - padding-top: 0; - } } @media only screen and (min-width: 575px) and (max-width: 767px) { .euiDescribedFormGroup .euiDescribedFormGroup__fields { padding-top: 0; } - .euiDescribedFormGroup - .euiDescribedFormGroup__fields - > .euiFormRow--hasEmptyLabelSpace:first-child { - padding-top: 0; - } } .euiFieldNumber { max-width: 400px; @@ -9746,84 +9736,6 @@ .euiFormLabel[for] { cursor: pointer; } - .euiFormRow { - display: flex; - flex-direction: column; - max-width: 400px; - } - .euiFormRow + .euiFormRow, - .euiFormRow + .euiButton { - margin-top: 16px; - } - .euiFormRow--fullWidth { - max-width: 100%; - } - .euiFormRow--hasEmptyLabelSpace { - margin-top: 22px; - min-height: 40px; - padding-bottom: 0; - justify-content: center; - } - .euiFormRow__labelWrapper { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - margin-bottom: 4px; - } - .euiFormRow--horizontal { - flex-direction: row; - align-items: stretch; - } - .euiFormRow--horizontal .euiFormRow__label { - overflow-wrap: break-word !important; - word-wrap: break-word !important; - word-break: break-word; - hyphens: auto; - max-width: 100%; - } - .euiFormRow--horizontal .euiFormRow__labelWrapper { - display: block; - line-height: 31px; - width: calc(33% - 8px); - margin-right: 8px; - margin-bottom: 0; - } - .euiFormRow--horizontal .euiFormRow__fieldWrapper { - width: 67%; - } - .euiFormRow--horizontal + .euiFormRow--horizontal { - margin-top: 8px; - } - .euiFormRow--horizontal + .euiFormRow--horizontal.euiFormRow--hasSwitch { - margin-top: 12px; - } - .euiFormRow--horizontal.euiFormRow--hasSwitch .euiFormRow__labelWrapper { - line-height: 19px; - width: auto; - min-width: calc(33% - 8px); - } - .euiFormRow--horizontal.euiFormRow--hasSwitch .euiFormRow__fieldWrapper { - width: auto; - } - .euiFormRow--horizontal.euiFormRow--hasSwitch - .euiFormRow__fieldWrapper - .euiSwitch--compressed { - margin-top: 2px; - } - .euiFormRow--horizontal.euiFormRow--hasSwitch + .euiFormRow--horizontal { - margin-top: 12px; - } - .euiFormRow__fieldWrapperDisplayOnly { - min-height: 40px; - display: flex; - align-items: center; - } - .euiFormRow--compressed.euiFormRow--hasEmptyLabelSpace { - min-height: 32px; - } - .euiFormRow--compressed .euiFormRow__fieldWrapperDisplayOnly { - min-height: 32px; - } .euiRadio { position: relative; } From 839830cddd3d0be9b2be919992e8ae77a7e14edb Mon Sep 17 00:00:00 2001 From: Krum Tyukenov Date: Wed, 28 May 2025 12:26:02 +0300 Subject: [PATCH 085/154] RI-7052: replace EuiFieldSearch with SearchInput (#4586) * RI-7054: replace EuiFormRow with FormField * RI-7052 remove leftover * RI-7052: expose and use KeyboardKeys enum --- .../components/base/inputs/SearchInput.tsx | 3 + .../ui/src/components/base/inputs/index.ts | 1 + .../ui/src/components/cli/Cli/Cli.spec.tsx | 2 +- .../cli-body/CliBody/CliBody.spec.tsx | 2 +- .../components/cli-body/CliBody/CliBody.tsx | 2 +- .../CHSearchFilter/styles.module.scss | 1 - .../CHSearchInput/CHSearchInput.tsx | 14 +- .../CHSearchInput/styles.module.scss | 16 +- .../command-helper-search/styles.module.scss | 2 + .../components/form-dialog/styles.module.scss | 1 - .../components/query/query-card/QueryCard.tsx | 2 +- .../src/components/side-panels/SidePanels.tsx | 2 +- .../TableColumnSearchTrigger.tsx | 20 +- .../styles.module.scss | 23 +- .../table-column-search/TableColumnSearch.tsx | 14 +- .../table-column-search/styles.module.scss | 10 +- redisinsight/ui/src/constants/keys.ts | 17 ++ .../RedisCloudDatabasesResult.tsx | 10 +- .../styles.module.scss | 5 - .../RedisCloudDatabases.tsx | 10 +- .../redis-cloud-databases/styles.module.scss | 5 - .../RedisCloudSubscriptions.tsx | 9 +- .../styles.module.scss | 5 - .../SentinelDatabasesResult.tsx | 12 +- .../styles.module.scss | 5 - .../SentinelDatabases/SentinelDatabases.tsx | 10 +- .../autodiscover-sentinel/styles.module.scss | 5 - .../search-key-list/SearchKeyList.spec.tsx | 2 +- .../search-key-list/styles.module.scss | 10 - .../SearchDatabasesList.tsx | 9 +- .../search-databases-list/styles.module.scss | 9 - .../pages/rdi/home/search/SearchRdiList.tsx | 13 +- .../pages/rdi/home/search/styles.module.scss | 9 - .../redis-cluster/RedisClusterDatabases.tsx | 10 +- .../RedisClusterDatabasesResult.tsx | 9 +- .../pages/redis-cluster/styles.module.scss | 5 - redisinsight/ui/src/styles/base/_inputs.scss | 4 - .../ui/src/styles/base/_typography.scss | 1 - .../ui/src/styles/components/_forms.scss | 2 - redisinsight/ui/src/styles/elastic.css | 255 ------------------ 40 files changed, 87 insertions(+), 459 deletions(-) create mode 100644 redisinsight/ui/src/components/base/inputs/SearchInput.tsx delete mode 100644 redisinsight/ui/src/pages/home/components/search-databases-list/styles.module.scss delete mode 100644 redisinsight/ui/src/pages/rdi/home/search/styles.module.scss diff --git a/redisinsight/ui/src/components/base/inputs/SearchInput.tsx b/redisinsight/ui/src/components/base/inputs/SearchInput.tsx new file mode 100644 index 0000000000..32a1951165 --- /dev/null +++ b/redisinsight/ui/src/components/base/inputs/SearchInput.tsx @@ -0,0 +1,3 @@ +import { SearchInput } from '@redis-ui/components' + +export default SearchInput diff --git a/redisinsight/ui/src/components/base/inputs/index.ts b/redisinsight/ui/src/components/base/inputs/index.ts index 21c9adb49f..ba52d3925d 100644 --- a/redisinsight/ui/src/components/base/inputs/index.ts +++ b/redisinsight/ui/src/components/base/inputs/index.ts @@ -1 +1,2 @@ export { default as PasswordInput } from './PasswordInput' +export { default as SearchInput } from './SearchInput' diff --git a/redisinsight/ui/src/components/cli/Cli/Cli.spec.tsx b/redisinsight/ui/src/components/cli/Cli/Cli.spec.tsx index 257111b65d..3c270275d8 100644 --- a/redisinsight/ui/src/components/cli/Cli/Cli.spec.tsx +++ b/redisinsight/ui/src/components/cli/Cli/Cli.spec.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { keys } from '@elastic/eui' +import { KeyboardKeys as keys } from 'uiSrc/constants/keys' import { fireEvent, render } from 'uiSrc/utils/test-utils' import CLI from './Cli' diff --git a/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.spec.tsx b/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.spec.tsx index 2153f62ad0..192e5d328e 100644 --- a/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.spec.tsx +++ b/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.spec.tsx @@ -1,6 +1,6 @@ import { cloneDeep, last } from 'lodash' import React from 'react' -import { keys } from '@elastic/eui' +import { KeyboardKeys as keys } from 'uiSrc/constants/keys' import { instance, mock } from 'ts-mockito' import { cleanup, diff --git a/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.tsx b/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.tsx index 9beb469e65..8931594be4 100644 --- a/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.tsx +++ b/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.tsx @@ -1,5 +1,5 @@ import React, { Ref, useEffect, useRef, useState } from 'react' -import { keys } from '@elastic/eui' +import { KeyboardKeys as keys } from 'uiSrc/constants/keys' import { useDispatch, useSelector } from 'react-redux' import { Nullable, scrollIntoView } from 'uiSrc/utils' diff --git a/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/styles.module.scss b/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/styles.module.scss index 09ea7e2fff..50d746e54c 100644 --- a/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/styles.module.scss +++ b/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/styles.module.scss @@ -1,5 +1,4 @@ .container { - position: absolute; height: 36px; width: 180px; diff --git a/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchInput/CHSearchInput.tsx b/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchInput/CHSearchInput.tsx index 8b7c65f7bb..47f65c734f 100644 --- a/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchInput/CHSearchInput.tsx +++ b/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchInput/CHSearchInput.tsx @@ -1,9 +1,9 @@ -import React, { ChangeEvent, useEffect, useState } from 'react' +import React, { useEffect, useState } from 'react' import { useSelector } from 'react-redux' -import { EuiFieldSearch } from '@elastic/eui' import { cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings' +import { SearchInput } from 'uiSrc/components/base/inputs' import styles from './styles.module.scss' export interface Props { @@ -38,18 +38,14 @@ const CHSearchInput = ({ submitSearch, isLoading = false }: Props) => { return (
- ) => - onChangeSearch(e.target.value) - } - className={styles.searchInput} + onChange={onChangeSearch} data-testid="cli-helper-search" />
diff --git a/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchInput/styles.module.scss b/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchInput/styles.module.scss index 0c25dc8679..a8e2242b10 100644 --- a/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchInput/styles.module.scss +++ b/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchInput/styles.module.scss @@ -1,17 +1,3 @@ .container { - max-width: 100%; - height: 38px; - margin-left: 106px; - - :global(.euiFormControlLayout) { - max-width: calc(100%) !important; - height: 36px !important; - } -} - -.searchInput { - &:global(.euiFieldSearch) { - border: 1px solid var(--euiColorLightShade) !important; - height: 36px !important; - } + flex: 1; } diff --git a/redisinsight/ui/src/components/command-helper/components/command-helper-search/styles.module.scss b/redisinsight/ui/src/components/command-helper/components/command-helper-search/styles.module.scss index 42e8b31e00..a423c17679 100644 --- a/redisinsight/ui/src/components/command-helper/components/command-helper-search/styles.module.scss +++ b/redisinsight/ui/src/components/command-helper/components/command-helper-search/styles.module.scss @@ -1,4 +1,6 @@ .searchWrapper { margin-bottom: 16px; position: relative; + display: flex; + gap: 6px; } diff --git a/redisinsight/ui/src/components/form-dialog/styles.module.scss b/redisinsight/ui/src/components/form-dialog/styles.module.scss index bb80a830d5..36481ec615 100644 --- a/redisinsight/ui/src/components/form-dialog/styles.module.scss +++ b/redisinsight/ui/src/components/form-dialog/styles.module.scss @@ -52,7 +52,6 @@ .euiFieldText, .euiFieldNumber, - .euiFieldSearch, .euiSelect, .euiSuperSelectControl, .euiComboBox .euiComboBox__inputWrap, diff --git a/redisinsight/ui/src/components/query/query-card/QueryCard.tsx b/redisinsight/ui/src/components/query/query-card/QueryCard.tsx index 4e18085c53..a1cb53481a 100644 --- a/redisinsight/ui/src/components/query/query-card/QueryCard.tsx +++ b/redisinsight/ui/src/components/query/query-card/QueryCard.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' -import { keys } from '@elastic/eui' +import { KeyboardKeys as keys } from 'uiSrc/constants/keys' import { useParams } from 'react-router-dom' import { isNull } from 'lodash' diff --git a/redisinsight/ui/src/components/side-panels/SidePanels.tsx b/redisinsight/ui/src/components/side-panels/SidePanels.tsx index 173a09a05c..9bfa5478f1 100644 --- a/redisinsight/ui/src/components/side-panels/SidePanels.tsx +++ b/redisinsight/ui/src/components/side-panels/SidePanels.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react' import cx from 'classnames' -import { keys } from '@elastic/eui' +import { KeyboardKeys as keys } from 'uiSrc/constants/keys' import { useDispatch, useSelector } from 'react-redux' import { useHistory, useLocation, useParams } from 'react-router-dom' diff --git a/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx b/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx index 6c06e65a16..fa0efc33f6 100644 --- a/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx +++ b/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx @@ -1,7 +1,8 @@ -import React, { ChangeEvent, useState, useEffect } from 'react' +import React, { useState, useEffect } from 'react' import cx from 'classnames' -import { EuiButtonIcon, EuiFieldSearch, keys } from '@elastic/eui' +import { EuiButtonIcon, keys } from '@elastic/eui' +import { SearchInput } from 'uiSrc/components/base/inputs' import { Maybe, Nullable } from 'uiSrc/utils' import styles from './styles.module.scss' @@ -23,7 +24,6 @@ const TableColumnSearchTrigger = (props: Props) => { fieldName, appliedValue, initialValue = '', - prependSearchName, onApply = () => {}, searchValidation, } = props @@ -79,20 +79,16 @@ const TableColumnSearchTrigger = (props: Props) => { />
- ) => - handleChangeValue(e.target.value) - } + onChange={handleChangeValue} data-testid="search" />
diff --git a/redisinsight/ui/src/components/table-column-search-trigger/styles.module.scss b/redisinsight/ui/src/components/table-column-search-trigger/styles.module.scss index 45469bb009..4033818b85 100644 --- a/redisinsight/ui/src/components/table-column-search-trigger/styles.module.scss +++ b/redisinsight/ui/src/components/table-column-search-trigger/styles.module.scss @@ -8,26 +8,5 @@ top: 0; bottom: 0; padding: 0; - - :global { - .euiFormControlLayout--group { - border: 0 !important; - height: 100%; - } - - .euiFieldSearch { - padding-left: 6px !important; - } - - .euiFormControlLayoutIcons:not(.euiFormControlLayoutIcons--right) { - display: none; - } - - .euiFormControlLayout__prepend { - display: flex; - align-items: center; - font-size: 12px; - margin-top: 1px; - } - } + align-items: center; } diff --git a/redisinsight/ui/src/components/table-column-search/TableColumnSearch.tsx b/redisinsight/ui/src/components/table-column-search/TableColumnSearch.tsx index 307e0dbf40..8d6eab629c 100644 --- a/redisinsight/ui/src/components/table-column-search/TableColumnSearch.tsx +++ b/redisinsight/ui/src/components/table-column-search/TableColumnSearch.tsx @@ -1,6 +1,7 @@ -import React, { ChangeEvent, useState } from 'react' -import { EuiFieldSearch, keys } from '@elastic/eui' +import React, { useState } from 'react' +import { KeyboardKeys as keys } from 'uiSrc/constants/keys' import { Maybe } from 'uiSrc/utils' +import SearchInput from '../base/inputs/SearchInput' import styles from './styles.module.scss' export interface Props { @@ -15,7 +16,6 @@ const TableColumnSearch = (props: Props) => { const { fieldName, appliedValue, - prependSearchName, onApply = () => {}, searchValidation, } = props @@ -40,16 +40,12 @@ const TableColumnSearch = (props: Props) => { return (
- ) => - handleChangeValue(e.target.value) - } + onChange={handleChangeValue} data-testid="search" />
diff --git a/redisinsight/ui/src/components/table-column-search/styles.module.scss b/redisinsight/ui/src/components/table-column-search/styles.module.scss index f97a885faf..eeae054ec9 100644 --- a/redisinsight/ui/src/components/table-column-search/styles.module.scss +++ b/redisinsight/ui/src/components/table-column-search/styles.module.scss @@ -1,12 +1,6 @@ .search { - display: flex; position: absolute; - height: 40px; - width: auto; - min-width: 260px; - margin: auto; right: 0; - top: 0; - bottom: 0; - padding: 0 10px 0 20px; + width: 100%; + padding-right: 2px; } diff --git a/redisinsight/ui/src/constants/keys.ts b/redisinsight/ui/src/constants/keys.ts index 1334b81fd4..552c7cd78d 100644 --- a/redisinsight/ui/src/constants/keys.ts +++ b/redisinsight/ui/src/constants/keys.ts @@ -192,3 +192,20 @@ export enum SearchHistoryMode { Pattern = 'pattern', Redisearch = 'redisearch', } + +export enum KeyboardKeys { + ENTER = "Enter", + SPACE = " ", + ESCAPE = "Escape", + TAB = "Tab", + BACKSPACE = "Backspace", + F2 = "F2", + ARROW_DOWN = "ArrowDown", + ARROW_UP = "ArrowUp", + ARROW_LEFT = "ArrowLeft", + ARROW_RIGHT = "ArrowRight", + PAGE_UP = "PageUp", + PAGE_DOWN = "PageDown", + END = "End", + HOME = "Home" +} diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx index 3f0a13d748..9176632685 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx @@ -6,7 +6,6 @@ import { PropertySort, EuiText, EuiTitle, - EuiFieldSearch, } from '@elastic/eui' import { FormField } from '@redis-ui/components' import { @@ -22,6 +21,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { SearchInput } from 'uiSrc/components/base/inputs' import styles from './styles.module.scss' export interface Props { @@ -54,8 +54,8 @@ const RedisCloudDatabaseListResult = ({ columns, onBack, onView }: Props) => { ({ statusAdded }) => statusAdded === AddRedisDatabaseStatus.Fail, )?.length - const onQueryChange = (e: React.ChangeEvent) => { - const value = e?.target?.value?.toLowerCase() + const onQueryChange = (term: string) => { + const value = term?.toLowerCase() const itemsTemp = instances.filter( (item: InstanceRedisCloud) => @@ -101,11 +101,9 @@ const RedisCloudDatabaseListResult = ({ columns, onBack, onView }: Props) => { - diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/styles.module.scss b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/styles.module.scss index bd546ad9d9..4fe1a78e2c 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/styles.module.scss +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/styles.module.scss @@ -23,11 +23,6 @@ } } -.search { - background-color: var(--euiColorLightestShade) !important; - height: 40px !important; -} - .panelCancelBtn { max-width: 350px !important; margin-left: -10px; diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx index a1fba5139d..1d45306312 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx @@ -7,7 +7,6 @@ import { EuiPopover, EuiText, EuiTitle, - EuiFieldSearch, EuiToolTip, } from '@elastic/eui' import { map, pick } from 'lodash' @@ -28,6 +27,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { Pages } from 'uiSrc/constants' +import { SearchInput } from 'uiSrc/components/base/inputs' import styles from '../styles.module.scss' export interface Props { @@ -111,8 +111,8 @@ const RedisCloudDatabasesPage = ({ setSelection(selected), } - const onQueryChange = (e: React.ChangeEvent) => { - const value = e?.target?.value?.toLowerCase() + const onQueryChange = (term: string) => { + const value = term?.toLowerCase() const itemsTemp = instances?.filter( @@ -215,11 +215,9 @@ const RedisCloudDatabasesPage = ({ - diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/styles.module.scss b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/styles.module.scss index 612de97bac..595bc94116 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/styles.module.scss +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/styles.module.scss @@ -14,11 +14,6 @@ width: 266px !important; } -.search { - background-color: var(--euiColorLightestShade) !important; - height: 40px !important; -} - .table { @include eui.scrollBar; overflow: auto; diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx index 7c8ed5f5d8..a6fece6026 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx @@ -8,7 +8,6 @@ import { EuiPopover, EuiText, EuiTitle, - EuiFieldSearch, EuiToolTip, } from '@elastic/eui' import cx from 'classnames' @@ -32,6 +31,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { InfoIcon } from 'uiSrc/components/base/icons' +import { SearchInput } from 'uiSrc/components/base/inputs' import styles from '../styles.module.scss' export interface Props { @@ -120,8 +120,8 @@ const RedisCloudSubscriptions = ({ setSelection(selected), } - const onQueryChange = (e: React.ChangeEvent) => { - const value = e?.target?.value?.toLowerCase() + const onQueryChange = (term: string) => { + const value = term?.toLowerCase() const itemsTemp = subscriptions?.filter( (item: RedisCloudSubscription) => @@ -267,11 +267,10 @@ const RedisCloudSubscriptions = ({ - diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/styles.module.scss b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/styles.module.scss index 2965a9fff4..6d319e67ef 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/styles.module.scss +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/styles.module.scss @@ -43,11 +43,6 @@ width: 266px !important; } -.search { - background-color: var(--euiColorLightestShade) !important; - height: 40px !important; -} - .account { width: 100%; min-height: 44px; diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx index 20b10e239b..ef547c5b1a 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx @@ -5,11 +5,11 @@ import { PropertySort, EuiText, EuiTitle, - EuiFieldSearch, } from '@elastic/eui' import { useSelector } from 'react-redux' - import { FormField } from '@redis-ui/components' +import { SearchInput } from 'uiSrc/components/base/inputs' + import { sentinelSelector } from 'uiSrc/slices/instances/sentinel' import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' import MessageBar from 'uiSrc/components/message-bar/MessageBar' @@ -62,8 +62,8 @@ const SentinelDatabasesResult = ({ onViewDatabases() } - const onQueryChange = (e: React.ChangeEvent) => { - const value = e?.target?.value?.toLowerCase() + const onQueryChange = (term: string) => { + const value = term?.toLowerCase() const itemsTemp = masters.filter( (item: ModifiedSentinelMaster) => @@ -116,11 +116,9 @@ const SentinelDatabasesResult = ({ - diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/styles.module.scss b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/styles.module.scss index 299b6365e3..4fe1a78e2c 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/styles.module.scss +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/styles.module.scss @@ -13,11 +13,6 @@ width: 266px !important; } -.search { - background-color: var(--euiColorLightestShade) !important; - height: 40px !important; -} - .table { @include eui.scrollBar; overflow: auto; diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx index 86df3345b5..b2452185f1 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx @@ -8,7 +8,6 @@ import { EuiPopover, EuiText, EuiTitle, - EuiFieldSearch, EuiToolTip, } from '@elastic/eui' import { useSelector } from 'react-redux' @@ -26,6 +25,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { InfoIcon } from 'uiSrc/components/base/icons' +import { SearchInput } from 'uiSrc/components/base/inputs' import styles from '../../../styles.module.scss' export interface Props { @@ -105,8 +105,8 @@ const SentinelDatabases = ({ setSelection(selected), } - const onQueryChange = (e: React.ChangeEvent) => { - const value = e?.target?.value?.toLowerCase() + const onQueryChange = (term: string) => { + const value = term?.toLowerCase() const itemsTemp = masters.filter( (item: ModifiedSentinelMaster) => @@ -220,11 +220,9 @@ const SentinelDatabases = ({ - diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/styles.module.scss b/redisinsight/ui/src/pages/autodiscover-sentinel/styles.module.scss index 075b065992..bddcb727bd 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/styles.module.scss +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/styles.module.scss @@ -14,11 +14,6 @@ width: 266px !important; } -.search { - background-color: var(--euiColorLightestShade) !important; - height: 40px !important; -} - .table { @include eui.scrollBar; overflow: auto; diff --git a/redisinsight/ui/src/pages/browser/components/search-key-list/SearchKeyList.spec.tsx b/redisinsight/ui/src/pages/browser/components/search-key-list/SearchKeyList.spec.tsx index 49bfcff736..94a98a12e4 100644 --- a/redisinsight/ui/src/pages/browser/components/search-key-list/SearchKeyList.spec.tsx +++ b/redisinsight/ui/src/pages/browser/components/search-key-list/SearchKeyList.spec.tsx @@ -1,6 +1,6 @@ import { cloneDeep } from 'lodash' import React from 'react' -import { keys } from '@elastic/eui' +import { KeyboardKeys as keys } from 'uiSrc/constants/keys' import { act, cleanup, diff --git a/redisinsight/ui/src/pages/browser/components/search-key-list/styles.module.scss b/redisinsight/ui/src/pages/browser/components/search-key-list/styles.module.scss index ded4540b32..d35244dc63 100644 --- a/redisinsight/ui/src/pages/browser/components/search-key-list/styles.module.scss +++ b/redisinsight/ui/src/pages/browser/components/search-key-list/styles.module.scss @@ -9,16 +9,6 @@ } } -:global(.euiFieldSearch) { - &.input { - height: 34px !important; - max-width: 100% !important; - - box-shadow: none !important; - border: 1px solid var(--euiColorLightShade) !important; - } -} - .hiddenText { display: inline-block; visibility: hidden; diff --git a/redisinsight/ui/src/pages/home/components/search-databases-list/SearchDatabasesList.tsx b/redisinsight/ui/src/pages/home/components/search-databases-list/SearchDatabasesList.tsx index 6fa9a75ff0..bedbf4be3b 100644 --- a/redisinsight/ui/src/pages/home/components/search-databases-list/SearchDatabasesList.tsx +++ b/redisinsight/ui/src/pages/home/components/search-databases-list/SearchDatabasesList.tsx @@ -1,5 +1,4 @@ import React, { useState, useEffect } from 'react' -import { EuiFieldSearch } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { @@ -10,7 +9,7 @@ import { CONNECTION_TYPE_DISPLAY, Instance } from 'uiSrc/slices/interfaces' import { tagsSelector } from 'uiSrc/slices/instances/tags' import { lastConnectionFormat } from 'uiSrc/utils' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' -import styles from './styles.module.scss' +import { SearchInput } from 'uiSrc/components/base/inputs' export const instanceHasTags = ( instance: Instance, @@ -76,11 +75,9 @@ const SearchDatabasesList = () => { }, [value, selectedTags]) return ( - setValue(e.target.value.toLowerCase())} + onChange={(value) => setValue(value.toLowerCase())} value={value} aria-label="Search database list" data-testid="search-database-list" diff --git a/redisinsight/ui/src/pages/home/components/search-databases-list/styles.module.scss b/redisinsight/ui/src/pages/home/components/search-databases-list/styles.module.scss deleted file mode 100644 index 1ce3ee37db..0000000000 --- a/redisinsight/ui/src/pages/home/components/search-databases-list/styles.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -.search { - &:global(.euiFieldSearch) { - position: relative; - border-top: none !important; - border-left: none !important; - border-right: none !important; - background-color: transparent !important; - } -} diff --git a/redisinsight/ui/src/pages/rdi/home/search/SearchRdiList.tsx b/redisinsight/ui/src/pages/rdi/home/search/SearchRdiList.tsx index 30826c8c9f..ba9811d481 100644 --- a/redisinsight/ui/src/pages/rdi/home/search/SearchRdiList.tsx +++ b/redisinsight/ui/src/pages/rdi/home/search/SearchRdiList.tsx @@ -1,7 +1,7 @@ -import { EuiFieldSearch } from '@elastic/eui' import React from 'react' import { useDispatch, useSelector } from 'react-redux' +import { SearchInput } from 'uiSrc/components/base/inputs' import { RdiInstance } from 'uiSrc/slices/interfaces' import { instancesSelector, @@ -10,15 +10,13 @@ import { import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry' import { lastConnectionFormat } from 'uiSrc/utils' -import styles from './styles.module.scss' - const SearchRdiList = () => { const { data: instances } = useSelector(instancesSelector) const dispatch = useDispatch() - const onQueryChange = (e: React.ChangeEvent) => { - const value = e?.target?.value?.toLowerCase() + const onQueryChange = (term: string) => { + const value = term?.toLowerCase() const visibleItems = instances.map((item: RdiInstance) => ({ ...item, @@ -42,11 +40,8 @@ const SearchRdiList = () => { } return ( - ) => { - const value = e?.target?.value?.toLowerCase() + const onQueryChange = (term: string) => { + const value = term?.toLowerCase() const itemsTemp = instances?.filter( (item: InstanceRedisCluster) => @@ -168,11 +168,9 @@ const RedisClusterDatabases = ({ - diff --git a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabasesResult.tsx b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabasesResult.tsx index a2d240875a..95ff8f60c9 100644 --- a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabasesResult.tsx +++ b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabasesResult.tsx @@ -5,7 +5,6 @@ import { PropertySort, EuiText, EuiTitle, - EuiFieldSearch, } from '@elastic/eui' import cx from 'classnames' import { useSelector } from 'react-redux' @@ -24,6 +23,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { SearchInput } from 'uiSrc/components/base/inputs' import { FormField } from 'uiSrc/components/base/forms/FormField' import styles from './styles.module.scss' @@ -59,8 +59,8 @@ const RedisClusterDatabasesResult = ({ columns, onBack, onView }: Props) => { ({ statusAdded }) => statusAdded === AddRedisDatabaseStatus.Fail, )?.length - const onQueryChange = (e: React.ChangeEvent) => { - const value = e?.target?.value?.toLowerCase() + const onQueryChange = (term: string) => { + const value = term?.toLowerCase() const itemsTemp = instances.filter( (item: InstanceRedisCluster) => item.name?.toLowerCase().indexOf(value) !== -1 || @@ -109,11 +109,10 @@ const RedisClusterDatabasesResult = ({ columns, onBack, onView }: Props) => { - diff --git a/redisinsight/ui/src/pages/redis-cluster/styles.module.scss b/redisinsight/ui/src/pages/redis-cluster/styles.module.scss index d922bcd683..6e93e80aa7 100644 --- a/redisinsight/ui/src/pages/redis-cluster/styles.module.scss +++ b/redisinsight/ui/src/pages/redis-cluster/styles.module.scss @@ -41,11 +41,6 @@ $breakpoint-to-wrap-buttons: 660px; width: 266px !important; } -.search { - background-color: var(--euiColorLightestShade) !important; - height: 40px !important; -} - .table { @include eui.scrollBar; overflow: auto; diff --git a/redisinsight/ui/src/styles/base/_inputs.scss b/redisinsight/ui/src/styles/base/_inputs.scss index d0f49e292a..41ba6e6e07 100644 --- a/redisinsight/ui/src/styles/base/_inputs.scss +++ b/redisinsight/ui/src/styles/base/_inputs.scss @@ -8,10 +8,6 @@ border: 0 !important; } } -.euiFieldSearch.euiFieldSearch--inGroup { - box-shadow: none !important; - border: 0 !important; -} .euiTableCellContent__text { pointer-events: none !important; diff --git a/redisinsight/ui/src/styles/base/_typography.scss b/redisinsight/ui/src/styles/base/_typography.scss index ba809a1847..c633543104 100644 --- a/redisinsight/ui/src/styles/base/_typography.scss +++ b/redisinsight/ui/src/styles/base/_typography.scss @@ -97,7 +97,6 @@ body { .euiSelect, .euiSuperSelectControl, .euiFieldText, -.euiFieldSearch, .euiFieldNumber, .euiTextArea { font-family: 'Graphik', sans-serif !important; diff --git a/redisinsight/ui/src/styles/components/_forms.scss b/redisinsight/ui/src/styles/components/_forms.scss index 5006578100..0fc0eba2a5 100644 --- a/redisinsight/ui/src/styles/components/_forms.scss +++ b/redisinsight/ui/src/styles/components/_forms.scss @@ -39,7 +39,6 @@ .euiFieldText, .euiFieldNumber, -.euiFieldSearch, .euiSelect, .euiSuperSelectControl, .euiComboBox .euiComboBox__inputWrap, @@ -151,7 +150,6 @@ } } -.euiFieldSearch:focus, .euiTextArea:focus, .euiSuperSelectControl:focus, .euiFieldNumber:focus, diff --git a/redisinsight/ui/src/styles/elastic.css b/redisinsight/ui/src/styles/elastic.css index 0ccfdbf07b..495da3c772 100644 --- a/redisinsight/ui/src/styles/elastic.css +++ b/redisinsight/ui/src/styles/elastic.css @@ -8457,261 +8457,6 @@ .euiFieldNumber--withIcon.euiFieldNumber--compressed { padding-left: 32px; } - .euiFieldSearch { - max-width: 400px; - width: 100%; - height: 40px; - background-color: #fbfcfd; - background-repeat: no-repeat; - background-size: 0% 100%; - box-shadow: - 0 1px 1px -1px rgba(152, 162, 179, 0.2), - 0 3px 2px -2px rgba(152, 162, 179, 0.2), - inset 0 0 0 1px rgba(16, 38, 118, 0.1); - transition: - box-shadow 150ms ease-in, - background-image 150ms ease-in, - background-size 150ms ease-in, - background-color 150ms ease-in; - font-family: - 'Inter UI', - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Helvetica, - Arial, - sans-serif, - 'Apple Color Emoji', - 'Segoe UI Emoji', - 'Segoe UI Symbol'; - font-weight: 400; - letter-spacing: -0.005em; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - font-kerning: normal; - font-size: 14px; - color: #343741; - border: none; - border-radius: 0; - padding: 12px; - padding-left: 40px; - -webkit-appearance: textfield; - } - .euiFieldSearch--fullWidth { - max-width: 100%; - } - .euiFieldSearch--compressed { - height: 32px; - } - .euiFieldSearch--inGroup { - height: 100%; - } - @supports (-moz-appearance: none) { - .euiFieldSearch { - transition-property: box-shadow, background-image, background-size; - } - } - @media screen and (-ms-high-contrast: active), - screen and (-ms-high-contrast: none) { - .euiFieldSearch { - line-height: 1em; - } - } - .euiFieldSearch::-webkit-input-placeholder { - color: #6a717d; - opacity: 1; - } - .euiFieldSearch::-moz-placeholder { - color: #6a717d; - opacity: 1; - } - .euiFieldSearch:-ms-input-placeholder { - color: #6a717d; - opacity: 1; - } - .euiFieldSearch:-moz-placeholder { - color: #6a717d; - opacity: 1; - } - .euiFieldSearch::placeholder { - color: #6a717d; - opacity: 1; - } - .euiFieldSearch:invalid { - background-image: linear-gradient( - to top, - #bd271e, - #bd271e 2px, - transparent 2px, - transparent 100% - ); - background-size: 100%; - } - .euiFieldSearch:focus { - background-color: #fff; - background-image: linear-gradient( - to top, - #006bb4, - #006bb4 2px, - transparent 2px, - transparent 100% - ); - background-size: 100% 100%; - box-shadow: - 0 1px 1px -1px rgba(152, 162, 179, 0.2), - 0 4px 4px -2px rgba(152, 162, 179, 0.2), - inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldSearch:disabled { - color: #98a2b3; - -webkit-text-fill-color: #98a2b3; - cursor: not-allowed; - background: #eef2f7; - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldSearch:disabled::-webkit-input-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldSearch:disabled::-moz-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldSearch:disabled:-ms-input-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldSearch:disabled:-moz-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldSearch:disabled::placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldSearch[readOnly] { - cursor: default; - background: rgba(211, 218, 230, 0.05); - border-color: rgba(0, 0, 0, 0); - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldSearch:-webkit-autofill { - -webkit-text-fill-color: #343741; - } - .euiFieldSearch:-webkit-autofill ~ .euiFormControlLayoutIcons { - color: #343741; - } - .euiFieldSearch--compressed { - background-color: #fbfcfd; - background-repeat: no-repeat; - background-size: 0% 100%; - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - transition: - box-shadow 150ms ease-in, - background-image 150ms ease-in, - background-size 150ms ease-in, - background-color 150ms ease-in; - padding: 8px; - border-radius: 2px; - } - @supports (-moz-appearance: none) { - .euiFieldSearch--compressed { - transition-property: box-shadow, background-image, background-size; - } - } - .euiFieldSearch--compressed:invalid { - background-image: linear-gradient( - to top, - #bd271e, - #bd271e 2px, - transparent 2px, - transparent 100% - ); - background-size: 100%; - } - .euiFieldSearch--compressed:focus { - background-color: #fff; - background-image: linear-gradient( - to top, - #006bb4, - #006bb4 2px, - transparent 2px, - transparent 100% - ); - background-size: 100% 100%; - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldSearch--compressed:disabled { - color: #98a2b3; - -webkit-text-fill-color: #98a2b3; - cursor: not-allowed; - background: #eef2f7; - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldSearch--compressed:disabled::-webkit-input-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldSearch--compressed:disabled::-moz-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldSearch--compressed:disabled:-ms-input-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldSearch--compressed:disabled:-moz-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldSearch--compressed:disabled::placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldSearch--compressed[readOnly] { - cursor: default; - background: rgba(211, 218, 230, 0.05); - border-color: rgba(0, 0, 0, 0); - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldSearch--inGroup { - box-shadow: none !important; - border-radius: 0; - } - .euiFieldSearch-isLoading { - padding-right: 40px; - } - .euiFieldSearch-isLoading.euiFieldSearch--compressed { - padding-right: 32px; - } - .euiFieldSearch::-webkit-search-decoration, - .euiFieldSearch::-webkit-search-cancel-button { - -webkit-appearance: none; - } - .euiFieldSearch::-ms-clear { - display: none; - } - .euiFieldSearch.euiFieldSearch-isClearable { - padding-right: 40px; - } - .euiFieldSearch.euiFieldSearch-isLoading { - padding-right: 40px; - } - .euiFieldSearch.euiFieldSearch-isLoading.euiFieldSearch-isClearable { - padding-right: 62px; - } - .euiFieldSearch.euiFieldSearch--compressed { - padding-left: 32px; - } - .euiFieldSearch.euiFieldSearch--compressed.euiFieldSearch-isClearable { - padding-right: 32px; - } - .euiFieldSearch.euiFieldSearch--compressed.euiFieldSearch-isLoading { - padding-right: 32px; - } - .euiFieldSearch.euiFieldSearch--compressed.euiFieldSearch-isLoading.euiFieldSearch-isClearable { - padding-right: 54px; - } .euiFieldText { max-width: 400px; width: 100%; From 66a4de21f815a54223d4398389014177dd26bb0f Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 29 May 2025 11:00:11 +0300 Subject: [PATCH 086/154] RI-7056 replace eui health (#4593) * Add Health.tsx * Replace EuiHealth --- .../base/layout/flex/flex.styles.ts | 12 +++++---- .../src/components/base/layout/flex/flex.tsx | 9 +++++-- .../ui/src/components/base/text/Health.tsx | 25 +++++++++++++++++++ .../browser/components/add-key/AddKey.tsx | 7 +++--- .../CreateRedisearchIndex.tsx | 6 ++--- .../filter-key-type/FilterKeyType.tsx | 10 ++++---- .../filter-key-type/styles.module.scss | 9 ------- 7 files changed, 51 insertions(+), 27 deletions(-) create mode 100644 redisinsight/ui/src/components/base/text/Health.tsx diff --git a/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts b/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts index 8a66a1cfac..2f40cf1efe 100644 --- a/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts +++ b/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts @@ -174,22 +174,24 @@ export type FlexProps = PropsWithChildren & full?: boolean } -export const StyledFlex = styled.div` +export const StyledFlex = styled.div< + Omit & { $direction?: (typeof dirValues)[number] } +>` display: flex; align-items: stretch; flex-grow: 1; ${({ gap = 'none' }) => (gap ? flexGroupStyles.gapSizes[gap] : '')} ${({ align = 'stretch' }) => (align ? flexGroupStyles.align[align] : '')} - ${({ direction = 'row' }) => - direction ? flexGroupStyles.direction[direction] : ''} + ${({ $direction = 'row' }) => + $direction ? flexGroupStyles.direction[$direction] : ''} ${({ justify = 'start' }) => justify ? flexGroupStyles.justify[justify] : ''} ${({ centered = false }) => (centered ? flexGroupStyles.centered : '')} ${({ responsive = false }) => (responsive ? flexGroupStyles.responsive : '')} ${({ wrap = false }) => (wrap ? flexGroupStyles.wrap : '')} - ${({ full = false, direction = 'row' }) => + ${({ full = false, $direction = 'row' }) => full - ? direction === 'row' || direction === 'rowReverse' + ? $direction === 'row' || $direction === 'rowReverse' ? 'width: 100%' // if it is row make it full width : 'height: 100%;' // else, make it full height : ''} diff --git a/redisinsight/ui/src/components/base/layout/flex/flex.tsx b/redisinsight/ui/src/components/base/layout/flex/flex.tsx index c914f5f517..d2cc6c5a5d 100644 --- a/redisinsight/ui/src/components/base/layout/flex/flex.tsx +++ b/redisinsight/ui/src/components/base/layout/flex/flex.tsx @@ -39,10 +39,15 @@ export const Grid = ({ children, className, ...rest }: GridProps) => { * * */ -export const FlexGroup = ({ children, className, ...rest }: FlexProps) => { +export const FlexGroup = ({ + children, + className, + direction, + ...rest +}: FlexProps) => { const classes = classNames('RI-flex-group', className) return ( - + {children} ) diff --git a/redisinsight/ui/src/components/base/text/Health.tsx b/redisinsight/ui/src/components/base/text/Health.tsx new file mode 100644 index 0000000000..8136df88e5 --- /dev/null +++ b/redisinsight/ui/src/components/base/text/Health.tsx @@ -0,0 +1,25 @@ +import React from 'react' +import { Typography } from '@redis-ui/components' +import styled from 'styled-components' +import { Row } from 'uiSrc/components/base/layout/flex' + +type BodyProps = React.ComponentProps +type ColorType = BodyProps['color'] | (string & {}) +export type HealthProps = Omit & { + color?: ColorType +} +const Indicator = styled.div<{ + $color: ColorType +}>` + width: 0.8rem; + height: 0.8rem; + border-radius: 50%; + background-color: ${({ $color }) => $color || 'inherit'}; +` + +export const Health = ({ color, size = 'S', ...rest }: HealthProps) => ( + + + + +) diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKey.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKey.tsx index 6331253c63..683f8e1c2c 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKey.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKey.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' -import { EuiHealth, EuiTitle, EuiToolTip, EuiButtonIcon } from '@elastic/eui' +import { EuiTitle, EuiToolTip, EuiButtonIcon } from '@elastic/eui' import Divider from 'uiSrc/components/divider/Divider' import { KeyTypes } from 'uiSrc/constants' import HelpTexts from 'uiSrc/constants/help-texts' @@ -21,6 +21,7 @@ import { isContainJSONModule, Maybe, stringToBuffer } from 'uiSrc/utils' import { RedisResponseBuffer } from 'uiSrc/slices/interfaces' import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { Health } from 'uiSrc/components/base/text/Health' import { ADD_KEY_TYPE_OPTIONS } from './constants/key-type-options' import AddKeyHash from './AddKeyHash' import AddKeyZset from './AddKeyZset' @@ -61,13 +62,13 @@ const AddKey = (props: Props) => { return { value, inputDisplay: ( - {text} - + ), } }) diff --git a/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx b/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx index edd08019b6..8785c4ad7a 100644 --- a/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx +++ b/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx @@ -3,7 +3,6 @@ import { EuiComboBox, EuiFieldText, EuiFormFieldset, - EuiHealth, EuiLink, EuiPanel, EuiPopover, @@ -34,6 +33,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { FormField } from 'uiSrc/components/base/forms/FormField' +import { Health } from 'uiSrc/components/base/text/Health' import { CreateRedisearchIndexDto } from 'apiSrc/modules/browser/redisearch/dto' import { KEY_TYPE_OPTIONS, RedisearchIndexKeyType } from './constants' @@ -50,13 +50,13 @@ const keyTypeOptions = KEY_TYPE_OPTIONS.map((item) => { return { value, inputDisplay: ( - {text} - + ), } }) diff --git a/redisinsight/ui/src/pages/browser/components/filter-key-type/FilterKeyType.tsx b/redisinsight/ui/src/pages/browser/components/filter-key-type/FilterKeyType.tsx index 48e54511fe..49bc76ad13 100644 --- a/redisinsight/ui/src/pages/browser/components/filter-key-type/FilterKeyType.tsx +++ b/redisinsight/ui/src/pages/browser/components/filter-key-type/FilterKeyType.tsx @@ -1,5 +1,4 @@ import { - EuiHealth, EuiModal, EuiModalBody, EuiSuperSelect, @@ -29,6 +28,7 @@ import { resetBrowserTree } from 'uiSrc/slices/app/context' import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features' import { AdditionalRedisModule } from 'uiSrc/slices/interfaces' import { OutsideClickDetector } from 'uiSrc/components/base/utils' +import { Health } from 'uiSrc/components/base/text/Health' import { FILTER_KEY_TYPE_OPTIONS } from './constants' import styles from './styles.module.scss' @@ -79,14 +79,14 @@ const FilterKeyType = ({ modules }: Props) => { return { value, inputDisplay: ( - + {text} - + ), dropdownDisplay: ( - + {text} - + ), 'data-test-subj': `filter-option-type-${value}`, } diff --git a/redisinsight/ui/src/pages/browser/components/filter-key-type/styles.module.scss b/redisinsight/ui/src/pages/browser/components/filter-key-type/styles.module.scss index 7c5c3177fa..bb64003b63 100644 --- a/redisinsight/ui/src/pages/browser/components/filter-key-type/styles.module.scss +++ b/redisinsight/ui/src/pages/browser/components/filter-key-type/styles.module.scss @@ -129,12 +129,3 @@ .dropdownOption { padding-left: 6px; } - -.dropdownDisplay { - :global { - .euiFlexGroup { - margin: 0; - line-height: 1; - } - } -} From 4f09c942d0a5c9460014ac7cf4ec4ca7d7cb8a16 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 29 May 2025 11:05:41 +0300 Subject: [PATCH 087/154] RI-7045: replace EuiCallOut * replace EuiCallOut --- .../components/base/display/call-out/CallOut.tsx | 16 ++++++++++++++++ .../consents-settings/ConsentsSettings.tsx | 6 +++--- .../CreateRedisearchIndex.tsx | 2 +- .../ui/src/pages/settings/SettingsPage.tsx | 6 +++--- 4 files changed, 23 insertions(+), 7 deletions(-) create mode 100644 redisinsight/ui/src/components/base/display/call-out/CallOut.tsx diff --git a/redisinsight/ui/src/components/base/display/call-out/CallOut.tsx b/redisinsight/ui/src/components/base/display/call-out/CallOut.tsx new file mode 100644 index 0000000000..12f40ba1f3 --- /dev/null +++ b/redisinsight/ui/src/components/base/display/call-out/CallOut.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { Banner } from '@redis-ui/components' + +export type CallOutProps = Omit, 'show'> & { + children: React.ReactNode +} + +export const CallOut = ({ children, ...rest }: CallOutProps) => ( + +) diff --git a/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx b/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx index 72d86f6752..948eafea97 100644 --- a/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx +++ b/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx @@ -8,7 +8,6 @@ import { EuiTitle, EuiToolTip, EuiForm, - EuiCallOut, EuiLink, } from '@elastic/eui' import { EuiSwitchEvent } from '@elastic/eui/src/components/form/switch' @@ -25,6 +24,7 @@ import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { InfoIcon } from 'uiSrc/components/base/icons' +import { CallOut } from 'uiSrc/components/base/display/call-out/CallOut' import ConsentOption from './ConsentOption' import styles from './styles.module.scss' @@ -223,7 +223,7 @@ const ConsentsSettings = ({ onSubmitted }: Props) => { {consents.length > 1 && ( <> - + { To avoid automatic execution of malicious code, when adding new Workbench plugins, use files from trusted authors only. - + diff --git a/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx b/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx index 8785c4ad7a..27f54943e9 100644 --- a/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx +++ b/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx @@ -340,7 +340,7 @@ const CreateRedisearchIndex = ({ onClosePanel, onCreateIndex }: Props) => { borderRadius="none" className={styles.footer} > - + {
)} - + Advanced settings should only be changed if you understand their impact. - +
) From b3ba28ec0580e9ae9b6bbbaf98e9b3103b74e0be Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 29 May 2025 11:45:37 +0300 Subject: [PATCH 088/154] RI-7044 , RI-7043: EuiButtonEmpty, EuiButtonIcon --- .../base/forms/buttons/IconButton.tsx | 2 + .../components/base/forms/buttons/index.ts | 9 ++ .../components/base/forms/buttons/index.tsx | 17 ---- .../src/components/base/icons/BannedIcon.tsx | 2 +- .../src/components/base/icons/BulkActions.tsx | 2 +- .../ui/src/components/base/icons/Cloud.tsx | 2 +- .../ui/src/components/base/icons/Copilot.tsx | 2 +- .../src/components/base/icons/DislikeIcon.tsx | 8 ++ .../src/components/base/icons/ExtendIcon.tsx | 2 +- .../ui/src/components/base/icons/Github.tsx | 7 -- .../ui/src/components/base/icons/Group.tsx | 2 +- .../ui/src/components/base/icons/Icon.tsx | 2 +- .../ui/src/components/base/icons/LikeIcon.tsx | 6 ++ .../components/base/icons/MinusInCircle.tsx | 2 +- .../ui/src/components/base/icons/Play.tsx | 2 +- .../src/components/base/icons/PlayFilled.tsx | 2 +- .../components/base/icons/PlusInCircle.tsx | 2 +- .../src/components/base/icons/RIResetIcon.tsx | 2 +- .../components/base/icons/RIRocketIcon.tsx | 2 +- .../src/components/base/icons/RIStopIcon.tsx | 2 +- .../ui/src/components/base/icons/RawMode.tsx | 2 +- .../src/components/base/icons/RedisLogo.tsx | 2 +- .../base/icons/RedisLogoFullIcon.tsx | 7 ++ .../src/components/base/icons/ShrinkIcon.tsx | 2 +- .../src/components/base/icons/SnoozeIcon.tsx | 2 +- .../src/components/base/icons/StarsIcon.tsx | 2 +- .../components/base/icons/ThreeDotsIcon.tsx | 2 +- .../ui/src/components/base/icons/Trigger.tsx | 2 +- .../components/base/icons/UserInCircle.tsx | 2 +- .../ui/src/components/base/icons/index.ts | 9 +- .../base/icons/modules/RedisAIDarkIcon.tsx | 7 ++ .../base/icons/modules/RedisAILightIcon.tsx | 7 ++ .../base/icons/modules/RedisBloomDarkIcon.tsx | 7 ++ .../icons/modules/RedisBloomLightIcon.tsx | 7 ++ .../icons/modules/RedisGears2DarkIcon.tsx | 7 ++ .../icons/modules/RedisGears2LightIcon.tsx | 7 ++ .../base/icons/modules/RedisGearsDarkIcon.tsx | 7 ++ .../icons/modules/RedisGearsLightIcon.tsx | 7 ++ .../base/icons/modules/RedisGraphDarkIcon.tsx | 7 ++ .../icons/modules/RedisGraphLightIcon.tsx | 7 ++ .../base/icons/modules/RedisJSONDarkIcon.tsx | 7 ++ .../base/icons/modules/RedisJSONLightIcon.tsx | 7 ++ .../icons/modules/RedisSearchDarkIcon.tsx | 7 ++ .../icons/modules/RedisSearchLightIcon.tsx | 7 ++ .../icons/modules/RedisTimeSeriesDarkIcon.tsx | 7 ++ .../modules/RedisTimeSeriesLightIcon.tsx | 7 ++ .../base/icons/modules/UnknownDarkIcon.tsx | 7 ++ .../base/icons/modules/UnknownLightIcon.tsx | 7 ++ .../components/base/icons/modules/index.ts | 18 ++++ .../icons/options/ActiveActiveDarkIcon.tsx | 7 ++ .../icons/options/ActiveActiveLightIcon.tsx | 7 ++ .../icons/options/RedisOnFlashDarkIcon.tsx | 7 ++ .../icons/options/RedisOnFlashLightIcon.tsx | 7 ++ .../components/base/icons/options/index.ts | 4 + .../base/icons/sidebar/BrowserActiveIcon.tsx | 7 ++ .../base/icons/sidebar/BrowserIcon.tsx | 7 ++ .../base/icons/sidebar/GithubIcon.tsx | 7 ++ .../sidebar/PipelineManagementActiveIcon.tsx | 7 ++ .../icons/sidebar/PipelineManagementIcon.tsx | 7 ++ .../sidebar/PipelineStatisticsActiveIcon.tsx | 7 ++ .../icons/sidebar/PipelineStatisticsIcon.tsx | 7 ++ .../base/icons/sidebar/PubSubActiveIcon.tsx | 7 ++ .../base/icons/sidebar/PubSubIcon.tsx | 7 ++ .../base/icons/sidebar/SettingsActiveIcon.tsx | 7 ++ .../base/icons/sidebar/SettingsIcon.tsx | 7 ++ .../base/icons/sidebar/SlowLogActiveIcon.tsx | 7 ++ .../base/icons/sidebar/SlowLogIcon.tsx | 7 ++ .../icons/sidebar/WorkbenchActiveIcon.tsx | 7 ++ .../base/icons/sidebar/WorkbenchIcon.tsx | 7 ++ .../components/base/icons/sidebar/index.ts | 15 +++ .../src/components/code-block/CodeBlock.tsx | 8 +- .../DatabaseListModules.tsx | 12 +-- .../DatabaseListOptions.tsx | 22 +++-- .../src/components/group-badge/GroupBadge.tsx | 10 +- .../components/ShortInstanceInfo.tsx | 10 +- .../components/action-bar/ActionBar.tsx | 10 +- .../components/action-bar/styles.module.scss | 2 +- .../RedisUploadButton.spec.tsx | 16 ++-- .../src/components/message-bar/MessageBar.tsx | 8 +- .../dedicated-editor/DedicatedEditor.tsx | 20 ++-- .../dedicated-editor/styles.module.scss | 4 +- .../navigation-menu/NavigationItemWrapper.tsx | 31 +++++++ .../navigation-menu/NavigationMenu.tsx | 92 +++++++++++-------- .../components/help-menu/HelpMenu.tsx | 21 +++-- .../notifications-center/NotificationMenu.tsx | 22 +++-- .../PopoverNotification.tsx | 9 +- .../OAuthSocialButtons.tsx | 34 +++---- .../oauth-social-buttons/styles.module.scss | 3 +- .../onboarding-tour/OnboardingTour.tsx | 22 ++--- .../src/components/page-header/PageHeader.tsx | 10 +- .../RecommendationCopyComponent.tsx | 8 +- .../components/vote-option/VoteOption.tsx | 21 ++--- .../components/vote-option/utils.ts | 3 +- .../recommendation-voting/styles.module.scss | 2 +- .../side-panels/components/header/Header.tsx | 9 +- .../assistance-chat/AssistanceChat.tsx | 9 +- .../expert-chat-header/ExpertChatHeader.tsx | 18 ++-- .../TableColumnSearchTrigger.tsx | 9 +- .../src/components/upload-file/UploadFile.tsx | 7 +- redisinsight/ui/src/constants/modules.ts | 70 +++++++------- .../components/TableResult/TableResult.tsx | 9 +- .../ui/src/packages/redisgraph/src/Graph.tsx | 15 ++- .../src/packages/ri-explain/src/Explain.tsx | 71 +++++++------- .../RedisCloudDatabasesResultPage.tsx | 11 ++- .../RedisCloudDatabasesPage.tsx | 13 +-- .../RedisCloudSubscriptionsPage.tsx | 14 +-- .../SentinelDatabasesPage.tsx | 14 +-- .../add-items-actions/AddItemsActions.tsx | 9 +- .../browser/components/add-key/AddKey.tsx | 11 ++- .../add-key/AddKeyList/AddKeyList.tsx | 1 - .../components/bulk-actions/BulkActions.tsx | 9 +- .../CreateRedisearchIndex.tsx | 8 +- .../CreateRedisearchIndexWrapper.tsx | 15 +-- .../search-key-list/SearchKeyList.tsx | 9 +- .../KeyDetailsHeaderName.tsx | 15 +-- .../TextDetailsWrapper.tsx | 9 +- .../form/sentinel/SentinelHostPort.tsx | 16 +--- .../MessagesList/MessagesList.tsx | 8 +- .../components/jobs-panel/Panel.tsx | 22 ++--- .../components/jobs-tree/JobsTree.tsx | 19 ++-- .../TestConnectionsPanel.tsx | 10 +- .../RedisClusterDatabasesPage.tsx | 14 ++- .../wb-results/WBResults/WBResults.tsx | 12 ++- 123 files changed, 809 insertions(+), 452 deletions(-) create mode 100644 redisinsight/ui/src/components/base/forms/buttons/index.ts delete mode 100644 redisinsight/ui/src/components/base/forms/buttons/index.tsx create mode 100644 redisinsight/ui/src/components/base/icons/DislikeIcon.tsx delete mode 100644 redisinsight/ui/src/components/base/icons/Github.tsx create mode 100644 redisinsight/ui/src/components/base/icons/LikeIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/RedisLogoFullIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisAIDarkIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisAILightIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisBloomDarkIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisBloomLightIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisGears2DarkIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisGears2LightIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisGearsDarkIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisGearsLightIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisGraphDarkIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisGraphLightIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisJSONDarkIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisJSONLightIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisSearchDarkIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisSearchLightIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesDarkIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesLightIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/UnknownDarkIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/UnknownLightIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/index.ts create mode 100644 redisinsight/ui/src/components/base/icons/options/ActiveActiveDarkIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/options/ActiveActiveLightIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/options/RedisOnFlashDarkIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/options/RedisOnFlashLightIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/options/index.ts create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/BrowserActiveIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/BrowserIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/GithubIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/PipelineManagementActiveIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/PipelineManagementIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/PipelineStatisticsActiveIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/PipelineStatisticsIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/PubSubActiveIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/PubSubIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/SettingsActiveIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/SettingsIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/SlowLogActiveIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/SlowLogIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/WorkbenchActiveIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/WorkbenchIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/index.ts create mode 100644 redisinsight/ui/src/components/navigation-menu/NavigationItemWrapper.tsx diff --git a/redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx index 2a90a3fb5f..9952e9eb34 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx @@ -2,6 +2,8 @@ import React from 'react' import { IconButton as RedisUiIconButton } from '@redis-ui/components' export type ButtonProps = React.ComponentProps + +export type IconType = ButtonProps['icon'] export const IconButton = (props: ButtonProps) => ( ) diff --git a/redisinsight/ui/src/components/base/forms/buttons/index.ts b/redisinsight/ui/src/components/base/forms/buttons/index.ts new file mode 100644 index 0000000000..6500e979e0 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/buttons/index.ts @@ -0,0 +1,9 @@ +export { ActionIconButton } from 'uiSrc/components/base/forms/buttons/ActionIconButton' +export { BaseButton as Button } from 'uiSrc/components/base/forms/buttons/Button' +export { DestructiveButton } from 'uiSrc/components/base/forms/buttons/DestructiveButton' +export { EmptyButton } from 'uiSrc/components/base/forms/buttons/EmptyButton' +export { IconButton } from 'uiSrc/components/base/forms/buttons/IconButton' +export { PrimaryButton } from 'uiSrc/components/base/forms/buttons/PrimaryButton' +export { SecondaryButton } from 'uiSrc/components/base/forms/buttons/SecondaryButton' + +export type { IconType } from 'uiSrc/components/base/forms/buttons/IconButton' diff --git a/redisinsight/ui/src/components/base/forms/buttons/index.tsx b/redisinsight/ui/src/components/base/forms/buttons/index.tsx deleted file mode 100644 index 11ef91b557..0000000000 --- a/redisinsight/ui/src/components/base/forms/buttons/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { ActionIconButton } from 'uiSrc/components/base/forms/buttons/ActionIconButton' -import { BaseButton } from 'uiSrc/components/base/forms/buttons/Button' -import { DestructiveButton } from 'uiSrc/components/base/forms/buttons/DestructiveButton' -import { EmptyButton } from 'uiSrc/components/base/forms/buttons/EmptyButton' -import { IconButton } from 'uiSrc/components/base/forms/buttons/IconButton' -import { PrimaryButton } from 'uiSrc/components/base/forms/buttons/PrimaryButton' -import { SecondaryButton } from 'uiSrc/components/base/forms/buttons/SecondaryButton' - -export { - ActionIconButton, - BaseButton as Button, - DestructiveButton, - EmptyButton, - IconButton, - PrimaryButton, - SecondaryButton, -} diff --git a/redisinsight/ui/src/components/base/icons/BannedIcon.tsx b/redisinsight/ui/src/components/base/icons/BannedIcon.tsx index 7bdb7c117c..9b225ce3a7 100644 --- a/redisinsight/ui/src/components/base/icons/BannedIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/BannedIcon.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' import BanIconSvg from 'uiSrc/assets/img/monitor/ban.svg?react' export const BannedIcon = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/BulkActions.tsx b/redisinsight/ui/src/components/base/icons/BulkActions.tsx index 10b7a67a38..4fba451f1e 100644 --- a/redisinsight/ui/src/components/base/icons/BulkActions.tsx +++ b/redisinsight/ui/src/components/base/icons/BulkActions.tsx @@ -1,6 +1,6 @@ import React from 'react' import BulkActionsIcon from 'uiSrc/assets/img/icons/bulk_actions.svg?react' -import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const BulkActions = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/Cloud.tsx b/redisinsight/ui/src/components/base/icons/Cloud.tsx index 67e6c9b5b7..57bb64c742 100644 --- a/redisinsight/ui/src/components/base/icons/Cloud.tsx +++ b/redisinsight/ui/src/components/base/icons/Cloud.tsx @@ -1,5 +1,5 @@ import React from 'react' import CloudIcon from 'uiSrc/assets/img/oauth/cloud.svg?react' -import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const Cloud = (props: IconProps) => diff --git a/redisinsight/ui/src/components/base/icons/Copilot.tsx b/redisinsight/ui/src/components/base/icons/Copilot.tsx index eb9d973bb6..4bacd530c6 100644 --- a/redisinsight/ui/src/components/base/icons/Copilot.tsx +++ b/redisinsight/ui/src/components/base/icons/Copilot.tsx @@ -1,6 +1,6 @@ import React from 'react' import CopilotSvg from 'uiSrc/assets/img/icons/copilot.svg?react' -import { Icon, IconProps } from './Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const CopilotIcon = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/DislikeIcon.tsx b/redisinsight/ui/src/components/base/icons/DislikeIcon.tsx new file mode 100644 index 0000000000..6d9593d532 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/DislikeIcon.tsx @@ -0,0 +1,8 @@ +import React from 'react' + +import DislikeSvg from 'uiSrc/assets/img/icons/dislike.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const DislikeIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/ExtendIcon.tsx b/redisinsight/ui/src/components/base/icons/ExtendIcon.tsx index 1642725d7e..8f744603d1 100644 --- a/redisinsight/ui/src/components/base/icons/ExtendIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/ExtendIcon.tsx @@ -1,6 +1,6 @@ import React from 'react' import ExtendSvg from 'uiSrc/assets/img/icons/extend.svg?react' -import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const ExtendIcon = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/Github.tsx b/redisinsight/ui/src/components/base/icons/Github.tsx deleted file mode 100644 index 57ff6d18c9..0000000000 --- a/redisinsight/ui/src/components/base/icons/Github.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' -import GithubIcon from 'uiSrc/assets/img/sidebar/github.svg?react' -import { Icon, IconProps } from './Icon' - -export const Github = (props: IconProps) => ( - -) diff --git a/redisinsight/ui/src/components/base/icons/Group.tsx b/redisinsight/ui/src/components/base/icons/Group.tsx index 58d33a7667..9543dd8c20 100644 --- a/redisinsight/ui/src/components/base/icons/Group.tsx +++ b/redisinsight/ui/src/components/base/icons/Group.tsx @@ -1,6 +1,6 @@ import React from 'react' import GroupModeIcon from 'uiSrc/assets/img/icons/group_mode.svg?react' -import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const Group = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/Icon.tsx b/redisinsight/ui/src/components/base/icons/Icon.tsx index 4a56169f14..574d4df4e1 100644 --- a/redisinsight/ui/src/components/base/icons/Icon.tsx +++ b/redisinsight/ui/src/components/base/icons/Icon.tsx @@ -21,7 +21,7 @@ const sizesMap = { */ function isValidIconColor( theme: ReturnType, - color: string, + color: string | number | symbol, ): color is keyof typeof theme.semantic.color.icon { return color in theme.semantic.color.icon } diff --git a/redisinsight/ui/src/components/base/icons/LikeIcon.tsx b/redisinsight/ui/src/components/base/icons/LikeIcon.tsx new file mode 100644 index 0000000000..e155111278 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/LikeIcon.tsx @@ -0,0 +1,6 @@ +import React from 'react' + +import LikeSvg from 'uiSrc/assets/img/icons/like.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const LikeIcon = (props: IconProps) => diff --git a/redisinsight/ui/src/components/base/icons/MinusInCircle.tsx b/redisinsight/ui/src/components/base/icons/MinusInCircle.tsx index 166bbb2ed0..1899f2b836 100644 --- a/redisinsight/ui/src/components/base/icons/MinusInCircle.tsx +++ b/redisinsight/ui/src/components/base/icons/MinusInCircle.tsx @@ -1,6 +1,6 @@ import React from 'react' import MinusInCircleSvg from 'uiSrc/assets/img/icons/minus_in_circle.svg?react' -import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const MinusInCircleIcon = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/Play.tsx b/redisinsight/ui/src/components/base/icons/Play.tsx index 2ee96b9f5c..e185f19ed9 100644 --- a/redisinsight/ui/src/components/base/icons/Play.tsx +++ b/redisinsight/ui/src/components/base/icons/Play.tsx @@ -1,5 +1,5 @@ import React from 'react' import PlayIcon from 'uiSrc/assets/img/icons/play.svg?react' -import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const Play = (props: IconProps) => diff --git a/redisinsight/ui/src/components/base/icons/PlayFilled.tsx b/redisinsight/ui/src/components/base/icons/PlayFilled.tsx index f65d1679c7..b7ada37fe2 100644 --- a/redisinsight/ui/src/components/base/icons/PlayFilled.tsx +++ b/redisinsight/ui/src/components/base/icons/PlayFilled.tsx @@ -1,6 +1,6 @@ import React from 'react' import PlayFilledSvg from 'uiSrc/assets/img/icons/play-filled.svg?react' -import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const PlayFilledIcon = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/PlusInCircle.tsx b/redisinsight/ui/src/components/base/icons/PlusInCircle.tsx index 2e93fc5d86..3e55fa4899 100644 --- a/redisinsight/ui/src/components/base/icons/PlusInCircle.tsx +++ b/redisinsight/ui/src/components/base/icons/PlusInCircle.tsx @@ -1,6 +1,6 @@ import React from 'react' import PlusInCircleSvg from 'uiSrc/assets/img/icons/plus_in_circle.svg?react' -import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const PlusInCircle = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/RIResetIcon.tsx b/redisinsight/ui/src/components/base/icons/RIResetIcon.tsx index 806ad17859..fe7f8f1a46 100644 --- a/redisinsight/ui/src/components/base/icons/RIResetIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/RIResetIcon.tsx @@ -1,6 +1,6 @@ import React from 'react' import ResetSvg from 'uiSrc/assets/img/rdi/reset.svg?react' -import { Icon, IconProps } from './Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RiResetIcon = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/RIRocketIcon.tsx b/redisinsight/ui/src/components/base/icons/RIRocketIcon.tsx index 5c2f7689a1..046c07fd0f 100644 --- a/redisinsight/ui/src/components/base/icons/RIRocketIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/RIRocketIcon.tsx @@ -1,6 +1,6 @@ import React from 'react' import RocketSvg from 'uiSrc/assets/img/rdi/rocket.svg?react' -import { Icon, IconProps } from './Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RiRocketIcon = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/RIStopIcon.tsx b/redisinsight/ui/src/components/base/icons/RIStopIcon.tsx index ebb45c8112..65598cd0e3 100644 --- a/redisinsight/ui/src/components/base/icons/RIStopIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/RIStopIcon.tsx @@ -1,6 +1,6 @@ import React from 'react' import StopIconSvg from 'uiSrc/assets/img/rdi/stopFilled.svg?react' -import { Icon, IconProps } from './Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RiStopIcon = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/RawMode.tsx b/redisinsight/ui/src/components/base/icons/RawMode.tsx index 1db8d9ba04..23333b28e4 100644 --- a/redisinsight/ui/src/components/base/icons/RawMode.tsx +++ b/redisinsight/ui/src/components/base/icons/RawMode.tsx @@ -1,6 +1,6 @@ import React from 'react' import RawModeIcon from 'uiSrc/assets/img/icons/raw_mode.svg?react' -import { Icon, IconProps } from './Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RawMode = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/RedisLogo.tsx b/redisinsight/ui/src/components/base/icons/RedisLogo.tsx index 31098289b2..302e8b45f6 100644 --- a/redisinsight/ui/src/components/base/icons/RedisLogo.tsx +++ b/redisinsight/ui/src/components/base/icons/RedisLogo.tsx @@ -1,6 +1,6 @@ import React from 'react' import RedisLogoSvg from 'uiSrc/assets/img/logo_small.svg?react' -import { Icon, IconProps } from './Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisLogo = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/RedisLogoFullIcon.tsx b/redisinsight/ui/src/components/base/icons/RedisLogoFullIcon.tsx new file mode 100644 index 0000000000..7bd408eee1 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/RedisLogoFullIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisLogoSvg from 'uiSrc/assets/img/logo.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisLogoFullIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/ShrinkIcon.tsx b/redisinsight/ui/src/components/base/icons/ShrinkIcon.tsx index 3ba2e466d3..f9e2c47e7e 100644 --- a/redisinsight/ui/src/components/base/icons/ShrinkIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/ShrinkIcon.tsx @@ -1,6 +1,6 @@ import React from 'react' import ShrinkSvg from 'uiSrc/assets/img/icons/shrink.svg?react' -import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const ShrinkIcon = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/SnoozeIcon.tsx b/redisinsight/ui/src/components/base/icons/SnoozeIcon.tsx index b55243db55..b5a51ebe1c 100644 --- a/redisinsight/ui/src/components/base/icons/SnoozeIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/SnoozeIcon.tsx @@ -1,6 +1,6 @@ import React from 'react' import SnoozeSvg from 'uiSrc/assets/img/icons/snooze.svg?react' -import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const SnoozeIcon = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/StarsIcon.tsx b/redisinsight/ui/src/components/base/icons/StarsIcon.tsx index bbaefa4ea0..37ad20c783 100644 --- a/redisinsight/ui/src/components/base/icons/StarsIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/StarsIcon.tsx @@ -1,6 +1,6 @@ import React from 'react' import StarsSvg from 'uiSrc/assets/img/icons/stars.svg?react' -import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const StarsIcon = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/ThreeDotsIcon.tsx b/redisinsight/ui/src/components/base/icons/ThreeDotsIcon.tsx index ee680ceaeb..d6054ce78c 100644 --- a/redisinsight/ui/src/components/base/icons/ThreeDotsIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/ThreeDotsIcon.tsx @@ -1,7 +1,7 @@ import React from 'react' import ThreeDotsSvg from 'uiSrc/assets/img/icons/three_dots.svg?react' -import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const ThreeDotsIcon = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/Trigger.tsx b/redisinsight/ui/src/components/base/icons/Trigger.tsx index 2ccb87b159..78bbb8111f 100644 --- a/redisinsight/ui/src/components/base/icons/Trigger.tsx +++ b/redisinsight/ui/src/components/base/icons/Trigger.tsx @@ -1,6 +1,6 @@ import React from 'react' import TriggerIcon from 'uiSrc/assets/img/bulb.svg?react' -import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const Trigger = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/UserInCircle.tsx b/redisinsight/ui/src/components/base/icons/UserInCircle.tsx index 8f53869d17..6cda700320 100644 --- a/redisinsight/ui/src/components/base/icons/UserInCircle.tsx +++ b/redisinsight/ui/src/components/base/icons/UserInCircle.tsx @@ -1,6 +1,6 @@ import React from 'react' import UserInCircleSvg from 'uiSrc/assets/img/icons/user_in_circle.svg?react' -import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon' +import { Icon, IconProps } from 'uiSrc/components/base/icons' export const UserInCircle = (props: IconProps) => ( diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index 474942cd92..b349d7fb71 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -1,17 +1,20 @@ +export type { IconProps } from './Icon' export { BannedIcon } from './BannedIcon' export { BulkActions } from './BulkActions' export { Cloud } from './Cloud' export { CopilotIcon } from './Copilot' +export { DislikeIcon } from './DislikeIcon' export { ExtendIcon } from './ExtendIcon' -export { Github } from './Github' export { Group as GroupModeIcon } from './Group' export { Icon } from './Icon' +export { LikeIcon } from './LikeIcon' export { MinusInCircleIcon } from './MinusInCircle' export { Play as PlayIcon } from './Play' export { PlayFilledIcon } from './PlayFilled' export { PlusInCircle as PlusInCircleIcon } from './PlusInCircle' export { RawMode as RawModeIcon } from './RawMode' export { RedisLogo } from './RedisLogo' +export { RedisLogoFullIcon } from './RedisLogoFullIcon' export { RiResetIcon } from './RIResetIcon' export { RiRocketIcon } from './RIRocketIcon' export { RiStopIcon } from './RIStopIcon' @@ -22,6 +25,10 @@ export { ThreeDotsIcon } from './ThreeDotsIcon' export { Trigger } from './Trigger' export { UserInCircle } from './UserInCircle' +export * from './modules' +export * from './options' +export * from './sidebar' + export * from '@redis-ui/icons' export { LoaderLargeIcon, diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisAIDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisAIDarkIcon.tsx new file mode 100644 index 0000000000..e8b2b2ec3f --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisAIDarkIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisAIDark from 'uiSrc/assets/img/modules/RedisAIDark.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisAIDarkIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisAILightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisAILightIcon.tsx new file mode 100644 index 0000000000..a0e1d2baac --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisAILightIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisAILight from 'uiSrc/assets/img/modules/RedisAILight.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisAILightIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisBloomDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisBloomDarkIcon.tsx new file mode 100644 index 0000000000..5ffb7357f5 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisBloomDarkIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisBloomDark from 'uiSrc/assets/img/modules/RedisBloomDark.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisBloomDarkIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisBloomLightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisBloomLightIcon.tsx new file mode 100644 index 0000000000..33c84e78f7 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisBloomLightIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisBloomLight from 'uiSrc/assets/img/modules/RedisBloomLight.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisBloomLightIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisGears2DarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisGears2DarkIcon.tsx new file mode 100644 index 0000000000..4bd6288acb --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisGears2DarkIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisGears2Dark from 'uiSrc/assets/img/modules/RedisGears2Dark.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisGears2DarkIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisGears2LightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisGears2LightIcon.tsx new file mode 100644 index 0000000000..91a0145fb1 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisGears2LightIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisGears2Light from 'uiSrc/assets/img/modules/RedisGears2Light.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisGears2LightIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisGearsDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisGearsDarkIcon.tsx new file mode 100644 index 0000000000..100cb50ebd --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisGearsDarkIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisGearsDark from 'uiSrc/assets/img/modules/RedisGearsDark.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisGearsDarkIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisGearsLightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisGearsLightIcon.tsx new file mode 100644 index 0000000000..3540eacc18 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisGearsLightIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisGearsLight from 'uiSrc/assets/img/modules/RedisGearsLight.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisGearsLightIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisGraphDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisGraphDarkIcon.tsx new file mode 100644 index 0000000000..8af0561709 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisGraphDarkIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisGraphDark from 'uiSrc/assets/img/modules/RedisGraphDark.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisGraphDarkIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisGraphLightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisGraphLightIcon.tsx new file mode 100644 index 0000000000..1f40802b16 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisGraphLightIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisGraphLight from 'uiSrc/assets/img/modules/RedisGraphLight.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisGraphLightIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisJSONDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisJSONDarkIcon.tsx new file mode 100644 index 0000000000..1fdbbcfcb8 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisJSONDarkIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisJSONDark from 'uiSrc/assets/img/modules/RedisJSONDark.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisJSONDarkIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisJSONLightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisJSONLightIcon.tsx new file mode 100644 index 0000000000..9607e71d94 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisJSONLightIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisJSONLight from 'uiSrc/assets/img/modules/RedisJSONLight.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisJSONLightIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisSearchDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisSearchDarkIcon.tsx new file mode 100644 index 0000000000..5a6b89d923 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisSearchDarkIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisSearchDark from 'uiSrc/assets/img/modules/RedisSearchDark.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisSearchDarkIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisSearchLightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisSearchLightIcon.tsx new file mode 100644 index 0000000000..5a37c19f7f --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisSearchLightIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisSearchLight from 'uiSrc/assets/img/modules/RedisSearchLight.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisSearchLightIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesDarkIcon.tsx new file mode 100644 index 0000000000..6ad82f31f7 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesDarkIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisTimeSeriesDark from 'uiSrc/assets/img/modules/RedisTimeSeriesDark.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisTimeSeriesDarkIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesLightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesLightIcon.tsx new file mode 100644 index 0000000000..02bc37669f --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesLightIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisTimeSeriesLight from 'uiSrc/assets/img/modules/RedisTimeSeriesLight.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisTimeSeriesLightIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/UnknownDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/UnknownDarkIcon.tsx new file mode 100644 index 0000000000..1f94a12641 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/UnknownDarkIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import UnknownDark from 'uiSrc/assets/img/modules/UnknownDark.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const UnknownDarkIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/UnknownLightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/UnknownLightIcon.tsx new file mode 100644 index 0000000000..207e963547 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/UnknownLightIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import UnknownLight from 'uiSrc/assets/img/modules/UnknownLight.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const UnknownLightIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/index.ts b/redisinsight/ui/src/components/base/icons/modules/index.ts new file mode 100644 index 0000000000..503e944130 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/index.ts @@ -0,0 +1,18 @@ +export { RedisAIDarkIcon } from './RedisAIDarkIcon' +export { RedisAILightIcon } from './RedisAILightIcon' +export { RedisBloomDarkIcon } from './RedisBloomDarkIcon' +export { RedisBloomLightIcon } from './RedisBloomLightIcon' +export { RedisGears2DarkIcon } from './RedisGears2DarkIcon' +export { RedisGears2LightIcon } from './RedisGears2LightIcon' +export { RedisGearsDarkIcon } from './RedisGearsDarkIcon' +export { RedisGearsLightIcon } from './RedisGearsLightIcon' +export { RedisGraphDarkIcon } from './RedisGraphDarkIcon' +export { RedisGraphLightIcon } from './RedisGraphLightIcon' +export { RedisJSONDarkIcon } from './RedisJSONDarkIcon' +export { RedisJSONLightIcon } from './RedisJSONLightIcon' +export { RedisSearchDarkIcon } from './RedisSearchDarkIcon' +export { RedisSearchLightIcon } from './RedisSearchLightIcon' +export { RedisTimeSeriesDarkIcon } from './RedisTimeSeriesDarkIcon' +export { RedisTimeSeriesLightIcon } from './RedisTimeSeriesLightIcon' +export { UnknownDarkIcon } from './UnknownDarkIcon' +export { UnknownLightIcon } from './UnknownLightIcon' diff --git a/redisinsight/ui/src/components/base/icons/options/ActiveActiveDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/options/ActiveActiveDarkIcon.tsx new file mode 100644 index 0000000000..ae2c04fbef --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/options/ActiveActiveDarkIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import ActiveActiveDark from 'uiSrc/assets/img/options/Active-ActiveDark.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const ActiveActiveDarkIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/options/ActiveActiveLightIcon.tsx b/redisinsight/ui/src/components/base/icons/options/ActiveActiveLightIcon.tsx new file mode 100644 index 0000000000..69364b0fbf --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/options/ActiveActiveLightIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import ActiveActiveLight from 'uiSrc/assets/img/options/Active-ActiveLight.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const ActiveActiveLightIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/options/RedisOnFlashDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/options/RedisOnFlashDarkIcon.tsx new file mode 100644 index 0000000000..4a80756851 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/options/RedisOnFlashDarkIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisOnFlashDark from 'uiSrc/assets/img/options/RedisOnFlashDark.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisOnFlashDarkIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/options/RedisOnFlashLightIcon.tsx b/redisinsight/ui/src/components/base/icons/options/RedisOnFlashLightIcon.tsx new file mode 100644 index 0000000000..63e23fe4c9 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/options/RedisOnFlashLightIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RedisOnFlashLight from 'uiSrc/assets/img/options/RedisOnFlashLight.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RedisOnFlashLightIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/options/index.ts b/redisinsight/ui/src/components/base/icons/options/index.ts new file mode 100644 index 0000000000..248a5efa0d --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/options/index.ts @@ -0,0 +1,4 @@ +export { ActiveActiveDarkIcon } from './ActiveActiveDarkIcon' +export { ActiveActiveLightIcon } from './ActiveActiveLightIcon' +export { RedisOnFlashDarkIcon } from './RedisOnFlashDarkIcon' +export { RedisOnFlashLightIcon } from './RedisOnFlashLightIcon' diff --git a/redisinsight/ui/src/components/base/icons/sidebar/BrowserActiveIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/BrowserActiveIcon.tsx new file mode 100644 index 0000000000..4863ad69c4 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/BrowserActiveIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import BrowserActiveSvg from 'uiSrc/assets/img/sidebar/browser_active.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const BrowserActiveIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/BrowserIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/BrowserIcon.tsx new file mode 100644 index 0000000000..5101626e37 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/BrowserIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import BrowserSvg from 'uiSrc/assets/img/sidebar/browser.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const BrowserIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/GithubIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/GithubIcon.tsx new file mode 100644 index 0000000000..0838fcbc36 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/GithubIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import GithubSvg from 'uiSrc/assets/img/sidebar/github.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const GithubIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/PipelineManagementActiveIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/PipelineManagementActiveIcon.tsx new file mode 100644 index 0000000000..749b25b573 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/PipelineManagementActiveIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import PipelineManagementActiveSvg from 'uiSrc/assets/img/sidebar/pipeline_active.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const PipelineManagementActiveIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/PipelineManagementIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/PipelineManagementIcon.tsx new file mode 100644 index 0000000000..3f89138b4f --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/PipelineManagementIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import PipelineManagementSvg from 'uiSrc/assets/img/sidebar/pipeline.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const PipelineManagementIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/PipelineStatisticsActiveIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/PipelineStatisticsActiveIcon.tsx new file mode 100644 index 0000000000..8a5c85229d --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/PipelineStatisticsActiveIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import PipelineStatisticsActiveSvg from 'uiSrc/assets/img/sidebar/pipeline_statistics_active.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const PipelineStatisticsActiveIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/PipelineStatisticsIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/PipelineStatisticsIcon.tsx new file mode 100644 index 0000000000..2bcfc589aa --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/PipelineStatisticsIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import PipelineStatisticsSvg from 'uiSrc/assets/img/sidebar/pipeline_statistics.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const PipelineStatisticsIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/PubSubActiveIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/PubSubActiveIcon.tsx new file mode 100644 index 0000000000..b3be249335 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/PubSubActiveIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import PubSubActiveSvg from 'uiSrc/assets/img/sidebar/pubsub_active.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const PubSubActiveIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/PubSubIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/PubSubIcon.tsx new file mode 100644 index 0000000000..2112bb59ed --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/PubSubIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import PubSubSvg from 'uiSrc/assets/img/sidebar/pubsub.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const PubSubIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/SettingsActiveIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/SettingsActiveIcon.tsx new file mode 100644 index 0000000000..584770b4a7 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/SettingsActiveIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import SettingsActiveSvg from 'uiSrc/assets/img/sidebar/settings_active.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const SettingsActiveIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/SettingsIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/SettingsIcon.tsx new file mode 100644 index 0000000000..5a7e13960a --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/SettingsIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import SettingsSvg from 'uiSrc/assets/img/sidebar/settings.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const SettingsIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/SlowLogActiveIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/SlowLogActiveIcon.tsx new file mode 100644 index 0000000000..9ebcf2ebbe --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/SlowLogActiveIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import SlowLogActiveSvg from 'uiSrc/assets/img/sidebar/slowlog_active.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const SlowLogActiveIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/SlowLogIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/SlowLogIcon.tsx new file mode 100644 index 0000000000..01ffbeab79 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/SlowLogIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import SlowLogSvg from 'uiSrc/assets/img/sidebar/slowlog.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const SlowLogIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/WorkbenchActiveIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/WorkbenchActiveIcon.tsx new file mode 100644 index 0000000000..c33762b620 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/WorkbenchActiveIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import WorkbenchActiveSvg from 'uiSrc/assets/img/sidebar/workbench_active.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const WorkbenchActiveIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/WorkbenchIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/WorkbenchIcon.tsx new file mode 100644 index 0000000000..c68518868f --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/WorkbenchIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import WorkbenchSvg from 'uiSrc/assets/img/sidebar/workbench.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const WorkbenchIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/index.ts b/redisinsight/ui/src/components/base/icons/sidebar/index.ts new file mode 100644 index 0000000000..46232793f2 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/sidebar/index.ts @@ -0,0 +1,15 @@ +export { GithubIcon } from './GithubIcon' +export { SettingsIcon as RISettingsIcon } from './SettingsIcon' +export { SettingsActiveIcon } from './SettingsActiveIcon' +export { BrowserIcon } from './BrowserIcon' +export { BrowserActiveIcon } from './BrowserActiveIcon' +export { WorkbenchIcon } from './WorkbenchIcon' +export { WorkbenchActiveIcon } from './WorkbenchActiveIcon' +export { SlowLogIcon } from './SlowLogIcon' +export { SlowLogActiveIcon } from './SlowLogActiveIcon' +export { PubSubIcon } from './PubSubIcon' +export { PubSubActiveIcon } from './PubSubActiveIcon' +export { PipelineManagementIcon } from './PipelineManagementIcon' +export { PipelineManagementActiveIcon } from './PipelineManagementActiveIcon' +export { PipelineStatisticsIcon } from './PipelineStatisticsIcon' +export { PipelineStatisticsActiveIcon } from './PipelineStatisticsActiveIcon' diff --git a/redisinsight/ui/src/components/code-block/CodeBlock.tsx b/redisinsight/ui/src/components/code-block/CodeBlock.tsx index 4c181e9fa9..da48d64cfa 100644 --- a/redisinsight/ui/src/components/code-block/CodeBlock.tsx +++ b/redisinsight/ui/src/components/code-block/CodeBlock.tsx @@ -1,7 +1,9 @@ import React, { HTMLAttributes, useMemo } from 'react' import cx from 'classnames' -import { EuiButtonIcon, useInnerText } from '@elastic/eui' +import { useInnerText } from '@elastic/eui' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CopyIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export interface Props extends HTMLAttributes { @@ -29,10 +31,10 @@ const CodeBlock = (props: Props) => { {children} {isCopyable && ( - diff --git a/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx b/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx index 7d45d0f3fe..b72c96ae8b 100644 --- a/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx +++ b/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx @@ -1,6 +1,6 @@ /* eslint-disable sonarjs/no-nested-template-literals */ import React, { useContext } from 'react' -import { EuiButtonIcon, EuiIcon, EuiTextColor, EuiToolTip } from '@elastic/eui' +import { EuiIcon, EuiTextColor, EuiToolTip } from '@elastic/eui' import cx from 'classnames' import { Theme } from 'uiSrc/constants' @@ -8,9 +8,9 @@ import { getModule, truncateText } from 'uiSrc/utils' import { IDatabaseModule, sortModules } from 'uiSrc/utils/modules' import { ThemeContext } from 'uiSrc/contexts/themeContext' -import UnknownLight from 'uiSrc/assets/img/modules/UnknownLight.svg' -import UnknownDark from 'uiSrc/assets/img/modules/UnknownDark.svg' import { DEFAULT_MODULES_INFO } from 'uiSrc/constants/modules' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { UnknownDarkIcon, UnknownLightIcon } from 'uiSrc/components/base/icons' import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module' import styles from './styles.module.scss' @@ -59,7 +59,7 @@ const DatabaseListModules = React.memo((props: Props) => { const content = `${moduleAlias}${semanticVersion || version ? ` v. ${semanticVersion || version}` : ''}` if (!icon && !abbreviation) { - icon = theme === Theme.Dark ? UnknownDark : UnknownLight + icon = theme === Theme.Dark ? UnknownDarkIcon : UnknownLightIcon } mainContent.push({ icon, content, abbreviation, moduleName }) @@ -114,8 +114,8 @@ const DatabaseListModules = React.memo((props: Props) => { ) => ( {icon ? ( - handleCopy(content)} data-testid={`${content}_module`} diff --git a/redisinsight/ui/src/components/database-list-options/DatabaseListOptions.tsx b/redisinsight/ui/src/components/database-list-options/DatabaseListOptions.tsx index d258f89ee8..537611d852 100644 --- a/redisinsight/ui/src/components/database-list-options/DatabaseListOptions.tsx +++ b/redisinsight/ui/src/components/database-list-options/DatabaseListOptions.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react' import { isString } from 'lodash' -import { EuiButtonIcon, EuiToolTip, IconType } from '@elastic/eui' +import { EuiToolTip, IconType } from '@elastic/eui' import { AddRedisClusterDatabaseOptions, @@ -11,11 +11,13 @@ import { import { Theme } from 'uiSrc/constants' import { ThemeContext } from 'uiSrc/contexts/themeContext' -import ActiveActiveDark from 'uiSrc/assets/img/options/Active-ActiveDark.svg' -import ActiveActiveLight from 'uiSrc/assets/img/options/Active-ActiveLight.svg' -import RedisOnFlashDark from 'uiSrc/assets/img/options/RedisOnFlashDark.svg' -import RedisOnFlashLight from 'uiSrc/assets/img/options/RedisOnFlashLight.svg' - +import { + ActiveActiveDarkIcon, + ActiveActiveLightIcon, + RedisOnFlashDarkIcon, + RedisOnFlashLightIcon, +} from 'uiSrc/components/base/icons' +import { IconButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' interface Props { @@ -38,7 +40,7 @@ const DatabaseListOptions = ({ options }: Props) => { const OPTIONS_CONTENT = { [AddRedisClusterDatabaseOptions.ActiveActive]: { - icon: theme === Theme.Dark ? ActiveActiveDark : ActiveActiveLight, + icon: theme === Theme.Dark ? ActiveActiveDarkIcon : ActiveActiveLightIcon, text: DATABASE_LIST_OPTIONS_TEXT[ AddRedisClusterDatabaseOptions.ActiveActive ], @@ -58,7 +60,7 @@ const DatabaseListOptions = ({ options }: Props) => { ], }, [AddRedisClusterDatabaseOptions.Flash]: { - icon: theme === Theme.Dark ? RedisOnFlashDark : RedisOnFlashLight, + icon: theme === Theme.Dark ? RedisOnFlashDarkIcon : RedisOnFlashLightIcon, text: DATABASE_LIST_OPTIONS_TEXT[AddRedisClusterDatabaseOptions.Flash], }, [AddRedisClusterDatabaseOptions.Replication]: { @@ -96,8 +98,8 @@ const DatabaseListOptions = ({ options }: Props) => { anchorClassName={styles.tooltip} > {icon ? ( - handleCopy(contentProp)} aria-labelledby={`${contentProp}_module`} /> diff --git a/redisinsight/ui/src/components/group-badge/GroupBadge.tsx b/redisinsight/ui/src/components/group-badge/GroupBadge.tsx index 0af37427a8..400028fa0f 100644 --- a/redisinsight/ui/src/components/group-badge/GroupBadge.tsx +++ b/redisinsight/ui/src/components/group-badge/GroupBadge.tsx @@ -1,9 +1,11 @@ import cx from 'classnames' import React from 'react' -import { EuiBadge, EuiButtonIcon, EuiText } from '@elastic/eui' +import { EuiBadge, EuiText } from '@elastic/eui' import { CommandGroup, KeyTypes, GROUP_TYPES_COLORS } from 'uiSrc/constants' import { getGroupTypeDisplay } from 'uiSrc/utils' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CancelSlimIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export interface Props { @@ -42,9 +44,9 @@ const GroupBadge = ({ )} {onDelete && ( - onDelete(type)} diff --git a/redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.tsx b/redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.tsx index ae24d67b1b..0543462379 100644 --- a/redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.tsx +++ b/redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.tsx @@ -18,9 +18,8 @@ import MessageInfoIcon from 'uiSrc/assets/img/icons/help_illus.svg' import { DEFAULT_MODULES_INFO } from 'uiSrc/constants/modules' import { Theme } from 'uiSrc/constants' import { ThemeContext } from 'uiSrc/contexts/themeContext' -import UnknownDark from 'uiSrc/assets/img/modules/UnknownDark.svg' -import UnknownLight from 'uiSrc/assets/img/modules/UnknownLight.svg' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { UnknownDarkIcon, UnknownLightIcon } from 'uiSrc/components/base/icons' import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module' import styles from './styles.module.scss' @@ -50,7 +49,7 @@ const ShortInstanceInfo = ({ info, databases, modules }: Props) => { return icon } - return theme === Theme.Dark ? UnknownDark : UnknownLight + return theme === Theme.Dark ? UnknownDarkIcon : UnknownLightIcon } return ( @@ -64,10 +63,7 @@ const ShortInstanceInfo = ({ info, databases, modules }: Props) => {
{databases > 1 && ( - + {actions?.map((action, index) => ( - + {action} ))} - onCloseActionBar()} data-testid="cancel-selecting" diff --git a/redisinsight/ui/src/components/item-list/components/action-bar/styles.module.scss b/redisinsight/ui/src/components/item-list/components/action-bar/styles.module.scss index b02fdeaab3..83de949e2f 100644 --- a/redisinsight/ui/src/components/item-list/components/action-bar/styles.module.scss +++ b/redisinsight/ui/src/components/item-list/components/action-bar/styles.module.scss @@ -31,7 +31,7 @@ } .cross { - :global(.euiButtonIcon) { + :global(button) { margin-left: 15px; } svg { diff --git a/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.spec.tsx b/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.spec.tsx index aea7ee10ad..e168942f65 100644 --- a/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.spec.tsx +++ b/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.spec.tsx @@ -105,17 +105,17 @@ describe('RedisUploadButton', () => { }) it('should show error when file is not exists', async () => { - const checkResourseMock = jest.fn().mockRejectedValue('') - ;(checkResourse as jest.Mock).mockImplementation(checkResourseMock) + const checkResourceMock = jest.fn().mockRejectedValue('') + ;(checkResourse as jest.Mock).mockImplementation(checkResourceMock) render() fireEvent.click(screen.getByTestId('upload-data-bulk-btn')) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('download-redis-upload-file')) }) - expect(checkResourseMock).toBeCalledWith('http://localhost:5001/text') + expect(checkResourceMock).toHaveBeenCalledWith('http://localhost:5001/text') expect(store.getActions()).toEqual([addErrorNotification(error)]) }) @@ -128,7 +128,7 @@ describe('RedisUploadButton', () => { fireEvent.click(screen.getByTestId('upload-data-bulk-btn')) - expect(sendEventTelemetry).toBeCalledWith({ + expect(sendEventTelemetry).toHaveBeenCalledWith({ event: TelemetryEvent.EXPLORE_PANEL_DATA_UPLOAD_CLICKED, eventData: { databaseId: 'instanceId', @@ -136,11 +136,11 @@ describe('RedisUploadButton', () => { }) ;(sendEventTelemetry as jest.Mock).mockRestore() - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('download-redis-upload-file')) }) - expect(sendEventTelemetry).toBeCalledWith({ + expect(sendEventTelemetry).toHaveBeenCalledWith({ event: TelemetryEvent.EXPLORE_PANEL_DOWNLOAD_BULK_FILE_CLICKED, eventData: { databaseId: 'instanceId', @@ -150,7 +150,7 @@ describe('RedisUploadButton', () => { fireEvent.click(screen.getByTestId('upload-data-bulk-apply-btn')) - expect(sendEventTelemetry).toBeCalledWith({ + expect(sendEventTelemetry).toHaveBeenCalledWith({ event: TelemetryEvent.EXPLORE_PANEL_DATA_UPLOAD_SUBMITTED, eventData: { databaseId: 'instanceId', diff --git a/redisinsight/ui/src/components/message-bar/MessageBar.tsx b/redisinsight/ui/src/components/message-bar/MessageBar.tsx index c97d4752cc..1f86cb1528 100644 --- a/redisinsight/ui/src/components/message-bar/MessageBar.tsx +++ b/redisinsight/ui/src/components/message-bar/MessageBar.tsx @@ -1,7 +1,8 @@ import React, { useEffect, useState } from 'react' -import { EuiButtonIcon } from '@elastic/eui' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { CancelSlimIcon } from 'uiSrc/components/base/icons' +import { IconButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -23,9 +24,8 @@ const MessageBar = ({ children, opened }: Props) => { {children} - setIsOpen(false)} data-testid="close-button" diff --git a/redisinsight/ui/src/components/monaco-editor/components/dedicated-editor/DedicatedEditor.tsx b/redisinsight/ui/src/components/monaco-editor/components/dedicated-editor/DedicatedEditor.tsx index 4f5e341bbb..46cdd0a3c5 100644 --- a/redisinsight/ui/src/components/monaco-editor/components/dedicated-editor/DedicatedEditor.tsx +++ b/redisinsight/ui/src/components/monaco-editor/components/dedicated-editor/DedicatedEditor.tsx @@ -4,11 +4,7 @@ import AutoSizer, { Size } from 'react-virtualized-auto-sizer' import ReactMonacoEditor, { monaco as monacoEditor } from 'react-monaco-editor' import { Rnd } from 'react-rnd' import cx from 'classnames' -import { - EuiButtonIcon, - EuiSuperSelect, - EuiSuperSelectOption, -} from '@elastic/eui' +import { EuiSuperSelect, EuiSuperSelectOption } from '@elastic/eui' import { decoration, @@ -27,6 +23,8 @@ import { import { IEditorMount } from 'uiSrc/pages/workbench/interfaces' import { ThemeContext } from 'uiSrc/contexts/themeContext' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CancelSlimIcon, CheckThinIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export interface Props { @@ -298,19 +296,15 @@ const DedicatedEditor = (props: Props) => { /> )}
- onCancel(selectedLang.id as DSL)} data-testid="cancel-btn" /> - ` + display: flex; + align-items: center; + justify-content: center; + border-radius: 0; + color: #bdc3d7 !important; + + & button { + color: #bdc3d7 !important; + cursor: default; + } + + &:hover button { + transform: translateY(-1px); + background-color: #34406f !important; + ${({ active }) => active && ActiveStyle} + } + + ${({ active }) => active && ActiveStyle} +` diff --git a/redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx b/redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx index 10fb29fffd..1725be1ffb 100644 --- a/redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx +++ b/redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx @@ -6,7 +6,6 @@ import { last } from 'lodash' import { useDispatch, useSelector } from 'react-redux' import { EuiBadge, - EuiButtonIcon, EuiIcon, EuiLink, EuiPageSideBar, @@ -26,21 +25,7 @@ import { } from 'uiSrc/slices/app/features' import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' import { connectedInstanceSelector as connectedRdiInstanceSelector } from 'uiSrc/slices/rdi/instances' -import SettingsSVG from 'uiSrc/assets/img/sidebar/settings.svg' -import SettingsActiveSVG from 'uiSrc/assets/img/sidebar/settings_active.svg' -import BrowserSVG from 'uiSrc/assets/img/sidebar/browser.svg' -import BrowserActiveSVG from 'uiSrc/assets/img/sidebar/browser_active.svg' -import WorkbenchSVG from 'uiSrc/assets/img/sidebar/workbench.svg' -import WorkbenchActiveSVG from 'uiSrc/assets/img/sidebar/workbench_active.svg' -import SlowLogSVG from 'uiSrc/assets/img/sidebar/slowlog.svg' -import SlowLogActiveSVG from 'uiSrc/assets/img/sidebar/slowlog_active.svg' -import PubSubSVG from 'uiSrc/assets/img/sidebar/pubsub.svg' -import PubSubActiveSVG from 'uiSrc/assets/img/sidebar/pubsub_active.svg' -import PipelineManagementSVG from 'uiSrc/assets/img/sidebar/pipeline.svg' -import PipelineManagementActiveSVG from 'uiSrc/assets/img/sidebar/pipeline_active.svg' -import PipelineStatisticsSvg from 'uiSrc/assets/img/sidebar/pipeline_statistics.svg' -import PipelineStatisticsActiveSvg from 'uiSrc/assets/img/sidebar/pipeline_statistics_active.svg' -import GithubSVG from 'uiSrc/assets/img/sidebar/github.svg' + import Divider from 'uiSrc/components/divider/Divider' import { renderOnboardingTourWithChild } from 'uiSrc/utils/onboarding' import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' @@ -49,6 +34,25 @@ import { FeatureFlagComponent } from 'uiSrc/components' import { appContextSelector } from 'uiSrc/slices/app/context' import { AppWorkspace } from 'uiSrc/slices/interfaces' +import { IconButton, IconType } from 'uiSrc/components/base/forms/buttons' +import { + BrowserActiveIcon, + BrowserIcon, + PipelineManagementActiveIcon, + PipelineManagementIcon, + PipelineStatisticsActiveIcon, + PipelineStatisticsIcon, + PubSubActiveIcon, + PubSubIcon, + SettingsActiveIcon, + RISettingsIcon, + SlowLogActiveIcon, + SlowLogIcon, + WorkbenchActiveIcon, + WorkbenchIcon, + GithubIcon, +} from 'uiSrc/components/base/icons' +import { NavigationItemWrapper } from 'uiSrc/components/navigation-menu/NavigationItemWrapper' import CreateCloud from './components/create-cloud' import HelpMenu from './components/help-menu/HelpMenu' import NotificationMenu from './components/notifications-center' @@ -68,7 +72,7 @@ interface INavigations { connectedInstanceId?: string onClick: () => void getClassName: () => string - getIconType: () => string + getIconType: () => IconType onboard?: any featureFlag?: FeatureFlags } @@ -142,7 +146,7 @@ const NavigationMenu = () => { return cx(navigationButtonStyle, { [styles.active]: this.isActivePage }) }, getIconType() { - return this.isActivePage ? BrowserSVG : BrowserActiveSVG + return this.isActivePage ? BrowserIcon : BrowserActiveIcon }, onboard: ONBOARDING_FEATURES.BROWSER_PAGE, }, @@ -158,7 +162,7 @@ const NavigationMenu = () => { return cx(navigationButtonStyle, { [styles.active]: this.isActivePage }) }, getIconType() { - return this.isActivePage ? WorkbenchSVG : WorkbenchActiveSVG + return this.isActivePage ? WorkbenchIcon : WorkbenchActiveIcon }, onboard: ONBOARDING_FEATURES.WORKBENCH_PAGE, }, @@ -174,7 +178,7 @@ const NavigationMenu = () => { return cx(navigationButtonStyle, { [styles.active]: this.isActivePage }) }, getIconType() { - return this.isActivePage ? SlowLogActiveSVG : SlowLogSVG + return this.isActivePage ? SlowLogActiveIcon : SlowLogIcon }, featureFlag: FeatureFlags.envDependent, }, @@ -190,7 +194,7 @@ const NavigationMenu = () => { return cx(navigationButtonStyle, { [styles.active]: this.isActivePage }) }, getIconType() { - return this.isActivePage ? PubSubActiveSVG : PubSubSVG + return this.isActivePage ? PubSubActiveIcon : PubSubIcon }, onboard: ONBOARDING_FEATURES.PUB_SUB_PAGE, featureFlag: FeatureFlags.envDependent, @@ -210,8 +214,8 @@ const NavigationMenu = () => { }, getIconType() { return this.isActivePage - ? PipelineStatisticsActiveSvg - : PipelineStatisticsSvg + ? PipelineStatisticsActiveIcon + : PipelineStatisticsIcon }, }, { @@ -227,8 +231,8 @@ const NavigationMenu = () => { }, getIconType() { return this.isActivePage - ? PipelineManagementActiveSVG - : PipelineManagementSVG + ? PipelineManagementActiveIcon + : PipelineManagementIcon }, }, ] @@ -245,7 +249,7 @@ const NavigationMenu = () => { return cx(navigationButtonStyle, { [styles.active]: this.isActivePage }) }, getIconType() { - return this.isActivePage ? SettingsActiveSVG : SettingsSVG + return this.isActivePage ? SettingsActiveIcon : RISettingsIcon }, featureFlag: FeatureFlags.envDependent, }, @@ -267,13 +271,18 @@ const NavigationMenu = () => { >
- + > + + {nav.isBeta && ( BETA )} @@ -310,13 +319,18 @@ const NavigationMenu = () => { transformOnHover > - + > + + ) @@ -394,7 +408,7 @@ const NavigationMenu = () => { diff --git a/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx b/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx index e4045b4e29..d34159258f 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx @@ -1,5 +1,4 @@ import { - EuiButtonIcon, EuiIcon, EuiLink, EuiPopover, @@ -30,6 +29,9 @@ import { FeatureFlags } from 'uiSrc/constants' import { FeatureFlagComponent } from 'uiSrc/components' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { SupportIcon } from 'uiSrc/components/base/icons' +import { NavigationItemWrapper } from 'uiSrc/components/navigation-menu/NavigationItemWrapper' import navStyles from '../../styles.module.scss' import styles from './styles.module.scss' @@ -72,16 +74,19 @@ const HelpMenu = () => { } const HelpMenuButton = () => ( - setIsHelpMenuActive((value) => !value)} - data-testid="help-menu-button" - /> + > + setIsHelpMenuActive((value) => !value)} + data-testid="help-menu-button" + /> + ) return ( diff --git a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationMenu.tsx b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationMenu.tsx index 6c8600ae84..d349120d4f 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationMenu.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationMenu.tsx @@ -1,4 +1,4 @@ -import { EuiButtonIcon, EuiToolTip } from '@elastic/eui' +import { EuiToolTip } from '@elastic/eui' import cx from 'classnames' import React from 'react' import { useDispatch, useSelector } from 'react-redux' @@ -7,6 +7,9 @@ import { setIsCenterOpen, } from 'uiSrc/slices/app/notifications' +import { NavigationItemWrapper } from 'uiSrc/components/navigation-menu/NavigationItemWrapper' +import { NotificationsIcon } from 'uiSrc/components/base/icons' +import { IconButton } from 'uiSrc/components/base/forms/buttons' import NotificationCenter from './NotificationCenter' import PopoverNotification from './PopoverNotification' @@ -25,16 +28,19 @@ const NavButton = () => { } const Btn = ( - + > + + ) return ( diff --git a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/PopoverNotification/PopoverNotification.tsx b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/PopoverNotification/PopoverNotification.tsx index 86210def97..2030833e78 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/PopoverNotification/PopoverNotification.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/PopoverNotification/PopoverNotification.tsx @@ -1,4 +1,4 @@ -import { EuiButtonIcon, EuiPopover } from '@elastic/eui' +import { EuiPopover } from '@elastic/eui' import cx from 'classnames' import React, { useEffect, useRef, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' @@ -10,6 +10,8 @@ import { } from 'uiSrc/slices/app/notifications' import { IGlobalNotification } from 'uiSrc/slices/interfaces' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CancelSlimIcon } from 'uiSrc/components/base/icons' import Notification from '../Notification' import styles from '../styles.module.scss' @@ -106,9 +108,8 @@ const PopoverNotification = () => { className={styles.popoverNotification} data-testid="notification-popover" > - e.stopPropagation()} diff --git a/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/OAuthSocialButtons.tsx b/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/OAuthSocialButtons.tsx index ecf32ff30f..d9ef4a7ae9 100644 --- a/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/OAuthSocialButtons.tsx +++ b/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/OAuthSocialButtons.tsx @@ -1,5 +1,5 @@ -import React, { useState } from 'react' -import { EuiButtonEmpty, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui' +import React from 'react' +import { EuiIcon, EuiText, EuiToolTip } from '@elastic/eui' import cx from 'classnames' import { useSelector } from 'react-redux' import { oauthCloudPAgreementSelector } from 'uiSrc/slices/oauth/cloud' @@ -9,6 +9,8 @@ import GoogleIcon from 'uiSrc/assets/img/oauth/google.svg?react' import GithubIcon from 'uiSrc/assets/img/oauth/github.svg?react' import SsoIcon from 'uiSrc/assets/img/oauth/sso.svg?react' +import { EmptyButton } from 'uiSrc/components/base/forms/buttons' +import { FlexItem } from 'uiSrc/components/base/layout/flex' import styles from './styles.module.scss' export interface Props { @@ -60,22 +62,22 @@ const OAuthSocialButtons = (props: Props) => { content={agreement ? null : 'Acknowledge the agreement'} data-testid={`${label}-tooltip`} > - <> - { - onClick(strategy) - }} - data-testid={label} - aria-labelledby={label} - > + { + onClick(strategy) + }} + data-testid={label} + aria-labelledby={label} + > + {text} - - + + ))}
diff --git a/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/styles.module.scss b/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/styles.module.scss index e68d1be1d6..bfef0a5ebc 100644 --- a/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/styles.module.scss +++ b/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/styles.module.scss @@ -15,8 +15,7 @@ } &.inline { - :global(.euiButtonEmpty__text) { - display: flex; + :global(.RI-flex-item) { align-items: center; svg { diff --git a/redisinsight/ui/src/components/onboarding-tour/OnboardingTour.tsx b/redisinsight/ui/src/components/onboarding-tour/OnboardingTour.tsx index 4736f9849d..5ba4d2aeae 100644 --- a/redisinsight/ui/src/components/onboarding-tour/OnboardingTour.tsx +++ b/redisinsight/ui/src/components/onboarding-tour/OnboardingTour.tsx @@ -1,11 +1,6 @@ import React, { useEffect, useState } from 'react' -import { - EuiText, - EuiTourStep, - EuiButtonEmpty, - EuiButtonIcon, -} from '@elastic/eui' +import { EuiText, EuiTourStep } from '@elastic/eui' import { useDispatch } from 'react-redux' import cx from 'classnames' @@ -14,7 +9,10 @@ import { setOnboardNextStep, setOnboardPrevStep, } from 'uiSrc/slices/app/features' +import { CancelSlimIcon } from 'uiSrc/components/base/icons' import { + EmptyButton, + IconButton, PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' @@ -82,20 +80,20 @@ const OnboardingTour = (props: Props) => { const Header = (
{!isLastStep ? ( - Skip tour - + ) : ( - diff --git a/redisinsight/ui/src/components/page-header/PageHeader.tsx b/redisinsight/ui/src/components/page-header/PageHeader.tsx index 9abf6e36a8..764d37d70b 100644 --- a/redisinsight/ui/src/components/page-header/PageHeader.tsx +++ b/redisinsight/ui/src/components/page-header/PageHeader.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { EuiButtonEmpty, EuiTitle } from '@elastic/eui' +import { EuiTitle } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' @@ -9,14 +9,14 @@ import { resetDataRedisCloud } from 'uiSrc/slices/instances/cloud' import { resetDataRedisCluster } from 'uiSrc/slices/instances/cluster' import { resetDataSentinel } from 'uiSrc/slices/instances/sentinel' -import Logo from 'uiSrc/assets/img/logo.svg?react' - import { CopilotTrigger, InsightsTrigger } from 'uiSrc/components/triggers' import { FeatureFlagComponent, OAuthUserProfile } from 'uiSrc/components' import { OAuthSocialSource } from 'uiSrc/slices/interfaces' import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features' import { isAnyFeatureEnabled } from 'uiSrc/utils/features' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { EmptyButton } from 'uiSrc/components/base/forms/buttons' +import { RedisLogoFullIcon } from 'uiSrc/components/base/icons' import styles from './PageHeader.module.scss' interface Props { @@ -89,13 +89,13 @@ const PageHeader = (props: Props) => { ) : (
-
diff --git a/redisinsight/ui/src/components/recommendation/recommendation-copy-component/RecommendationCopyComponent.tsx b/redisinsight/ui/src/components/recommendation/recommendation-copy-component/RecommendationCopyComponent.tsx index 682fbd3b17..9482f8eb30 100644 --- a/redisinsight/ui/src/components/recommendation/recommendation-copy-component/RecommendationCopyComponent.tsx +++ b/redisinsight/ui/src/components/recommendation/recommendation-copy-component/RecommendationCopyComponent.tsx @@ -1,11 +1,13 @@ import React from 'react' import { useParams } from 'react-router-dom' -import { EuiText, EuiTextColor, EuiButtonIcon } from '@elastic/eui' +import { EuiText, EuiTextColor } from '@elastic/eui' import cx from 'classnames' import { bufferToString } from 'uiSrc/utils' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CopyIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export interface IProps { @@ -55,10 +57,10 @@ const RecommendationCopyComponent = ({ > {formattedName} - diff --git a/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx b/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx index 918a509583..962821b4c5 100644 --- a/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx +++ b/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx @@ -1,14 +1,7 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' -import { - EuiButtonIcon, - EuiText, - EuiIcon, - EuiLink, - EuiPopover, - EuiToolTip, -} from '@elastic/eui' +import { EuiText, EuiIcon, EuiLink, EuiPopover, EuiToolTip } from '@elastic/eui' import { EXTERNAL_LINKS } from 'uiSrc/constants/links' import { Vote } from 'uiSrc/constants/recommendations' import { putRecommendationVote } from 'uiSrc/slices/analytics/dbAnalysis' @@ -23,7 +16,8 @@ import PetardIcon from 'uiSrc/assets/img/icons/petard.svg?react' import GithubSVG from 'uiSrc/assets/img/icons/github-white.svg?react' import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' +import { CancelSlimIcon } from 'uiSrc/components/base/icons' +import { IconButton, PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { getVotedText, voteTooltip, iconType } from './utils' import styles from './styles.module.scss' @@ -109,9 +103,9 @@ const VoteOption = (props: Props) => { position="bottom" data-testid={`${voteOption}-vote-tooltip`} > - {
- ) => vote === Vote.Like diff --git a/redisinsight/ui/src/components/recommendation/recommendation-voting/styles.module.scss b/redisinsight/ui/src/components/recommendation/recommendation-voting/styles.module.scss index 1a14e2bf9c..33f02f1d48 100644 --- a/redisinsight/ui/src/components/recommendation/recommendation-voting/styles.module.scss +++ b/redisinsight/ui/src/components/recommendation/recommendation-voting/styles.module.scss @@ -16,7 +16,7 @@ } } - .euiIcon { + svg { width: 34px; height: 34px; fill: none; diff --git a/redisinsight/ui/src/components/side-panels/components/header/Header.tsx b/redisinsight/ui/src/components/side-panels/components/header/Header.tsx index e65306170a..84ba942082 100644 --- a/redisinsight/ui/src/components/side-panels/components/header/Header.tsx +++ b/redisinsight/ui/src/components/side-panels/components/header/Header.tsx @@ -1,8 +1,9 @@ import React from 'react' -import { EuiButtonIcon } from '@elastic/eui' import { FullScreen } from 'uiSrc/components' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CancelSlimIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export interface Props { @@ -29,10 +30,8 @@ const Header = (props: Props) => { onToggleFullScreen={onToggleFullScreen} btnTestId={`fullScreen-${panelName}-btn`} /> - { diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx index f73b5ff5d9..0c08f0fa71 100644 --- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx @@ -1,10 +1,9 @@ import React, { useState } from 'react' -import { EuiButtonEmpty, EuiPopover, EuiText, EuiToolTip } from '@elastic/eui' +import { EuiPopover, EuiText, EuiToolTip } from '@elastic/eui' import cx from 'classnames' import { useDispatch } from 'react-redux' import { useHistory } from 'react-router-dom' -import BulbIcon from 'uiSrc/assets/img/bulb.svg?react' import { sendEventTelemetry, @@ -21,7 +20,8 @@ import { import { RestartChat } from 'uiSrc/components/side-panels/panels/ai-assistant/components/shared' import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' +import { EmptyButton, PrimaryButton } from 'uiSrc/components/base/forms/buttons' +import { EraserIcon, LightBulbIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export interface Props { @@ -99,9 +99,9 @@ const ExpertChatHeader = (props: Props) => { closePopover={() => setIsTutorialsPopoverOpen(false)} focusTrapProps={{ scrollLock: true }} button={ - setIsTutorialsPopoverOpen(true)} className={cx(styles.headerBtn)} data-testid="ai-expert-tutorial-btn" @@ -126,10 +126,10 @@ const ExpertChatHeader = (props: Props) => { diff --git a/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx b/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx index fa0efc33f6..259e389927 100644 --- a/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx +++ b/redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx @@ -1,9 +1,11 @@ import React, { useState, useEffect } from 'react' import cx from 'classnames' -import { EuiButtonIcon, keys } from '@elastic/eui' +import { keys } from '@elastic/eui' import { SearchInput } from 'uiSrc/components/base/inputs' import { Maybe, Nullable } from 'uiSrc/utils' +import { SearchIcon } from 'uiSrc/components/base/icons' +import { IconButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -70,10 +72,9 @@ const TableColumnSearchTrigger = (props: Props) => { return (
- diff --git a/redisinsight/ui/src/components/upload-file/UploadFile.tsx b/redisinsight/ui/src/components/upload-file/UploadFile.tsx index 72c0527fbd..73bbb56fb2 100644 --- a/redisinsight/ui/src/components/upload-file/UploadFile.tsx +++ b/redisinsight/ui/src/components/upload-file/UploadFile.tsx @@ -1,6 +1,7 @@ import React from 'react' -import { EuiButtonEmpty, EuiText, EuiIcon } from '@elastic/eui' +import { EuiText, EuiIcon } from '@elastic/eui' +import { EmptyButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' export interface Props { @@ -26,7 +27,7 @@ const UploadFile = (props: Props) => { } return ( - + - + ) } diff --git a/redisinsight/ui/src/constants/modules.ts b/redisinsight/ui/src/constants/modules.ts index 779a08fe8d..466aa3246b 100644 --- a/redisinsight/ui/src/constants/modules.ts +++ b/redisinsight/ui/src/constants/modules.ts @@ -2,62 +2,64 @@ import { DATABASE_LIST_MODULES_TEXT, RedisDefaultModules, } from 'uiSrc/slices/interfaces' -import RedisAIDark from 'uiSrc/assets/img/modules/RedisAIDark.svg' -import RedisAILight from 'uiSrc/assets/img/modules/RedisAILight.svg' -import RedisBloomDark from 'uiSrc/assets/img/modules/RedisBloomDark.svg' -import RedisBloomLight from 'uiSrc/assets/img/modules/RedisBloomLight.svg' -import RedisGearsDark from 'uiSrc/assets/img/modules/RedisGearsDark.svg' -import RedisGearsLight from 'uiSrc/assets/img/modules/RedisGearsLight.svg' -import RedisGraphDark from 'uiSrc/assets/img/modules/RedisGraphDark.svg' -import RedisGraphLight from 'uiSrc/assets/img/modules/RedisGraphLight.svg' -import RedisGears2Dark from 'uiSrc/assets/img/modules/RedisGears2Dark.svg' -import RedisGears2Light from 'uiSrc/assets/img/modules/RedisGears2Light.svg' -import RedisJSONDark from 'uiSrc/assets/img/modules/RedisJSONDark.svg' -import RedisJSONLight from 'uiSrc/assets/img/modules/RedisJSONLight.svg' -import RedisTimeSeriesDark from 'uiSrc/assets/img/modules/RedisTimeSeriesDark.svg' -import RedisTimeSeriesLight from 'uiSrc/assets/img/modules/RedisTimeSeriesLight.svg' -import RedisSearchDark from 'uiSrc/assets/img/modules/RedisSearchDark.svg' -import RedisSearchLight from 'uiSrc/assets/img/modules/RedisSearchLight.svg' +import { + RedisAIDarkIcon, + RedisAILightIcon, + RedisBloomDarkIcon, + RedisBloomLightIcon, + RedisGears2DarkIcon, + RedisGears2LightIcon, + RedisGearsDarkIcon, + RedisGearsLightIcon, + RedisGraphDarkIcon, + RedisGraphLightIcon, + RedisJSONDarkIcon, + RedisJSONLightIcon, + RedisSearchDarkIcon, + RedisSearchLightIcon, + RedisTimeSeriesDarkIcon, + RedisTimeSeriesLightIcon, +} from 'uiSrc/components/base/icons' const rediSearchIcons = { - iconDark: RedisSearchDark, - iconLight: RedisSearchLight, + iconDark: RedisSearchDarkIcon, + iconLight: RedisSearchLightIcon, } export const DEFAULT_MODULES_INFO = { [RedisDefaultModules.AI]: { - iconDark: RedisAIDark, - iconLight: RedisAILight, + iconDark: RedisAIDarkIcon, + iconLight: RedisAILightIcon, text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.AI], }, [RedisDefaultModules.Bloom]: { - iconDark: RedisBloomDark, - iconLight: RedisBloomLight, + iconDark: RedisBloomDarkIcon, + iconLight: RedisBloomLightIcon, text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.Bloom], }, [RedisDefaultModules.Gears]: { - iconDark: RedisGearsDark, - iconLight: RedisGearsLight, + iconDark: RedisGearsDarkIcon, + iconLight: RedisGearsLightIcon, text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.Gears], }, [RedisDefaultModules.Graph]: { - iconDark: RedisGraphDark, - iconLight: RedisGraphLight, + iconDark: RedisGraphDarkIcon, + iconLight: RedisGraphLightIcon, text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.Graph], }, [RedisDefaultModules.RedisGears]: { - iconDark: RedisGearsDark, - iconLight: RedisGearsLight, + iconDark: RedisGearsDarkIcon, + iconLight: RedisGearsLightIcon, text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.RedisGears], }, [RedisDefaultModules.RedisGears2]: { - iconDark: RedisGears2Dark, - iconLight: RedisGears2Light, + iconDark: RedisGears2DarkIcon, + iconLight: RedisGears2LightIcon, text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.RedisGears2], }, [RedisDefaultModules.ReJSON]: { - iconDark: RedisJSONDark, - iconLight: RedisJSONLight, + iconDark: RedisJSONDarkIcon, + iconLight: RedisJSONLightIcon, text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.ReJSON], }, [RedisDefaultModules.Search]: { @@ -77,8 +79,8 @@ export const DEFAULT_MODULES_INFO = { text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.FTL], }, [RedisDefaultModules.TimeSeries]: { - iconDark: RedisTimeSeriesDark, - iconLight: RedisTimeSeriesLight, + iconDark: RedisTimeSeriesDarkIcon, + iconLight: RedisTimeSeriesLightIcon, text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.TimeSeries], }, } diff --git a/redisinsight/ui/src/packages/redisearch/src/components/TableResult/TableResult.tsx b/redisinsight/ui/src/packages/redisearch/src/components/TableResult/TableResult.tsx index 2847b0c0d8..a41fe50972 100644 --- a/redisinsight/ui/src/packages/redisearch/src/components/TableResult/TableResult.tsx +++ b/redisinsight/ui/src/packages/redisearch/src/components/TableResult/TableResult.tsx @@ -4,12 +4,13 @@ import cx from 'classnames' import { flatten, isArray, isEmpty, map, uniq } from 'lodash' import { EuiBasicTableColumn, - EuiButtonIcon, EuiInMemoryTable, EuiTextColor, EuiToolTip, } from '@elastic/eui' +import { IconButton } from '../../../../../components/base/forms/buttons' +import { CopyIcon } from '../../../../../components/base/icons' import { CommandArgument, Command } from '../../constants' import { formatLongName, replaceSpaces } from '../../utils' @@ -84,11 +85,11 @@ const TableResult = React.memo((props: Props) => { content={formatLongName(value.toString())} >
- + {cellContent} - diff --git a/redisinsight/ui/src/packages/redisgraph/src/Graph.tsx b/redisinsight/ui/src/packages/redisgraph/src/Graph.tsx index 35229eb6fd..80e6626e32 100644 --- a/redisinsight/ui/src/packages/redisgraph/src/Graph.tsx +++ b/redisinsight/ui/src/packages/redisgraph/src/Graph.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useRef, useState, useMemo } from 'react' import * as d3 from 'd3' import { executeRedisCommand, formatRedisReply } from 'redisinsight-plugin-sdk' -import { EuiButtonIcon, EuiToolTip, EuiSwitch } from '@elastic/eui' +import { EuiToolTip, EuiSwitch } from '@elastic/eui' import Graphd3, { IGraphD3 } from './graphd3' import { responseParser } from './parser' import { @@ -20,6 +20,8 @@ import { NODE_COLORS, NODE_COLORS_DARK, } from './constants' +import { IconButton } from '../../../components/base/forms/buttons' +import { CopyIcon, CancelSlimIcon } from '../../../components/base/icons' enum EntityType { Node = 'Node', @@ -478,11 +480,9 @@ export default function Graph(props: { {selectedEntity.property}
)} - setSelectedEntity(null)} - display="empty" - iconType="cross" + icon={CancelSlimIcon} aria-label="Close" />
@@ -532,10 +532,9 @@ export default function Graph(props: { }, ].map((item) => ( - diff --git a/redisinsight/ui/src/packages/ri-explain/src/Explain.tsx b/redisinsight/ui/src/packages/ri-explain/src/Explain.tsx index 0cb227521c..1bd163ded3 100644 --- a/redisinsight/ui/src/packages/ri-explain/src/Explain.tsx +++ b/redisinsight/ui/src/packages/ri-explain/src/Explain.tsx @@ -1,11 +1,11 @@ +/* eslint-disable no-restricted-globals */ import React, { useEffect, useState, useRef } from 'react' import { Model, Graph } from '@antv/x6' import { register } from '@antv/x6-react-shape' import Hierarchy from '@antv/hierarchy' import { formatRedisReply } from 'redisinsight-plugin-sdk' -import { EuiButtonIcon, EuiToolTip, EuiIcon } from '@elastic/eui' - +import { EuiToolTip, EuiIcon } from '@elastic/eui' import { EDGE_COLOR_BODY_DARK, EDGE_COLOR_BODY_LIGHT, @@ -26,6 +26,7 @@ import { findFlatProfile, } from './parser' import { ExplainNode, ProfileNode } from './Node' +import { IconButton } from '../../../components/base/forms/buttons' interface IExplain { command: string @@ -44,10 +45,24 @@ function getEdgeColor(isDarkTheme: boolean) { return isDarkTheme ? EDGE_COLOR_BODY_DARK : EDGE_COLOR_BODY_LIGHT } -export default function Explain(props: IExplain): JSX.Element { - const command = props.command.split(' ')[0].toLowerCase() - if (command.startsWith('graph')) { - const info = props.data[0].response +export default function Explain({ command, data }: IExplain): JSX.Element { + const cmd = command.split(' ')[0].toLowerCase() + useEffect(() => { + if (cmd === 'ft.profile') { + const getParsedResponse = async () => { + const formattedResponse = await formatRedisReply( + data[0].response, + command, + ) + setParsedRedisReply(formattedResponse) + } + getParsedResponse() + } + }, [cmd]) + const [parsedRedisReply, setParsedRedisReply] = useState('') + + if (cmd.startsWith('graph')) { + const info = data[0].response const resp = ParseGraphV2(info) let profilingTime: IProfilingTime = {} @@ -70,24 +85,8 @@ export default function Explain(props: IExplain): JSX.Element { const module = ModuleType.Search - const [parsedRedisReply, setParsedRedisReply] = useState('') - - useEffect(() => { - if (command === 'ft.profile') { - const getParsedResponse = async () => { - const formattedResponse = await formatRedisReply( - props.data[0].response, - props.command, - ) - setParsedRedisReply(formattedResponse) - } - getParsedResponse() - } - }) - if (command === 'ft.profile') { try { - const { data } = props const isNewResponse = typeof data[0].response[1]?.[0] === 'string' const [, profiles] = data[0].response || [] @@ -128,12 +127,18 @@ export default function Explain(props: IExplain): JSX.Element { } } - const resp = props.data[0].response + const resp = data[0].response - const data = ParseExplain( + const explainDrawData = ParseExplain( Array.isArray(resp) ? resp.join('\n') : resp.split('\\n').join('\n'), ) - return + return ( + + ) } register({ @@ -365,7 +370,7 @@ function ExplainDraw({ ...targetPort, }, items: [ - ...data.children.map((c) => ({ + ...data.children.map((c: { id: string }) => ({ id: `${data.id}-${c.id}`, group: portId, })), @@ -425,7 +430,7 @@ function ExplainDraw({ let pos = { top: 0, left: 0, x: 0, y: 0 } - const mouseMoveHandler = function (e) { + const mouseMoveHandler = (e: MouseEvent) => { // How far the mouse has been moved const dx = e.clientX - pos.x const dy = e.clientY - pos.y @@ -437,12 +442,12 @@ function ExplainDraw({ } } - const mouseUpHandler = function () { + const mouseUpHandler = () => { document.removeEventListener('mousemove', mouseMoveHandler) document.removeEventListener('mouseup', mouseUpHandler) } - const mouseDownHandler = function (e) { + const mouseDownHandler = (e: MouseEvent) => { pos = { // The current scroll left: ele?.scrollLeft || 0, @@ -456,7 +461,7 @@ function ExplainDraw({ setTimeout(() => document.addEventListener('mouseup', mouseUpHandler), 100) } - ele?.addEventListener('mousedown', mouseDownHandler) + ele?.addEventListener('mousedown', mouseDownHandler as EventListener) if (type !== CoreType.Profile && collapse) { core?.resize(undefined, isFullScreen ? window.outerHeight - 250 : 400) @@ -532,10 +537,10 @@ function ExplainDraw({ }, ].map((item) => ( - @@ -564,6 +569,8 @@ function ExplainDraw({ } setCollapse(!collapse) }} + role="button" + tabIndex={-1} > {collapse ? ( <> diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResultPage.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResultPage.tsx index b4065f96bf..4414d71a96 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResultPage.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResultPage.tsx @@ -1,6 +1,5 @@ import { EuiBasicTableColumn, - EuiButtonIcon, EuiIcon, EuiText, EuiTextColor, @@ -31,6 +30,8 @@ import { } from 'uiSrc/utils' import { DatabaseListModules, DatabaseListOptions } from 'uiSrc/components' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CopyIcon } from 'uiSrc/components/base/icons' import RedisCloudDatabasesResult from './RedisCloudDatabasesResult' import styles from './styles.module.scss' @@ -161,8 +162,8 @@ const RedisCloudDatabasesResultPage = () => { content="Copy" anchorClassName="copyPublicEndpointTooltip" > - handleCopy(text)} @@ -180,7 +181,7 @@ const RedisCloudDatabasesResultPage = () => { align: 'left', width: '200px', sortable: true, - render: function Modules(modules: any[], instance: InstanceRedisCloud) { + render: function Modules(_modules: any[], instance: InstanceRedisCloud) { return ( ({ name }))} @@ -196,7 +197,7 @@ const RedisCloudDatabasesResultPage = () => { align: 'left', width: '180px', sortable: true, - render: function Opitions(opts: any[], instance: InstanceRedisCloud) { + render: function Opitions(_opts: any[], instance: InstanceRedisCloud) { const options = parseInstanceOptionsCloud( instance.databaseId, instancesForOptions, diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabasesPage.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabasesPage.tsx index 7bb5d4e18e..c62c676838 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabasesPage.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabasesPage.tsx @@ -1,9 +1,4 @@ -import { - EuiBasicTableColumn, - EuiButtonIcon, - EuiText, - EuiToolTip, -} from '@elastic/eui' +import { EuiBasicTableColumn, EuiText, EuiToolTip } from '@elastic/eui' import React, { useEffect, useRef } from 'react' import { useHistory } from 'react-router-dom' import { useDispatch, useSelector } from 'react-redux' @@ -33,6 +28,8 @@ import { DatabaseListModules, DatabaseListOptions } from 'uiSrc/components' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { oauthCloudUserSelector } from 'uiSrc/slices/oauth/cloud' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CopyIcon } from 'uiSrc/components/base/icons' import RedisCloudDatabases from './RedisCloudDatabases' import styles from './styles.module.scss' @@ -221,8 +218,8 @@ const RedisCloudDatabasesPage = () => { content="Copy" anchorClassName="copyPublicEndpointTooltip" > - handleCopy(text)} diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptionsPage.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptionsPage.tsx index 03ccccda8e..167ae83776 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptionsPage.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptionsPage.tsx @@ -2,12 +2,7 @@ import React, { useEffect, useRef } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' import { isNumber } from 'lodash' -import { - EuiBasicTableColumn, - EuiButtonIcon, - EuiText, - EuiToolTip, -} from '@elastic/eui' +import { EuiBasicTableColumn, EuiText, EuiToolTip } from '@elastic/eui' import { Pages } from 'uiSrc/constants' import { @@ -30,6 +25,8 @@ import { import { formatLongName, Maybe, replaceSpaces, setTitle } from 'uiSrc/utils' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { oauthCloudUserSelector } from 'uiSrc/slices/oauth/cloud' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { ToastDangerIcon } from 'uiSrc/components/base/icons' import RedisCloudSubscriptions from './RedisCloudSubscriptions/RedisCloudSubscriptions' import styles from './styles.module.scss' @@ -149,9 +146,8 @@ const RedisCloudSubscriptionsPage = () => { position="right" className={styles.tooltipStatus} > - diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/SentinelDatabasesPage.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/SentinelDatabasesPage.tsx index 3bf2047f6d..c653859382 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/SentinelDatabasesPage.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/SentinelDatabasesPage.tsx @@ -1,10 +1,4 @@ -import { - EuiBasicTableColumn, - EuiButtonIcon, - EuiIcon, - EuiText, - EuiToolTip, -} from '@elastic/eui' +import { EuiBasicTableColumn, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui' import React, { useEffect, useState } from 'react' import { map, pick } from 'lodash' import { useHistory } from 'react-router-dom' @@ -23,6 +17,8 @@ import { import { LoadedSentinel, ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' import { InputFieldSentinel } from 'uiSrc/components' import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CopyIcon } from 'uiSrc/components/base/icons' import { CreateSentinelDatabaseDto } from 'apiSrc/modules/redis-sentinel/dto/create.sentinel.database.dto' import SentinelDatabases from './components' @@ -163,8 +159,8 @@ const SentinelDatabasesPage = () => { content="Copy" anchorClassName="copyPublicEndpointTooltip" > - handleCopy(text)} diff --git a/redisinsight/ui/src/pages/browser/components/add-items-actions/AddItemsActions.tsx b/redisinsight/ui/src/pages/browser/components/add-items-actions/AddItemsActions.tsx index 41ea4f41b4..a4589ce50d 100644 --- a/redisinsight/ui/src/pages/browser/components/add-items-actions/AddItemsActions.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-items-actions/AddItemsActions.tsx @@ -1,8 +1,8 @@ import React from 'react' -import { EuiButtonIcon, EuiToolTip } from '@elastic/eui' +import { EuiToolTip } from '@elastic/eui' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { PlusInCircleIcon } from 'uiSrc/components/base/icons' +import { PlusInCircleIcon, DeleteIcon } from 'uiSrc/components/base/icons' export interface Props { id: number @@ -55,9 +55,8 @@ const AddItemsActions = (props: Props) => { position="left" anchorClassName={anchorClassName} > - { position="left" anchorClassName={styles.closeKeyTooltip} > - closeKey()} diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx index 99fa9a7c0d..537332c37b 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx @@ -1,6 +1,5 @@ import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' - import { EuiForm, EuiPanel, EuiSuperSelect, EuiFieldText } from '@elastic/eui' import { Maybe, stringToBuffer } from 'uiSrc/utils' diff --git a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActions.tsx b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActions.tsx index e807f7dfa0..2b0c16a1e7 100644 --- a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActions.tsx +++ b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActions.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' -import { EuiButtonIcon, EuiTitle, EuiToolTip } from '@elastic/eui' +import { EuiTitle, EuiToolTip } from '@elastic/eui' import { useParams } from 'react-router-dom' import { @@ -20,6 +20,8 @@ import { DEFAULT_SEARCH_MATCH } from 'uiSrc/constants/api' import { FullScreen } from 'uiSrc/components' import { Col, FlexItem } from 'uiSrc/components/base/layout/flex' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CancelSlimIcon } from 'uiSrc/components/base/icons' import BulkUpload from './BulkUpload' import BulkDelete from './BulkDelete' import BulkActionsTabs from './BulkActionsTabs' @@ -118,9 +120,8 @@ const BulkActions = (props: Props) => { position="left" anchorClassName={styles.anchorTooltip} > - { closePopover={() => setIsInfoPopoverOpen(false)} initialFocus={false} button={ - - { appendRight={ searchMode === SearchMode.Redisearch ? ( - - + ) : undefined } diff --git a/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-name/KeyDetailsHeaderName.tsx b/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-name/KeyDetailsHeaderName.tsx index bb3cba6f93..0c9b0b71c8 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-name/KeyDetailsHeaderName.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-name/KeyDetailsHeaderName.tsx @@ -1,10 +1,4 @@ -import { - EuiButtonIcon, - EuiFieldText, - EuiIcon, - EuiText, - EuiToolTip, -} from '@elastic/eui' +import { EuiFieldText, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui' import cx from 'classnames' import { isNull } from 'lodash' import React, { ChangeEvent, useEffect, useRef, useState } from 'react' @@ -34,6 +28,8 @@ import { } from 'uiSrc/utils' import { FlexItem, Grid } from 'uiSrc/components/base/layout/flex' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CopyIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export interface Props { @@ -210,11 +206,10 @@ const KeyDetailsHeaderName = ({ onEditKey }: Props) => { content="Copy" anchorClassName={styles.copyKey} > - handleCopy(event, key!, keyIsEditing, keyNameRef) } diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/text-details-wrapper/TextDetailsWrapper.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/text-details-wrapper/TextDetailsWrapper.tsx index 17a17d8f1b..5a29efb196 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/text-details-wrapper/TextDetailsWrapper.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/text-details-wrapper/TextDetailsWrapper.tsx @@ -1,8 +1,10 @@ import React, { ReactNode } from 'react' -import { EuiButtonIcon, EuiToolTip } from '@elastic/eui' +import { EuiToolTip } from '@elastic/eui' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CancelSlimIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' const TextDetailsWrapper = ({ @@ -24,9 +26,8 @@ const TextDetailsWrapper = ({ position="left" anchorClassName={styles.closeRightPanel} > - onClose()} diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelHostPort.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelHostPort.tsx index 3230e0d999..0c7d34107e 100644 --- a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelHostPort.tsx +++ b/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelHostPort.tsx @@ -1,13 +1,7 @@ import React from 'react' -import { - EuiButtonIcon, - EuiListGroupItem, - EuiText, - EuiTextColor, - EuiToolTip, -} from '@elastic/eui' - -import cx from 'classnames' +import { EuiText, EuiTextColor, EuiToolTip } from '@elastic/eui' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CopyIcon } from 'uiSrc/components/base/icons' import styles from '../../styles.module.scss' export interface Props { @@ -32,8 +26,8 @@ const SentinelHostPort = (props: Props) => { content="Copy" anchorClassName="copyHostPortTooltip" > - handleCopy(`${host}:${port}`)} diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.tsx index d1d172debf..51cbaf887b 100644 --- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.tsx +++ b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesList/MessagesList.tsx @@ -5,10 +5,12 @@ import { VariableSizeList as List, } from 'react-window' import { useParams } from 'react-router-dom' -import { EuiButtonIcon, EuiToolTip } from '@elastic/eui' +import { EuiToolTip } from '@elastic/eui' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { FormatedDate } from 'uiSrc/components' +import { ChevronDownIcon } from 'uiSrc/components/base/icons' +import { IconButton } from 'uiSrc/components/base/forms/buttons' import { IMessage } from 'apiSrc/modules/pub-sub/interfaces/message.interface' import styles from './styles.module.scss' @@ -165,8 +167,8 @@ const MessagesList = (props: Props) => { {Row} {showAnchor && ( - {
Test transformation logic
- - { display="inlineBlock" anchorClassName="flex-row" > - { setCurrentJobName(name) setIsNewJob(false) @@ -220,8 +223,8 @@ const JobsTree = (props: IProps) => { } onConfirm={() => handleDeleteClick(name)} button={ - @@ -351,8 +354,8 @@ const JobsTree = (props: IProps) => { display="inlineBlock" anchorClassName="flex-row" > - { setAccordionState('open') setIsNewJob(true) diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/components/test-connections-panel/TestConnectionsPanel.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/components/test-connections-panel/TestConnectionsPanel.tsx index 7ef1118f08..e85ba4ac0e 100644 --- a/redisinsight/ui/src/pages/rdi/pipeline-management/components/test-connections-panel/TestConnectionsPanel.tsx +++ b/redisinsight/ui/src/pages/rdi/pipeline-management/components/test-connections-panel/TestConnectionsPanel.tsx @@ -1,11 +1,13 @@ import React from 'react' -import { EuiButtonIcon, EuiText, EuiLoadingSpinner } from '@elastic/eui' +import { EuiText, EuiLoadingSpinner } from '@elastic/eui' import { useSelector } from 'react-redux' import TestConnectionsLog from 'uiSrc/pages/rdi/pipeline-management/components/test-connections-log' import { rdiTestConnectionsSelector } from 'uiSrc/slices/rdi/testConnections' import { Col, FlexItem } from 'uiSrc/components/base/layout/flex' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CancelSlimIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' interface TestConnectionPanelWrapperProps { @@ -20,10 +22,8 @@ const TestConnectionPanelWrapper = ({
Connection test results - { content="Copy" anchorClassName="copyHostPortTooltip" > - handleCopy(text)} @@ -151,7 +152,10 @@ const RedisClusterDatabasesPage = () => { align: 'left', width: '190px', sortable: true, - render: function Modules(modules: any[], instance: InstanceRedisCluster) { + render: function Modules( + _modules: any[], + instance: InstanceRedisCluster, + ) { return ( ({ name }))} @@ -167,7 +171,7 @@ const RedisClusterDatabasesPage = () => { align: 'left', width: '220px', sortable: true, - render: function Opitions(opts: any[], instance: InstanceRedisCluster) { + render: function Opitions(_opts: any[], instance: InstanceRedisCluster) { const options = parseInstanceOptionsCluster( instance?.uid, instances || [], diff --git a/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx b/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx index 442ec149bc..fad26e66fd 100644 --- a/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx +++ b/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx @@ -1,6 +1,6 @@ import React from 'react' import cx from 'classnames' -import { EuiButtonEmpty, EuiProgress } from '@elastic/eui' +import { EuiProgress } from '@elastic/eui' import { CodeButtonParams } from 'uiSrc/constants' import { ProfileQueryType } from 'uiSrc/pages/workbench/constants' @@ -10,6 +10,8 @@ import { QueryCard } from 'uiSrc/components/query' import { CommandExecutionUI } from 'uiSrc/slices/interfaces' import { RunQueryMode, ResultsMode } from 'uiSrc/slices/interfaces/workbench' +import { EmptyButton } from 'uiSrc/components/base/forms/buttons' +import { DeleteIcon } from 'uiSrc/components/base/icons' import WbNoResultsMessage from '../../wb-no-results-message' import styles from './styles.module.scss' @@ -83,16 +85,16 @@ const WBResults = (props: Props) => { )} {!!items?.length && (
- onAllQueriesDelete?.()} disabled={clearing || processing} data-testid="clear-history-btn" > Clear Results - +
)}
From a4ca899d848e467a4408df6db3e49e00c9aa31cc Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 4 Jun 2025 15:42:14 +0300 Subject: [PATCH 089/154] RI-7046: replace EuiCheckbox * add Checkbox.tsx replace EuiCheckbox --- package.json | 2 +- .../base/forms/checkbox/Checkbox.test.tsx | 104 +++++++++ .../base/forms/checkbox/Checkbox.tsx | 82 +++++++ .../components/export-action/ExportAction.tsx | 4 +- .../components/RunConfirmationPopover.tsx | 5 +- .../shared/oauth-agreement/OAuthAgreement.tsx | 5 +- .../OAuthRecommendedSettings.tsx | 5 +- .../LiveTimeRecommendations.tsx | 4 +- .../components/keys-header/KeysHeader.tsx | 7 +- .../hash-details/HashDetails.spec.tsx | 21 +- .../components/hash-details/HashDetails.tsx | 28 ++- .../MessageClaimPopover.tsx | 4 +- .../DatabaseListHeader.tsx | 33 ++- .../home/components/form/DbCompressor.tsx | 4 +- .../pages/home/components/form/DbIndex.tsx | 12 +- .../home/components/form/ForceStandalone.tsx | 4 +- .../pages/home/components/form/SSHDetails.tsx | 6 +- .../home/components/form/TlsDetails.spec.tsx | 32 +++ .../pages/home/components/form/TlsDetails.tsx | 10 +- .../ManualConnectionFrom.spec.tsx | 206 +++++++++--------- .../SentinelConnectionForm.spec.tsx | 5 +- .../components/tags-cell/TagsCellHeader.tsx | 14 +- .../DeployPipelineButton.spec.tsx | 15 +- .../DeployPipelineButton.tsx | 4 +- redisinsight/ui/src/setup-tests.ts | 6 + yarn.lock | 8 +- 26 files changed, 432 insertions(+), 198 deletions(-) create mode 100644 redisinsight/ui/src/components/base/forms/checkbox/Checkbox.test.tsx create mode 100644 redisinsight/ui/src/components/base/forms/checkbox/Checkbox.tsx create mode 100644 redisinsight/ui/src/pages/home/components/form/TlsDetails.spec.tsx diff --git a/package.json b/package.json index 2d33e0dd6c..bf1645ab77 100644 --- a/package.json +++ b/package.json @@ -234,7 +234,7 @@ "dependencies": { "@elastic/datemath": "^5.0.3", "@elastic/eui": "34.6.0", - "@redis-ui/components": "^38.0.0", + "@redis-ui/components": "^38.1.3", "@redis-ui/icons": "^4.16.1", "@redis-ui/styles": "^11.0.2", "@reduxjs/toolkit": "^1.6.2", diff --git a/redisinsight/ui/src/components/base/forms/checkbox/Checkbox.test.tsx b/redisinsight/ui/src/components/base/forms/checkbox/Checkbox.test.tsx new file mode 100644 index 0000000000..7372f3e7c0 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/checkbox/Checkbox.test.tsx @@ -0,0 +1,104 @@ +import React from 'react' +import { fireEvent } from '@testing-library/react' +import { render, screen } from 'uiSrc/utils/test-utils' +import { Checkbox } from './Checkbox' + +describe('Checkbox', () => { + it('Should render checkbox', () => { + render() + + expect(screen.getByText('Checkbox Label')).toBeInTheDocument() + }) + + describe('Checkbox states', () => { + it('Should render disabled checkbox when disabled prop is passed', () => { + render() + + expect(screen.getByRole('checkbox')).toBeDisabled() + }) + it('Should render un-checked checkbox when checked prop is passed as false', () => { + render() + + const checkbox = screen.getByRole('checkbox') + expect(checkbox).toHaveAttribute('aria-checked', 'false') + }) + it('Should render checked checkbox when checked prop is passed as true', () => { + render() + + const checkbox = screen.getByRole('checkbox') + expect(checkbox).toHaveAttribute('aria-checked', 'true') + }) + it('Should render indeterminate checkbox when checked prop is passed as indeterminate', () => { + render( + , + ) + + const checkbox = screen.getByRole('checkbox') + expect(checkbox).toHaveValue('on') + expect(checkbox).toHaveTextContent('Minus') + }) + }) + + describe('change handlers', () => { + it('Should call handlers when checkbox is clicked with thruthy values', () => { + const onChange = jest.fn() + const onCheckedChange = jest.fn() + render( + , + ) + const checkbox = screen.getByRole('checkbox') + fireEvent.click(checkbox) + expect(onChange).toHaveBeenCalled() + expect(onChange).toHaveBeenCalledWith({ + target: { + checked: true, + type: 'checkbox', + name: undefined, + id: 'id1', + }, + }) + expect(onCheckedChange).toHaveBeenCalled() + expect(onCheckedChange).toHaveBeenCalledWith(true) + }) + it('Should call handlers when checkbox is clicked with falsy values', () => { + const onChange = jest.fn() + const onCheckedChange = jest.fn() + render( + , + ) + const checkbox = screen.getByRole('checkbox') + fireEvent.click(checkbox) + expect(onChange).toHaveBeenCalled() + expect(onChange).toHaveBeenCalledWith({ + target: { + checked: false, + type: 'checkbox', + name: undefined, + id: 'id1', + }, + }) + expect(onCheckedChange).toHaveBeenCalled() + expect(onCheckedChange).toHaveBeenCalledWith(false) + }) + it('Should change state when clicked', () => { + render() + const checkbox = screen.getByRole('checkbox') + expect(checkbox).toHaveAttribute('aria-checked', 'true') + fireEvent.click(checkbox) + expect(checkbox).toHaveAttribute('aria-checked', 'false') + fireEvent.click(checkbox) + expect(checkbox).toHaveAttribute('aria-checked', 'true') + }) + }) +}) diff --git a/redisinsight/ui/src/components/base/forms/checkbox/Checkbox.tsx b/redisinsight/ui/src/components/base/forms/checkbox/Checkbox.tsx new file mode 100644 index 0000000000..370cb70204 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/checkbox/Checkbox.tsx @@ -0,0 +1,82 @@ +import React, { ChangeEvent } from 'react' +import { + Checkbox as RedisUiCheckbox, + CheckedType, + Typography, +} from '@redis-ui/components' +import { BodySizesType } from '@redis-ui/components/dist/Typography/components/Body/Body.types' + +type Size = BodySizesType + +export type CheckboxProps = Omit< + React.ComponentProps, + 'onChange' +> & { + onCheckedChange?: (checked: CheckedType) => void + onChange?: (e: ChangeEvent) => void + name?: string + id?: string + labelSize?: Size +} + +type CheckboxLabelProps = Omit< + React.ComponentProps, + 'children' | 'component' +> & { + children: React.ReactNode +} + +const CheckboxLabel = ({ children, ...rest }: CheckboxLabelProps) => { + if (typeof children !== 'string') { + return <>{children} + } + return ( + + {children} + + ) +} + +export const Checkbox = ({ + onChange, + onCheckedChange, + id, + label, + labelSize = 'S', + ...rest +}: CheckboxProps) => { + /** + * Handles the change event for a checkbox input and notifies the relevant handlers. + * + * This is added to provide compatibility with the `onChange` handler expected by the Formik library. + * Constructs a synthetic event object designed to mimic a React checkbox change event. + * Updates the `checked` status and passes the constructed event to the `onChange` handler + * if provided. Additionally, invokes the `onCheckedChange` handler with the new `checked` state + * if it is defined. + * + * @param {CheckedType} checked - The new checked state of the checkbox. It is expected to + * be a boolean-like value where `true` indicates checked and any other value + * indicates unchecked. + */ + const handleCheckedChange = (checked: CheckedType) => { + const syntheticEvent = { + target: { + checked: checked === true, + type: 'checkbox', + name: rest.name, + id, + }, + } as React.ChangeEvent + onChange?.(syntheticEvent) + onCheckedChange?.(checked) + } + + return ( + {label}} + /> + ) +} diff --git a/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx b/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx index 098df99254..cf5ae03252 100644 --- a/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx +++ b/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx @@ -1,6 +1,5 @@ import React, { useState } from 'react' import { - EuiCheckbox, EuiIcon, EuiPopover, EuiText, @@ -11,6 +10,7 @@ import { formatLongName } from 'uiSrc/utils' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { ExportIcon } from 'uiSrc/components/base/icons' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' import styles from '../styles.module.scss' export interface Props { @@ -64,7 +64,7 @@ const ExportAction = ( ))}
- { to run commands in this database? - { return (
- { return (
- {
{isShowHiddenDisplayed && ( - { > - { - { expect(screen.getByText('Show TTL')).toBeInTheDocument() }) - it('toggles the show TTL button', () => { + it('toggles the show TTL button', async () => { render() - const el = screen.getByTestId('test-check-ttl') as HTMLInputElement - expect(el.checked).toBe(true) - fireEvent.click(el) - expect(el.checked).toBe(false) + let el = screen.getByTestId('test-check-ttl') as HTMLInputElement + expect(el).toHaveAttribute('aria-checked', 'true') + // expect(el.checked).toBe(true) + await act(async () => { + fireEvent.click(el) + }) + el = screen.getByTestId('test-check-ttl') as HTMLInputElement + expect(el).toHaveAttribute('aria-checked', 'false') + // expect(el.checked).toBe(false) }) it('should call proper telemetry event after click on showTtl', () => { @@ -77,7 +82,7 @@ describe('HashDetails', () => { fireEvent.click(screen.getByTestId('test-check-ttl')) - expect(sendEventTelemetry).toBeCalledWith({ + expect(sendEventTelemetry).toHaveBeenCalledWith({ event: TelemetryEvent.SHOW_HASH_TTL_CLICKED, eventData: { databaseId: INSTANCE_ID_MOCK, @@ -87,7 +92,7 @@ describe('HashDetails', () => { fireEvent.click(screen.getByTestId('test-check-ttl')) - expect(sendEventTelemetry).toBeCalledWith({ + expect(sendEventTelemetry).toHaveBeenCalledWith({ event: TelemetryEvent.SHOW_HASH_TTL_CLICKED, eventData: { databaseId: INSTANCE_ID_MOCK, diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.tsx index fea5be0f44..92707d0a30 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.tsx @@ -3,7 +3,6 @@ import { useSelector } from 'react-redux' import cx from 'classnames' import { useParams } from 'react-router-dom' -import { EuiCheckbox } from '@elastic/eui' import { selectedKeySelector } from 'uiSrc/slices/browser/keys' import { FeatureFlags, KeyTypes } from 'uiSrc/constants' @@ -17,6 +16,7 @@ import { connectedInstanceOverviewSelector } from 'uiSrc/slices/instances/instan import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features' import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry' import Divider from 'uiSrc/components/divider/Divider' +import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' import AddHashFields from './add-hash-fields/AddHashFields' import { HashDetailsTable } from './hash-details-table' import { KeyDetailsSubheader } from '../key-details-subheader/KeyDetailsSubheader' @@ -57,12 +57,23 @@ const HashDetails = (props: Props) => { onCloseAddItemPanel() } } + const handleSelectShow = (show: boolean) => { + setShowTtl(show) + + sendEventTelemetry({ + event: TelemetryEvent.SHOW_HASH_TTL_CLICKED, + eventData: { + databaseId: instanceId, + action: show ? 'show' : 'hide', + }, + }) + } const Actions = ({ width }: { width: number }) => ( <> {isExpireFieldsAvailable && ( <> - { /> ) - - const handleSelectShow = (show: boolean) => { - setShowTtl(show) - - sendEventTelemetry({ - event: TelemetryEvent.SHOW_HASH_TTL_CLICKED, - eventData: { - databaseId: instanceId, - action: show ? 'show' : 'hide', - }, - }) - } - return (
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/MessageClaimPopover.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/MessageClaimPopover.tsx index 4cd2357a41..2fcc03cb5f 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/MessageClaimPopover.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/MessageClaimPopover.tsx @@ -9,7 +9,6 @@ import { EuiFieldNumber, EuiSwitch, EuiText, - EuiCheckbox, EuiToolTip, } from '@elastic/eui' import { useFormik } from 'formik' @@ -32,6 +31,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' import { FormField } from 'uiSrc/components/base/forms/FormField' import { ClaimPendingEntryDto, @@ -313,7 +313,7 @@ const MessageClaimPopover = (props: Props) => { - { const columnCheckboxes = Array.from(COLUMN_FIELD_NAME_MAP.entries()).map( ([field, name]) => ( - { closePopover={() => setColumnsConfigShown(false)} data-testid="columns-config-popover" button={ - - Columns - + + Columns + } > - {columnCheckboxes} +
+ {columnCheckboxes} +
diff --git a/redisinsight/ui/src/pages/home/components/form/DbCompressor.tsx b/redisinsight/ui/src/pages/home/components/form/DbCompressor.tsx index 3d544e293b..c2e66925cc 100644 --- a/redisinsight/ui/src/pages/home/components/form/DbCompressor.tsx +++ b/redisinsight/ui/src/pages/home/components/form/DbCompressor.tsx @@ -1,6 +1,5 @@ import React, { ChangeEvent } from 'react' import { - EuiCheckbox, EuiSuperSelect, EuiSuperSelectOption, htmlIdGenerator, @@ -12,6 +11,7 @@ import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' import { NONE } from 'uiSrc/pages/home/constants' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' import { FormField } from 'uiSrc/components/base/forms/FormField' export interface Props { @@ -68,7 +68,7 @@ const DbCompressor = (props: Props) => { - { const handleChangeDbIndexCheckbox = ( e: ChangeEvent, ): void => { - const isChecked = e.target.checked + // Need to check the type of event to safely access properties + const isChecked = 'checked' in e.target ? e.target.checked : false if (!isChecked) { // Reset db field to initial value formik.setFieldValue('db', null) @@ -37,7 +35,7 @@ const DbIndex = (props: Props) => { - @@ -51,7 +51,7 @@ const ForceStandalone = (props: Props) => { - } diff --git a/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx b/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx index c707645ee8..a821296dc6 100644 --- a/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx +++ b/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx @@ -1,6 +1,5 @@ import React, { ChangeEvent } from 'react' import { - EuiCheckbox, EuiFieldNumber, EuiFieldText, EuiRadioGroup, @@ -26,6 +25,7 @@ import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { FormField } from 'uiSrc/components/base/forms/FormField' import { PasswordInput } from 'uiSrc/components/base/inputs' +import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' import styles from '../styles.module.scss' export interface Props { @@ -61,7 +61,7 @@ const SSHDetails = (props: Props) => { align={!flexGroupClassName ? 'end' : undefined} > - { + > () + +describe('TlsDetails', () => { + it('should render', async () => { + let renderResult + await act(async () => { + renderResult = render( + , + ) + }) + expect(renderResult).toBeTruthy() + }) +}) diff --git a/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx b/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx index 55c6bc79d9..b98cd66080 100644 --- a/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx +++ b/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx @@ -1,6 +1,5 @@ import React, { ChangeEvent, useState } from 'react' import { - EuiCheckbox, EuiFieldText, EuiSuperSelect, EuiSuperSelectOption, @@ -30,6 +29,7 @@ import { deleteCaCertificateAction } from 'uiSrc/slices/instances/caCerts' import { deleteClientCertAction } from 'uiSrc/slices/instances/clientCerts' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' import { FormField } from 'uiSrc/components/base/forms/FormField' import styles from '../styles.module.scss' @@ -175,7 +175,7 @@ const TlsDetails = (props: Props) => { <> - { - { grow className={cx({ [styles.fullWidth]: formik.values.sni })} > - { {formik.values.tls && ( - {
, ) - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId('sentinel-mater-username'), { target: { value: 'user' }, }) @@ -141,19 +141,19 @@ describe('InstanceForm', () => { const submitBtn = screen.getByTestId(BTN_SUBMIT) const testConnectionBtn = screen.getByTestId(BTN_TEST_CONNECTION) - await act(() => { + await act(async () => { fireEvent.click(testConnectionBtn) }) - expect(handleTestConnection).toBeCalledWith( + expect(handleTestConnection).toHaveBeenCalledWith( expect.objectContaining({ sentinelMasterUsername: 'user', }), ) - await act(() => { + await act(async () => { fireEvent.click(submitBtn) }) - expect(handleSubmit).toBeCalledWith( + expect(handleSubmit).toHaveBeenCalledWith( expect.objectContaining({ sentinelMasterUsername: 'user', }), @@ -176,17 +176,17 @@ describe('InstanceForm', () => {
, ) - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId('port'), { target: { value: '123' }, }) }) const submitBtn = screen.getByTestId(BTN_SUBMIT) - await act(() => { + await act(async () => { fireEvent.click(submitBtn) }) - expect(handleSubmit).toBeCalledWith( + expect(handleSubmit).toHaveBeenCalledWith( expect.objectContaining({ port: '123', }), @@ -214,29 +214,29 @@ describe('InstanceForm', () => { fireEvent.click(screen.getByTestId('manual-form-tab-security')) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('tls')) }) const submitBtn = screen.getByTestId(BTN_SUBMIT) const testConnectionBtn = screen.getByTestId(BTN_TEST_CONNECTION) - await act(() => { + await act(async () => { fireEvent.click(testConnectionBtn) }) - expect(handleTestConnection).toBeCalledWith( + expect(handleTestConnection).toHaveBeenCalledWith( expect.objectContaining({ - tls: ['on'], + tls: true, }), ) - await act(() => { + await act(async () => { fireEvent.click(submitBtn) }) - expect(handleSubmit).toBeCalledWith( + expect(handleSubmit).toHaveBeenCalledWith( expect.objectContaining({ - tls: ['on'], + tls: true, }), ) }) @@ -257,27 +257,27 @@ describe('InstanceForm', () => { />
, ) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('showDb')) }) const submitBtn = screen.getByTestId(BTN_SUBMIT) const testConnectionBtn = screen.getByTestId(BTN_TEST_CONNECTION) - await act(() => { + await act(async () => { fireEvent.click(testConnectionBtn) }) - expect(handleTestConnection).toBeCalledWith( + expect(handleTestConnection).toHaveBeenCalledWith( expect.objectContaining({ - showDb: ['on'], + showDb: true, }), ) - await act(() => { + await act(async () => { fireEvent.click(submitBtn) }) - expect(handleSubmit).toBeCalledWith( + expect(handleSubmit).toHaveBeenCalledWith( expect.objectContaining({ - showDb: ['on'], + showDb: true, }), ) }) @@ -298,11 +298,11 @@ describe('InstanceForm', () => { />
, ) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('showDb')) }) - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId('db'), { target: { value: '12' }, }) @@ -311,22 +311,22 @@ describe('InstanceForm', () => { const submitBtn = screen.getByTestId(BTN_SUBMIT) const testConnectionBtn = screen.getByTestId(BTN_TEST_CONNECTION) - await act(() => { + await act(async () => { fireEvent.click(testConnectionBtn) }) - expect(handleTestConnection).toBeCalledWith( + expect(handleTestConnection).toHaveBeenCalledWith( expect.objectContaining({ - showDb: ['on'], + showDb: true, db: '12', }), ) - await act(() => { + await act(async () => { fireEvent.click(submitBtn) }) - expect(handleSubmit).toBeCalledWith( + expect(handleSubmit).toHaveBeenCalledWith( expect.objectContaining({ - showDb: ['on'], + showDb: true, db: '12', }), ) @@ -352,28 +352,28 @@ describe('InstanceForm', () => { ) fireEvent.click(screen.getByTestId('manual-form-tab-security')) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('sni')) }) const submitBtn = screen.getByTestId(BTN_SUBMIT) const testConnectionBtn = screen.getByTestId(BTN_TEST_CONNECTION) - await act(() => { + await act(async () => { fireEvent.click(testConnectionBtn) }) - expect(handleTestConnection).toBeCalledWith( + expect(handleTestConnection).toHaveBeenCalledWith( expect.objectContaining({ - sni: ['on'], + sni: true, servername: formFields.host, }), ) - await act(() => { + await act(async () => { fireEvent.click(submitBtn) }) - expect(handleSubmit).toBeCalledWith( + expect(handleSubmit).toHaveBeenCalledWith( expect.objectContaining({ - sni: ['on'], + sni: true, servername: formFields.host, }), ) @@ -399,11 +399,11 @@ describe('InstanceForm', () => { ) fireEvent.click(screen.getByTestId('manual-form-tab-security')) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('sni')) }) - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId('sni-servername'), { target: { value: '12' }, }) @@ -411,22 +411,22 @@ describe('InstanceForm', () => { const submitBtn = screen.getByTestId(BTN_SUBMIT) const testConnectionBtn = screen.getByTestId(BTN_TEST_CONNECTION) - await act(() => { + await act(async () => { fireEvent.click(testConnectionBtn) }) - expect(handleTestConnection).toBeCalledWith( + expect(handleTestConnection).toHaveBeenCalledWith( expect.objectContaining({ - sni: ['on'], + sni: true, servername: '12', }), ) - await act(() => { + await act(async () => { fireEvent.click(submitBtn) }) - expect(handleSubmit).toBeCalledWith( + expect(handleSubmit).toHaveBeenCalledWith( expect.objectContaining({ - sni: ['on'], + sni: true, servername: '12', }), ) @@ -452,27 +452,27 @@ describe('InstanceForm', () => { ) fireEvent.click(screen.getByTestId('manual-form-tab-security')) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('verify-tls-cert')) }) const submitBtn = screen.getByTestId(BTN_SUBMIT) const testConnectionBtn = screen.getByTestId(BTN_TEST_CONNECTION) - await act(() => { + await act(async () => { fireEvent.click(testConnectionBtn) }) - expect(handleTestConnection).toBeCalledWith( + expect(handleTestConnection).toHaveBeenCalledWith( expect.objectContaining({ - verifyServerTlsCert: ['on'], + verifyServerTlsCert: true, }), ) - await act(() => { + await act(async () => { fireEvent.click(submitBtn) }) - expect(handleSubmit).toBeCalledWith( + expect(handleSubmit).toHaveBeenCalledWith( expect.objectContaining({ - verifyServerTlsCert: ['on'], + verifyServerTlsCert: true, }), ) }) @@ -497,22 +497,22 @@ describe('InstanceForm', () => { ) fireEvent.click(screen.getByTestId('manual-form-tab-security')) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('select-ca-cert')) }) - await act(() => { + await act(async () => { fireEvent.click(queryByText('Add new CA certificate') || document) }) expect(screen.getByTestId(NEW_CA_CERT)).toBeInTheDocument() - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId(NEW_CA_CERT), { target: { value: '123' }, }) }) expect(screen.getByTestId(QA_CA_CERT)).toBeInTheDocument() - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId(QA_CA_CERT), { target: { value: '321' }, }) @@ -520,21 +520,21 @@ describe('InstanceForm', () => { const submitBtn = screen.getByTestId(BTN_SUBMIT) const testConnectionBtn = screen.getByTestId(BTN_TEST_CONNECTION) - await act(() => { + await act(async () => { fireEvent.click(testConnectionBtn) }) - expect(handleTestConnection).toBeCalledWith( + expect(handleTestConnection).toHaveBeenCalledWith( expect.objectContaining({ selectedCaCertName: ADD_NEW_CA_CERT, newCaCertName: '321', newCaCert: '123', }), ) - await act(() => { + await act(async () => { fireEvent.click(submitBtn) }) - expect(handleSubmit).toBeCalledWith( + expect(handleSubmit).toHaveBeenCalledWith( expect.objectContaining({ selectedCaCertName: ADD_NEW_CA_CERT, newCaCertName: '321', @@ -565,14 +565,14 @@ describe('InstanceForm', () => { fireEvent.click(screen.getByTestId('manual-form-tab-security')) expect(screen.getByTestId(QA_CA_CERT)).toBeInTheDocument() - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId(QA_CA_CERT), { target: { value: '321' }, }) }) expect(screen.getByTestId(NEW_CA_CERT)).toBeInTheDocument() - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId(NEW_CA_CERT), { target: { value: '123' }, }) @@ -580,20 +580,20 @@ describe('InstanceForm', () => { const submitBtn = screen.getByTestId(BTN_SUBMIT) const testConnectionBtn = screen.getByTestId(BTN_TEST_CONNECTION) - await act(() => { + await act(async () => { fireEvent.click(testConnectionBtn) }) - expect(handleTestConnection).toBeCalledWith( + expect(handleTestConnection).toHaveBeenCalledWith( expect.objectContaining({ newCaCert: '123', newCaCertName: '321', }), ) - await act(() => { + await act(async () => { fireEvent.click(submitBtn) }) - expect(handleSubmit).toBeCalledWith( + expect(handleSubmit).toHaveBeenCalledWith( expect.objectContaining({ newCaCert: '123', newCaCertName: '321', @@ -621,25 +621,25 @@ describe('InstanceForm', () => { ) fireEvent.click(screen.getByTestId('manual-form-tab-security')) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('tls-required-checkbox')) }) const submitBtn = screen.getByTestId(BTN_SUBMIT) const testConnectionBtn = screen.getByTestId(BTN_TEST_CONNECTION) - await act(() => { + await act(async () => { fireEvent.click(testConnectionBtn) }) - expect(handleTestConnection).toBeCalledWith( + expect(handleTestConnection).toHaveBeenCalledWith( expect.objectContaining({ tlsClientAuthRequired: true, }), ) - await act(() => { + await act(async () => { fireEvent.click(submitBtn) }) - expect(handleSubmit).toBeCalledWith( + expect(handleSubmit).toHaveBeenCalledWith( expect.objectContaining({ tlsClientAuthRequired: true, }), @@ -669,32 +669,32 @@ describe('InstanceForm', () => { fireEvent.click(screen.getByTestId('manual-form-tab-security')) expect(screen.getByTestId('select-cert')).toBeInTheDocument() - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('select-cert')) }) - await act(() => { + await act(async () => { fireEvent.click( container.querySelectorAll('.euiContextMenuItem__text')[0] || document, ) }) expect(screen.getByTestId('new-tsl-cert-pair-name')).toBeInTheDocument() - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId('new-tsl-cert-pair-name'), { target: { value: '123' }, }) }) expect(screen.getByTestId('new-tls-client-cert')).toBeInTheDocument() - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId('new-tls-client-cert'), { target: { value: '321' }, }) }) expect(screen.getByTestId('new-tls-client-cert-key')).toBeInTheDocument() - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId('new-tls-client-cert-key'), { target: { value: '231' }, }) @@ -702,11 +702,11 @@ describe('InstanceForm', () => { const submitBtn = screen.getByTestId(BTN_SUBMIT) - await act(() => { + await act(async () => { fireEvent.click(submitBtn) }) - expect(handleSubmit).toBeCalledWith( + expect(handleSubmit).toHaveBeenCalledWith( expect.objectContaining({ newTlsClientCert: '321', newTlsCertPairName: '123', @@ -917,8 +917,10 @@ describe('InstanceForm', () => { ) fireEvent.click(screen.getByTestId('manual-form-tab-security')) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('use-ssh')) + }) + await act(async () => { fireEvent.click( container.querySelector(RADIO_BTN_PRIVATE_KEY) as HTMLLabelElement, ) @@ -953,13 +955,13 @@ describe('InstanceForm', () => { expect(screen.getByTestId(BTN_SUBMIT)).not.toBeDisabled() fireEvent.click(screen.getByTestId('manual-form-tab-security')) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('use-ssh')) }) expect(screen.getByTestId(BTN_SUBMIT)).toBeDisabled() - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId('sshHost'), { target: { value: 'localhost' }, }) @@ -967,7 +969,7 @@ describe('InstanceForm', () => { expect(screen.getByTestId(BTN_SUBMIT)).toBeDisabled() - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId('sshUsername'), { target: { value: 'username' }, }) @@ -975,7 +977,7 @@ describe('InstanceForm', () => { expect(screen.getByTestId(BTN_SUBMIT)).toBeDisabled() - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId('sshPort'), { target: { value: '22' }, }) @@ -1003,16 +1005,16 @@ describe('InstanceForm', () => { expect(screen.getByTestId(BTN_SUBMIT)).not.toBeDisabled() fireEvent.click(screen.getByTestId('manual-form-tab-security')) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('use-ssh')) - fireEvent.click( - container.querySelector(RADIO_BTN_PRIVATE_KEY) as HTMLLabelElement, - ) }) + fireEvent.click( + container.querySelector(RADIO_BTN_PRIVATE_KEY) as HTMLLabelElement, + ) expect(screen.getByTestId(BTN_SUBMIT)).toBeDisabled() - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId('sshHost'), { target: { value: 'localhost' }, }) @@ -1026,7 +1028,7 @@ describe('InstanceForm', () => { expect(screen.getByTestId(BTN_SUBMIT)).toBeDisabled() - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId('sshPrivateKey'), { target: { value: 'PRIVATEKEY' }, }) @@ -1052,11 +1054,11 @@ describe('InstanceForm', () => { ) fireEvent.click(screen.getByTestId('manual-form-tab-security')) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('use-ssh')) }) - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId('sshHost'), { target: { value: 'localhost' }, }) @@ -1074,11 +1076,11 @@ describe('InstanceForm', () => { }) }) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId(BTN_SUBMIT)) }) - expect(handleSubmit).toBeCalledWith( + expect(handleSubmit).toHaveBeenCalledWith( expect.objectContaining({ sshHost: 'localhost', sshPort: '1771', @@ -1104,14 +1106,14 @@ describe('InstanceForm', () => { ) fireEvent.click(screen.getByTestId('manual-form-tab-security')) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId('use-ssh')) - fireEvent.click( - container.querySelector(RADIO_BTN_PRIVATE_KEY) as HTMLLabelElement, - ) }) + fireEvent.click( + container.querySelector(RADIO_BTN_PRIVATE_KEY) as HTMLLabelElement, + ) - await act(() => { + await act(async () => { fireEvent.change(screen.getByTestId('sshHost'), { target: { value: 'localhost' }, }) @@ -1133,11 +1135,11 @@ describe('InstanceForm', () => { }) }) - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId(BTN_SUBMIT)) }) - expect(handleSubmit).toBeCalledWith( + expect(handleSubmit).toHaveBeenCalledWith( expect.objectContaining({ sshHost: 'localhost', sshPort: '1771', @@ -1320,13 +1322,13 @@ describe('InstanceForm', () => {
, ) - await act(() => { + await act(async () => { fireEvent.keyDown(screen.getByTestId('form'), { key: 'Enter', code: 13, charCode: 13, }) }) - expect(handleSubmit).toBeCalled() + expect(handleSubmit).toHaveBeenCalled() }) }) diff --git a/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.spec.tsx b/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.spec.tsx index 222e3858d9..09d31380b1 100644 --- a/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.spec.tsx +++ b/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.spec.tsx @@ -23,11 +23,12 @@ describe('SentinelConnectionForm', () => { , ) - await act(() => { + await act(async () => { fireEvent.keyDown(screen.getByTestId('form'), { key: 'Enter', code: 13, @@ -35,7 +36,7 @@ describe('SentinelConnectionForm', () => { }) }) - expect(mockSubmit).toBeCalled() + expect(mockSubmit).toHaveBeenCalled() }) it('should render Footer', async () => { diff --git a/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.tsx b/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.tsx index 3635306fc3..3a4a891597 100644 --- a/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.tsx +++ b/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.tsx @@ -1,14 +1,10 @@ -import { - EuiFieldText, - EuiIcon, - EuiPopover, - EuiCheckbox, -} from '@elastic/eui' +import { EuiFieldText, EuiIcon, EuiPopover } from '@elastic/eui' import React, { memo } from 'react' import FilterSvg from 'uiSrc/assets/img/icons/filter.svg' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { FormField } from 'uiSrc/components/base/forms/FormField' +import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' import { useFilterTags } from './useFilterTags' import styles from './styles.module.scss' @@ -68,7 +64,7 @@ export const TagsCellHeader = memo(() => { {Object.keys(groupedTags).map((key) => (
- { }} /> {groupedTags[key].map((value) => ( -
- + { it('should call proper telemetry on Deploy', () => { fireEvent.click(screen.getByTestId('deploy-rdi-pipeline')) fireEvent.click(screen.getByTestId('deploy-confirm-btn')) - expect(sendEventTelemetry).toBeCalledWith({ + expect(sendEventTelemetry).toHaveBeenCalledWith({ event: TelemetryEvent.RDI_DEPLOY_CLICKED, eventData: { id: 'rdiInstanceId', @@ -76,15 +73,15 @@ describe('DeployPipelineButton', () => { const el = screen.getByTestId( 'reset-pipeline-checkbox', ) as HTMLInputElement - expect(el.checked).toBe(false) + expect(el).toHaveAttribute('aria-checked', 'false') fireEvent.click(el) - expect(el.checked).toBe(true) + expect(el).toHaveAttribute('aria-checked', 'true') fireEvent.click(screen.getByTestId('deploy-confirm-btn')) - expect(sendEventTelemetry).toBeCalledWith({ + expect(sendEventTelemetry).toHaveBeenCalledWith({ event: TelemetryEvent.RDI_DEPLOY_CLICKED, eventData: { id: 'rdiInstanceId', - reset: false, + reset: true, jobsNumber: 2, }, }) diff --git a/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx b/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx index e74b0c7ad5..35a4f33be0 100644 --- a/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx +++ b/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx @@ -1,5 +1,4 @@ import { - EuiCheckbox, EuiIcon, EuiPopover, EuiText, @@ -27,6 +26,7 @@ import { Spacer } from 'uiSrc/components/base/layout/spacer' import { OutsideClickDetector } from 'uiSrc/components/base/utils' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { RiRocketIcon } from 'uiSrc/components/base/icons' +import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' import styles from './styles.module.scss' export interface Props { @@ -145,7 +145,7 @@ const DeployPipelineButton = ({ loading, disabled, onReset }: Props) => {
- { // server.printHandlers() mswServer.close() }) + +global.ResizeObserver = jest.fn().mockImplementation(() => ({ + observe: jest.fn(), + unobserve: jest.fn(), + disconnect: jest.fn(), +})) diff --git a/yarn.lock b/yarn.lock index a25890a9fa..49513280d6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2383,10 +2383,10 @@ "@react-hook/latest" "^1.0.2" "@react-hook/passive-layout-effect" "^1.2.0" -"@redis-ui/components@^38.0.0": - version "38.0.0" - resolved "https://registry.yarnpkg.com/@redis-ui/components/-/components-38.0.0.tgz#9cd99d3077fc5ced530ce79a1149f43d27c410f5" - integrity sha512-RD0DaAhN3LEyR+/6ozDaHih2rRTeSZwmcmQdo+z1njIQN361sQ3FMFsb+dBHWCJTS5+U2EFFRxKFWETPClPI6w== +"@redis-ui/components@^38.1.3": + version "38.1.4" + resolved "https://registry.yarnpkg.com/@redis-ui/components/-/components-38.1.4.tgz#02e620f937629162539b2fb36f8b1505442fad24" + integrity sha512-13SDg3R4hQ1tGyOz8glk3NEuduTsnQpm5sjBf6AtsDHGmugFtQSn3JHvcOgVM+i4Ax6m42SvB6q/4nJD1Yygvg== dependencies: "@radix-ui/react-checkbox" "^1.0.3" "@radix-ui/react-collapsible" "^1.0.3" From 5f12ecf35d41056753ae813e6062eef1dc198820 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 4 Jun 2025 16:08:58 +0300 Subject: [PATCH 090/154] RI-7047: replace eui combo box * add AutoTag component * update CreateRedisearchIndex.tsx * update KeyTreeSettings.tsx * update tests --- .../base/forms/combo-box/AutoTag.spec.tsx | 35 +++ .../base/forms/combo-box/AutoTag.tsx | 216 ++++++++++++++++++ .../base/layout/flex/flex.styles.ts | 55 +++-- .../src/components/base/layout/flex/flex.tsx | 22 +- redisinsight/ui/src/constants/browser.ts | 5 +- .../CreateRedisearchIndex.tsx | 27 +-- .../CreateRedisearchIndexWrapper.spec.tsx | 21 +- .../KeyTreeSettings/KeyTreeSettings.spec.tsx | 36 +-- .../KeyTreeSettings/KeyTreeSettings.tsx | 21 +- 9 files changed, 371 insertions(+), 67 deletions(-) create mode 100644 redisinsight/ui/src/components/base/forms/combo-box/AutoTag.spec.tsx create mode 100644 redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx diff --git a/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.spec.tsx b/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.spec.tsx new file mode 100644 index 0000000000..e05c0df3aa --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.spec.tsx @@ -0,0 +1,35 @@ +import { getTagFromValue } from 'uiSrc/components/base/forms/combo-box/AutoTag' + +const defaultDelimiter = ' ' +describe('AutoTag', () => { + describe('getTagFromValue', () => { + it('should return null on empty string', () => { + const result = getTagFromValue('', defaultDelimiter) + expect(result).toBeNull() + }) + it.each([ + ['', defaultDelimiter], + ['a', defaultDelimiter], + [' ', defaultDelimiter], + ['abcd', defaultDelimiter], + ])( + 'should return null on single character string where delimiter is not present: `%s`, `%s`', + (value, delimiter) => { + const result = getTagFromValue(value, delimiter) + expect(result).toBeNull() + }, + ) + it.each([ + ['a,', ',', 'a'], + [' ,', ',', ' '], + ['abcd ', defaultDelimiter, 'abcd'], + ['abcd dcba', defaultDelimiter, 'abcd'], + ])( + 'should return correct value on value + delimiter string + whatever: `%s`, `%s` -> `%s`', + (value, delimiter, expected) => { + const result = getTagFromValue(value, delimiter) + expect(result).toEqual(expected) + }, + ) + }) +}) diff --git a/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx b/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx new file mode 100644 index 0000000000..7171552d9a --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx @@ -0,0 +1,216 @@ +import React, { useEffect, useState } from 'react' +import { Chip, FormField, Input } from '@redis-ui/components' +import cn from 'classnames' +import styled from 'styled-components' +import { CancelSlimIcon } from 'uiSrc/components/base/icons' +import { CommonProps } from 'uiSrc/components/base/theme/types' +import { Row } from 'uiSrc/components/base/layout/flex' +import { IconButton } from 'uiSrc/components/base/forms/buttons' + +export type AutoTagOption = { + label: string + key?: string + value?: T +} +export type AutoTagProps = Omit< + React.ComponentProps, + 'children' | 'onChange' +> & + CommonProps & { + isClearable?: boolean + placeholder?: string + delimiter?: string + selectedOptions?: AutoTagOption[] + onCreateOption?: (value: string, options?: AutoTagOption[]) => void + onChange?: (value: AutoTagOption[]) => void + size?: 'S' | 'M' + full?: boolean + } + +export function getTagFromValue(value: string, delimiter: string) { + const delimiterFirstIndex = value.indexOf(delimiter) + if (delimiterFirstIndex > -1) { + const firstValue = value.slice(0, delimiterFirstIndex) + if (firstValue !== '') { + return firstValue + } + } + return null +} + +export function filterOptions( + selection: AutoTagOption[], + value?: AutoTagOption['value'], + label?: AutoTagOption['label'], +) { + // remove option from selection + return selection.filter((option) => { + if (value) return option.value !== value + if (label) return option.label !== label + return false + }) +} + +const ClearButton = ({ + onClick, + shouldRender, +}: { + onClick: () => void + shouldRender: boolean +}) => { + if (!shouldRender) { + return null + } + return ( + + ) +} + +export const AutoTag = ({ + className, + isClearable = false, + placeholder, + selectedOptions, + onCreateOption, + delimiter = '', + onChange, + style, + size = 'S', + full = false, + ...rest +}: AutoTagProps) => { + const [selection, setSelection] = useState([]) + useEffect(() => { + if (selectedOptions) { + setSelection(selectedOptions) + } + }, [selectedOptions]) + const [tag, setTag] = useState('') + const createOption = (value: string) => { + // create a new option + const newOption = { + label: value, + value, + } + // add the new option to options + setTag('') + const newSelection = [...selection, newOption] + setSelection(newSelection) + // add the new option to selection + onCreateOption?.(value, newSelection) + } + const handleInputChange = (value: string) => { + const tag = getTagFromValue(value, delimiter) + if (tag !== null) { + createOption(tag) + return + } + setTag(value) + } + const handleEnter: React.KeyboardEventHandler = (e) => { + // todo: replace when keys constants are in scope + if (e.key === 'Enter') { + const tag = (e.target as HTMLInputElement).value.trim() + if (tag === null || tag.length === 0) { + return + } + createOption(tag) + } + } + + function getPlaceholder() { + return selectedOptions?.length && selectedOptions.length > 0 + ? undefined + : placeholder + } + + return ( + + + + {selection?.map(({ value, label }, idx) => { + const key = `${label}-${value}-${idx}` + const text = String(label || value || '') + return ( + { + // remove option from selection + const newSelection = filterOptions(selection, value, label) + setSelection(newSelection) + // call onChange + onChange?.(newSelection) + }} + /> + ) + })} + + { + setTag('') + setSelection([]) + // call onChange + onChange?.([]) + }} + shouldRender={ + isClearable && (tag.length > 0 || selection.length > 0) + } + /> + + + + ) +} + +const StyledWrapper = styled(Row)` + position: relative; + border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral600}; + border-radius: 0.4rem; + padding: 0.15rem 0.5rem; + background-color: ${({ theme }) => + theme.semantic.color.background.neutral100}; +` diff --git a/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts b/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts index 2f40cf1efe..d7c52e1026 100644 --- a/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts +++ b/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts @@ -81,6 +81,12 @@ const flexGroupStyles = { wrap: css` flex-wrap: wrap; `, + grow: css` + flex-grow: 1; + `, + noGrow: css` + flex-grow: 0; + `, centered: css` justify-content: center; align-items: center; @@ -171,26 +177,49 @@ export type FlexProps = PropsWithChildren & centered?: boolean responsive?: boolean wrap?: boolean + grow?: boolean full?: boolean } -export const StyledFlex = styled.div< - Omit & { $direction?: (typeof dirValues)[number] } ->` +type StyledFlexProps = Omit< + FlexProps, + | 'grow' + | 'full' + | 'gap' + | 'align' + | 'direction' + | 'justify' + | 'centered' + | 'responsive' + | 'wrap' +> & { + $grow?: boolean + $gap?: GapSizeType + $align?: FlexProps['align'] + $direction?: FlexProps['direction'] + $justify?: FlexProps['justify'] + $centered?: boolean + $responsive?: boolean + $wrap?: boolean + $full?: boolean +} +export const StyledFlex = styled.div` display: flex; align-items: stretch; - flex-grow: 1; - ${({ gap = 'none' }) => (gap ? flexGroupStyles.gapSizes[gap] : '')} - ${({ align = 'stretch' }) => (align ? flexGroupStyles.align[align] : '')} + ${({ $grow = true }) => + $grow ? flexGroupStyles.grow : flexGroupStyles.noGrow} + ${({ $gap = 'none' }) => ($gap ? flexGroupStyles.gapSizes[$gap] : '')} + ${({ $align = 'stretch' }) => ($align ? flexGroupStyles.align[$align] : '')} ${({ $direction = 'row' }) => $direction ? flexGroupStyles.direction[$direction] : ''} - ${({ justify = 'start' }) => - justify ? flexGroupStyles.justify[justify] : ''} - ${({ centered = false }) => (centered ? flexGroupStyles.centered : '')} - ${({ responsive = false }) => (responsive ? flexGroupStyles.responsive : '')} - ${({ wrap = false }) => (wrap ? flexGroupStyles.wrap : '')} - ${({ full = false, $direction = 'row' }) => - full + ${({ $justify = 'start' }) => + $justify ? flexGroupStyles.justify[$justify] : ''} + ${({ $centered = false }) => ($centered ? flexGroupStyles.centered : '')} + ${({ $responsive = false }) => + $responsive ? flexGroupStyles.responsive : ''} + ${({ $wrap = false }) => ($wrap ? flexGroupStyles.wrap : '')} + ${({ $full = false, $direction = 'row' }) => + $full ? $direction === 'row' || $direction === 'rowReverse' ? 'width: 100%' // if it is row make it full width : 'height: 100%;' // else, make it full height diff --git a/redisinsight/ui/src/components/base/layout/flex/flex.tsx b/redisinsight/ui/src/components/base/layout/flex/flex.tsx index d2cc6c5a5d..9083099a59 100644 --- a/redisinsight/ui/src/components/base/layout/flex/flex.tsx +++ b/redisinsight/ui/src/components/base/layout/flex/flex.tsx @@ -42,12 +42,32 @@ export const Grid = ({ children, className, ...rest }: GridProps) => { export const FlexGroup = ({ children, className, + grow, + justify, + gap, + wrap, + full, + align, direction, + responsive, + centered, ...rest }: FlexProps) => { const classes = classNames('RI-flex-group', className) return ( - + {children} ) diff --git a/redisinsight/ui/src/constants/browser.ts b/redisinsight/ui/src/constants/browser.ts index 08a379fc07..d80857d04f 100644 --- a/redisinsight/ui/src/constants/browser.ts +++ b/redisinsight/ui/src/constants/browser.ts @@ -1,7 +1,10 @@ import { EuiComboBoxOptionOption } from '@elastic/eui' import { KeyValueFormat, SortOrder } from './keys' -export const DEFAULT_DELIMITER: EuiComboBoxOptionOption = { label: ':' } +export const DEFAULT_DELIMITER: EuiComboBoxOptionOption = { + label: ':', + value: ':', +} export const DEFAULT_TREE_SORTING = SortOrder.ASC export const DEFAULT_SHOW_HIDDEN_RECOMMENDATIONS = false diff --git a/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx b/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx index b679650e86..c53a7b8dd0 100644 --- a/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx +++ b/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx @@ -1,5 +1,4 @@ import { - EuiComboBox, EuiFieldText, EuiFormFieldset, EuiLink, @@ -32,6 +31,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { AutoTag } from 'uiSrc/components/base/forms/combo-box/AutoTag' import { InfoIcon } from 'uiSrc/components/base/icons' import { FormField } from 'uiSrc/components/base/forms/FormField' import { Health } from 'uiSrc/components/base/text/Health' @@ -256,20 +256,17 @@ const CreateRedisearchIndex = ({ onClosePanel, onCreateIndex }: Props) => { - - - setPrefixes([...prefixes, { label: searchValue }]) - } - onChange={(selectedOptions) => setPrefixes(selectedOptions)} - className={styles.combobox} - data-testid="prefix-combobox" - /> - + + setPrefixes([...prefixes, { label: searchValue }]) + } + onChange={(selectedOptions) => setPrefixes(selectedOptions)} + className={styles.combobox} + data-testid="prefix-combobox" + /> { render() fireEvent.click(screen.getByTestId('create-index-close-panel')) - expect(onClose).toBeCalled() + expect(onClose).toHaveBeenCalled() onClose.mockRestore() }) @@ -49,7 +48,7 @@ describe('CreateRedisearchIndexWrapper', () => { render() fireEvent.click(screen.getByTestId('create-index-cancel-btn')) - expect(onClose).toBeCalled() + expect(onClose).toHaveBeenCalled() onClose.mockRestore() }) @@ -59,7 +58,7 @@ describe('CreateRedisearchIndexWrapper', () => { ) const comboboxInput = container.querySelector( - '[data-testid="prefix-combobox"] [data-test-subj="comboBoxSearchInput"]', + '[data-testid="prefix-combobox"] [data-test-subj="autoTagInput"]', ) as HTMLInputElement fireEvent.change(comboboxInput, { target: { value: 'val1' } }) @@ -67,11 +66,13 @@ describe('CreateRedisearchIndexWrapper', () => { fireEvent.keyDown(comboboxInput, { key: 'Enter', code: 13, charCode: 13 }) const containerLabels = container.querySelector( - '[data-test-subj="comboBoxInput"]', + '[data-test-subj="autoTagWrapper"]', )! expect(containerLabels.querySelector('[title="val1"]')).toBeInTheDocument() - fireEvent.click(containerLabels.querySelector('[title^="Remove val1"]')!) + fireEvent.click( + containerLabels.querySelector('[data-test-subj="autoTagChip"] button')!, + ) expect( containerLabels.querySelector('[title="val1"]'), ).not.toBeInTheDocument() @@ -96,13 +97,13 @@ describe('CreateRedisearchIndexWrapper', () => { const { queryByText, container } = render( , ) + const comboboxInput = container.querySelector( + '[data-testid="prefix-combobox"] [data-test-subj="autoTagInput"]', + ) as HTMLInputElement const containerLabels = container.querySelector( - '[data-test-subj="comboBoxInput"]', + '[data-test-subj="autoTagWrapper"]', )! - const comboboxInput = container.querySelector( - '[data-testid="prefix-combobox"] [data-test-subj="comboBoxSearchInput"]', - ) as HTMLInputElement fireEvent.change(screen.getByTestId('index-name'), { target: { value: 'index' }, diff --git a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.spec.tsx b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.spec.tsx index 784d7ba781..4c3700ef34 100644 --- a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.spec.tsx +++ b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.spec.tsx @@ -68,7 +68,7 @@ describe('KeyTreeDelimiter', () => { await waitForEuiPopoverVisible() const comboboxInput = document.querySelector( - '[data-testid="delimiter-combobox"] [data-test-subj="comboBoxSearchInput"]', + '[data-testid="delimiter-combobox"] [data-test-subj="autoTagInput"]', ) as HTMLInputElement expect(comboboxInput).toBeInTheDocument() @@ -83,14 +83,14 @@ describe('KeyTreeDelimiter', () => { const value = 'val' render() - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId(TREE_SETTINGS_TRIGGER_BTN)) }) await waitForEuiPopoverVisible() const comboboxInput = document.querySelector( - '[data-testid="delimiter-combobox"] [data-test-subj="comboBoxSearchInput"]', + '[data-testid="delimiter-combobox"] [data-test-subj="autoTagInput"]', ) as HTMLInputElement fireEvent.change(comboboxInput, { target: { value } }) @@ -98,27 +98,29 @@ describe('KeyTreeDelimiter', () => { fireEvent.keyDown(comboboxInput, { key: 'Enter', code: 13, charCode: 13 }) const containerLabels = document.querySelector( - '[data-test-subj="comboBoxInput"]', + '[data-test-subj="autoTagWrapper"]', )! expect( containerLabels.querySelector(`[title="${value}"]`), ).toBeInTheDocument() - fireEvent.click(containerLabels.querySelector('[title^="Remove :"]')!) + fireEvent.click( + containerLabels.querySelector('[data-test-subj="autoTagChip"] button')!, + ) expect(containerLabels.querySelector('[title=":"]')).not.toBeInTheDocument() - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId(SORTING_SELECT)) }) await waitForEuiPopoverVisible() - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId(SORTING_DESC_ITEM)) }) ;(sendEventTelemetry as jest.Mock).mockRestore() - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId(APPLY_BTN)) }) @@ -133,7 +135,7 @@ describe('KeyTreeDelimiter', () => { clearStoreActions(expectedActions), ) - expect(sendEventTelemetry).toBeCalledWith({ + expect(sendEventTelemetry).toHaveBeenCalledWith({ event: TelemetryEvent.TREE_VIEW_DELIMITER_CHANGED, eventData: { databaseId: INSTANCE_ID_MOCK, @@ -142,7 +144,7 @@ describe('KeyTreeDelimiter', () => { }, }) - expect(sendEventTelemetry).toBeCalledWith({ + expect(sendEventTelemetry).toHaveBeenCalledWith({ event: TelemetryEvent.TREE_VIEW_KEYS_SORTED, eventData: { databaseId: INSTANCE_ID_MOCK, @@ -155,19 +157,23 @@ describe('KeyTreeDelimiter', () => { it('"setBrowserTreeDelimiter" should be called with DEFAULT_DELIMITER after Apply change with empty input', async () => { render() - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId(TREE_SETTINGS_TRIGGER_BTN)) }) await waitForEuiPopoverVisible() const containerLabels = document.querySelector( - '[data-test-subj="comboBoxInput"]', + '[data-test-subj="autoTagWrapper"]', )! - fireEvent.click(containerLabels.querySelector('[title^="Remove :"]')!) - expect(containerLabels.querySelector('[title=":"]')).not.toBeInTheDocument() + fireEvent.click( + containerLabels.querySelector('[data-test-subj="autoTagChip"] button')!, + ) + expect( + containerLabels.querySelector('[data-test-subj="autoTagChip"]'), + ).not.toBeInTheDocument() - await act(() => { + await act(async () => { fireEvent.click(screen.getByTestId(APPLY_BTN)) }) diff --git a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.tsx b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.tsx index bdf9054e16..06d6b55b69 100644 --- a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.tsx +++ b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.tsx @@ -2,13 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react' import cx from 'classnames' import { useDispatch, useSelector } from 'react-redux' import { useParams } from 'react-router-dom' -import { - EuiComboBox, - EuiComboBoxOptionOption, - EuiIcon, - EuiPopover, - EuiSuperSelect, -} from '@elastic/eui' +import { EuiIcon, EuiPopover, EuiSuperSelect } from '@elastic/eui' import { isEqual } from 'lodash' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' @@ -33,6 +27,10 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { SettingsIcon } from 'uiSrc/components/base/icons' +import { + AutoTag, + AutoTagOption, +} from 'uiSrc/components/base/forms/combo-box/AutoTag' import styles from './styles.module.scss' export interface Props { @@ -55,7 +53,7 @@ const KeyTreeSettings = ({ loading }: Props) => { } = useSelector(appContextDbConfig) const [sorting, setSorting] = useState(treeViewSort) const [delimiters, setDelimiters] = - useState(treeViewDelimiter) + useState(treeViewDelimiter) const [isPopoverOpen, setIsPopoverOpen] = useState(false) @@ -148,10 +146,9 @@ const KeyTreeSettings = ({ loading }: Props) => { -
Delimiter
- Date: Wed, 4 Jun 2025 16:10:12 +0300 Subject: [PATCH 091/154] RI-7041: replace eui badge * add RiBadge.tsx * replace EuiBadge with RiBadge --- .../ui/src/assets/img/icons/profiler.svg | 13 ++++ .../components/base/display/badge/RiBadge.tsx | 15 ++++ .../components/base/icons/ProfilerIcon.tsx | 7 ++ .../ui/src/components/base/icons/index.ts | 1 + .../BottomGroupMinimized.tsx | 40 ++++++---- .../styles.module.scss | 10 +-- .../command-helper/CommandHelperWrapper.tsx | 17 ++--- .../command-helper-info/CHCommandInfo.tsx | 26 +++---- .../src/components/group-badge/GroupBadge.tsx | 76 ++++++++++--------- .../HighlightedFeature.tsx | 11 ++- .../keyboard-shortcut/KeyboardShortcut.tsx | 15 ++-- .../RedisUploadButton.spec.tsx | 7 +- .../navigation-menu/NavigationMenu.tsx | 11 +-- .../Notification/Notification.tsx | 11 +-- .../navigation-menu/styles.module.scss | 2 +- .../shortcuts-flyout/ShortcutsFlyout.tsx | 6 +- .../shortcuts-flyout/styles.module.scss | 7 +- .../src/components/GroupBadge/GroupBadge.tsx | 32 ++++---- .../ConnectivityOptions.tsx | 7 +- .../home/components/tags-cell/TagsCell.tsx | 17 +++-- .../publish-message/PublishMessage.tsx | 25 +++--- 21 files changed, 198 insertions(+), 158 deletions(-) create mode 100644 redisinsight/ui/src/assets/img/icons/profiler.svg create mode 100644 redisinsight/ui/src/components/base/display/badge/RiBadge.tsx create mode 100644 redisinsight/ui/src/components/base/icons/ProfilerIcon.tsx diff --git a/redisinsight/ui/src/assets/img/icons/profiler.svg b/redisinsight/ui/src/assets/img/icons/profiler.svg new file mode 100644 index 0000000000..f11485f81c --- /dev/null +++ b/redisinsight/ui/src/assets/img/icons/profiler.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/redisinsight/ui/src/components/base/display/badge/RiBadge.tsx b/redisinsight/ui/src/components/base/display/badge/RiBadge.tsx new file mode 100644 index 0000000000..4e1b5c8626 --- /dev/null +++ b/redisinsight/ui/src/components/base/display/badge/RiBadge.tsx @@ -0,0 +1,15 @@ +import { Badge } from '@redis-ui/components' +import React from 'react' + +type RiBadgeProps = Omit, 'label'> & { + children?: React.ReactNode + label?: React.ReactNode +} +export const RiBadge = ({ children, label, ...rest }: RiBadgeProps) => { + let internalLabel: React.ReactNode = label + if (children && !internalLabel) { + internalLabel = children + } + // Redis-UI badge accepts `string` as label, however in implementation it just renders it out, so any valid node will work + return +} diff --git a/redisinsight/ui/src/components/base/icons/ProfilerIcon.tsx b/redisinsight/ui/src/components/base/icons/ProfilerIcon.tsx new file mode 100644 index 0000000000..209de16a4e --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/ProfilerIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import ProfilerSvg from 'uiSrc/assets/img/icons/profiler.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const ProfilerIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index b349d7fb71..c079bf109c 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -10,6 +10,7 @@ export { Icon } from './Icon' export { LikeIcon } from './LikeIcon' export { MinusInCircleIcon } from './MinusInCircle' export { Play as PlayIcon } from './Play' +export { ProfilerIcon } from './ProfilerIcon' export { PlayFilledIcon } from './PlayFilled' export { PlusInCircle as PlusInCircleIcon } from './PlusInCircle' export { RawMode as RawModeIcon } from './RawMode' diff --git a/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx b/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx index aa5ed03dec..25c58bad0e 100644 --- a/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx +++ b/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from 'react' import cx from 'classnames' -import { EuiBadge, EuiIcon } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { useParams } from 'react-router-dom' import { EXTERNAL_LINKS } from 'uiSrc/constants/links' @@ -25,6 +25,12 @@ import { FeatureFlags } from 'uiSrc/constants' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { HideFor, ShowFor } from 'uiSrc/components/base/utils/ShowHide' +import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' +import { + CliIcon, + DocumentationIcon, + ProfilerIcon, +} from 'uiSrc/components/base/icons' import styles from '../../styles.module.scss' const BottomGroupMinimized = () => { @@ -92,28 +98,30 @@ const BottomGroupMinimized = () => { onClick={handleExpandCli} data-testid="expand-cli" > - - - CLI - + /> + - - - Command Helper - + label="Command Helper" + /> { onClick={handleExpandMonitor} data-testid="expand-monitor" > - - - Profiler - + label="Profiler" + /> diff --git a/redisinsight/ui/src/components/bottom-group-components/styles.module.scss b/redisinsight/ui/src/components/bottom-group-components/styles.module.scss index 4f1bd33903..42ea8b21f3 100644 --- a/redisinsight/ui/src/components/bottom-group-components/styles.module.scss +++ b/redisinsight/ui/src/components/bottom-group-components/styles.module.scss @@ -44,16 +44,10 @@ user-select: none; :global { - .euiBadge__text, .euiBadge__content { + [class*='RedisUI'] { cursor: pointer !important; } - - .euiBadge__text { - display: flex; - align-items: center; - } - - .euiIcon { + svg { margin-right: 4px; } } diff --git a/redisinsight/ui/src/components/command-helper/CommandHelperWrapper.tsx b/redisinsight/ui/src/components/command-helper/CommandHelperWrapper.tsx index fa2c1079df..26139dd0cc 100644 --- a/redisinsight/ui/src/components/command-helper/CommandHelperWrapper.tsx +++ b/redisinsight/ui/src/components/command-helper/CommandHelperWrapper.tsx @@ -1,7 +1,7 @@ -import { EuiBadge, EuiText } from '@elastic/eui' import React, { ReactElement, useEffect, useMemo } from 'react' import { useSelector } from 'react-redux' import { useParams } from 'react-router-dom' +import cn from 'classnames' import { CommandGroup, ICommand, ICommandArgGenerated } from 'uiSrc/constants' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' @@ -15,6 +15,7 @@ import { checkDeprecatedModuleCommand, } from 'uiSrc/utils' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' import CommandHelper from './CommandHelper' import CommandHelperHeader from './CommandHelperHeader' @@ -98,15 +99,11 @@ const CommandHelperWrapper = () => { return ( - - - {type} - - + {arg.generatedName} diff --git a/redisinsight/ui/src/components/command-helper/components/command-helper-info/CHCommandInfo.tsx b/redisinsight/ui/src/components/command-helper/components/command-helper-info/CHCommandInfo.tsx index f49112f2ef..054c26f239 100644 --- a/redisinsight/ui/src/components/command-helper/components/command-helper-info/CHCommandInfo.tsx +++ b/redisinsight/ui/src/components/command-helper/components/command-helper-info/CHCommandInfo.tsx @@ -1,11 +1,13 @@ import React from 'react' -import { EuiBadge, EuiText, EuiTextColor } from '@elastic/eui' +import { EuiTextColor } from '@elastic/eui' import { GroupBadge } from 'uiSrc/components' import { CommandGroup } from 'uiSrc/constants' import { IconButton } from 'uiSrc/components/base/forms/buttons' import { ArrowLeftIcon } from 'uiSrc/components/base/icons' +import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' +import { Row } from 'uiSrc/components/base/layout/flex' import styles from './styles.module.scss' export interface Props { @@ -24,7 +26,11 @@ const CHCommandInfo = (props: Props) => { } = props return ( -
+ { {args} {complexity && ( - - - {complexity} - - + /> )} -
+ ) } diff --git a/redisinsight/ui/src/components/group-badge/GroupBadge.tsx b/redisinsight/ui/src/components/group-badge/GroupBadge.tsx index 400028fa0f..19f71ac830 100644 --- a/redisinsight/ui/src/components/group-badge/GroupBadge.tsx +++ b/redisinsight/ui/src/components/group-badge/GroupBadge.tsx @@ -1,11 +1,12 @@ import cx from 'classnames' import React from 'react' -import { EuiBadge, EuiText } from '@elastic/eui' +import { EuiText } from '@elastic/eui' import { CommandGroup, KeyTypes, GROUP_TYPES_COLORS } from 'uiSrc/constants' import { getGroupTypeDisplay } from 'uiSrc/utils' import { IconButton } from 'uiSrc/components/base/forms/buttons' import { CancelSlimIcon } from 'uiSrc/components/base/icons' +import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' import styles from './styles.module.scss' export interface Props { @@ -22,39 +23,44 @@ const GroupBadge = ({ className = '', onDelete, compressed, -}: Props) => ( - - {!compressed && ( - - {getGroupTypeDisplay(type)} - - )} - {onDelete && ( - onDelete(type)} - className={styles.deleteIcon} - data-testid={`${type}-delete-btn`} - /> - )} - -) +}: Props) => { + // @ts-ignore + const backgroundColor = GROUP_TYPES_COLORS[type] ?? 'var(--defaultTypeColor)' + return ( + + {!compressed && ( + + {getGroupTypeDisplay(type)} + + )} + {onDelete && ( + onDelete(type)} + className={styles.deleteIcon} + data-testid={`${type}-delete-btn`} + /> + )} + + ) +} export default GroupBadge diff --git a/redisinsight/ui/src/components/hightlighted-feature/HighlightedFeature.tsx b/redisinsight/ui/src/components/hightlighted-feature/HighlightedFeature.tsx index 3415c01ae1..f0b27368df 100644 --- a/redisinsight/ui/src/components/hightlighted-feature/HighlightedFeature.tsx +++ b/redisinsight/ui/src/components/hightlighted-feature/HighlightedFeature.tsx @@ -1,10 +1,11 @@ import { isString } from 'lodash' -import { EuiBadge, EuiToolTip } from '@elastic/eui' +import { EuiToolTip } from '@elastic/eui' import { ToolTipPositions } from '@elastic/eui/src/components/tool_tip/tool_tip' import cx from 'classnames' import React from 'react' import { FeaturesHighlightingType } from 'uiSrc/constants/featuresHighlighting' +import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' import styles from './styles.module.scss' export interface Props { @@ -43,9 +44,11 @@ const HighlightedFeature = (props: Props) => { const BadgeHighlighting = () => ( <> {innerContent} - - New! - + ) diff --git a/redisinsight/ui/src/components/keyboard-shortcut/KeyboardShortcut.tsx b/redisinsight/ui/src/components/keyboard-shortcut/KeyboardShortcut.tsx index 0daa60da7f..2f675caf1c 100644 --- a/redisinsight/ui/src/components/keyboard-shortcut/KeyboardShortcut.tsx +++ b/redisinsight/ui/src/components/keyboard-shortcut/KeyboardShortcut.tsx @@ -1,8 +1,8 @@ import React from 'react' import { isString } from 'lodash' import cx from 'classnames' -import { EuiBadge, EuiText } from '@elastic/eui' +import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' import styles from './styles.module.scss' export interface Props { @@ -24,13 +24,12 @@ const KeyboardShortcut = (props: Props) => { {items.map((item: string | JSX.Element, index: number) => (
{index !== 0 &&
{separator}
} - - - {item} - - +
))}
diff --git a/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.spec.tsx b/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.spec.tsx index e168942f65..7d22f45088 100644 --- a/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.spec.tsx +++ b/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.spec.tsx @@ -3,12 +3,12 @@ import { cloneDeep } from 'lodash' import reactRouterDom from 'react-router-dom' import { AxiosError } from 'axios' import { + act, cleanup, fireEvent, mockedStore, render, screen, - act, } from 'uiSrc/utils/test-utils' import { customTutorialsBulkUploadSelector, @@ -116,7 +116,10 @@ describe('RedisUploadButton', () => { }) expect(checkResourceMock).toHaveBeenCalledWith('http://localhost:5001/text') - expect(store.getActions()).toEqual([addErrorNotification(error)]) + const expected = addErrorNotification(error) + expect(store.getActions()).toEqual( + expect.arrayContaining([expect.objectContaining(expected)]), + ) }) it('should call proper telemetry events', async () => { diff --git a/redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx b/redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx index 1725be1ffb..005204ed62 100644 --- a/redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx +++ b/redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx @@ -4,13 +4,7 @@ import { useHistory, useLocation } from 'react-router-dom' import cx from 'classnames' import { last } from 'lodash' import { useDispatch, useSelector } from 'react-redux' -import { - EuiBadge, - EuiIcon, - EuiLink, - EuiPageSideBar, - EuiToolTip, -} from '@elastic/eui' +import { EuiIcon, EuiLink, EuiPageSideBar, EuiToolTip } from '@elastic/eui' import HighlightedFeature, { Props as HighlightedFeatureProps, } from 'uiSrc/components/hightlighted-feature/HighlightedFeature' @@ -53,6 +47,7 @@ import { GithubIcon, } from 'uiSrc/components/base/icons' import { NavigationItemWrapper } from 'uiSrc/components/navigation-menu/NavigationItemWrapper' +import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' import CreateCloud from './components/create-cloud' import HelpMenu from './components/help-menu/HelpMenu' import NotificationMenu from './components/notifications-center' @@ -284,7 +279,7 @@ const NavigationMenu = () => { /> {nav.isBeta && ( - BETA + )}
diff --git a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/Notification/Notification.tsx b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/Notification/Notification.tsx index 09ebf1448f..87af375402 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/Notification/Notification.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/Notification/Notification.tsx @@ -1,4 +1,4 @@ -import { EuiBadge, EuiText, EuiTitle } from '@elastic/eui' +import { EuiText, EuiTitle } from '@elastic/eui' import { EuiTitleSize } from '@elastic/eui/src/components/title/title' import cx from 'classnames' import { format } from 'date-fns' @@ -10,6 +10,7 @@ import { IGlobalNotification } from 'uiSrc/slices/interfaces' import { truncateText } from 'uiSrc/utils' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' import styles from '../styles.module.scss' export interface Props { @@ -47,13 +48,13 @@ const Notification = (props: Props) => { {notification.category && ( - - {truncateText(notification.category, 32)} - + label={truncateText(notification.category, 32)} + /> )} diff --git a/redisinsight/ui/src/components/navigation-menu/styles.module.scss b/redisinsight/ui/src/components/navigation-menu/styles.module.scss index fbb2553174..c48fc13a5d 100644 --- a/redisinsight/ui/src/components/navigation-menu/styles.module.scss +++ b/redisinsight/ui/src/components/navigation-menu/styles.module.scss @@ -89,7 +89,7 @@ $sideBarWidth: 60px; transition: transform 250ms ease-in-out; pointer-events: none; - :global(.euiBadge__content) { + :global([class*='RedisUI']) { min-height: 12px !important; } } diff --git a/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.tsx b/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.tsx index dd9455db46..afd655acdf 100644 --- a/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.tsx +++ b/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.tsx @@ -6,7 +6,11 @@ import { appInfoSelector, setShortcutsFlyoutState } from 'uiSrc/slices/app/info' import { KeyboardShortcut } from 'uiSrc/components' import { BuildType } from 'uiSrc/constants/env' import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { Drawer, DrawerHeader, DrawerBody } from 'uiSrc/components/base/layout/drawer' +import { + Drawer, + DrawerHeader, + DrawerBody, +} from 'uiSrc/components/base/layout/drawer' import { SHORTCUTS, ShortcutGroup, separator } from './schema' import styles from './styles.module.scss' diff --git a/redisinsight/ui/src/components/shortcuts-flyout/styles.module.scss b/redisinsight/ui/src/components/shortcuts-flyout/styles.module.scss index 90f5f98d2e..19e96695b3 100644 --- a/redisinsight/ui/src/components/shortcuts-flyout/styles.module.scss +++ b/redisinsight/ui/src/components/shortcuts-flyout/styles.module.scss @@ -18,17 +18,14 @@ } } - :global(.euiBadge) { + :global([class*='Badge-RedisUI']) { height: 22px; min-width: 34px !important; display: flex; justify-content: center; align-items: center; - padding-top: 0 !important; - :global(.euiText) { - font-weight: 500; - } + font-weight: 500; :global(.badgeArrowUp), :global(.badgeArrowDown), :global(.shiftSymbol) { position: relative; diff --git a/redisinsight/ui/src/packages/redisearch/src/components/GroupBadge/GroupBadge.tsx b/redisinsight/ui/src/packages/redisearch/src/components/GroupBadge/GroupBadge.tsx index 58df772d3c..8c89027d71 100644 --- a/redisinsight/ui/src/packages/redisearch/src/components/GroupBadge/GroupBadge.tsx +++ b/redisinsight/ui/src/packages/redisearch/src/components/GroupBadge/GroupBadge.tsx @@ -1,5 +1,6 @@ import React from 'react' -import { EuiBadge, EuiText } from '@elastic/eui' +import cx from 'classnames' +import { RiBadge } from '../../../../../components/base/display/badge/RiBadge' import { GROUP_TYPES_COLORS, GROUP_TYPES_DISPLAY } from '../../constants' export interface Props { @@ -8,20 +9,19 @@ export interface Props { className?: string } -const GroupBadge = ({ type, name = '', className = '' }: Props) => ( - - - {GROUP_TYPES_DISPLAY[type] ?? type} - - -) +const GroupBadge = ({ type, name = '', className = '' }: Props) => { + // @ts-ignore + const groupTypeDisplay = GROUP_TYPES_DISPLAY[type] + // @ts-ignore + const backgroundColor = GROUP_TYPES_COLORS[type] ?? '#14708D' + return ( + + ) +} export default GroupBadge diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx index 8da15c588b..f9f9881bfc 100644 --- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx +++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { EuiBadge, EuiTitle } from '@elastic/eui' +import { EuiTitle } from '@elastic/eui' import cx from 'classnames' import { AddDbType } from 'uiSrc/pages/home/constants' import { FeatureFlagComponent, OAuthSsoHandlerDialog } from 'uiSrc/components' @@ -14,6 +14,7 @@ import RocketIcon from 'uiSrc/assets/img/oauth/rocket.svg?react' import { Col, FlexItem, Grid } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' +import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' import { CONNECTIVITY_OPTIONS } from '../../constants' import styles from './styles.module.scss' @@ -66,9 +67,7 @@ const ConnectivityOptions = (props: Props) => { }} data-testid="create-free-db-btn" > - - Free - + { return (
- - {firstTagText} - + {remainingTagsCount > 0 && ( {
} > - - +{remainingTagsCount} - + )}
diff --git a/redisinsight/ui/src/pages/pub-sub/components/publish-message/PublishMessage.tsx b/redisinsight/ui/src/pages/pub-sub/components/publish-message/PublishMessage.tsx index 9719474c03..b234634735 100644 --- a/redisinsight/ui/src/pages/pub-sub/components/publish-message/PublishMessage.tsx +++ b/redisinsight/ui/src/pages/pub-sub/components/publish-message/PublishMessage.tsx @@ -1,9 +1,4 @@ -import { - EuiBadge, - EuiFieldText, - EuiForm, - EuiIcon, -} from '@elastic/eui' +import { EuiFieldText, EuiForm, EuiIcon } from '@elastic/eui' import cx from 'classnames' import React, { ChangeEvent, @@ -26,6 +21,8 @@ import { useConnectionType } from 'uiSrc/components/hooks/useConnectionType' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { FormField } from 'uiSrc/components/base/forms/FormField' +import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' +import { CheckThinIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' const HIDE_BADGE_TIMER = 3000 @@ -127,26 +124,24 @@ const PublishMessage = () => { autoComplete="off" data-testid="field-message" /> - - {connectionType !== ConnectionType.Cluster && ( - <> + {affectedClients} - - + + )} - + From e98b60484862923494fd0a1552acebea5de2cb8b Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 5 Jun 2025 09:41:27 +0300 Subject: [PATCH 092/154] RI-7055: replace eui global toast * add RiToast.tsx, RiToaster.tsx * update notifications components, fix types in notifications.ts * update Notifications.tsx, error-messages.tsx to use RiToast components --- .../components/base/display/toast/RiToast.tsx | 78 +++++++ .../base/display/toast/RiToaster.tsx | 15 ++ .../components/base/display/toast/index.ts | 2 + .../ui/src/components/base/theme/types.ts | 5 + .../notifications/Notifications.tsx | 217 ++++++++---------- .../CloudCapiUnAuthorizedErrorContent.tsx | 2 +- .../DefaultErrorContent.tsx | 20 +- .../EncryptionErrorContent.spec.tsx | 2 +- .../EncryptionErrorContent.tsx | 30 ++- .../RdiDeployErrorContent.tsx | 23 +- .../notifications/error-messages.tsx | 130 +++++------ .../ui/src/slices/app/notifications.ts | 18 +- redisinsight/ui/src/slices/interfaces/app.ts | 2 +- 13 files changed, 302 insertions(+), 242 deletions(-) create mode 100644 redisinsight/ui/src/components/base/display/toast/RiToast.tsx create mode 100644 redisinsight/ui/src/components/base/display/toast/RiToaster.tsx create mode 100644 redisinsight/ui/src/components/base/display/toast/index.ts diff --git a/redisinsight/ui/src/components/base/display/toast/RiToast.tsx b/redisinsight/ui/src/components/base/display/toast/RiToast.tsx new file mode 100644 index 0000000000..5174d63e4f --- /dev/null +++ b/redisinsight/ui/src/components/base/display/toast/RiToast.tsx @@ -0,0 +1,78 @@ +import React from 'react' +import { + Toast, + toast, + ToastContentParams, + ToastOptions, +} from '@redis-ui/components' +import { EuiTextColor } from '@elastic/eui' +import styled from 'styled-components' +import { CommonProps, Theme } from 'uiSrc/components/base/theme/types' +import { CancelIcon } from 'uiSrc/components/base/icons' + +type RiToastProps = React.ComponentProps +export const RiToast = (props: RiToastProps) => + +const StyledMessage = styled.div<{ theme: Theme }>` + margin-bottom: ${({ theme }) => theme.core.space.space100}; +` + +export const riToast = ( + { + onClose, + actions, + message, + ...content + }: ToastContentParams & + CommonProps & { + onClose?: VoidFunction + }, + options?: ToastOptions | undefined, +) => { + const toastContent: ToastContentParams = { + ...content, + } + + if (typeof message === 'string') { + // TODO: replace with ColorText + let color = options?.variant + if (color === 'informative') { + // @ts-ignore + color = 'subdued' + } + toastContent.message = ( + // @ts-ignore + + {message} + + ) + } else { + toastContent.message = message + } + + if (onClose) { + toastContent.showCloseButton = false + toastContent.actions = { + ...actions, + secondary: { + label: '', + icon: CancelIcon, + closes: true, + onClick: onClose, + }, + } + } + if (actions && !onClose) { + toastContent.showCloseButton = false + toastContent.actions = actions + } + const toastOptions: ToastOptions = { + ...options, + delay: 100, + closeOnClick: false, + } + return toast(, toastOptions) +} +riToast.Variant = toast.Variant +riToast.Position = toast.Position +riToast.dismiss = toast.dismiss diff --git a/redisinsight/ui/src/components/base/display/toast/RiToaster.tsx b/redisinsight/ui/src/components/base/display/toast/RiToaster.tsx new file mode 100644 index 0000000000..c944f493eb --- /dev/null +++ b/redisinsight/ui/src/components/base/display/toast/RiToaster.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import { toast, Toaster } from '@redis-ui/components' + +type RiToasterProps = React.ComponentProps +const DEFAULT_LIFETIME = 6000 + +export const RiToaster = (props: RiToasterProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/display/toast/index.ts b/redisinsight/ui/src/components/base/display/toast/index.ts new file mode 100644 index 0000000000..70be61944b --- /dev/null +++ b/redisinsight/ui/src/components/base/display/toast/index.ts @@ -0,0 +1,2 @@ +export { RiToaster } from './RiToaster' +export { RiToast, riToast } from './RiToast' diff --git a/redisinsight/ui/src/components/base/theme/types.ts b/redisinsight/ui/src/components/base/theme/types.ts index e3833245f9..5abadeb853 100644 --- a/redisinsight/ui/src/components/base/theme/types.ts +++ b/redisinsight/ui/src/components/base/theme/types.ts @@ -1,3 +1,8 @@ +import { useTheme } from '@redis-ui/styles' + export type CommonProps = { className?: string + ['data-testid']?: string } + +export type Theme = ReturnType diff --git a/redisinsight/ui/src/components/notifications/Notifications.tsx b/redisinsight/ui/src/components/notifications/Notifications.tsx index d07f87b05f..18ba6b7a76 100644 --- a/redisinsight/ui/src/components/notifications/Notifications.tsx +++ b/redisinsight/ui/src/components/notifications/Notifications.tsx @@ -1,7 +1,6 @@ -import React from 'react' +import React, { useEffect, useRef } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { EuiGlobalToastList, EuiTextColor } from '@elastic/eui' -import { Toast } from '@elastic/eui/src/components/toast/global_toast_list' +import { EuiTextColor } from '@elastic/eui' import cx from 'classnames' import { errorsSelector, @@ -16,176 +15,152 @@ import { ApiEncryptionErrors } from 'uiSrc/constants/apiErrors' import { DEFAULT_ERROR_MESSAGE } from 'uiSrc/utils' import { showOAuthProgress } from 'uiSrc/slices/oauth/cloud' import { CustomErrorCodes } from 'uiSrc/constants' -import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry' - -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' +import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' +import { InfoIcon } from 'uiSrc/components/base/icons' +import { riToast, RiToaster } from 'uiSrc/components/base/display/toast' import errorMessages from './error-messages' import { InfiniteMessagesIds } from './components' import styles from './styles.module.scss' +const ONE_HOUR = 3_600_000 +const DEFAULT_ERROR_TITLE = 'Error' + const Notifications = () => { const messagesData = useSelector(messagesSelector) const errorsData = useSelector(errorsSelector) const infiniteNotifications = useSelector(infiniteNotificationsSelector) const dispatch = useDispatch() + const toastIdsRef = useRef(new Map()) - const removeToast = ({ id }: Toast) => { + const removeToast = (id: string) => { + if (toastIdsRef.current.has(id)) { + riToast.dismiss(toastIdsRef.current.get(id)) + toastIdsRef.current.delete(id) + } dispatch(removeMessage(id)) } - const onSubmitNotification = ({ id }: Toast, group?: string) => { + const onSubmitNotification = (id: string, group?: string) => { if (group === 'upgrade') { dispatch(setReleaseNotesViewed(true)) } dispatch(removeMessage(id)) } - const getSuccessText = ( - text: string | JSX.Element | JSX.Element[], - toast: Toast, - group?: string, - ) => ( - <> - {text} - - - - onSubmitNotification(toast, group)} - className={styles.toastSuccessBtn} - data-testid="submit-tooltip-btn" - > - Ok - - - - + const getSuccessText = (text: string | JSX.Element | JSX.Element[]) => ( + {text} ) - const getSuccessToasts = (data: IMessage[]) => - data.map(({ id = '', title = '', message = '', className, group }) => { - const toast: Toast = { - id, - iconType: 'iInCircle', - title: ( - - {title} - - ), - color: 'success', - className, - } - toast.text = getSuccessText(message, toast, group) - toast.onClose = () => removeToast(toast) - return toast + const showSuccessToasts = (data: IMessage[]) => + data.forEach(({ id = '', title = '', message = '', className, group }) => { + riToast( + { + className, + message: title, + description: getSuccessText(message), + customIcon: InfoIcon, + actions: { + primary: { + closes: true, + label: 'Ok', + onClick: () => { + onSubmitNotification(id, group) + removeToast(id) + }, + }, + }, + }, + { variant: riToast.Variant.Success }, + ) }) - const getErrorsToasts = (errors: IError[]) => - errors.map( + const showErrorsToasts = (errors: IError[]) => + errors.forEach( ({ id = '', message = DEFAULT_ERROR_MESSAGE, instanceId = '', name, - title, + title = DEFAULT_ERROR_TITLE, additionalInfo, }) => { + let toastId: ReturnType if (ApiEncryptionErrors.includes(name)) { - return errorMessages.ENCRYPTION( - id, - () => removeToast({ id }), - instanceId, - ) - } - - if ( + toastId = errorMessages.ENCRYPTION(() => removeToast(id), instanceId) + } else if ( additionalInfo?.errorCode === CustomErrorCodes.CloudCapiKeyUnauthorized ) { - return errorMessages.CLOUD_CAPI_KEY_UNAUTHORIZED( - { id, message, title }, + toastId = errorMessages.CLOUD_CAPI_KEY_UNAUTHORIZED( + { message, title }, additionalInfo, - () => removeToast({ id }), + () => removeToast(id), ) - } - - if ( + } else if ( additionalInfo?.errorCode === CustomErrorCodes.RdiDeployPipelineFailure ) { - return errorMessages.RDI_DEPLOY_PIPELINE({ id, title, message }, () => - removeToast({ id }), + toastId = errorMessages.RDI_DEPLOY_PIPELINE({ title, message }, () => + removeToast(id), ) + } else { + toastId = errorMessages.DEFAULT(message, () => removeToast(id), title) } - return errorMessages.DEFAULT( - id, - message, - () => removeToast({ id }), - title, - ) + toastIdsRef.current.set(id, toastId) }, ) - const getInfiniteToasts = (data: InfiniteMessage[]): Toast[] => - data.map((message: InfiniteMessage) => { + const showInfiniteToasts = (data: InfiniteMessage[]) => + data.forEach((message: InfiniteMessage) => { const { id, Inner, className = '' } = message - return { - id, - className: cx(styles.infiniteMessage, className), - text: Inner, - color: 'success', - onClose: () => { - switch (id) { - case InfiniteMessagesIds.oAuthProgress: - dispatch(showOAuthProgress(false)) - break - case InfiniteMessagesIds.databaseExists: - sendEventTelemetry({ - event: - TelemetryEvent.CLOUD_IMPORT_EXISTING_DATABASE_FORM_CLOSED, - }) - break - case InfiniteMessagesIds.subscriptionExists: - sendEventTelemetry({ - event: - TelemetryEvent.CLOUD_CREATE_DATABASE_IN_SUBSCRIPTION_FORM_CLOSED, - }) - break - case InfiniteMessagesIds.appUpdateAvailable: - sendEventTelemetry({ - event: TelemetryEvent.UPDATE_NOTIFICATION_CLOSED, - }) - break - - default: - break - } - - dispatch(removeInfiniteNotification(id)) + riToast( + { + className: cx(styles.infiniteMessage, className), + description: Inner, + onClose: () => { + switch (id) { + case InfiniteMessagesIds.oAuthProgress: + dispatch(showOAuthProgress(false)) + break + case InfiniteMessagesIds.databaseExists: + sendEventTelemetry({ + event: + TelemetryEvent.CLOUD_IMPORT_EXISTING_DATABASE_FORM_CLOSED, + }) + break + case InfiniteMessagesIds.subscriptionExists: + sendEventTelemetry({ + event: + TelemetryEvent.CLOUD_CREATE_DATABASE_IN_SUBSCRIPTION_FORM_CLOSED, + }) + break + case InfiniteMessagesIds.appUpdateAvailable: + sendEventTelemetry({ + event: TelemetryEvent.UPDATE_NOTIFICATION_CLOSED, + }) + break + default: + break + } + + dispatch(removeInfiniteNotification(id)) + }, }, - toastLifeTimeMs: 3_600_000, - } + { variant: riToast.Variant.Notice, autoClose: ONE_HOUR }, + ) }) - return ( - - ) + useEffect(() => { + showSuccessToasts(messagesData) + showErrorsToasts(errorsData) + showInfiniteToasts(infiniteNotifications) + }, [messagesData, errorsData, infiniteNotifications]) + + return } export default Notifications diff --git a/redisinsight/ui/src/components/notifications/components/cloud-capi-unauthorized/CloudCapiUnAuthorizedErrorContent.tsx b/redisinsight/ui/src/components/notifications/components/cloud-capi-unauthorized/CloudCapiUnAuthorizedErrorContent.tsx index 14fa08afdc..5908af47d3 100644 --- a/redisinsight/ui/src/components/notifications/components/cloud-capi-unauthorized/CloudCapiUnAuthorizedErrorContent.tsx +++ b/redisinsight/ui/src/components/notifications/components/cloud-capi-unauthorized/CloudCapiUnAuthorizedErrorContent.tsx @@ -48,7 +48,7 @@ const CloudCapiUnAuthorizedErrorContent = ({ return ( <> - {text} + {text} diff --git a/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx b/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx index c246c3da72..d6263c1c2c 100644 --- a/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx +++ b/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx @@ -1,26 +1,12 @@ -import { EuiTextColor } from '@elastic/eui' import React from 'react' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' +import { EuiTextColor } from '@elastic/eui' export interface Props { text: string | JSX.Element | JSX.Element[] - onClose?: () => void } // TODO: use i18n file for texts -const DefaultErrorContent = ({ text, onClose = () => {} }: Props) => ( - <> - {text} - - - Ok - - +const DefaultErrorContent = ({ text }: Props) => ( + {text} ) export default DefaultErrorContent diff --git a/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.spec.tsx b/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.spec.tsx index b28a1593af..7faf3ab857 100644 --- a/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.spec.tsx +++ b/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.spec.tsx @@ -34,6 +34,6 @@ describe('EncryptionErrorContent', () => { render() fireEvent.click(screen.getByTestId('toast-action-btn')) - expect(onClose).toBeCalled() + expect(onClose).toHaveBeenCalled() }) }) diff --git a/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx b/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx index da15d1606e..511891bf04 100644 --- a/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx +++ b/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx @@ -8,7 +8,7 @@ import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { DestructiveButton, - SecondaryButton, + EmptyButton, } from 'uiSrc/components/base/forms/buttons' export interface Props { @@ -18,7 +18,7 @@ export interface Props { // TODO: use i18n file for texts const EncryptionErrorContent = (props: Props) => { - const { onClose } = props + const { onClose, instanceId } = props const { pathname } = useLocation() const history = useHistory() const dispatch = useDispatch() @@ -31,12 +31,12 @@ const EncryptionErrorContent = (props: Props) => { } const disableEncryption = () => { - const instanceId = props.instanceId || getInstanceIdFromUrl() + const iId = instanceId || getInstanceIdFromUrl() dispatch( updateUserConfigSettingsAction({ agreements: { encryption: false } }), ) if (instanceId) { - history.push(Pages.homeEditInstance(instanceId)) + history.push(Pages.homeEditInstance(iId)) } if (onClose) { onClose() @@ -44,11 +44,11 @@ const EncryptionErrorContent = (props: Props) => { } return ( <> - + Check the system keychain or disable encryption to proceed. - + Disabling encryption will result in storing sensitive information locally in plain text. Re-enter database connection information to work with databases. @@ -67,16 +67,14 @@ const EncryptionErrorContent = (props: Props) => {
-
- - Cancel - -
+ + Cancel + diff --git a/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.tsx b/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.tsx index b148263edc..ca6982d1d1 100644 --- a/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.tsx +++ b/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.tsx @@ -28,19 +28,20 @@ const RdiDeployErrorContent = (props: Props) => { return ( <> - + - Review the error log for details. - - - Download Error Log File - - +
Review the error log for details.
+ + Download Error Log File + diff --git a/redisinsight/ui/src/components/notifications/error-messages.tsx b/redisinsight/ui/src/components/notifications/error-messages.tsx index ddf1ac02f2..2f121961fc 100644 --- a/redisinsight/ui/src/components/notifications/error-messages.tsx +++ b/redisinsight/ui/src/components/notifications/error-messages.tsx @@ -1,91 +1,83 @@ import React from 'react' -import { EuiTextColor } from '@elastic/eui' -import { Toast } from '@elastic/eui/src/components/toast/global_toast_list' +import { riToast } from 'uiSrc/components/base/display/toast' +import { InfoIcon, ToastDangerIcon } from 'uiSrc/components/base/icons' import RdiDeployErrorContent from './components/rdi-deploy-error-content' import { EncryptionErrorContent, DefaultErrorContent } from './components' import CloudCapiUnAuthorizedErrorContent from './components/cloud-capi-unauthorized' -const TOAST_LIFE_TIME = 1000 * 60 * 60 * 12 // 12hr - // TODO: use i18n file for texts export default { - DEFAULT: ( - id: string, - text: any, - onClose = () => {}, - title: string = 'Error', - ): Toast => ({ - id, - 'data-test-subj': 'toast-error', - color: 'danger', - iconType: 'alert', - onClose, - title: ( - - {title} - + DEFAULT: (text: any, onClose = () => {}, title: string = 'Error') => + riToast( + { + 'data-testid': 'toast-error', + customIcon: ToastDangerIcon, + message: title, + description: , + actions: { + primary: { + label: 'OK', + closes: true, + onClick: onClose, + }, + }, + }, + { variant: riToast.Variant.Danger }, ), - text: , - }), - ENCRYPTION: (id: string, onClose = () => {}, instanceId = ''): Toast => ({ - id, - 'data-test-subj': 'toast-error-encryption', - color: 'danger', - iconType: 'iInCircle', - onClose, - toastLifeTimeMs: TOAST_LIFE_TIME, - title: ( - - Unable to decrypt - + ENCRYPTION: (onClose = () => {}, instanceId = '') => + riToast( + { + 'data-testid': 'toast-error-encryption', + customIcon: InfoIcon, + message: 'Unable to decrypt', + description: ( + + ), + showCloseButton: false, + }, + { variant: riToast.Variant.Danger }, ), - text: , - }), CLOUD_CAPI_KEY_UNAUTHORIZED: ( { - id, message, title, }: { - id: string message: string | JSX.Element title?: string }, additionalInfo: Record, - onClose?: () => void, - ): Toast => ({ - id, - 'data-test-subj': 'toast-error-cloud-capi-key-unauthorized', - color: 'danger', - iconType: 'alert', - onClose, - title: ( - - {title} - - ), - text: ( - + onClose: () => void, + ) => + riToast( + { + 'data-testid': 'toast-error-cloud-capi-key-unauthorized', + customIcon: ToastDangerIcon, + message: title, + showCloseButton: false, + description: ( + + ), + }, + { variant: riToast.Variant.Danger }, ), - }), RDI_DEPLOY_PIPELINE: ( - { id, title, message }: { id: string; title?: string; message: string }, - onClose?: () => void, - ): Toast => ({ - id, - 'data-test-subj': 'toast-error-deploy', - color: 'danger', - iconType: 'alert', - onClose, - title: ( - - {title} - + { title, message }: { title?: string; message: string }, + onClose: () => void, + ) => + riToast( + { + 'data-testid': 'toast-error-deploy', + customIcon: ToastDangerIcon, + onClose, + message: title, + description: ( + + ), + }, + { variant: riToast.Variant.Danger }, ), - text: , - }), } diff --git a/redisinsight/ui/src/slices/app/notifications.ts b/redisinsight/ui/src/slices/app/notifications.ts index 773471e3a1..5e70d6c9a0 100644 --- a/redisinsight/ui/src/slices/app/notifications.ts +++ b/redisinsight/ui/src/slices/app/notifications.ts @@ -10,11 +10,13 @@ import { Maybe, Nullable, } from 'uiSrc/utils' +import { NotificationsDto } from 'apiSrc/modules/notification/dto' import { - NotificationsDto, - NotificationDto, -} from 'apiSrc/modules/notification/dto' -import { IError, InfiniteMessage, StateAppNotifications } from '../interfaces' + IError, + IGlobalNotification, + InfiniteMessage, + StateAppNotifications, +} from '../interfaces' import { AppDispatch, RootState } from '../store' @@ -35,6 +37,12 @@ export const initialState: StateAppNotifications = { export interface IAddInstanceErrorPayload extends AxiosError { instanceId?: string + response?: AxiosError['response'] & { + data: { + title?: string + additionalInfo?: Record + } + } } // A slice for recipes const notificationsSlice = createSlice({ @@ -125,7 +133,7 @@ const notificationsSlice = createSlice({ }, setLastReceivedNotification: ( state, - { payload }: { payload: Nullable }, + { payload }: { payload: Nullable }, ) => { state.notificationCenter.lastReceivedNotification = payload }, diff --git a/redisinsight/ui/src/slices/interfaces/app.ts b/redisinsight/ui/src/slices/interfaces/app.ts index 5c72ed299e..6e55a7a617 100644 --- a/redisinsight/ui/src/slices/interfaces/app.ts +++ b/redisinsight/ui/src/slices/interfaces/app.ts @@ -242,7 +242,7 @@ export interface IGlobalNotification { timestamp: number title: string body: string - read: boolean + read?: boolean category?: string categoryColor?: string } From 5fc580037dab1705e34e9214bf40ae5f9a4f51db Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 5 Jun 2025 10:32:54 +0300 Subject: [PATCH 093/154] RI-7070: RI-7072 replace eui text, eui colortext * add/refactor text components * replace EuiText, EuiTextColor --- .../components/auto-refresh/AutoRefresh.tsx | 19 ++- .../components/base/layout/spacer/index.ts | 1 + .../ui/src/components/base/text/ColorText.tsx | 20 ++++ .../ui/src/components/base/text/Health.tsx | 25 ---- .../src/components/base/text/HealthText.tsx | 30 +++++ .../ui/src/components/base/text/Text.tsx | 32 +++++ .../ui/src/components/base/text/index.ts | 3 + .../src/components/base/text/text.styles.ts | 111 ++++++++++++++++++ .../cli/components/cli-header/CliHeader.tsx | 5 +- .../CommandHelper/CommandHelper.tsx | 23 ++-- .../CommandHelperHeader.tsx | 5 +- .../command-helper/CommandHelperWrapper.tsx | 1 + .../command-helper-info/CHCommandInfo.tsx | 8 +- .../CHSearchOutput.tsx | 19 +-- .../CHSearchFilter/CHSearchFilter.tsx | 17 +-- .../ConsentOption/ConsentOption.tsx | 13 +- .../ConsentsPrivacy/ConsentsPrivacy.tsx | 7 +- .../consents-settings/ConsentsSettings.tsx | 30 ++--- .../DatabaseListModules.tsx | 16 +-- .../explore-guides/ExploreGuides.tsx | 7 +- .../components/field-message/FieldMessage.tsx | 7 +- .../src/components/group-badge/GroupBadge.tsx | 8 +- .../import-file-modal/ImportFileModal.tsx | 17 ++- .../inline-item-editor/InlineItemEditor.tsx | 10 +- .../instance-header/InstanceHeader.tsx | 13 +- .../components/ShortInstanceInfo.tsx | 9 +- .../InstancesNavigationPopover.tsx | 10 +- .../instances-list/InstancesList.tsx | 10 +- .../user-profile/UserProfileBadge.tsx | 40 +++---- .../components/delete-action/DeleteAction.tsx | 9 +- .../components/export-action/ExportAction.tsx | 17 ++- .../keyboard-shortcut/KeyboardShortcut.tsx | 1 + .../components/keys-summary/KeysSummary.tsx | 23 ++-- .../components/RunConfirmationPopover.tsx | 7 +- .../RedisUploadButton/RedisUploadButton.tsx | 7 +- .../messages/cli-output/cliOutput.tsx | 35 +++--- .../database-not-opened/DatabaseNotOpened.tsx | 7 +- .../FilterNotAvailable.tsx | 16 ++- .../ModuleNotLoadedMinimalized.tsx | 15 +-- .../module-not-loaded/ModuleNotLoaded.tsx | 25 ++-- .../components/monitor/Monitor/Monitor.tsx | 11 +- .../monitor/MonitorHeader/MonitorHeader.tsx | 5 +- .../monitor/MonitorLog/MonitorLog.tsx | 7 +- .../MonitorOutputList/MonitorOutputList.tsx | 6 +- .../components/help-menu/HelpMenu.tsx | 18 +-- .../Notification/Notification.tsx | 12 +- .../NotificationCenter.tsx | 7 +- .../notifications/Notifications.tsx | 5 +- .../CloudCapiUnAuthorizedErrorContent.tsx | 5 +- .../DefaultErrorContent.tsx | 7 +- .../EncryptionErrorContent.tsx | 10 +- .../infinite-messages/InfiniteMessages.tsx | 61 +++++----- .../RdiDeployErrorContent.tsx | 6 +- .../notifications/error-messages.tsx | 2 + .../notifications/success-messages.tsx | 38 +++--- .../OAuthSelectAccountDialog.tsx | 11 +- .../oauth-select-plan/OAuthSelectPlan.tsx | 25 ++-- .../OAuthAutodiscovery.tsx | 13 +- .../oauth-create-db/OAuthCreateDb.tsx | 13 +- .../oauth-sso/oauth-sign-in/OAuthSignIn.tsx | 5 +- .../oauth-advantages/OAuthAdvantages.tsx | 15 ++- .../oauth-sso-form/OAuthSsoForm.tsx | 9 +- .../OAuthSocialButtons.tsx | 5 +- .../onboarding-tour/OnboardingTour.tsx | 11 +- .../src/components/promo-link/PromoLink.tsx | 27 ++--- .../query/query-actions/QueryActions.tsx | 7 +- .../QueryCardCliPlugin/QueryCardCliPlugin.tsx | 5 +- .../QueryCardCliResultWrapper.tsx | 25 ++-- .../QueryCardHeader/QueryCardHeader.tsx | 30 ++--- .../query/query-tutorials/QueryTutorials.tsx | 5 +- .../rdi-instance-header/RdiInstanceHeader.tsx | 9 +- .../content-element/ContentElement.tsx | 19 +-- .../RecommendationCopyComponent.tsx | 10 +- .../RecommendationVoting.tsx | 6 +- .../components/vote-option/VoteOption.tsx | 11 +- .../components/settings-item/SettingItem.tsx | 16 +-- .../expert-chat-header/ExpertChatHeader.tsx | 11 +- .../NoIndexesInitialMessage.tsx | 13 +- .../components/shared/chat-form/ChatForm.tsx | 8 +- .../components/shared/chat-history/texts.tsx | 21 ++-- .../shared/restart-chat/RestartChat.tsx | 7 +- .../panels/ai-assistant/components/texts.tsx | 44 +++---- .../WelcomeAiAssistant.tsx | 15 +-- .../DeleteTutorialButton.tsx | 9 +- .../EnablementArea/components/Group/Group.tsx | 7 +- .../components/InternalPage/InternalPage.tsx | 13 +- .../components/PlainText/PlainText.tsx | 6 +- .../UploadTutorialForm/UploadTutorialForm.tsx | 5 +- .../LiveTimeRecommendations.tsx | 16 +-- .../popover-run-analyze/PopoverRunAnalyze.tsx | 9 +- .../recommendation/Recommendation.tsx | 6 +- .../welcome-screen/WelcomeScreen.tsx | 22 ++-- .../src/components/upload-file/UploadFile.tsx | 5 +- .../upload-warning/UploadWarning.tsx | 8 +- .../components/virtual-grid/VirtualGrid.tsx | 7 +- .../components/virtual-table/VirtualTable.tsx | 19 +-- redisinsight/ui/src/constants/help-texts.tsx | 7 +- redisinsight/ui/src/constants/texts.tsx | 30 ++--- .../src/components/GroupBadge/GroupBadge.tsx | 2 + .../TableInfoResult/TableInfoResult.tsx | 27 ++--- .../components/TableResult/TableResult.tsx | 12 +- .../RedisCloudDatabasesResult.tsx | 8 +- .../RedisCloudDatabasesResultPage.tsx | 21 ++-- .../RedisCloudDatabases.tsx | 28 ++--- .../RedisCloudDatabasesPage.tsx | 9 +- .../RedisCloudSubscriptions.tsx | 54 ++++----- .../RedisCloudSubscriptionsPage.tsx | 5 +- .../SentinelDatabasesResultPage.tsx | 11 +- .../SentinelDatabasesResult.tsx | 8 +- .../SentinelDatabasesPage.tsx | 5 +- .../SentinelDatabases/SentinelDatabases.tsx | 30 ++--- .../browser/components/add-key/AddKey.tsx | 6 +- .../AddKeyCommonFields/AddKeyCommonFields.tsx | 8 +- .../add-key/AddKeyReJSON/AddKeyReJSON.tsx | 5 +- .../BulkActionSummary/BulkActionSummary.tsx | 35 +++--- .../BulkActionsInfo/BulkActionsInfo.tsx | 26 ++-- .../bulk-actions/BulkDelete/BulkDelete.tsx | 12 +- .../BulkDeleteContent/BulkDeleteContent.tsx | 8 +- .../BulkDeleteFooter/BulkDeleteFooter.tsx | 7 +- .../BulkDeleteSummary/BulkDeleteSummary.tsx | 11 +- .../bulk-actions/BulkUpload/BulkUpload.tsx | 30 ++--- .../CreateRedisearchIndex.tsx | 11 +- .../CreateRedisearchIndexWrapper.tsx | 7 +- .../delete-key-popover/DeleteKeyPopover.tsx | 9 +- .../filter-key-type/FilterKeyType.tsx | 10 +- .../components/key-row-name/KeyRowName.tsx | 7 +- .../components/key-row-size/KeyRowSize.tsx | 11 +- .../components/key-row-ttl/KeyRowTTL.tsx | 16 +-- .../load-sample-data/LoadSampleData.tsx | 9 +- .../OnboardingStartPopover.tsx | 7 +- .../popover-delete/PopoverDelete.tsx | 9 +- .../KeyDetailsHeaderDelete.tsx | 9 +- .../KeyDetailsHeaderFormatter.tsx | 11 +- .../KeyDetailsHeaderName.tsx | 7 +- .../KeyDetailsHeaderSizeLength.tsx | 13 +- .../KeyDetailsHeaderTTL.tsx | 17 +-- .../hash-details-table/HashDetailsTable.tsx | 8 +- .../list-details-table/ListDetailsTable.tsx | 7 +- .../RemoveListElements.tsx | 14 +-- .../ModulesTypeDetails.tsx | 9 +- .../no-key-selected/NoKeySelected.tsx | 9 +- .../components/add-item/AddItem.tsx | 10 +- .../components/add-item/ConfirmOverwrite.tsx | 11 +- .../add-set-members/AddSetMembers.tsx | 9 +- .../set-details-table/SetDetailsTable.tsx | 9 +- .../consumers-view/ConsumersViewWrapper.tsx | 7 +- .../groups-view/GroupsViewWrapper.tsx | 24 ++-- .../MessageAckPopover/MessageAckPopover.tsx | 7 +- .../MessageClaimPopover.tsx | 19 +-- .../messages-view/MessagesViewWrapper.tsx | 14 +-- .../StreamDataViewWrapper.tsx | 27 +++-- .../StringDetailsValue.tsx | 7 +- .../TooLongKeyNameDetails.tsx | 5 +- .../UnsupportedTypeDetails.tsx | 7 +- .../zset-details-table/ZSetDetailsTable.tsx | 8 +- .../shared/editable-input/EditableInput.tsx | 8 +- .../editable-textarea/EditableTextArea.tsx | 8 +- .../ClusterDetailsHeader.tsx | 9 +- .../EmptyAnalysisMessage.tsx | 9 +- .../components/header/Header.tsx | 15 +-- .../recommendations-view/Recommendations.tsx | 8 +- .../components/top-keys/Table.tsx | 19 +-- .../CloudConnectionForm.tsx | 6 +- .../database-alias/DatabaseAlias.tsx | 7 +- .../DatabasesListWrapper.tsx | 23 ++-- .../DatabaseListHeader.tsx | 1 - .../ManageTagsModal.tsx | 15 ++- .../TagSuggestions.tsx | 7 +- .../components/empty-message/EmptyMessage.tsx | 7 +- .../src/pages/home/components/form/DbInfo.tsx | 56 ++++----- .../pages/home/components/form/Messages.tsx | 18 +-- .../form/sentinel/DbInfoSentinel.tsx | 28 ++--- .../form/sentinel/SentinelHostPort.tsx | 10 +- .../form/sentinel/SentinelMasterDatabase.tsx | 14 +-- .../import-database/ImportDatabase.tsx | 21 ++-- .../not-found-error/NotFoundErrorPage.tsx | 7 +- .../EmptyMessagesList/EmptyMessagesList.tsx | 17 +-- .../subscription-panel/SubscriptionPanel.tsx | 15 +-- .../ClickableAppendInfo.tsx | 7 +- .../components/patternsInfo/PatternsInfo.tsx | 7 +- .../ConfirmationPopover.tsx | 9 +- .../rdi/home/empty-message/EmptyMessage.tsx | 7 +- .../instance-list/RdiInstancesListWrapper.tsx | 8 +- .../DeployPipelineButton.tsx | 10 +- .../FetchPipelinePopover.tsx | 12 +- .../components/jobs-panel/Panel.spec.tsx | 10 +- .../components/jobs-panel/Panel.tsx | 22 ++-- .../components/jobs-tree/JobsTree.tsx | 11 +- .../components/navigation/Navigation.tsx | 5 +- .../SourcePipelineModal.tsx | 16 +-- .../components/tab/Tab.tsx | 14 +-- .../components/template-form/TemplateForm.tsx | 4 +- .../TestConnectionsPanel.tsx | 19 +-- .../components/upload-dialog/UploadDialog.tsx | 11 +- .../pages/config/Config.tsx | 16 +-- .../rdi/pipeline-management/pages/job/Job.tsx | 15 +-- .../pages/rdi/statistics/StatisticsPage.tsx | 7 +- .../src/pages/rdi/statistics/empty/Empty.tsx | 9 +- .../redis-cluster/RedisClusterDatabases.tsx | 28 ++--- .../RedisClusterDatabasesPage.tsx | 19 ++- .../RedisClusterDatabasesResult.tsx | 6 +- .../edit-connection/EditConnection.tsx | 1 - .../ui/src/pages/settings/SettingsPage.tsx | 6 +- .../cloud-settings/CloudSettings.tsx | 16 +-- .../user-api-keys-table/UserApiKeysTable.tsx | 7 +- .../datetime-formatter/DateTimeFormatter.tsx | 19 +-- .../components/datetime-form/DatetimeForm.tsx | 10 +- .../ui/src/pages/slow-log/SlowLogPage.tsx | 21 ++-- .../slow-log/components/Actions/Actions.tsx | 12 +- .../components/EmptySlowLog/EmptySlowLog.tsx | 7 +- .../SlowLogConfig/SlowLogConfig.tsx | 12 +- .../components/SlowLogTable/SlowLogTable.tsx | 11 +- .../WbNoResultsMessage.tsx | 15 +-- 213 files changed, 1530 insertions(+), 1382 deletions(-) create mode 100644 redisinsight/ui/src/components/base/text/ColorText.tsx delete mode 100644 redisinsight/ui/src/components/base/text/Health.tsx create mode 100644 redisinsight/ui/src/components/base/text/HealthText.tsx create mode 100644 redisinsight/ui/src/components/base/text/Text.tsx create mode 100644 redisinsight/ui/src/components/base/text/index.ts create mode 100644 redisinsight/ui/src/components/base/text/text.styles.ts diff --git a/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx b/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx index e8538e6498..46bbc79e0c 100644 --- a/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx +++ b/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx @@ -1,11 +1,5 @@ import React, { useEffect, useState } from 'react' -import { - EuiIcon, - EuiPopover, - EuiSwitch, - EuiTextColor, - EuiToolTip, -} from '@elastic/eui' +import { EuiIcon, EuiPopover, EuiSwitch, EuiToolTip } from '@elastic/eui' import cx from 'classnames' import { ChevronDownIcon, RefreshIcon } from 'uiSrc/components/base/icons' import { @@ -18,6 +12,7 @@ import InlineItemEditor from 'uiSrc/components/inline-item-editor' import { localStorageService } from 'uiSrc/services' import { BrowserStorageItem } from 'uiSrc/constants' import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { ColorText } from 'uiSrc/components/base/text' import { DEFAULT_REFRESH_RATE, DURATION_FIRST_REFRESH_TIME, @@ -209,7 +204,7 @@ const AutoRefresh = ({ })} data-testid={getDataTestid('auto-refresh-container')} > - + {displayText && ( {enableAutoRefresh ? 'Auto refresh:' : 'Last refresh:'} @@ -225,7 +220,7 @@ const AutoRefresh = ({ {` ${enableAutoRefresh ? refreshRateMessage : refreshMessage}`} )} - +
Refresh rate:
{!editingRate && ( - setEditingRate(true)} @@ -292,7 +287,7 @@ const AutoRefresh = ({
- + )} {editingRate && ( <> @@ -311,7 +306,7 @@ const AutoRefresh = ({ onApply={(value) => handleApplyAutoRefreshRate(value)} />
- {' s'} + {' s'} )}
diff --git a/redisinsight/ui/src/components/base/layout/spacer/index.ts b/redisinsight/ui/src/components/base/layout/spacer/index.ts index d098f9e30c..16adaabf1e 100644 --- a/redisinsight/ui/src/components/base/layout/spacer/index.ts +++ b/redisinsight/ui/src/components/base/layout/spacer/index.ts @@ -1 +1,2 @@ export { Spacer } from './spacer' +export type { SpacerSize } from './spacer.styles' diff --git a/redisinsight/ui/src/components/base/text/ColorText.tsx b/redisinsight/ui/src/components/base/text/ColorText.tsx new file mode 100644 index 0000000000..6fb3b49584 --- /dev/null +++ b/redisinsight/ui/src/components/base/text/ColorText.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import cn from 'classnames' +import { + ColorTextProps, + StyledColorText, +} from 'uiSrc/components/base/text/text.styles' + +export const ColorText = ({ + color, + component = 'span', + className, + ...rest +}: ColorTextProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/text/Health.tsx b/redisinsight/ui/src/components/base/text/Health.tsx deleted file mode 100644 index 8136df88e5..0000000000 --- a/redisinsight/ui/src/components/base/text/Health.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' -import { Typography } from '@redis-ui/components' -import styled from 'styled-components' -import { Row } from 'uiSrc/components/base/layout/flex' - -type BodyProps = React.ComponentProps -type ColorType = BodyProps['color'] | (string & {}) -export type HealthProps = Omit & { - color?: ColorType -} -const Indicator = styled.div<{ - $color: ColorType -}>` - width: 0.8rem; - height: 0.8rem; - border-radius: 50%; - background-color: ${({ $color }) => $color || 'inherit'}; -` - -export const Health = ({ color, size = 'S', ...rest }: HealthProps) => ( - - - - -) diff --git a/redisinsight/ui/src/components/base/text/HealthText.tsx b/redisinsight/ui/src/components/base/text/HealthText.tsx new file mode 100644 index 0000000000..60d56454cb --- /dev/null +++ b/redisinsight/ui/src/components/base/text/HealthText.tsx @@ -0,0 +1,30 @@ +import React from 'react' +import { Typography } from '@redis-ui/components' +import cn from 'classnames' +import { Row } from 'uiSrc/components/base/layout/flex' +import { BodyProps, Indicator } from 'uiSrc/components/base/text/text.styles' + +type ColorType = BodyProps['color'] | (string & {}) +export type HealthProps = Omit & { + color?: ColorType +} + +export const HealthText = ({ + color, + size = 'S', + className, + ...rest +}: HealthProps) => ( + + + + +) diff --git a/redisinsight/ui/src/components/base/text/Text.tsx b/redisinsight/ui/src/components/base/text/Text.tsx new file mode 100644 index 0000000000..e69cd5d316 --- /dev/null +++ b/redisinsight/ui/src/components/base/text/Text.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import cn from 'classnames' +import { BodySizesType } from '@redis-ui/components/dist/Typography/components/Body/Body.types' +import { StyledText, TextProps } from 'uiSrc/components/base/text/text.styles' + +export const Text = ({ + className, + color, + size, + textAlign, + ...rest +}: TextProps) => { + const sizeMap = { + size, + } + if (size === 'm') { + sizeMap.size = 'M' + } else if (size === 's') { + sizeMap.size = 'S' + } else if (size === 'xs') { + sizeMap.size = 'XS' + } + return ( + + ) +} diff --git a/redisinsight/ui/src/components/base/text/index.ts b/redisinsight/ui/src/components/base/text/index.ts new file mode 100644 index 0000000000..2624e948a4 --- /dev/null +++ b/redisinsight/ui/src/components/base/text/index.ts @@ -0,0 +1,3 @@ +export { Text } from './Text' +export { ColorText } from './ColorText' +export { HealthText } from './HealthText' diff --git a/redisinsight/ui/src/components/base/text/text.styles.ts b/redisinsight/ui/src/components/base/text/text.styles.ts new file mode 100644 index 0000000000..8afc1c599f --- /dev/null +++ b/redisinsight/ui/src/components/base/text/text.styles.ts @@ -0,0 +1,111 @@ +import React, { HTMLAttributes } from 'react' +import { useTheme } from '@redis-ui/styles' +import { Typography } from '@redis-ui/components' +import styled, { css } from 'styled-components' +import { CommonProps } from 'uiSrc/components/base/theme/types' + +export type BodyProps = React.ComponentProps + +export type EuiColorNames = + | 'default' + | 'subdued' + | 'danger' + | 'ghost' + | 'accent' + | 'warning' + | 'success' +export type ColorType = BodyProps['color'] | EuiColorNames | (string & {}) +export interface MapProps extends HTMLAttributes { + $color?: ColorType + $align?: 'left' | 'center' | 'right' +} + +export type ColorTextProps = Omit & { + color?: ColorType + component?: 'div' | 'span' +} + +export type TextProps = Omit< + React.ComponentProps, + 'color' | 'size' +> & + CommonProps & { + color?: ColorType + size?: + | React.ComponentProps['size'] + | 'm' + | 's' + | 'xs' + textAlign?: 'left' | 'center' | 'right' + } + +export const useColorTextStyles = ({ $color }: MapProps = {}) => { + const theme = useTheme() + const colors = theme.semantic.color + // @ts-ignore + const typographyColors = theme.components.typography.colors as Record< + 'primary' | 'secondary', + string + > + const getColorValue = (color?: ColorType) => { + if (!color) { + return 'inherit' + } + switch (color) { + case 'default': + case 'primary': + return typographyColors?.primary || colors.text.neutral800 + case 'secondary': + return typographyColors?.secondary || colors.text.neutral700 + case 'subdued': + return colors.text.informative400 + case 'danger': + return colors.text.danger600 + case 'ghost': + return colors.text.neutral600 + case 'accent': + return colors.text.notice600 + case 'warning': + return colors.text.attention600 + case 'success': + return colors.text.success600 + default: + return color // any supported color value e.g #fff + } + } + + return css` + color: ${getColorValue($color)}; + ` +} + +const getAlignValue = (align?: MapProps['$align']) => { + switch (align) { + case 'left': + return 'text-align: left' + case 'center': + return 'text-align: center' + case 'right': + return 'text-align: right' + default: + return '' + } +} + +export const StyledColorText = styled(Typography.Body)` + ${useColorTextStyles} +` +export const StyledText = styled(Typography.Body)` + ${useColorTextStyles}; + ${({ $align }) => getAlignValue($align)}; +` +export const Indicator = styled.div< + { + $color: ColorType + } & CommonProps +>` + width: 0.8rem; + height: 0.8rem; + border-radius: 50%; + background-color: ${({ $color }) => $color || 'inherit'}; +` diff --git a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx b/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx index 30726ebcf6..817b98bb31 100644 --- a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx +++ b/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react' import { useDispatch } from 'react-redux' import { useParams } from 'react-router-dom' -import { EuiText, EuiIcon } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import { toggleCli, @@ -16,6 +16,7 @@ import { OnboardingTour } from 'uiSrc/components' import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { Text } from 'uiSrc/components/base/text' import { WindowControlGroup } from 'uiSrc/components/base/shared/WindowControlGroup' import styles from './styles.module.scss' @@ -70,7 +71,7 @@ const CliHeader = () => { anchorPosition="upLeft" panelClassName={styles.cliOnboardPanel} > - CLI + CLI diff --git a/redisinsight/ui/src/components/command-helper/CommandHelper/CommandHelper.tsx b/redisinsight/ui/src/components/command-helper/CommandHelper/CommandHelper.tsx index 536f18bf82..f695d2d90d 100644 --- a/redisinsight/ui/src/components/command-helper/CommandHelper/CommandHelper.tsx +++ b/redisinsight/ui/src/components/command-helper/CommandHelper/CommandHelper.tsx @@ -1,9 +1,10 @@ import React, { ReactElement } from 'react' -import { EuiLink, EuiText, EuiTextColor } from '@elastic/eui' +import { EuiLink } from '@elastic/eui' import { useDispatch } from 'react-redux' import { CommandGroup } from 'uiSrc/constants' import { goBackFromCommand } from 'uiSrc/slices/cli/cli-settings' import { getDocUrlForCommand } from 'uiSrc/utils' +import { ColorText, Text } from 'uiSrc/components/base/text' import CHCommandInfo from '../components/command-helper-info' import CHSearchWrapper from '../components/command-helper-search' @@ -78,31 +79,31 @@ const CommandHelper = (props: Props) => { onBackClick={handleBackClick} /> {summary && ( - {summary}{' '} {readMore(commandLine)} - + )} {!!argList.length && (
- + Arguments: - + {argList}
)} {since && (
- + Since: - + {since}
)} @@ -111,23 +112,23 @@ const CommandHelper = (props: Props) => { className={styles.field} data-testid="cli-helper-complexity" > - + Complexity: - + {complexity}
)}
)} {!commandLine && ( - Enter any command in CLI or use search to see detailed information. - + )} )} diff --git a/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx b/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx index 47abc1d896..8d0fab8cbe 100644 --- a/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx +++ b/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx @@ -2,7 +2,7 @@ import React from 'react' import { useDispatch } from 'react-redux' import { useParams } from 'react-router-dom' -import { EuiText, EuiIcon } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { resetCliHelperSettings, @@ -13,6 +13,7 @@ import { OnboardingTour } from 'uiSrc/components' import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { Text } from 'uiSrc/components/base/text' import { WindowControlGroup } from 'uiSrc/components/base/shared/WindowControlGroup' import styles from './styles.module.scss' @@ -51,7 +52,7 @@ const CommandHelperHeader = () => { anchorPosition="upLeft" panelClassName={styles.helperOnboardPanel} > - Command Helper + Command Helper diff --git a/redisinsight/ui/src/components/command-helper/CommandHelperWrapper.tsx b/redisinsight/ui/src/components/command-helper/CommandHelperWrapper.tsx index 26139dd0cc..033ea115b3 100644 --- a/redisinsight/ui/src/components/command-helper/CommandHelperWrapper.tsx +++ b/redisinsight/ui/src/components/command-helper/CommandHelperWrapper.tsx @@ -16,6 +16,7 @@ import { } from 'uiSrc/utils' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' + import CommandHelper from './CommandHelper' import CommandHelperHeader from './CommandHelperHeader' diff --git a/redisinsight/ui/src/components/command-helper/components/command-helper-info/CHCommandInfo.tsx b/redisinsight/ui/src/components/command-helper/components/command-helper-info/CHCommandInfo.tsx index 054c26f239..885fb66944 100644 --- a/redisinsight/ui/src/components/command-helper/components/command-helper-info/CHCommandInfo.tsx +++ b/redisinsight/ui/src/components/command-helper/components/command-helper-info/CHCommandInfo.tsx @@ -1,13 +1,15 @@ import React from 'react' -import { EuiTextColor } from '@elastic/eui' + import { GroupBadge } from 'uiSrc/components' import { CommandGroup } from 'uiSrc/constants' import { IconButton } from 'uiSrc/components/base/forms/buttons' import { ArrowLeftIcon } from 'uiSrc/components/base/icons' +import { ColorText } from 'uiSrc/components/base/text' import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' import { Row } from 'uiSrc/components/base/layout/flex' + import styles from './styles.module.scss' export interface Props { @@ -38,13 +40,13 @@ const CHCommandInfo = (props: Props) => { style={{ marginRight: '4px' }} /> - {args} - + {complexity && ( { args, ).join(' ') return ( - {argString} - + ) } return ( - {ALL_REDIS_COMMANDS[command].summary} - + ) } @@ -73,7 +74,7 @@ const CHSearchOutput = ({ searchedCommands }: Props) => { {searchedCommands.map((command: string) => ( - + ) => { @@ -84,7 +85,7 @@ const CHSearchOutput = ({ searchedCommands }: Props) => { > {command} - + {renderDescription(command)} @@ -95,9 +96,9 @@ const CHSearchOutput = ({ searchedCommands }: Props) => { )} {searchedCommands.length === 0 && (
- + No results found. - +
)} diff --git a/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/CHSearchFilter.tsx b/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/CHSearchFilter.tsx index d70dce8950..a574dfb1d6 100644 --- a/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/CHSearchFilter.tsx +++ b/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/CHSearchFilter.tsx @@ -1,17 +1,13 @@ import React, { useEffect, useState } from 'react' import cx from 'classnames' -import { - EuiIcon, - EuiSuperSelect, - EuiSuperSelectOption, - EuiText, -} from '@elastic/eui' +import { EuiIcon, EuiSuperSelect, EuiSuperSelectOption } from '@elastic/eui' import { useSelector } from 'react-redux' import { GROUP_TYPES_DISPLAY } from 'uiSrc/constants' import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands' import { cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings' import { OutsideClickDetector } from 'uiSrc/components/base/utils' +import { Text } from 'uiSrc/components/base/text' import styles from './styles.module.scss' @@ -50,14 +46,11 @@ const CHSearchFilter = ({ submitFilter, isLoading }: Props) => { return { value, inputDisplay: ( - + {text} - + ), - dropdownDisplay: {text}, + dropdownDisplay: {text}, 'data-test-subj': `filter-option-group-type-${value}`, } }) diff --git a/redisinsight/ui/src/components/consents-settings/ConsentOption/ConsentOption.tsx b/redisinsight/ui/src/components/consents-settings/ConsentOption/ConsentOption.tsx index 0c6e2a9d03..865588e646 100644 --- a/redisinsight/ui/src/components/consents-settings/ConsentOption/ConsentOption.tsx +++ b/redisinsight/ui/src/components/consents-settings/ConsentOption/ConsentOption.tsx @@ -1,9 +1,10 @@ import React from 'react' -import { EuiSwitch, EuiText } from '@elastic/eui' +import { EuiSwitch } from '@elastic/eui' import parse from 'html-react-parser' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { Text } from 'uiSrc/components/base/text' import { IConsent } from '../ConsentsSettings' import styles from '../styles.module.scss' @@ -28,14 +29,14 @@ const ConsentOption = (props: Props) => { {isSettingsPage && consent.description && ( <> - {parse(consent.description)} - + )} @@ -54,16 +55,16 @@ const ConsentOption = (props: Props) => { /> - {parse(consent.label)} + {parse(consent.label)} {!isSettingsPage && consent.description && ( - {parse(consent.description)} - + )} diff --git a/redisinsight/ui/src/components/consents-settings/ConsentsPrivacy/ConsentsPrivacy.tsx b/redisinsight/ui/src/components/consents-settings/ConsentsPrivacy/ConsentsPrivacy.tsx index 8139d4304b..c3b73d9acb 100644 --- a/redisinsight/ui/src/components/consents-settings/ConsentsPrivacy/ConsentsPrivacy.tsx +++ b/redisinsight/ui/src/components/consents-settings/ConsentsPrivacy/ConsentsPrivacy.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useFormik } from 'formik' import { has } from 'lodash' -import { EuiForm, EuiText, EuiTitle } from '@elastic/eui' +import { EuiForm, EuiTitle } from '@elastic/eui' import { compareConsents } from 'uiSrc/utils' import { @@ -10,6 +10,7 @@ import { userSettingsSelector, } from 'uiSrc/slices/user/user-settings' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { Text } from 'uiSrc/components/base/text' import ConsentOption from '../ConsentOption' import { ConsentCategories, IConsent } from '../ConsentsSettings' @@ -83,9 +84,9 @@ const ConsentsPrivacy = () => { data-testid="consents-settings-form" >
- + To optimize your experience, Redis Insight uses third-party tools. - +

Usage Data

diff --git a/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx b/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx index 948eafea97..da044cfa1c 100644 --- a/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx +++ b/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx @@ -2,14 +2,7 @@ import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { FormikErrors, useFormik } from 'formik' import { isEmpty, forEach } from 'lodash' -import { - EuiSwitch, - EuiText, - EuiTitle, - EuiToolTip, - EuiForm, - EuiLink, -} from '@elastic/eui' +import { EuiSwitch, EuiTitle, EuiToolTip, EuiForm, EuiLink } from '@elastic/eui' import { EuiSwitchEvent } from '@elastic/eui/src/components/form/switch' import cx from 'classnames' @@ -25,6 +18,7 @@ import { Spacer } from 'uiSrc/components/base/layout/spacer' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { InfoIcon } from 'uiSrc/components/base/icons' import { CallOut } from 'uiSrc/components/base/display/call-out/CallOut' +import { Text } from 'uiSrc/components/base/text' import ConsentOption from './ConsentOption' import styles from './styles.module.scss' @@ -224,14 +218,14 @@ const ConsentsSettings = ({ onSubmitted }: Props) => { {consents.length > 1 && ( <> - To avoid automatic execution of malicious code, when adding new Workbench plugins, use files from trusted authors only. - + @@ -247,17 +241,15 @@ const ConsentsSettings = ({ onSubmitted }: Props) => { /> - - Use recommended settings - - Use recommended settings + Select to activate all listed options. - + @@ -276,9 +268,9 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {

Privacy Settings

 - + To optimize your experience, Redis Insight uses third-party tools. - + )} @@ -312,7 +304,7 @@ const ConsentsSettings = ({ onSubmitted }: Props) => { <> - + To use Redis Insight, please accept the terms and conditions:{' '} { > Server Side Public License - + ) : ( diff --git a/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx b/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx index b72c96ae8b..3b297c9485 100644 --- a/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx +++ b/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx @@ -1,6 +1,6 @@ /* eslint-disable sonarjs/no-nested-template-literals */ import React, { useContext } from 'react' -import { EuiIcon, EuiTextColor, EuiToolTip } from '@elastic/eui' +import { EuiIcon, EuiToolTip } from '@elastic/eui' import cx from 'classnames' import { Theme } from 'uiSrc/constants' @@ -11,6 +11,7 @@ import { ThemeContext } from 'uiSrc/contexts/themeContext' import { DEFAULT_MODULES_INFO } from 'uiSrc/constants/modules' import { IconButton } from 'uiSrc/components/base/forms/buttons' import { UnknownDarkIcon, UnknownLightIcon } from 'uiSrc/components/base/icons' +import { ColorText } from 'uiSrc/components/base/text' import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module' import styles from './styles.module.scss' @@ -19,7 +20,6 @@ export interface Props { content?: JSX.Element modules: AdditionalRedisModule[] inCircle?: boolean - dark?: boolean highlight?: boolean maxViewModules?: number tooltipTitle?: React.ReactNode @@ -89,17 +89,17 @@ const DatabaseListModules = React.memo((props: Props) => {
{!!icon && } {!icon && ( - {abbreviation} - + )} {!!content && ( - + {content} - + )}
@@ -122,7 +122,7 @@ const DatabaseListModules = React.memo((props: Props) => { aria-labelledby={`${content}_module`} /> ) : ( - { aria-labelledby={`${content}_module`} > {abbreviation} - + )} ) diff --git a/redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx b/redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx index a95c606516..be448ce3f5 100644 --- a/redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx +++ b/redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { EuiIcon, EuiText, EuiTitle } from '@elastic/eui' +import { EuiIcon, EuiTitle } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { useHistory, useParams } from 'react-router-dom' import { guideLinksSelector } from 'uiSrc/slices/content/guide-links' @@ -11,6 +11,7 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' import { openTutorialByPath } from 'uiSrc/slices/panels/sidePanels' import { findTutorialPath } from 'uiSrc/utils' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { Text } from 'uiSrc/components/base/text' import styles from './styles.module.scss' const ExploreGuides = () => { @@ -42,9 +43,9 @@ const ExploreGuides = () => { Here's a good starting point - + Explore the amazing world of Redis Stack with our interactive guides - + {!!data.length && (
diff --git a/redisinsight/ui/src/components/field-message/FieldMessage.tsx b/redisinsight/ui/src/components/field-message/FieldMessage.tsx index 1d2536d7c2..4389be1ea4 100644 --- a/redisinsight/ui/src/components/field-message/FieldMessage.tsx +++ b/redisinsight/ui/src/components/field-message/FieldMessage.tsx @@ -1,7 +1,8 @@ import React, { Ref, useEffect, useRef } from 'react' import cx from 'classnames' -import { EuiIcon, EuiTextColor } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' +import { ColorText } from 'uiSrc/components/base/text' import { scrollIntoView } from 'uiSrc/utils' import styles from './styles.module.scss' @@ -50,13 +51,13 @@ const FieldMessage = ({ color={color || 'danger'} /> )} - {children} - +
) } diff --git a/redisinsight/ui/src/components/group-badge/GroupBadge.tsx b/redisinsight/ui/src/components/group-badge/GroupBadge.tsx index 19f71ac830..1b81434109 100644 --- a/redisinsight/ui/src/components/group-badge/GroupBadge.tsx +++ b/redisinsight/ui/src/components/group-badge/GroupBadge.tsx @@ -1,12 +1,14 @@ import cx from 'classnames' import React from 'react' -import { EuiText } from '@elastic/eui' + import { CommandGroup, KeyTypes, GROUP_TYPES_COLORS } from 'uiSrc/constants' import { getGroupTypeDisplay } from 'uiSrc/utils' import { IconButton } from 'uiSrc/components/base/forms/buttons' import { CancelSlimIcon } from 'uiSrc/components/base/icons' +import { Text } from 'uiSrc/components/base/text' import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' + import styles from './styles.module.scss' export interface Props { @@ -40,13 +42,13 @@ const GroupBadge = ({ data-testid={`badge-${type}_${name}`} > {!compressed && ( - {getGroupTypeDisplay(type)} - + )} {onDelete && ( { @@ -98,13 +97,13 @@ const ImportFileModal = ({ aria-label="Select or drag and drop file" /> {isInvalid && ( - {invalidMessage} - + )} )} @@ -114,9 +113,9 @@ const ImportFileModal = ({ data-testid="file-loading-indicator" > - + Uploading... - +
)} {error && ( @@ -126,10 +125,10 @@ const ImportFileModal = ({ size="xxl" color="danger" /> - + {errorMessage} - - {error} + + {error} )} diff --git a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx index a847f8d16d..3b490011e9 100644 --- a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx +++ b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx @@ -6,7 +6,6 @@ import { EuiForm, EuiToolTip, EuiPopover, - EuiText, keys, } from '@elastic/eui' @@ -19,6 +18,7 @@ import { DestructiveButton, IconButton, } from 'uiSrc/components/base/forms/buttons' +import { Text } from 'uiSrc/components/base/text' import styles from './styles.module.scss' @@ -270,20 +270,20 @@ const InlineItemEditor = (props: Props) => { className={styles.popover} data-testid="approve-popover" > - + {!!approveText?.title && (

{approveText?.title}

)} - {approveText?.text} - - + +
{ : 'Redis Databases' } > - { onKeyDown={goHome} > Databases - +
@@ -168,7 +169,7 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => { - / + / {returnUrlBase && returnUrl && ( @@ -183,14 +184,14 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => { position="bottom" content={returnUrlTooltip || returnUrlLabel} > - < {returnUrlLabel} - + } diff --git a/redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.tsx b/redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.tsx index 0543462379..0677c51335 100644 --- a/redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.tsx +++ b/redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react' import { capitalize } from 'lodash' -import { EuiIcon, EuiText } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import cx from 'classnames' import { @@ -20,6 +20,7 @@ import { Theme } from 'uiSrc/constants' import { ThemeContext } from 'uiSrc/contexts/themeContext' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { UnknownDarkIcon, UnknownLightIcon } from 'uiSrc/components/base/icons' +import { Text } from 'uiSrc/components/base/text' import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module' import styles from './styles.module.scss' @@ -72,11 +73,11 @@ const ShortInstanceInfo = ({ info, databases, modules }: Props) => { /> - Logical Databases - + Logical Databases + Select logical databases to work with in Browser, Workbench, and Database Analysis. - + )} diff --git a/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx index 502ab7fcd1..d12ea2d5dd 100644 --- a/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx +++ b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx @@ -5,7 +5,6 @@ import { EuiPopover, EuiTab, EuiTabs, - EuiText, } from '@elastic/eui' import cx from 'classnames' import { useSelector } from 'react-redux' @@ -21,6 +20,7 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { localStorageService } from 'uiSrc/services' import { filterAndSort } from 'uiSrc/utils' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { Text } from 'uiSrc/components/base/text' import InstancesList from './components/instances-list' import styles from './styles.module.scss' @@ -107,7 +107,7 @@ const InstancesNavigationPopover = ({ name }: Props) => { isOpen={isPopoverOpen} closePopover={() => showPopover()} button={ - showPopover()} data-testid="nav-instance-popover-btn" @@ -116,7 +116,7 @@ const InstancesNavigationPopover = ({ name }: Props) => { - + } >
@@ -166,9 +166,9 @@ const InstancesNavigationPopover = ({ name }: Props) => {
- + {btnLabel} - +
diff --git a/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/components/instances-list/InstancesList.tsx b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/components/instances-list/InstancesList.tsx index da15aba394..de6a65ead9 100644 --- a/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/components/instances-list/InstancesList.tsx +++ b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/components/instances-list/InstancesList.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { EuiLoadingSpinner, EuiText } from '@elastic/eui' +import { EuiLoadingSpinner } from '@elastic/eui' import { useDispatch } from 'react-redux' import { useHistory, useParams } from 'react-router-dom' import { checkConnectToRdiInstanceAction } from 'uiSrc/slices/rdi/instances' @@ -19,6 +19,7 @@ import { Group as ListGroup, Item as ListGroupItem, } from 'uiSrc/components/base/layout/list' +import { Text } from 'uiSrc/components/base/text' import { InstancesTabs } from '../../InstancesNavigationPopover' import styles from '../../styles.module.scss' @@ -135,12 +136,15 @@ const InstancesList = ({ isDisabled={loading} key={instance.id} label={ - + {loading && instance?.id === selected && ( )} {instance.name} {getDbIndex(instance.db)} - + } onClick={() => { setSelected(instance.id) diff --git a/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.tsx b/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.tsx index 7717d7dafa..7bcd43f3a6 100644 --- a/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.tsx +++ b/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.tsx @@ -1,12 +1,6 @@ import React, { useState } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { - EuiIcon, - EuiLink, - EuiLoadingSpinner, - EuiPopover, - EuiText, -} from '@elastic/eui' +import { EuiIcon, EuiLink, EuiLoadingSpinner, EuiPopover } from '@elastic/eui' import cx from 'classnames' import { useHistory } from 'react-router-dom' import { logoutUserAction } from 'uiSrc/slices/oauth/cloud' @@ -26,6 +20,7 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' import { FeatureFlags, Pages } from 'uiSrc/constants' import { FeatureFlagComponent } from 'uiSrc/components' import { getConfig } from 'uiSrc/config' +import { Text } from 'uiSrc/components/base/text' import { CloudUser } from 'apiSrc/modules/cloud/user/models' import styles from './styles.module.scss' @@ -139,20 +134,17 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => { Account - + } > - + Redis Cloud account - +
{ onClick={() => handleClickSelectAccount?.(id)} data-testid={`profile-account-${id}${id === currentAccountId ? '-selected' : ''}`} > - + {name} #{id} - + {id === currentAccountId && ( { href={riDesktopLink} data-testid="open-ri-desktop-link" > - Open in Redis Insight Desktop version + Open in Redis Insight Desktop version { href={riConfig.app.smConsoleRedirect} data-testid="cloud-admin-console-link" > - Back to Redis Cloud Admin console + Back to Redis Cloud Admin console { onClick={handleClickImport} data-testid="profile-import-cloud-databases" > - - Import Cloud databases - + Import Cloud databases {isImportLoading ? ( ) : ( @@ -248,13 +238,13 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => { data-testid="cloud-console-link" >
- Cloud Console - Cloud Console + {name} - +
{ onClick={handleClickLogout} data-testid="profile-logout" > - Logout + Logout
diff --git a/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx b/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx index 1b6167a0db..6f2fabd78a 100644 --- a/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx +++ b/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { EuiIcon, EuiPopover, EuiText } from '@elastic/eui' +import { EuiIcon, EuiPopover } from '@elastic/eui' import { formatLongName } from 'uiSrc/utils' import { @@ -8,6 +8,7 @@ import { } from 'uiSrc/components/base/forms/buttons' import { DeleteIcon } from 'uiSrc/components/base/icons' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { Text } from 'uiSrc/components/base/text' import styles from '../styles.module.scss' export interface Props { @@ -52,9 +53,9 @@ const DeleteAction = ( panelPaddingSize="l" data-testid="delete-popover" > - -

{subTitle}

- + + {subTitle} +
{selection.map((select) => ( diff --git a/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx b/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx index cf5ae03252..6f40c4a6cb 100644 --- a/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx +++ b/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx @@ -1,16 +1,15 @@ import React, { useState } from 'react' -import { - EuiIcon, - EuiPopover, - EuiText, -} from '@elastic/eui' -import { FormField } from '@redis-ui/components' + +import { EuiIcon, EuiPopover } from '@elastic/eui' import { formatLongName } from 'uiSrc/utils' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { ExportIcon } from 'uiSrc/components/base/icons' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' + +import { Text } from 'uiSrc/components/base/text' import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' +import { FormField } from 'uiSrc/components/base/forms/FormField' import styles from '../styles.module.scss' export interface Props { @@ -48,9 +47,9 @@ const ExportAction = ( panelPaddingSize="l" data-testid="export-popover" > - -

{subTitle}

- + + {subTitle} +
{selection.map((select) => ( diff --git a/redisinsight/ui/src/components/keyboard-shortcut/KeyboardShortcut.tsx b/redisinsight/ui/src/components/keyboard-shortcut/KeyboardShortcut.tsx index 2f675caf1c..ae66691768 100644 --- a/redisinsight/ui/src/components/keyboard-shortcut/KeyboardShortcut.tsx +++ b/redisinsight/ui/src/components/keyboard-shortcut/KeyboardShortcut.tsx @@ -3,6 +3,7 @@ import { isString } from 'lodash' import cx from 'classnames' import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' + import styles from './styles.module.scss' export interface Props { diff --git a/redisinsight/ui/src/components/keys-summary/KeysSummary.tsx b/redisinsight/ui/src/components/keys-summary/KeysSummary.tsx index eae4903589..9eed112fa5 100644 --- a/redisinsight/ui/src/components/keys-summary/KeysSummary.tsx +++ b/redisinsight/ui/src/components/keys-summary/KeysSummary.tsx @@ -1,9 +1,10 @@ import React from 'react' import cx from 'classnames' import { isNull } from 'lodash' -import { EuiText, EuiTextColor } from '@elastic/eui' import { useSelector } from 'react-redux' +import { Text, ColorText } from 'uiSrc/components/base/text' + import { numberWithSpaces, nullableNumberWithSpaces } from 'uiSrc/utils/numbers' import { KeyViewType } from 'uiSrc/slices/interfaces/keys' import { keysSelector } from 'uiSrc/slices/browser/keys' @@ -53,10 +54,10 @@ const KeysSummary = (props: Props) => { <> {(!!totalItemsCount || isNull(totalItemsCount)) && (
- + {!!scanned && ( <> - + {'Results: '} @@ -64,7 +65,7 @@ const KeysSummary = (props: Props) => { {'. '} - + {'Scanned '} {notAccurateScanned} @@ -80,8 +81,8 @@ const KeysSummary = (props: Props) => { { [styles.loadingShow]: loading }, ])} /> - - + + {showScanMore && ( { )} {!scanned && ( - + {'Total: '} {nullableNumberWithSpaces(totalItemsCount)} - + )} - + {viewType === KeyViewType.Tree && ( )}
)} {loading && !totalItemsCount && !isNull(totalItemsCount) && ( - + Scanning... - + )} ) diff --git a/redisinsight/ui/src/components/markdown/CodeButtonBlock/components/RunConfirmationPopover.tsx b/redisinsight/ui/src/components/markdown/CodeButtonBlock/components/RunConfirmationPopover.tsx index 2aa8548b15..3275777ee8 100644 --- a/redisinsight/ui/src/components/markdown/CodeButtonBlock/components/RunConfirmationPopover.tsx +++ b/redisinsight/ui/src/components/markdown/CodeButtonBlock/components/RunConfirmationPopover.tsx @@ -1,4 +1,4 @@ -import { EuiText, EuiTitle } from '@elastic/eui' +import { EuiTitle } from '@elastic/eui' import React, { useState } from 'react' import { useHistory, useParams } from 'react-router-dom' import { FeatureFlags, Pages } from 'uiSrc/constants' @@ -12,6 +12,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { Text } from 'uiSrc/components/base/text' import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' import styles from '../styles.module.scss' @@ -52,10 +53,10 @@ const RunConfirmationPopover = ({ onApply }: Props) => { Run commands - + This tutorial will change data in your database, are you sure you want to run commands in this database? - + { } > {instanceId ? ( - { Execute
- + ) : ( )} diff --git a/redisinsight/ui/src/components/messages/cli-output/cliOutput.tsx b/redisinsight/ui/src/components/messages/cli-output/cliOutput.tsx index 156481c9ca..aa767e124c 100644 --- a/redisinsight/ui/src/components/messages/cli-output/cliOutput.tsx +++ b/redisinsight/ui/src/components/messages/cli-output/cliOutput.tsx @@ -1,8 +1,9 @@ -import { EuiLink, EuiTextColor } from '@elastic/eui' import React, { Fragment } from 'react' +import { EuiLink } from '@elastic/eui' import { getRouterLinkProps } from 'uiSrc/services' import { getDbIndex } from 'uiSrc/utils' import { FeatureFlagComponent } from 'uiSrc/components' +import { ColorText } from 'uiSrc/components/base/text' import { FeatureFlags } from 'uiSrc/constants/featureFlags' export const InitOutputText = ( @@ -33,9 +34,9 @@ export const InitOutputText = ( 'Connecting...', '\n\n', 'Pinging Redis server on ', - + {`${host}:${port}${getDbIndex(dbIndex)}`} - , + , ] export const ConnectionSuccessOutputText = [ @@ -69,11 +70,7 @@ export const cliTexts = {
), USE_PSUBSCRIBE_COMMAND: (path: string = '') => ( - + {'Use '} {' to see the messages published to all channels in your database.'} - + ), PSUBSCRIBE_COMMAND: (path: string = '') => ( ), USE_PROFILER_TOOL: (onClick: () => void) => ( - + {'Use '} {' tool to see all the requests processed by the server.'} - + ), MONITOR_COMMAND: (onClick: () => void) => ( ), USE_PUB_SUB_TOOL: (path: string = '') => ( - + {'Use '} {' tool to subscribe to channels.'} - + ), SUBSCRIBE_COMMAND_CLI: (path: string = '') => ( ), HELLO3_COMMAND: () => ( - + {'Redis Insight does not support '} {' at the moment, but we are working on it.'} - + ), HELLO3_COMMAND_CLI: () => [cliTexts.HELLO3_COMMAND(), '\n'], CLI_ERROR_MESSAGE: (message: string) => [ '\n', - + {message} - , + , '\n\n', ], } diff --git a/redisinsight/ui/src/components/messages/database-not-opened/DatabaseNotOpened.tsx b/redisinsight/ui/src/components/messages/database-not-opened/DatabaseNotOpened.tsx index 6250766586..c9fe6f91a0 100644 --- a/redisinsight/ui/src/components/messages/database-not-opened/DatabaseNotOpened.tsx +++ b/redisinsight/ui/src/components/messages/database-not-opened/DatabaseNotOpened.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { EuiText, EuiTitle } from '@elastic/eui' +import { EuiTitle } from '@elastic/eui' import { ExternalLink, OAuthSsoHandlerDialog } from 'uiSrc/components' import { getUtmExternalLink } from 'uiSrc/utils/links' import { EXTERNAL_LINKS, UTM_CAMPAINGS } from 'uiSrc/constants/links' @@ -7,6 +7,7 @@ import TelescopeImg from 'uiSrc/assets/img/telescope-dark.svg' import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { Text } from 'uiSrc/components/base/text' import styles from './styles.module.scss' export interface Props { @@ -25,9 +26,9 @@ const DatabaseNotOpened = (props: Props) => { <> - + Open your Redis database, or create a new database to get started. - + {(ssoCloudHandlerClick) => ( diff --git a/redisinsight/ui/src/components/messages/filter-not-available/FilterNotAvailable.tsx b/redisinsight/ui/src/components/messages/filter-not-available/FilterNotAvailable.tsx index 154b5c93cb..69fd3e137b 100644 --- a/redisinsight/ui/src/components/messages/filter-not-available/FilterNotAvailable.tsx +++ b/redisinsight/ui/src/components/messages/filter-not-available/FilterNotAvailable.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { EuiIcon, EuiLink, EuiText, EuiTitle } from '@elastic/eui' +import { EuiIcon, EuiLink, EuiTitle } from '@elastic/eui' import { useSelector } from 'react-redux' import RedisDbBlueIcon from 'uiSrc/assets/img/icons/redis_db_blue.svg' @@ -18,7 +18,7 @@ import { freeInstancesSelector } from 'uiSrc/slices/instances/instances' import { getUtmExternalLink } from 'uiSrc/utils/links' import { EXTERNAL_LINKS, UTM_CAMPAINGS } from 'uiSrc/constants/links' import { FeatureFlags } from 'uiSrc/constants' - +import { Text } from 'uiSrc/components/base/text' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' @@ -43,16 +43,14 @@ const FilterNotAvailable = ({ onClose }: { onClose?: () => void }) => { >

Upgrade your Redis database to version 6 or above

- - Filtering by data type is supported in Redis 6 and above. - + Filtering by data type is supported in Redis 6 and above. {!!freeInstances.length && ( <> - + Use your free trial all-in-one Redis Cloud database to start exploring these capabilities. - + void }) => { )} {!freeInstances.length && ( - + Create a free trial Redis Stack database that supports filtering and extends the core capabilities of your Redis. - +
diff --git a/redisinsight/ui/src/components/messages/module-not-loaded-minimalized/ModuleNotLoadedMinimalized.tsx b/redisinsight/ui/src/components/messages/module-not-loaded-minimalized/ModuleNotLoadedMinimalized.tsx index 43c4321501..84a53f8c09 100644 --- a/redisinsight/ui/src/components/messages/module-not-loaded-minimalized/ModuleNotLoadedMinimalized.tsx +++ b/redisinsight/ui/src/components/messages/module-not-loaded-minimalized/ModuleNotLoadedMinimalized.tsx @@ -1,7 +1,7 @@ import React from 'react' import { useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' -import { EuiText, EuiTitle } from '@elastic/eui' +import { EuiTitle } from '@elastic/eui' import TelescopeImg from 'uiSrc/assets/img/telescope-dark.svg' import { @@ -28,6 +28,7 @@ import { FeatureFlags, Pages } from 'uiSrc/constants' import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' +import { Text } from 'uiSrc/components/base/text' import { MODULE_CAPABILITY_TEXT_NOT_AVAILABLE, MODULE_CAPABILITY_TEXT_NOT_AVAILABLE_ENTERPRISE, @@ -67,9 +68,9 @@ const ModuleNotLoadedMinimalized = (props: Props) => { name={FeatureFlags.cloudAds} otherwise={ <> - + {moduleText?.text} - + { > {!freeDbWithModule ? ( <> - + {moduleText?.text} - + {(ssoCloudHandlerClick) => ( @@ -116,10 +117,10 @@ const ModuleNotLoadedMinimalized = (props: Props) => { ) : ( <> - + Use your free trial all-in-one Redis Cloud database to start exploring these capabilities. - + (
- {item} + {item} ) @@ -93,24 +94,24 @@ const ModuleNotLoaded = ({ (moduleName?: string) => { if (!cloudAdsFeature?.flag) { return ( - + Open a database with {moduleName}. - + ) } return !freeDbWithModule ? ( - + Create a free trial Redis Stack database with {moduleName} which extends the core capabilities of your Redis. - + ) : ( - Use your free trial all-in-one Redis Cloud database to start exploring these capabilities. - + ) }, [freeDbWithModule], @@ -144,7 +145,7 @@ const ModuleNotLoaded = ({ data-testid="module-not-loaded-content" > {renderTitle(width, MODULE_TEXT_VIEW[moduleName])} - + {CONTENT[moduleName]?.text.map((item: string) => width > MIN_ELEMENT_WIDTH ? ( <> @@ -155,7 +156,7 @@ const ModuleNotLoaded = ({ item ), )} - +
    {!!CONTENT[moduleName]?.additionalText && ( - + )} {renderText(MODULE_TEXT_VIEW[moduleName])}
diff --git a/redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx b/redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx index ed5694b2bd..080876ab55 100644 --- a/redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx +++ b/redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' import cx from 'classnames' -import { EuiIcon, EuiSwitch, EuiTextColor, EuiToolTip } from '@elastic/eui' +import { EuiIcon, EuiSwitch, EuiToolTip } from '@elastic/eui' import AutoSizer from 'react-virtualized-auto-sizer' import { IMonitorDataPayload } from 'uiSrc/slices/interfaces' @@ -9,6 +9,7 @@ import BanIcon from 'uiSrc/assets/img/monitor/ban.svg?react' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { IconButton } from 'uiSrc/components/base/forms/buttons' import { PlayFilledIcon } from 'uiSrc/components/base/icons' +import { ColorText } from 'uiSrc/components/base/text' import MonitorLog from '../MonitorLog' import MonitorOutputList from '../MonitorOutputList' @@ -65,7 +66,7 @@ const Monitor = (props: Props) => { /> - { > Running Profiler will decrease throughput, avoid running it in production databases. - + @@ -109,13 +110,13 @@ const Monitor = (props: Props) => { /> - {error} - + diff --git a/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx b/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx index 2b5408d0ea..fd0438d345 100644 --- a/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx +++ b/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx @@ -2,7 +2,7 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' import { useParams } from 'react-router-dom' -import { EuiText, EuiToolTip, EuiIcon } from '@elastic/eui' +import { EuiToolTip, EuiIcon } from '@elastic/eui' import { monitorSelector, @@ -16,6 +16,7 @@ import { OnboardingTour } from 'uiSrc/components' import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { Text } from 'uiSrc/components/base/text' import { IconButton } from 'uiSrc/components/base/forms/buttons' import { PlayIcon, @@ -87,7 +88,7 @@ const MonitorHeader = ({ handleRunMonitor }: Props) => { anchorPosition="upLeft" panelClassName={styles.profilerOnboardPanel} > - Profiler + Profiler {isStarted && ( diff --git a/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx b/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx index 0b8b6cec8e..5624f4c4ff 100644 --- a/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx +++ b/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx @@ -1,4 +1,4 @@ -import { EuiIcon, EuiText } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import { format, formatDuration, intervalToDuration } from 'date-fns' import React from 'react' import { useDispatch, useSelector } from 'react-redux' @@ -19,6 +19,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { RefreshIcon, DownloadIcon } from 'uiSrc/components/base/icons' +import { Text } from 'uiSrc/components/base/text' import styles from './styles.module.scss' const PADDINGS_OUTSIDE = 12 @@ -78,7 +79,7 @@ const MonitorLog = () => { }} data-testid="download-log-panel" > - {  ( {duration} {width > SMALL_SCREEN_RESOLUTION && ' Running time'}) - + {isSaveToFile && ( diff --git a/redisinsight/ui/src/components/monitor/MonitorOutputList/MonitorOutputList.tsx b/redisinsight/ui/src/components/monitor/MonitorOutputList/MonitorOutputList.tsx index 04c976849a..90e2df1a48 100644 --- a/redisinsight/ui/src/components/monitor/MonitorOutputList/MonitorOutputList.tsx +++ b/redisinsight/ui/src/components/monitor/MonitorOutputList/MonitorOutputList.tsx @@ -1,12 +1,12 @@ import React, { useCallback, useEffect, useRef } from 'react' import cx from 'classnames' -import { EuiTextColor } from '@elastic/eui' import { ListChildComponentProps, ListOnScrollProps, VariableSizeList as List, } from 'react-window' +import { ColorText } from 'uiSrc/components/base/text' import { DEFAULT_ERROR_MESSAGE, getFormatTime } from 'uiSrc/utils' import styles from 'uiSrc/components/monitor/Monitor/styles.module.scss' @@ -136,9 +136,9 @@ const MonitorOutputList = (props: Props) => { )} {isError && ( - + {message ?? DEFAULT_ERROR_MESSAGE} - + )} ) diff --git a/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx b/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx index d34159258f..0e03b04ada 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx @@ -2,7 +2,6 @@ import { EuiIcon, EuiLink, EuiPopover, - EuiText, EuiTitle, EuiToolTip, } from '@elastic/eui' @@ -31,6 +30,7 @@ import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { IconButton } from 'uiSrc/components/base/forms/buttons' import { SupportIcon } from 'uiSrc/components/base/icons' +import { Text } from 'uiSrc/components/base/text' import { NavigationItemWrapper } from 'uiSrc/components/navigation-menu/NavigationItemWrapper' import navStyles from '../../styles.module.scss' import styles from './styles.module.scss' @@ -134,27 +134,27 @@ const HelpMenu = () => { > - Provide
Feedback - +
- onKeyboardShortcutClick()} data-testid="shortcuts-btn" > Keyboard Shortcuts - +
@@ -174,22 +174,22 @@ const HelpMenu = () => { target="_blank" data-testid="release-notes-btn" > - + Release Notes - +
- onResetOnboardingClick()} data-testid="reset-onboarding-btn" > Reset Onboarding - +
diff --git a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/Notification/Notification.tsx b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/Notification/Notification.tsx index 87af375402..b779b3ca2d 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/Notification/Notification.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/Notification/Notification.tsx @@ -1,4 +1,4 @@ -import { EuiText, EuiTitle } from '@elastic/eui' +import { EuiTitle } from '@elastic/eui' import { EuiTitleSize } from '@elastic/eui/src/components/title/title' import cx from 'classnames' import { format } from 'date-fns' @@ -10,7 +10,9 @@ import { IGlobalNotification } from 'uiSrc/slices/interfaces' import { truncateText } from 'uiSrc/utils' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { Text } from 'uiSrc/components/base/text' import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' + import styles from '../styles.module.scss' export interface Props { @@ -31,20 +33,20 @@ const Notification = (props: Props) => { {notification.title} - {parse(notification.body)} - + - + {format(notification.timestamp * 1000, NOTIFICATION_DATE_FORMAT)} - + {notification.category && ( diff --git a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationCenter.tsx b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationCenter.tsx index 4e47ebf321..558c1d2529 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationCenter.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationCenter.tsx @@ -1,4 +1,4 @@ -import { EuiPopover, EuiText, EuiTitle } from '@elastic/eui' +import { EuiPopover, EuiTitle } from '@elastic/eui' import cx from 'classnames' import React, { useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' @@ -9,6 +9,7 @@ import { unreadNotificationsAction, } from 'uiSrc/slices/app/notifications' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' +import { Text } from 'uiSrc/components/base/text' import Notification from './Notification' import styles from './styles.module.scss' @@ -63,9 +64,9 @@ const NotificationCenter = () => { {!hasNotifications && (
- + No notifications to display. - +
)} {hasNotifications && ( diff --git a/redisinsight/ui/src/components/notifications/Notifications.tsx b/redisinsight/ui/src/components/notifications/Notifications.tsx index 18ba6b7a76..3e768c57eb 100644 --- a/redisinsight/ui/src/components/notifications/Notifications.tsx +++ b/redisinsight/ui/src/components/notifications/Notifications.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useRef } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { EuiTextColor } from '@elastic/eui' import cx from 'classnames' import { errorsSelector, @@ -16,8 +15,10 @@ import { DEFAULT_ERROR_MESSAGE } from 'uiSrc/utils' import { showOAuthProgress } from 'uiSrc/slices/oauth/cloud' import { CustomErrorCodes } from 'uiSrc/constants' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' +import { ColorText } from 'uiSrc/components/base/text' import { InfoIcon } from 'uiSrc/components/base/icons' import { riToast, RiToaster } from 'uiSrc/components/base/display/toast' + import errorMessages from './error-messages' import { InfiniteMessagesIds } from './components' @@ -50,7 +51,7 @@ const Notifications = () => { } const getSuccessText = (text: string | JSX.Element | JSX.Element[]) => ( - {text} + {text} ) const showSuccessToasts = (data: IMessage[]) => diff --git a/redisinsight/ui/src/components/notifications/components/cloud-capi-unauthorized/CloudCapiUnAuthorizedErrorContent.tsx b/redisinsight/ui/src/components/notifications/components/cloud-capi-unauthorized/CloudCapiUnAuthorizedErrorContent.tsx index 5908af47d3..cb3176a386 100644 --- a/redisinsight/ui/src/components/notifications/components/cloud-capi-unauthorized/CloudCapiUnAuthorizedErrorContent.tsx +++ b/redisinsight/ui/src/components/notifications/components/cloud-capi-unauthorized/CloudCapiUnAuthorizedErrorContent.tsx @@ -1,7 +1,7 @@ -import { EuiTextColor } from '@elastic/eui' import React from 'react' import { useDispatch } from 'react-redux' import { useHistory } from 'react-router-dom' +import { ColorText } from 'uiSrc/components/base/text' import { removeCapiKeyAction } from 'uiSrc/slices/oauth/cloud' import { Pages } from 'uiSrc/constants' import { OAuthSocialSource } from 'uiSrc/slices/interfaces' @@ -48,7 +48,8 @@ const CloudCapiUnAuthorizedErrorContent = ({ return ( <> - {text} + + {text} diff --git a/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx b/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx index d6263c1c2c..76ea835662 100644 --- a/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx +++ b/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx @@ -1,12 +1,15 @@ import React from 'react' -import { EuiTextColor } from '@elastic/eui' + +import { ColorText } from 'uiSrc/components/base/text' +import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' export interface Props { text: string | JSX.Element | JSX.Element[] } // TODO: use i18n file for texts const DefaultErrorContent = ({ text }: Props) => ( - {text} + {text} ) export default DefaultErrorContent diff --git a/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx b/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx index 511891bf04..599b242f10 100644 --- a/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx +++ b/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx @@ -1,8 +1,8 @@ import React from 'react' -import { EuiTextColor } from '@elastic/eui' import { matchPath, useHistory, useLocation } from 'react-router-dom' import { useDispatch } from 'react-redux' import { Pages } from 'uiSrc/constants' +import { ColorText } from 'uiSrc/components/base/text' import { updateUserConfigSettingsAction } from 'uiSrc/slices/user/user-settings' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' @@ -44,15 +44,15 @@ const EncryptionErrorContent = (props: Props) => { } return ( <> - + Check the system keychain or disable encryption to proceed. - + - + Disabling encryption will result in storing sensitive information locally in plain text. Re-enter database connection information to work with databases. - + diff --git a/redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx b/redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx index 42617b4580..8170af8e64 100644 --- a/redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx +++ b/redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx @@ -1,11 +1,5 @@ import React from 'react' -import { - EuiIcon, - EuiLink, - EuiLoadingSpinner, - EuiText, - EuiTitle, -} from '@elastic/eui' +import { EuiIcon, EuiLink, EuiLoadingSpinner, EuiTitle } from '@elastic/eui' import { find } from 'lodash' import cx from 'classnames' import { CloudJobName, CloudJobStep } from 'uiSrc/electron/constants' @@ -18,6 +12,7 @@ import { CloudSuccessResult } from 'uiSrc/slices/interfaces' import { Maybe } from 'uiSrc/utils' import { getUtmExternalLink } from 'uiSrc/utils/links' +import { Text } from 'uiSrc/components/base/text' import { EXTERNAL_LINKS, UTM_CAMPAINGS, @@ -62,9 +57,9 @@ export const INFINITE_MESSAGES = { Authenticating… - + This may take several seconds, but it is totally worth it! - + @@ -93,14 +88,14 @@ export const INFINITE_MESSAGES = { 'Importing a free trial Cloud database…'} - + This may take several minutes, but it is totally worth it! - + - + You can continue working in Redis Insight, and we will notify you once done. - + @@ -141,12 +136,12 @@ export const INFINITE_MESSAGES = { Congratulations! - + {text} Notice: the database will be deleted after 15 days of inactivity. - + {!!details && ( <> @@ -154,30 +149,30 @@ export const INFINITE_MESSAGES = { - Plan + Plan - Free + Free - Cloud Vendor + Cloud Vendor {!!vendor?.icon && } - {vendor?.label} + {vendor?.label} - Region + Region - {details.region} + {details.region} @@ -219,9 +214,9 @@ export const INFINITE_MESSAGES = { You already have a free trial Redis Cloud subscription. - + Do you want to import your existing database into Redis Insight? - + @@ -263,7 +258,7 @@ export const INFINITE_MESSAGES = { Unable to import Cloud database. - + Adding your Redis Cloud database to Redis Insight is disabled due to a setting restricting database connection management. @@ -278,7 +273,7 @@ export const INFINITE_MESSAGES = { Redis Cloud {' '} to check your database. - + @@ -312,10 +307,10 @@ export const INFINITE_MESSAGES = { Your subscription does not have a free trial Redis Cloud database. - + Do you want to create a free trial database in your existing subscription? - + @@ -355,9 +350,9 @@ export const INFINITE_MESSAGES = { Connecting to your database - + This may take several minutes, but it is totally worth it! - + @@ -379,7 +374,7 @@ export const INFINITE_MESSAGES = { New version is now available - + <> With Redis Insight {` ${version} `} @@ -387,7 +382,7 @@ export const INFINITE_MESSAGES = {
Restart Redis Insight to install updates. - +
Congratulations! - + Deployment completed successfully!
Check out the pipeline statistics page. - + {/* // TODO remove display none when statistics page will be available */} diff --git a/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.tsx b/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.tsx index ca6982d1d1..ef14c85247 100644 --- a/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.tsx +++ b/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.tsx @@ -1,9 +1,9 @@ import React, { useEffect, useMemo } from 'react' -import { EuiTextColor } from '@elastic/eui' import { Link } from 'uiSrc/components/base/link/Link' import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { DestructiveButton } from 'uiSrc/components/base/forms/buttons' +import { ColorText } from 'uiSrc/components/base/text' export interface Props { message: string @@ -28,7 +28,7 @@ const RdiDeployErrorContent = (props: Props) => { return ( <> - +
Review the error log for details.
@@ -44,7 +44,7 @@ const RdiDeployErrorContent = (props: Props) => { - + {/* // TODO remove display none when logs column will be available */} diff --git a/redisinsight/ui/src/components/notifications/error-messages.tsx b/redisinsight/ui/src/components/notifications/error-messages.tsx index 2f121961fc..4fc04f92cd 100644 --- a/redisinsight/ui/src/components/notifications/error-messages.tsx +++ b/redisinsight/ui/src/components/notifications/error-messages.tsx @@ -1,6 +1,8 @@ import React from 'react' + import { riToast } from 'uiSrc/components/base/display/toast' import { InfoIcon, ToastDangerIcon } from 'uiSrc/components/base/icons' + import RdiDeployErrorContent from './components/rdi-deploy-error-content' import { EncryptionErrorContent, DefaultErrorContent } from './components' import CloudCapiUnAuthorizedErrorContent from './components/cloud-capi-unauthorized' diff --git a/redisinsight/ui/src/components/notifications/success-messages.tsx b/redisinsight/ui/src/components/notifications/success-messages.tsx index a1f1d7e474..f819dd3575 100644 --- a/redisinsight/ui/src/components/notifications/success-messages.tsx +++ b/redisinsight/ui/src/components/notifications/success-messages.tsx @@ -1,5 +1,4 @@ import React from 'react' -import { EuiText } from '@elastic/eui' import { EXTERNAL_LINKS } from 'uiSrc/constants/links' import { IBulkActionOverview, @@ -14,6 +13,7 @@ import { } from 'uiSrc/utils' import { numberWithSpaces } from 'uiSrc/utils/numbers' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { Text } from 'uiSrc/components/base/text' import styles from './styles.module.scss' // TODO: use i18n file for texts @@ -208,8 +208,8 @@ export default { {fileName ? ( <>
- Commands executed from file: - {formatLongName(fileName, 34, 5)} + Commands executed from file: + {formatLongName(fileName, 34, 5)} ) : null} @@ -217,36 +217,36 @@ export default { message: ( - + {numberWithSpaces(processed)} - - + + Commands Processed - + - + {numberWithSpaces(succeed)} - - + + Success - + - + {numberWithSpaces(failed)} - - + + Errors - + - + {millisecondsFormat(data?.duration || 0, 'H:mm:ss.SSS')} - - + + Time Taken - + ), diff --git a/redisinsight/ui/src/components/oauth/oauth-select-account-dialog/OAuthSelectAccountDialog.tsx b/redisinsight/ui/src/components/oauth/oauth-select-account-dialog/OAuthSelectAccountDialog.tsx index 1a032365d1..bcdbb916ae 100644 --- a/redisinsight/ui/src/components/oauth/oauth-select-account-dialog/OAuthSelectAccountDialog.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-select-account-dialog/OAuthSelectAccountDialog.tsx @@ -4,8 +4,6 @@ import { EuiModalBody, EuiRadioGroup, EuiRadioGroupOption, - EuiText, - EuiTextColor, EuiTitle, } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' @@ -44,6 +42,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { ColorText, Text } from 'uiSrc/components/base/text' import styles from './styles.module.scss' interface FormValues { @@ -172,10 +171,10 @@ const OAuthSelectAccountDialog = () => { const radios: EuiRadioGroupOption[] = accounts.map(({ id, name = '' }) => ({ id: `${id}`, label: ( - + {name} {id} - + ), })) @@ -190,9 +189,9 @@ const OAuthSelectAccountDialog = () => {

Connect to Redis Cloud

 - + Select an account to connect to: - + { find(rsRegions, { provider })?.regions || [] return ( - + {`${countryName} (${cityName})`} - {region} + {region} {rsProviderRegions?.includes(region) && ( - (Redis 7.2) - + )} - + ) } @@ -181,10 +180,10 @@ const OAuthSelectPlan = () => {

Choose a cloud vendor

 - + Select a cloud vendor and region to complete the final step towards your free trial Redis database. No credit card is required. - +
{OAuthProviders.map(({ icon, id, label }) => (
@@ -201,12 +200,12 @@ const OAuthSelectPlan = () => { [styles.activeProvider]: id === providerSelected, })} /> - {label} + {label}
))}
- Region + Region { data-testid="select-oauth-region" /> {!regionOptions.length && ( - No regions available, try another vendor. - + )}