[8.19] [Security Solution] Rename isPreview prop to isRulePreview (#214639)

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/components/correlations_details.tsx

@@ -29,7 +29,7 @@ export const CORRELATIONS_TAB_ID = 'correlations';
  * Correlations displayed in the document details expandable flyout left section under the Insights tab
  */
 export const CorrelationsDetails: React.FC = () => {
-  const { dataAsNestedObject, eventId, getFieldsData, scopeId, isPreview } =
+  const { dataAsNestedObject, eventId, getFieldsData, scopeId, isRulePreview } =
     useDocumentDetailsContext();
 
   const { selectedPatterns } = useTimelineDataFilters(isActiveTimeline(scopeId));
@@ -38,7 +38,7 @@ export const CorrelationsDetails: React.FC = () => {
     getFieldsData,
     dataAsNestedObject,
     eventId,
-    isPreview,
+    isRulePreview,
   });
   const { show: showSameSourceAlerts, originalEventId } = useShowRelatedAlertsBySameSourceEvent({
     eventId,
@@ -66,7 +66,7 @@ export const CorrelationsDetails: React.FC = () => {
               <SuppressedAlerts
                 alertSuppressionCount={alertSuppressionCount}
                 dataAsNestedObject={dataAsNestedObject}
-                isPreview={isPreview}
+                showInvestigateInTimeline={!isRulePreview}
               />
             </EuiFlexItem>
           )}

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/components/correlations_details_alerts_table.test.tsx

@@ -123,7 +123,7 @@ describe('CorrelationsDetailsAlertsTable', () => {
     });
   });
 
-  it('opens rule preview when isPreview is false', () => {
+  it('opens rule preview when isRulePreview is false', () => {
     const { getAllByTestId } = renderCorrelationsTable(mockContextValue);
 
     expect(getAllByTestId(`${TEST_ID}RulePreview`).length).toBe(2);
@@ -139,8 +139,8 @@ describe('CorrelationsDetailsAlertsTable', () => {
     });
   });
 
-  it('does not render preview link when isPreview is true', () => {
-    const { queryByTestId } = renderCorrelationsTable({ ...mockContextValue, isPreview: true });
+  it('does not render preview link when isRulePreview is true', () => {
+    const { queryByTestId } = renderCorrelationsTable({ ...mockContextValue, isRulePreview: true });
     expect(queryByTestId(`${TEST_ID}RulePreview`)).not.toBeInTheDocument();
   });
 });

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/components/correlations_details_alerts_table.tsx

@@ -81,7 +81,7 @@ export const CorrelationsDetailsAlertsTable: FC<CorrelationsDetailsAlertsTablePr
     sorting,
     error,
   } = usePaginatedAlerts(alertIds || []);
-  const { isPreview } = useDocumentDetailsContext();
+  const { isRulePreview } = useDocumentDetailsContext();
 
   const onTableChange = useCallback(
     ({ page, sort }: Criteria<Record<string, unknown>>) => {
@@ -174,7 +174,7 @@ export const CorrelationsDetailsAlertsTable: FC<CorrelationsDetailsAlertsTablePr
                 value={ruleName}
                 scopeId={scopeId}
                 ruleId={ruleId}
-                isPreview={isPreview}
+                isRulePreview={isRulePreview}
                 data-test-subj={`${dataTestSubj}RulePreview`}
               >
                 <span>{ruleName}</span>
@@ -218,7 +218,7 @@ export const CorrelationsDetailsAlertsTable: FC<CorrelationsDetailsAlertsTablePr
         },
       },
     ],
-    [scopeId, dataTestSubj, isPreview]
+    [scopeId, dataTestSubj, isRulePreview]
   );
 
   return (

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/components/investigation_guide.test.tsx

@@ -84,7 +84,7 @@ describe('<InvestigationGuide />', () => {
       error: true,
     });
     const { getByTestId } = render(
-      renderInvestigationGuide({ ...mockContextValue, isPreview: true })
+      renderInvestigationGuide({ ...mockContextValue, isRulePreview: true })
     );
     expect(getByTestId(INVESTIGATION_GUIDE_TEST_ID)).toHaveTextContent(PREVIEW_MESSAGE);
   });

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/components/investigation_guide.tsx

