add rule upgrade preview FE integration tests

src/platform/plugins/shared/data_views/public/mocks.ts

@@ -38,7 +38,7 @@ const createStartContract = (): Start => {
     get: jest.fn().mockReturnValue(Promise.resolve({})),
     clearCache: jest.fn(),
     getCanSaveSync: jest.fn(),
-    getIdsWithTitle: jest.fn(),
+    getIdsWithTitle: jest.fn().mockResolvedValue([]),
     getFieldsForIndexPattern: jest.fn(),
     create: jest.fn().mockReturnValue(Promise.resolve({})),
     toDataView: jest.fn().mockReturnValue(Promise.resolve({})),

x-pack/solutions/security/plugins/security_solution/common/detection_engine/prebuilt_rules/diff/convert_rule_to_diffable.ts

@@ -118,7 +118,7 @@ const extractDiffableCommonFields = (
     version: rule.version,
 
     // Main domain fields
-    name: rule.name.trim(),
+    name: rule.name?.trim(),
     tags: rule.tags ?? [],
     description: rule.description,
     severity: rule.severity,

x-pack/solutions/security/plugins/security_solution/common/detection_engine/prebuilt_rules/diff/extract_rule_data_query.ts

@@ -64,7 +64,7 @@ interface ExtractRuleEqlQueryParams {
 
 export const extractRuleEqlQuery = (params: ExtractRuleEqlQueryParams): RuleEqlQuery => {
   return {
-    query: params.query.trim(),
+    query: params.query?.trim(),
     language: params.language,
     filters: normalizeFilterArray(params.filters),
     event_category_override: params.eventCategoryOverride,
@@ -78,7 +78,7 @@ export const extractRuleEsqlQuery = (
   language: EsqlQueryLanguage
 ): RuleEsqlQuery => {
   return {
-    query: query.trim(),
+    query: query?.trim(),
     language,
   };
 };

x-pack/solutions/security/plugins/security_solution/common/detection_engine/prebuilt_rules/diff/extract_threat_array.ts

@@ -13,7 +13,7 @@ import type {
 } from '../../../api/detection_engine/model/rule_schema';
 
 export const extractThreatArray = (rule: RuleResponse): ThreatArray =>
-  rule.threat.map((threat) => {
+  rule.threat?.map((threat) => {
     if (threat.technique && threat.technique.length) {
       return {
         ...threat,
@@ -26,7 +26,7 @@ export const extractThreatArray = (rule: RuleResponse): ThreatArray =>
       tactic: { ...threat.tactic, reference: normalizeThreatReference(threat.tactic.reference) },
       technique: undefined,
     }; // If `technique` is an empty array, remove the field from the `threat` object
-  });
+  }) ?? [];
 
 const trimTechniqueArray = (techniqueArray: ThreatTechnique[]): ThreatTechnique[] => {
   return techniqueArray.map((technique) => ({

x-pack/solutions/security/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts

@@ -14,6 +14,7 @@ import { coreMock, themeServiceMock } from '@kbn/core/public/mocks';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { securityMock } from '@kbn/security-plugin/public/mocks';
+import { Storage } from '@kbn/kibana-utils-plugin/public';
 
 import {
   DEFAULT_APP_REFRESH_INTERVAL,
@@ -213,6 +214,13 @@ export const createStartServicesMock = (
           showQueries: true,
           saveQuery: true,
         },
+        maintenanceWindow: {
+          show: true,
+          save: true,
+        },
+        actions: {
+          show: true,
+        },
       },
     },
     security,
@@ -258,6 +266,12 @@ export const createStartServicesMock = (
     upselling: new UpsellingService(),
     timelineDataService,
     alerting,
+    sessionStorage: new Storage({
+      getItem: jest.fn(),
+      setItem: jest.fn(),
+      removeItem: jest.fn(),
+      clear: jest.fn(),
+    }),
   } as unknown as StartServices;
 };
 

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/field_comparison_side.tsx

@@ -7,7 +7,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
-import { isEqual } from 'lodash';
+import { isEqual, snakeCase } from 'lodash';
 import usePrevious from 'react-use/lib/usePrevious';
 import { KibanaSectionErrorBoundary } from '@kbn/shared-ux-error-boundary';
 import { VersionsPicker, VersionsPickerOptionEnum } from './versions_picker/versions_picker';
@@ -57,7 +57,7 @@ export function FieldComparisonSide(): JSX.Element {
   }, [hasResolvedValueDifferentFromSuggested, selectedOption, prevResolvedValue, resolvedValue]);
 
   return (
-    <>
+    <section data-test-subj={`${snakeCase(fieldName)}-comparisonSide`}>
       <FieldUpgradeSideHeader>
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem>
@@ -81,6 +81,6 @@ export function FieldComparisonSide(): JSX.Element {
       <KibanaSectionErrorBoundary sectionName={i18n.TITLE}>
         <SubfieldChanges fieldName={fieldName} subfieldChanges={subfieldChanges} />
       </KibanaSectionErrorBoundary>
-    </>
+    </section>
   );
 }

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/field_final_side/components/field_final_side.tsx

@@ -6,15 +6,21 @@
  */
 
 import React from 'react';
+import { snakeCase } from 'lodash';
+import { useFieldUpgradeContext } from '../../rule_upgrade/field_upgrade_context';
 import { FieldEditFormContextProvider } from '../context/field_edit_form_context';
 import { FieldFinalSideContent } from './field_final_side_content';
 import { FieldFinalSideHeader } from './field_final_side_header';
 
 export function FieldFinalSide(): JSX.Element {
+  const { fieldName } = useFieldUpgradeContext();
+
   return (
-    <FieldEditFormContextProvider>
-      <FieldFinalSideHeader />
-      <FieldFinalSideContent />
-    </FieldEditFormContextProvider>
+    <section data-test-subj={`${snakeCase(fieldName)}-finalSide`}>
+      <FieldEditFormContextProvider>
+        <FieldFinalSideHeader />
+        <FieldFinalSideContent />
+      </FieldEditFormContextProvider>
+    </section>
   );
 }

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_edit/fields/building_block.tsx

@@ -21,7 +21,7 @@ export function BuildingBlockEdit(): JSX.Element {
 
 export function buildingBlockDeserializer(defaultValue: FormData) {
   return {
-    isBuildingBlock: defaultValue.building_block,
+    isBuildingBlock: Boolean(defaultValue.building_block),
   };
 }
 

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_edit/fields/hooks/use_data_view.ts

@@ -29,6 +29,10 @@ export function useDataView(indexPatternsOrDataViewId: UseDataViewParams): UseDa
     setIsLoading(true);
 
     (async () => {
+      if (dataView !== undefined) {
+        return;
+      }
+
       try {
         if (indexPatternsOrDataViewId.indexPatterns) {
           const indexPatternsDataView = await dataViewsService.create({
@@ -51,6 +55,7 @@ export function useDataView(indexPatternsOrDataViewId: UseDataViewParams): UseDa
       }
     })();
   }, [
+    dataView,
     dataViewsService,
     indexPatternsOrDataViewId.indexPatterns,
     indexPatternsOrDataViewId.dataViewId,

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/rule_upgrade/field_upgrade.tsx

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import { snakeCase } from 'lodash';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/css';
 import { SplitAccordion } from '../../../../../../common/components/split_accordion';
@@ -29,7 +30,7 @@ export function FieldUpgrade(): JSX.Element {
           />
         }
         initialIsOpen={hasConflict}
-        data-test-subj="ruleUpgradePerFieldDiff"
+        data-test-subj={`${snakeCase(fieldName)}-upgrade`}
       >
         <EuiFlexGroup gutterSize="s" alignItems="flexStart">
           <EuiFlexItem grow={1}>

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/_tests_/rules_upgrade/mock/test_rule_upgrade_provides.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 { PropsWithChildren } from 'react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { SecurityPageName } from '@kbn/deeplinks-security';
+import { KibanaErrorBoundaryProvider } from '@kbn/shared-ux-error-boundary';
+import { TestProviders } from '../../../../../../../common/mock';
+import { RouterSpyStateContext } from '../../../../../../../common/utils/route/helpers';
+import { AllRulesTabs } from '../../../../../components/rules_table/rules_table_toolbar';
+
+export function TestRuleUpgradeProviders({ children }: PropsWithChildren<{}>): JSX.Element {
+  return (
+    <KibanaErrorBoundaryProvider analytics={undefined}>
+      <RouterSpyStateContext.Provider
+        value={[
+          {
+            pageName: SecurityPageName.rules,
+            detailName: undefined,
+            tabName: AllRulesTabs.updates,
+            search: '',
+            pathName: '/',
+            state: undefined,
+          },
+          jest.fn(),
+        ]}
+      >
+        <MemoryRouter>
+          <TestProviders>{children}</TestProviders>
+        </MemoryRouter>
+      </RouterSpyStateContext.Provider>
+    </KibanaErrorBoundaryProvider>
+  );
+}