feat(designer): Adding support for recently used connection for a connector (#5612)

Co-authored-by: Priti Sambandam <[email protected]>

Author: preetriti1

apps/Standalone/src/designer/app/AzureLogicAppsDesigner/laDesigner.tsx

@@ -65,6 +65,7 @@ import type { QueryClient } from '@tanstack/react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHostingPlan } from '../../state/workflowLoadingSelectors';
 import CodeViewEditor from './CodeView';
+import { BaseUserPreferenceService } from '@microsoft/logic-apps-shared';
 
 const apiVersion = '2020-06-01';
 const httpClient = new HttpClient();
@@ -779,6 +780,7 @@ const getDesignerServices = (
     hostService,
     chatbotService,
     customCodeService,
+    userPreferenceService: new BaseUserPreferenceService(),
   };
 };
 

apps/Standalone/src/designer/app/AzureLogicAppsDesigner/laDesignerConsumption.tsx

@@ -35,6 +35,7 @@ import {
   guid,
   startsWith,
   StandardCustomCodeService,
+  BaseUserPreferenceService,
 } from '@microsoft/logic-apps-shared';
 import type { CustomCodeFileNameMapping, Workflow } from '@microsoft/logic-apps-designer';
 import {
@@ -547,6 +548,7 @@ const getDesignerServices = (
     hostService,
     chatbotService,
     customCodeService,
+    userPreferenceService: new BaseUserPreferenceService(),
   };
 };
 

libs/designer/src/lib/core/actions/bjsworkflow/add.ts

