#2870 Add ability to pass in an array variable or template for dropdown field options

src/components/fields/schemaFields/widgets/ArrayWidget.tsx

@@ -80,7 +80,7 @@ const ArrayWidget: React.FC<SchemaFieldProps> = ({ schema, name }) => {
     <FieldArray name={name}>
       {({ push }) => (
         <>
-          <ul className="list-group">
+          <ul className="list-group mb-2">
             {(field.value ?? []).map((item: unknown, index: number) => (
               <li className="list-group-item py-1" key={index}>
                 <SchemaField

src/components/formBuilder/FormBuilder.tsx

@@ -18,8 +18,8 @@
 import styles from "./FormBuilder.module.scss";
 
 import React, { useState } from "react";
-import FormEditor from "./FormEditor";
-import FormPreview from "./FormPreview";
+import FormEditor from "./edit/FormEditor";
+import FormPreview from "./preview/FormPreview";
 import { useField } from "formik";
 import { RJSFSchema } from "@/components/formBuilder/formBuilderTypes";
 

src/components/formBuilder/FieldEditor.tsx → src/components/formBuilder/edit/FieldEditor.tsx

@@ -22,8 +22,8 @@ import {
   RJSFSchema,
   SelectStringOption,
   SetActiveField,
-} from "./formBuilderTypes";
-import { UI_WIDGET } from "./schemaFieldNames";
+} from "@/components/formBuilder/formBuilderTypes";
+import { UI_WIDGET } from "@/components/formBuilder/schemaFieldNames";
 import {
   FIELD_TYPES_WITHOUT_DEFAULT,
   FIELD_TYPE_OPTIONS,
@@ -34,15 +34,13 @@ import {
   stringifyUiType,
   UiType,
   validateNextPropertyName,
-} from "./formBuilderHelpers";
+} from "@/components/formBuilder/formBuilderHelpers";
 import { Schema, SchemaPropertyType } from "@/core";
-import ConnectedFieldTemplate from "@/components/form/ConnectedFieldTemplate";
 import FieldTemplate from "@/components/form/FieldTemplate";
 import { produce } from "immer";
 import SelectWidget, {
   SelectWidgetOnChange,
 } from "@/components/form/widgets/SelectWidget";
-import OptionsWidget from "@/components/form/widgets/OptionsWidget";
 import SwitchButtonWidget, {
   CheckBoxLike,
 } from "@/components/form/widgets/switchButton/SwitchButtonWidget";
@@ -255,10 +253,15 @@ const FieldEditor: React.FC<{
         )}
 
       {propertySchema.enum && (
-        <ConnectedFieldTemplate
-          name={getFullFieldName("enum")}
+        <SchemaField
           label="Options"
-          as={OptionsWidget}
+          name={getFullFieldName("enum")}
+          schema={{
+            type: "array",
+            items: {
+              type: "string",
+            },
+          }}
         />
       )}
 

src/components/formBuilder/FormEditor.test.tsx → src/components/formBuilder/edit/FormEditor.test.tsx

@@ -26,13 +26,13 @@ import {
   fireTextInput,
   fireFormSubmit,
 } from "@/tests/formHelpers";
-import { RJSFSchema } from "./formBuilderTypes";
+import { RJSFSchema } from "@/components/formBuilder/formBuilderTypes";
 import FormEditor, { FormEditorProps } from "./FormEditor";
 import {
   initAddingFieldCases,
   initOneFieldSchemaCase,
   initRenamingCases,
-} from "./formEditor.testCases";
+} from "@/components/formBuilder/formEditor.testCases";
 import selectEvent from "react-select-event";
 import userEvent from "@testing-library/user-event";
 

src/components/formBuilder/FormEditor.tsx → src/components/formBuilder/edit/FormEditor.tsx

@@ -23,7 +23,7 @@ import {
   RJSFSchema,
   SelectStringOption,
   SetActiveField,
-} from "./formBuilderTypes";
+} from "@/components/formBuilder/formBuilderTypes";
 import { Button, Col, Row } from "react-bootstrap";
 import FieldEditor from "./FieldEditor";
 import {
@@ -33,8 +33,8 @@ import {
   normalizeUiOrder,
   replaceStringInArray,
   updateRjsfSchemaWithDefaultsIfNeeded,
-} from "./formBuilderHelpers";
-import { UI_ORDER } from "./schemaFieldNames";
+} from "@/components/formBuilder/formBuilderHelpers";
+import { UI_ORDER } from "@/components/formBuilder/schemaFieldNames";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { Schema } from "@/core";

src/components/formBuilder/FormPreview.tsx → src/components/formBuilder/preview/FormPreview.tsx

@@ -19,16 +19,20 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import JsonSchemaForm from "@rjsf/bootstrap-4";
 import { FieldProps, IChangeEvent } from "@rjsf/core";
-import { RJSFSchema, SetActiveField } from "./formBuilderTypes";
+import {
+  RJSFSchema,
+  SetActiveField,
+} from "@/components/formBuilder/formBuilderTypes";
 import FormPreviewStringField from "./FormPreviewStringField";
-import { UI_SCHEMA_ACTIVE } from "./schemaFieldNames";
+import { UI_SCHEMA_ACTIVE } from "@/components/formBuilder/schemaFieldNames";
 import { produce } from "immer";
 import FormPreviewBooleanField from "./FormPreviewBooleanField";
 import { getPreviewValues } from "@/components/fields/fieldUtils";
-import ImageCropWidgetPreview from "@/components/formBuilder/ImageCropWidgetPreview";
+import ImageCropWidgetPreview from "@/components/formBuilder/preview/ImageCropWidgetPreview";
 // eslint-disable-next-line import/no-named-as-default -- need default export here
-import DescriptionField from "./DescriptionField";
-import FieldTemplate from "./FieldTemplate";
+import DescriptionField from "@/components/formBuilder/DescriptionField";
+import FieldTemplate from "@/components/formBuilder/FieldTemplate";
+import SelectWidgetPreview from "./SelectWidgetPreview";
 
 export type FormPreviewProps = {
   rjsfSchema: RJSFSchema;
@@ -99,6 +103,7 @@ const FormPreview: React.FC<FormPreviewProps> = ({
 
   const widgets = {
     imageCrop: ImageCropWidgetPreview,
+    SelectWidget: SelectWidgetPreview,
   };
 
   return (

src/components/formBuilder/FormPreviewFieldTemplate.tsx → src/components/formBuilder/preview/FormPreviewFieldTemplate.tsx

@@ -19,8 +19,8 @@ import styles from "./FormPreviewFieldTemplate.module.scss";
 
 import { Field, FieldProps } from "@rjsf/core";
 import React from "react";
-import { SetActiveField } from "./formBuilderTypes";
-import { UI_SCHEMA_ACTIVE } from "./schemaFieldNames";
+import { SetActiveField } from "@/components/formBuilder/formBuilderTypes";
+import { UI_SCHEMA_ACTIVE } from "@/components/formBuilder/schemaFieldNames";
 import cx from "classnames";
 
 export interface FormPreviewFieldProps extends FieldProps {

src/components/formBuilder/preview/SelectWidgetPreview.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2022 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { utils, WidgetProps } from "@rjsf/core";
+import React from "react";
+import { FormGroup, FormLabel } from "react-bootstrap";
+
+const RjsfArrayField = utils.getDefaultRegistry().widgets.SelectWidget;
+
+const SelectWidgetPreview: React.VFC<WidgetProps> = (props) => {
+  console.log("FormPreviewArrayField props:", props);
+  if (typeof props.schema.enum === "string") {
+    return (
+      <FormGroup>
+        <FormLabel>{props.schema.title}</FormLabel>
+        <div className="text-muted form-text">
+          Dropdown options defined by a variable are not displayed in preview.
+        </div>
+      </FormGroup>
+    );
+  }
+
+  return <RjsfArrayField {...props} />;
+};
+
+export default SelectWidgetPreview;

src/pageEditor/fields/FormModalOptions.tsx

@@ -21,7 +21,7 @@ import React, { useEffect } from "react";
 import { validateRegistryId } from "@/types/helpers";
 import { actions as formBuilderActions } from "@/pageEditor/slices/formBuilderSlice";
 import formBuilderSelectors from "@/pageEditor/slices/formBuilderSelectors";
-import FormEditor from "@/components/formBuilder/FormEditor";
+import FormEditor from "@/components/formBuilder/edit/FormEditor";
 import useReduxState from "@/hooks/useReduxState";
 import ConfigErrorBoundary from "@/pageEditor/fields/ConfigErrorBoundary";
 

src/pageEditor/fields/FormRendererOptions.tsx

@@ -19,7 +19,7 @@ import SchemaField from "@/components/fields/schemaFields/SchemaField";
 import { Schema } from "@/core";
 import React, { useEffect } from "react";
 import { validateRegistryId } from "@/types/helpers";
-import FormEditor from "@/components/formBuilder/FormEditor";
+import FormEditor from "@/components/formBuilder/edit/FormEditor";
 import { actions as elementWizardActions } from "@/pageEditor/slices/formBuilderSlice";
 import formBuilderSelectors from "@/pageEditor/slices/formBuilderSelectors";
 import useReduxState from "@/hooks/useReduxState";

src/pageEditor/tabs/blueprintOptionsTab/BlueprintOptionsTab.tsx

@@ -23,8 +23,8 @@ import React, { useMemo, useState } from "react";
 import { Alert, Col, Container, Nav, Row, Tab } from "react-bootstrap";
 import { FormState } from "@/pageEditor/slices/editorSlice";
 import { RJSFSchema } from "@/components/formBuilder/formBuilderTypes";
-import FormEditor from "@/components/formBuilder/FormEditor";
-import FormPreview from "@/components/formBuilder/FormPreview";
+import FormEditor from "@/components/formBuilder/edit/FormEditor";
+import FormPreview from "@/components/formBuilder/preview/FormPreview";
 import Loader from "@/components/Loader";
 import FieldRuntimeContext, {
   RuntimeContext,

src/pageEditor/tabs/editTab/dataPanel/DataPanel.tsx

@@ -25,7 +25,7 @@ import { actions } from "@/pageEditor/slices/formBuilderSlice";
 import { Alert, Button, Nav, Tab } from "react-bootstrap";
 import JsonTree from "@/components/jsonTree/JsonTree";
 import dataPanelStyles from "@/pageEditor/tabs/dataPanelTabs.module.scss";
-import FormPreview from "@/components/formBuilder/FormPreview";
+import FormPreview from "@/components/formBuilder/preview/FormPreview";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import BlockPreview, {
   usePreviewInfo,