[8.12] [Security Solution] Adds feature flag to enable/disable ESQL i…

…n timeline (#174029) (#174110) # Backport This will backport the following commits from `main` to `8.12`: - [[Security Solution] Adds feature flag to enable/disable ESQL in timeline (#174029)](#174029)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Jatin Kathuria <[email protected]>
elastic · Jan 2, 2024 · 2adb22d · 2adb22d
1 parent 7b18537
commit 2adb22d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/x-pack/plugins/security_solution/common/experimental_features.ts b/x-pack/plugins/security_solution/common/experimental_features.ts
@@ -153,6 +153,11 @@ export const allowedExperimentalValues = Object.freeze({
    * version and the latest available version.
    */
   jsonPrebuiltRulesDiffingEnabled: true,
+  /*
+   * Disables discover esql tab within timeline
+   *
+   */
+  timelineEsqlTabDisabled: false,
 });
 
 type ExperimentalConfigKeys = Array<keyof ExperimentalFeatures>;

diff --git a/x-pack/plugins/security_solution/public/assistant/send_to_timeline/index.tsx b/x-pack/plugins/security_solution/public/assistant/send_to_timeline/index.tsx
@@ -36,6 +36,7 @@ import {
 } from '../../timelines/store/timeline/actions';
 import { useDiscoverInTimelineContext } from '../../common/components/discover_in_timeline/use_discover_in_timeline_context';
 import { useShowTimeline } from '../../common/utils/timeline/use_show_timeline';
+import { useIsExperimentalFeatureEnabled } from '../../common/hooks/use_experimental_features';
 
 export interface SendToTimelineButtonProps {
   asEmptyButton: boolean;
@@ -60,6 +61,8 @@ export const SendToTimelineButton: React.FunctionComponent<SendToTimelineButtonP
   const [isTimelineBottomBarVisible] = useShowTimeline();
   const { discoverStateContainer } = useDiscoverInTimelineContext();
 
+  const isEsqlTabInTimelineDisabled = useIsExperimentalFeatureEnabled('timelineEsqlTabDisabled');
+
   const getDataViewsSelector = useMemo(
     () => sourcererSelectors.getSourcererDataViewsSelector(),
     []
@@ -226,6 +229,13 @@ export const SendToTimelineButton: React.FunctionComponent<SendToTimelineButtonP
     : ACTION_CANNOT_INVESTIGATE_IN_TIMELINE;
   const isDisabled = !isTimelineBottomBarVisible;
 
+  if (
+    (dataProviders?.[0]?.queryType === 'esql' || dataProviders?.[0]?.queryType === 'sql') &&
+    isEsqlTabInTimelineDisabled
+  ) {
+    return null;
+  }
+
   return asEmptyButton ? (
     <EuiButtonEmpty
       aria-label={toolTipText}

diff --git a/x-pack/plugins/security_solution/public/common/hooks/timeline/use_init_timeline_url_param.ts b/x-pack/plugins/security_solution/public/common/hooks/timeline/use_init_timeline_url_param.ts
@@ -10,6 +10,7 @@ import { safeDecode } from '@kbn/rison';
 
 import { useDispatch } from 'react-redux';
 
+import { TimelineTabs } from '../../../../common/types';
 import { useInitializeUrlParam } from '../../utils/global_query_string';
 import {
   dispatchUpdateTimeline,
@@ -18,15 +19,21 @@ import {
 import type { TimelineUrl } from '../../../timelines/store/timeline/model';
 import { timelineActions } from '../../../timelines/store/timeline';
 import { URL_PARAM_KEY } from '../use_url_state';
+import { useIsExperimentalFeatureEnabled } from '../use_experimental_features';
 
 export const useInitTimelineFromUrlParam = () => {
   const dispatch = useDispatch();
 
+  const isEsqlTabDisabled = useIsExperimentalFeatureEnabled('timelineEsqlTabDisabled');
+
   const onInitialize = useCallback(
     (initialState: TimelineUrl | null) => {
       if (initialState != null) {
         queryTimelineById({
-          activeTimelineTab: initialState.activeTab,
+          activeTimelineTab:
+            initialState.activeTab === TimelineTabs.esql && isEsqlTabDisabled
+              ? TimelineTabs.query
+              : initialState.activeTab,
           duplicate: false,
           graphEventId: initialState.graphEventId,
           timelineId: initialState.id,
@@ -38,7 +45,7 @@ export const useInitTimelineFromUrlParam = () => {
         });
       }
     },
-    [dispatch]
+    [dispatch, isEsqlTabDisabled]
   );
 
   useEffect(() => {

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
@@ -15,6 +15,7 @@ import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 
 import { FormattedMessage } from '@kbn/i18n-react';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { useKibana } from '../../../../common/lib/kibana';
 import { useAssistantTelemetry } from '../../../../assistant/use_assistant_telemetry';
 import { useConversationStore } from '../../../../assistant/use_conversation_store';
@@ -290,6 +291,7 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
   sessionViewConfig,
   timelineDescription,
 }) => {
+  const isEsqlTabInTimelineDisabled = useIsExperimentalFeatureEnabled('timelineEsqlTabDisabled');
   const isEsqlSettingEnabled = useKibana().services.configSettings.ESQLEnabled;
   const { hasAssistantPrivilege } = useAssistantAvailability();
   const dispatch = useDispatch();
@@ -404,7 +406,7 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
             <span>{i18n.QUERY_TAB}</span>
             {showTimeline && <TimelineEventsCountBadge />}
           </StyledEuiTab>
-          {isEsqlSettingEnabled && (
+          {!isEsqlTabInTimelineDisabled && isEsqlSettingEnabled && (
             <StyledEuiTab
               data-test-subj={`timelineTabs-${TimelineTabs.esql}`}
               onClick={setEsqlAsActiveTab}