@saltcorn/builder 1.6.0-alpha.6 → 1.6.0-alpha.8

package/src/components/elements/Action.js

@@ -3,10 +3,11 @@
  * @module components/elements/Action
  * @subcategory components / elements
  */
-/*global notifyAlert*/
+/*global notifyAlert, apply_showif*/
 
-import React, { Fragment, useContext, useEffect } from "react";
+import React, { Fragment, useContext, useEffect, useState } from "react";
 import { useNode } from "@craftjs/core";
+import useTranslation from "../../hooks/useTranslation";
 import optionsCtx from "../context";
 import {
   BlockSetting,
@@ -19,9 +20,12 @@ import {
   setAPropGen,
   buildOptions,
   ConfigField,
+  reactSelectStyles,
+  builderSelectClassName,
 } from "./utils";
 import { ntimes } from "./Columns";
 import { ArrayManager } from "./ArrayManager";
+import { MultiLineCodeEditor } from "./MonacoEditor";
 import Select from "react-select";
 
 export /**
@@ -91,6 +95,7 @@ export /**
  * @returns {div}
  */
 const ActionSettings = () => {
+  const { t } = useTranslation();
   const node = useNode((node) => ({
     name: node.data.props.name,
     action_row_variable: node.data.props.action_row_variable,
@@ -141,6 +146,13 @@ const ActionSettings = () => {
   const options = useContext(optionsCtx);
   const getCfgFields = (fv) => (options.actionConfigForms || {})[fv];
   const cfgFields = getCfgFields(name);
+  const cfgFieldsForForm =
+    name === "run_js_code"
+      ? (cfgFields || []).filter((f) => f.name !== "code")
+      : cfgFields;
+
+  const runJsCodeModalOnly = false;
+  const [codeModalOpen, setCodeModalOpen] = useState(false);
   const setAProp = setAPropGen(setProp);
   const use_setting_action_n =
     setting_action_n || setting_action_n === 0 ? setting_action_n : 0;
@@ -229,6 +241,7 @@ const ActionSettings = () => {
     step_action_names?.[use_setting_action_n] || "",
     JSON.stringify(configuration?.steps?.[use_setting_action_n]),
   ]);
+  
 
   return (
     <div>
@@ -236,20 +249,19 @@ const ActionSettings = () => {
         <tbody>
           <tr>
             <td>
-              <label>Action</label>
+              <label>{t("Action")}</label>
             </td>
             <td>
               {options.inJestTestingMode ? null : (
                 <Select
                   options={actionOptions}
-                  className="react-select action-selector"
+                  className={builderSelectClassName("react-select action-selector")}
+                  classNamePrefix="builder-select"
                   value={selectedAction}
                   defaultValue={selectedAction}
                   onChange={setAction}
                   menuPortalTarget={document.body}
-                  styles={{
-                    menuPortal: (base) => ({ ...base, zIndex: 19999 }),
-                  }}
+                  styles={reactSelectStyles()}
                 ></Select>
               )}
             </td>
@@ -257,12 +269,12 @@ const ActionSettings = () => {
           {name !== "Clear" && options.mode === "filter" ? (
             <tr>
               <td>
-                <label>Row variable</label>
+                <label>{t("Row variable")}</label>
               </td>
               <td>
                 <select
                   value={action_row_variable}
-                  className="form-control form-select"
+                  className="form-control form-select code-modal-form"
                   onChange={(e) => {
                     if (!e.target) return;
                     const value = e.target.value;
@@ -290,7 +302,7 @@ const ActionSettings = () => {
           {action_row_variable === "each_matching_row" ? (
             <tr>
               <td>
-                <label>Rows limit</label>
+                <label>{t("Rows limit")}</label>
               </td>
               <td>
                 <input
@@ -306,7 +318,7 @@ const ActionSettings = () => {
           {action_style !== "on_page_load" ? (
             <tr>
               <td colSpan="2">
-                <label>Label (leave blank for default)</label>
+                <label>{t("Label (leave blank for default)")}</label>
                 <OrFormula
                   nodekey="action_label"
                   {...{ setProp, isFormula, node }}
@@ -339,7 +351,7 @@ const ActionSettings = () => {
           checked={confirm}
           onChange={setAProp("confirm", { checked: true })}
         />
-        <label className="form-check-label">User confirmation?</label>
+        <label className="form-check-label">{t("User confirmation?")}</label>
       </div>
       <div className="form-check">
         <input
@@ -349,7 +361,7 @@ const ActionSettings = () => {
           checked={spinner}
           onChange={setAProp("spinner", { checked: true })}
         />
-        <label className="form-check-label">Spinner on click</label>
+        <label className="form-check-label">{t("Spinner on click")}</label>
       </div>
       <div className="form-check">
         <input
@@ -359,7 +371,7 @@ const ActionSettings = () => {
           checked={run_async}
           onChange={setAProp("run_async", { checked: true })}
         />
-        <label className="form-check-label">Run async</label>
+        <label className="form-check-label">{t("Run async")}</label>
       </div>
       {action_style !== "on_page_load" ? (
         <BlockSetting block={block} setProp={setProp} />
@@ -373,12 +385,12 @@ const ActionSettings = () => {
             checked={is_submit_action}
             onChange={setAProp("is_submit_action", { checked: true })}
           />
-          <label className="form-check-label">This is the submit action</label>
+          <label className="form-check-label">{t("This is the submit action")}</label>
         </div>
       ) : null}
       {name === "Multi-step action" ? (
         <Fragment>
-          <label>Steps</label>
+          <label>{t("Steps")}</label>
 
           <ArrayManager
             node={node}
@@ -392,23 +404,22 @@ const ActionSettings = () => {
             ]}
           ></ArrayManager>
 
-          <label>Action</label>
+          <label>{t("Action")}</label>
           {options.inJestTestingMode ? null : (
             <Select
               options={multiStepActionOptions}
-              className="react-select multistep-action-selector"
+              className={builderSelectClassName("react-select multistep-action-selector")}
+              classNamePrefix="builder-select"
               value={selectedMultiStepAction}
               defaultValue={selectedMultiStepAction}
               onChange={setMultistepAction}
               menuPortalTarget={document.body}
-              styles={{
-                menuPortal: (base) => ({ ...base, zIndex: 19999 }),
-              }}
+              styles={reactSelectStyles()}
             ></Select>
           )}
           {options.mode !== "page" ? (
             <Fragment>
-              <label>Only if... (formula)</label>
+              <label>{t("Only if... (formula)")}</label>
               <input
                 type="text"
                 className="form-control text-to-display"
@@ -427,7 +438,7 @@ const ActionSettings = () => {
           ) : null}
           {stepCfgFields ? (
             <Fragment>
-              Step configuration:
+              {t("Step configuration:")}
               <ConfigForm
                 fields={stepCfgFields}
                 configuration={
@@ -446,16 +457,120 @@ const ActionSettings = () => {
           ) : null}
         </Fragment>
       ) : cfgFields ? (
-        <ConfigForm
-          fields={cfgFields}
-          configuration={configuration}
-          setProp={setProp}
-          node={node}
-        />
+        <Fragment>
+          {name === "run_js_code" && runJsCodeModalOnly ? (
+            <div className="builder-config-field" data-field-name="code">
+              <label>{t("Code")}</label>
+              <button
+                type="button"
+                className="btn btn-secondary btn-sm"
+                onClick={() => setCodeModalOpen(true)}
+              >
+                {t("Open Code Popup")}
+              </button>
+            </div>
+          ) : null}
+          {name === "run_js_code" && !runJsCodeModalOnly ? (
+            <Fragment>
+              <ConfigForm
+                fields={(cfgFields || []).filter((f) => f.name === "code")}
+                configuration={configuration}
+                setProp={setProp}
+                node={node}
+                openPopup={() => setCodeModalOpen(true)}
+              />
+              {/* <div className="builder-config-field mt-2" data-field-name="code-modal-trigger">
+                <button
+                  type="button"
+                  className="btn btn-secondary btn-sm"
+                  onClick={() => setCodeModalOpen(true)}
+                >
+                  {t("Open Code Popup")}
+                </button>
+              </div> */}
+              <ConfigForm
+                fields={cfgFieldsForForm}
+                configuration={configuration}
+                setProp={setProp}
+                node={node}
+              />
+            </Fragment>
+          ) : (
+            <ConfigForm
+              fields={runJsCodeModalOnly ? cfgFieldsForForm : cfgFields}
+              configuration={configuration}
+              setProp={setProp}
+              node={node}
+            />
+          )}
+          {name === "run_js_code" && codeModalOpen ? (
+                <div
+                  className={`modal fade ${codeModalOpen ? "show" : ""}`}
+                  style={{
+                    display: codeModalOpen ? "block" : "none",
+                    zIndex: 1055,
+                  }}
+                  tabIndex={-1}
+                  role="dialog"
+                  aria-labelledby="codeModalLabel"
+                  aria-hidden={!codeModalOpen}
+                >
+                  <div
+                    className="modal-backdrop fade show"
+                    style={{ zIndex: 1050 }}
+                    onClick={() => setCodeModalOpen(false)}
+                    aria-hidden="true"
+                  />
+                  <div
+                    className="modal-dialog modal-dialog-centered modal-lg"
+                    role="document"
+                    style={{ zIndex: 1060 }}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <div className="modal-content code-modal">
+                      <div className="modal-header">
+                        <h5 className="modal-title" id="codeModalLabel">
+                          {t("Code")}
+                        </h5>
+                        <button
+                          type="button"
+                          className="btn-close"
+                          aria-label="Close"
+                          onClick={() => setCodeModalOpen(false)}
+                        />
+                      </div>
+                      <div className="modal-body">
+                        <MultiLineCodeEditor
+                          setProp={setProp}
+                          value={configuration?.code ?? ""}
+                          onChange={(code) =>
+                            setProp((prop) => {
+                              if (!prop.configuration)
+                                prop.configuration = {};
+                              prop.configuration.code = code;
+                            })
+                          }
+                          isModalEditor
+                        />
+                      </div>
+                      <div className="modal-footer">
+                        <button
+                          type="button"
+                          className="btn btn-secondary"
+                          onClick={() => setCodeModalOpen(false)}
+                        >
+                          {t("Close")}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ) : null}
+        </Fragment>
       ) : null}
       {cfg_link ? (
         <a className="d-block mt-2" target="_blank" href={cfg_link}>
-          Configure this action
+          {t("Configure this action")}
         </a>
       ) : null}
     </div>

package/src/components/elements/Aggregation.js

@@ -3,14 +3,10 @@
  * @module components/elements/Aggregation
  * @subcategory components / elements
  */
+/* globals validate_expression_elem */
 
-import React, {
-  useContext,
-  useState,
-  useRef,
-  useEffect,
-  Fragment,
-} from "react";
+import React, { Fragment, useState, useContext, useEffect, useRef } from "react";
+import useTranslation from "../../hooks/useTranslation";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import {
@@ -59,6 +55,7 @@ export /**
  * @namespace
  */
 const AggregationSettings = () => {
+  const { t } = useTranslation();
   const {
     actions: { setProp },
     agg_relation,
@@ -132,7 +129,7 @@ const AggregationSettings = () => {
           {options.mode === "filter" ? null : (
             <tr>
               <td>
-                <label>Relation</label>
+                <label>{t("Relation")}</label>
               </td>
               <td>
                 <select
@@ -160,7 +157,7 @@ const AggregationSettings = () => {
           <tr>
             <td>
               <label>
-                {options.mode === "filter" ? "Field" : "Child table field"}
+                {options.mode === "filter" ? t("Field") : t("Child table field")}
               </label>
             </td>
             <td>
@@ -179,7 +176,7 @@ const AggregationSettings = () => {
           </tr>
           <tr>
             <td>
-              <label>Statistic</label>
+              <label>{t("Statistic")}</label>
             </td>
             <td>
               <select
@@ -190,34 +187,34 @@ const AggregationSettings = () => {
               >
                 {buildOptions(
                   [
-                    "Count",
-                    "CountUnique",
-                    "Avg",
-                    "Sum",
-                    "Max",
-                    "Min",
-                    "Array_Agg",
+                    t("Count"),
+                    t("CountUnique"),
+                    t("Avg"),
+                    t("Sum"),
+                    t("Max"),
+                    t("Min"),
+                    t("Array_Agg"),
                   ],
                   { valAttr: true }
                 )}
                 {targetFieldType === "Bool" ? (
-                  <option value={`Percent true`}>Percent true</option>
+                  <option value={`Percent true`}>{t("Percent true")}</option>
                 ) : null}
                 {targetFieldType === "Bool" ? (
-                  <option value={`Percent false`}>Percent false</option>
+                  <option value={`Percent false`}>{t("Percent false")}</option>
                 ) : null}
                 {(options.agg_field_opts[agg_relation] || [])
                   .filter((f) => f.ftype === "Date")
                   .map((f, ix) => (
                     <option key={ix} value={`Latest ${f.name}`}>
-                      Latest {f.name}
+                      {t("Latest")} {f.name}
                     </option>
                   ))}
                 {(options.agg_field_opts[agg_relation] || [])
                   .filter((f) => f.ftype === "Date")
                   .map((f, ix) => (
                     <option key={ix} value={`Earliest ${f.name}`}>
-                      Earliest {f.name}
+                      {t("Earliest")} {f.name}
                     </option>
                   ))}
               </select>
@@ -226,7 +223,7 @@ const AggregationSettings = () => {
           <tr>
             <td>
               <label>
-                Where
+                {t("Where")}
                 <HelpTopicLink
                   topic="Aggregation where formula"
                   table_name={options.tableName}
@@ -251,7 +248,7 @@ const AggregationSettings = () => {
           {fvs && (
             <tr>
               <td>
-                <label>Field view</label>
+                <label>{t("Field view")}</label>
               </td>
 
               <td>

package/src/components/elements/ArrayManager.js

@@ -5,6 +5,7 @@
  */
 /* globals $, _sc_globalCsrf*/
 import React, { Fragment, useState, useEffect } from "react";
+import useTranslation from "../../hooks/useTranslation";
 import optionsCtx from "../context";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -56,6 +57,7 @@ export const ArrayManager = ({
   manageContents,
   initialAddProps,
 }) => {
+  const { t } = useTranslation();
   const { actions, query, connectors } = useEditor((state, query) => {
     return {};
   });
@@ -187,7 +189,7 @@ export const ArrayManager = ({
       <ConfigField
         field={{
           name: currentProp,
-          label: "Number of things",
+          label: t("Number of things"),
           type: "btn_select",
           options: ntimes(node[countProp], (i) => ({
             value: i,
@@ -201,7 +203,7 @@ export const ArrayManager = ({
       ></ConfigField>
       <div className="btn-group w-100" role="group">
         <button
-          title="Move left"
+          title={t("Move left")}
           type="button"
           style={{ width: "25%" }}
           className="btn btn-outline-secondary btn-sm"
@@ -211,7 +213,7 @@ export const ArrayManager = ({
           <FontAwesomeIcon icon={faAngleDoubleLeft} />
         </button>
         <button
-          title="Add"
+          title={t("Add")}
           type="button"
           style={{ width: "25%" }}
           className="btn btn-outline-secondary btn-sm"
@@ -220,7 +222,7 @@ export const ArrayManager = ({
           <FontAwesomeIcon icon={faPlus} />
         </button>
         <button
-          title="Delete"
+          title={t("Delete")}
           type="button"
           style={{ width: "25%" }}
           className="btn btn-outline-secondary btn-sm"
@@ -229,7 +231,7 @@ export const ArrayManager = ({
           <FontAwesomeIcon icon={faTrashAlt} />
         </button>
         <button
-          title="Move right"
+          title={t("Move right")}
           type="button"
           disabled={node[currentProp] === node[countProp] - 1}
           style={{ width: "25%" }}

package/src/components/elements/BoxModelEditor.js

@@ -5,6 +5,7 @@
  */
 
 import React, { useContext, Fragment, useState } from "react";
+import useTranslation from "../../hooks/useTranslation";
 import { SettingsRow, SettingsSectionHeaderRow, bstyleopt } from "./utils";
 /* 
 Contains code from https://github.com/tpaksu/boxmodel
@@ -22,6 +23,7 @@ export /**
  * @namespace
  */
 const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
+  const { t } = useTranslation();
   const [selectedCategory, setSelectedCategory] = useState(false);
   const [selectedDirection, setSelectedDirection] = useState(false);
   const selectedProperty = !selectedCategory
@@ -45,7 +47,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                 className="boxmodel-text boxmodel-header"
                 onClick={() => setCatAndDir("margin", null)}
               >
-                Margin
+                {t("Margin")}
               </span>
               <span
                 className="boxmodel-input-container boxmodel-input-direction-left"
@@ -74,7 +76,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                     className="boxmodel-text boxmodel-header"
                     onClick={() => setCatAndDir("border", null)}
                   >
-                    Border
+                    {t("Border")}
                   </span>
                   <span
                     className="boxmodel-input-container boxmodel-input-direction-left"
@@ -109,7 +111,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                         className="boxmodel-text boxmodel-header"
                         onClick={() => setCatAndDir("padding", null)}
                       >
-                        Padding
+                        {t("Padding")}
                       </span>
                       <span
                         className="boxmodel-input-container boxmodel-input-direction-left"
@@ -274,7 +276,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: "width",
-                  label: "width",
+                  label: t("width"),
                   type: "DimUnits",
                   horiz: true,
                 }}
@@ -285,7 +287,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: "min-width",
-                  label: "min width",
+                  label: t("min width"),
                   type: "DimUnits",
                   horiz: true,
                 }}
@@ -296,7 +298,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: "max-width",
-                  label: "max width",
+                  label: t("max width"),
                   type: "DimUnits",
                   horiz: true,
                 }}
@@ -305,7 +307,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                 isStyle={true}
               />
               <SettingsRow
-                field={{ name: "height", label: "height", type: "DimUnits" }}
+                field={{ name: "height", label: t("height"), type: "DimUnits" }}
                 node={node}
                 setProp={setProp}
                 isStyle={!!sizeWithStyle}
@@ -313,7 +315,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: sizeWithStyle ? "min-height" : "minHeight",
-                  label: "min height",
+                  label: t("min height"),
                   type: "DimUnits",
                 }}
                 node={node}
@@ -323,7 +325,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: "max-height",
-                  label: "max height",
+                  label: t("max height"),
                   type: "DimUnits",
                 }}
                 node={node}
@@ -338,7 +340,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: selectedProperty + "-width",
-                  label: "width",
+                  label: t("width"),
                   type: "DimUnits",
                 }}
                 node={node}
@@ -348,7 +350,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: selectedProperty + "-style",
-                  label: "style",
+                  label: t("style"),
                   type: "btn_select",
                   btnClass: "btnstylesel",
                   options: [
@@ -369,7 +371,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: selectedProperty + "-color",
-                  label: "color",
+                  label: t("color"),
                   type: "Color",
                 }}
                 node={node}
@@ -380,7 +382,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                 <SettingsRow
                   field={{
                     name: selectedProperty + "-radius",
-                    label: "radius",
+                    label: t("radius"),
                     type: "DimUnits",
                   }}
                   node={node}
@@ -407,17 +409,17 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
           {!selectedProperty && (
             <tr>
               <td colSpan={2}>
-                <div>Click above to select a property to adjust.</div>
+                <div>{t("Click above to select a property to adjust.")}</div>
                 <div>
                   <small>
-                    Click a label (margin, border, padding) to adjust all edges.
+                    {t("Click a label (margin, border, padding) to adjust all edges.")}
                   </small>
                 </div>
                 <div>
-                  <small>Click an edge to adjust that edge.</small>
+                  <small>{t("Click an edge to adjust that edge.")}</small>
                 </div>
                 <div>
-                  <small>Click center to adjust height and width</small>
+                  <small>{t("Click center to adjust height and width")}</small>
                 </div>
               </td>
             </tr>