[Security Solution] Disable update button when editing field in rule …

…update flyout (elastic#205999) **Resolves: elastic#203912** ## Summary When editing a field in Rule Update flyout, the `Update` button should be temporarily disabled. Currently it is enabled all the time which is counterintuitive and may lead to errors. ## BEFORE https://github.com/user-attachments/assets/ef2c7580-247f-4eb1-96aa-43c9454e0e94 ## AFTER https://github.com/user-attachments/assets/02c6a3a8-861c-4d41-8dbd-52defb63f642 --------- Co-authored-by: Nikita Indik <[email protected]>
kc13greiner · Feb 3, 2025 · 9891bbd · 9891bbd
1 parent 802fdf0
commit 9891bbd
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 44 deletions.
diff --git a/..._management/components/rule_details/three_way_diff/rule_upgrade/field_upgrade_context.tsx b/..._management/components/rule_details/three_way_diff/rule_upgrade/field_upgrade_context.tsx
@@ -5,9 +5,10 @@
  * 2.0.
  */
 
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, useContext, useEffect, useMemo } from 'react';
 import { isEqual } from 'lodash';
 import { useBoolean } from '@kbn/react-hooks';
+import { useRulePreviewContext } from '../../../../../rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/rule_preview_context';
 import { assertUnreachable } from '../../../../../../../common/utility_types';
 import {
   ThreeWayDiffOutcome,
@@ -102,6 +103,16 @@ export function FieldUpgradeContextProvider({
     initialRightSideMode === FieldFinalSideMode.Edit
   );
 
+  const { setFieldEditing, setFieldReadonly } = useRulePreviewContext();
+
+  useEffect(() => {
+    if (editing) {
+      setFieldEditing(fieldName);
+    } else {
+      setFieldReadonly(fieldName);
+    }
+  }, [setFieldEditing, setFieldReadonly, editing, fieldName]);
+
   invariant(fieldDiff, `Field diff is not found for ${fieldName}.`);
 
   const finalDiffableRule = calcFinalDiffableRule(ruleUpgradeState);

diff --git a/...rity_solution/public/detection_engine/rule_management_ui/components/rules_table/index.tsx b/...rity_solution/public/detection_engine/rule_management_ui/components/rules_table/index.tsx
@@ -38,13 +38,11 @@ export const AllRules = React.memo(() => {
     );
   } else {
     return (
-      <>
-        <UpgradePrebuiltRulesTableContextProvider>
-          <RulesTableToolbar />
-          <EuiSpacer />
-          <UpgradePrebuiltRulesTable />
-        </UpgradePrebuiltRulesTableContextProvider>
-      </>
+      <UpgradePrebuiltRulesTableContextProvider>
+        <RulesTableToolbar />
+        <EuiSpacer />
+        <UpgradePrebuiltRulesTable />
+      </UpgradePrebuiltRulesTableContextProvider>
     );
   }
 });

