feat(ui): add support for dropdown, heading, and readonly (#2996)

* add support for dropdown and heading

* add comment

* address feedback

Author: diamonwiggins

e2e/kots-release-install-v3/config.yaml

@@ -268,12 +268,9 @@ spec:
           required: true
           help_text: "Help text of a **_Checkbox_** config item type **_marked required_**"
 
-        # TODO: uncomment when we support dropdowns in the UI
-        # - name: label_dropdown
-        #   type: label
-        #   title: |
-        #     ## Dropdown Items
-        #     ---
+        - name: heading_dropdown
+          type: heading
+          title: Dropdown Configuration
 
         - name: dropdown_simple
           title: Simple Dropdown
@@ -306,7 +303,35 @@ spec:
               title: Option 1
             - name: dropdown_required_opt2
               title: Option 2
-          default: dropdown_required_opt1 # temporarily set a default to get past the required validation until we support dropdowns in the UI
+
+        - name: heading_selectone
+          type: heading
+          title: Select One Configuration
+
+        - name: selectone_simple
+          title: Simple Select One (renders as radio)
+          type: select_one
+          help_text: "Help text of a simple **_Select One_** config item type (backward compatible with radio)"
+          items:
+            - name: selectone_simple_opt1
+              title: Option 1
+            - name: selectone_simple_opt2
+              title: Option 2
+
+        - name: selectone_with_default
+          title: Select One with default value
+          type: select_one
+          help_text: "Help text of a **_Select One_** config item type **_with default value_**"
+          items:
+            - name: selectone_with_default_opt1
+              title: Option 1
+            - name: selectone_with_default_opt2
+              title: Option 2
+          default: selectone_with_default_opt2
+
+        - name: heading_radio
+          type: heading
+          title: Radio Configuration
 
         - name: label_radio
           type: label
@@ -370,6 +395,55 @@ spec:
           required: true
           help_text: "Help text of a **_File_** config item type **_marked required_**"
 
+        - name: heading_readonly
+          type: heading
+          title: ReadOnly Configuration
+
+        - name: readonly_text
+          title: ReadOnly Text Field
+          type: text
+          value: "This value cannot be changed"
+          readonly: true
+          help_text: "This is a **_readonly text field_** - you cannot edit it"
+
+        - name: readonly_textarea
+          title: ReadOnly Textarea
+          type: textarea
+          value: "This is a readonly textarea.\nIt has multiple lines.\nBut you cannot edit it."
+          readonly: true
+          help_text: "This is a **_readonly textarea_**"
+
+        - name: readonly_checkbox
+          title: ReadOnly Checkbox
+          type: bool
+          value: "1"
+          readonly: true
+          help_text: "This checkbox is checked and **_readonly_**"
+
+        - name: readonly_radio
+          title: ReadOnly Radio
+          type: radio
+          value: radio_readonly_opt2
+          readonly: true
+          help_text: "This radio group is **_readonly_** with option 2 selected"
+          items:
+            - name: radio_readonly_opt1
+              title: Option 1
+            - name: radio_readonly_opt2
+              title: Option 2
+
+        - name: readonly_dropdown
+          title: ReadOnly Dropdown
+          type: dropdown
+          value: dropdown_readonly_opt2
+          readonly: true
+          help_text: "This dropdown is **_readonly_** with Option 2 selected"
+          items:
+            - name: dropdown_readonly_opt1
+              title: Option 1
+            - name: dropdown_readonly_opt2
+              title: Option 2
+
         - name: hidden_required
           title: Hidden required
           type: text

web/src/components/common/Select.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useSettings } from "../../contexts/SettingsContext";
+import HelpText from "./HelpText";
 
 interface SelectOption {
   value: string;
@@ -16,13 +17,14 @@ interface SelectProps {
   disabled?: boolean;
   error?: string;
   helpText?: string;
+  defaultValue?: string;
   className?: string;
   labelClassName?: string;
   placeholder?: string;
   dataTestId?: string;
 }
 
-const Select: React.FC<SelectProps> = ({
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(({
   id,
   label,
   value,
@@ -32,11 +34,12 @@ const Select: React.FC<SelectProps> = ({
   disabled = false,
   error,
   helpText,
+  defaultValue,
   className = "",
   labelClassName = "",
   placeholder,
   dataTestId,
-}) => {
+}, ref) => {
   const { settings } = useSettings();
   const themeColor = settings.themeColor;
 
@@ -47,6 +50,7 @@ const Select: React.FC<SelectProps> = ({
         {required && <span className="text-red-500 ml-1">*</span>}
       </label>
       <select
+        ref={ref}
         id={id}
         value={value}
         onChange={onChange}
@@ -75,9 +79,11 @@ const Select: React.FC<SelectProps> = ({
         ))}
       </select>
       {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
-      {helpText && !error && <p className="mt-1 text-sm text-gray-500">{helpText}</p>}
+      <HelpText helpText={helpText} defaultValue={defaultValue} error={error} />
     </div>
   );
-};
+});
+
+Select.displayName = 'Select';
 
 export default Select;

web/src/components/wizard/config/ConfigurationStep.tsx

@@ -6,6 +6,7 @@ import Input from '../../common/Input';
 import Textarea from '../../common/Textarea';
 import Checkbox from '../../common/Checkbox';
 import Radio from '../../common/Radio';
+import Select from '../../common/Select';
 import Label from '../../common/Label';
 import Markdown from '../../common/Markdown';
 import FileInput from '../../common/file';
@@ -304,16 +305,21 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
     updateConfigValue(itemName, value, filename);
   };
 
+  const handleDropdownChange = (itemName: string, e: React.ChangeEvent<HTMLSelectElement>) => {
+    updateConfigValue(itemName, e.target.value);
+  };
+
   const renderConfigItem = (item: AppConfigItem) => {
-    // Display item validation errors with priority over initial config errors  
+    // Display item validation errors with priority over initial config errors
     const displayError = itemErrors[item.name] || item.error;
-    
+
     const sharedProps = {
       id: item.name,
       label: item.title,
       helpText: item.help_text,
       error: displayError,
       required: item.required,
+      disabled: item.readonly,
       ref: setRef(item.name),
     }
 
@@ -369,6 +375,7 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
         );
 
       case 'radio':
+      case 'select_one': // select_one renders as radio for backward compatibility
         if (item.items) {
           return (
             <Radio
@@ -394,6 +401,41 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
           />
         );
 
+      case 'dropdown':
+        if (item.items) {
+          const options = item.items.map(child => ({
+            value: child.name,
+            label: child.title
+          }));
+          return (
+            <Select
+              {...sharedProps}
+              defaultValue={item.default}
+              value={getEffectiveValue(item)}
+              options={options}
+              placeholder="Select an option"
+              onChange={(e) => handleDropdownChange(item.name, e)}
+              dataTestId={`dropdown-input-${item.name}`}
+              className="w-96"
+            />
+          );
+        }
+        return null;
+
+      case 'heading':
+        return (
+          <div className="pt-4 pb-2 border-b border-gray-200" role="group">
+            <h3
+              className="text-lg font-semibold text-gray-900"
+              data-testid={`heading-${item.name}`}
+              role="heading"
+              aria-level={3}
+            >
+              {item.title}
+            </h3>
+          </div>
+        );
+
       case 'label':
         return (
           <Label