feat(ui): add support for textarea config option (#2447)

diamonwiggins · web-flow · commit 5b6d74e7dc77 · 2025-07-10T02:24:47.000Z
* add support for textarea config option

* add new line

* remove default placeholders for text and textarea
diff --git a/web/src/components/common/Textarea.tsx b/web/src/components/common/Textarea.tsx
@@ -0,0 +1,69 @@
+import { ChangeEvent, CSSProperties } from 'react';
+import { useSettings } from '../../contexts/SettingsContext';
+
+interface TextareaProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  rows?: number;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  error?: string;
+  helpText?: string;
+  className?: string;
+  labelClassName?: string;
+  dataTestId?: string;
+}
+
+const Textarea = ({
+  id,
+  label,
+  value,
+  onChange,
+  rows = 4,
+  placeholder = '',
+  required = false,
+  disabled = false,
+  error,
+  helpText,
+  className = '',
+  labelClassName = '',
+  dataTestId,
+}: TextareaProps) => {
+  const { settings } = useSettings();
+  const themeColor = settings.themeColor;
+
+  return (
+    <div className="mb-4">
+      <label htmlFor={id} className={`block text-sm font-medium text-gray-700 mb-1 ${labelClassName}`}>
+        {label}
+        {required && <span className="text-red-500 ml-1">*</span>}
+      </label>
+      <textarea
+        id={id}
+        value={value}
+        onChange={onChange}
+        rows={rows}
+        placeholder={placeholder}
+        disabled={disabled}
+        required={required}
+        className={`w-full px-3 py-2 border ${
+          error ? 'border-red-500' : 'border-gray-300'
+        } rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 ${
+          disabled ? 'bg-gray-100 text-gray-500' : 'bg-white'
+        } ${className}`}
+        style={{
+          '--tw-ring-color': themeColor,
+          '--tw-ring-offset-color': themeColor,
+        } as CSSProperties}
+        data-testid={dataTestId}
+      />
+      {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>}
+    </div>
+  );
+};
+
+export default Textarea;
diff --git a/web/src/components/wizard/config/ConfigurationStep.tsx b/web/src/components/wizard/config/ConfigurationStep.tsx
@@ -3,6 +3,7 @@ import { useQuery, useMutation } from '@tanstack/react-query';
 import Card from '../../common/Card';
 import Button from '../../common/Button';
 import Input from '../../common/Input';
+import Textarea from '../../common/Textarea';
 import { useWizard } from '../../../contexts/WizardModeContext';
 import { useAuth } from '../../../contexts/AuthContext';
 import { useSettings } from '../../../contexts/SettingsContext';
@@ -141,12 +142,22 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
             id={item.name}
             label={item.title}
             value={item.value || ''}
-            placeholder={item.default}
             onChange={handleInputChange}
             dataTestId={`text-input-${item.name}`}
           />
         );
 
+      case 'textarea':
+        return (
+          <Textarea
+            id={item.name}
+            label={item.title}
+            value={item.value || ''}
+            onChange={handleInputChange}
+            dataTestId={`textarea-input-${item.name}`}
+          />
+        );
+
       case 'bool':
         return (
           <div className="flex items-center space-x-3">
diff --git a/web/src/components/wizard/tests/ConfigurationStep.test.tsx b/web/src/components/wizard/tests/ConfigurationStep.test.tsx
@@ -20,6 +20,13 @@ const MOCK_APP_CONFIG: AppConfig = {
           value: "My App",
           default: "Default App"
         },
+        {
+          name: "description",
+          title: "Application Description",
+          type: "textarea",
+          value: "This is my application\nIt does amazing things",
+          default: "Enter description here..."
+        },
         {
           name: "enable_feature",
           title: "Enable Feature",
@@ -57,6 +64,13 @@ const MOCK_APP_CONFIG: AppConfig = {
           type: "text",
           value: "localhost",
           default: "localhost"
+        },
+        {
+          name: "db_config",
+          title: "Database Configuration",
+          type: "textarea",
+          value: "",
+          default: "# Database configuration\nhost: localhost\nport: 5432"
         }
       ]
     }
