alert users when fontStyle.conditional is undefined

Signed-off-by: pogi7 <aaronlevitt7@gmail.com>

view/src/components/Table/tableUtils.ts

@@ -2,6 +2,12 @@ import ITableData from "../../interfaces/ITableData";
 import { CMState } from "../../interfaces/CMStates";
 import { TableLayout, IRowMapping } from "../../interfaces/DataLayoutsType";
 import { Row } from "@tanstack/table-core";
+import { Commands } from "../../../../commands/src/commands";
+import { postParentMessage } from "../../utils/postMessage";
+
+// This variable is used to only have an error reported once. This allows vscode.window to show popups
+// FIXME: Use a better technique than a flag.
+let errorReported = false;
 
 // Process the json data into content
 // that React-Table can render.
@@ -134,11 +140,55 @@ export const setFontStyle = (
   conditional: string,
   row: Row<ITableData>
 ) => {
-  // Remove redundant double quotes from string
-  const formattedConditional = row.original[conditional].slice(1, -1);
-  return styles[formattedConditional];
+  let formattedConditional;
+  try {
+    if (
+      row.original[conditional].startsWith('"') &&
+      row.original[conditional].endsWith('"')
+    ) {
+      // Remove redundant double quotes from string in present
+      formattedConditional = row.original[conditional].slice(1, -1);
+    } else {
+      formattedConditional = row.original[conditional];
+    }
+    return styles[formattedConditional];
+  } catch (error) {
+    reportError(error, conditional);
+  }
 };
 
+/**
+ * Reports an error to the parent window.
+ *
+ * @remarks
+ * This function sends a message to the parent window using the `postParentMessage` function.
+ * It ensures that the error is reported only once by tracking whether an error has already been reported.
+ *
+ * @param error - The error to be reported.
+ * @param conditional - The conditional string used in error reporting.
+ *
+ * @returns void
+ */
+function reportError(error: unknown, conditional: string): void {
+  if (errorReported) {
+    return;
+  }
+
+  if (error instanceof Error) {
+    postParentMessage({
+      command: Commands.ALERT,
+      text: `Error: Invalid/Undefined fontStyle.conditional ${conditional}`,
+    });
+  } else {
+    postParentMessage({
+      command: Commands.ALERT,
+      text: `Unknown error: ${error}`,
+    });
+  }
+
+  errorReported = true;
+}
+
 // Helper to get row range on Shift + Click to select multiple rows
 export function getRowRange<ITableData>(
   rows: Array<Row<ITableData>>,

view/src/components/Tree/treeUtils.ts

@@ -1,6 +1,12 @@
 import ITableData from "../../interfaces/ITableData";
 import { CMState } from "../../interfaces/CMStates";
 import { IRowMapping, TreeLayout } from "../../interfaces/DataLayoutsType";
+import { Commands } from "../../../../commands/src/commands";
+import { postParentMessage } from "../../utils/postMessage";
+
+// This variable is used to only have an error reported once. This allows vscode.window to show popups
+// FIXME: Use a better technique than a flag.
+let errorReported = false;
 
 // Process the TREE json data into content
 // that React-Table can render.
@@ -135,11 +141,55 @@ export const setFontStyle = (
   conditional: string,
   node: ITableData
 ) => {
-  // Remove redundant double quotes from string
-  const formattedConditional = node.data[conditional].slice(1, -1);
-  return styles[formattedConditional];
+  let formattedConditional;
+  try {
+    if (
+      node.data[conditional].startsWith('"') &&
+      node.data[conditional].endsWith('"')
+    ) {
+      // Remove redundant double quotes from string in present
+      formattedConditional = node.data[conditional].slice(1, -1);
+    } else {
+      formattedConditional = node.data[conditional];
+    }
+    return styles[formattedConditional];
+  } catch (error) {
+    reportError(error, conditional);
+  }
 };
 
+/**
+ * Reports an error to the parent window.
+ *
+ * @remarks
+ * This function sends a message to the parent window using the `postParentMessage` function.
+ * It ensures that the error is reported only once by tracking whether an error has already been reported.
+ *
+ * @param error - The error to be reported.
+ * @param conditional - The conditional string used in error reporting.
+ *
+ * @returns void
+ */
+function reportError(error: unknown, conditional: string): void {
+  if (errorReported) {
+    return;
+  }
+
+  if (error instanceof Error) {
+    postParentMessage({
+      command: Commands.ALERT,
+      text: `Error: Invalid/Undefined fontStyle.conditional ${conditional}`,
+    });
+  } else {
+    postParentMessage({
+      command: Commands.ALERT,
+      text: `Unknown error: ${error}`,
+    });
+  }
+
+  errorReported = true;
+}
+
 export const areArraysOfObjectsEqual = (
   ...arrays: [{ [x: string]: ITableData[] }] | any[]
 ) => {

view/src/pages/TableView.tsx

@@ -167,6 +167,14 @@ const TableView: React.FC = () => {
             command: Commands.REFRESH_TABLE_DATA,
           });
           break;
+
+        case Commands.ALERT:
+          specificMessage = message as CommandStructures[Commands.ALERT];
+          postMessage({
+            command: Commands.ALERT,
+            text: specificMessage.text,
+          });
+          break;
       }
     };
     window.addEventListener("message", handler);

view/src/pages/TreeView.tsx

@@ -174,6 +174,14 @@ const TreeView: React.FC = () => {
             command: Commands.REFRESH_TABLE_DATA,
           });
           break;
+
+        case Commands.ALERT:
+          specificMessage = message as CommandStructures[Commands.ALERT];
+          postMessage({
+            command: Commands.ALERT,
+            text: specificMessage.text,
+          });
+          break;
       }
     };
     window.addEventListener("message", handler);

view/src/utils/postMessage.ts

@@ -1,8 +1,43 @@
 import { CommandDefinitions } from "../../../commands/src/commands";
 import { vsCode } from "./vsState";
 
-// With this wrapper, we will see typing errors if we try to send a malformed command
-export function postMessage<K extends keyof CommandDefinitions>(message: { command: K } & CommandDefinitions[K] ) {
+/**
+ * Sends a message to the VSCode extension.  With this wrapper, we will see typing errors if we try to send a malformed command
+ *
+ * @remarks
+ * This function sends a message to the VSCode extension using the {@link vsCode.postMessage} method.
+ *
+ * @template K - The type of command key in the CommandDefinitions.
+ *
+ * @param message - The message object to be sent, including the command key and its associated payload.
+ *
+ * @returns void
+ */
+export function postMessage<K extends keyof CommandDefinitions>(
+  message: { command: K } & CommandDefinitions[K]
+) {
   // Send the message to the extension
   vsCode.postMessage(message);
-}
+}
+
+/**
+ * Sends a message to the parent window or page that instantiates the component.
+ *
+ * @remarks
+ * This method uses the {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent | dispatchEvent} to send the message.
+ * 
+ * The data structure for the message is the {@link https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent | MessageEvent}.
+ *
+ * @template K - The type of command key in the CommandDefinitions.
+ *
+ * @param message - The message object to be sent, including the command key and its associated payload.
+ *
+ * @returns void
+ */
+export function postParentMessage<K extends keyof CommandDefinitions>(
+  message: { command: K } & CommandDefinitions[K]
+) {
+  // Send the message to the extension
+  const event = new MessageEvent("message", { data: message });
+  window.dispatchEvent(event);
+}