Add textarea setting type to AdminPage#buildSettingComponent (#3141)

framework/core/js/src/admin/components/AdminPage.tsx

@@ -75,6 +75,7 @@ export interface HTMLInputSettingsComponentOptions extends CommonSettingsItemOpt
 
 const BooleanSettingTypes = ['bool', 'checkbox', 'switch', 'boolean'] as const;
 const SelectSettingTypes = ['select', 'dropdown', 'selectdropdown'] as const;
+const TextareaSettingTypes = ['textarea'] as const;
 
 /**
  * Valid options for the setting component builder to generate a Switch.
@@ -95,10 +96,21 @@ export interface SelectSettingComponentOptions extends CommonSettingsItemOptions
   default: string;
 }
 
+/**
+ * Valid options for the setting component builder to generate a Textarea.
+ */
+export interface TextareaSettingComponentOptions extends CommonSettingsItemOptions {
+  type: typeof TextareaSettingTypes[number];
+}
+
 /**
  * All valid options for the setting component builder.
  */
-export type SettingsComponentOptions = HTMLInputSettingsComponentOptions | SwitchSettingComponentOptions | SelectSettingComponentOptions;
+export type SettingsComponentOptions =
+  | HTMLInputSettingsComponentOptions
+  | SwitchSettingComponentOptions
+  | SelectSettingComponentOptions
+  | TextareaSettingComponentOptions;
 
 /**
  * Valid attrs that can be returned by the `headerInfo` function
@@ -212,6 +224,8 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt
 
     const [inputId, helpTextId] = [generateElementId(), generateElementId()];
 
+    let settingElement: Mithril.Children;
+
     // Typescript being Typescript
     // https://github.com/microsoft/TypeScript/issues/14520
     if ((BooleanSettingTypes as readonly string[]).includes(type)) {
@@ -228,35 +242,35 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt
     } else if ((SelectSettingTypes as readonly string[]).includes(type)) {
       const { default: defaultValue, options, ...otherAttrs } = componentAttrs;
 
-      return (
+      settingElement = (
-        <div className="Form-group">
+        <Select
-          <label for={inputId}>{label}</label>
+          id={inputId}
-          <div className="helpText" id={helpTextId}>
+          aria-describedby={helpTextId}
-            {help}
+          value={value || defaultValue}
-          </div>
+          options={options}
-          <Select
+          onchange={this.settings[setting]}
-            id={inputId}
+          {...otherAttrs}
-            aria-describedby={helpTextId}
+        />
-            value={value || defaultValue}
-            options={options}
-            onchange={this.settings[setting]}
-            {...otherAttrs}
-          />
-        </div>
       );
     } else {
       componentAttrs.className = classList(['FormControl', componentAttrs.className]);
 
-      return (
+      if ((TextareaSettingTypes as readonly string[]).includes(type)) {
-        <div className="Form-group">
+        settingElement = <textarea id={inputId} aria-describedby={helpTextId} bidi={this.setting(setting)} {...componentAttrs} />;
-          {label && <label for={inputId}>{label}</label>}
+      } else {
-          <div id={helpTextId} className="helpText">
+        settingElement = <input id={inputId} aria-describedby={helpTextId} type={type} bidi={this.setting(setting)} {...componentAttrs} />;
-            {help}
+      }
-          </div>
-          <input id={inputId} aria-describedby={helpTextId} type={type} bidi={this.setting(setting)} {...componentAttrs} />
-        </div>
-      );
     }
+
+    return (
+      <div className="Form-group">
+        {label && <label for={inputId}>{label}</label>}
+        <div id={helpTextId} className="helpText">
+          {help}
+        </div>
+        {settingElement}
+      </div>
+    );
   }
 
   /**