feat(designer): [ConnectionCreation] Adding hidden parameter field in ConnectionCreationInfo to pass selected credential id

libs/designer/src/lib/ui/panel/connectionsPanel/createConnection/_test__/createConnection.spec.tsx

@@ -1,5 +1,5 @@
 import { MockHttpClient } from '../../../../../__test__/mock-http-client';
-import { CreateConnection, type CreateConnectionProps } from '../createConnection';
+import { CreateConnection, parseParameterValues, type CreateConnectionProps } from '../createConnection';
 import { UniversalConnectionParameter } from '../formInputs/universalConnectionParameter';
 import {
   InitConnectionParameterEditorService,
@@ -578,6 +578,35 @@ describe('ui/createConnection', () => {
       const mappingEditors = findParameterComponents(createConnection, CustomCredentialMappingEditor);
       expect(mappingEditors).toHaveLength(0);
     });
+
+    test('parseParameterValues', () => {
+      const parameterValues: Record<string, any> = {
+        a: 'foobar',
+        b: 42,
+        c: null,
+        d: undefined,
+        e: { foo: 'bar' },
+        f: ['id', 66],
+      };
+      const capabilityEnabledParameters: Record<string, ConnectionParameter> = {
+        a: { type: 'connection' },
+        z: { type: 'other' },
+      };
+
+      const { visibleParameterValues, additionalParameterValues } = parseParameterValues(parameterValues, capabilityEnabledParameters);
+      expect(visibleParameterValues).toStrictEqual({ a: 'foobar' });
+      expect(additionalParameterValues).toStrictEqual({
+        b: 42,
+        c: null,
+        d: undefined,
+        e: { foo: 'bar' },
+        f: ['id', 66],
+      });
+
+      const emptyParameters = parseParameterValues({}, capabilityEnabledParameters);
+      expect(emptyParameters.visibleParameterValues).toStrictEqual({});
+      expect(emptyParameters.additionalParameterValues).toStrictEqual({});
+    });
   });
 
   function findConnectionCreateDiv(createConnection: ReactElement) {

libs/designer/src/lib/ui/panel/connectionsPanel/createConnection/createConnection.tsx

@@ -60,7 +60,8 @@ export interface CreateConnectionProps {
     parameterValues?: Record<string, any>,
     isOAuthConnection?: boolean,
     alternativeParameterValues?: Record<string, any>,
-    identitySelected?: string
+    identitySelected?: string,
+    additionalParameterValues?: Record<string, any>
   ) => void;
   cancelCallback?: () => void;
   hideCancelButton?: boolean;
@@ -301,9 +302,7 @@ export const CreateConnection = (props: CreateConnectionProps) => {
   const canSubmit = useMemo(() => !isLoading && validParams, [isLoading, validParams]);
 
   const submitCallback = useCallback(() => {
-    const visibleParameterValues = Object.fromEntries(
-      Object.entries(parameterValues).filter(([key]) => Object.keys(capabilityEnabledParameters).includes(key)) ?? []
-    );
+    const { visibleParameterValues, additionalParameterValues } = parseParameterValues(parameterValues, capabilityEnabledParameters);
 
     // This value needs to be passed conditionally but the parameter is hidden, so we're manually inputting it here
     if (
@@ -326,7 +325,8 @@ export const CreateConnection = (props: CreateConnectionProps) => {
       visibleParameterValues,
       isUsingOAuth,
       alternativeParameterValues,
-      identitySelected
+      identitySelected,
+      additionalParameterValues
     );
   }, [
     parameterValues,
@@ -654,3 +654,17 @@ const isServicePrincipalParameterVisible = (key: string, parameter: any): boolea
   if (constraints?.hidden === 'true' || constraints?.hideInUI === 'true') return false;
   return true;
 };
+
+export function parseParameterValues(
+  parameterValues: Record<string, any>,
+  capabilityEnabledParameters: Record<string, ConnectionParameter | ConnectionParameterSetParameter>
+) {
+  const visibleParameterValues = Object.fromEntries(
+    Object.entries(parameterValues).filter(([key]) => Object.keys(capabilityEnabledParameters).includes(key)) ?? []
+  );
+  const additionalParameterValues = Object.fromEntries(
+    Object.entries(parameterValues).filter(([key]) => !Object.keys(capabilityEnabledParameters).includes(key)) ?? []
+  );
+
+  return { visibleParameterValues, additionalParameterValues };
+}

libs/designer/src/lib/ui/panel/connectionsPanel/createConnection/createConnectionWrapper.tsx

@@ -129,7 +129,8 @@ export const CreateConnectionWrapper = () => {
       parameterValues: Record<string, any> = {},
       isOAuthConnection?: boolean,
       alternativeParameterValues?: Record<string, any>,
-      identitySelected?: string
+      identitySelected?: string,
+      additionalParameterValues?: Record<string, any>
     ) => {
       if (!connector?.id) return;
 
@@ -188,6 +189,7 @@ export const CreateConnectionWrapper = () => {
             : undefined,
           connectionParameters: outputParameterValues,
           alternativeParameterValues,
+          additionalParameterValues,
         };
 
         const parametersMetadata: ConnectionParametersMetadata = {

libs/services/designer-client-services/src/lib/connection.ts

@@ -21,6 +21,7 @@ export interface ConnectionCreationInfo {
   displayName?: string;
   parameterName?: string;
   appSettings?: Record<string, string>;
+  additionalParameterValues?: Record<string, string>;
 }
 
 export interface ConnectionParametersMetadata {

libs/services/designer-client-services/src/lib/standard/connection.ts

@@ -48,6 +48,7 @@ interface ServiceProviderConnectionModel {
   };
   parameterSetName?: string;
   displayName?: string;
+  additionalParameterValues?: Record<string, string>;
 }
 
 interface FunctionsConnectionModel {
@@ -605,6 +606,7 @@ function convertToServiceProviderConnectionsData(
     displayName,
     connectionParameters: connectionParameterValues,
     connectionParametersSet: connectionParametersSetValues,
+    additionalParameterValues,
   } = connectionInfo;
   const connectionParameters = connectionParametersSetValues
     ? connectionParameterMetadata.connectionParameterSet?.parameters
@@ -626,6 +628,7 @@ function convertToServiceProviderConnectionsData(
       ...optional('parameterSetName', connectionParametersSetValues?.name),
       serviceProvider: { id: connectorId },
       displayName,
+      ...optional('additionalParameterValues', additionalParameterValues),
     },
     settings: connectionInfo.appSettings ?? {},
     pathLocation: [serviceProviderLocation],