Notify user of buffer errors from vtk / add possibility to add actions to notifications

platform/ui/src/components/snackbar/Snackbar.css

@@ -156,19 +156,50 @@
   transition: all 300ms ease;
 }
 
-.sb-success {
+.sb-item .sb-action,
+.sb-error .sb-action,
+.sb-warning .sb-action,
+.sb-info .sb-action,
+.sb-success .sb-action {
+  margin-top: 10px;
+  display: inline-block;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.42857143;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-image: none;
+  border: none;
+  color: white;
+}
+
+.sb-success,
+.sb-success .sb-action {
   background-color: var(--snackbar-success);
 }
 
-.sb-error {
+.sb-error,
+.sb-error .sb-action {
   background-color: var(--snackbar-error);
 }
 
-.sb-warning {
+.sb-warning,
+.sb-warning .sb-action {
   background-color: var(--snackbar-warning);
 }
 
-.sb-info {
+.sb-info,
+.sb-info .sb-action {
   background-color: var(--snackbar-info);
 }
 

platform/ui/src/components/snackbar/SnackbarItem.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 const SnackbarItem = ({ options, onClose }) => {
   const handleClose = () => {
@@ -24,6 +24,11 @@ const SnackbarItem = ({ options, onClose }) => {
       </span>
       {options.title && <div className="sb-title">{options.title}</div>}
       {options.message && <div className="sb-message">{options.message}</div>}
+      {options.action && (
+        <button className="sb-action" onClick={options.action.onClick}>
+          {options.action.label}
+        </button>
+      )}
     </div>
   );
 };