Fix Non-Admin Add GH Org button for org selector (#103127)

This PR refactors the recent change of updating the org selector's link
button to match the integration settings page's GH app installation
button (#102680). The most
recent change used inner components of the IntegrationButton component
in order to use the integration settings "Add installation" button and
modified the styling to be the clear button designated in the Figma.
However, for non-admins who did not have access, clicking on the button
would just pop out the new window and redirect back to the prevent/tests
page with a error toast (if they were already GH authenticated) since
they wouldn't have proper permissions.

Author: calvin-codecov

static/app/components/prevent/integratedOrgSelector/integratedOrgSelector.tsx

@@ -1,7 +1,7 @@
 import {useCallback, useMemo} from 'react';
 import styled from '@emotion/styled';
 
-import {Button} from 'sentry/components/core/button';
+import Access from 'sentry/components/acl/access';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import type {SelectOption} from 'sentry/components/core/compactSelect';
 import {CompactSelect} from 'sentry/components/core/compactSelect';
@@ -14,19 +14,20 @@ import {usePreventContext} from 'sentry/components/prevent/context/preventContex
 import {integratedOrgIdToName} from 'sentry/components/prevent/utils';
 import {IconAdd, IconBuilding, IconInfo} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
-import type {IntegrationWithConfig} from 'sentry/types/integrations';
+import type {Integration} from 'sentry/types/integrations';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useGetActiveIntegratedOrgs} from 'sentry/views/prevent/tests/queries/useGetActiveIntegratedOrgs';
-import AddIntegration from 'sentry/views/settings/organizationIntegrations/addIntegration';
+import IntegrationButton from 'sentry/views/settings/organizationIntegrations/integrationButton';
+import {IntegrationContext} from 'sentry/views/settings/organizationIntegrations/integrationContext';
 import type {IntegrationInformation} from 'sentry/views/settings/organizationIntegrations/integrationDetailedView';
 
 const DEFAULT_ORG_LABEL = 'Select GitHub Org';
 
 function OrgFooterMessage() {
   const organization = useOrganization();
 
-  const handleAddIntegration = useCallback((_integration: IntegrationWithConfig) => {
+  const handleAddIntegration = useCallback((_integration: Integration) => {
     window.location.reload();
   }, []);
 
@@ -46,7 +47,10 @@ function OrgFooterMessage() {
       }
     );
 
+  const {data: installedIntegrations = []} = useGetActiveIntegratedOrgs({organization});
+
   const provider = integrationInfo?.providers[0];
+  const hasInstalledIntegration = installedIntegrations.length > 0;
 
   return (
     <Flex gap="sm" direction="column" align="start">
@@ -70,22 +74,31 @@ function OrgFooterMessage() {
       {isIntegrationInfoPending ? (
         <LoadingIndicator />
       ) : provider ? (
-        <AddIntegration
-          provider={provider}
-          onInstall={handleAddIntegration}
-          organization={organization}
+        <IntegrationContext
+          value={{
+            provider,
+            type: 'first_party',
+            installStatus: hasInstalledIntegration ? 'Installed' : 'Not Installed',
+            analyticsParams: {
+              view: 'test_analytics_org_selector',
+              already_installed: hasInstalledIntegration,
+            },
+          }}
         >
-          {openDialog => (
-            <Button
-              size="xs"
-              icon={<IconAdd />}
-              priority="default"
-              onClick={() => openDialog()}
-            >
-              {t('GitHub Organization')}
-            </Button>
-          )}
-        </AddIntegration>
+          <Access access={['org:integrations']} organization={organization}>
+            {({hasAccess}) => (
+              <IntegrationButton
+                userHasAccess={hasAccess}
+                onAddIntegration={handleAddIntegration}
+                onExternalClick={() => {}}
+                buttonProps={{
+                  size: 'sm',
+                  priority: 'primary',
+                }}
+              />
+            )}
+          </Access>
+        </IntegrationContext>
       ) : (
         <LinkButton
           href="https://github.com/apps/sentry/installations/select_target"

static/app/utils/analytics/integrations/index.ts

@@ -19,7 +19,8 @@ export type IntegrationView = {
     | 'project_creation'
     | 'developer_settings'
     | 'new_integration_modal'
-    | 'test_analytics_onboarding';
+    | 'test_analytics_onboarding'
+    | 'test_analytics_org_selector';
 };
 
 type SingleIntegrationEventParams = {

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

@@ -23,7 +23,8 @@ type Props = {
       | 'integrations_directory'
       | 'onboarding'
       | 'project_creation'
-      | 'test_analytics_onboarding';
+      | 'test_analytics_onboarding'
+      | 'test_analytics_org_selector';
   };
   modalParams?: Record<string, string>;
 };

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

@@ -12,7 +12,8 @@ type IntegrationContextProps = {
       | 'integrations_directory'
       | 'onboarding'
       | 'project_creation'
-      | 'test_analytics_onboarding';
+      | 'test_analytics_onboarding'
+      | 'test_analytics_org_selector';
     referrer?: string;
   };
   installStatus: string;