ENG-427 Query builder doesn't remember the column layout preference (#869)

* Store query view layout by uid

* format

Author: mdroidian

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

@@ -431,7 +431,7 @@ const ResultsView: ResultsViewComponent = ({
 
     newViews
       .map((v) => ({
-        text: v.column,
+        text: v.uid,
         children: [
           { text: v.mode, children: v.value ? [{ text: v.value }] : [] },
         ],
@@ -1051,7 +1051,7 @@ const ResultsView: ResultsViewComponent = ({
                       </tr>
                     </thead>
                     <tbody className="divide-y divide-gray-200 bg-white">
-                      {views.map(({ column, mode, value }, i) => (
+                      {views.map(({ column, mode, value, uid }, i) => (
                         <tr key={i}>
                           <td className="whitespace-nowrap">{column}</td>
                           <td className="whitespace-nowrap">
@@ -1074,7 +1074,10 @@ const ResultsView: ResultsViewComponent = ({
                                   },
                                 );
 
-                                onViewChange({ mode: m, column, value }, i);
+                                onViewChange(
+                                  { mode: m, column, value, uid },
+                                  i,
+                                );
                               }}
                             />
                           </td>
@@ -1089,6 +1092,7 @@ const ResultsView: ResultsViewComponent = ({
                                         mode,
                                         column,
                                         value: e.target.value,
+                                        uid,
                                       },
                                       i,
                                     )
@@ -1110,6 +1114,7 @@ const ResultsView: ResultsViewComponent = ({
                                             nextValue === "default"
                                               ? ""
                                               : nextValue,
+                                          uid,
                                         },
                                         i,
                                       );

apps/roam/src/utils/parseResultSettings.ts

@@ -4,6 +4,7 @@ import { OnloadArgs, RoamBasicNode } from "roamjs-components/types/native";
 import getSettingIntFromTree from "roamjs-components/util/getSettingIntFromTree";
 import getSubTree from "roamjs-components/util/getSubTree";
 import toFlexRegex from "roamjs-components/util/toFlexRegex";
+import { BLOCK_REF_REGEX } from "roamjs-components/dom/constants";
 import { StoredFilters } from "~/components/settings/DefaultFilters";
 import { Column } from "./types";
 import getSettingValueFromTree from "roamjs-components/util/getSettingValueFromTree";
@@ -24,11 +25,17 @@ export type InputValues = {
 }[];
 export type FilterData = Record<string, Filters>;
 export type Views = {
+  uid: string;
   column: string;
   mode: string;
   value: string;
 }[];
 
+const getStoredViewKey = (text: string): string => {
+  const blockRefMatch = text.match(BLOCK_REF_REGEX);
+  return blockRefMatch?.[1] || text;
+};
+
 export const getAlias = (parentUid: string) => {
   const aliasMatch = getTextByBlockUid(parentUid).match(
     /{{query block:(.*?)}}/,
@@ -124,7 +131,7 @@ const parseResultSettings = (
   const viewsNode = getSubTree({ tree: resultNode.children, key: "views" });
   const savedViewData = Object.fromEntries(
     viewsNode.children.map((c) => [
-      c.text,
+      getStoredViewKey(c.text),
       {
         mode: c.children[0]?.text,
         value: c.children[0]?.children?.[0]?.text || "",
@@ -210,11 +217,14 @@ const parseResultSettings = (
         type: getSettingValueFromTree({ tree: c.children, key: "type" }),
       };
     }),
-    views: columns.map(({ key: column }) => ({
+    views: columns.map(({ key: column, uid }) => ({
+      uid,
       column,
       mode:
-        savedViewData[column]?.mode || (column === "text" ? "link" : "plain"),
-      value: savedViewData[column]?.value || "",
+        savedViewData[uid]?.mode ||
+        savedViewData[column]?.mode ||
+        (column === "text" ? "link" : "plain"),
+      value: savedViewData[uid]?.value || savedViewData[column]?.value || "",
     })),
     random,
     pageSize,