[v10.2.x] Alerting: Fix queries and expressions in rule view details. (#82875)

Alerting: Fix queries and expressions in rule view details. (#79497)

* fix queries and expressions in rule-view details

* Add test

(cherry picked from commit 6fffbe4e1c)

Co-authored-by: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>

public/app/features/alerting/unified/GrafanaRuleQueryViewer.test.tsx

@@ -0,0 +1,80 @@
+import { render } from '@testing-library/react';
+import { noop } from 'lodash';
+import React from 'react';
+
+import { DataSourceRef } from '@grafana/schema';
+import { AlertQuery } from 'app/types/unified-alerting-dto';
+
+import { GrafanaRuleQueryViewer } from './GrafanaRuleQueryViewer';
+
+describe('GrafanaRuleQueryViewer', () => {
+  it('renders without crashing', () => {
+    const getDataSourceQuery = (refId: string) => {
+      const query: AlertQuery = {
+        refId: refId,
+        datasourceUid: 'abc123',
+        queryType: '',
+        relativeTimeRange: {
+          from: 600,
+          to: 0,
+        },
+        model: {
+          refId: 'A',
+        },
+      };
+      return query;
+    };
+    const queries = [
+      getDataSourceQuery('A'),
+      getDataSourceQuery('B'),
+      getDataSourceQuery('C'),
+      getDataSourceQuery('D'),
+      getDataSourceQuery('E'),
+    ];
+
+    const getExpression = (refId: string, dsRef: DataSourceRef) => {
+      const expr = {
+        refId: refId,
+        datasourceUid: '__expr__',
+        queryType: '',
+        model: {
+          refId: refId,
+          type: 'classic_conditions',
+          datasource: dsRef,
+          conditions: [
+            {
+              type: 'query',
+              evaluator: {
+                params: [3],
+                type: 'gt',
+              },
+              operator: {
+                type: 'and',
+              },
+              query: {
+                params: ['A'],
+              },
+              reducer: {
+                params: [],
+                type: 'last',
+              },
+            },
+          ],
+        },
+      };
+      return expr;
+    };
+
+    const expressions = [
+      getExpression('A', { type: '' }),
+      getExpression('B', { type: '' }),
+      getExpression('C', { type: '' }),
+      getExpression('D', { type: '' }),
+    ];
+    const { getByTestId } = render(
+      <GrafanaRuleQueryViewer queries={[...queries, ...expressions]} condition="A" onTimeRangeChange={noop} />
+    );
+    expect(getByTestId('queries-container')).toHaveStyle('flex-wrap: wrap');
+    expect(getByTestId('expressions-container')).toHaveStyle('flex-wrap: wrap');
+  });
+});

public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import { DataSourceInstanceSettings, GrafanaTheme2, PanelData, RelativeTimeRange } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { Badge, useStyles2, Stack } from '@grafana/ui';
+import { Badge, Stack, useStyles2 } from '@grafana/ui';
 import { mapRelativeTimeRangeToOption } from '@grafana/ui/src/components/DateTimePickers/RelativeTimeRangePicker/utils';
 
 import { AlertQuery } from '../../../types/unified-alerting-dto';
@@ -14,8 +14,8 @@ import {
   downsamplingTypes,
   ExpressionQuery,
   ExpressionQueryType,
-  reducerModes,
   ReducerMode,
+  reducerModes,
   reducerTypes,
   thresholdFunctions,
   upsamplingTypes,
@@ -51,7 +51,7 @@ export function GrafanaRuleQueryViewer({
   return (
     <Stack gap={2} direction="column">
       <div className={styles.maxWidthContainer}>
-        <Stack gap={2}>
+        <Stack gap={2} wrap="wrap" data-testid="queries-container">
           {dataQueries.map(({ model, relativeTimeRange, refId, datasourceUid }, index) => {
             const dataSource = dsByUid[datasourceUid];
 
@@ -73,7 +73,7 @@ export function GrafanaRuleQueryViewer({
         </Stack>
       </div>
       <div className={styles.maxWidthContainer}>
-        <Stack gap={1}>
+        <Stack gap={1} wrap="wrap" data-testid="expressions-container">
           {expressions.map(({ model, refId, datasourceUid }, index) => {
             const dataSource = dsByUid[datasourceUid];