@saltcorn/builder 0.9.2 → 0.9.3-beta.0

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.9.2",
+  "version": "0.9.3-beta.0",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
   "scripts": {
     "build": "webpack --mode production",
     "builddev": "webpack --mode none",
-    "test": "echo \"Error: no test specified\"",
+    "test": "jest tests --runInBand",
     "tsc": "echo \"Error: no TypeScript support yet\"",
     "clean": "echo \"Error: no TypeScript support yet\""
   },
@@ -26,14 +26,19 @@
     "@fortawesome/free-regular-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.14",
+    "babel-jest": "^29.7.0",
     "babel-loader": "8.1.0",
     "ckeditor4-react": "1.4.2",
     "classnames": "2.2.6",
+    "jest-environment-jsdom": "29.7.0",
+    "jest": "^29.7.0",
+    "jsdom": "16.4.0",
     "prop-types": "15.7.2",
     "react": "16.13.1",
     "react-bootstrap-icons": "1.5.0",
     "react-contenteditable": "3.3.5",
     "react-dom": "16.13.1",
+    "react-test-renderer": "16.13.1",
     "react-transition-group": "4.4.1",
     "@tippyjs/react": "4.2.6",
     "webpack": "5.68.0",
@@ -51,5 +56,8 @@
   "overrides": {
     "immer": "9.0.6",
     "glob-parent": "^5.1.2"
+  },
+  "jest": {
+    "testEnvironment": "jsdom"
   }
 }

package/src/components/Toolbox.js

