hide search query section when version is less than 2.19 (#605) (#607)

(cherry picked from commit 4e46cf3)

Signed-off-by: Kama Huang <kamahuan@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Kama Huang <kamahuan@amazon.com>

Author: 3 people

public/pages/workflow_detail/workflow_inputs/search_inputs/search_inputs.tsx

@@ -3,7 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import semver from 'semver';
 import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
 import { ConfigureSearchRequest } from './configure_search_request';
 import { EnrichSearchRequest } from './enrich_search_request';
@@ -15,6 +16,7 @@ import {
 } from '../../../../../common';
 import { catIndices, useAppDispatch } from '../../../../store';
 import { getDataSourceId } from '../../../../utils';
+import { getEffectiveVersion } from '../../../workflows/new_workflow/new_workflow';
 
 interface SearchInputsProps {
   uiConfig: WorkflowConfig;
@@ -28,13 +30,29 @@ interface SearchInputsProps {
 export function SearchInputs(props: SearchInputsProps) {
   const dispatch = useAppDispatch();
   const dataSourceId = getDataSourceId();
+  const [showTransformQuery, setShowTransformQuery] = useState(true);
+
   // re-fetch indices on initial load. When users are first creating,
   // they may enter this page without getting the updated index info
   // for a newly-created index, so we re-fetch that here.
   useEffect(() => {
     dispatch(catIndices({ pattern: OMIT_SYSTEM_INDEX_PATTERN, dataSourceId }));
   }, []);
 
+  useEffect(() => {
+    const checkVersion = async () => {
+      try {
+        const version = await getEffectiveVersion(dataSourceId);
+        setShowTransformQuery(semver.gte(version, '2.19.0'));
+      } catch (error) {
+        console.error('Error checking version:', error);
+        setShowTransformQuery(true);
+      }
+    };
+
+    checkVersion();
+  }, [dataSourceId]);
+
   return (
     <EuiFlexGroup direction="column">
       <EuiFlexItem grow={false}>
@@ -43,16 +61,20 @@ export function SearchInputs(props: SearchInputsProps) {
       <EuiFlexItem grow={false}>
         <EuiHorizontalRule margin="m" />
       </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EnrichSearchRequest
-          uiConfig={props.uiConfig}
-          setUiConfig={props.setUiConfig}
-          setCachedFormikState={props.setCachedFormikState}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiHorizontalRule margin="m" />
-      </EuiFlexItem>
+      {showTransformQuery && (
+        <>
+          <EuiFlexItem grow={false}>
+            <EnrichSearchRequest
+              uiConfig={props.uiConfig}
+              setUiConfig={props.setUiConfig}
+              setCachedFormikState={props.setCachedFormikState}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiHorizontalRule margin="m" />
+          </EuiFlexItem>
+        </>
+      )}
       <EuiFlexItem grow={false}>
         <EnrichSearchResponse
           uiConfig={props.uiConfig}