feat(templates): Adding connections list in create panel and componen…

…t for create connection (#5013) * feat(templates): Adding Connections panel with create connection component * Fixing tests --------- Co-authored-by: Priti Sambandam <[email protected]>
Azure · Jun 24, 2024 · afe3cd3 · afe3cd3
1 parent 486b749
commit afe3cd3
Show file tree

Hide file tree

Showing 23 changed files with 706 additions and 173 deletions.
diff --git a/Localize/lang/strings.json b/Localize/lang/strings.json
@@ -879,6 +879,7 @@
   "Xj4xwI": "The managed identity used with this operation no longer exists. To continue, select an available identity or change the connection.",
   "XkBxv5": "Select a target schema",
   "Xkt2vD": "Select a function app function",
+  "Xld9qI": "Configure connections to authenticate the following services and link your workflows with various services and applications, enabling seamless data integration and automation. Connections are required.",
   "Xnn0uj": "Request",
   "XqamWZ": "Delete",
   "Xs7Uvt": "By Microsoft",
@@ -1823,6 +1824,7 @@
   "_Xj4xwI.comment": "Erorr mesade when managed identity is not present in logic apps",
   "_XkBxv5.comment": "Target schema dropdown placeholder",
   "_Xkt2vD.comment": "Label for function app selection",
+  "_Xld9qI.comment": "Message to describe the connections tab",
   "_Xnn0uj.comment": "Header text for request",
   "_XqamWZ.comment": "Label of Delete Token Button",
   "_Xs7Uvt.comment": "Panel description for stating it was created by Microsoft",
@@ -2057,6 +2059,7 @@
   "_hZqQdt.comment": "Time zone value ",
   "_hbOvB4.comment": "Dislike button text for suggested flow",
   "_hihfHd.comment": "Error validation message integers",
+  "_hlrKDC.comment": "Column name for connection display name",
   "_hq1mk6.comment": "Error while parsing expression for path value",
   "_hrbDu6.comment": "Label text for retry duration",
   "_hsZ7em.comment": "An accessability label that describes the connections tab",
@@ -2358,6 +2361,7 @@
   "_t+XCkg.comment": "Required string parameter for destination time zone",
   "_t/RPwA.comment": "shows how many results are returned after search",
   "_t2Xi1/.comment": "tree showing schema nodes",
+  "_t7ytOJ.comment": "Column name for connection status",
   "_t9RwOi.comment": "Invalid expression alert",
   "_tAbbH8.comment": "Title for a too many inputs card",
   "_tAeKNh.comment": "Function display radio group option for simple",
@@ -2369,6 +2373,7 @@
   "_tMRPnG.comment": "Label for description of custom workflow Function",
   "_tMdcE1.comment": "Error message to show on connection error during deserialization",
   "_tNoZx2.comment": "Parameter Field Type Title",
+  "_tRe2Ct.comment": "Column name for connector name",
   "_tTIsTX.comment": "Chatbot suggestion button to test this workflow",
   "_tUCptx.comment": "label to insert link",
   "_tUU4ak.comment": "Time zone value ",
@@ -2714,6 +2719,7 @@
   "hZqQdt": "(UTC+02:00) Gaza, Hebron",
   "hbOvB4": "This isn't what I'm looking for",
   "hihfHd": "The value is too large.",
+  "hlrKDC": "Connection",
   "hq1mk6": "Operation path value does not match the template for segment. Path {pathValue}, Template {pathTemplate}",
   "hrbDu6": "Duration",
   "hsZ7em": "Connections Tab",
@@ -3015,6 +3021,7 @@
   "t+XCkg": "Required. A string that contains the time zone name of the destination time zone. See https://msdn.microsoft.com/en-us/library/gg154758.aspx for details.",
   "t/RPwA": "results found",
   "t2Xi1/": "Schema tree",
+  "t7ytOJ": "Status",
   "t9RwOi": "The expression is invalid.",
   "tAbbH8": "Too many inputs assigned",
   "tAeKNh": "Simple",
@@ -3026,6 +3033,7 @@
   "tMRPnG": "This function provides you details for the workflow itself at runtime",
   "tMdcE1": "Invalid connection, please update your connection to load complete details",
   "tNoZx2": "Type",
+  "tRe2Ct": "Name",
   "tTIsTX": "Test this workflow",
   "tUCptx": "Insert Link",
   "tUU4ak": "(UTC+11:00) Chokurdakh",

diff --git a/apps/Standalone/src/templates/app/TemplatesStandaloneDesigner.tsx b/apps/Standalone/src/templates/app/TemplatesStandaloneDesigner.tsx
@@ -25,7 +25,7 @@ import { HttpClient } from '../../designer/app/AzureLogicAppsDesigner/Services/H
 // import { saveWorkflowStandard } from '../../designer/app/AzureLogicAppsDesigner/Services/WorkflowAndArtifacts';
 // import type { ParametersData } from '../../designer/app/AzureLogicAppsDesigner/Models/Workflow';
 import { useNavigate } from 'react-router-dom';
-import type { Template, LogicAppsV2 } from '@microsoft/logic-apps-shared';
+import type { Template, LogicAppsV2, IWorkflowService } from '@microsoft/logic-apps-shared';
 import { saveWorkflowStandard } from '../../designer/app/AzureLogicAppsDesigner/Services/WorkflowAndArtifacts';
 import type { ParametersData } from '../../designer/app/AzureLogicAppsDesigner/Models/Workflow';
 import axios from 'axios';
@@ -46,7 +46,7 @@ export const TemplatesStandaloneDesigner = () => {
   const navigate = useNavigate();
 
   // const navigate = useNavigate();
-
+  const connectionReferences = WorkflowUtility.convertConnectionsDataToReferences(connectionsData);
   const sanitizeParameterName = (parameterName: string, workflowName: string) =>
     parameterName.replace('_#workflowname#', `_${workflowName}`);
 
@@ -171,6 +171,7 @@ export const TemplatesStandaloneDesigner = () => {
               resourceGroup: resourceDetails.resourceGroup,
               location: canonicalLocation,
             }}
+            connectionReferences={connectionReferences}
             services={services}
             isConsumption={isConsumption}
             existingWorkflowName={existingWorkflowName}
@@ -237,11 +238,16 @@ const getServices = (
     tenantId,
     objectId,
   });
