Add notifications

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"