move rule snooze settings fetching functionality to a hook

elastic · Apr 24, 2023 · b98ad2b · b98ad2b
1 parent 298568a
commit b98ad2b
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 84 deletions.
diff --git a/...k/plugins/security_solution/public/detection_engine/components/rule_snooze_badge/index.ts b/...k/plugins/security_solution/public/detection_engine/components/rule_snooze_badge/index.ts
@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export * from './rule_snooze_badge';
diff --git a/...n_engine/components/rule_snooze_badge.tsx → ...s/rule_snooze_badge/rule_snooze_badge.tsx b/...n_engine/components/rule_snooze_badge.tsx → ...s/rule_snooze_badge/rule_snooze_badge.tsx
@@ -7,30 +7,26 @@
 
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import React, { useMemo } from 'react';
-import { useUserData } from '../../detections/components/user_info';
-import { hasUserCRUDPermission } from '../../common/utils/privileges';
-import { useKibana } from '../../common/lib/kibana';
-import type { RuleSnoozeSettings } from '../rule_management/logic';
-import { useInvalidateFetchRulesSnoozeSettingsQuery } from '../rule_management/api/hooks/use_fetch_rules_snooze_settings';
+import { useUserData } from '../../../detections/components/user_info';
+import { hasUserCRUDPermission } from '../../../common/utils/privileges';
+import { useKibana } from '../../../common/lib/kibana';
+import { useInvalidateFetchRulesSnoozeSettingsQuery } from '../../rule_management/api/hooks/use_fetch_rules_snooze_settings';
+import { useRuleSnoozeSettings } from './use_rule_snooze_settings';
 
 interface RuleSnoozeBadgeProps {
   /**
-   * Rule's snooze settings, when set to `undefined` considered as a loading state
+   * Rule's SO id (not ruleId)
    */
-  snoozeSettings: RuleSnoozeSettings | undefined;
-  /**
-   * It should represent a user readable error message happened during data snooze settings fetching
-   */
-  error?: string;
+  id: string;
   showTooltipInline?: boolean;
 }
 
 export function RuleSnoozeBadge({
-  snoozeSettings,
-  error,
+  id,
   showTooltipInline = false,
 }: RuleSnoozeBadgeProps): JSX.Element {
   const RulesListNotifyBadge = useKibana().services.triggersActionsUi.getRulesListNotifyBadge;
+  const { snoozeSettings, error } = useRuleSnoozeSettings(id);
   const [{ canUserCRUD }] = useUserData();
   const hasCRUDPermissions = hasUserCRUDPermission(canUserCRUD);
   const invalidateFetchRuleSnoozeSettings = useInvalidateFetchRulesSnoozeSettingsQuery();

diff --git a/...e_details_snooze_settings/translations.ts → ...ponents/rule_snooze_badge/translations.ts b/...e_details_snooze_settings/translations.ts → ...ponents/rule_snooze_badge/translations.ts
@@ -7,8 +7,8 @@
 
 import { i18n } from '@kbn/i18n';
 
-export const UNABLE_TO_FETCH_RULE_SNOOZE_SETTINGS = i18n.translate(
-  'xpack.securitySolution.detectionEngine.ruleDetails.rulesSnoozeSettings.error.unableToFetch',
+export const UNABLE_TO_FETCH_RULES_SNOOZE_SETTINGS = i18n.translate(
+  'xpack.securitySolution.detectionEngine.rulesSnoozeBadge.error.unableToFetch',
   {
     defaultMessage: 'Unable to fetch snooze settings',
   }

diff --git a/...solution/public/detection_engine/components/rule_snooze_badge/use_rule_snooze_settings.ts b/...solution/public/detection_engine/components/rule_snooze_badge/use_rule_snooze_settings.ts
@@ -0,0 +1,38 @@
+/*
+ * 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 type { RuleSnoozeSettings } from '../../rule_management/logic';
+import { useFetchRulesSnoozeSettings } from '../../rule_management/api/hooks/use_fetch_rules_snooze_settings';
+import { useRulesTableContextOptional } from '../../rule_management_ui/components/rules_table/rules_table/rules_table_context';
+import * as i18n from './translations';
+
+interface UseRuleSnoozeSettingsResult {
+  snoozeSettings?: RuleSnoozeSettings;
+  error?: string;
+}
+
+export function useRuleSnoozeSettings(id: string): UseRuleSnoozeSettingsResult {
+  const {
+    state: { rulesSnoozeSettings: rulesTableSnoozeSettings },
+  } = useRulesTableContextOptional() ?? { state: {} };
+  const {
+    data: rulesSnoozeSettings,
+    isFetching: isSingleSnoozeSettingsFetching,
+    isError: isSingleSnoozeSettingsError,
+  } = useFetchRulesSnoozeSettings([id]);
+  const snoozeSettings = rulesTableSnoozeSettings?.data[id] ?? rulesSnoozeSettings?.[0];
+  const isFetching = rulesTableSnoozeSettings?.isFetching || isSingleSnoozeSettingsFetching;
+  const isError = rulesTableSnoozeSettings?.isError || isSingleSnoozeSettingsError;
+
+  return {
+    snoozeSettings,
+    error:
+      isError || (!snoozeSettings && !isFetching)
+        ? i18n.UNABLE_TO_FETCH_RULES_SNOOZE_SETTINGS
+        : undefined,
+  };
+}
diff --git a/...gine/rule_details_ui/pages/rule_details/components/rule_details_snooze_settings/index.tsx b/...gine/rule_details_ui/pages/rule_details/components/rule_details_snooze_settings/index.tsx
diff --git a/...curity_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.test.tsx b/...curity_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.test.tsx
@@ -87,8 +87,8 @@ jest.mock('react-router-dom', () => {
 });
 
 // RuleDetailsSnoozeSettings is an isolated component and not essential for existing tests
-jest.mock('./components/rule_details_snooze_settings', () => ({
-  RuleDetailsSnoozeSettings: () => <></>,
+jest.mock('../../../components/rule_snooze_badge', () => ({
+  RuleSnoozeBadge: () => <></>,
 }));
 
 const mockRedirectLegacyUrl = jest.fn();

diff --git a/...ns/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx b/...ns/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx
@@ -140,7 +140,7 @@ import { EditRuleSettingButtonLink } from '../../../../detections/pages/detectio
 import { useStartMlJobs } from '../../../rule_management/logic/use_start_ml_jobs';
 import { useBulkDuplicateExceptionsConfirmation } from '../../../rule_management_ui/components/rules_table/bulk_actions/use_bulk_duplicate_confirmation';
 import { BulkActionDuplicateExceptionsConfirmation } from '../../../rule_management_ui/components/rules_table/bulk_actions/bulk_duplicate_exceptions_confirmation';
-import { RuleDetailsSnoozeSettings } from './components/rule_details_snooze_settings';
+import { RuleSnoozeBadge } from '../../../components/rule_snooze_badge';
 
 /**
  * Need a 100% height here to account for the graph/analyze tool, which sets no explicit height parameters, but fills the available space.
@@ -559,7 +559,7 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
           </RuleStatus>
         )}
         <EuiFlexItem grow={false}>
-          <RuleDetailsSnoozeSettings id={ruleId} />
+          <RuleSnoozeBadge id={ruleId} showTooltipInline />
         </EuiFlexItem>
       </>
     );

diff --git a/...olution/public/detection_engine/rule_management_ui/components/rules_table/translations.ts b/...olution/public/detection_engine/rule_management_ui/components/rules_table/translations.ts
@@ -21,10 +21,3 @@ export const ML_RULE_JOBS_WARNING_BUTTON_LABEL = i18n.translate(
     defaultMessage: 'Visit rule details page to investigate',
   }
 );
-
-export const UNABLE_TO_FETCH_RULES_SNOOZE_SETTINGS = i18n.translate(
-  'xpack.securitySolution.detectionEngine.ruleManagement.rulesSnoozeSettings.error.unableToFetch',
-  {
-    defaultMessage: 'Unable to fetch snooze settings',
-  }
-);
diff --git a/...olution/public/detection_engine/rule_management_ui/components/rules_table/use_columns.tsx b/...olution/public/detection_engine/rule_management_ui/components/rules_table/use_columns.tsx
@@ -46,7 +46,6 @@ import { useHasActionsPrivileges } from './use_has_actions_privileges';
 import { useHasMlPermissions } from './use_has_ml_permissions';
 import { useRulesTableActions } from './use_rules_table_actions';
 import { MlRuleWarningPopover } from './ml_rule_warning_popover';
-import * as rulesTableI18n from './translations';
 
 export type TableColumn = EuiBasicTableColumn<Rule> | EuiTableActionsColumnType<Rule>;
 
@@ -109,33 +108,15 @@ const useEnabledColumn = ({ hasCRUDPermissions, startMlJobs }: ColumnsProps): Ta
 };
 
 const useRuleSnoozeColumn = (): TableColumn => {
-  const {
-    state: { rulesSnoozeSettings },
-  } = useRulesTableContext();
-
   return useMemo(
     () => ({
       field: 'snooze',
       name: i18n.COLUMN_SNOOZE,
-      render: (_, rule: Rule) => {
-        const snoozeSettings = rulesSnoozeSettings.data[rule.id];
-        const { isFetching, isError } = rulesSnoozeSettings;
-
-        return (
-          <RuleSnoozeBadge
-            snoozeSettings={snoozeSettings}
-            error={
-              isError || (!snoozeSettings && !isFetching)
-                ? rulesTableI18n.UNABLE_TO_FETCH_RULES_SNOOZE_SETTINGS
-                : undefined
-            }
-          />
-        );
-      },
+      render: (_, rule: Rule) => <RuleSnoozeBadge id={rule.id} />,
       width: '100px',
       sortable: false,
     }),
-    [rulesSnoozeSettings]
+    []
   );
 };
 

diff --git a/...ity_solution/public/detections/components/rules/step_rule_actions/rule_snooze_section.tsx b/...ity_solution/public/detections/components/rules/step_rule_actions/rule_snooze_section.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import { EuiFlexGroup, EuiFlexItem, EuiText, useEuiTheme } from '@elastic/eui';
-import { RuleDetailsSnoozeSettings } from '../../../../detection_engine/rule_details_ui/pages/rule_details/components/rule_details_snooze_settings';
+import { RuleSnoozeBadge } from '../../../../detection_engine/components/rule_snooze_badge';
 import * as i18n from './translations';
 
 interface RuleSnoozeSectionProps {
@@ -28,7 +28,7 @@ export function RuleSnoozeSection({ id }: RuleSnoozeSectionProps): JSX.Element {
         `}
       >
         <EuiFlexItem grow={false}>
-          <RuleDetailsSnoozeSettings id={id} />
+          <RuleSnoozeBadge id={id} showTooltipInline />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiText size="s">