diff --git a/hyperglass/ui/components/results/error.tsx b/hyperglass/ui/components/results/error.tsx index d623069..88c6db7 100644 --- a/hyperglass/ui/components/results/error.tsx +++ b/hyperglass/ui/components/results/error.tsx @@ -1,21 +1,30 @@ import { Text } from '@chakra-ui/react'; -import strReplace from 'react-string-replace'; import type { TFormattedError } from './types'; +type TFormatError = string | JSX.Element; + +function formatError(text: string, values: string[], regex: RegExp): TFormatError[] | TFormatError { + if (!values.length) { + return text; + } + + const parts = text.split(regex); + + return parts.reduce((prev, current, i) => { + if (!i) { + return [current]; + } + + return prev.concat( + values.includes(current) ? {current} : current, + ); + }, [] as TFormatError[]); +} + export const FormattedError = (props: TFormattedError) => { const { keywords, message } = props; - const patternStr = keywords.map(kw => `(${kw})`).join('|'); - const pattern = new RegExp(patternStr, 'gi'); - let errorFmt; - try { - errorFmt = strReplace(message, pattern, match => ( - - {match} - - )); - } catch (err) { - errorFmt = {message}; - } - return {keywords.length !== 0 ? errorFmt : message}; + const pattern = new RegExp(keywords.map(kw => `(${kw})`).join('|'), 'gi'); + const things = formatError(message, keywords, pattern); + return {keywords.length !== 0 ? things : message}; }; diff --git a/hyperglass/ui/package.json b/hyperglass/ui/package.json index 529ca8c..cdcc2c8 100644 --- a/hyperglass/ui/package.json +++ b/hyperglass/ui/package.json @@ -37,12 +37,12 @@ "react-markdown": "^4.3.1", "react-query": "^3.5.6", "react-select": "^3.1.1", - "react-string-replace": "^0.4.4", "react-table": "^7.6.2", "string-format": "^2.0.0", "yup": "^0.32.8" }, "devDependencies": { + "@hookstate/devtools": "^3.0.0", "@types/node": "^14.11.10", "@types/react-select": "^3.0.28", "@types/react-table": "^7.0.25", diff --git a/hyperglass/ui/pages/_app.tsx b/hyperglass/ui/pages/_app.tsx index bcfbb04..2221827 100644 --- a/hyperglass/ui/pages/_app.tsx +++ b/hyperglass/ui/pages/_app.tsx @@ -3,6 +3,9 @@ import { HyperglassProvider } from '~/context'; import { IConfig } from '~/types'; // import { useRouter } from "next/router"; // import Error from "./_error"; +if (process.env.NODE_ENV === 'development') { + require('@hookstate/devtools'); +} import type { AppProps, AppInitialProps } from 'next/app'; diff --git a/hyperglass/ui/yarn.lock b/hyperglass/ui/yarn.lock index 5ef1437..88937ab 100644 --- a/hyperglass/ui/yarn.lock +++ b/hyperglass/ui/yarn.lock @@ -905,6 +905,14 @@ resolved "https://registry.yarnpkg.com/@hookstate/core/-/core-3.0.1.tgz#dc46ea71e3bf0ab5c2dc024029c9210ed12fbb84" integrity sha512-buRie83l3FYPLCuaBE68puE3XS19r2O+jwC/kH2ikIW7ww8AavndR3MspzMMkNpq2zL8pZtIcpiWJBbn4Uq2Vw== +"@hookstate/devtools@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@hookstate/devtools/-/devtools-3.0.0.tgz#9b289503112f0f95221d0c86e602ada7793bbd3a" + integrity sha512-jXI9e+4+dr0FbdtHhQPa0/SmRwLM7twMU0Qf87AgM3DqqFDV9dRPD56jPXaTh8xD1Bt2R72TmGmqdkDhdKG8AQ== + dependencies: + redux "4.0.5" + redux-devtools-extension "2.13.8" + "@hookstate/persistence@^3.0.0": version "3.0.0" resolved "https://registry.yarnpkg.com/@hookstate/persistence/-/persistence-3.0.0.tgz#973b30d3a3bb1b29f4f59b1afe0d914e71a23882" @@ -4313,7 +4321,7 @@ lodash.sortby@^4.7.0: resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438" integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg= -lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4: +lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20: version "4.17.20" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== @@ -5597,13 +5605,6 @@ react-select@^3.1.1: react-input-autosize "^2.2.2" react-transition-group "^4.3.0" -react-string-replace@^0.4.4: - version "0.4.4" - resolved "https://registry.yarnpkg.com/react-string-replace/-/react-string-replace-0.4.4.tgz#24006fbe0db573d5be583133df38b1a735cb4225" - integrity sha512-FAMkhxmDpCsGTwTZg7p/2v+/GTmxAp73so3fbSvlAcBBX36ujiGRNEaM/1u+jiYQrArhns+7eE92g2pi5E5FUA== - dependencies: - lodash "^4.17.4" - react-style-singleton@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66" @@ -5674,12 +5675,17 @@ readdirp@~3.5.0: dependencies: picomatch "^2.2.1" +redux-devtools-extension@2.13.8: + version "2.13.8" + resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1" + integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg== + redux-thunk@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622" integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw== -redux@^4.0.5: +redux@4.0.5, redux@^4.0.5: version "4.0.5" resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f" integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==