chore(react/ribbon): dynamic rendering of search options

apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx

@@ -1,4 +1,4 @@
-import { ComponentChildren } from "preact";
+import { ComponentChildren, VNode } from "preact";
 import { t } from "../../services/i18n";
 import Button from "../react/Button";
 import { TabContext } from "./ribbon-interface";
@@ -18,53 +18,72 @@ import appContext from "../../components/app_context";
 import server from "../../services/server";
 
 interface SearchOption {
-  searchOption: string;
+  attributeName: string;
+  attributeType: "label" | "relation";
   icon: string;
   label: string;
   tooltip?: string;
+  // TODO: Make mandatory once all components are ported.
+  component?: (props: SearchOptionProps) => VNode;
+}
+
+interface SearchOptionProps {
+  note: FNote;
+  refreshResults: () => void;
+  attributeName: string;
+  attributeType: "label" | "relation";
 }
 
 const SEARCH_OPTIONS: SearchOption[] = [
   {
-    searchOption: "searchString",
+    attributeName: "searchString",
+    attributeType: "label",
     icon: "bx bx-text",
-    label: t("search_definition.search_string")
+    label: t("search_definition.search_string"),
+    component: SearchStringOption
   },
   {
-    searchOption: "searchScript",
+    attributeName: "searchScript",
+    attributeType: "relation",
     icon: "bx bx-code",
     label: t("search_definition.search_script")
   },
   {
-    searchOption: "ancestor",
+    attributeName: "ancestor",
+    attributeType: "relation",
     icon: "bx bx-filter-alt",
     label: t("search_definition.ancestor")
   },
   {
-    searchOption: "fastSearch",
+    attributeName: "fastSearch",
+    attributeType: "label",
     icon: "bx bx-run",
     label: t("search_definition.fast_search"),
     tooltip: t("search_definition.fast_search_description")
   },
   {
-    searchOption: "includeArchivedNotes",
+    attributeName: "includeArchivedNotes",
+    attributeType: "label",
     icon: "bx bx-archive",
     label: t("search_definition.include_archived"),
     tooltip: t("search_definition.include_archived_notes_description")
   },
   {
-    searchOption: "orderBy",
+    attributeName: "orderBy",
+    attributeType: "label",
     icon: "bx bx-arrow-from-top",
     label: t("search_definition.order_by")
   },
   {
-    searchOption: "limit",
+    attributeName: "limit",
+    attributeType: "label",
     icon: "bx bx-stop",
     label: t("search_definition.limit"),
     tooltip: t("search_definition.limit_description")
   },
   {
-    searchOption: "debug",
+    attributeName: "debug",
+    attributeType: "label",
     icon: "bx bx-bug",
     label: t("search_definition.debug"),
     tooltip: t("search_definition.debug_description")
@@ -97,43 +116,52 @@ export default function SearchDefinitionTab({ note, ntxId }: TabContext) {
   return (
     <div className="search-definition-widget">
       <div className="search-settings">
-        <table className="search-setting-table">
+        {note && 
-          <tr>
+          <table className="search-setting-table">
-            <td className="title-column">{t("search_definition.add_search_option")}</td>
-            <td colSpan={2} className="add-search-option">
-              {SEARCH_OPTIONS.map(({ icon, label, tooltip }) => (
-                <Button
-                  icon={icon}
-                  text={label}
-                  title={tooltip}
-                />
-              ))}
-            </td>
-          </tr>
-          <tbody className="search-options">
-            <SearchStringOption
-              refreshResults={refreshResults}
-              note={note}
-            />
-          </tbody>
-          <tbody className="action-options">
-
-          </tbody>
-          <tbody>
             <tr>
-              <td colSpan={3}>
+              <td className="title-column">{t("search_definition.add_search_option")}</td>
-                <div style={{ display: "flex", justifyContent: "space-evenly" }}>
+              <td colSpan={2} className="add-search-option">
+                {SEARCH_OPTIONS.map(({ icon, label, tooltip }) => (
                   <Button
-                    icon="bx bx-search"
+                    icon={icon}
-                    text={t("search_definition.search_button")}
+                    text={label}
-                    keyboardShortcut="Enter"
+                    title={tooltip}
-                    onClick={refreshResults}
                   />
-                </div>
+                ))}
               </td>
             </tr>
-          </tbody>
+            <tbody className="search-options">
-        </table>
+              {SEARCH_OPTIONS.map(({ attributeType, attributeName, component }) => {
+                const attr = note.getAttribute(attributeType, attributeName);      
+                if (attr && component) {
+                  return component({
+                    attributeName,
+                    attributeType,
+                    note,
+                    refreshResults
+                  });
+                }  
+              })}
+            </tbody>
+            <tbody className="action-options">
+
+            </tbody>
+            <tbody>
+              <tr>
+                <td colSpan={3}>
+                  <div style={{ display: "flex", justifyContent: "space-evenly" }}>
+                    <Button
+                      icon="bx bx-search"
+                      text={t("search_definition.search_button")}
+                      keyboardShortcut="Enter"
+                      onClick={refreshResults}
+                    />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        }
       </div>
     </div>
   )
@@ -163,7 +191,7 @@ function SearchOption({ note, title, children, help, attributeName, attributeTyp
   )
 }
 
-function SearchStringOption({ note, refreshResults }: { note: FNote, refreshResults: () => void }) {
+function SearchStringOption({ note, refreshResults }: SearchOptionProps) {
   const currentValue = useRef("");
   const spacedUpdate = useSpacedUpdate(async () => {
     const searchString = currentValue.current;

apps/client/src/widgets/ribbon_widgets/search_definition.ts

@@ -153,24 +153,6 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget {
 
         this.$searchOptions.empty();
 
-        for (const OptionClass of OPTION_CLASSES) {
-            const { attributeType, optionName } = OptionClass;
-
-            const attr = this.note.getAttribute(attributeType as AttributeType, optionName);
-
-            this.$widget.find(`[data-search-option-add='${optionName}'`).toggle(!attr);
-
-            if (attr) {
-                const searchOption = new OptionClass(attr, this.note).setParent(this);
-                this.child(searchOption);
-
-                const renderedEl = searchOption.render();
-                if (renderedEl) {
-                    this.$searchOptions.append(renderedEl);
-                }
-            }
-        }
-
         const actions = bulkActionService.parseActions(this.note);
         const renderedEls = actions
             .map((action) => renderReactWidget(this, action.doRender()))

apps/client/src/widgets/search_options/ancestor.ts

@@ -51,13 +51,6 @@ const TPL = /*html*/`
 </tr>`;
 
 export default class Ancestor extends AbstractSearchOption {
-    static get optionName() {
-        return "ancestor";
-    }
-    static get attributeType() {
-        return "relation";
-    }
-
     static async create(noteId: string) {
         await AbstractSearchOption.setAttribute(noteId, "relation", "ancestor", "root");
     }

apps/client/src/widgets/search_options/debug.ts

@@ -20,13 +20,6 @@ const TPL = /*html*/`
 </tr>`;
 
 export default class Debug extends AbstractSearchOption {
-    static get optionName() {
-        return "debug";
-    }
-    static get attributeType() {
-        return "label";
-    }
-
     static async create(noteId: string) {
         await AbstractSearchOption.setAttribute(noteId, "label", "debug");
     }

apps/client/src/widgets/search_options/fast_search.ts

@@ -19,12 +19,6 @@ const TPL = /*html*/`
 </tr>`;
 
 export default class FastSearch extends AbstractSearchOption {
-    static get optionName() {
-        return "fastSearch";
-    }
-    static get attributeType() {
-        return "label";
-    }
 
     static async create(noteId: string) {
         await AbstractSearchOption.setAttribute(noteId, "label", "fastSearch");

apps/client/src/widgets/search_options/include_archived_notes.ts

@@ -13,12 +13,6 @@ const TPL = /*html*/`
 </tr>`;
 
 export default class IncludeArchivedNotes extends AbstractSearchOption {
-    static get optionName() {
-        return "includeArchivedNotes";
-    }
-    static get attributeType() {
-        return "label";
-    }
 
     static async create(noteId: string) {
         await AbstractSearchOption.setAttribute(noteId, "label", "includeArchivedNotes");

apps/client/src/widgets/search_options/limit.ts

@@ -26,13 +26,6 @@ export default class Limit extends AbstractSearchOption {
 
     private $limit!: JQuery<HTMLElement>;
 
-    static get optionName() {
-        return "limit";
-    }
-    static get attributeType() {
-        return "label";
-    }
-
     static async create(noteId: string) {
         await AbstractSearchOption.setAttribute(noteId, "label", "limit", "10");
     }

apps/client/src/widgets/search_options/order_by.ts

@@ -37,13 +37,6 @@ const TPL = /*html*/`
 
 export default class OrderBy extends AbstractSearchOption {
 
-    static get optionName() {
-        return "orderBy";
-    }
-    static get attributeType() {
-        return "label";
-    }
-
     static async create(noteId: string) {
         await AbstractSearchOption.setAttribute(noteId, "label", "orderBy", "relevancy");
         await AbstractSearchOption.setAttribute(noteId, "label", "orderDirection", "asc");

apps/client/src/widgets/search_options/search_script.ts

@@ -33,12 +33,6 @@ const TPL = /*html*/`
 </tr>`;
 
 export default class SearchScript extends AbstractSearchOption {
-    static get optionName() {
-        return "searchScript";
-    }
-    static get attributeType() {
-        return "relation";
-    }
 
     static async create(noteId: string) {
         await AbstractSearchOption.setAttribute(noteId, "relation", "searchScript", "root");

apps/client/src/widgets/search_options/search_string.ts

@@ -11,13 +11,6 @@ export default class SearchString extends AbstractSearchOption {
     private $searchString!: JQuery<HTMLElement>;
     private spacedUpdate!: SpacedUpdate;
 
-    static get optionName() {
-        return "searchString";
-    }
-    static get attributeType() {
-        return "label";
-    }
-
     static async create(noteId: string) {
         await AbstractSearchOption.setAttribute(noteId, "label", "searchString");
     }