[Security Solution] Fix rules table refresh after rule's import (#144359

)

**Resolves:** #136758

## Summary

It fixes the problem of the rules table refresh after importing a rule.

*Before:*

https://user-images.githubusercontent.com/3775283/199319505-e70918ec-1621-4048-92ba-0b83a5b19652.mov

*After:*

https://user-images.githubusercontent.com/3775283/199319768-3513dfc7-f9d2-4a84-a7ff-0b78dcf4795f.mov

### Checklist

- [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios

x-pack/plugins/security_solution/cypress/e2e/detection_rules/import_rules.cy.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { TOASTER } from '../../screens/alerts_detection_rules';
+import { RULES_ROW, RULES_TABLE, TOASTER } from '../../screens/alerts_detection_rules';
 import { importRules, importRulesWithOverwriteAll } from '../../tasks/alerts_detection_rules';
 import { cleanKibana, deleteAlertsAndRules, reload } from '../../tasks/common';
 import { login, visitWithoutDateRange } from '../../tasks/login';
@@ -24,6 +24,9 @@ describe('Import rules', () => {
   });
 
   it('Imports a custom rule with exceptions', function () {
+    const expectedNumberOfRules = 1;
+    const expectedImportedRuleName = 'Test Custom Rule';
+
     importRules('7_16_rules.ndjson');
 
     cy.wait('@import').then(({ response }) => {
@@ -32,6 +35,13 @@ describe('Import rules', () => {
         'have.text',
         'Successfully imported 1 ruleSuccessfully imported 2 exceptions.'
       );
+
+      cy.get(RULES_TABLE).then(($table) => {
+        const rulesRow = cy.wrap($table.find(RULES_ROW));
+
+        rulesRow.should('have.length', expectedNumberOfRules);
+        rulesRow.should('include.text', expectedImportedRuleName);
+      });
     });
   });
 

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 
 import { APP_UI_ID } from '../../../../../common/constants';
@@ -32,6 +32,7 @@ import { useListsConfig } from '../../../../detections/containers/detection_engi
 import { redirectToDetections } from '../../../../detections/pages/detection_engine/rules/helpers';
 
 import { useInvalidateFindRulesQuery } from '../../../rule_management/api/hooks/use_find_rules_query';
+import { useInvalidateFetchPrebuiltRulesStatusQuery } from '../../../rule_management/api/hooks/use_fetch_prebuilt_rules_status_query';
 import { importRules } from '../../../rule_management/logic';
 import { usePrePackagedRulesInstallationStatus } from '../../../rule_management/logic/use_pre_packaged_rules_installation_status';
 import { usePrePackagedTimelinesInstallationStatus } from '../../../rule_management/logic/use_pre_packaged_timelines_installation_status';
@@ -47,6 +48,11 @@ const RulesPageComponent: React.FC = () => {
   const [isValueListFlyoutVisible, showValueListFlyout, hideValueListFlyout] = useBoolState();
   const { navigateToApp } = useKibana().services.application;
   const invalidateFindRulesQuery = useInvalidateFindRulesQuery();
+  const invalidateFetchPrebuiltRulesStatusQuery = useInvalidateFetchPrebuiltRulesStatusQuery();
+  const invalidateRules = useCallback(() => {
+    invalidateFindRulesQuery();
+    invalidateFetchPrebuiltRulesStatusQuery();
+  }, [invalidateFindRulesQuery, invalidateFetchPrebuiltRulesStatusQuery]);
 
   const [
     {
@@ -94,7 +100,7 @@ const RulesPageComponent: React.FC = () => {
         description={i18n.SELECT_RULE}
         errorMessage={i18n.IMPORT_FAILED}
         failedDetailed={i18n.IMPORT_FAILED_DETAILED}
-        importComplete={invalidateFindRulesQuery}
+        importComplete={invalidateRules}
         importData={importRules}
         successMessage={i18n.SUCCESSFULLY_IMPORTED_RULES}
         showModal={isImportModalVisible}