diff options
author | Valerij Fredriksen <valerijf@yahooinc.com> | 2022-08-12 16:01:07 +0200 |
---|---|---|
committer | Valerij Fredriksen <valerijf@yahooinc.com> | 2022-08-12 16:01:07 +0200 |
commit | fddb5fff5fecf4265177ca380f3316f2397e9d2f (patch) | |
tree | bae47c8106c686be448173100c841e28cf53c246 /client | |
parent | fa8f5e5dc64fda0df8679101dc9d937d8243f760 (diff) |
Add notifications
Diffstat (limited to 'client')
-rw-r--r-- | client/js/app/package.json | 1 | ||||
-rw-r--r-- | client/js/app/src/app/app.jsx | 17 | ||||
-rw-r--r-- | client/js/app/src/app/components/icon/icon.jsx | 8 | ||||
-rw-r--r-- | client/js/app/src/app/libs/notification/index.jsx | 2 | ||||
-rw-r--r-- | client/js/app/src/app/libs/notification/messages.jsx | 77 | ||||
-rw-r--r-- | client/js/app/src/app/libs/notification/rest-message.jsx | 43 | ||||
-rw-r--r-- | client/js/app/yarn.lock | 35 |
7 files changed, 173 insertions, 10 deletions
diff --git a/client/js/app/package.json b/client/js/app/package.json index 741c7fed9a5..66d02eefb8b 100644 --- a/client/js/app/package.json +++ b/client/js/app/package.json @@ -21,6 +21,7 @@ "@fortawesome/react-fontawesome": "^0", "@mantine/core": "^5", "@mantine/hooks": "^5", + "@mantine/notifications": "^5", "@types/react": "^18", "@types/react-dom": "^18", "@vitejs/plugin-react": "^1", diff --git a/client/js/app/src/app/app.jsx b/client/js/app/src/app/app.jsx index 1432ddc2b29..72b36b6642f 100644 --- a/client/js/app/src/app/app.jsx +++ b/client/js/app/src/app/app.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { BrowserRouter, Route } from 'react-router-dom'; +import { NotificationsProvider as MantineNotificationsProvider } from '@mantine/notifications'; import { Layout } from 'app/components'; import { Home } from 'app/pages/home/home'; import { QueryBuilder } from 'app/pages/querybuilder'; @@ -11,13 +12,15 @@ export function App() { return ( <BrowserRouter> <ThemeProvider> - <Layout> - <Router> - <Route path="/" element={<Home />} /> - <Route path="querybuilder" element={<QueryBuilder />} /> - <Route path="querytracer" element={<QueryTracer />} /> - </Router> - </Layout> + <MantineNotificationsProvider> + <Layout> + <Router> + <Route path="/" element={<Home />} /> + <Route path="querybuilder" element={<QueryBuilder />} /> + <Route path="querytracer" element={<QueryTracer />} /> + </Router> + </Layout> + </MantineNotificationsProvider> </ThemeProvider> </BrowserRouter> ); diff --git a/client/js/app/src/app/components/icon/icon.jsx b/client/js/app/src/app/components/icon/icon.jsx index 88075b9e7e2..edc86250b01 100644 --- a/client/js/app/src/app/components/icon/icon.jsx +++ b/client/js/app/src/app/components/icon/icon.jsx @@ -11,6 +11,9 @@ import { faDownload, faPaste, faPlus, + faXmark, + faInfo, + faExclamation, } from '@fortawesome/free-solid-svg-icons'; // TODO: use dynamic import @@ -23,7 +26,10 @@ library.add( faPaste, faDownload, faCopy, - faCheck + faCheck, + faXmark, + faInfo, + faExclamation ); export function Icon({ name, type = 'solid', color, ...rest }) { diff --git a/client/js/app/src/app/libs/notification/index.jsx b/client/js/app/src/app/libs/notification/index.jsx new file mode 100644 index 00000000000..9313e3c9adf --- /dev/null +++ b/client/js/app/src/app/libs/notification/index.jsx @@ -0,0 +1,2 @@ +export * from 'app/libs/notification/rest-message'; +export * from 'app/libs/notification/messages'; diff --git a/client/js/app/src/app/libs/notification/messages.jsx b/client/js/app/src/app/libs/notification/messages.jsx new file mode 100644 index 00000000000..87f94b0dda0 --- /dev/null +++ b/client/js/app/src/app/libs/notification/messages.jsx @@ -0,0 +1,77 @@ +import React from 'react'; +import { showNotification } from '@mantine/notifications'; +import { Icon } from 'app/components'; +import { SHADE } from 'app/styles/theme/colors'; + +function getStyles(color) { + return (theme) => ({ + root: { + color: theme.fn.themeColor(color, SHADE.LOW_CONTRAST_TEXT), + background: theme.fn.themeColor(color, SHADE.UI_ELEMENT_BACKGROUND), + borderColor: theme.fn.themeColor( + color, + SHADE.UI_ELEMENT_BORDER_AND_FOCUS + ), + }, + title: { + fontWeight: 700, + color: theme.fn.themeColor(color, SHADE.LOW_CONTRAST_TEXT), + '&:hover': { + color: theme.fn.themeColor(color, SHADE.LOW_CONTRAST_TEXT), + }, + }, + description: { + color: theme.fn.themeColor(color, SHADE.LOW_CONTRAST_TEXT), + '&:hover': { + color: theme.fn.themeColor(color, SHADE.LOW_CONTRAST_TEXT), + }, + }, + closeButton: { + color: theme.fn.themeColor(color, SHADE.LOW_CONTRAST_TEXT), + '&:hover': { + backgroundColor: theme.fn.themeColor( + color, + SHADE.HOVERED_UI_ELEMENT_BACKGROUND + ), + }, + }, + }); +} + +const commonMessage = ({ title, icon, color, message }) => { + return showNotification({ + styles: getStyles(color), + icon: <Icon name={icon} />, + title, + color, + message, + }); +}; + +export const infoMessage = ( + message, + title = 'Info', + icon = 'info', + color = 'blue' +) => commonMessage({ title, icon, color, message }); + +export const warningMessage = ( + message, + title = 'Warning', + icon = 'exclamation', + color = 'orange' +) => commonMessage({ title, icon, color, message }); + +export const errorMessage = ( + message, + title = 'Error', + icon = 'xmark', + color = 'red' +) => commonMessage({ title, icon, color, message }); + +export const successMessage = ( + message, + title = 'Success', + icon = 'check', + color = 'green' +) => commonMessage({ title, icon, color, message }); diff --git a/client/js/app/src/app/libs/notification/rest-message.jsx b/client/js/app/src/app/libs/notification/rest-message.jsx new file mode 100644 index 00000000000..d05d28754b8 --- /dev/null +++ b/client/js/app/src/app/libs/notification/rest-message.jsx @@ -0,0 +1,43 @@ +import { + errorMessage, + infoMessage, + successMessage, +} from 'app/libs/notification/index'; + +export const restMessage = (response, prefix, code = 200) => { + // Gracefully handle various types of rest responses input + // Response can be a raw fetch request, an already decoded object or a plain string + if (typeof response === 'object') { + if (typeof response.text === 'function') { + Promise.resolve(response.text()).then((text) => { + restMessageContent(response.status || code, text, prefix); + }); + } else { + restMessageContent( + response.code || 200, + response.message || JSON.stringify(response), + prefix + ); + } + } else if (typeof response === 'string') { + restMessageContent(code, response, prefix); + } +}; + +const restMessageContent = (code, message, prefix) => { + // Trunk long messages + if (message.length > 200) message = message.substring(0, 200) + '...'; + + // Add pre-message if given + // Most of the time the message is just "Success" - so you would like + // to prefix it with eg. 'Adding user: ' + message = prefix ? prefix + message : message; + + if (code < 300) { + successMessage(message); + } else if (code < 400) { + infoMessage(message); + } else { + errorMessage(message); + } +}; diff --git a/client/js/app/yarn.lock b/client/js/app/yarn.lock index 79fc106f216..ade7dbb3e38 100644 --- a/client/js/app/yarn.lock +++ b/client/js/app/yarn.lock @@ -229,7 +229,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3": +"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7": version "7.18.9" resolved "https://registry.npm.ouryahoo.com:4443/npm-registry/api/npm/npm-registry/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a" integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw== @@ -499,6 +499,14 @@ resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-5.1.1.tgz#a15d006951c65e1cc02577c9be021a02a7265acd" integrity sha512-paixen37qs9a8g/hYMIAMXCl+WUK2DdGqSPahGpza1BdNqtYEIfbu12LcuZkfswufIY8DaagdabG0yL6Swh+bg== +"@mantine/notifications@^5": + version "5.1.4" + resolved "https://registry.npm.ouryahoo.com:4443/npm-registry/api/npm/npm-registry/@mantine/notifications/-/notifications-5.1.4.tgz#9e1cb683b9c2337a71400a353837308b042ef375" + integrity sha512-wNH+nYH7X/5lWVpR2f+qx29Du6cvq0oy6M9GOJE1twuMTy8EfBILUWatRslFcvIH8EYC03zEVYPVY4N1yHaLLQ== + dependencies: + "@mantine/utils" "5.1.4" + react-transition-group "4.4.2" + "@mantine/styles@5.1.1": version "5.1.1" resolved "https://registry.yarnpkg.com/@mantine/styles/-/styles-5.1.1.tgz#8a2253747fc1817fc06ab7ac3633c1059369ca06" @@ -512,6 +520,11 @@ resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-5.1.1.tgz#2fa9ecaac4fe61cc3e07c4953ca23a1bc9ac765c" integrity sha512-2FiSrD1lYuDHSGVi1QL5iskO8/Bnd6eDrwdpEWS/PJfg6iEz80HnmBxf/xzkDBaNdK3/n8g2kOaOcw5Ff1OFkA== +"@mantine/utils@5.1.4": + version "5.1.4" + resolved "https://registry.npm.ouryahoo.com:4443/npm-registry/api/npm/npm-registry/@mantine/utils/-/utils-5.1.4.tgz#3da8459f77fb98f09c3f9a1939449e0c0a9fe58d" + integrity sha512-f2lnKjvGkQrWXSqTRg5uNh2PZpeow1enjX8OFwlOn0B6bJDdKYiHl+YidWe2DObOi36WSvtLbaRS7yKQOG+1XQ== + "@radix-ui/number@1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.0.tgz#4c536161d0de750b3f5d55860fc3de46264f897b" @@ -938,6 +951,14 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" +dom-helpers@^5.0.1: + version "5.2.1" + resolved "https://registry.npm.ouryahoo.com:4443/npm-registry/api/npm/npm-registry/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + electron-to-chromium@^1.4.147: version "1.4.158" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.158.tgz#abbdaaf64676bfa4bc0307522125db34424a0ada" @@ -1976,7 +1997,7 @@ prettier@2: resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64" integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g== -prop-types@^15.8.1: +prop-types@^15.6.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -2032,6 +2053,16 @@ react-textarea-autosize@8.3.4: use-composed-ref "^1.3.0" use-latest "^1.2.1" +react-transition-group@4.4.2: + version "4.4.2" + resolved "https://registry.npm.ouryahoo.com:4443/npm-registry/api/npm/npm-registry/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" + integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@^18: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" |