ENG-984 Add DiscourseContextOverlay support in ResultsTable (#505)

* feat: Add DiscourseContextOverlay support in ResultsTable

- Integrated DiscourseContextOverlay to display context suggestions in ResultRow.
- Updated uid handling for actions to ensure proper functionality.
- Introduced CONTEXT_OVERLAY_SUGGESTION constant for better maintainability in predefined selections.

* refactor: Clean up imports and enhance uid handling in ResultsTable

- Removed unnecessary imports for improved code clarity.
- Simplified uid generation for DiscourseContextOverlay to ensure consistent behavior.
- Updated conditional logic for better readability and maintainability.

Author: mdroidian

apps/roam/src/components/results-view/ResultsTable.tsx

@@ -5,12 +5,7 @@ import React, {
   useState,
   useCallback,
 } from "react";
-import {
-  Button,
-  HTMLTable,
-  Icon,
-  IconName,
-} from "@blueprintjs/core";
+import { Button, HTMLTable, Icon, IconName } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
 import { Column, Result } from "~/utils/types";
 import type { FilterData, Sorts, Views } from "~/utils/parseResultSettings";
@@ -24,6 +19,8 @@ import openBlockInSidebar from "roamjs-components/writes/openBlockInSidebar";
 import setInputSettings from "roamjs-components/util/setInputSettings";
 import toCellValue from "~/utils/toCellValue";
 import { ContextContent } from "~/components/DiscourseContext";
+import DiscourseContextOverlay from "~/components/DiscourseContextOverlay";
+import { CONTEXT_OVERLAY_SUGGESTION } from "~/utils/predefinedSelections";
 
 const EXTRA_ROW_TYPES = ["context", "discourse"] as const;
 type ExtraRowType = (typeof EXTRA_ROW_TYPES)[number] | null;
@@ -211,14 +208,28 @@ const ResultRow = ({
   const cell = (key: string) => {
     const value = toCellValue({
       value: r[`${key}-display`] || r[key] || "",
-      uid: (r[`${key}-uid`] as string) || "",
+      uid: r[`${key}-uid`] || "",
     });
     const action = r[`${key}-action`];
     if (typeof action === "string") {
       const buttonProps =
         value.toUpperCase().replace(/\s/g, "_") in IconNames
           ? { icon: value as IconName, minimal: true }
           : { text: value };
+      const actionUid = r[`${key}-uid`];
+
+      if (
+        action === "discourse" &&
+        value === CONTEXT_OVERLAY_SUGGESTION &&
+        actionUid
+      ) {
+        return (
+          <DiscourseContextOverlay
+            uid={actionUid}
+            id={`discourse-overlay-${parentUid}-${actionUid}`}
+          />
+        );
+      }
       return (
         <Button
           {...buttonProps}
@@ -227,7 +238,7 @@ const ResultRow = ({
               new CustomEvent("roamjs:query-builder:action", {
                 detail: {
                   action,
-                  uid: r[`${key}-uid`],
+                  uid: actionUid,
                   val: r["text"],
                   onRefresh,
                   queryUid: parentUid,

apps/roam/src/utils/predefinedSelections.ts

@@ -242,6 +242,8 @@ const LEAF_SUGGESTIONS: SelectionSuggestion[] = CREATE_DATE_SUGGESTIONS.concat(
   .concat(EDIT_BY_SUGGESTIONS);
 // .concat(ATTR_SUGGESTIONS);
 
+export const CONTEXT_OVERLAY_SUGGESTION = "overlay";
+
 const predefinedSelections: PredefinedSelection[] = [
   {
     test: CREATE_DATE_TEST,
@@ -522,6 +524,7 @@ const predefinedSelections: PredefinedSelection[] = [
               { text: "flows" },
               { text: "graph" },
               { text: "layout" }, // replace with { text: "search-around" }, not supported yet
+              { text: CONTEXT_OVERLAY_SUGGESTION },
             ],
           },
         ],