handle macro errors

packages/web/src/datagrid/DataGridCore.js

@@ -298,6 +298,16 @@ export default function DataGridCore(props) {
     return <ErrorInfo message={errorMessage} />;
   }
 
+  if (grider.errors && grider.errors.length > 0) {
+    return (
+      <div>
+        {grider.errors.map((err, index) => (
+          <ErrorInfo message={err} key={index} isSmall />
+        ))}
+      </div>
+    );
+  }
+
   const handleRowScroll = (value) => {
     setFirstVisibleRowScrollIndex(value);
   };

packages/web/src/datagrid/Grider.ts

@@ -50,6 +50,9 @@ export default abstract class Grider {
   get disableLoadNextPage() {
     return false;
   }
+  get errors() {
+    return null;
+  }
   updateRow(index, changeObject) {
     for (const key of Object.keys(changeObject)) {
       this.setCellValue(index, key, changeObject[key]);

packages/web/src/freetable/MacroPreviewGrider.ts

@@ -3,9 +3,14 @@ import Grider, { GriderRowStatus } from '../datagrid/Grider';
 
 export default class MacroPreviewGrider extends Grider {
   model: FreeTableModel;
+  _errors: string[] = [];
   constructor(model: FreeTableModel, macro: MacroDefinition, macroArgs: {}, selectedCells: MacroSelectedCell[]) {
     super();
-    this.model = runMacro(macro, macroArgs, model, true, selectedCells);
+    this.model = runMacro(macro, macroArgs, model, true, selectedCells, this._errors);
+  }
+
+  get errors() {
+    return this._errors;
   }
 
   getRowStatus(index): GriderRowStatus {

packages/web/src/widgets/ErrorInfo.js

@@ -14,7 +14,20 @@ const Icon = styled.div`
   margin: 10px;
 `;
 
-export default function ErrorInfo({ message, icon = 'fas fa-times-circle red' }) {
+const ContainerSmall = styled.div`
+  display: flex;
+  margin-right: 10px;
+`;
+
+export default function ErrorInfo({ message, icon = 'fas fa-times-circle red', isSmall = false }) {
+  if (isSmall) {
+    return (
+      <ContainerSmall>
+        <FontIcon icon={icon} />
+        {message}
+      </ContainerSmall>
+    );
+  }
   return (
     <Container>
       <Icon>