ENG-1166 - allow setting open state for embed in query blocks (#618)

Author: mdroidian

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

@@ -38,12 +38,14 @@ const BlockEmbed = ({ uid, viewValue }: { uid: string; viewValue: string }) => {
       window.roamAlphaAPI.ui.components.renderBlock({
         uid,
         el,
-        // "open?": open, // waiting for roamAlphaAPI to add a open/close to renderBlock
+        // @ts-expect-error - add to roamjs-components
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        "open?": open,
       });
     }
   }, [uid, open, contentRef]);
   return (
-    <div ref={contentRef} className={!!title ? "page-embed" : "block-embed"} />
+    <div ref={contentRef} className={title ? "page-embed" : "block-embed"} />
   );
 };
 

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

@@ -168,17 +168,14 @@ export const CellEmbed = ({
       window.roamAlphaAPI.ui.components.renderBlock({
         uid,
         el,
-        // "open?": open, // waiting for roamAlphaAPI to add a open/close to renderBlock
+        // @ts-expect-error - add to roamjs-components
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        "open?": open,
       });
     }
-  }, [contentRef]);
+  }, [contentRef, uid, viewValue]);
   return (
-    <div className="roamjs-query-embed">
-      <div
-        ref={contentRef}
-        className={!!title ? "page-embed" : "block-embed"}
-      />
-    </div>
+    <div ref={contentRef} className={title ? "page-embed" : "block-embed"} />
   );
 };
 

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

@@ -52,11 +52,11 @@ import { Inputs } from "./Inputs";
 const VIEWS: Record<string, { value: boolean }> = {
   link: { value: false },
   plain: { value: false },
-  embed: { value: false },
+  embed: { value: true },
   alias: { value: true },
 };
 
-const EMBED_FOLD_VALUES = ["default", "open", "closed"]; // waiting for roamAlphaAPI to add a open/close to renderBlock
+const EMBED_FOLD_VALUES = ["default", "open", "closed"];
 
 type EnglishQueryPart = { text: string; clickId?: string };
 
@@ -1078,27 +1078,35 @@ const ResultsView: ResultsViewComponent = ({
                                   }
                                 />
                               )}
-                              {/* {mode === "embed" && (
+                              {mode === "embed" && (
                                 <div className="flex items-center">
                                   <MenuItemSelect
                                     className="roamjs-view-select"
                                     items={EMBED_FOLD_VALUES}
-                                    activeItem={
-                                      !!value ? value : EMBED_FOLD_VALUES[0]
-                                    }
-                                    onItemSelect={(value) => {
-                                      onViewChange({ mode, column, value }, i);
+                                    activeItem={value || EMBED_FOLD_VALUES[0]}
+                                    onItemSelect={(nextValue) => {
+                                      onViewChange(
+                                        {
+                                          mode,
+                                          column,
+                                          value:
+                                            nextValue === "default"
+                                              ? ""
+                                              : nextValue,
+                                        },
+                                        i,
+                                      );
                                     }}
                                   />
                                   <Tooltip content="Initial folded state">
                                     <Icon
                                       icon="info-sign"
                                       iconSize={12}
-                                      className="opacity-80 ml-2 align-middle"
+                                      className="ml-2 align-middle opacity-80"
                                     />
                                   </Tooltip>
                                 </div>
-                              )} */}
+                              )}
                             </td>
                           )}
                         </tr>