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

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,12 +242,7 @@ 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">
-          <label for={inputId}>{label}</label>
-          <div className="helpText" id={helpTextId}>
-            {help}
-          </div>
         <Select
           id={inputId}
           aria-describedby={helpTextId}
@@ -242,22 +251,27 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt
           onchange={this.settings[setting]}
           {...otherAttrs}
         />
-        </div>
       );
     } else {
       componentAttrs.className = classList(['FormControl', componentAttrs.className]);
 
+      if ((TextareaSettingTypes as readonly string[]).includes(type)) {
+        settingElement = <textarea id={inputId} aria-describedby={helpTextId} bidi={this.setting(setting)} {...componentAttrs} />;
+      } else {
+        settingElement = <input id={inputId} aria-describedby={helpTextId} type={type} bidi={this.setting(setting)} {...componentAttrs} />;
+      }
+    }
+
     return (
       <div className="Form-group">
         {label && <label for={inputId}>{label}</label>}
         <div id={helpTextId} className="helpText">
           {help}
         </div>
-          <input id={inputId} aria-describedby={helpTextId} type={type} bidi={this.setting(setting)} {...componentAttrs} />
+        {settingElement}
       </div>
     );
   }
-  }
 
   /**
    * Called when `saveSettings` completes successfully.