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 && ( - - )}