alerts: initialize a default variant for alerts (#105588)

Backend types alerts as any dict, and frontend wrongly types the props
are AlertProps.

When typed as unknown, the variant problem only shows up in the reported
view (the test verifies that the fix solve the issue)

Author: JonasBa

static/app/types/integrations.tsx

@@ -365,7 +365,14 @@ export type DocIntegration = {
 };
 
 type IntegrationAspects = {
-  alerts?: Array<AlertProps & {text: string; icon?: string | React.ReactNode}>;
+  // This was previously passed to us
+  alerts?: Array<
+    unknown & {
+      text: string;
+      icon?: string | React.ReactNode;
+      variant?: AlertProps['variant'];
+    }
+  >;
   configure_integration?: {
     title: string;
   };

static/app/views/settings/organizationIntegrations/detailedView/integrationLayout.tsx

@@ -254,7 +254,7 @@ function InformationCard({
           {permissions}
           {alerts.map((alert, i) => (
             <Alert.Container key={i}>
-              <Alert key={i} variant={alert.variant}>
+              <Alert variant={alert.variant}>
                 <span
                   dangerouslySetInnerHTML={{__html: singleLineRenderer(alert.text)}}
                 />
@@ -269,8 +269,8 @@ function InformationCard({
               <div>{author}</div>
             </AuthorInfo>
           )}
-          {resourceLinks.map(({title, url}) => (
-            <ExternalLinkContainer key={url}>
+          {resourceLinks.map(({title, url}, index) => (
+            <ExternalLinkContainer key={index}>
               <ResourceIcon title={title} />
               <ExternalLink href={url}>{title}</ExternalLink>
             </ExternalLinkContainer>

static/app/views/settings/organizationIntegrations/integrationDetailedView.spec.tsx

@@ -270,4 +270,50 @@ describe('IntegrationDetailedView', () => {
       );
     });
   });
+
+  it('renders alerts without crashing when variant is not provided', async () => {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/config/integrations/`,
+      match: [],
+      body: {
+        providers: [
+          {
+            canAdd: true,
+            canDisable: false,
+            features: [],
+            key: 'test-integration',
+            metadata: {
+              aspects: {
+                alerts: [
+                  {text: 'Alert without variant'},
+                  {text: 'Alert with explicit variant', variant: 'warning'},
+                ],
+              },
+              author: 'Test Author',
+              description: 'Test integration',
+              features: [],
+              noun: 'Installation',
+            },
+            name: 'Test Integration',
+            slug: 'test-integration',
+          },
+        ],
+      },
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/integrations/`,
+      match: [
+        MockApiClient.matchQuery({provider_key: 'test-integration', includeConfig: 0}),
+      ],
+      body: [],
+    });
+
+    render(<IntegrationDetailedView />, {
+      initialRouterConfig: createRouterConfig('test-integration'),
+      organization,
+    });
+
+    expect(await screen.findByText('Alert without variant')).toBeInTheDocument();
+    expect(await screen.findByText('Alert with explicit variant')).toBeInTheDocument();
+  });
 });

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

@@ -139,7 +139,13 @@ export default function IntegrationDetailedView() {
     // The server response for integration installations includes old icon CSS classes
     // We map those to the currently in use values to their react equivalents
     // and fallback to IconFlag just in case.
-    const alertList = provider?.metadata.aspects.alerts || [];
+    const alertList: AlertType[] = (provider?.metadata.aspects.alerts || []).map(
+      alert => ({
+        variant: alert.variant ?? 'muted',
+        text: alert.text,
+        icon: alert.icon,
+      })
+    );
 
     if (!provider?.canAdd && provider?.metadata.aspects.externalInstall) {
       alertList.push({