ref(alert): import alertprops (#52443)

These were already imported in some places + we can drop importing the
Alert module in favour of import type in some places

static/app/components/forms/formField/index.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react';
 import {Observer} from 'mobx-react';
 
-import {Alert} from 'sentry/components/alert';
+import type {AlertProps} from 'sentry/components/alert';
 import {Button} from 'sentry/components/button';
 import PanelAlert from 'sentry/components/panels/panelAlert';
 import {t} from 'sentry/locale';
@@ -130,7 +130,7 @@ interface BaseProps {
   /**
    * The alert type to use when saveOnBlur is false
    */
-  saveMessageAlertType?: React.ComponentProps<typeof Alert>['type'];
+  saveMessageAlertType?: AlertProps['type'];
   /**
    * When the field is blurred should it automatically persist its value into
    * the model. Will show a confirm button 'save' otherwise.

static/app/components/forms/types.tsx

@@ -1,6 +1,6 @@
 import {createFilter} from 'react-select';
 
-import {Alert} from 'sentry/components/alert';
+import type {AlertProps} from 'sentry/components/alert';
 import RangeSlider from 'sentry/components/forms/controls/rangeSlider';
 import {ChoiceMapperProps} from 'sentry/components/forms/fields/choiceMapperField';
 import {SelectAsyncFieldProps} from 'sentry/components/forms/fields/selectAsyncField';
@@ -80,7 +80,7 @@ interface BaseField {
   resetsForm?: boolean;
   rows?: number;
   saveMessage?: React.ReactNode | ((params: {value: FieldValue}) => string);
-  saveMessageAlertType?: React.ComponentProps<typeof Alert>['type'];
+  saveMessageAlertType?: AlertProps['type'];
   /**
    * If false, disable saveOnBlur for field, instead show a save/cancel button
    */

static/app/components/onboarding/documentationWrapper.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 
-import {Alert, alertStyles} from 'sentry/components/alert';
+import {AlertProps, alertStyles} from 'sentry/components/alert';
 import {space} from 'sentry/styles/space';
 
-type AlertType = React.ComponentProps<typeof Alert>['type'];
+type AlertType = AlertProps['type'];
 
 const getAlertSelector = (type: AlertType) =>
   type === 'muted' ? null : `.alert[level="${type}"], .alert-${type}`;

static/app/components/panels/panelAlert.tsx

@@ -1,11 +1,12 @@
 import styled from '@emotion/styled';
 
+import type {AlertProps} from 'sentry/components/alert';
 import {Alert} from 'sentry/components/alert';
 
-type Props = React.ComponentProps<typeof Alert>;
-
 // Margin bottom should probably be a different prop
-const PanelAlert = styled(({...props}: Props) => <Alert {...props} showIcon system />)`
+const PanelAlert = styled(({...props}: AlertProps) => (
+  <Alert {...props} showIcon system />
+))`
   margin: 0 0 1px 0;
   border-radius: 0;
   box-shadow: none;

static/app/components/previewFeature.tsx

@@ -1,8 +1,9 @@
+import type {AlertProps} from 'sentry/components/alert';
 import {Alert} from 'sentry/components/alert';
 import {t} from 'sentry/locale';
 
 type Props = {
-  type?: React.ComponentProps<typeof Alert>['type'];
+  type?: AlertProps['type'];
 };
 
 function PreviewFeature({type = 'info'}: Props) {

static/app/components/stream/processingIssueHint.tsx

@@ -1,7 +1,7 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
-import {Alert} from 'sentry/components/alert';
+import {Alert, AlertProps} from 'sentry/components/alert';
 import {Button} from 'sentry/components/button';
 import TimeSince from 'sentry/components/timeSince';
 import {t, tct, tn} from 'sentry/locale';
@@ -20,7 +20,7 @@ function ProcessingIssueHint({orgId, projectId, issue, showProject}: Props) {
   let showButton = false;
   let text = '';
   let lastEvent: React.ReactNode = null;
-  let alertType: React.ComponentProps<typeof Alert>['type'] = 'error';
+  let alertType: AlertProps['type'] = 'error';
 
   let project: React.ReactNode = null;
   if (showProject) {

static/app/types/integrations.tsx

@@ -1,4 +1,4 @@
-import type {Alert} from 'sentry/components/alert';
+import type {AlertProps} from 'sentry/components/alert';
 import type {Field} from 'sentry/components/forms/types';
 import type {PlatformKey} from 'sentry/data/platformCategories';
 import type {
@@ -312,9 +312,7 @@ export type DocIntegration = {
 };
 
 type IntegrationAspects = {
-  alerts?: Array<
-    React.ComponentProps<typeof Alert> & {text: string; icon?: string | React.ReactNode}
-  >;
+  alerts?: Array<AlertProps & {text: string; icon?: string | React.ReactNode}>;
   configure_integration?: {
     title: string;
   };

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

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import startCase from 'lodash/startCase';
 
 import Access from 'sentry/components/acl/access';
-import {Alert} from 'sentry/components/alert';
+import {Alert, AlertProps} from 'sentry/components/alert';
 import AsyncComponent from 'sentry/components/asyncComponent';
 import EmptyMessage from 'sentry/components/emptyMessage';
 import ExternalLink from 'sentry/components/links/externalLink';
@@ -38,9 +38,9 @@ import IntegrationStatus from './integrationStatus';
 
 type Tab = 'overview' | 'configurations';
 
-type AlertType = React.ComponentProps<typeof Alert> & {
+interface AlertType extends AlertProps {
   text: string;
-};
+}
 
 type State = {
   tab: Tab;

static/app/views/settings/projectIssueGrouping/utils.tsx

@@ -1,4 +1,4 @@
-import {Alert} from 'sentry/components/alert';
+import type {AlertProps} from 'sentry/components/alert';
 import {t} from 'sentry/locale';
 import {EventGroupingConfig, Project} from 'sentry/types';
 
@@ -41,7 +41,7 @@ export function getGroupingChanges(
 }
 
 export function getGroupingRisk(riskLevel: number): {
-  alertType: React.ComponentProps<typeof Alert>['type'];
+  alertType: AlertProps['type'];
   riskNote: React.ReactNode;
 } {
   switch (riskLevel) {