From f7c5ddfcfe854b5dc16ae825f6ac442da1762f4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <joshua.goldberg@sentry.io>
Date: Mon, 9 Mar 2026 10:49:43 -0400
Subject: [PATCH] ref(settings): convert IntegrationMainSettings from class to
 function component

---
 .../integrationMainSettings.tsx               | 100 +++++++-----------
 1 file changed, 41 insertions(+), 59 deletions(-)

diff --git a/static/app/views/settings/organizationIntegrations/integrationMainSettings.tsx b/static/app/views/settings/organizationIntegrations/integrationMainSettings.tsx
index a12f6471976129..578c3e703c1af0 100644
--- a/static/app/views/settings/organizationIntegrations/integrationMainSettings.tsx
+++ b/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;