[8.14] [Security Solution] Timeline : Disabling Timeline ESQL feature…

… flag should disable ESQL Tab. (#182816) (#182905) # Backport This will backport the following commits from `main` to `8.14`: - [[Security Solution] Timeline : Disabling Timeline ESQL feature flag should disable ESQL Tab. (#182816)](#182816)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Jatin Kathuria <jatin.kathuria@elastic.co>
elastic · May 8, 2024 · e5f3983 · e5f3983
1 parent f7234b4
commit e5f3983
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 32 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/hooks/esql/use_esql_availability.ts b/x-pack/plugins/security_solution/public/common/hooks/esql/use_esql_availability.ts
@@ -18,17 +18,19 @@ import { useIsExperimentalFeatureEnabled } from '../use_experimental_features';
 export const useEsqlAvailability = () => {
   const { uiSettings } = useKibana().services;
   const isEsqlAdvancedSettingEnabled = uiSettings?.get(ENABLE_ESQL);
+
+  const isTimelineEsqlFeatureFlagDisabled =
+    useIsExperimentalFeatureEnabled('timelineEsqlTabDisabled');
+
   const isEsqlRuleTypeEnabled =
     !useIsExperimentalFeatureEnabled('esqlRulesDisabled') && isEsqlAdvancedSettingEnabled;
-  const isESQLTabInTimelineEnabled =
-    !useIsExperimentalFeatureEnabled('timelineEsqlTabDisabled') && isEsqlAdvancedSettingEnabled;
 
   return useMemo(
     () => ({
       isEsqlAdvancedSettingEnabled,
       isEsqlRuleTypeEnabled,
-      isESQLTabInTimelineEnabled,
+      isTimelineEsqlEnabledByFeatureFlag: !isTimelineEsqlFeatureFlagDisabled,
     }),
-    [isESQLTabInTimelineEnabled, isEsqlAdvancedSettingEnabled, isEsqlRuleTypeEnabled]
+    [isEsqlAdvancedSettingEnabled, isTimelineEsqlFeatureFlagDisabled, isEsqlRuleTypeEnabled]
   );
 };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/index.test.tsx
@@ -18,7 +18,8 @@ import { render, screen, waitFor } from '@testing-library/react';
 
 jest.mock('../../../../common/hooks/esql/use_esql_availability', () => ({
   useEsqlAvailability: jest.fn().mockReturnValue({
-    isESQLTabInTimelineEnabled: true,
+    isEsqlAdvancedSettingEnabled: true,
+    isTimelineEsqlEnabledByFeatureFlag: true,
   }),
 }));
 
@@ -44,38 +45,79 @@ describe('Timeline', () => {
       expect(screen.getByTestId(esqlTabSubj)).toBeVisible();
     });
 
-    it('should not show the esql tab when the advanced setting is disabled', async () => {
-      useEsqlAvailabilityMock.mockReturnValue({
-        isESQLTabInTimelineEnabled: false,
+    describe('no existing esql query is present', () => {
+      it('should not show the esql tab when the advanced setting is disabled', async () => {
+        useEsqlAvailabilityMock.mockReturnValue({
+          isEsqlAdvancedSettingEnabled: false,
+          isTimelineEsqlEnabledByFeatureFlag: true,
+        });
+        render(
+          <TestProviders>
+            <TabsContent {...defaultProps} />
+          </TestProviders>
+        );
+
+        await waitFor(() => {
+          expect(screen.queryByTestId(esqlTabSubj)).toBeNull();
+        });
       });
-      render(
-        <TestProviders>
-          <TabsContent {...defaultProps} />
-        </TestProviders>
-      );
+      it('should not show the esql tab when the esql is disabled by feature flag', async () => {
+        useEsqlAvailabilityMock.mockReturnValue({
+          isEsqlAdvancedSettingEnabled: false,
+          isTimelineEsqlEnabledByFeatureFlag: false,
+        });
+        render(
+          <TestProviders>
+            <TabsContent {...defaultProps} />
+          </TestProviders>
+        );
 
-      await waitFor(() => {
-        expect(screen.queryByTestId(esqlTabSubj)).toBeNull();
+        await waitFor(() => {
+          expect(screen.queryByTestId(esqlTabSubj)).toBeNull();
+        });
       });
     });
 
-    it('should show the esql tab when the advanced setting is disabled, but an esql query is present', async () => {
-      useEsqlAvailabilityMock.mockReturnValue({
-        isESQLTabInTimelineEnabled: false,
+    describe('existing esql query is present', () => {
+      let mockStore: ReturnType<typeof createMockStore>;
+      beforeEach(() => {
+        const stateWithSavedSearchId = structuredClone(mockGlobalState);
+        stateWithSavedSearchId.timeline.timelineById[TimelineId.test].savedSearchId = 'test-id';
+        mockStore = createMockStore(stateWithSavedSearchId);
       });
 
-      const stateWithSavedSearchId = structuredClone(mockGlobalState);
-      stateWithSavedSearchId.timeline.timelineById[TimelineId.test].savedSearchId = 'test-id';
-      const mockStore = createMockStore(stateWithSavedSearchId);
+      it('should show the esql tab when the advanced setting is disabled', async () => {
+        useEsqlAvailabilityMock.mockReturnValue({
+          isESQLTabInTimelineEnabled: false,
+          isTimelineEsqlEnabledByFeatureFlag: true,
+        });
 
-      render(
-        <TestProviders store={mockStore}>
-          <TabsContent {...defaultProps} />
-        </TestProviders>
-      );
+        render(
+          <TestProviders store={mockStore}>
+            <TabsContent {...defaultProps} />
+          </TestProviders>
+        );
+
+        await waitFor(() => {
+          expect(screen.queryByTestId(esqlTabSubj)).toBeVisible();
+        });
+      });
+
+      it('should not show the esql tab when the esql is disabled by the feature flag', async () => {
+        useEsqlAvailabilityMock.mockReturnValue({
+          isESQLTabInTimelineEnabled: true,
+          isTimelineEsqlEnabledByFeatureFlag: false,
+        });
+
+        render(
+          <TestProviders store={mockStore}>
+            <TabsContent {...defaultProps} />
+          </TestProviders>
+        );
 
-      await waitFor(() => {
-        expect(screen.queryByTestId(esqlTabSubj)).toBeVisible();
+        await waitFor(() => {
+          expect(screen.queryByTestId(esqlTabSubj)).toBeNull();
+        });
       });
     });
   });

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/index.tsx
@@ -110,11 +110,20 @@ const ActiveTimelineTab = memo<ActiveTimelineTabProps>(
     showTimeline,
   }) => {
     const { hasAssistantPrivilege } = useAssistantAvailability();
-    const { isESQLTabInTimelineEnabled } = useEsqlAvailability();
+    const { isTimelineEsqlEnabledByFeatureFlag, isEsqlAdvancedSettingEnabled } =
+      useEsqlAvailability();
     const timelineESQLSavedSearch = useShallowEqualSelector((state) =>
       selectTimelineESQLSavedSearchId(state, timelineId)
     );
-    const shouldShowESQLTab = isESQLTabInTimelineEnabled || timelineESQLSavedSearch != null;
+    const shouldShowESQLTab = useMemo(() => {
+      // disabling esql feature from feature flag should unequivocally hide the tab
+      // irrespective of the fact that the advanced setting is enabled or
+      // not or existing esql query is present or not
+      if (!isTimelineEsqlEnabledByFeatureFlag) {
+        return false;
+      }
+      return isEsqlAdvancedSettingEnabled || timelineESQLSavedSearch != null;
+    }, [isEsqlAdvancedSettingEnabled, isTimelineEsqlEnabledByFeatureFlag, timelineESQLSavedSearch]);
     const aiAssistantFlyoutMode = useIsExperimentalFeatureEnabled('aiAssistantFlyoutMode');
     const getTab = useCallback(
       (tab: TimelineTabs) => {
@@ -271,14 +280,24 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
   const getAppNotes = useMemo(() => getNotesSelector(), []);
   const getTimelineNoteIds = useMemo(() => getNoteIdsSelector(), []);
   const getTimelinePinnedEventNotes = useMemo(() => getEventIdToNoteIdsSelector(), []);
-  const { isESQLTabInTimelineEnabled } = useEsqlAvailability();
+  const { isEsqlAdvancedSettingEnabled, isTimelineEsqlEnabledByFeatureFlag } =
+    useEsqlAvailability();
+
   const timelineESQLSavedSearch = useShallowEqualSelector((state) =>
     selectTimelineESQLSavedSearchId(state, timelineId)
   );
 
   const activeTab = useShallowEqualSelector((state) => getActiveTab(state, timelineId));
   const showTimeline = useShallowEqualSelector((state) => getShowTimeline(state, timelineId));
-  const shouldShowESQLTab = isESQLTabInTimelineEnabled || timelineESQLSavedSearch != null;
+  const shouldShowESQLTab = useMemo(() => {
+    // disabling esql feature from feature flag should unequivocally hide the tab
+    // irrespective of the fact that the advanced setting is enabled or
+    // not or existing esql query is present or not
+    if (!isTimelineEsqlEnabledByFeatureFlag) {
+      return false;
+    }
+    return isEsqlAdvancedSettingEnabled || timelineESQLSavedSearch != null;
+  }, [isEsqlAdvancedSettingEnabled, isTimelineEsqlEnabledByFeatureFlag, timelineESQLSavedSearch]);
 
   const numberOfPinnedEvents = useShallowEqualSelector((state) =>
     getNumberOfPinnedEvents(state, timelineId)