From d92a645029cd567712ee8ceb7cca41c041eb5264 Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Mon, 14 Aug 2023 09:18:36 +0100
Subject: [PATCH] Merge pull request #14288 from
 overleaf/mj-table-gen-error-state-rework

[visual] Update look of table generator error state

GitOrigin-RevId: a16787131236ed2a59af48639c4ae5d196b39597
---
 .../components/table-generator/tabular.tsx    | 41 +++++++++++--------
 .../app/editor/table-generator.less           | 18 ++++++++
 2 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/components/table-generator/tabular.tsx b/services/web/frontend/js/features/source-editor/components/table-generator/tabular.tsx
index ac3e3c560c..397a5f4bfe 100644
--- a/services/web/frontend/js/features/source-editor/components/table-generator/tabular.tsx
+++ b/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>
diff --git a/services/web/frontend/stylesheets/app/editor/table-generator.less b/services/web/frontend/stylesheets/app/editor/table-generator.less
index 8f330a2a9e..efbf766576 100644
--- a/services/web/frontend/stylesheets/app/editor/table-generator.less
+++ b/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;
+  }
+}