Add error message container below input

guardian · Aug 3, 2024 · 9c280af · 9c280af
1 parent 4ed4fff
commit 9c280af
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 35 deletions.
diff --git a/prosemirror-client/src/cqlInput/CqlInput.ts b/prosemirror-client/src/cqlInput/CqlInput.ts
@@ -121,6 +121,7 @@ template.innerHTML = `
 export const contentEditableTestId = "cql-input-contenteditable";
 export const typeaheadTestId = "cql-input-typeahead";
 export const errorTestId = "cql-input-error";
+export const errorMsgTestId = "cql-input-error-message";
 
 export const createCqlInput = (
   cqlService: CqlServiceInterface,
@@ -133,17 +134,20 @@ export const createCqlInput = (
       const cqlInputId = "cql-input";
       const cqlTypeaheadId = "cql-typeahead";
       const cqlErrorId = "cql-error";
+      const cqlErrorMsgId = "cql-error-msg";
       const shadow = this.attachShadow({ mode: "open" });
 
       shadow.innerHTML = `
         <div id="${cqlInputId}"></div>
-        <div id="${cqlTypeaheadId}" class="Cql__TypeaheadPopover" data-testid="${typeaheadTestId}" popover anchor="${cqlInputId}"></div>
+        <div id="${cqlTypeaheadId}" class="Cql__TypeaheadPopover" data-testid="${typeaheadTestId}" popover></div>
         <div id="${cqlErrorId}" class="Cql__ErrorPopover" data-testid="${errorTestId}" popover>~</div>
+        <div id="${cqlErrorMsgId}" class="Cql__ErrorMessageContainer" data-testid="${errorMsgTestId}"></div>
       `;
       shadow.appendChild(template.content.cloneNode(true));
       const cqlInput = shadow.getElementById(cqlInputId)!;
       const typeaheadEl = shadow.getElementById(cqlTypeaheadId)!;
       const errorEl = shadow.getElementById(cqlErrorId)!;
+      const errorMsgEl = shadow.getElementById(cqlErrorMsgId)!;
 
       const onChange = (detail: QueryChangeEventDetail) => {
         this.dispatchEvent(
@@ -158,6 +162,7 @@ export const createCqlInput = (
         mountEl: cqlInput,
         typeaheadEl,
         errorEl,
+        errorMsgEl,
         cqlService,
         debugEl,
         onChange,

diff --git a/prosemirror-client/src/cqlInput/ErrorPopover.ts b/prosemirror-client/src/cqlInput/ErrorPopover.ts
@@ -1,16 +1,16 @@
-import { Mapping } from "prosemirror-transform";
 import { EditorView } from "prosemirror-view";
 import { CqlError } from "../services/CqlService";
-import { Popover, VirtualElement } from "./Popover";
+import { Popover } from "./Popover";
 import { ERROR_CLASS } from "./plugin";
 
 export class ErrorPopover extends Popover {
   private debugContainer: HTMLElement | undefined;
   private contentEl: HTMLElement;
 
   public constructor(
-    public view: EditorView,
-    public popoverEl: HTMLElement,
+    protected view: EditorView,
+    protected popoverEl: HTMLElement,
+    private errorMsgEl: HTMLElement,
     debugEl?: HTMLElement
   ) {
     super(view, popoverEl);
@@ -29,6 +29,7 @@ export class ErrorPopover extends Popover {
   public updateErrorMessage = async (error: CqlError | undefined) => {
     if (!error) {
       this.contentEl.innerHTML = "";
+      this.errorMsgEl.innerHTML = "";
       this.popoverEl.hidePopover?.();
       return;
     }
@@ -47,6 +48,7 @@ export class ErrorPopover extends Popover {
     const xOffset = 0;
     const yOffset = -25;
     await this.renderPopover(referenceEl, xOffset, yOffset);
+    this.errorMsgEl.innerHTML = error.message;
 
     this.popoverEl.showPopover?.();
   };
@@ -60,31 +62,4 @@ export class ErrorPopover extends Popover {
         </div>`;
     }
   };
-
-  private getVirtualElementFromView = (
-    position: number | undefined
-  ): VirtualElement => {
-    if (position) {
-      try {
-        const { top, right, bottom, left } = this.view.coordsAtPos(position);
-
-        return {
-          getBoundingClientRect: () => ({
-            width: right - left,
-            height: bottom - top,
-            x: left,
-            y: top,
-            top,
-            left,
-            right,
-            bottom,
-          }),
-        };
-      } catch (e) {
-        // Defer to parent input container
-      }
-    }
-
-    return this.view.dom;
-  };
 }
diff --git a/prosemirror-client/src/cqlInput/editor.ts b/prosemirror-client/src/cqlInput/editor.ts
@@ -18,14 +18,16 @@ export const createEditor = ({
   mountEl,
   typeaheadEl,
   errorEl,
+  errorMsgEl,
+  debugEl,
   cqlService,
   onChange,
-  debugEl,
 }: {
   initialValue: string;
   mountEl: HTMLElement;
   typeaheadEl: HTMLElement;
   errorEl: HTMLElement;
+  errorMsgEl: HTMLElement;
   cqlService: CqlServiceInterface;
   onChange: (detail: QueryChangeEventDetail) => void;
   debugEl?: HTMLElement;
@@ -34,6 +36,7 @@ export const createEditor = ({
     cqlService,
     typeaheadEl,
     errorEl,
+    errorMsgEl,
     onChange,
     debugEl,
   });

diff --git a/prosemirror-client/src/cqlInput/plugin.ts b/prosemirror-client/src/cqlInput/plugin.ts
@@ -61,12 +61,14 @@ export const createCqlPlugin = ({
   cqlService,
   typeaheadEl,
   errorEl,
+  errorMsgEl,
   onChange,
   debugEl,
 }: {
   cqlService: CqlServiceInterface;
   typeaheadEl: HTMLElement;
   errorEl: HTMLElement;
+  errorMsgEl: HTMLElement;
   onChange: (detail: QueryChangeEventDetail) => void;
   debugEl?: HTMLElement;
 }) => {
@@ -270,7 +272,7 @@ export const createCqlPlugin = ({
     },
     view(view) {
       typeaheadPopover = new TypeaheadPopover(view, typeaheadEl, debugEl);
-      errorPopover = new ErrorPopover(view, errorEl, debugEl);
+      errorPopover = new ErrorPopover(view, errorEl, errorMsgEl, debugEl);
 
       const fetchQueryAndUpdateDoc = async (
         query: string,
@@ -341,7 +343,7 @@ export const createCqlPlugin = ({
           } = cqlPluginKey.getState(view.state)!;
 
           typeaheadPopover?.updateItemsFromSuggestions(suggestions, mapping);
-          errorPopover?.updateErrorMessage(error, mapping);
+          errorPopover?.updateErrorMessage(error);
 
           if (prevQuery.trim() === currentQuery.trim()) {
             return;