feat(forms): Allow form fields to be deleted and preserve value

static/app/components/forms/formField/index.spec.tsx

@@ -1,4 +1,6 @@
-import {render} from 'sentry-test/reactTestingLibrary';
+import {Fragment, useState} from 'react';
+
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import TextField from 'sentry/components/forms/fields/textField';
 import Form from 'sentry/components/forms/form';
@@ -83,4 +85,65 @@ describe('FormField + model', function () {
     wrapper.unmount();
     expect(model.fieldDescriptor.has('fieldName')).toBe(false);
   });
+
+  it('preserves current value when softRemove field is unmounted and remounted', async function () {
+    const initialData = {
+      firstName: 'first',
+      lastName: 'last',
+    };
+
+    function TestComponent() {
+      const [showFields, setShowFields] = useState(true);
+
+      return (
+        <Form model={model} initialData={{...initialData}}>
+          <button type="button" onClick={() => setShowFields(!showFields)}>
+            Toggle Fields
+          </button>
+          {showFields && (
+            <Fragment>
+              <TextField aria-label="First Name" name="firstName" preserveOnUnmount />
+              <TextField aria-label="Last Name" name="lastName" preserveOnUnmount />
+            </Fragment>
+          )}
+        </Form>
+      );
+    }
+
+    render(<TestComponent />);
+
+    // User modifies the field values
+    await userEvent.type(screen.getByRole('textbox', {name: 'First Name'}), '1');
+    await userEvent.type(screen.getByRole('textbox', {name: 'Last Name'}), 'abc');
+
+    expect(model.fields.get('firstName')).toBe(`${initialData.firstName}1`);
+    expect(model.fields.get('lastName')).toBe(`${initialData.lastName}abc`);
+
+    // Hide fields (unmount with preserveOnUnmount)
+    await userEvent.click(screen.getByRole('button', {name: 'Toggle Fields'}));
+    expect(screen.queryByRole('textbox', {name: 'First Name'})).not.toBeInTheDocument();
+
+    // Fields values preserved, descriptors removed
+    expect(model.fields.get('firstName')).toBe(`${initialData.firstName}1`);
+    expect(model.fields.get('lastName')).toBe(`${initialData.lastName}abc`);
+    expect(model.fieldDescriptor.has('firstName')).toBe(false);
+    expect(model.fieldDescriptor.has('lastName')).toBe(false);
+
+    // initialData is preserved in model
+    expect(model.initialData.firstName).toBe(initialData.firstName);
+    expect(model.initialData.lastName).toBe(initialData.lastName);
+
+    // Show fields again (remount)
+    await userEvent.click(screen.getByRole('button', {name: 'Toggle Fields'}));
+
+    // Fields should be re-registered with preserved values
+    expect(model.fieldDescriptor.has('firstName')).toBe(true);
+    expect(model.fieldDescriptor.has('lastName')).toBe(true);
+    expect(model.fields.get('firstName')).toBe(`${initialData.firstName}1`);
+    expect(model.fields.get('lastName')).toBe(`${initialData.lastName}abc`);
+
+    // initialData should still be preserved
+    expect(model.initialData.firstName).toBe(initialData.firstName);
+    expect(model.initialData.lastName).toBe(initialData.lastName);
+  });
 });

static/app/components/forms/formField/index.tsx

@@ -123,6 +123,15 @@ interface BaseProps {
   onKeyDown?: (value: any, event: any) => void;
   placeholder?: ObservedFnOrValue<React.ReactNode>;
 
+  /**
+   * If this is true, the field value is preserved in the form model when the
+   * field is unmounted. This is useful for fields that might disappear and
+   * reappear.
+   *
+   * see {@link FormModel.softRemoveField}
+   */
+  preserveOnUnmount?: boolean;
+
   resetOnError?: boolean;
   /**
    * The message to display when saveOnBlur is false

static/app/components/forms/model.tsx

@@ -282,13 +282,29 @@ class FormModel {
    * Remove a field from the descriptor map and errors.
    */
   removeField(id: string) {
+    const descriptor = this.fieldDescriptor.get(id);
+    if (descriptor?.preserveOnUnmount) {
+      this.softRemoveField(id);
+      return;
+    }
+
     this.fields.delete(id);
     this.fieldState.delete(id);
     this.fieldDescriptor.delete(id);
     this.errors.delete(id);
     delete this.initialData[id];
   }
 
+  /**
+   * The field is no longer being rendered, but we still want to keep the value
+   * in the form model. Useful for fields that might disappear and reappear.
+   */
+  softRemoveField(id: string) {
+    this.fieldState.delete(id);
+    this.fieldDescriptor.delete(id);
+    this.errors.delete(id);
+  }
+
   /**
    * Creates a cloned Map of `this.fields` and returns a closure that when called
    * will save Map to `snapshots