Alerting: correctly show all alerts in a folder (#48684) (#48685)

(cherry picked from commit e04d8fca7b)

Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>

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

@@ -55,13 +55,21 @@ describe('AlertsFolderView tests', () => {
       rulesSource: GRAFANA_RULES_SOURCE_NAME,
       groups: [
         {
-          name: 'default',
+          name: 'group1',
           rules: [
             mockCombinedRule({ name: 'Test Alert 1' }),
             mockCombinedRule({ name: 'Test Alert 2' }),
             mockCombinedRule({ name: 'Test Alert 3' }),
           ],
         },
+        {
+          name: 'group2',
+          rules: [
+            mockCombinedRule({ name: 'Test Alert 4' }),
+            mockCombinedRule({ name: 'Test Alert 5' }),
+            mockCombinedRule({ name: 'Test Alert 6' }),
+          ],
+        },
       ],
     };
 
@@ -78,13 +86,16 @@ describe('AlertsFolderView tests', () => {
 
     // Assert
     const alertRows = ui.ruleList.row.queryAll();
-    expect(alertRows).toHaveLength(3);
+    expect(alertRows).toHaveLength(6);
     expect(alertRows[0]).toHaveTextContent('Test Alert 1');
     expect(alertRows[1]).toHaveTextContent('Test Alert 2');
     expect(alertRows[2]).toHaveTextContent('Test Alert 3');
+    expect(alertRows[3]).toHaveTextContent('Test Alert 4');
+    expect(alertRows[4]).toHaveTextContent('Test Alert 5');
+    expect(alertRows[5]).toHaveTextContent('Test Alert 6');
   });
 
-  it('Shold not display alert rules when the namespace name does not match the folder name', () => {
+  it('Should not display alert rules when the namespace name does not match the folder name', () => {
     // Arrange
     const store = configureStore();
     const folder = mockFolder();

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

@@ -56,7 +56,7 @@ export const AlertsFolderView = ({ folder }: Props) => {
     useAlertsFolderViewParams();
 
   const matchingNamespace = combinedNamespaces.find((namespace) => namespace.name === folder.title);
-  const alertRules = matchingNamespace?.groups[0]?.rules ?? [];
+  const alertRules = matchingNamespace?.groups.flatMap((group) => group.rules) ?? [];
 
   const filteredRules = filterAndSortRules(alertRules, nameFilter, labelFilter, sortOrder ?? SortOrder.Ascending);
 
@@ -177,7 +177,7 @@ function filterAndSortRules(
     (rule) => rule.name.toLowerCase().includes(nameFilter.toLowerCase()) && labelsMatchMatchers(rule.labels, matchers)
   );
 
-  return orderBy(rules, (x) => x.name, [sortOrder === SortOrder.Ascending ? 'asc' : 'desc']);
+  return orderBy(rules, (x) => x.name.toLowerCase(), [sortOrder === SortOrder.Ascending ? 'asc' : 'desc']);
 }
 
 export const getStyles = (theme: GrafanaTheme2) => ({