ref(settings): convert IntegrationMainSettings from class to function component

static/app/views/settings/organizationIntegrations/integrationMainSettings.tsx

@@ -1,9 +1,8 @@
-import {Component} from 'react';
+import {useState} from 'react';
 
 import {addSuccessMessage} from 'sentry/actionCreators/indicator';
 import Form from 'sentry/components/forms/form';
 import JsonForm from 'sentry/components/forms/jsonForm';
-import type {Field} from 'sentry/components/forms/types';
 import {t} from 'sentry/locale';
 import type {Integration} from 'sentry/types/integrations';
 import type {Organization} from 'sentry/types/organization';
@@ -14,63 +13,46 @@ type Props = {
   organization: Organization;
 };
 
-type State = {
-  integration: Integration;
-};
-
-class IntegrationMainSettings extends Component<Props, State> {
-  state: State = {
-    integration: this.props.integration,
-  };
-
-  handleSubmitSuccess = (data: Integration) => {
-    addSuccessMessage(t('Integration updated.'));
-    this.props.onUpdate();
-    this.setState({integration: data});
-  };
-
-  get initialData() {
-    const {integration} = this.props;
-
-    return {
-      name: integration.name,
-      domain: integration.domainName || '',
-    };
-  }
-
-  get formFields(): Field[] {
-    const fields: any[] = [
-      {
-        name: 'name',
-        type: 'string',
-        required: false,
-        label: t('Integration Name'),
-      },
-      {
-        name: 'domain',
-        type: 'string',
-        required: false,
-        label: t('Full URL'),
-      },
-    ];
-    return fields;
-  }
-
-  render() {
-    const {integration} = this.state;
-    const {organization} = this.props;
-    return (
-      <Form
-        initialData={this.initialData}
-        apiMethod="PUT"
-        apiEndpoint={`/organizations/${organization.slug}/integrations/${integration.id}/`}
-        onSubmitSuccess={this.handleSubmitSuccess}
-        submitLabel={t('Save Settings')}
-      >
-        <JsonForm fields={this.formFields} />
-      </Form>
-    );
-  }
+function IntegrationMainSettings({
+  integration: integrationInitial,
+  organization,
+  onUpdate,
+}: Props) {
+  const [integration, setIntegration] = useState(integrationInitial);
+
+  return (
+    <Form
+      initialData={{
+        name: integration.name,
+        domain: integration.domainName || '',
+      }}
+      apiMethod="PUT"
+      apiEndpoint={`/organizations/${organization.slug}/integrations/${integration.id}/`}
+      onSubmitSuccess={data => {
+        addSuccessMessage(t('Integration updated.'));
+        onUpdate();
+        setIntegration(data);
+      }}
+      submitLabel={t('Save Settings')}
+    >
+      <JsonForm
+        fields={[
+          {
+            name: 'name',
+            type: 'string',
+            required: false,
+            label: t('Integration Name'),
+          },
+          {
+            name: 'domain',
+            type: 'string',
+            required: false,
+            label: t('Full URL'),
+          },
+        ]}
+      />
+    </Form>
+  );
 }
 
 export default IntegrationMainSettings;