#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,11 +253,29 @@ const FieldEditor: React.FC<{
         )}
 
       {propertySchema.enum && (
-        <ConnectedFieldTemplate
-          name={getFullFieldName("enum")}
-          label="Options"
-          as={OptionsWidget}
-        />
+        <>
+          <SchemaField
+            label="Options"
+            name={getFullFieldName("enum")}
+            schema={{
+              type: "array",
+              items: {
+                type: "string",
+              },
+            }}
+          />
+
+          <SchemaField
+            label="Option labels"
+            name={getFullFieldName("enumNames")}
+            schema={{
+              type: "array",
+              items: {
+                type: "string",
+              },
+            }}
+          />
+        </>
       )}
 
       <FieldTemplate

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/FormPreviewBooleanField.tsx → src/components/formBuilder/preview/FormPreviewBooleanField.tsx

@@ -15,14 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { utils } from "@rjsf/core";
+import { Theme as RjsfTheme } from "@rjsf/bootstrap-4";
 import React from "react";
 import FormPreviewFieldTemplate, {
   FormPreviewFieldProps,
 } from "./FormPreviewFieldTemplate";
 import styles from "./FormPreviewBooleanField.module.scss";
 
-const RjsfBooleanField = utils.getDefaultRegistry().fields.BooleanField;
+const RjsfBooleanField = RjsfTheme.fields.BooleanField;
 
 const FormPreviewBooleanField: React.FC<FormPreviewFieldProps> = (props) => (
   <FormPreviewFieldTemplate

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/FormPreviewBooleanField.module.scss → src/components/formBuilder/preview/FormPreviewStringField.module.scss

@@ -1,8 +1,4 @@
 .root {
-  input[type="checkbox"] {
-    margin-left: 0 !important;
-  }
-
   :global(.form-group) {
     margin-bottom: 0 !important;
   }

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

@@ -15,14 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { utils } from "@rjsf/core";
+import { Theme as RjsfTheme } from "@rjsf/bootstrap-4";
 import React from "react";
 import FormPreviewFieldTemplate, {
   FormPreviewFieldProps,
 } from "./FormPreviewFieldTemplate";
 import styles from "./FormPreviewBooleanField.module.scss";
 
-const RjsfStringField = utils.getDefaultRegistry().fields.StringField;
+const RjsfStringField = RjsfTheme.fields.StringField;
 
 const FormPreviewStringField: React.FC<FormPreviewFieldProps> = (props) => (
   <FormPreviewFieldTemplate

src/components/formBuilder/preview/SelectWidgetPreview.tsx

@@ -0,0 +1,57 @@
+/*
+ * 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 { WidgetProps } from "@rjsf/core";
+import { Theme as RjsfTheme } from "@rjsf/bootstrap-4";
+import React from "react";
+
+const RjsfSelectWidget = RjsfTheme.widgets.SelectWidget;
+
+const SelectWidgetPreview: React.VFC<WidgetProps> = (props) => {
+  // If Select Options is a variable, then `props.schema.enum` holds the name of the variable (i.e. string).
+  const { enum: values } = props.schema;
+  if (typeof values === "string") {
+    // @ts-expect-error -- enumNames is a valid property of the RJSF schema.
+    const { enumNames: labels } = props.schema;
+    const enumOptions = [
+      {
+        value: values,
+        label: typeof labels === "string" ? labels : values,
+      },
+    ];
+
+    const schema = {
+      ...props.schema,
+      enum: [values],
+      enumNames: typeof labels === "string" ? labels : undefined,
+    };
+
+    return (
+      <RjsfSelectWidget
+        {...props}
+        disabled
+        options={{ enumOptions }}
+        schema={schema}
+        value={values}
+      />
+    );
+  }
+
+  return <RjsfSelectWidget {...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,