@saltcorn/builder 0.9.0-beta.0 → 0.9.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.9.0-beta.0",
+  "version": "0.9.0-beta.2",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",

package/src/components/RenderNode.js

@@ -124,7 +124,7 @@ const RenderNode = ({ render }) => {
               style={{
                 left: getPos(dom).left,
                 top: getPos(dom).top,
-                zIndex: 9999,
+                zIndex: 1029,
               }}
             >
               <div className="dispname me-3">{name}</div>{" "}

package/src/components/elements/Field.js

@@ -16,6 +16,7 @@ import {
   setInitialConfig,
   isBlock,
   fetchFieldPreview,
+  HelpTopicLink,
 } from "./utils";
 
 export /**
@@ -166,7 +167,15 @@ const FieldSettings = () => {
           {fvs && (
             <tr>
               <td>
-                <label>Field view</label>
+                <label>
+                  Field view
+                  <HelpTopicLink
+                    topic="Field views"
+                    field_name={name}
+                    table_name={options.tableName}
+                    mode={options.mode}
+                  />
+                </label>
               </td>
 
               <td>
@@ -232,6 +241,8 @@ const FieldSettings = () => {
       </table>
       {cfgFields ? (
         <ConfigForm
+          tableName={options.tableName}
+          fieldName={name}
           fields={cfgFields}
           configuration={configuration}
           setProp={setProp}

package/src/components/elements/View.js

@@ -15,6 +15,7 @@ import {
   setAPropGen,
   FormulaTooltip,
   buildOptions,
+  HelpTopicLink,
 } from "./utils";
 
 import { RelationPicker } from "./RelationPicker";
@@ -121,7 +122,8 @@ const ViewSettings = () => {
     else viewname = rest;
   }
   if (viewname.includes(".")) viewname = viewname.split(".")[0];
-
+  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;
@@ -237,9 +239,9 @@ const ViewSettings = () => {
       )}
       {(state === "shared" || options.mode === "page") && (
         <Fragment>
-          {" "}
           <label>
-            Extra state Formula <FormulaTooltip />
+            Extra state Formula
+            <HelpTopicLink topic="Extra state formula" {...helpContext} />
           </label>
           <input
             type="text"

package/src/components/elements/ViewLink.js

@@ -15,6 +15,7 @@ import {
   ButtonOrLinkSettingsRows,
   setAPropGen,
   FormulaTooltip,
+  HelpTopicLink,
 } from "./utils";
 
 import { RelationPicker } from "./RelationPicker";
@@ -149,6 +150,8 @@ const ViewLinkSettings = () => {
       }
     }
   };
+  const helpContext = { view_name: use_view_name };
+  if (options.tableName) helpContext.srcTable = options.tableName;
   return (
     <div>
       <table className="w-100">
@@ -213,7 +216,8 @@ const ViewLinkSettings = () => {
           <tr>
             <td colSpan="2">
               <label>
-                Extra state Formula <FormulaTooltip />
+                Extra state Formula
+                <HelpTopicLink topic="Extra state formula" {...helpContext} />
               </label>
               <input
                 type="text"

package/src/components/elements/utils.js

@@ -11,6 +11,7 @@ import {
   faChevronDown,
   faChevronRight,
   faInfoCircle,
+  faQuestionCircle,
 } from "@fortawesome/free-solid-svg-icons";
 import { useNode, Element } from "@craftjs/core";
 import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
@@ -78,6 +79,21 @@ export const BlockOrInlineSetting = ({ block, inline, textStyle, setProp }) =>
     </div>
   );
 
+export const HelpTopicLink = ({ topic, ...context }) => {
+  const { mode } = useContext(optionsCtx);
+  let qs = "";
+  Object.keys(context).forEach((k) => {
+    qs += `${encodeURIComponent(k)}=${encodeURIComponent(context[k])}&`;
+  });
+  return (
+    <FontAwesomeIcon
+      className="ms-1"
+      icon={faQuestionCircle}
+      onClick={() => window.ajax_modal(`/admin/help/${topic}?${qs}`)}
+    />
+  );
+};
+
 export const FormulaTooltip = () => {
   const { fields } = useContext(optionsCtx);
   return (
@@ -631,7 +647,15 @@ export /**
  * @subcategory components / elements / utils
  * @namespace
  */
-const ConfigForm = ({ fields, configuration, setProp, node, onChange }) => (
+const ConfigForm = ({
+  fields,
+  configuration,
+  setProp,
+  node,
+  onChange,
+  tableName,
+  fieldName,
+}) => (
   <div>
     {fields.map((f, ix) => {
       if (f.showIf && configuration) {
@@ -644,8 +668,19 @@ const ConfigForm = ({ fields, configuration, setProp, node, onChange }) => (
         if (noshow) return null;
       }
       return (
-        <div key={ix}>
-          {!isCheckbox(f) ? <label>{f.label || f.name}</label> : null}
+        <div key={ix} className="builder-config-field">
+          {!isCheckbox(f) ? (
+            <label>
+              {f.label || f.name}
+              {f.help ? (
+                <HelpTopicLink
+                  topic={f.help.topic}
+                  field_name={fieldName}
+                  table_name={tableName}
+                />
+              ) : null}
+            </label>
+          ) : null}
           <ConfigField
             field={f}
             configuration={configuration}
@@ -653,7 +688,17 @@ const ConfigForm = ({ fields, configuration, setProp, node, onChange }) => (
             onChange={onChange}
           />
           {f.sublabel ? (
-            <i dangerouslySetInnerHTML={{ __html: f.sublabel }}></i>
+            <i
+              className="small"
+              dangerouslySetInnerHTML={{ __html: f.sublabel }}
+            ></i>
+          ) : null}
+          {isCheckbox(f) && f.help ? (
+            <HelpTopicLink
+              topic={f.help.topic}
+              fieldName={fieldName}
+              tableName={tableName}
+            />
           ) : null}
         </div>
       );