Move datasourceversion fetching into custom reusable hook

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>

Author: ohltyler

public/pages/workflow_detail/tools/query/query.tsx

@@ -36,10 +36,10 @@ import {
   containsEmptyValues,
   containsSameValues,
   getDataSourceId,
-  getEffectiveVersion,
   getPlaceholdersFromQuery,
   getSearchPipelineErrors,
   injectParameters,
+  useDataSourceVersion,
 } from '../../../../utils';
 import { QueryParamsList, Results } from '../../../../general_components';
 
@@ -65,17 +65,7 @@ const SEARCH_OPTIONS = [
 export function Query(props: QueryProps) {
   const dispatch = useAppDispatch();
   const dataSourceId = getDataSourceId();
-  const [dataSourceVersion, setDataSourceVersion] = useState<
-    string | undefined
-  >(undefined);
-  useEffect(() => {
-    async function getVersion() {
-      if (dataSourceId !== undefined) {
-        setDataSourceVersion(await getEffectiveVersion(dataSourceId));
-      }
-    }
-    getVersion();
-  }, [dataSourceId]);
+  const dataSourceVersion = useDataSourceVersion(dataSourceId);
 
   const { loading } = useSelector((state: AppState) => state.opensearch);
 

public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx

@@ -6,7 +6,6 @@
 import React, { useEffect, useState } from 'react';
 import { getIn, useFormikContext } from 'formik';
 import { isEmpty, isEqual } from 'lodash';
-import semver from 'semver';
 import {
   EuiSmallButton,
   EuiSmallButtonEmpty,
@@ -25,7 +24,6 @@ import {
 import {
   CONFIG_STEP,
   CachedFormikState,
-  MINIMUM_FULL_SUPPORTED_VERSION,
   SimulateIngestPipelineResponseVerbose,
   TemplateNode,
   WORKFLOW_STEP_TYPE,
@@ -59,8 +57,9 @@ import {
   getDataSourceId,
   prepareDocsForSimulate,
   getIngestPipelineErrors,
-  getEffectiveVersion,
   sleep,
+  useDataSourceVersion,
+  getIsPreV219,
 } from '../../../utils';
 import { BooleanField } from './input_fields';
 import '../workspace/workspace-styles.scss';
@@ -102,21 +101,8 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
   } = useFormikContext<WorkflowFormValues>();
   const dispatch = useAppDispatch();
   const dataSourceId = getDataSourceId();
-  const [dataSourceVersion, setDataSourceVersion] = useState<
-    string | undefined
-  >(undefined);
-  useEffect(() => {
-    async function getVersion() {
-      if (dataSourceId !== undefined) {
-        setDataSourceVersion(await getEffectiveVersion(dataSourceId));
-      }
-    }
-    getVersion();
-  }, [dataSourceId]);
-  const isPreV219 =
-    dataSourceVersion !== undefined
-      ? semver.lt(dataSourceVersion, MINIMUM_FULL_SUPPORTED_VERSION)
-      : false;
+  const dataSourceVersion = useDataSourceVersion(dataSourceId);
+  const isPreV219 = getIsPreV219(dataSourceVersion);
 
   // transient running states
   const [isUpdatingSearchPipeline, setIsUpdatingSearchPipeline] = useState<

public/pages/workflows/workflows.tsx

@@ -38,8 +38,8 @@ import { DataSourceSelectableConfig } from '../../../../../src/plugins/data_sour
 import {
   dataSourceFilterFn,
   getDataSourceFromURL,
-  getEffectiveVersion,
   isDataSourceReady,
+  useDataSourceVersion,
 } from '../../utils/utils';
 import {
   getDataSourceManagementPlugin,
@@ -91,17 +91,7 @@ export function Workflows(props: WorkflowsProps) {
   const [dataSourceId, setDataSourceId] = useState<string | undefined>(
     queryParams.dataSourceId
   );
-  const [dataSourceVersion, setDataSourceVersion] = useState<
-    string | undefined
-  >(undefined);
-  useEffect(() => {
-    async function getVersion() {
-      if (dataSourceId !== undefined) {
-        setDataSourceVersion(await getEffectiveVersion(dataSourceId));
-      }
-    }
-    getVersion();
-  }, [dataSourceId]);
+  const dataSourceVersion = useDataSourceVersion(dataSourceId);
   const { workflows, loading } = useSelector(
     (state: AppState) => state.workflows
   );

public/utils/utils.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import yaml from 'js-yaml';
 import jsonpath from 'jsonpath';
 import { capitalize, escape, findKey, get, isEmpty, set, unset } from 'lodash';
@@ -43,6 +43,7 @@ import {
   MODEL_ID_PATTERN,
   WORKFLOW_TYPE,
   MIN_SUPPORTED_VERSION,
+  MINIMUM_FULL_SUPPORTED_VERSION,
 } from '../../common';
 import {
   getCore,
@@ -528,6 +529,29 @@ export const getDataSourceId = () => {
   return mdsQueryParams.dataSourceId;
 };
 
+export function useDataSourceVersion(
+  dataSourceId: string | undefined
+): string | undefined {
+  const [dataSourceVersion, setDataSourceVersion] = useState<
+    string | undefined
+  >(undefined);
+  useEffect(() => {
+    async function getVersion() {
+      if (dataSourceId !== undefined) {
+        setDataSourceVersion(await getEffectiveVersion(dataSourceId));
+      }
+    }
+    getVersion();
+  }, [dataSourceId]);
+  return dataSourceVersion;
+}
+
+export function getIsPreV219(dataSourceVersion: string | undefined): boolean {
+  return dataSourceVersion !== undefined
+    ? semver.lt(dataSourceVersion, MINIMUM_FULL_SUPPORTED_VERSION)
+    : false;
+}
+
 export const isDataSourceReady = (dataSourceId?: string) => {
   const dataSourceEnabled = getDataSourceEnabled().enabled;
   return !dataSourceEnabled || (dataSourceId && dataSourceId !== '');