[8.11] [Security Solution] Adds feature flag to enable/disable ESQL in timeline (#174029)

x-pack/plugins/security_solution/common/experimental_features.ts

@@ -113,6 +113,12 @@ export const allowedExperimentalValues = Object.freeze({
    * Enables Protection Updates tab in the Endpoint Policy Details page
    */
   protectionUpdatesEnabled: true,
+
+  /*
+   * Disables discover esql tab within timeline
+   *
+   */
+  timelineEsqlTabDisabled: false,
 });
 
 type ExperimentalConfigKeys = Array<keyof ExperimentalFeatures>;

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}

x-pack/plugins/security_solution/public/common/hooks/timeline/use_init_timeline_url_param.ts

@@ -9,6 +9,7 @@ import { useCallback } from 'react';
 
 import { useDispatch } from 'react-redux';
 
+import { TimelineTabs } from '../../../../common/types';
 import { useInitializeUrlParam } from '../../utils/global_query_string';
 import {
   dispatchUpdateTimeline,
@@ -17,15 +18,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,
@@ -37,7 +44,7 @@ export const useInitTimelineFromUrlParam = () => {
         });
       }
     },
-    [dispatch]
+    [dispatch, isEsqlTabDisabled]
   );
 
   useInitializeUrlParam(URL_PARAM_KEY.timeline, onInitialize);

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 { useAssistantTelemetry } from '../../../../assistant/use_assistant_telemetry';
 import { useConversationStore } from '../../../../assistant/use_conversation_store';
 import { useAssistantAvailability } from '../../../../assistant/use_assistant_availability';
@@ -179,12 +180,14 @@ const ActiveTimelineTab = memo<ActiveTimelineTabProps>(
             timelineId={timelineId}
           />
         </HideShowContainer>
-        <HideShowContainer
-          $isVisible={TimelineTabs.esql === activeTimelineTab}
-          data-test-subj={`timeline-tab-content-${TimelineTabs.esql}`}
-        >
-          <EsqlTab timelineId={timelineId} />
-        </HideShowContainer>
+        {showTimeline && activeTimelineTab === TimelineTabs.esql && (
+          <HideShowContainer
+            $isVisible={true}
+            data-test-subj={`timeline-tab-content-${TimelineTabs.esql}`}
+          >
+            <EsqlTab timelineId={timelineId} />
+          </HideShowContainer>
+        )}
         <HideShowContainer
           $isVisible={TimelineTabs.pinned === activeTimelineTab}
           data-test-subj={`timeline-tab-content-${TimelineTabs.pinned}`}
@@ -281,6 +284,7 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
   sessionViewConfig,
   timelineDescription,
 }) => {
+  const isEsqlTabInTimelineDisabled = useIsExperimentalFeatureEnabled('timelineEsqlTabDisabled');
   const { hasAssistantPrivilege } = useAssistantAvailability();
   const dispatch = useDispatch();
   const getActiveTab = useMemo(() => getActiveTabSelector(), []);
@@ -394,26 +398,28 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
             <span>{i18n.QUERY_TAB}</span>
             {showTimeline && <TimelineEventsCountBadge />}
           </StyledEuiTab>
-          <StyledEuiTab
-            data-test-subj={`timelineTabs-${TimelineTabs.esql}`}
-            onClick={setEsqlAsActiveTab}
-            isSelected={activeTab === TimelineTabs.esql}
-            disabled={false}
-            key={TimelineTabs.esql}
-          >
-            <span>{i18n.DISCOVER_ESQL_IN_TIMELINE_TAB}</span>
-            <StyledEuiBetaBadge
-              label={DISCOVER_ESQL_IN_TIMELINE_TECHNICAL_PREVIEW}
-              size="s"
-              iconType="beaker"
-              tooltipContent={
-                <FormattedMessage
-                  id="xpack.securitySolution.timeline.tabs.discoverEsqlInTimeline.technicalPreviewTooltip"
-                  defaultMessage="This functionality is in technical preview and may be changed or removed completely in a future release. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features."
-                />
-              }
-            />
-          </StyledEuiTab>
+          {!isEsqlTabInTimelineDisabled && (
+            <StyledEuiTab
+              data-test-subj={`timelineTabs-${TimelineTabs.esql}`}
+              onClick={setEsqlAsActiveTab}
+              isSelected={activeTab === TimelineTabs.esql}
+              disabled={false}
+              key={TimelineTabs.esql}
+            >
+              <span>{i18n.DISCOVER_ESQL_IN_TIMELINE_TAB}</span>
+              <StyledEuiBetaBadge
+                label={DISCOVER_ESQL_IN_TIMELINE_TECHNICAL_PREVIEW}
+                size="s"
+                iconType="beaker"
+                tooltipContent={
+                  <FormattedMessage
+                    id="xpack.securitySolution.timeline.tabs.discoverEsqlInTimeline.technicalPreviewTooltip"
+                    defaultMessage="This functionality is in technical preview and may be changed or removed completely in a future release. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features."
+                  />
+                }
+              />
+            </StyledEuiTab>
+          )}
           {timelineType === TimelineType.default && (
             <StyledEuiTab
               data-test-subj={`timelineTabs-${TimelineTabs.eql}`}