[Security Solution] Remove rule update/install callouts (elastic#160269)

## Summary This PR removes the callouts displaying new or updated rules. Given that the callouts cannot be dismissed, we've decided to remove them temporarily to prevent UI clutter, as there may be other callouts on the page. We're going to reintroduce these callouts in 8.10 with the ability to dismiss them till the next detection rules package release. Ticket to re-add the callouts in 8.10: elastic#160270 (cherry picked from commit 4dfb7bc)
kibanamachine · Jun 23, 2023 · d4523d2 · d4523d2
1 parent 313dac7
commit d4523d2
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 66 deletions.
diff --git a/...ection_engine/rule_management_ui/components/rule_update_callouts/rule_update_callouts.tsx b/...ection_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 (
+    <EuiFlexGroup direction="column">
+      {shouldDisplayUpdateRulesCallout && (
+        <MiniCallout
+          iconType={'iInCircle'}
+          data-test-subj="prebuilt-rules-update-callout"
+          title={getUpdateRulesCalloutTitle(updateCallOutOnClick)}
+        />
+      )}
+      {shouldDisplayNewRulesCallout && (
+        <MiniCallout
+          color="success"
+          data-test-subj="prebuilt-rules-new-callout"
+          iconType={'iInCircle'}
+          title={NEW_PREBUILT_RULES_AVAILABLE_CALLOUT_TITLE}
+        />
+      )}
+    </EuiFlexGroup>
+  );
+};
diff --git a/...urity_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx b/...urity_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 = () => {
               </EuiFlexItem>
             </EuiFlexGroup>
           </SuperHeader>
-
-          {shouldDisplayUpdateRulesCallout && (
-            <MiniCallout
-              iconType={'iInCircle'}
-              data-test-subj="prebuilt-rules-update-callout"
-              title={getUpdateRulesCalloutTitle(updateCallOutOnClick)}
-            />
-          )}
-
-          {shouldDisplayUpdateRulesCallout && shouldDisplayNewRulesCallout && (
-            <EuiSpacer size={'s'} />
-          )}
-
-          {shouldDisplayNewRulesCallout && (
-            <MiniCallout
-              color="success"
-              data-test-subj="prebuilt-rules-new-callout"
-              iconType={'iInCircle'}
-              title={NEW_PREBUILT_RULES_AVAILABLE_CALLOUT_TITLE}
-            />
-          )}
           <MaintenanceWindowCallout />
           <AllRules data-test-subj="all-rules" />
         </SecuritySolutionPageWrapper>