fix action buttons flickering in the old list view

public/app/features/alerting/unified/rule-list/RuleList.v1.tsx

@@ -1,16 +1,13 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom-v5-compat';
 import { useAsyncFn, useInterval } from 'react-use';
 
-import { urlUtil } from '@grafana/data';
-import { Trans, t } from '@grafana/i18n';
-import { logInfo } from '@grafana/runtime';
-import { Button, LinkButton, Stack } from '@grafana/ui';
+import { t } from '@grafana/i18n';
+import { Button, Stack } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { useDispatch } from 'app/types/store';
 import { CombinedRuleNamespace } from 'app/types/unified-alerting';
 
-import { LogMessages, trackRuleListNavigation } from '../Analytics';
+import { trackRuleListNavigation } from '../Analytics';
 import { AlertingPageWrapper } from '../components/AlertingPageWrapper';
 import RulesFilter from '../components/rules/Filter/RulesFilter.v1';
 import { NoRulesSplash } from '../components/rules/NoRulesCTA';
@@ -19,7 +16,6 @@ import { RuleListErrors } from '../components/rules/RuleListErrors';
 import { RuleListGroupView } from '../components/rules/RuleListGroupView';
 import { RuleListStateView } from '../components/rules/RuleListStateView';
 import { RuleStats } from '../components/rules/RuleStats';
-import { AIAlertRuleButtonComponent } from '../enterprise-components/AI/AIGenAlertRuleButton/addAIAlertRuleButton';
 import { shouldUsePrometheusRulesPrimary } from '../featureToggles';
 import { AlertingAction, useAlertingAbility } from '../hooks/useAbilities';
 import { useCombinedRuleNamespaces } from '../hooks/useCombinedRuleNamespaces';
@@ -28,9 +24,10 @@ import { useUnifiedAlertingSelector } from '../hooks/useUnifiedAlertingSelector'
 import { fetchAllPromAndRulerRulesAction, fetchAllPromRulesAction, fetchRulerRulesAction } from '../state/actions';
 import { RULE_LIST_POLL_INTERVAL_MS } from '../utils/constants';
 import { GRAFANA_RULES_SOURCE_NAME, getAllRulesSourceNames } from '../utils/datasource';
-import { createRelativeUrl } from '../utils/url';
 
 import { RuleListPageTitle } from './RuleListPageTitle';
+import { RuleListActionButtons } from './components/RuleListActionButtons';
+
 
 const VIEWS = {
   groups: RuleListGroupView,
@@ -99,7 +96,7 @@ const RuleListV1 = () => {
   }, [loading, limitAlerts, dispatch]);
 
   useEffect(() => {
-    trackRuleListNavigation().catch(() => {});
+    trackRuleListNavigation().catch(() => { });
   }, []);
 
   // fetch rules, then poll every RULE_LIST_POLL_INTERVAL_MS
