Alerting: Improve group view loading button state (#106922)

public/app/features/alerting/unified/rule-list/GroupedView.test.tsx

@@ -38,7 +38,7 @@ beforeEach(() => {
 const ui = {
   dsSection: (ds: string | RegExp) => byRole('listitem', { name: ds }),
   namespace: (ns: string | RegExp) => byRole('treeitem', { name: ns }),
-  group: (group: string | RegExp) => byRole('treeitem', { name: group }),
+  group: (group: string | RegExp) => byRole('link', { name: group }),
   loadMoreButton: () => byRole('button', { name: /Show more/i }),
 };
 
@@ -90,24 +90,26 @@ describe('RuleList - GroupedView', () => {
 
     const prometheusSection = await ui.dsSection(/Prometheus/).find();
     const promNamespace = await ui.namespace(/test-prometheus-namespace/).find(prometheusSection);
+    const loadMoreButton = ui.loadMoreButton();
 
     // initial load – should have all groups 1-40
-    await ui.group(/test-group-([1-9]|[1-3][0-9]|40)/).findAll(promNamespace);
+    await ui.group('test-group-40').find(promNamespace);
 
     // fetch page 2
-    const loadMoreButton = await ui.loadMoreButton().find(prometheusSection);
-    await waitFor(() => expect(loadMoreButton).toBeEnabled());
-
+    await user.click(await loadMoreButton.find(prometheusSection));
     // we should now have all groups 1-80
-    await ui.group(/test-group-([1-9]|[1-7][0-9]|80)/).findAll(promNamespace);
+    await ui.group('test-group-80').find(promNamespace);
 
-    // fetch third page
-    await waitFor(() => expect(loadMoreButton).toBeEnabled());
-    await user.click(loadMoreButton);
+    // fetch page 3
+    await user.click(await loadMoreButton.find(prometheusSection));
+    // we should now have all groups 1-120
+    await ui.group('test-group-120').find(promNamespace);
 
+    // fetch page 4
+    await user.click(await loadMoreButton.find(prometheusSection));
     // we should now have all groups 1-130
-    await ui.group(/test-group-([1-9]|[1-9][0-9]|1[0-2][0-9]|130)/).findAll(promNamespace);
+    await ui.group('test-group-130').find(promNamespace);
 
-    expect(loadMoreButton).not.toBeInTheDocument();
+    expect(loadMoreButton.query(prometheusSection)).not.toBeInTheDocument();
   });
 });

public/app/features/alerting/unified/rule-list/PaginatedDataSourceLoader.tsx

@@ -1,8 +1,7 @@
 import { groupBy, isEmpty } from 'lodash';
 import { useEffect, useMemo, useRef } from 'react';
 
-import { Trans } from '@grafana/i18n';
-import { Icon, Spinner, Stack, Text } from '@grafana/ui';
+import { Icon, Stack, Text } from '@grafana/ui';
 import { DataSourceRuleGroupIdentifier, DataSourceRulesSourceIdentifier, RuleGroup } from 'app/types/unified-alerting';
 import { PromRuleGroupDTO } from 'app/types/unified-alerting-dto';
 
@@ -117,15 +116,9 @@ function PaginatedGroupsLoader({ rulesSourceIdentifier, application, groupFilter
         {hasMoreGroups && (
           // this div will make the button not stretch
           <div>
-            <LoadMoreButton onClick={fetchMoreGroups} />
+            <LoadMoreButton loading={isLoading} onClick={fetchMoreGroups} />
           </div>
         )}
-        {isLoading && (
-          <Stack direction="row" gap={2} alignItems="baseline" justifyContent="flex-start">
-            <Spinner inline={true} />
-            <Trans i18nKey="alerting.rule-list.loading-more-groups">Loading more groups...</Trans>
-          </Stack>
-        )}
         {hasNoRules && <NoRulesFound />}
       </Stack>
     </DataSourceSection>

public/app/features/alerting/unified/rule-list/PaginatedGrafanaLoader.tsx

@@ -1,8 +1,7 @@
 import { groupBy, isEmpty } from 'lodash';
 import { useEffect, useMemo, useRef } from 'react';
 
-import { Trans } from '@grafana/i18n';
-import { Icon, Spinner, Stack, Text } from '@grafana/ui';
+import { Icon, Stack, Text } from '@grafana/ui';
 import { GrafanaRuleGroupIdentifier, GrafanaRulesSourceSymbol } from 'app/types/unified-alerting';
 import { GrafanaPromRuleGroupDTO, PromRuleGroupDTO } from 'app/types/unified-alerting-dto';
 
@@ -118,15 +117,9 @@ function PaginatedGroupsLoader({ groupFilter, namespaceFilter }: LoaderProps) {
         {hasMoreGroups && (
           // this div will make the button not stretch
           <div>
-            <LoadMoreButton onClick={fetchMoreGroups} />
+            <LoadMoreButton loading={isLoading} onClick={fetchMoreGroups} />
           </div>
         )}
-        {isLoading && (
-          <Stack direction="row" gap={2} alignItems="center" justifyContent="flex-start">
-            <Spinner inline={true} />
-            <Trans i18nKey="alerting.rule-list.loading-more-groups">Loading more groups...</Trans>
-          </Stack>
-        )}
       </Stack>
     </DataSourceSection>
   );

public/app/features/alerting/unified/rule-list/components/LazyPagination.tsx

@@ -1,17 +0,0 @@
-import { t } from '@grafana/i18n';
-import { Button } from '@grafana/ui';
-
-interface LazyPaginationProps {
-  loadMore: () => void;
-  disabled?: boolean;
-}
-
-export function LazyPagination({ loadMore, disabled = false }: LazyPaginationProps) {
-  const label = t('alerting.rule-list.pagination.next-page', 'Show more…');
-
-  return (
-    <Button aria-label={label} fill="text" size="sm" variant="secondary" onClick={loadMore} disabled={disabled}>
-      {label}
-    </Button>
-  );
-}

public/app/features/alerting/unified/rule-list/components/LoadMoreButton.tsx

@@ -1,16 +1,25 @@
-import { t } from '@grafana/i18n';
+import { Trans, t } from '@grafana/i18n';
 import { Button } from '@grafana/ui';
 
 interface LoadMoreButtonProps {
   onClick: () => void;
+  loading?: boolean;
 }
 
-export function LoadMoreButton({ onClick }: LoadMoreButtonProps) {
+export function LoadMoreButton({ onClick, loading = false }: LoadMoreButtonProps) {
   const label = t('alerting.rule-list.pagination.next-page', 'Show more…');
 
   return (
-    <Button aria-label={label} fill="text" size="sm" variant="secondary" onClick={onClick}>
-      {label}
+    <Button
+      data-testid="load-more-rule-groups"
+      aria-label={label}
+      fill="text"
+      size="sm"
+      variant="secondary"
+      onClick={onClick}
+      disabled={loading}
+    >
+      {loading ? <Trans i18nKey="alerting.rule-list.loading-more-groups">Loading more groups…</Trans> : label}
     </Button>
   );
 }

public/app/features/alerting/unified/rule-list/hooks/useLazyLoadPrometheusGroups.tsx

@@ -59,7 +59,7 @@ export function useLazyLoadPrometheusGroups<TGroup extends PromRuleGroupDTO>(
     isLoading,
     error: groupsRequestState.error,
     groups,
-    hasMoreGroups: !isLoading && hasMoreGroups,
+    hasMoreGroups,
     fetchMoreGroups,
   };
 }

public/locales/en-US/grafana.json

@@ -2413,7 +2413,7 @@
         "new-badge": "New!",
         "text": "Import to Grafana-managed rules"
       },
-      "loading-more-groups": "Loading more groups...",
+      "loading-more-groups": "Loading more groups…",
       "more": "More",
       "new-alert-rule": "New alert rule",
       "new-datasource-recording-rule": "New Data source recording rule",