Merge pull request #14288 from overleaf/mj-table-gen-error-state-rework

[visual] Update look of table generator error state

GitOrigin-RevId: a16787131236ed2a59af48639c4ae5d196b39597

services/web/frontend/js/features/source-editor/components/table-generator/tabular.tsx

@@ -18,6 +18,7 @@ import { EditorSelection } from '@codemirror/state'
 import { CodeMirrorViewContextProvider } from '../codemirror-editor'
 import { TableProvider } from './contexts/table-context'
 import { TabularProvider, useTabularContext } from './contexts/tabular-context'
+import Icon from '../../../../shared/components/icon'
 
 export type CellData = {
   // TODO: Add columnSpan
@@ -48,22 +49,29 @@ export type Positions = {
   rowPositions: RowPosition[]
 }
 
-export const FallbackComponent: FC<{ view: EditorView; node: SyntaxNode }> = ({
-  view,
-  node,
-}) => {
+export const TableRenderingError: FC<{
+  view: EditorView
+  codePosition?: number
+}> = ({ view, codePosition }) => {
   return (
-    <Alert bsStyle="warning" style={{ marginBottom: 0 }}>
-      Table rendering error{' '}
-      <Button
-        onClick={() =>
-          view.dispatch({
-            selection: EditorSelection.cursor(node.from),
-          })
-        }
-      >
-        View code
-      </Button>
+    <Alert className="table-generator-error">
+      <span className="table-generator-error-icon">
+        <Icon type="exclamation-circle" />
+      </span>
+      <span className="table-generator-error-message">
+        We couldn't render your table
+      </span>
+      {codePosition !== undefined && (
+        <Button
+          onClick={() =>
+            view.dispatch({
+              selection: EditorSelection.cursor(codePosition),
+            })
+          }
+        >
+          View code
+        </Button>
+      )}
     </Alert>
   )
 }
@@ -75,9 +83,8 @@ export const Tabular: FC<{
   return (
     <ErrorBoundary
       fallbackRender={() => (
-        <FallbackComponent view={view} node={tabularNode} />
+        <TableRenderingError view={view} codePosition={tabularNode.from} />
       )}
-      onError={(error, componentStack) => console.error(error, componentStack)}
     >
       <CodeMirrorViewContextProvider value={view}>
         <TabularProvider>

services/web/frontend/stylesheets/app/editor/table-generator.less

@@ -370,3 +370,21 @@
     height: 1px;
   }
 }
+
+.table-generator-error {
+  background: linear-gradient(0deg, #f9f1f1, #f9f1f1),
+    linear-gradient(0deg, #f5beba, #f5beba);
+  display: flex;
+  justify-content: space-between;
+  color: black;
+  border: 1px solid #f5beba;
+  font-family: @font-family-sans-serif;
+  margin-bottom: 0;
+  .table-generator-error-message {
+    flex: 1 0 auto;
+  }
+  .table-generator-error-icon {
+    color: #b83a33;
+    margin-right: 12px;
+  }
+}