Merge branch 'main' into travjenkins/opsLogs7

src/api/connectors.ts

@@ -1,16 +1,16 @@
 import {
-    ConnectorWithTagDetailQuery,
     CONNECTOR_WITH_TAG_QUERY,
+    ConnectorWithTagDetailQuery,
 } from 'hooks/useConnectorWithTagDetail';
 import {
     CONNECTOR_NAME,
     CONNECTOR_RECOMMENDED,
+    TABLES,
     defaultTableFilter,
     handleFailure,
     handleSuccess,
     supabaseClient,
     supabaseRetry,
-    TABLES,
 } from 'services/supabase';
 import { SortDirection } from 'types';
 
@@ -46,15 +46,17 @@ const getConnectors = (
 };
 
 // Hydration-specific queries
+export interface ConnectorTag_Base {
+    id: string;
+    connector_id: string;
+    image_tag: string;
+}
+
 export interface ConnectorsQuery_DetailsForm {
     id: string;
     image_name: string;
     logo_url: string;
-    connector_tags: {
-        id: string;
-        connector_id: string;
-        image_tag: string;
-    }[];
+    connector_tags: ConnectorTag_Base[];
 }
 
 const DETAILS_FORM_QUERY = `

src/components/shared/Entity/DetailsForm/Form.tsx

@@ -17,6 +17,8 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import defaultRenderers from 'services/jsonforms/defaultRenderers';
 import { defaultOptions, showValidation } from 'services/jsonforms/shared';
 import {
+    useDetailsForm_changed_connectorId,
+    useDetailsForm_connectorImage_imagePath,
     useDetailsForm_details,
     useDetailsForm_setDetails,
     useDetailsForm_setDetails_connector,
@@ -30,17 +32,24 @@ import {
     useFormStateStore_messagePrefix,
 } from 'stores/FormState/hooks';
 import { hasLength } from 'utils/misc-utils';
+import {
+    ConnectorVersionEvaluationOptions,
+    evaluateConnectorVersions,
+} from 'utils/workflow-utils';
 
 export const CONFIG_EDITOR_ID = 'endpointConfigEditor';
 
 export const getConnectorImageDetails = (
-    connector: ConnectorWithTagDetailQuery
+    connector: ConnectorWithTagDetailQuery,
+    options?: { connectorId: string; existingImageTag: string }
 ): Details['data']['connectorImage'] => {
+    const connectorTag = evaluateConnectorVersions(connector, options);
+
     return {
         connectorId: connector.id,
-        id: connector.connector_tags[0].id,
+        id: connectorTag.id,
         imageName: connector.image_name,
-        imagePath: `${connector.image_name}${connector.connector_tags[0].image_tag}`,
+        imagePath: `${connector.image_name}${connectorTag.image_tag}`,
         iconPath: connector.image,
     };
 };
@@ -54,6 +63,9 @@ function DetailsFormForm({ connectorTags, entityType, readOnly }: Props) {
     const formData = useDetailsForm_details();
     const { connectorImage: originalConnectorImage } = formData;
 
+    const connectorImagePath = useDetailsForm_connectorImage_imagePath();
+    const connectorIdChanged = useDetailsForm_changed_connectorId();
+
     const setDetails = useDetailsForm_setDetails();
     const setDetails_connector = useDetailsForm_setDetails_connector();
     const setEntityNameChanged = useDetailsForm_setEntityNameChanged();
@@ -70,33 +82,55 @@ function DetailsFormForm({ connectorTags, entityType, readOnly }: Props) {
     const isEdit = useEntityWorkflow_Editing();
 
     useEffect(() => {
-        if (connectorId && hasLength(connectorTags)) {
+        if (connectorId && hasLength(connectorTags) && connectorIdChanged) {
             connectorTags.find((connector) => {
-                const response =
-                    connector.connector_tags[0].connector_id === connectorId;
+                const connectorTag = evaluateConnectorVersions(connector);
+
+                const connectorLocated =
+                    connectorTag.connector_id === connectorId;
 
-                if (response) {
+                if (connectorLocated) {
                     setDetails_connector(getConnectorImageDetails(connector));
                 }
-                return response;
+
+                return connectorLocated;
             });
         }
-    }, [setDetails_connector, connectorId, connectorTags]);
+    }, [setDetails_connector, connectorId, connectorIdChanged, connectorTags]);
+
+    const versionEvaluationOptions:
+        | ConnectorVersionEvaluationOptions
+        | undefined = useMemo(() => {
+        const imageTagStartIndex = connectorImagePath.indexOf(':');
+
+        return isEdit && hasLength(connectorId) && imageTagStartIndex > 0
+            ? {
+                  connectorId,
+                  existingImageTag: connectorImagePath.substring(
+                      imageTagStartIndex,
+                      connectorImagePath.length
+                  ),
+              }
+            : undefined;
+    }, [connectorId, connectorImagePath, isEdit]);
 
     const connectorsOneOf = useMemo(() => {
         const response = [] as { title: string; const: Object }[];
 
         if (connectorTags.length > 0) {
             connectorTags.forEach((connector) => {
                 response.push({
-                    const: getConnectorImageDetails(connector),
+                    const: getConnectorImageDetails(
+                        connector,
+                        versionEvaluationOptions
+                    ),
                     title: connector.title,
                 });
             });
         }
 
         return response;
-    }, [connectorTags]);
+    }, [connectorTags, versionEvaluationOptions]);
 
     const schema = useMemo(() => {
         return {

src/hooks/useConnectorWithTagDetail.ts

@@ -1,3 +1,4 @@
+import { ConnectorTag_Base } from 'api/connectors';
 import {
     CONNECTOR_NAME,
     CONNECTOR_RECOMMENDED,
@@ -6,16 +7,15 @@ import {
 import { EntityWithCreateWorkflow } from 'types';
 import { useQuery, useSelect } from './supabase-swr';
 
+export interface ConnectorTag extends ConnectorTag_Base {
+    documentation_url: string;
+    protocol: EntityWithCreateWorkflow;
+    image_name: string;
+    title: string;
+}
+
 export interface ConnectorWithTagDetailQuery {
-    connector_tags: {
-        documentation_url: string;
-        protocol: EntityWithCreateWorkflow;
-        image_tag: string;
-        image_name: string;
-        id: string;
-        connector_id: string;
-        title: string;
-    }[];
+    connector_tags: ConnectorTag[];
     id: string;
     detail: string;
     image_name: string;

src/stores/DetailsForm/Store.ts

@@ -18,8 +18,9 @@ import {
 } from 'stores/extensions/Hydration';
 import { DetailsFormStoreNames } from 'stores/names';
 import { devtoolsOptions } from 'utils/store-utils';
-import { createStore, StoreApi } from 'zustand';
-import { devtools, NamedSet } from 'zustand/middleware';
+import { evaluateConnectorVersions } from 'utils/workflow-utils';
+import { StoreApi, createStore } from 'zustand';
+import { NamedSet, devtools } from 'zustand/middleware';
 
 const STORE_KEY = 'Details Form';
 
@@ -193,13 +194,16 @@ export const getInitialState = (
                 if (!error && data && data.length > 0) {
                     const { setDetails_connector, setPreviousDetails } = get();
 
-                    const { image_name, logo_url, connector_tags } = data[0];
+                    const connector = data[0];
+
+                    const { image_name, logo_url } = connector;
+                    const connectorTag = evaluateConnectorVersions(connector);
 
                     const connectorImage: Details['data']['connectorImage'] = {
                         connectorId,
-                        id: connector_tags[0].id,
+                        id: connectorTag.id,
                         imageName: image_name,
-                        imagePath: `${image_name}${connector_tags[0].image_tag}`,
+                        imagePath: `${image_name}${connectorTag.image_tag}`,
                         iconPath: logo_url,
                     };
 

src/stores/DetailsForm/hooks.ts

@@ -1,5 +1,8 @@
 import { useEntityType } from 'context/EntityContext';
 import { useZustandStore } from 'context/Zustand/provider';
+import useGlobalSearchParams, {
+    GlobalSearchParams,
+} from 'hooks/searchParams/useGlobalSearchParams';
 import { DetailsFormState } from 'stores/DetailsForm/types';
 import { DetailsFormStoreNames } from 'stores/names';
 import { Entity } from 'types';
@@ -236,6 +239,23 @@ export const useDetailsForm_changed = () => {
     );
 };
 
+export const useDetailsForm_changed_connectorId = () => {
+    const connectorId = useGlobalSearchParams(GlobalSearchParams.CONNECTOR_ID);
+    const entityType = useEntityType();
+
+    return useZustandStore<DetailsFormState, boolean>(
+        getStoreName(entityType),
+        (state) =>
+            state.details.data.connectorImage.connectorId !==
+                state.previousDetails.data.connectorImage.connectorId ||
+            Boolean(
+                connectorId &&
+                    connectorId !==
+                        state.details.data.connectorImage.connectorId
+            )
+    );
+};
+
 export const useDetailsForm_customErrors = () => {
     const entityType = useEntityType();
 

src/utils/workflow-utils.ts

@@ -1,3 +1,4 @@
+import { ConnectorTag_Base, ConnectorsQuery_DetailsForm } from 'api/connectors';
 import {
     DraftSpecsExtQuery_ByCatalogName,
     modifyDraftSpec,
@@ -7,6 +8,10 @@ import {
     FullSource,
     FullSourceDictionary,
 } from 'components/editor/Bindings/Store/types';
+import {
+    ConnectorTag,
+    ConnectorWithTagDetailQuery,
+} from 'hooks/useConnectorWithTagDetail';
 import { DraftSpecQuery } from 'hooks/useDraftSpecs';
 import { isBoolean, isEmpty } from 'lodash';
 import { CallSupabaseResponse } from 'services/supabase';
@@ -301,3 +306,37 @@ export const evaluateRecommendedIncludedFields = (
         constraintType === ConstraintTypes.LOCATION_RECOMMENDED
     );
 };
+
+export interface ConnectorVersionEvaluationOptions {
+    connectorId: string;
+    existingImageTag: string;
+}
+
+export function evaluateConnectorVersions(
+    connector: ConnectorWithTagDetailQuery,
+    options?: ConnectorVersionEvaluationOptions
+): ConnectorTag;
+export function evaluateConnectorVersions(
+    connector: ConnectorsQuery_DetailsForm,
+    options?: ConnectorVersionEvaluationOptions
+): ConnectorTag_Base;
+export function evaluateConnectorVersions(
+    connector: ConnectorWithTagDetailQuery | ConnectorsQuery_DetailsForm,
+    options?: ConnectorVersionEvaluationOptions
+): ConnectorTag | ConnectorTag_Base {
+    // Return the version of the connector that is used by the existing task in an edit workflow.
+    if (options && options.connectorId === connector.id) {
+        const connectorsInUse = connector.connector_tags.filter(
+            (version) => version.image_tag === options.existingImageTag
+        );
+
+        if (hasLength(connectorsInUse)) {
+            return connectorsInUse[0];
+        }
+    }
+
+    // Return the latest version of a given connector in a create workflow.
+    return connector.connector_tags.sort((a, b) =>
+        b.image_tag.localeCompare(a.image_tag)
+    )[0];
+}