+  const workflowService: IWorkflowService = {
+    getCallbackUrl: () => Promise.resolve({} as any),
+    getAppIdentity: () => workflowApp?.identity as any,
+  };
 
   return {
     connectionService,
     gatewayService,
     tenantService,
     oAuthService,
+    workflowService,
   };
 };
diff --git a/libs/designer-ui/src/lib/templates/templates.less b/libs/designer-ui/src/lib/templates/templates.less
@@ -109,4 +109,49 @@
       min-height: 24px;
     }
 }
+
+.msla-template-create-tabs {
+    padding: 30px 0 30px 0;
+    .msla-template-create-tabs-description {
+        padding: 20px 10px 10px 0;
+    }
+
+    .msla-template-create-connector {
+
+        .msla-template-create-connector-icon {
+            position: relative;
+            top: 2px;
+            width: 20px;
+            height: 20px;
+        }
+
+        .msla-template-create-connector-text {
+            position: relative;
+            top: -3px;
+            padding-left: 10px;
+        }
+    }
+
+    .msla-template-connection-status {
+        .msla-template-connection-status-badge {
+            margin: 6px 8px 0 0;
+            font-size: 14px;
+        }
+
+        .msla-template-connection-status-text {
+            position: relative;
+            top: -3px;
+        }
+    }
+
+    .msla-template-connection-text {
+        margin-top: 3px;
+    }
+
+    .msla-template-create-progress-connector {
+        display: flex;
+        position: relative;
+        top: 5px;
+    }
+}
 
diff --git a/libs/designer-ui/src/lib/templates/templatesParametersField.less b/libs/designer-ui/src/lib/templates/templatesParametersField.less
diff --git a/libs/designer/src/lib/core/actions/bjsworkflow/connections.ts b/libs/designer/src/lib/core/actions/bjsworkflow/connections.ts
@@ -5,7 +5,9 @@ import type { DeserializedWorkflow } from '../../parsers/BJSWorkflow/BJSDeserial
 import { getConnection } from '../../queries/connections';
 import { getConnector, getOperationInfo, getOperationManifest } from '../../queries/operation';
 import { changeConnectionMapping, initializeConnectionsMappings } from '../../state/connection/connectionSlice';