@@ -47,8 +47,12 @@ import {
   getIconUriFromConnector,
   getRecordEntry,
   isNumber,
+  UserPreferenceService,
+  LoggerService,
+  LogEntryLevel,
 } from '@microsoft/logic-apps-shared';
 import type {
+  Connection,
   Connector,
   DiscoveryOperation,
   DiscoveryResultTypes,
@@ -313,8 +317,9 @@ export const trySetDefaultConnectionForNode = async (
   const connectorId = connector.id;
   const connections = (await getConnectionsForConnector(connectorId)).filter((c) => c.properties.overallStatus !== 'Error');
   if (connections.length > 0) {
-    await ConnectionService().setupConnectionIfNeeded(connections[0]);
-    dispatch(updateNodeConnection({ nodeId, connection: connections[0], connector }));
+    const connection = (await tryGetMostRecentlyUsedConnectionId(connectorId, connections)) ?? connections[0];
+    await ConnectionService().setupConnectionIfNeeded(connection);
+    dispatch(updateNodeConnection({ nodeId, connection, connector }));
   } else if (isConnectionRequired) {
     dispatch(initEmptyConnectionMap(nodeId));
     dispatch(openPanel({ nodeId, panelMode: 'Connection', referencePanelMode: 'Operation' }));
@@ -434,3 +439,23 @@ export const getNonDuplicateId = (existingActionNames: Record<string, string>, a
   }
   return nodeId;
 };
+
+export const tryGetMostRecentlyUsedConnectionId = async (
+  connectorId: string,
+  allConnections: Connection[]
+): Promise<Connection | undefined> => {
+  let connectionId: string | undefined;
+  // NOTE: If no connection is available from local storage, first connection will be selected by default.
+  try {
+    connectionId = await UserPreferenceService()?.getMostRecentlyUsedConnectionId(connectorId);
+  } catch (error: any) {
+    LoggerService().log({
+      level: LogEntryLevel.Warning,
+      message: `Failed to get most recently used connection id for the specified connector ${connectorId}.`,
+      area: 'OperationAddition',
+      error,
+    });
+  }
+
+  return connectionId ? allConnections.find((c) => equals(c.id, connectionId)) : undefined;
+};

libs/designer/src/lib/core/actions/bjsworkflow/connections.ts

@@ -35,6 +35,7 @@ import {
   equals,
   ConnectionReferenceKeyFormat,
   getRecordEntry,
+  UserPreferenceService,
 } from '@microsoft/logic-apps-shared';
 import type { Dispatch } from '@reduxjs/toolkit';
 import { createAsyncThunk } from '@reduxjs/toolkit';
@@ -81,6 +82,8 @@ export const updateNodeConnection = createAsyncThunk(
     const { nodeId, connector, connection, connectionProperties, authentication } = payload;
 
     dispatch(updateErrorDetails({ id: nodeId, clear: true }));
+
+    UserPreferenceService()?.setMostRecentlyUsedConnectionId(connector.id, connection.id);
     return updateNodeConnectionAndProperties(
       {
         nodeId,

libs/designer/src/lib/core/state/designerOptions/designerOptionsInterfaces.ts

@@ -21,6 +21,7 @@ import type {
   LogicApps,
   ICopilotService,
   IDesignerUiInteractionsService,
+  IUserPreferenceService,
 } from '@microsoft/logic-apps-shared';
 import type { MaximumWaitingRunsMetadata } from '../../../ui/settings';
 
@@ -71,4 +72,5 @@ export interface ServiceOptions {
   customCodeService?: ICustomCodeService;
   copilotService?: ICopilotService;
   uiInteractionsService?: IDesignerUiInteractionsService;
+  userPreferenceService?: IUserPreferenceService;
 }

libs/designer/src/lib/core/state/designerOptions/designerOptionsSlice.ts

@@ -22,6 +22,7 @@ import {
   InitCustomCodeService,
   InitCopilotService,
   InitUiInteractionsService,
+  InitUserPreferenceService,
 } from '@microsoft/logic-apps-shared';
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
@@ -68,6 +69,7 @@ export const initializeServices = createAsyncThunk(
     customCodeService,
     copilotService,
     uiInteractionsService,
+    userPreferenceService,
   }: ServiceOptions) => {
     const loggerServices: ILoggerService[] = [];
     if (loggerService) {
@@ -123,6 +125,10 @@ export const initializeServices = createAsyncThunk(
       InitUiInteractionsService(uiInteractionsService);
     }
 
+    if (userPreferenceService) {
+      InitUserPreferenceService(userPreferenceService);
+    }
+
     InitEditorService(editorService);
     InitConnectionParameterEditorService(connectionParameterEditorService);
 

libs/logic-apps-shared/src/designer-client-services/index.ts

@@ -28,3 +28,4 @@ export * from './lib/copilot';
 export * from './lib/customcode';
 export * from './lib/tenant';
 export * from './lib/uiInteractionsService';
+export * from './lib/userpreference';

libs/logic-apps-shared/src/designer-client-services/lib/base/index.ts

@@ -44,3 +44,5 @@ export type { TemplateServiceOptions } from './template';
 // Tenant
 export { BaseTenantService } from './tenant';
 export type { BaseTenantServiceOptions } from './tenant';
+
+export { BaseUserPreferenceService } from './userpreference';

libs/logic-apps-shared/src/designer-client-services/lib/base/userpreference.ts

@@ -0,0 +1,31 @@
+import type { IUserPreferenceService } from '../userpreference';
+
+/**
+ * The default user preference service.
+ */
+export class BaseUserPreferenceService implements IUserPreferenceService {
+  private _store: Storage | undefined;
+
+  constructor() {
+    this._store = typeof Storage !== 'undefined' ? localStorage : undefined;
+  }
+
+  /**
+   * Gets the most recently used connection id for the specified connector.
+   * @arg {string} connectorId - The connector id.
+   * @return {Promise<string | undefined>}
+   */
+  getMostRecentlyUsedConnectionId(connectorId: string): string | undefined {
+    return this._store?.getItem(connectorId.toLowerCase()) ?? undefined;
+  }
+
+  /**
+   * Sets the most recently used connection id for the specified connector.
+   * @arg {string} connectorId - The connector id.
+   * @arg {string} connectionId - The connection id.
+   * @return {Promise<string>}
+   */
+  setMostRecentlyUsedConnectionId(connectorId: string, connectionId: string) {
+    this._store?.setItem(connectorId.toLowerCase(), connectionId);
+  }
+}

libs/logic-apps-shared/src/designer-client-services/lib/userpreference.ts

@@ -0,0 +1,28 @@
+/**
+ * The user preference service.
+ */
+export interface IUserPreferenceService {
+  /**
+   * Sets most recently used connection id for the specified connector.
+   * @arg {string} connectorId - The connector id.
+   * @arg {string} connectionId - The connection id.
+   */
+  setMostRecentlyUsedConnectionId(connectorId: string, connectionId: string): void;
+
+  /**
+   * Gets most recently used connection id for the specified connector.
+   * @arg {string} connectorId - The connector id.
+   * @return {string | null | undefined}
+   */
+  getMostRecentlyUsedConnectionId(connectorId: string): string | undefined;
+}
+
+let service: IUserPreferenceService;
+
+export const InitUserPreferenceService = (preferenceService: IUserPreferenceService): void => {
+  service = preferenceService;
+};
+
+export const UserPreferenceService = (): IUserPreferenceService => {
+  return service;
+};