@@ -143,11 +157,13 @@ describe.each([
 
     // Check that form fields are rendered for the active tab
     expect(screen.getByTestId("config-item-app_name")).toBeInTheDocument();
+    expect(screen.getByTestId("config-item-description")).toBeInTheDocument();
     expect(screen.getByTestId("config-item-enable_feature")).toBeInTheDocument();
     expect(screen.getByTestId("config-item-auth_type")).toBeInTheDocument();
 
     // Check that the database tab is not rendered
     expect(screen.queryByTestId("config-item-db_host")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("config-item-db_config")).not.toBeInTheDocument();
 
     // Check next button
     const nextButton = screen.getByTestId("config-next-button");
@@ -224,20 +240,24 @@ describe.each([
 
     // Initially, Settings tab should be active
     expect(screen.getByTestId("config-item-app_name")).toBeInTheDocument();
+    expect(screen.getByTestId("config-item-description")).toBeInTheDocument();
     expect(screen.getByTestId("config-item-enable_feature")).toBeInTheDocument();
     expect(screen.getByTestId("config-item-auth_type")).toBeInTheDocument();
 
     // Check that the database tab is not rendered
     expect(screen.queryByTestId("config-item-db_host")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("config-item-db_config")).not.toBeInTheDocument();
 
     // Click on Database tab
     fireEvent.click(screen.getByTestId("config-tab-database"));
 
     // Database tab content should be visible
     expect(screen.getByTestId("config-item-db_host")).toBeInTheDocument();
+    expect(screen.getByTestId("config-item-db_config")).toBeInTheDocument();
 
     // Settings tab content should not be visible
     expect(screen.queryByTestId("config-item-app_name")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("config-item-description")).not.toBeInTheDocument();
     expect(screen.queryByTestId("config-item-enable_feature")).not.toBeInTheDocument();
     expect(screen.queryByTestId("config-item-auth_type")).not.toBeInTheDocument();
   });
@@ -263,6 +283,52 @@ describe.each([
     expect(appNameInput).toHaveValue("New App Name");
   });
 
+  it("handles textarea input changes correctly", async () => {
+    renderWithProviders(<ConfigurationStep onNext={mockOnNext} />, {
+      wrapperProps: {
+        authenticated: true,
+        target: target,
+      },
+    });
+
+    // Wait for loading to complete
+    await waitFor(() => {
+      expect(screen.queryByTestId("configuration-step-loading")).not.toBeInTheDocument();
+    });
+
+    // Find and update textarea input
+    const descriptionTextarea = screen.getByTestId("textarea-input-description");
+    fireEvent.change(descriptionTextarea, { target: { value: "New multi-line\ndescription text" } });
+
+    // Verify the value was updated
+    expect(descriptionTextarea).toHaveValue("New multi-line\ndescription text");
+  });
+
+  it("renders textarea with correct initial values", async () => {
+    renderWithProviders(<ConfigurationStep onNext={mockOnNext} />, {
+      wrapperProps: {
+        authenticated: true,
+        target: target,
+      },
+    });
+
+    // Wait for loading to complete
+    await waitFor(() => {
+      expect(screen.queryByTestId("configuration-step-loading")).not.toBeInTheDocument();
+    });
+
+    // Check textarea with value
+    const descriptionTextarea = screen.getByTestId("textarea-input-description");
+    expect(descriptionTextarea).toHaveValue("This is my application\nIt does amazing things");
+
+    // Switch to database tab
+    fireEvent.click(screen.getByTestId("config-tab-database"));
+
+    // Check textarea with empty value
+    const dbConfigTextarea = screen.getByTestId("textarea-input-db_config");
+    expect(dbConfigTextarea).toHaveValue("");
+  });
+
   it("handles checkbox changes correctly", async () => {
     renderWithProviders(<ConfigurationStep onNext={mockOnNext} />, {
       wrapperProps: {
@@ -350,6 +416,9 @@ describe.each([
     const appNameInput = screen.getByTestId("text-input-app_name");
     fireEvent.change(appNameInput, { target: { value: "Updated App Name" } });
 
+    const descriptionTextarea = screen.getByTestId("textarea-input-description");
+    fireEvent.change(descriptionTextarea, { target: { value: "Updated multi-line\ndescription text" } });
+
     const enableFeatureCheckbox = screen.getByTestId("bool-input-enable_feature");
     fireEvent.click(enableFeatureCheckbox);
 
@@ -364,6 +433,10 @@ describe.each([
     const dbHostInput = screen.getByTestId("text-input-db_host");
     fireEvent.change(dbHostInput, { target: { value: "Updated DB Host" } });
 
+    // Change textarea input
+    const dbConfigTextarea = screen.getByTestId("textarea-input-db_config");
+    fireEvent.change(dbConfigTextarea, { target: { value: "# Updated config\nhost: updated-host\nport: 5432" } });
+
     // Submit form
     const nextButton = screen.getByTestId("config-next-button");
     fireEvent.click(nextButton);
@@ -381,9 +454,11 @@ describe.each([
     expect(submittedValues!).toMatchObject({
       values: {
         app_name: "Updated App Name",
+        description: "Updated multi-line\ndescription text",
         enable_feature: "1",
         auth_type: "auth_type_anonymous",
-        db_host: "Updated DB Host"
+        db_host: "Updated DB Host",
+        db_config: "# Updated config\nhost: updated-host\nport: 5432"
       }
     });
   });
@@ -438,6 +513,10 @@ describe.each([
     const appNameInput = screen.getByTestId("text-input-app_name");
     fireEvent.change(appNameInput, { target: { value: "Only Changed Field" } });
 
+    // Change the description textarea
+    const descriptionTextarea = screen.getByTestId("textarea-input-description");
+    fireEvent.change(descriptionTextarea, { target: { value: "Only changed description" } });
+
     // Change the auth type
     const anonymousRadio = screen.getByTestId("radio-input-auth_type_anonymous");
     fireEvent.click(anonymousRadio);
@@ -459,11 +538,13 @@ describe.each([
     expect(submittedValues!).toMatchObject({
       values: {
         app_name: "Only Changed Field",
+        description: "Only changed description",
         auth_type: "auth_type_anonymous"
       }
     });
     expect(submittedValues!.values).not.toHaveProperty("enable_feature");
-    expect(submittedValues!.values).not.toHaveProperty("database_type");
+    expect(submittedValues!.values).not.toHaveProperty("db_host");
+    expect(submittedValues!.values).not.toHaveProperty("db_config");
   });
 
   describe("Radio button behavior", () => {
diff --git a/web/src/vite.setup.ts b/web/src/vite.setup.ts
@@ -1,5 +1,5 @@
-import { expect, vi } from "vitest";
-import matchers from "@testing-library/jest-dom/matchers";
+import { expect, vi, beforeEach, afterEach } from "vitest";
+import * as matchers from "@testing-library/jest-dom/matchers";
 import { act } from "react";
 import { faker } from "@faker-js/faker";
 
