fix(prevent): Use disabled tag for toggle instead of tooltip (#100331)

Use the "disabled" tag that looks like the one on the Codecov toggle
instead of current tooltip only behavior.

Tooltip when self-hosted:
<img width="616" height="201" alt="Screenshot 2025-09-25 at 12 04 25 PM"
src="https://github.com/user-attachments/assets/dcaf5b66-50be-4353-b205-73a0baa0af12"
/>

Tooltip when non-US region:
<img width="743" height="282" alt="Screenshot 2025-09-25 at 12 02 46 PM"
src="https://github.com/user-attachments/assets/379d29e1-24af-43f0-9614-5da98cde25c2"
/>

Example of the one on the Codecov toggle (not touched, just here as
comparison):
<img width="728" height="630" alt="Screenshot 2025-09-25 at 12 02 42 PM"
src="https://github.com/user-attachments/assets/fcb79cc3-05c2-4885-b798-5b149f506b7b"
/>

Note I had the beta one change from position: right to position: top
when there are both tags so the 2 behave same when side-by-side
<img width="721" height="257" alt="Screenshot 2025-09-25 at 12 02 52 PM"
src="https://github.com/user-attachments/assets/4b46b6f3-f483-4c9f-bc0a-37b609fffe82"
/>

Old version being replaced:
<img width="679" height="141" alt="Screenshot 2025-09-25 at 1 41 24 PM"
src="https://github.com/user-attachments/assets/8b7d622b-8b7f-4958-b047-8bbcff840b1a"
/>

Author: suejung-sentry

static/app/views/settings/organizationGeneralSettings/organizationSettingsForm.spec.tsx

@@ -5,6 +5,7 @@ import {act, render, screen, userEvent, waitFor} from 'sentry-test/reactTestingL
 
 import * as formIndicatorActions from 'sentry/components/forms/formIndicators';
 import Indicators from 'sentry/components/indicators';
+import ConfigStore from 'sentry/stores/configStore';
 import * as RegionUtils from 'sentry/utils/regions';
 import OrganizationSettingsForm from 'sentry/views/settings/organizationGeneralSettings/organizationSettingsForm';
 
@@ -357,9 +358,10 @@ describe('OrganizationSettingsForm', () => {
       });
       expect(preventAiField).toBeInTheDocument();
       expect(preventAiField).toBeEnabled();
+      expect(screen.queryByTestId('prevent-ai-disabled-tag')).not.toBeInTheDocument();
     });
 
-    it('is disabled when non US region', () => {
+    it('is disabled when non US region', async () => {
       jest.mocked(RegionUtils.getRegionDataFromOrganization).mockReturnValue({
         name: 'de',
         displayName: 'Europe (Frankfurt)',
@@ -379,6 +381,14 @@ describe('OrganizationSettingsForm', () => {
       });
       expect(preventAiField).toBeInTheDocument();
       expect(preventAiField).toBeDisabled();
+
+      // Hover over the disabled tag to show the tooltip
+      const disabledTag = screen.getByTestId('prevent-ai-disabled-tag');
+      expect(disabledTag).toBeInTheDocument();
+      await userEvent.hover(disabledTag);
+      expect(
+        await screen.findByText('This feature is only available in the US region')
+      ).toBeInTheDocument();
     });
 
     it('is enabled when user is an admin (has org:write access)', () => {
@@ -409,6 +419,7 @@ describe('OrganizationSettingsForm', () => {
       });
       expect(preventAiField).toBeInTheDocument();
       expect(preventAiField).toBeEnabled();
+      expect(screen.queryByTestId('prevent-ai-disabled-tag')).not.toBeInTheDocument();
     });
 
     it('is disabled when user is a member (does not have org:write access)', async () => {
@@ -438,6 +449,40 @@ describe('OrganizationSettingsForm', () => {
       });
       expect(preventAiField).toBeInTheDocument();
       expect(preventAiField).toBeDisabled();
+      expect(screen.queryByTestId('prevent-ai-disabled-tag')).not.toBeInTheDocument();
+    });
+
+    it('is disabled when self-hosted', async () => {
+      ConfigStore.set('isSelfHosted', true);
+
+      render(
+        <OrganizationSettingsForm
+          {...routerProps}
+          initialData={OrganizationFixture({
+            hideAiFeatures: true,
+          })}
+          onSave={onSave}
+        />,
+        {
+          organization: {
+            access: ['org:write'],
+          },
+        }
+      );
+
+      const preventAiField = screen.getByRole('checkbox', {
+        name: /Enable AI Code Review/i,
+      });
+      expect(preventAiField).toBeInTheDocument();
+      expect(preventAiField).toBeDisabled();
+
+      // Hover over the disabled tag to show the tooltip
+      const disabledTag = screen.getByTestId('prevent-ai-disabled-tag');
+      expect(disabledTag).toBeInTheDocument();
+      await userEvent.hover(disabledTag);
+      expect(
+        await screen.findByText('This feature is not available for self-hosted instances')
+      ).toBeInTheDocument();
     });
   });
 });

static/app/views/settings/organizationGeneralSettings/preventAiSettings.tsx

@@ -1,20 +1,48 @@
 import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
+import {Tag} from 'sentry/components/core/badge/tag';
+import {Flex} from 'sentry/components/core/layout';
 import {ExternalLink} from 'sentry/components/core/link';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import type {FieldObject} from 'sentry/components/forms/types';
+import {IconLock} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
+import ConfigStore from 'sentry/stores/configStore';
 import type {Organization} from 'sentry/types/organization';
 import {getRegionDataFromOrganization} from 'sentry/utils/regions';
 
 export const makePreventAiField = (organization: Organization): FieldObject => {
   const regionData = getRegionDataFromOrganization(organization);
-  const isUSOrg = regionData?.name === 'us';
+  const isUSOrg = regionData?.name?.toLowerCase() === 'us';
+  const isSelfHosted = ConfigStore.get('isSelfHosted');
+
+  const isDisabled = isSelfHosted || !isUSOrg;
+  const disabledReason = isSelfHosted
+    ? t('This feature is not available for self-hosted instances')
+    : t('This feature is only available in the US region');
 
   return {
     name: 'enablePrReviewTestGeneration',
     type: 'boolean',
-    label: tct('Enable AI Code Review [badge]', {
-      badge: <FeatureBadge type="beta" style={{marginBottom: '2px'}} />,
-    }),
+    label: (
+      <Flex gap="sm" align="center">
+        {t('Enable AI Code Review')}
+        <FeatureBadge
+          type="beta"
+          {...(isDisabled ? {tooltipProps: {position: 'top'}} : {})}
+        />
+        {isDisabled && (
+          <Tooltip title={disabledReason} position="top">
+            <Tag
+              role="status"
+              icon={<IconLock locked />}
+              data-test-id="prevent-ai-disabled-tag"
+            >
+              {t('disabled')}
+            </Tag>
+          </Tooltip>
+        )}
+      </Flex>
+    ),
     help: tct(
       'Use AI to review, find bugs, and generate tests in pull requests [link:Learn more]',
       {
@@ -28,9 +56,6 @@ export const makePreventAiField = (organization: Organization): FieldObject => {
       const hideAiFeatures = model.getValue('hideAiFeatures');
       return hideAiFeatures;
     },
-    disabled: ({access}) => !isUSOrg || !access.has('org:write'),
-    disabledReason: isUSOrg
-      ? null
-      : t('AI Code Review is only available in the US region'),
+    disabled: ({access}) => isDisabled || !access.has('org:write'),
   };
 };