fix(alerts-migration): Align icons in list (#60079)

Author: ArthurKnaus

static/app/views/alerts/list/rules/alertRulesList.tsx

@@ -195,6 +195,10 @@ function AlertRulesList() {
     <IconArrow color="gray300" size="xs" direction={sort.asc ? 'up' : 'down'} />
   );
 
+  const rulesWithMigrationWarnings = new Set(
+    ruleList.filter(rule => hasMigrationUIFeatureFlag && ruleNeedsMigration(rule))
+  );
+
   return (
     <Fragment>
       <SentryDocumentTitle title={t('Alerts')} orgSlug={organization.slug} />
@@ -278,9 +282,8 @@ function AlertRulesList() {
                         key={`${
                           isIssueAlert(rule) ? AlertRuleType.METRIC : AlertRuleType.ISSUE
                         }-${rule.id}`}
-                        showMigrationWarning={
-                          hasMigrationUIFeatureFlag && ruleNeedsMigration(rule)
-                        }
+                        showMigrationWarning={rulesWithMigrationWarnings.has(rule)}
+                        listHasMigrationWarnings={rulesWithMigrationWarnings.size > 0}
                         projectsLoaded={initiallyLoaded}
                         projects={projects as Project[]}
                         rule={rule}

static/app/views/alerts/list/rules/row.tsx

@@ -43,6 +43,7 @@ import {isIssueAlert} from '../../utils';
 
 type Props = {
   hasEditAccess: boolean;
+  listHasMigrationWarnings: boolean;
   onDelete: (projectId: string, rule: CombinedMetricIssueAlerts) => void;
   onOwnerChange: (
     projectId: string,
@@ -65,6 +66,7 @@ function RuleListRow({
   onOwnerChange,
   hasEditAccess,
   showMigrationWarning,
+  listHasMigrationWarnings,
 }: Props) {
   const {teams: userTeams} = useUserTeams();
   const [assignee, setAssignee] = useState<string>('');
@@ -319,13 +321,15 @@ function RuleListRow({
     <ErrorBoundary>
       <AlertNameWrapper isIssueAlert={isIssueAlert(rule)}>
         <FlexCenter>
-          {showMigrationWarning && (
+          {showMigrationWarning ? (
             <Tooltip
               title={t('The current thresholds for this alert could use some review')}
             >
               <StyledIconWarning />
             </Tooltip>
-          )}
+          ) : listHasMigrationWarnings ? (
+            <WarningPlaceholder />
+          ) : null}
           <Tooltip
             title={
               isIssueAlert(rule)
@@ -534,4 +538,10 @@ const StyledIconWarning = styled(IconWarning)`
   color: ${p => p.theme.yellow400};
 `;
 
+const WarningPlaceholder = styled('div')`
+  margin-right: ${space(1)};
+  width: 16px;
+  flex-shrink: 0;
+`;
+
 export default RuleListRow;