+import { changeConnectionMapping as changeTemplateConnectionMapping } from '../../state/templates/workflowSlice';
 import { updateErrorDetails } from '../../state/operation/operationMetadataSlice';
+import type { RootState as TemplateRootState } from '../../state/templates/store';
 import type { RootState } from '../../store';
 import {
   getConnectionReference,
@@ -54,6 +56,25 @@ export interface UpdateConnectionPayload {
   connectionRuntimeUrl?: string;
 }
 
+export const updateTemplateConnection = createAsyncThunk(
+  'updateTemplateConnection',
+  async (payload: ConnectionPayload, { dispatch, getState }): Promise<void> => {
+    const { nodeId, connector, connection, connectionProperties, authentication } = payload;
+    dispatch(
+      changeTemplateConnectionMapping({
+        nodeId,
+        connectorId: connector.id,
+        connectionId: connection.id,
+        authentication: authentication ?? getApiHubAuthenticationIfRequired(),
+        connectionProperties: connectionProperties ?? getConnectionPropertiesIfRequired(connection, connector),
+        connectionRuntimeUrl: isOpenApiSchemaVersion((getState() as TemplateRootState).template.workflowDefinition)
+          ? connection.properties.connectionRuntimeUrl
+          : undefined,
+      })
+    );
+  }
+);
+
 export const updateNodeConnection = createAsyncThunk(
   'updateNodeConnection',
   async (payload: ConnectionPayload, { dispatch, getState }): Promise<void> => {

diff --git a/libs/designer/src/lib/core/queries/connections.ts b/libs/designer/src/lib/core/queries/connections.ts
@@ -68,10 +68,10 @@ export const useAllConnections = (): UseQueryResult<Connection[], unknown> => {
   });
 };
 
-export const useConnectionsForConnector = (connectorId: string) => {
+export const useConnectionsForConnector = (connectorId: string, shouldNotRefetch?: boolean) => {
   return useQuery([connectionKey, connectorId?.toLowerCase()], () => ConnectionService().getConnections(connectorId), {
     enabled: !!connectorId,
-    refetchOnMount: true,
+    refetchOnMount: !shouldNotRefetch && true,
     cacheTime: 0,
     staleTime: 0,
   });

diff --git a/libs/designer/src/lib/core/state/connection/connectionSlice.ts b/libs/designer/src/lib/core/state/connection/connectionSlice.ts
@@ -1,7 +1,8 @@
+import { getExistingReferenceKey } from '../../utils/connectors/connections';
 import type { ConnectionMapping, ConnectionReference, ConnectionReferences, NodeId, ReferenceKey } from '../../../common/models/workflow';
 import type { UpdateConnectionPayload } from '../../actions/bjsworkflow/connections';
 import { resetWorkflowState } from '../global';
-import { LogEntryLevel, LoggerService, deepCompareObjects, equals, getUniqueName } from '@microsoft/logic-apps-shared';
+import { LogEntryLevel, LoggerService, getUniqueName } from '@microsoft/logic-apps-shared';
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 
@@ -29,15 +30,7 @@ export const connectionSlice = createSlice({
     },
     changeConnectionMapping: (state, action: PayloadAction<UpdateConnectionPayload>) => {
       const { nodeId, connectionId, connectorId, connectionProperties, connectionRuntimeUrl, authentication } = action.payload;
-      const existingReferenceKey = Object.keys(state.connectionReferences).find((referenceKey) => {
-        const reference = state.connectionReferences[referenceKey];
-        return (
-          equals(reference.api.id, connectorId) &&
-          equals(reference.connection.id, connectionId) &&
-          equals(reference.connectionRuntimeUrl ?? '', connectionRuntimeUrl ?? '') &&
-          deepCompareObjects(reference.connectionProperties, connectionProperties)
-        );
-      });
+      const existingReferenceKey = getExistingReferenceKey(state.connectionReferences, action.payload);
 
       if (existingReferenceKey) {
         state.connectionsMapping[nodeId] = existingReferenceKey;

diff --git a/libs/designer/src/lib/core/state/templates/templateSlice.ts b/libs/designer/src/lib/core/state/templates/templateSlice.ts
@@ -11,6 +11,7 @@ import {
   getRecordEntry,
   type LogicAppsV2,
   type Template,
+  InitWorkflowService,
 } from '@microsoft/logic-apps-shared';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
@@ -55,6 +56,7 @@ export const initializeTemplateServices = createAsyncThunk(
   'initializeTemplateServices',
   async ({
     connectionService,
+    workflowService,
     oAuthService,
     gatewayService,
     tenantService,
@@ -65,6 +67,7 @@ export const initializeTemplateServices = createAsyncThunk(
   }: TemplateServiceOptions) => {
     InitConnectionService(connectionService);
     InitOAuthService(oAuthService);
+    InitWorkflowService(workflowService);
 
     if (gatewayService) {
       InitGatewayService(gatewayService);
@@ -233,7 +236,7 @@ const loadTemplateFromGithub = async (templateName: string, manifest: Template.M
       workflowDefinition: (templateWorkflowDefinition as any)?.default ?? templateWorkflowDefinition,
       manifest: templateManifest,
       workflowName: templateManifest.title,
-      kind: templateManifest.kinds.length === 1 ? templateManifest.kinds[0] : undefined,
+      kind: templateManifest.kinds?.length === 1 ? templateManifest.kinds[0] : undefined,
       parameters: {
         definitions: parametersDefinitions,
         validationErrors: {},

diff --git a/libs/designer/src/lib/core/state/templates/workflowSlice.ts b/libs/designer/src/lib/core/state/templates/workflowSlice.ts
@@ -1,5 +1,8 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
+import type { ConnectionReferences } from '../../../common/models/workflow';
+import type { UpdateConnectionPayload } from '../../actions/bjsworkflow/connections';
+import { getExistingReferenceKey } from '../../utils/connectors/connections';
 
 export interface ResourceDetails {
   subscriptionId: string;
@@ -13,13 +16,21 @@ export interface WorkflowState {
   subscriptionId: string;
   resourceGroup: string;
   location: string;
+  connections: {
+    references: ConnectionReferences;
+    mapping: Record<string, string>;
+  };
 }
 
 const initialState: WorkflowState = {
   isConsumption: false,
   subscriptionId: '',
   resourceGroup: '',
   location: '',
+  connections: {
+    references: {},
+    mapping: {},
+  },
 };
 
 export const workflowSlice = createSlice({
@@ -41,8 +52,41 @@ export const workflowSlice = createSlice({
       state.isConsumption = action.payload;
       state.existingWorkflowName = undefined;
     },
+    initializeConnectionReferences: (state, action: PayloadAction<ConnectionReferences>) => {
+      const references = action.payload;
+      state.connections.references = references;
+      state.connections.mapping = Object.keys(references).reduce((result: Record<string, string>, key: string) => {
+        result[key] = key;
+        return result;
+      }, {});
+    },
+    changeConnectionMapping: (state, action: PayloadAction<UpdateConnectionPayload>) => {
+      const { nodeId: key, connectionId, connectorId, connectionProperties, connectionRuntimeUrl, authentication } = action.payload;
+      const existingReferenceKey = getExistingReferenceKey(state.connections.references, action.payload);
+
+      if (existingReferenceKey) {
+        state.connections.mapping[key] = existingReferenceKey;
+      } else {
+        state.connections.references[key] = {
+          api: { id: connectorId },
+          connection: { id: connectionId },
+          connectionName: connectionId.split('/').at(-1) as string,
+          connectionProperties,
+          connectionRuntimeUrl,
+          authentication,
+        };
+        state.connections.mapping[key] = key;
+      }
+    },
   },
 });
 
-export const { setExistingWorkflowName, setResourceDetails, clearWorkflowDetails, setConsumption } = workflowSlice.actions;
+export const {
+  setExistingWorkflowName,
+  setResourceDetails,
+  clearWorkflowDetails,
+  setConsumption,
+  initializeConnectionReferences,
+  changeConnectionMapping,
+} = workflowSlice.actions;
 export default workflowSlice.reducer;