@saltcorn/builder 0.9.2 → 0.9.3-beta.0

package/src/components/elements/ViewLink.js

@@ -4,7 +4,7 @@
  * @subcategory components / elements
  */
 
-import React, { useContext } from "react";
+import React, { useMemo } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import {
@@ -16,10 +16,11 @@ import {
   setAPropGen,
   FormulaTooltip,
   HelpTopicLink,
+  prepCacheAndFinder,
 } from "./utils";
 
-import { RelationPicker } from "./RelationPicker";
 import { RelationBadges } from "./RelationBadges";
+import { RelationOnDemandPicker } from "./RelationOnDemandPicker";
 
 export /**
  * @param {object} props
@@ -43,7 +44,6 @@ export /**
 const ViewLink = ({
   name,
   block,
-  view_name,
   minRole,
   link_style,
   link_size,
@@ -61,8 +61,7 @@ const ViewLink = ({
   } = useNode((node) => ({ selected: node.events.selected }));
   const names = name.split(":");
 
-  const displabel =
-    label || view_name || (names.length > 1 ? names[1] : names[0]);
+  const displabel = label || (names.length > 1 ? names[1] : names[0]);
   return (
     <span
       className={`${textStyle} ${inModal ? "btn btn-secondary btn-sm" : ""} ${
@@ -86,7 +85,7 @@ const ViewLink = ({
 };
 
 export /**
- * @returns {div}
+ * @returns
  * @category saltcorn-builder
  * @subcategory components
  * @namespace
@@ -109,7 +108,6 @@ const ViewLinkSettings = () => {
     link_bordercol: node.data.props.link_bordercol,
     link_textcol: node.data.props.link_textcol,
     extra_state_fml: node.data.props.extra_state_fml,
-    view_name: node.data.props.view_name,
   }));
   const {
     actions: { setProp },
@@ -122,10 +120,13 @@ const ViewLinkSettings = () => {
     inModal,
     textStyle,
     extra_state_fml,
-    view_name,
     link_target_blank,
   } = node;
-  const options = useContext(optionsCtx);
+  const options = React.useContext(optionsCtx);
+  const { caches, finder } = useMemo(
+    () => prepCacheAndFinder(options),
+    [undefined]
+  );
   let errorString = false;
   try {
     Function("return " + extra_state_fml);
@@ -135,18 +136,42 @@ const ViewLinkSettings = () => {
   const setAProp = setAPropGen(setProp);
   //legacy values
   const use_view_name =
-    view_name ||
-    (name &&
-      ((names) => (names.length > 1 ? names[1] : names[0]))(name.split(":")));
+    name &&
+    ((names) => (names.length > 1 ? names[1] : names[0]))(name.split(":"));
+  const hasLegacyRelation = name && name.includes(":");
+  const safeViewName = use_view_name?.includes(".")
+    ? use_view_name.split(".")[0]
+    : use_view_name;
+  const [relations, setRelations] = React.useState(
+    finder.findRelations(
+      options.tableName,
+      safeViewName,
+      options.excluded_subview_templates
+    )
+  );
+  let safeRelation = relation;
+  if (!safeRelation && !hasLegacyRelation && relations?.paths.length > 0) {
+    safeRelation = relations.paths[0];
+    setProp((prop) => {
+      prop.relation = safeRelation;
+    });
+  }
   const set_view_name = (e) => {
     if (e.target) {
       const target_value = e.target.value;
-      setProp((prop) => (prop.view_name = target_value));
       if (target_value !== use_view_name) {
-        setProp((prop) => {
-          prop.name = options.view_relation_opts[target_value][0].value;
-          prop.relation = undefined;
-        });
+        const newRelations = finder.findRelations(
+          options.tableName,
+          target_value,
+          options.excluded_subview_templates
+        );
+        if (newRelations.paths.length > 0) {
+          setProp((prop) => {
+            prop.name = target_value;
+            prop.relation = newRelations.paths[0];
+          });
+          setRelations(newRelations);
+        }
       }
     }
   };
@@ -165,7 +190,7 @@ const ViewLinkSettings = () => {
                 onChange={set_view_name}
                 onBlur={set_view_name}
               >
-                {options.view_name_opts.map((f, ix) => (
+                {options.views.map((f, ix) => (
                   <option key={ix} value={f.name}>
                     {f.label}
                   </option>
@@ -175,9 +200,8 @@ const ViewLinkSettings = () => {
           </tr>
           <tr>
             <td colSpan="2">
-              <RelationPicker
-                options={options}
-                viewname={use_view_name}
+              <RelationOnDemandPicker
+                relations={relations.layers}
                 update={(relPath) => {
                   if (relPath.startsWith(".")) {
                     setProp((prop) => {
@@ -194,9 +218,9 @@ const ViewLinkSettings = () => {
               />
               <RelationBadges
                 view={name}
-                relation={relation}
+                relation={safeRelation}
                 parentTbl={options.tableName}
-                fk_options={options.fk_options}
+                tableNameCache={caches.tableNameCache}
               />
             </td>
           </tr>
@@ -308,7 +332,6 @@ ViewLink.craft = {
       { name: "inModal", segment_name: "in_modal", column_name: "in_modal" },
       "minRole",
       "link_style",
-      "view_name",
       "link_icon",
       "link_size",
       "link_target_blank",

package/src/components/elements/utils.js

@@ -4,7 +4,7 @@
  * @subcategory components / elements
  */
 /* globals $, _sc_globalCsrf*/
-import React, { Fragment, useContext, useState } from "react";
+import React, { Fragment, useState } from "react";
 import optionsCtx from "../context";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -80,7 +80,7 @@ export const BlockOrInlineSetting = ({ block, inline, textStyle, setProp }) =>
   );
 
 export const HelpTopicLink = ({ topic, ...context }) => {
-  const { mode } = useContext(optionsCtx);
+  const { mode } = React.useContext(optionsCtx);
   let qs = "";
   Object.keys(context).forEach((k) => {
     qs += `${encodeURIComponent(k)}=${encodeURIComponent(context[k])}&`;
@@ -95,7 +95,7 @@ export const HelpTopicLink = ({ topic, ...context }) => {
 };
 
 export const FormulaTooltip = () => {
-  const { fields } = useContext(optionsCtx);
+  const { fields } = React.useContext(optionsCtx);
   return (
     <Tooltip>
       <div>
@@ -137,7 +137,7 @@ export /**
  * @subcategory components / elements / utils
  */
 const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
-  const { mode } = useContext(optionsCtx);
+  const { mode } = React.useContext(optionsCtx);
 
   /**
    * @returns {void}
@@ -225,7 +225,7 @@ export /**
  * @subcategory components / elements / utils
  */
 const MinRoleSetting = ({ minRole, setProp }) => {
-  const options = useContext(optionsCtx);
+  const options = React.useContext(optionsCtx);
   return (
     <div>
       <label>Minimum Role</label>
@@ -259,7 +259,7 @@ export /**
  * @subcategory components / elements / utils
  */
 const MinRoleSettingRow = ({ minRole, setProp }) => {
-  const options = useContext(optionsCtx);
+  const options = React.useContext(optionsCtx);
   return (
     <tr>
       <td>
@@ -743,7 +743,7 @@ const ConfigField = ({
    * @param {object} v
    * @returns {void}
    */
-  const options = useContext(optionsCtx);
+  const options = React.useContext(optionsCtx);
 
   const myOnChange = (v) => {
     setProp((prop) => {
@@ -1412,85 +1412,20 @@ const Tooltip = ({ children }) => {
   );
 };
 
-const getFkTarget = (field, options) => {
-  const option = options.find((fk) => fk.name === field);
-  return option ? option.reftable_name : null;
-};
-
-export const parseRelationPath = (path, fk_options) => {
-  const result = [];
-  const tokens = path.split(".");
-  if (tokens.length >= 3) {
-    let currentTbl = tokens[1];
-    for (const relation of tokens.slice(2)) {
-      if (relation.indexOf("$") > 0) {
-        const [inboundTbl, inboundKey] = relation.split("$");
-        result.push({ type: "Inbound", table: inboundTbl, key: inboundKey });
-        currentTbl = inboundTbl;
-      } else {
-        const targetTbl = getFkTarget(relation, fk_options[currentTbl]);
-        if (!targetTbl) {
-          console.log(`The foreign key '${relation}' is invalid`);
-          return [];
-        }
-        result.push({ type: "Foreign", table: targetTbl, key: relation });
-        currentTbl = targetTbl;
-      }
-    }
-  }
-  return result;
-};
-
-export const parseLegacyRelation = (type, rest, parentTbl) => {
-  switch (type) {
-    case "ChildList": {
-      const path = rest ? rest.split(".") : [];
-      if (path.length === 3) {
-        const [viewName, table, key] = path;
-        return [
-          {
-            type: "Inbound",
-            table,
-            key,
-          },
-        ];
-      } else if (path.length === 5) {
-        const [viewName, thrTbl, thrTblFkey, fromTbl, fromTblFkey] = path;
-        return [
-          {
-            type: "Inbound",
-            table: thrTbl,
-            key: thrTblFkey,
-          },
-          {
-            type: "Inbound",
-            table: fromTbl,
-            key: fromTblFkey,
-          },
-        ];
-      }
-      break;
-    }
-    case "Independent": {
-      return [{ type: "Independent", table: "None (no relation)" }];
-    }
-    case "Own": {
-      return [{ type: "Own", table: `${parentTbl} (same table)` }];
-    }
-    case "OneToOneShow": {
-      const tokens = rest ? rest.split(".") : [];
-      if (tokens.length !== 3) break;
-      const [viewname, relatedTbl, fkey] = tokens;
-      return [{ type: "Inbound", table: relatedTbl, key: fkey }];
-    }
-    case "ParentShow": {
-      const tokens = rest ? rest.split(".") : [];
-      if (tokens.length !== 3) break;
-      const [viewname, parentTbl, fkey] = tokens;
-      return [{ type: "Foreign", table: parentTbl, key: fkey }];
+export const buildTableCaches = (allTables) => {
+  const tableIdCache = {};
+  const tableNameCache = {};
+  const fieldCache = {};
+  for (const table of allTables) {
+    tableIdCache[table.id] = table;
+    tableNameCache[table.name] = table;
+    for (const field of table.foreign_keys) {
+      if (!fieldCache[field.reftable_name])
+        fieldCache[field.reftable_name] = [];
+      fieldCache[field.reftable_name].push(field);
     }
   }
-  return [];
+  return { tableIdCache, tableNameCache, fieldCache };
 };
 
 export const removeWhitespaces = (str) => {
@@ -1534,3 +1469,19 @@ export const buildBootstrapOptions = (values) => {
     </option>
   ));
 };
+
+export const prepCacheAndFinder = ({
+  tables,
+  views,
+  max_relations_layer_depth,
+}) => {
+  if (tables && views) {
+    const caches = buildTableCaches(tables);
+    const finder = new relationHelpers.RelationsFinder(
+      caches,
+      views,
+      max_relations_layer_depth || 6
+    );
+    return { caches, finder };
+  } else return { caches: null, finder: null };
+};

package/tests/relations_finder.test.js

@@ -0,0 +1,275 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import {
+  fixturesData,
+  withAnotherUserField,
+  withSecondTopicField,
+  withMultipleInbounds,
+  withKeyFromLayerTwo,
+  withKeyFromLayerThree,
+  withSimplePostTopicrelation,
+} from "./test_data";
+import { ViewSettings } from "../src/components/elements/View";
+import { ViewLinkSettings } from "../src/components/elements/ViewLink";
+
+jest.mock("@craftjs/core", () => ({
+  useNode: jest.fn(),
+}));
+
+const doTest = (
+  tables,
+  views,
+  tableName,
+  viewName,
+  expected,
+  excludedTemplates,
+  view,
+  relation
+) => {
+  // mock craftjs
+  const useNodeMock = jest.fn();
+  useNodeMock.mockReturnValue({
+    actions: {
+      setProp: (fn) => {},
+    },
+    relation: relation,
+    view: view || viewName,
+    name: view || viewName,
+  });
+  require("@craftjs/core").useNode.mockImplementation(useNodeMock);
+  // mock react context
+  const useContextMock = (React.useContext = jest.fn());
+  useContextMock.mockReturnValue({
+    tables: tables,
+    views: views,
+    tableName: tableName,
+    roles: [],
+    excluded_subview_templates: excludedTemplates,
+  });
+  // spy on useState and extract the relations (first call)
+  const spy = jest.spyOn(React, "useState");
+  renderer.create(<ViewSettings></ViewSettings>);
+  expect(spy).toBeCalled();
+  const vCallArgs = spy.mock.calls[0];
+  expect(vCallArgs[0].paths).toBeDefined();
+  expect(vCallArgs[0].paths).toHaveLength(expected.length);
+  expect(vCallArgs[0].paths).toEqual(expect.arrayContaining(expected));
+
+  renderer.create(<ViewLinkSettings></ViewLinkSettings>);
+  expect(spy.mock.calls).toHaveLength(4);
+  const vLinkcallArgs = spy.mock.calls[2];
+  expect(vLinkcallArgs[0].paths).toBeDefined();
+  expect(vLinkcallArgs[0].paths).toHaveLength(expected.length);
+  expect(vLinkcallArgs[0].paths).toEqual(expect.arrayContaining(expected));
+};
+
+describe("relations tests", () => {
+  beforeAll(() => {
+    // inject relationHelpers (normally it's a script tag)
+    global.relationHelpers = {
+      ...require("../../server/public/relation_helpers.js"),
+    };
+  });
+  beforeEach(() => {
+    jest.restoreAllMocks();
+  });
+  describe("single relations", () => {
+    it("parent relations", async () => {
+      const { tables, views } = fixturesData();
+      const expected = [".fan_club.artist"];
+      doTest(tables, views, "fan_club", "show_artist", expected);
+    });
+
+    it("one to one relations", async () => {
+      const { tables, views } = fixturesData();
+      const expected = [".covers.albums$cover"];
+      doTest(tables, views, "covers", "show_album", expected);
+    });
+
+    it("employee department relation", async () => {
+      const { tables, views } = fixturesData();
+      const expected = [".employee", ".employee.department.manager"];
+      doTest(tables, views, "employee", "show_manager", expected);
+    });
+  });
+
+  describe("multi relations", () => {
+    describe("inbound relations", () => {
+      const expectedOne = [
+        ".",
+        ".users.user_interested_in_topic$user.topic.blog_in_topic$topic",
+        ".users.user_interested_in_topic$user.topic.inbound_inbound$topic.bp_inbound.post.blog_in_topic$post",
+        ".users.messages$user.room.participants$room.user.user_interested_in_topic$user.topic.blog_in_topic$topic",
+      ];
+      it("single keys to source and rel table", async () => {
+        const { tables, views } = fixturesData();
+        doTest(tables, views, "users", "blog_in_topic_feed", expectedOne);
+      });
+
+      const expectedTwo = [
+        ...expectedOne,
+        ".users.user_interested_in_topic$another_user.topic.blog_in_topic$topic",
+        ".users.user_interested_in_topic$another_user.topic.inbound_inbound$topic.bp_inbound.post.blog_in_topic$post",
+        ".users.messages$user.room.participants$room.user.user_interested_in_topic$another_user.topic.blog_in_topic$topic",
+      ];
+      it("multiple keys to source and single key to rel table", async () => {
+        const { tables, views } = withAnotherUserField();
+        doTest(tables, views, "users", "blog_in_topic_feed", expectedTwo);
+      });
+
+      const expectedThree = [
+        ...expectedTwo,
+        ".users.user_interested_in_topic$user.topic.blog_in_topic$second_topic",
+        ".users.user_interested_in_topic$another_user.topic.blog_in_topic$second_topic",
+        ".users.messages$user.room.participants$room.user.user_interested_in_topic$user.topic.blog_in_topic$second_topic",
+        ".users.messages$user.room.participants$room.user.user_interested_in_topic$another_user.topic.blog_in_topic$second_topic",
+      ];
+      it("multiple keys to source and rel table", async () => {
+        const { tables, views } = withSecondTopicField();
+        doTest(tables, views, "users", "blog_in_topic_feed", expectedThree);
+      });
+
+      const expectedFour = [
+        ...expectedThree,
+        ".users.user_interested_in_topic$user.another_user.second_inbound$user.topic.blog_in_topic$topic",
+        ".users.user_interested_in_topic$user.another_user.second_inbound$user.topic.blog_in_topic$second_topic",
+        ".users.second_inbound$user.topic.blog_in_topic$topic",
+        ".users.second_inbound$user.topic.blog_in_topic$second_topic",
+        ".users.second_inbound$user.topic.inbound_inbound$topic.bp_inbound.post.blog_in_topic$post",
+        ".users.messages$user.room.participants$room.user.second_inbound$user.topic.blog_in_topic$topic",
+        ".users.messages$user.room.participants$room.user.second_inbound$user.topic.blog_in_topic$second_topic",
+      ];
+      it("multiple inbound tables", async () => {
+        const { tables, views } = withMultipleInbounds();
+        doTest(tables, views, "users", "blog_in_topic_feed", expectedFour);
+      });
+
+      const expectedFive = [
+        ...expectedFour,
+        ".users.user_interested_in_topic$user.topic.inbound_inbound$topic.post_from_layer_two.blog_in_topic$post",
+        ".users.user_interested_in_topic$another_user.topic.inbound_inbound$topic.post_from_layer_two.blog_in_topic$post",
+        ".users.second_inbound$user.topic.inbound_inbound$topic.post_from_layer_two.blog_in_topic$post",
+        ".users.user_interested_in_topic$user.topic.blog_in_topic$topic.post.inbound_inbound$post_from_layer_two.topic.blog_in_topic$second_topic",
+        ".users.user_interested_in_topic$user.another_user.second_inbound$user.topic.inbound_inbound$topic.post_from_layer_two.blog_in_topic$post",
+        ".users.user_interested_in_topic$another_user.topic.blog_in_topic$topic.post.inbound_inbound$post_from_layer_two.topic.blog_in_topic$second_topic",
+        ".users.second_inbound$user.topic.blog_in_topic$topic.post.inbound_inbound$post_from_layer_two.topic.blog_in_topic$second_topic",
+      ];
+      it("key to source from layer two", async () => {
+        const { tables, views } = withKeyFromLayerTwo();
+        doTest(tables, views, "users", "blog_in_topic_feed", expectedFive);
+      });
+
+      const expectedSix = [
+        ...expectedFive,
+        ".users.user_interested_in_topic$user.topic.inbound_level_three$topic.inbound_level_two.bp_inbound.post.blog_in_topic$post",
+        ".users.user_interested_in_topic$user.topic.inbound_level_three$topic.inbound_level_two.post_from_layer_two.blog_in_topic$post",
+        ".users.user_interested_in_topic$another_user.topic.inbound_level_three$topic.inbound_level_two.bp_inbound.post.blog_in_topic$post",
+        ".users.user_interested_in_topic$another_user.topic.inbound_level_three$topic.inbound_level_two.post_from_layer_two.blog_in_topic$post",
+        ".users.second_inbound$user.topic.inbound_level_three$topic.inbound_level_two.bp_inbound.post.blog_in_topic$post",
+        ".users.second_inbound$user.topic.inbound_level_three$topic.inbound_level_two.post_from_layer_two.blog_in_topic$post",
+      ];
+      it("three levels inbound", async () => {
+        const { tables, views } = withKeyFromLayerThree();
+        doTest(tables, views, "users", "blog_in_topic_feed", expectedSix);
+      });
+
+      it("simple post topic relation", async () => {
+        const expected = [
+          ".",
+          ".users.favsimpletopic.simple_posts$topic",
+          ".users.favsimpletopic.simple_post_inbound$topic.post",
+          ".users.messages$user.room.participants$room.user.favsimpletopic.simple_posts$topic",
+          ".users.messages$user.room.participants$room.user.favsimpletopic.simple_post_inbound$topic.post",
+        ];
+        const { tables, views } = withSimplePostTopicrelation();
+        doTest(tables, views, "users", "simple_posts_list", expected);
+      });
+    });
+
+    describe("many to many relations", () => {
+      it("artist_plays_on_album", async () => {
+        const { tables, views } = fixturesData();
+        const expected = [".", ".artists.artist_plays_on_album$artist.album"];
+        doTest(tables, views, "artists", "albums_feed", expected);
+      });
+
+      it("tracks on album", async () => {
+        const { tables, views } = fixturesData();
+        const expected = [
+          ".",
+          ".artists.artist_plays_on_album$artist.album.tracks_on_album$album",
+        ];
+        doTest(tables, views, "artists", "tracks_on_album_feed", expected);
+      });
+
+      it("show pressing_job with embedded fan club feed", async () => {
+        const { tables, views } = fixturesData();
+        const expected = [
+          ".",
+          ".pressing_job.album.artist_plays_on_album$album.artist.fan_club$artist",
+        ];
+        doTest(tables, views, "pressing_job", "fan_club_feed", expected);
+      });
+    });
+
+    describe("excluded viewtemplates", () => {
+      it("excluded viewtemplates", async () => {
+        const { tables, views } = fixturesData();
+        const expected = [];
+        const excluded = ["Room"];
+        doTest(tables, views, "participants", "rooms_view", expected, excluded);
+      });
+    });
+
+    describe("open legacy relations", () => {
+      it("ChildList", async () => {
+        const { tables, views } = fixturesData();
+        const expected = [".", ".books.discusses_books$book"];
+        doTest(
+          tables,
+          views,
+          "books",
+          "disc_books_list",
+          expected,
+          [],
+          "ChildList:disc_books_list.discusses_books.book",
+          undefined
+        );
+      });
+
+      it("Independent", async () => {
+        const { tables, views } = fixturesData();
+        const expected = [
+          ".",
+          ".blog_posts.blog_in_topic$post.topic.inbound_inbound$topic.bp_inbound.post",
+        ];
+        doTest(
+          tables,
+          views,
+          "blog_posts",
+          "blog_posts_feed",
+          expected,
+          [],
+          "Independent:blog_posts_feed",
+          undefined
+        );
+      });
+
+      it("Own", async () => {
+        const { tables, views } = fixturesData();
+        const expected = [".books"];
+        doTest(
+          tables,
+          views,
+          "books",
+          "authorshow",
+          expected,
+          [],
+          "Own:authorshow",
+          undefined
+        );
+      });
+    });
+  });
+});