feat(integration): banner for disabled integrations (#54466)

<!-- Describe your PR here. -->
<img width="986" alt="Screenshot 2023-08-09 at 10 49 05 AM"
src="https://github.com/getsentry/sentry/assets/56209417/36c7be76-8c47-4a04-aed2-544ac10186e1">

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

@@ -45,6 +45,7 @@ import withOrganization from 'sentry/utils/withOrganization';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
 import PermissionAlert from 'sentry/views/settings/organization/permissionAlert';
 import CreateIntegrationButton from 'sentry/views/settings/organizationIntegrations/createIntegrationButton';
+import ReinstallAlert from 'sentry/views/settings/organizationIntegrations/reinstallAlert';
 
 import {POPULARITY_WEIGHT} from './constants';
 import IntegrationRow from './integrationRow';
@@ -505,15 +506,13 @@ export class IntegrationListDirectory extends DeprecatedAsyncComponent<
 
   renderBody() {
     const {organization} = this.props;
-    const {displayedList, list, searchInput, selectedCategory} = this.state;
-
+    const {displayedList, list, searchInput, selectedCategory, integrations} = this.state;
     const title = t('Integrations');
     const categoryList = uniq(flatten(list.map(getCategoriesForIntegration))).sort();
 
     return (
       <Fragment>
         <SentryDocumentTitle title={title} orgSlug={organization.slug} />
-
         {!this.props.hideHeader && (
           <SettingsPageHeader
             title={title}
@@ -544,8 +543,8 @@ export class IntegrationListDirectory extends DeprecatedAsyncComponent<
             action={<CreateIntegrationButton analyticsView="integrations_directory" />}
           />
         )}
-
         <PermissionAlert access={['org:integrations']} />
+        <ReinstallAlert integrations={integrations} />
         <Panel>
           <PanelBody data-test-id="integration-panel">
             {displayedList.length ? (

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

@@ -0,0 +1,22 @@
+import {Alert} from 'sentry/components/alert';
+import {t} from 'sentry/locale';
+import {Integration} from 'sentry/types';
+import {getIntegrationStatus} from 'sentry/utils/integrationUtil';
+
+type Props = {
+  integrations: Integration[] | null;
+};
+
+function ReinstallAlert({integrations = []}: Props) {
+  const statusList = integrations?.map(getIntegrationStatus);
+  if (statusList?.includes('disabled')) {
+    return (
+      <Alert data-test-id="disabled-alert" type="warning" showIcon>
+        {t('Reinstall required for disabled integrations.')}
+      </Alert>
+    );
+  }
+  return null;
+}
+
+export default ReinstallAlert;