@@ -257,13 +257,9 @@ const ViewElem = ({ connectors, views }) => (
     icon="fas fa-eye"
     title="Embed a view"
     label="View"
-    disable={views.length === 0}
+    disable={views.length < 2}
   >
-    <View
-      name={"not_assigned"}
-      state={"shared"}
-      view={views.length > 0 ? views[0].name : "view"}
-    />
+    <View name={"not_assigned"} state={"shared"} view={views[0].name} />
   </WrapElem>
 );
 /**
@@ -429,12 +425,10 @@ const ViewLinkElem = ({ connectors, options }) => (
     icons={["fas fa-eye", "fas fa-link"]}
     title="Link to a view"
     label="ViewLink"
-    disable={options.link_view_opts.length === 0}
+    disable={options.views.length < 2}
   >
     <ViewLink
-      name={
-        options.link_view_opts.length > 0 ? options.link_view_opts[0].name : ""
-      }
+      name={options.views.length > 0 ? options.views[0].name : ""}
       block={false}
       minRole={100}
       label={""}

package/src/components/elements/RelationBadges.js

@@ -1,9 +1,5 @@
-import React, { Fragment, useContext, useState } from "react";
-import {
-  parseRelationPath,
-  parseLegacyRelation,
-  removeWhitespaces,
-} from "./utils";
+import React from "react";
+import { removeWhitespaces } from "./utils";
 
 const buildBadgeCfgs = (parsed, parentTbl) => {
   const result = [];
@@ -13,8 +9,8 @@ const buildBadgeCfgs = (parsed, parentTbl) => {
       if (currentCfg) result.push(currentCfg);
       currentCfg = { up: key, table };
     } else {
-      if (!currentCfg) result.push({ down: key, table: parentTbl });
-      else {
+      if (!currentCfg && key) result.push({ down: key, table: parentTbl });
+      else if (currentCfg) {
         currentCfg.down = key;
         result.push(currentCfg);
       }
@@ -63,9 +59,15 @@ const buildBadge = ({ up, table, down }, index) => {
   );
 };
 
-export const RelationBadges = ({ view, relation, parentTbl, fk_options }) => {
+export const RelationBadges = ({
+  view,
+  relation,
+  parentTbl,
+  tableNameCache,
+}) => {
   if (relation) {
-    const parsed = parseRelationPath(relation, fk_options);
+    const parsed = relationHelpers.parseRelationPath(relation, tableNameCache);
+
     return (
       <div className="overflow-scroll">
         {parsed.length > 0
@@ -74,8 +76,9 @@ export const RelationBadges = ({ view, relation, parentTbl, fk_options }) => {
       </div>
     );
   } else {
+    if (!view) return buildBadge({ table: "invalid relation" }, 0);
     const [prefix, rest] = view.split(":");
-    const parsed = parseLegacyRelation(prefix, rest, parentTbl);
+    const parsed = relationHelpers.parseLegacyRelation(prefix, rest, parentTbl);
     if (parsed.length === 0)
       return buildBadge({ table: "invalid relation" }, 0);
     else if (

package/src/components/elements/RelationOnDemandPicker.js

@@ -0,0 +1,212 @@
+import React from "react";
+import { removeWhitespaces, rand_ident } from "./utils";
+import ReactDOM from "react-dom";
+
+const maxLevelDefault = 10;
+
+const keyLabel = (key, type) =>
+  type === "fk" ? `${key.name}` : `${key.name} (from ${key.table})`;
+
+const toggleLayers = (layer, maxLevel, additionalSelectors = []) => {
+  const selectors = [];
+  for (let i = layer; i < maxLevel; i++) {
+    selectors.push(`.dropdown_level_${i}.show`);
+  }
+  selectors.push(...additionalSelectors);
+  if (selectors.length) $(`${selectors.join(",")}`).dropdown("toggle");
+};
+
+const setActiveClasses = (level, maxLevel, itemId) => {
+  const classes = [];
+  for (let i = level; i < maxLevel; i++) {
+    classes.push(`.item_level_${i}.active`);
+  }
+  if (classes.length > 0) $(classes.join(",")).removeClass("active");
+  $(`#${itemId}`).addClass(() => "active");
+};
+
+const removeAllActiveClasses = () => {
+  $(".dropdown-item.active").removeClass("active");
+};
+
+const hasSubLevels = (relation) =>
+  relation.fkeys?.length > 0 || relation.inboundKeys?.length > 0;
+
+/**
+ *
+ * @param {*} param0
+ * @returns
+ */
+const Relation = ({ cfg }) => {
+  const { relation, ix, level, type, update, maxLevel, setMaxLevel } = cfg;
+
+  const setRelation = (key) => {
+    update(key.relPath);
+    removeAllActiveClasses();
+    toggleLayers(0, maxLevel);
+    setMaxLevel(maxLevelDefault, maxLevel);
+  };
+  const identifier = removeWhitespaces(
+    `${relation.name}_${relation.table}_${type}_${ix}_${level}_${rand_ident()}`
+  );
+
+  if (hasSubLevels(relation)) {
+    const itemId = `${identifier}_sub_key`;
+    const toggleId = `${identifier}_toggle`;
+    const nextDropId = `${identifier}_next_drop`;
+    return (
+      <div key={`${identifier}_key_div`}>
+        <li
+          id={itemId}
+          key={itemId}
+          className={`dropdown-item item_level_${level} ${
+            level < 5 ? "dropstart" : "dropdown"
+          } `}
+          role="button"
+        >
+          <div
+            key={toggleId}
+            id={toggleId}
+            className={`dropdown-toggle dropdown_level_${level}`}
+            role="button"
+            aria-expanded="false"
+            onClick={() => {
+              const layerCfg = {
+                layer: relation,
+                level: level + 1,
+                update,
+                maxLevel,
+                setMaxLevel,
+              };
+              ReactDOM.render(
+                <RelationLayer cfg={layerCfg} />,
+                document.getElementById(nextDropId),
+                () => {
+                  toggleLayers(level, maxLevel, [`#${toggleId}`]);
+                  setActiveClasses(level, maxLevel, itemId);
+                  if (level > maxLevel) setMaxLevel(level);
+                }
+              );
+            }}
+          >
+            {keyLabel(relation, type)}
+          </div>
+          <div key={nextDropId} id={nextDropId} className="dropdown-menu"></div>
+        </li>
+        {/* has the layer a direct link ? */}
+        {relation.relPath ? (
+          <li
+            key={`${identifier}_direct_key`}
+            className="dropdown-item"
+            role="button"
+            onClick={() => {
+              setRelation(relation);
+            }}
+          >
+            {keyLabel(relation, type)}
+          </li>
+        ) : (
+          ""
+        )}
+      </div>
+    );
+  } else {
+    return (
+      <li
+        key={`${identifier}_key`}
+        className="dropdown-item"
+        role="button"
+        onClick={() => {
+          setRelation(relation);
+        }}
+      >
+        {keyLabel(relation, type)}
+      </li>
+    );
+  }
+};
+
+/**
+ *
+ * @param {*} param0
+ * @returns
+ */
+const RelationLayer = ({ cfg }) => {
+  const { layer, level, update, maxLevel, setMaxLevel } = cfg;
+  const reactKey = (relation, type, ix) =>
+    `_rel_layer_${level}_${type}_${ix}_${relation.name}_`;
+  return (
+    <div>
+      <h5 className="join-table-header text-center">{layer.table}</h5>
+      <ul className="ps-0 mb-0">
+        {layer.fkeys.map((relation, ix) => (
+          <Relation
+            key={reactKey(relation, "fk", ix)}
+            cfg={{
+              relation,
+              ix,
+              level,
+              type: "fk",
+              update,
+              maxLevel,
+              setMaxLevel,
+            }}
+          />
+        ))}
+        {layer.inboundKeys.map((relation, ix) => (
+          <Relation
+            key={reactKey(relation, "inbound", ix)}
+            cfg={{
+              relation,
+              ix,
+              level,
+              type: "inbound",
+              update,
+              maxLevel,
+              setMaxLevel,
+            }}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+/**
+ *
+ * @param {*} param0
+ * @returns
+ */
+export const RelationOnDemandPicker = ({ relations, update }) => {
+  const [maxLevel, setMaxLevel] = React.useState(maxLevelDefault);
+  const toggleId = "_relation_picker_toggle_";
+  const layerCfg = {
+    layer: relations,
+    level: 1,
+    update,
+    maxLevel,
+    setMaxLevel,
+  };
+  return (
+    <div>
+      <label>Relation</label>
+      <div style={{ zIndex: 10000 }} className="dropstart">
+        <button
+          id={toggleId}
+          className="btn btn-outline-primary dropdown-toggle dropdown_level_0 mb-1"
+          aria-expanded="false"
+          onClick={() => {
+            removeAllActiveClasses();
+            toggleLayers(0, maxLevel, [`#${toggleId}`]);
+            setMaxLevel(maxLevelDefault);
+          }}
+        >
+          Select
+        </button>
+        <div className="dropdown-menu">
+          <RelationLayer cfg={layerCfg} />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/elements/View.js

@@ -4,7 +4,7 @@
  * @subcategory components / elements
  */
 
-import React, { Fragment, useContext, useEffect } from "react";
+import React, { Fragment, useEffect, useMemo } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import previewCtx from "../preview_context";
@@ -13,13 +13,13 @@ import {
   fetchViewPreview,
   ConfigForm,
   setAPropGen,
-  FormulaTooltip,
   buildOptions,
   HelpTopicLink,
+  prepCacheAndFinder,
 } from "./utils";
 
-import { RelationPicker } from "./RelationPicker";
 import { RelationBadges } from "./RelationBadges";
+import { RelationOnDemandPicker } from "./RelationOnDemandPicker";
 
 export /**
  * @param {object} props
@@ -37,12 +37,18 @@ const View = ({ name, view, configuration, state }) => {
     node_id,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected, node_id: node.id }));
-  const options = useContext(optionsCtx);
+  const options = React.useContext(optionsCtx);
 
-  const views = options.views;
-  const theview = views.find((v) => v.name === view);
+  let viewname = view;
+  if (viewname && viewname.includes(":")) {
+    const [prefix, rest] = viewname.split(":");
+    if (rest.startsWith(".")) viewname = prefix;
+    else viewname = rest;
+  }
+
+  const theview = options.views.find((v) => v.name === viewname);
   const label = theview ? theview.label : view;
-  const { previews, setPreviews } = useContext(previewCtx);
+  const { previews, setPreviews } = React.useContext(previewCtx);
   const myPreview = previews[node_id];
   useEffect(() => {
     fetchViewPreview({
@@ -73,14 +79,13 @@ const View = ({ name, view, configuration, state }) => {
 };
 
 export /**
- * @returns {div}
+ * @returns
  * @category saltcorn-builder
  * @subcategory components
  * @namespace
  */
 const ViewSettings = () => {
   const node = useNode((node) => ({
-    view_name: node.data.props.view_name,
     name: node.data.props.name,
     view: node.data.props.view,
     relation: node.data.props.relation,
@@ -99,13 +104,15 @@ const ViewSettings = () => {
     node_id,
     configuration,
     extra_state_fml,
-    view_name,
   } = node;
-  const options = useContext(optionsCtx);
-  const views = options.views;
+  const options = React.useContext(optionsCtx);
+  const { caches, finder } = useMemo(
+    () => prepCacheAndFinder(options),
+    [undefined]
+  );
   const fixed_state_fields =
     options.fixed_state_fields && options.fixed_state_fields[view];
-  const { setPreviews } = useContext(previewCtx);
+  const { setPreviews } = React.useContext(previewCtx);
 
   const setAProp = setAPropGen(setProp);
   let errorString = false;
@@ -115,33 +122,56 @@ const ViewSettings = () => {
     errorString = error.message;
   }
 
-  let viewname = view_name || view;
+  let viewname = view;
+  let hasLegacyRelation = false;
   if (viewname && viewname.includes(":")) {
+    hasLegacyRelation = true;
     const [prefix, rest] = viewname.split(":");
     if (rest.startsWith(".")) viewname = prefix;
     else viewname = rest;
   }
   if (viewname.includes(".")) viewname = viewname.split(".")[0];
+  const [relations, setRelations] = finder
+    ? React.useState(
+        finder.findRelations(
+          options.tableName,
+          viewname,
+          options.excluded_subview_templates
+        )
+      )
+    : [undefined, undefined];
+  let safeRelation = relation;
+  if (!safeRelation && !hasLegacyRelation && relations?.paths.length > 0) {
+    safeRelation = relations.paths[0];
+    setProp((prop) => {
+      prop.relation = safeRelation;
+    });
+  }
   const helpContext = { view_name: viewname };
   if (options.tableName) helpContext.srcTable = options.tableName;
   const set_view_name = (e) => {
     if (e.target) {
       const target_value = e.target.value;
-      setProp((prop) => (prop.view_name = target_value));
       if (target_value !== viewname) {
-        setProp((prop) => {
-          if (options.view_relation_opts[target_value]) {
-            prop.view = 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.view = target_value;
+            prop.relation = newRelations.paths[0];
+          });
+          setRelations(newRelations);
+        }
       }
     }
   };
 
   return (
     <div>
-      {options.view_name_opts ? (
+      {relations ? (
         <Fragment>
           <div>
             <label>View to {options.mode === "show" ? "embed" : "show"}</label>
@@ -151,36 +181,39 @@ const ViewSettings = () => {
               onChange={set_view_name}
               onBlur={set_view_name}
             >
-              {options.view_name_opts.map((f, ix) => (
-                <option key={ix} value={f.name}>
-                  {f.label}
+              {options.views.map((v, ix) => (
+                <option key={ix} value={v.name}>
+                  {v.label}
                 </option>
               ))}
             </select>
           </div>
-          <RelationPicker
-            options={options}
-            viewname={viewname}
-            update={(relPath) => {
-              if (relPath.startsWith(".")) {
-                setProp((prop) => {
-                  prop.view = viewname;
-                  prop.relation = relPath;
-                });
-              } else {
-                setProp((prop) => {
-                  prop.view = relPath;
-                  prop.relation = undefined;
-                });
-              }
-            }}
-          />
-          <RelationBadges
-            view={view}
-            relation={relation}
-            parentTbl={options.tableName}
-            fk_options={options.fk_options}
-          />
+          {
+            <div>
+              <RelationOnDemandPicker
+                relations={relations.layers}
+                update={(relPath) => {
+                  if (relPath.startsWith(".")) {
+                    setProp((prop) => {
+                      prop.view = viewname;
+                      prop.relation = relPath;
+                    });
+                  } else {
+                    setProp((prop) => {
+                      prop.view = relPath;
+                      prop.relation = undefined;
+                    });
+                  }
+                }}
+              />
+              <RelationBadges
+                view={view}
+                relation={safeRelation}
+                parentTbl={options.tableName}
+                tableNameCache={caches.tableNameCache}
+              />
+            </div>
+          }
         </Fragment>
       ) : (
         <div>
@@ -191,7 +224,7 @@ const ViewSettings = () => {
             onChange={setAProp("view")}
             onBlur={setAProp("view")}
           >
-            {views.map((f, ix) => (
+            {options.views.map((f, ix) => (
               <option key={ix} value={f.name}>
                 {f.label || f.name}
               </option>