ref(js): Remove various deprecatedforms components (#40368)

static/app/components/bases/pluginComponentBase.tsx

@@ -8,7 +8,8 @@ import {
   clearIndicators,
 } from 'sentry/actionCreators/indicator';
 import {Client} from 'sentry/api';
-import {FormState, GenericField} from 'sentry/components/deprecatedforms';
+import GenericField from 'sentry/components/deprecatedforms/genericField';
+import FormState from 'sentry/components/forms/state';
 import {t} from 'sentry/locale';
 
 const callbackWithArgs = function (context: any, callback: any, ...args: any) {
@@ -19,7 +20,7 @@ type GenericFieldProps = Parameters<typeof GenericField>[0];
 
 type Props = {};
 
-type State = {state: GenericFieldProps['formState']};
+type State = {state: FormState};
 
 class PluginComponentBase<
   P extends Props = Props,

static/app/components/customCommitsResolutionModal.tsx

@@ -2,7 +2,7 @@ import {useState} from 'react';
 
 import type {ModalRenderProps} from 'sentry/actionCreators/modal';
 import Button from 'sentry/components/button';
-import {SelectAsyncField} from 'sentry/components/deprecatedforms';
+import SelectAsyncField from 'sentry/components/deprecatedforms/selectAsyncField';
 import TimeSince from 'sentry/components/timeSince';
 import Version from 'sentry/components/version';
 import {t} from 'sentry/locale';

static/app/components/customResolutionModal.tsx

@@ -2,7 +2,7 @@ import {Fragment, useState} from 'react';
 
 import type {ModalRenderProps} from 'sentry/actionCreators/modal';
 import Button from 'sentry/components/button';
-import {SelectAsyncField} from 'sentry/components/deprecatedforms';
+import SelectAsyncField from 'sentry/components/deprecatedforms/selectAsyncField';
 import TimeSince from 'sentry/components/timeSince';
 import Version from 'sentry/components/version';
 import {t} from 'sentry/locale';

static/app/components/deprecatedforms/apiForm.tsx

@@ -1,95 +0,0 @@
-import {Children} from 'react';
-
-import {
-  addErrorMessage,
-  addLoadingMessage,
-  clearIndicators,
-} from 'sentry/actionCreators/indicator';
-import {APIRequestMethod, Client} from 'sentry/api';
-import Form from 'sentry/components/deprecatedforms/form';
-import FormField from 'sentry/components/deprecatedforms/formField';
-import FormState from 'sentry/components/forms/state';
-import {t} from 'sentry/locale';
-
-type Props = Form['props'] & {
-  apiEndpoint: string;
-  apiMethod: APIRequestMethod;
-  omitDisabled?: boolean;
-  onSubmit?: (data: object) => void;
-  submitErrorMessage?: string;
-  submitLoadingMessage?: string;
-};
-
-export default class ApiForm extends Form<Props> {
-  api = new Client();
-
-  static defaultProps = {
-    ...Form.defaultProps,
-    omitDisabled: false, // TODO(chadwhitacre) Upstream, flip to true, deprecate.
-    submitErrorMessage: t('There was an error saving your changes.'),
-    submitLoadingMessage: t('Saving changes\u2026'),
-  };
-
-  componentWillUnmount() {
-    this.api.clear();
-  }
-
-  getEnabledData() {
-    // Return a hash of data from non-disabled fields.
-
-    // Start with this.state.data and remove rather than starting from scratch
-    // and adding, because a) this.state.data is our source of truth, and b)
-    // we'd have to do more work to loop over the state.data Object and lookup
-    // against the props.children Array (looping over the Array and looking up
-    // in the Object is more natural). Maybe the consequent use of delete
-    // carries a slight performance hit. Why is yer form so big? 🤔
-
-    const data = {...this.state.data}; // Copy to avoid mutating state.data itself.
-    Children.forEach(this.props.children, (child: any) => {
-      if (!FormField.isPrototypeOf(child.type)) {
-        return; // Form children include h4's, etc.
-      }
-      if (child.key && child.props?.disabled) {
-        delete data[child.key]; // Assume a link between child.key and data. 🐭
-      }
-    });
-    return data;
-  }
-
-  onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    if (this.state.state === FormState.SAVING) {
-      return;
-    }
-
-    // Actual HTML forms do not submit data for disabled fields, and because of
-    // the way some of our APIs are implemented, we need to start doing the
-    // same. But, since some other parts of the app very probably depend on
-    // sending disabled fields, keep that the default for now.
-    // TODO(chadwhitacre): Expand and upstream this.
-    const data = this.props.omitDisabled ? this.getEnabledData() : this.state.data;
-
-    this.props.onSubmit && this.props.onSubmit(data);
-    this.setState(
-      {
-        state: FormState.SAVING,
-      },
-      () => {
-        addLoadingMessage(this.props.submitLoadingMessage);
-        this.api.request(this.props.apiEndpoint, {
-          method: this.props.apiMethod,
-          data,
-          success: result => {
-            clearIndicators();
-            this.onSubmitSuccess(result);
-          },
-          error: error => {
-            addErrorMessage(this.props.submitErrorMessage);
-            this.onSubmitError(error);
-          },
-        });
-      }
-    );
-  };
-}

static/app/components/deprecatedforms/booleanField.spec.jsx

@@ -1,6 +1,7 @@
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
-import {BooleanField, Form} from 'sentry/components/deprecatedforms';
+import BooleanField from 'sentry/components/deprecatedforms/booleanField';
+import Form from 'sentry/components/deprecatedforms/form';
 
 describe('BooleanField', function () {
   it('renders without form context', function () {

static/app/components/deprecatedforms/booleanField.tsx

@@ -9,6 +9,11 @@ type State = InputField['state'] & {
   value: boolean;
 };
 
+// XXX: This is ONLY used in GenericField. If we can delete that this can go.
+
+/**
+ * @deprecated Do not use this
+ */
 export default class BooleanField extends InputField<Props, State> {
   coerceValue(initialValue: string | number) {
     const value = super.coerceValue(initialValue);

static/app/components/deprecatedforms/emailField.spec.jsx

@@ -1,6 +1,7 @@
 import {render} from 'sentry-test/reactTestingLibrary';
 
-import {EmailField, Form} from 'sentry/components/deprecatedforms';
+import EmailField from 'sentry/components/deprecatedforms/emailField';
+import Form from 'sentry/components/deprecatedforms/form';
 
 describe('EmailField', function () {
   describe('render()', function () {

static/app/components/deprecatedforms/emailField.tsx

@@ -1,5 +1,10 @@
 import InputField from 'sentry/components/deprecatedforms/inputField';
 
+// XXX: This is ONLY used in GenericField. If we can delete that this can go.
+
+/**
+ * @deprecated Do not use this
+ */
 export default class EmailField extends InputField {
   getType() {
     return 'email';

static/app/components/deprecatedforms/form.spec.jsx

@@ -1,6 +1,6 @@
 import {render} from 'sentry-test/reactTestingLibrary';
 
-import {Form} from 'sentry/components/deprecatedforms';
+import Form from 'sentry/components/deprecatedforms/form';
 
 describe('Form', function () {
   describe('render()', function () {

static/app/components/deprecatedforms/genericField.spec.tsx

@@ -1,6 +1,7 @@
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import {FormState, GenericField} from 'sentry/components/deprecatedforms';
+import GenericField from 'sentry/components/deprecatedforms/genericField';
+import FormState from 'sentry/components/forms/state';
 
 describe('GenericField', function () {
   it('renders text as TextInput', function () {