diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rule_update_callouts/rule_update_callouts.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rule_update_callouts/rule_update_callouts.tsx
new file mode 100644
index 000000000000..c4eacb4a01ff
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rule_update_callouts/rule_update_callouts.tsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiFlexGroup } from '@elastic/eui';
+import React, { useCallback } from 'react';
+import { SecurityPageName } from '../../../../app/types';
+import { useGetSecuritySolutionLinkProps } from '../../../../common/components/links';
+import { useKibana } from '../../../../common/lib/kibana';
+import { usePrebuiltRulesStatus } from '../../../rule_management/logic/prebuilt_rules/use_prebuilt_rules_status';
+import { MiniCallout } from '../mini_callout/mini_callout';
+import {
+ getUpdateRulesCalloutTitle,
+ NEW_PREBUILT_RULES_AVAILABLE_CALLOUT_TITLE,
+} from '../mini_callout/translations';
+import { AllRulesTabs } from '../rules_table/rules_table_toolbar';
+
+export const RuleUpdateCallouts = () => {
+ const { data: prebuiltRulesStatus } = usePrebuiltRulesStatus();
+
+ const rulesToInstallCount = prebuiltRulesStatus?.num_prebuilt_rules_to_install ?? 0;
+ const rulesToUpgradeCount = prebuiltRulesStatus?.num_prebuilt_rules_to_upgrade ?? 0;
+
+ // Check against rulesInstalledCount since we don't want to show banners if we're showing the empty prompt
+ const shouldDisplayNewRulesCallout = rulesToInstallCount > 0;
+ const shouldDisplayUpdateRulesCallout = rulesToUpgradeCount > 0;
+
+ const getSecuritySolutionLinkProps = useGetSecuritySolutionLinkProps();
+ const { href } = getSecuritySolutionLinkProps({
+ deepLinkId: SecurityPageName.rules,
+ path: AllRulesTabs.updates,
+ });
+ const {
+ application: { navigateToUrl },
+ } = useKibana().services;
+
+ const updateCallOutOnClick = useCallback(() => {
+ navigateToUrl(href);
+ }, [navigateToUrl, href]);
+
+ return (
+
+ {shouldDisplayUpdateRulesCallout && (
+
+ )}
+ {shouldDisplayNewRulesCallout && (
+
+ )}
+
+ );
+};
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx
index 086f3a65d389..ba68f2ef3eb3 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx
@@ -5,51 +5,35 @@
* 2.0.
*/
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
import React, { useCallback } from 'react';
-import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiToolTip } from '@elastic/eui';
-
import { APP_UI_ID } from '../../../../../common/constants';
import { SecurityPageName } from '../../../../app/types';
import { ImportDataModal } from '../../../../common/components/import_data_modal';
-import {
- SecuritySolutionLinkButton,
- useGetSecuritySolutionLinkProps,
-} from '../../../../common/components/links';
+import { SecuritySolutionLinkButton } from '../../../../common/components/links';
import { getDetectionEngineUrl } from '../../../../common/components/link_to/redirect_to_detection_engine';
import { SecuritySolutionPageWrapper } from '../../../../common/components/page_wrapper';
import { useBoolState } from '../../../../common/hooks/use_bool_state';
import { useKibana } from '../../../../common/lib/kibana';
import { hasUserCRUDPermission } from '../../../../common/utils/privileges';
import { SpyRoute } from '../../../../common/utils/route/spy_routes';
-
import { MissingPrivilegesCallOut } from '../../../../detections/components/callouts/missing_privileges_callout';
import { MlJobCompatibilityCallout } from '../../../../detections/components/callouts/ml_job_compatibility_callout';
import { NeedAdminForUpdateRulesCallOut } from '../../../../detections/components/callouts/need_admin_for_update_callout';
import { LoadPrePackagedRulesButton } from '../../../../detections/components/rules/pre_packaged_rules/load_prepackaged_rules_button';
-import { ValueListsFlyout } from '../../../../detections/components/value_lists_management_flyout';
import { useUserData } from '../../../../detections/components/user_info';
+import { ValueListsFlyout } from '../../../../detections/components/value_lists_management_flyout';
import { useListsConfig } from '../../../../detections/containers/detection_engine/lists/use_lists_config';
import { redirectToDetections } from '../../../../detections/pages/detection_engine/rules/helpers';
-
-import { useInvalidateFindRulesQuery } from '../../../rule_management/api/hooks/use_find_rules_query';
-import { importRules } from '../../../rule_management/logic';
-
-import { AllRules } from '../../components/rules_table';
-import { RulesTableContextProvider } from '../../components/rules_table/rules_table/rules_table_context';
-
import * as i18n from '../../../../detections/pages/detection_engine/rules/translations';
import { useInvalidateFetchRuleManagementFiltersQuery } from '../../../rule_management/api/hooks/use_fetch_rule_management_filters_query';
-import { MiniCallout } from '../../components/mini_callout/mini_callout';
-import { usePrebuiltRulesStatus } from '../../../rule_management/logic/prebuilt_rules/use_prebuilt_rules_status';
-
+import { useInvalidateFindRulesQuery } from '../../../rule_management/api/hooks/use_find_rules_query';
+import { importRules } from '../../../rule_management/logic';
import { MaintenanceWindowCallout } from '../../components/maintenance_window_callout/maintenance_window_callout';
+import { AllRules } from '../../components/rules_table';
import { RulesPageTourComponent } from '../../components/rules_table/alternative_tour/tour';
+import { RulesTableContextProvider } from '../../components/rules_table/rules_table/rules_table_context';
import { SuperHeader } from './super_header';
-import {
- NEW_PREBUILT_RULES_AVAILABLE_CALLOUT_TITLE,
- getUpdateRulesCalloutTitle,
-} from '../../components/mini_callout/translations';
-import { AllRulesTabs } from '../../components/rules_table/rules_table_toolbar';
const RulesPageComponent: React.FC = () => {
const [isImportModalVisible, showImportModal, hideImportModal] = useBoolState();
@@ -62,15 +46,6 @@ const RulesPageComponent: React.FC = () => {
invalidateFetchRuleManagementFilters();
}, [invalidateFindRulesQuery, invalidateFetchRuleManagementFilters]);
- const { data: prebuiltRulesStatus } = usePrebuiltRulesStatus();
-
- const rulesToInstallCount = prebuiltRulesStatus?.num_prebuilt_rules_to_install ?? 0;
- const rulesToUpgradeCount = prebuiltRulesStatus?.num_prebuilt_rules_to_upgrade ?? 0;
-
- // Check against rulesInstalledCount since we don't want to show banners if we're showing the empty prompt
- const shouldDisplayNewRulesCallout = rulesToInstallCount > 0;
- const shouldDisplayUpdateRulesCallout = rulesToUpgradeCount > 0;
-
const [
{
loading: userInfoLoading,
@@ -87,19 +62,6 @@ const RulesPageComponent: React.FC = () => {
} = useListsConfig();
const loading = userInfoLoading || listsConfigLoading;
- const getSecuritySolutionLinkProps = useGetSecuritySolutionLinkProps();
- const { href } = getSecuritySolutionLinkProps({
- deepLinkId: SecurityPageName.rules,
- path: AllRulesTabs.updates,
- });
- const {
- application: { navigateToUrl },
- } = useKibana().services;
-
- const updateCallOutOnClick = useCallback(() => {
- navigateToUrl(href);
- }, [navigateToUrl, href]);
-
if (
redirectToDetections(
isSignalIndexExists,
@@ -183,27 +145,6 @@ const RulesPageComponent: React.FC = () => {
-
- {shouldDisplayUpdateRulesCallout && (
-
- )}
-
- {shouldDisplayUpdateRulesCallout && shouldDisplayNewRulesCallout && (
-
- )}
-
- {shouldDisplayNewRulesCallout && (
-
- )}