diff --git a/...anagement_ui/components/rules_table/upgrade_prebuilt_rules_table/rule_preview_context.tsx b/...anagement_ui/components/rules_table/upgrade_prebuilt_rules_table/rule_preview_context.tsx
@@ -0,0 +1,70 @@
+/*
+ * 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 { invariant } from '@formatjs/intl-utils';
+import useSet from 'react-use/lib/useSet';
+import React, { createContext, useContext, useEffect, useMemo } from 'react';
+import usePrevious from 'react-use/lib/usePrevious';
+
+export interface RulePreviewContextType {
+  /**
+   * Sets the rule is being edited in the rule upgrade flyout
+   */
+  setFieldEditing: (fieldName: string) => void;
+
+  /**
+   * Sets the rule is not being edited in the rule upgrade flyout
+   */
+  setFieldReadonly: (fieldName: string) => void;
+
+  /**
+   * Returns whether the rule is being edited in the rule upgrade flyout
+   */
+  isEditingRule: boolean;
+}
+
+const RulePreviewContext = createContext<RulePreviewContextType | null>(null);
+
+interface RulePreviewContextProviderProps {
+  children: React.ReactNode;
+  ruleId: string | undefined;
+}
+
+export function RulePreviewContextProvider({ children, ruleId }: RulePreviewContextProviderProps) {
+  const [editedFields, { add, remove, reset }] = useSet<string>();
+  const prevRuleId = usePrevious(ruleId);
+
+  useEffect(() => {
+    if (ruleId !== prevRuleId) {
+      reset();
+    }
+  }, [reset, ruleId, prevRuleId]);
+
+  const isEditingRule = editedFields.size > 0;
+
+  const contextValue: RulePreviewContextType = useMemo(
+    () => ({
+      isEditingRule,
+      setFieldEditing: add,
+      setFieldReadonly: remove,
+    }),
+    [isEditingRule, add, remove]
+  );
+
+  return <RulePreviewContext.Provider value={contextValue}>{children}</RulePreviewContext.Provider>;
+}
+
+export function useRulePreviewContext() {
+  const context = useContext(RulePreviewContext);
+
+  invariant(
+    context !== null,
+    'useRulePreviewContext must be used inside a RulePreviewContextProvider'
+  );
+
+  return context;
+}
diff --git a/...ponents/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_context.tsx b/...ponents/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_context.tsx
@@ -269,7 +269,7 @@ export const UpgradePrebuiltRulesTableContextProvider = ({
     [rulesUpgradeState]
   );
   const ruleActionsFactory = useCallback(
-    (rule: RuleResponse, closeRulePreview: () => void) => {
+    (rule: RuleResponse, closeRulePreview: () => void, isEditingRule: boolean) => {
       const ruleUpgradeState = rulesUpgradeState[rule.rule_id];
       if (!ruleUpgradeState) {
         return null;
@@ -282,7 +282,8 @@ export const UpgradePrebuiltRulesTableContextProvider = ({
             loadingRules.includes(rule.rule_id) ||
             isRefetching ||
             isUpgradingSecurityPackages ||
-            (ruleUpgradeState.hasUnresolvedConflicts && !hasRuleTypeChange)
+            (ruleUpgradeState.hasUnresolvedConflicts && !hasRuleTypeChange) ||
+            isEditingRule
           }
           onClick={() => {
             if (hasRuleTypeChange || isRulesCustomizationEnabled === false) {

diff --git a/...ic/detection_engine/rule_management_ui/components/rules_table/use_rule_preview_flyout.tsx b/...ic/detection_engine/rule_management_ui/components/rules_table/use_rule_preview_flyout.tsx
@@ -6,21 +6,31 @@
  */
 
 import type { ReactNode } from 'react';
-import React, { useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useState, useMemo, memo } from 'react';
 import type { EuiTabbedContentTab } from '@elastic/eui';
 import { invariant } from '../../../../../common/utils/invariant';
 import type { RuleSignatureId } from '../../../../../common/api/detection_engine';
 import type { RuleResponse } from '../../../../../common/api/detection_engine/model/rule_schema';
 import { RuleDetailsFlyout } from '../../../rule_management/components/rule_details/rule_details_flyout';
-
-interface UseRulePreviewFlyoutParams {
-  rules: RuleResponse[];
-  ruleActionsFactory: (rule: RuleResponse, closeRulePreview: () => void) => ReactNode;
+import {
+  RulePreviewContextProvider,
+  useRulePreviewContext,
+} from './upgrade_prebuilt_rules_table/rule_preview_context';
+interface UseRulePreviewFlyoutBaseParams {
+  ruleActionsFactory: (
+    rule: RuleResponse,
+    closeRulePreview: () => void,
+    isEditingRule: boolean
+  ) => ReactNode;
   extraTabsFactory?: (rule: RuleResponse) => EuiTabbedContentTab[];
   subHeaderFactory?: (rule: RuleResponse) => ReactNode;
   flyoutProps: RulePreviewFlyoutProps;
 }
 
+interface UseRulePreviewFlyoutParams extends UseRulePreviewFlyoutBaseParams {
+  rules: RuleResponse[];
+}
+
 interface RulePreviewFlyoutProps {
   /**
    * Rule preview flyout unique id used in HTML
@@ -44,41 +54,76 @@ export function useRulePreviewFlyout({
 }: UseRulePreviewFlyoutParams): UseRulePreviewFlyoutResult {
   const [rule, setRuleForPreview] = useState<RuleResponse | undefined>();
   const closeRulePreview = useCallback(() => setRuleForPreview(undefined), []);
-  const subHeader = useMemo(
-    () => (rule ? subHeaderFactory?.(rule) : null),
-    [subHeaderFactory, rule]
+  const openRulePreview = useCallback(
+    (ruleId: RuleSignatureId) => {
+      const ruleToShowInFlyout = rules.find((x) => x.rule_id === ruleId);
+
+      invariant(ruleToShowInFlyout, `Rule with rule_id ${ruleId} not found`);
+      setRuleForPreview(ruleToShowInFlyout);
+    },
+    [rules, setRuleForPreview]
   );
+  const rulePreviewFlyout = (
+    <RulePreviewContextProvider ruleId={rule?.rule_id}>
+      <RulePreviewFlyoutInternal
+        rule={rule}
+        closeRulePreview={closeRulePreview}
+        extraTabsFactory={extraTabsFactory}
+        ruleActionsFactory={ruleActionsFactory}
+        subHeaderFactory={subHeaderFactory}
+        flyoutProps={flyoutProps}
+      />
+    </RulePreviewContextProvider>
+  );
+
+  return {
+    rulePreviewFlyout,
+    openRulePreview,
+    closeRulePreview,
+  };
+}
+
+const RulePreviewFlyoutInternal = memo(function RulePreviewFlyoutInternal({
+  rule,
+  closeRulePreview,
+  extraTabsFactory,
+  ruleActionsFactory,
+  subHeaderFactory,
+  flyoutProps,
+}: UseRulePreviewFlyoutBaseParams & {
+  rule: RuleResponse | undefined;
+  closeRulePreview: () => void;
+}) {
+  const { isEditingRule } = useRulePreviewContext();
+
   const ruleActions = useMemo(
-    () => rule && ruleActionsFactory(rule, closeRulePreview),
-    [rule, ruleActionsFactory, closeRulePreview]
+    () => rule && ruleActionsFactory(rule, closeRulePreview, isEditingRule),
+    [rule, ruleActionsFactory, closeRulePreview, isEditingRule]
   );
   const extraTabs = useMemo(
     () => (rule && extraTabsFactory ? extraTabsFactory(rule) : []),
     [rule, extraTabsFactory]
   );
 
-  return {
-    rulePreviewFlyout: rule && (
-      <RuleDetailsFlyout
-        rule={rule}
-        size="l"
-        id={flyoutProps.id}
-        dataTestSubj={flyoutProps.dataTestSubj}
-        closeFlyout={closeRulePreview}
-        ruleActions={ruleActions}
-        extraTabs={extraTabs}
-        subHeader={subHeader}
-      />
-    ),
-    openRulePreview: useCallback(
-      (ruleId: RuleSignatureId) => {
-        const ruleToShowInFlyout = rules.find((x) => x.rule_id === ruleId);
+  const subHeader = useMemo(
+    () => (rule ? subHeaderFactory?.(rule) : null),
+    [subHeaderFactory, rule]
+  );
 
-        invariant(ruleToShowInFlyout, `Rule with rule_id ${ruleId} not found`);
-        setRuleForPreview(ruleToShowInFlyout);
-      },
-      [rules, setRuleForPreview]
-    ),
-    closeRulePreview,
-  };
-}
+  if (!rule) {
+    return null;
+  }
+
+  return (
+    <RuleDetailsFlyout
+      rule={rule}
+      size="l"
+      id={flyoutProps.id}
+      dataTestSubj={flyoutProps.dataTestSubj}
+      closeFlyout={closeRulePreview}
+      ruleActions={ruleActions}
+      extraTabs={extraTabs}
+      subHeader={subHeader}
+    />
+  );
+});