@@ -120,6 +117,8 @@ const RuleListV1 = () => {
 
   const combinedNamespaces: CombinedRuleNamespace[] = useCombinedRuleNamespaces();
   const filteredNamespaces = useFilteredRules(combinedNamespaces, filterState);
+  const [createRuleSupported, createRuleAllowed] = useAlertingAbility(AlertingAction.CreateAlertRule);
+  const canCreateGrafanaRules = createRuleSupported && createRuleAllowed;
   return (
     // We don't want to show the Loading... indicator for the whole page.
     // We show separate indicators for Grafana-managed and Cloud rules
@@ -128,11 +127,10 @@ const RuleListV1 = () => {
       isLoading={false}
       renderTitle={(title) => <RuleListPageTitle title={title} />}
       actions={
-        hasAlertRulesCreated && (
-          <Stack gap={1}>
-            <CreateAlertButton /> <ExportNewRuleButton />
-          </Stack>
-        )
+        <RuleListActionButtons
+          hasAlertRulesCreated={hasAlertRulesCreated}
+          canCreateGrafanaRules={canCreateGrafanaRules}
+        />
       }
     >
       <Stack direction="column">
@@ -162,48 +160,3 @@ const RuleListV1 = () => {
 };
 
 export default RuleListV1;
-
-export function CreateAlertButton() {
-  const [createRuleSupported, createRuleAllowed] = useAlertingAbility(AlertingAction.CreateAlertRule);
-  const [createCloudRuleSupported, createCloudRuleAllowed] = useAlertingAbility(AlertingAction.CreateExternalAlertRule);
-
-  const location = useLocation();
-
-  const canCreateCloudRules = createCloudRuleSupported && createCloudRuleAllowed;
-
-  const canCreateGrafanaRules = createRuleSupported && createRuleAllowed;
-
-  if (canCreateGrafanaRules || canCreateCloudRules) {
-    return (
-      <Stack direction="row" gap={1}>
-        <LinkButton
-          href={urlUtil.renderUrl('alerting/new/alerting', { returnTo: location.pathname + location.search })}
-          icon="plus"
-          onClick={() => logInfo(LogMessages.alertRuleFromScratch)}
-        >
-          <Trans i18nKey="alerting.rule-list.new-alert-rule">New alert rule</Trans>
-        </LinkButton>
-        {canCreateGrafanaRules && AIAlertRuleButtonComponent && <AIAlertRuleButtonComponent />}
-      </Stack>
-    );
-  }
-  return null;
-}
-
-function ExportNewRuleButton() {
-  const returnTo = window.location.pathname + window.location.search;
-  const url = createRelativeUrl(`/alerting/export-new-rule`, {
-    returnTo,
-  });
-  return (
-    <LinkButton
-      href={url}
-      icon="download-alt"
-      variant="secondary"
-      tooltip={t('alerting.export-new-rule-button.tooltip-export-new-grafana-rule', 'Export new grafana rule')}
-      onClick={() => logInfo(LogMessages.exportNewGrafanaRule)}
-    >
-      <Trans i18nKey="alerting.list-view.section.grafanaManaged.export-new-rule">Export rule definition</Trans>
-    </LinkButton>
-  );
-}

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

@@ -0,0 +1,78 @@
+import { memo } from 'react';
+import { useLocation } from 'react-router-dom-v5-compat';
+
+import { urlUtil } from '@grafana/data';
+import { Trans, t } from '@grafana/i18n';
+import { logInfo } from '@grafana/runtime';
+import { LinkButton, Stack } from '@grafana/ui';
+
+import { LogMessages } from '../../Analytics';
+import { AIAlertRuleButtonComponent } from '../../enterprise-components/AI/AIGenAlertRuleButton/addAIAlertRuleButton';
+import { AlertingAction, useAlertingAbility } from '../../hooks/useAbilities';
+import { createRelativeUrl } from '../../utils/url';
+
+interface RuleListActionButtonsProps {
+  hasAlertRulesCreated: boolean;
+  canCreateGrafanaRules: boolean;
+}
+
+export const RuleListActionButtons = memo<RuleListActionButtonsProps>(
+  ({ hasAlertRulesCreated, canCreateGrafanaRules }) => {
+    if (!hasAlertRulesCreated) {
+      return null;
+    }
+
+    return (
+      <Stack gap={1}>
+        {canCreateGrafanaRules && <AIAlertRuleButtonComponent />}
+        <CreateAlertButton />
+        <ExportNewRuleButton />
+      </Stack>
+    );
+  }
+);
+
+RuleListActionButtons.displayName = 'RuleListActionButtons';
+
+export function CreateAlertButton() {
+  const [createRuleSupported, createRuleAllowed] = useAlertingAbility(AlertingAction.CreateAlertRule);
+  const [createCloudRuleSupported, createCloudRuleAllowed] = useAlertingAbility(AlertingAction.CreateExternalAlertRule);
+
+  const location = useLocation();
+
+  const canCreateCloudRules = createCloudRuleSupported && createCloudRuleAllowed;
+  const canCreateGrafanaRules = createRuleSupported && createRuleAllowed;
+
+  if (canCreateGrafanaRules || canCreateCloudRules) {
+    return (
+      <Stack direction="row" gap={1}>
+        <LinkButton
+          href={urlUtil.renderUrl('alerting/new/alerting', { returnTo: location.pathname + location.search })}
+          icon="plus"
+          onClick={() => logInfo(LogMessages.alertRuleFromScratch)}
+        >
+          <Trans i18nKey="alerting.rule-list.new-alert-rule">New alert rule</Trans>
+        </LinkButton>
+      </Stack>
+    );
+  }
+  return null;
+}
+
+function ExportNewRuleButton() {
+  const returnTo = window.location.pathname + window.location.search;
+  const url = createRelativeUrl(`/alerting/export-new-rule`, {
+    returnTo,
+  });
+  return (
+    <LinkButton
+      href={url}
+      icon="download-alt"
+      variant="secondary"
+      tooltip={t('alerting.export-new-rule-button.tooltip-export-new-grafana-rule', 'Export new grafana rule')}
+      onClick={() => logInfo(LogMessages.exportNewGrafanaRule)}
+    >
+      <Trans i18nKey="alerting.list-view.section.grafanaManaged.export-new-rule">Export rule definition</Trans>
+    </LinkButton>
+  );
+}