Merge pull request #1681 from quadratichq/qa

QA: Started Aug 8th

quadratic-api/src/app.ts

@@ -88,8 +88,8 @@ registerRoutes().then(() => {
   app.use((err: any, req: Request, res: Response, next: NextFunction) => {
     if (NODE_ENV !== 'test') {
       if (err.status >= 500) {
-        console.error(`[${new Date().toISOString()}] ${err.message}`);
-        if (NODE_ENV !== 'production') console.log(`[${new Date().toISOString()}] ${err.message}`);
+        if (NODE_ENV === 'production') console.error(`[${new Date().toISOString()}]`, err);
+        else console.log(`[${new Date().toISOString()}]`, err);
       }
     }
     next(err);

quadratic-client/src/app/atoms/inlineEditorAtom.ts

@@ -0,0 +1,32 @@
+import { inlineEditorMonaco } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco';
+import { atom } from 'recoil';
+
+export interface InlineEditorState {
+  visible: boolean;
+  formula: boolean;
+  left: number;
+  top: number;
+  lineHeight: number;
+}
+
+export const defaultInlineEditor: InlineEditorState = {
+  visible: false,
+  formula: false,
+  left: 0,
+  top: 0,
+  lineHeight: 19,
+};
+
+export const inlineEditorAtom = atom({
+  key: 'inlineEditorState',
+  default: defaultInlineEditor,
+  effects: [
+    ({ onSet }) => {
+      onSet((newValue) => {
+        if (newValue.visible) {
+          inlineEditorMonaco.focus();
+        }
+      });
+    },
+  ],
+});

quadratic-client/src/app/atoms/userMessageAtom.ts

@@ -0,0 +1,14 @@
+import { atom } from 'recoil';
+
+interface UserMessageState {
+  message: string | undefined;
+}
+
+const defaultBorderMenuState: UserMessageState = {
+  message: undefined,
+};
+
+export const userMessageAtom = atom({
+  key: 'userMessageState',
+  default: defaultBorderMenuState,
+});

quadratic-client/src/app/gridGL/HTMLGrid/htmlCells/HtmlCells.tsx

@@ -4,8 +4,8 @@ import { htmlCellsHandler } from './htmlCellsHandler';
 
 // parent of htmlCells. Handled in htmlCells.ts
 export const HtmlCells = () => {
-  const divRef = useCallback((node: HTMLDivElement | null) => {
-    htmlCellsHandler.init(node);
+  const divRef = useCallback((node: HTMLDivElement) => {
+    htmlCellsHandler.attach(node);
   }, []);
 
   return (

quadratic-client/src/app/gridGL/HTMLGrid/htmlCells/htmlCellsHandler.ts

@@ -4,28 +4,28 @@ import { JsHtmlOutput } from '@/app/quadratic-core-types';
 import { HtmlCell } from './HtmlCell';
 
 class HTMLCellsHandler {
-  private cells: Set<HtmlCell> = new Set();
-
   // used to attach the html-cells to react
-  private div?: HTMLDivElement;
+  private div: HTMLDivElement;
 
-  // used to hold the data if the div is not yet created
-  private dataWaitingForDiv?: JsHtmlOutput[];
+  private cells: Set<HtmlCell> = new Set();
 
   constructor() {
+    this.div = document.createElement('div');
+    this.div.className = 'html-cells';
+
     events.on('htmlOutput', this.htmlOutput);
     events.on('htmlUpdate', this.htmlUpdate);
     events.on('changeSheet', this.changeSheet);
     events.on('sheetOffsets', (sheetId) => this.updateOffsets([sheetId]));
     events.on('resizeRowHeights', (sheetId) => this.updateOffsets([sheetId]));
   }
 
-  private htmlOutput = (data: JsHtmlOutput[]) => {
-    if (this.div) {
-      this.updateHtmlCells(data);
-    } else {
-      this.dataWaitingForDiv = data;
-    }
+  attach = (parent: HTMLDivElement) => {
+    parent.appendChild(this.div);
+  };
+
+  private htmlOutput = (htmlCells: JsHtmlOutput[]) => {
+    this.prepareCells([...this.cells], htmlCells);
   };
 
   private htmlUpdate = (data: JsHtmlOutput) => {
@@ -50,24 +50,6 @@ class HTMLCellsHandler {
     }
   };
 
-  private attach(parent: HTMLDivElement) {
-    if (this.div) {
-      parent.appendChild(this.div);
-    }
-  }
-
-  init(parent: HTMLDivElement | null) {
-    this.div = this.div ?? document.createElement('div');
-    this.div.className = 'html-cells';
-    if (parent) {
-      this.attach(parent);
-    }
-    if (this.dataWaitingForDiv) {
-      this.updateHtmlCells(this.dataWaitingForDiv);
-      this.dataWaitingForDiv = undefined;
-    }
-  }
-
   private changeSheet = () => {
     this.cells.forEach((cell) => cell.changeSheet(sheets.sheet.id));
   };
@@ -102,10 +84,6 @@ class HTMLCellsHandler {
     });
   }
 
-  updateHtmlCells(htmlCells: JsHtmlOutput[]) {
-    this.prepareCells([...this.cells], htmlCells);
-  }
-
   clearHighlightEdges() {
     this.cells.forEach((cell) => cell.clearHighlightEdges());
   }

quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/InlineEditor.tsx

@@ -2,12 +2,14 @@
 //! button that opens the full-sized code editor. All functionality is defined
 //! in inlineEditorHandler.ts.
 
+import { inlineEditorAtom } from '@/app/atoms/inlineEditorAtom';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
 import { colors } from '@/app/theme/colors';
 import { Button } from '@/shared/shadcn/ui/button';
 import { SubtitlesOutlined } from '@mui/icons-material';
 import { Tooltip } from '@mui/material';
 import { useCallback } from 'react';
+import { useRecoilValue } from 'recoil';
 import './inlineEditorStyles.scss';
 
 export const InlineEditor = () => {
@@ -20,29 +22,45 @@ export const InlineEditor = () => {
   // fix its positioning problem. There's probably a workaround, but it was too
   // much work.
 
+  const { visible, formula, left, top } = useRecoilValue(inlineEditorAtom);
+
   return (
-    <div ref={ref} style={{ position: 'absolute', display: 'flex', pointerEvents: 'auto', alignItems: 'center' }}>
+    <div
+      ref={ref}
+      style={{
+        position: 'absolute',
+        display: 'flex',
+        alignItems: 'center',
+        visibility: visible ? 'visible' : 'hidden',
+        pointerEvents: visible ? 'auto' : 'none',
+        left: `${left}px`,
+        top: `${top}px`,
+      }}
+    >
       <div id="cell-edit"></div>
 
-      <Tooltip title="Open Formula in multi-line code editor">
-        <Button
-          variant="ghost"
-          style={{
-            position: 'absolute',
-            display: 'flex',
-            alignItems: 'center',
-            borderRadius: '0',
-            padding: '0',
-            marginTop: '-0.23px',
-            width: '23px',
-            height: '23.23px',
-            right: '-24px',
-            backgroundColor: colors.languageFormula,
-          }}
-        >
-          <SubtitlesOutlined sx={{ width: '18px', height: '18px', color: 'white' }} />
-        </Button>
-      </Tooltip>
+      {visible && formula ? (
+        <Tooltip title="Open Formula in multi-line code editor">
+          <Button
+            variant="ghost"
+            style={{
+              position: 'absolute',
+              display: 'flex',
+              alignItems: 'center',
+              borderRadius: '0',
+              padding: '0',
+              marginTop: '-0.23px',
+              width: '23px',
+              height: '23.23px',
+              right: '-24px',
+              backgroundColor: colors.languageFormula,
+            }}
+            onClick={(e) => inlineEditorHandler.openCodeEditor(e)}
+          >
+            <SubtitlesOutlined sx={{ width: '18px', height: '18px', color: 'white' }} />
+          </Button>
+        </Tooltip>
+      ) : null}
     </div>
   );
 };

quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler.ts

@@ -28,9 +28,6 @@ const MINIMUM_MOVE_VIEWPORT = 50;
 class InlineEditorHandler {
   private div?: HTMLDivElement;
 
-  // this is used to display the formula expand button
-  private formulaExpandButton?: HTMLDivElement;
-
   private open = false;
   private showing = false;
 
@@ -71,7 +68,7 @@ class InlineEditorHandler {
     this.cursorIsMoving = false;
     this.x = this.y = this.width = this.height = 0;
     this.location = undefined;
-    this.formula = false;
+    this.formula = undefined;
     this.formatSummary = undefined;
     this.temporaryBold = undefined;
     this.temporaryItalic = undefined;
@@ -141,7 +138,6 @@ class InlineEditorHandler {
         window.removeEventListener('keydown', inlineEditorKeyboard.keyDown);
         this.updateMonacoCursorPosition();
         this.keepCursorVisible();
-        inlineEditorMonaco.focus();
       }
       inlineEditorFormula.cursorMoved();
     } else {
@@ -199,7 +195,6 @@ class InlineEditorHandler {
       this.changeToFormula(changeToFormula);
       this.updateMonacoCursorPosition();
       this.keepCursorVisible();
-      inlineEditorMonaco.focus();
     } else {
       this.close(0, 0, false);
     }
@@ -296,21 +291,25 @@ class InlineEditorHandler {
       cellOutlineOffset + (verticalAlign === 'bottom' ? Math.min(y, y + cellContentHeight - inlineEditorHeight) : y);
     this.width = inlineEditorWidth;
     this.height = inlineEditorHeight;
-    this.div?.style.setProperty('left', this.x + 'px');
-    this.div?.style.setProperty('top', this.y + 'px');
-    if (!this.formulaExpandButton) {
-      throw new Error('Expected formulaExpandDiv to be defined in InlineEditorHandler');
+
+    if (!pixiAppSettings.setInlineEditorState) {
+      throw new Error('Expected pixiAppSettings.setInlineEditorState to be defined in InlineEditorHandler');
     }
-    this.formulaExpandButton.style.lineHeight = this.height + 'px';
+    pixiAppSettings.setInlineEditorState((prev) => ({
+      ...prev,
+      left: this.x,
+      top: this.y,
+      lineHeight: this.height,
+    }));
 
     pixiApp.cursor.dirty = true;
   };
 
   // Toggle between normal editor and formula editor.
   private changeToFormula = (formula: boolean) => {
     if (this.formula === formula) return;
-    if (!this.formulaExpandButton) {
-      throw new Error('Expected formulaExpandDiv to be defined in InlineEditorHandler');
+    if (!pixiAppSettings.setInlineEditorState) {
+      throw new Error('Expected pixiAppSettings.setInlineEditorState to be defined in InlineEditorHandler');
     }
     this.formula = formula;
     if (formula) {
@@ -322,10 +321,10 @@ class InlineEditorHandler {
       inlineEditorMonaco.setLanguage('plaintext');
     }
 
-    // We need to use visibility instead of display to avoid an annoying warning
-    // with <Tooltip>.
-    this.formulaExpandButton.style.visibility = formula ? 'visible' : 'hidden';
-    this.formulaExpandButton.style.pointerEvents = formula ? 'auto' : 'none';
+    pixiAppSettings.setInlineEditorState((prev) => ({
+      ...prev,
+      formula,
+    }));
 
     if (formula && this.location) {
       inlineEditorFormula.cellHighlights(this.location, inlineEditorMonaco.get().slice(1));
@@ -412,7 +411,7 @@ class InlineEditorHandler {
   };
 
   // Handler for the click for the expand code editor button.
-  private openCodeEditor = (e: MouseEvent) => {
+  openCodeEditor = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.stopPropagation();
     if (!pixiAppSettings.setEditorInteractionState) {
       throw new Error('Expected setEditorInteractionState to be defined in openCodeEditor');
@@ -439,12 +438,6 @@ class InlineEditorHandler {
     }
     this.div = div;
 
-    const expandButton = div?.childNodes[1] as HTMLDivElement | undefined;
-    if (expandButton) {
-      this.formulaExpandButton = expandButton;
-      this.formulaExpandButton.removeEventListener('click', this.openCodeEditor);
-      this.formulaExpandButton.addEventListener('click', this.openCodeEditor);
-    }
     this.hideDiv();
   }
 
@@ -464,31 +457,41 @@ class InlineEditorHandler {
     return this.open;
   }
 
-  showDiv() {
+  showDiv = () => {
     if (!this.div) {
       throw new Error('Expected div to be defined in showDiv');
     }
-    // We need to use visibility instead of display to avoid an annoying warning
-    // with <Tooltip>.
-    this.div.style.visibility = 'visible';
-    this.div.style.pointerEvents = 'auto';
 
-    this.showing = true;
-  }
+    if (!pixiAppSettings.setInlineEditorState) {
+      throw new Error('Expected pixiAppSettings.setInlineEditorState to be defined in InlineEditorHandler');
+    }
 
-  hideDiv() {
-    if (!this.div) return;
+    pixiAppSettings.setInlineEditorState((prev) => ({
+      ...prev,
+      visible: true,
+    }));
+
+    this.showing = true;
+  };
 
-    // We need to use visibility instead of display to avoid an annoying warning
-    // with <Tooltip>.
-    this.div.style.visibility = 'hidden';
-    this.div.style.pointerEvents = 'none';
+  hideDiv = () => {
+    if (!this.div) {
+      throw new Error('Expected div to be defined in showDiv');
+    }
 
-    if (this.formulaExpandButton) {
-      this.formulaExpandButton.style.visibility = 'hidden';
+    if (!pixiAppSettings.setInlineEditorState) {
+      throw new Error('Expected pixiAppSettings.setInlineEditorState to be defined in InlineEditorHandler');
     }
+
+    pixiAppSettings.setInlineEditorState((prev) => ({
+      ...prev,
+      visible: false,
+      formula: false,
+    }));
+    this.location = undefined;
+    inlineEditorMonaco.set('');
     this.showing = false;
-  }
+  };
 
   // Called when manually changing cell position via clicking on a new cell
   // (except when editing formula).