@@ -18,15 +18,15 @@ import { FlyoutLoading } from '../../../shared/components/flyout_loading';
  * Renders a message saying the guide hasn't been set up or the full investigation guide.
  */
 export const InvestigationGuide: React.FC = () => {
-  const { dataFormattedForFieldBrowser, isPreview } = useDocumentDetailsContext();
+  const { dataFormattedForFieldBrowser, isRulePreview } = useDocumentDetailsContext();
 
   const { loading, error, basicAlertData, ruleNote } = useInvestigationGuide({
     dataFormattedForFieldBrowser,
   });
 
   return (
     <div data-test-subj={INVESTIGATION_GUIDE_TEST_ID}>
-      {isPreview ? (
+      {isRulePreview ? (
         <FormattedMessage
           id="xpack.securitySolution.flyout.left.investigation.previewMessage"
           defaultMessage="Investigation guide is not available in alert preview."

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/components/response_details.test.tsx

@@ -117,7 +117,7 @@ describe('<ResponseDetails />', () => {
   });
 
   it('should render preview message if flyout is in preview', () => {
-    const wrapper = renderResponseDetails({ ...defaultContextValue, isPreview: true });
+    const wrapper = renderResponseDetails({ ...defaultContextValue, isRulePreview: true });
     expect(wrapper.getByTestId(RESPONSE_DETAILS_TEST_ID)).toBeInTheDocument();
     expect(wrapper.getByTestId(RESPONSE_DETAILS_TEST_ID)).toHaveTextContent(PREVIEW_MESSAGE);
   });

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/components/response_details.tsx

@@ -22,7 +22,7 @@ const ExtendedFlyoutWrapper = styled.div`
  * Automated response actions results, displayed in the document details expandable flyout left section under the Insights tab, Response tab
  */
 export const ResponseDetails: React.FC = () => {
-  const { searchHit, dataAsNestedObject, isPreview } = useDocumentDetailsContext();
+  const { searchHit, dataAsNestedObject, isRulePreview } = useDocumentDetailsContext();
 
   const responseActionsView = useResponseActionsView({
     rawEventData: searchHit,
@@ -31,7 +31,7 @@ export const ResponseDetails: React.FC = () => {
 
   return (
     <div data-test-subj={RESPONSE_DETAILS_TEST_ID}>
-      {isPreview ? (
+      {isRulePreview ? (
         <FormattedMessage
           id="xpack.securitySolution.flyout.left.response.previewMessage"
           defaultMessage="Response is not available in alert preview."

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/components/suppressed_alerts.test.tsx

@@ -43,14 +43,17 @@ const TITLE_TEXT = EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID(
 );
 const INVESTIGATE_IN_TIMELINE_BUTTON_TEST_ID = `${CORRELATIONS_DETAILS_SUPPRESSED_ALERTS_SECTION_TEST_ID}InvestigateInTimeline`;
 
-const renderSuppressedAlerts = (alertSuppressionCount: number, isPreview: boolean = false) =>
+const renderSuppressedAlerts = (
+  alertSuppressionCount: number,
+  showInvestigateInTimeline: boolean = true
+) =>
   render(
     <TestProviders>
       <DocumentDetailsContext.Provider value={mockContextValue}>
         <SuppressedAlerts
           alertSuppressionCount={alertSuppressionCount}
           dataAsNestedObject={mockDataAsNestedObject}
-          isPreview={isPreview}
+          showInvestigateInTimeline={showInvestigateInTimeline}
         />
       </DocumentDetailsContext.Provider>
     </TestProviders>
@@ -96,8 +99,8 @@ describe('<SuppressedAlerts />', () => {
     ).not.toBeInTheDocument();
   });
 
-  it('should not render investigate in timeline if in rule creation alert preview', () => {
-    const { getByTestId, queryByTestId } = renderSuppressedAlerts(5, true);
+  it('should not render investigate in timeline if showInvestigateInTimeline is false', () => {
+    const { getByTestId, queryByTestId } = renderSuppressedAlerts(5, false);
 
     expect(getByTestId(TITLE_ICON)).toBeInTheDocument();
     expect(getByTestId(TITLE_TEXT)).toHaveTextContent('5 suppressed alert');

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/components/suppressed_alerts.tsx

@@ -9,6 +9,7 @@ import { get } from 'lodash';
 import React from 'react';
 import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
 import { ALERT_RULE_TYPE } from '@kbn/rule-data-utils';
+import { css } from '@emotion/react';
 import { EuiBetaBadge, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
@@ -38,9 +39,9 @@ export interface SuppressedAlertsProps {
    */
   alertSuppressionCount: number;
   /**
-   * Indicate whether suppressed alert is shown in alert preview (rule creation)
+   * Indicate whether suppressed alert can be investigated in timeline
    */
-  isPreview: boolean;
+  showInvestigateInTimeline: boolean;
 }
 
 /**
@@ -49,7 +50,7 @@ export interface SuppressedAlertsProps {
 export const SuppressedAlerts: React.FC<SuppressedAlertsProps> = ({
   dataAsNestedObject,
   alertSuppressionCount,
-  isPreview,
+  showInvestigateInTimeline,
 }) => {
   const ruleType = get(dataAsNestedObject, ALERT_RULE_TYPE)?.[0];
 
@@ -66,7 +67,9 @@ export const SuppressedAlerts: React.FC<SuppressedAlertsProps> = ({
         <EuiFlexItem>
           <EuiBetaBadge
             label={SUPPRESSED_ALERTS_COUNT_TECHNICAL_PREVIEW}
-            style={{ verticalAlign: 'middle' }}
+            css={css`
+              vertical-align: middle;
+            `}
             size="s"
             data-test-subj={SUPPRESSED_ALERTS_SECTION_TECHNICAL_PREVIEW_TEST_ID}
           />
@@ -75,7 +78,7 @@ export const SuppressedAlerts: React.FC<SuppressedAlertsProps> = ({
     </EuiFlexGroup>
   );
 
-  const headerContent = alertSuppressionCount > 0 && !isPreview && (
+  const headerContent = alertSuppressionCount > 0 && showInvestigateInTimeline && (
     <div
       data-test-subj={`${CORRELATIONS_DETAILS_SUPPRESSED_ALERTS_SECTION_TEST_ID}InvestigateInTimeline`}
     >

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/index.tsx

@@ -35,7 +35,7 @@ export const LeftPanelNotesTab: LeftPanelPaths = 'notes';
 export const LeftPanel: FC<Partial<DocumentDetailsProps>> = memo(({ path }) => {
   const { telemetry } = useKibana().services;
   const { openLeftPanel } = useExpandableFlyoutApi();
-  const { eventId, indexName, scopeId, getFieldsData, isPreview } = useDocumentDetailsContext();
+  const { eventId, indexName, scopeId, getFieldsData, isRulePreview } = useDocumentDetailsContext();
   const eventKind = getField(getFieldsData('event.kind'));
   const securitySolutionNotesDisabled = useIsExperimentalFeatureEnabled(
     'securitySolutionNotesDisabled'
@@ -53,16 +53,16 @@ export const LeftPanel: FC<Partial<DocumentDetailsProps>> = memo(({ path }) => {
       eventKind === EventKind.signal
         ? [tabs.insightsTab, tabs.investigationTab, tabs.responseTab]
         : [tabs.insightsTab];
-    if (canSeeNotes && !securitySolutionNotesDisabled && !isPreview) {
+    if (canSeeNotes && !securitySolutionNotesDisabled && !isRulePreview) {
       tabList.push(tabs.notesTab);
     }
-    if (visualizationInFlyoutEnabled && !isPreview) {
+    if (visualizationInFlyoutEnabled && !isRulePreview) {
       return [tabs.visualizeTab, ...tabList];
     }
     return tabList;
   }, [
     eventKind,
-    isPreview,
+    isRulePreview,
     canSeeNotes,
     securitySolutionNotesDisabled,
     visualizationInFlyoutEnabled,

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/preview/footer.test.tsx

@@ -59,7 +59,7 @@ describe('<PreviewPanelFooter />', () => {
   it('should not render the take action dropdown if preview mode', () => {
     const { queryByTestId } = render(
       <TestProviders>
-        <DocumentDetailsContext.Provider value={{ ...mockContextValue, isPreview: true }}>
+        <DocumentDetailsContext.Provider value={{ ...mockContextValue, isRulePreview: true }}>
           <PreviewPanelFooter />
         </DocumentDetailsContext.Provider>
       </TestProviders>

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/preview/footer.tsx

@@ -23,7 +23,7 @@ import { DocumentEventTypes } from '../../../common/lib/telemetry';
  * Footer at the bottom of preview panel with a link to open document details flyout
  */
 export const PreviewPanelFooter: FC = () => {
-  const { eventId, indexName, scopeId, getFieldsData, isPreview } = useDocumentDetailsContext();
+  const { eventId, indexName, scopeId, getFieldsData, isRulePreview } = useDocumentDetailsContext();
   const { openFlyout } = useExpandableFlyoutApi();
   const { telemetry } = useKibana().services;
 
@@ -67,7 +67,7 @@ export const PreviewPanelFooter: FC = () => {
     [isAlert, openDocumentFlyout]
   );
 
-  if (isPreview) return null;
+  if (isRulePreview) return null;
 
   return (
     <EuiFlyoutFooter data-test-subj={PREVIEW_FOOTER_TEST_ID}>

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/alert_description.test.tsx

@@ -136,7 +136,7 @@ describe('<AlertDescription />', () => {
     it('should render rule preview button as disabled if flyout is in preview', () => {
       const { getByTestId } = renderDescription({
         ...panelContextValue([{ ...ruleUuid, values: [] }, ruleName, ruleDescription]),
-        isPreview: true,
+        isRulePreview: true,
       });
       expect(getByTestId(RULE_SUMMARY_BUTTON_TEST_ID)).toBeInTheDocument();
       expect(getByTestId(RULE_SUMMARY_BUTTON_TEST_ID)).toHaveAttribute('disabled');

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/alert_description.tsx

@@ -29,7 +29,7 @@ import { DocumentEventTypes } from '../../../../common/lib/telemetry';
  */
 export const AlertDescription: FC = () => {
   const { telemetry } = useKibana().services;
-  const { dataFormattedForFieldBrowser, scopeId, isPreview } = useDocumentDetailsContext();
+  const { dataFormattedForFieldBrowser, scopeId, isRulePreview } = useDocumentDetailsContext();
   const { isAlert, ruleDescription, ruleName, ruleId } = useBasicDataFromDetailsData(
     dataFormattedForFieldBrowser
   );
@@ -64,7 +64,7 @@ export const AlertDescription: FC = () => {
               defaultMessage: 'Show rule summary',
             }
           )}
-          disabled={isEmpty(ruleName) || isEmpty(ruleId) || isPreview}
+          disabled={isEmpty(ruleName) || isEmpty(ruleId) || isRulePreview}
         >
           <FormattedMessage
             id="xpack.securitySolution.flyout.right.about.description.ruleSummaryButtonLabel"
@@ -73,7 +73,7 @@ export const AlertDescription: FC = () => {
         </EuiButtonEmpty>
       </EuiFlexItem>
     ),
-    [ruleName, openRulePreview, ruleId, isPreview]
+    [ruleName, openRulePreview, ruleId, isRulePreview]
   );
 
   const alertRuleDescription =

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/alert_header_title.test.tsx

@@ -78,7 +78,10 @@ describe('<AlertHeaderTitle />', () => {
   });
 
   it('should render title correctly if flyout is in preview', () => {
-    const { queryByTestId, getByTestId } = renderHeader({ ...mockContextValue, isPreview: true });
+    const { queryByTestId, getByTestId } = renderHeader({
+      ...mockContextValue,
+      isRulePreview: true,
+    });
     expect(getByTestId(HEADER_TEXT_TEST_ID)).toHaveTextContent('rule-name');
 
     expect(getByTestId(RISK_SCORE_VALUE_TEST_ID)).toBeInTheDocument();

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/alert_header_title.tsx

@@ -43,7 +43,7 @@ export const AlertHeaderTitle = memo(() => {
     dataFormattedForFieldBrowser,
     eventId,
     scopeId,
-    isPreview,
+    isRulePreview,
     refetchFlyoutData,
     getFieldsData,
   } = useDocumentDetailsContext();
@@ -53,7 +53,7 @@ export const AlertHeaderTitle = memo(() => {
 
   const { ruleName, timestamp, ruleId } = useBasicDataFromDetailsData(dataFormattedForFieldBrowser);
   const title = useMemo(() => getAlertTitle({ ruleName }), [ruleName]);
-  const href = useRuleDetailsLink({ ruleId: !isPreview ? ruleId : null });
+  const href = useRuleDetailsLink({ ruleId: !isRulePreview ? ruleId : null });
   const ruleTitle = useMemo(
     () =>
       href ? (
@@ -119,11 +119,11 @@ export const AlertHeaderTitle = memo(() => {
           eventId={eventId}
           assignedUserIds={alertAssignees}
           onAssigneesUpdated={onAssigneesUpdated}
-          isPreview={isPreview}
+          showAssignees={!isRulePreview}
         />
       </AlertHeaderBlock>
     ),
-    [alertAssignees, eventId, isPreview, onAssigneesUpdated]
+    [alertAssignees, eventId, isRulePreview, onAssigneesUpdated]
   );
 
   return (

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/analyzer_preview.test.tsx

@@ -89,7 +89,7 @@ describe('<AnalyzerPreview />', () => {
       ...mockContextValue,
       getFieldsData: () => 'ancestors-id',
       dataFormattedForFieldBrowser: mockDataFormattedForFieldBrowser,
-      isPreview: true,
+      isRulePreview: true,
     };
 
     const wrapper = renderAnalyzerPreview(contextValue);

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/analyzer_preview.tsx

@@ -40,10 +40,10 @@ export const AnalyzerPreview: React.FC = () => {
     getFieldsData,
     scopeId,
     eventId,
-    isPreview,
+    isRulePreview,
   } = useDocumentDetailsContext();
   const ancestorId = getField(getFieldsData(ANCESTOR_ID)) ?? '';
-  const documentId = isPreview ? ancestorId : eventId; // use ancestor as fallback for alert preview
+  const documentId = isRulePreview ? ancestorId : eventId; // use ancestor as fallback for alert preview
 
   const { selectedPatterns } = useTimelineDataFilters(isActiveTimeline(scopeId));
   const index = find({ category: 'kibana', field: RULE_INDICES }, data);