diff --git a/public/app/features/alerting/unified/rule-list/RuleList.v1.tsx b/public/app/features/alerting/unified/rule-list/RuleList.v1.tsx
index c716c6cbb37..bec19c1cc99 100644
--- a/public/app/features/alerting/unified/rule-list/RuleList.v1.tsx
+++ b/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,18 +16,16 @@ 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';
import { useFilteredRules, useRulesFilter } from '../hooks/useFilteredRules';
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,
@@ -127,13 +122,7 @@ const RuleListV1 = () => {
navId="alert-list"
isLoading={false}
renderTitle={(title) => }
- actions={
- hasAlertRulesCreated && (
-
-
-
- )
- }
+ actions={}
>
@@ -162,48 +151,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 (
-
- logInfo(LogMessages.alertRuleFromScratch)}
- >
- New alert rule
-
- {canCreateGrafanaRules && AIAlertRuleButtonComponent && }
-
- );
- }
- return null;
-}
-
-function ExportNewRuleButton() {
- const returnTo = window.location.pathname + window.location.search;
- const url = createRelativeUrl(`/alerting/export-new-rule`, {
- returnTo,
- });
- return (
- logInfo(LogMessages.exportNewGrafanaRule)}
- >
- Export rule definition
-
- );
-}
diff --git a/public/app/features/alerting/unified/rule-list/components/RuleListActionButtons.tsx b/public/app/features/alerting/unified/rule-list/components/RuleListActionButtons.tsx
new file mode 100644
index 00000000000..97da3d7430e
--- /dev/null
+++ b/public/app/features/alerting/unified/rule-list/components/RuleListActionButtons.tsx
@@ -0,0 +1,74 @@
+import { memo } from 'react';
+
+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 { createReturnTo } from '../../hooks/useReturnTo';
+import { createRelativeUrl } from '../../utils/url';
+
+interface RuleListActionButtonsProps {
+ hasAlertRulesCreated: boolean;
+}
+
+export const RuleListActionButtons = memo(({ hasAlertRulesCreated }) => {
+ if (!hasAlertRulesCreated) {
+ return null;
+ }
+
+ return (
+
+
+
+
+ );
+});
+
+RuleListActionButtons.displayName = 'RuleListActionButtons';
+
+function CreateAlertButtons() {
+ const [createRuleSupported, createRuleAllowed] = useAlertingAbility(AlertingAction.CreateAlertRule);
+ const [createCloudRuleSupported, createCloudRuleAllowed] = useAlertingAbility(AlertingAction.CreateExternalAlertRule);
+
+ const returnTo = createReturnTo();
+
+ const canCreateCloudRules = createCloudRuleSupported && createCloudRuleAllowed;
+ const canCreateGrafanaRules = createRuleSupported && createRuleAllowed;
+
+ if (canCreateGrafanaRules || canCreateCloudRules) {
+ return (
+
+ {canCreateGrafanaRules && }
+ logInfo(LogMessages.alertRuleFromScratch)}
+ >
+ New alert rule
+
+
+ );
+ }
+ return null;
+}
+
+function ExportNewRuleButton() {
+ const returnTo = createReturnTo();
+ const url = createRelativeUrl(`/alerting/export-new-rule`, {
+ returnTo,
+ });
+ return (
+ logInfo(LogMessages.exportNewGrafanaRule)}
+ >
+ Export rule definition
+
+ );
+}