feat(designerv2): Adding support for knowledge hub editor in designer

apps/Standalone/src/designer/app/AzureLogicAppsDesigner/Services/WorkflowAndArtifacts.tsx

@@ -821,7 +821,8 @@ export const saveNotesStandard = async (notesData?: Record<string, Note>): Promi
 export const createOrUpdateConnection = async (
   siteResourceId: string,
   connectionsData: ConnectionsData,
-  settings: Record<string, string> | undefined
+  settings: Record<string, string> | undefined,
+  isDraft = false
 ): Promise<any> => {
   try {
     await saveWorkflowStandard(
@@ -835,7 +836,8 @@ export const createOrUpdateConnection = async (
       /* notes */ undefined,
       /* mcpServers */ undefined,
       /* clearDirtyState */ () => {},
-      { skipValidation: true, throwError: true }
+      { skipValidation: true, throwError: true },
+      isDraft
     );
   } catch (error) {
     console.log(error);
@@ -992,15 +994,18 @@ export const saveWorkflowStandard = async (
         notesData
       );
     }
-    return;
+
+    if (!connectionsData) {
+      return;
+    }
   }
 
   for (const { name, workflow } of workflows) {
     data.files[`${name}/workflow.json`] = workflow;
   }
 
   if (connectionsData) {
-    data.files['connections.json'] = connectionsData;
+    data.files[isDraftSave ? 'connections-draft.json' : 'connections.json'] = connectionsData;
   }
 
   if (parametersData) {

apps/Standalone/src/designer/app/AzureLogicAppsDesigner/Services/customConnectionParameterEditorServiceV2.tsx

@@ -0,0 +1,38 @@
+import {
+  equals,
+  type IConnectionParameterEditorOptions,
+  type IConnectionParameterEditorService,
+  type IConnectionParameterInfo,
+} from '@microsoft/logic-apps-shared';
+import { ACASessionConnector, CustomOpenAIConnector, CosmosDbConnector } from '@microsoft/logic-apps-designer-v2';
+
+export class CustomConnectionParameterEditorServiceV2 implements IConnectionParameterEditorService {
+  public getConnectionParameterEditor({
+    connectorId,
+    parameterKey,
+  }: IConnectionParameterInfo): IConnectionParameterEditorOptions | undefined {
+    if (connectorId === 'connectionProviders/agent') {
+      if (!equals(parameterKey, 'openAICompletionsModel') && !equals(parameterKey, 'openAIEmbeddingsModel')) {
+        return {
+          EditorComponent: CustomOpenAIConnector,
+        };
+      }
+
+      return undefined;
+    }
+
+    if (connectorId === '/serviceProviders/acasession') {
+      return {
+        EditorComponent: ACASessionConnector,
+      };
+    }
+
+    if (connectorId === '/placeholder/knowledgehub') {
+      return {
+        EditorComponent: CosmosDbConnector,
+      };
+    }
+
+    return undefined;
+  }
+}

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

@@ -13,6 +13,7 @@ import { StandaloneOAuthService } from './Services/OAuthService';
 import {
   getConnectionStandard,
   getCustomCodeAppFiles,
+  createOrUpdateConnection,
   listCallbackUrl,
   saveWorkflowStandard,
   fetchAgentUrl,
@@ -146,6 +147,9 @@ const DesignerEditor = () => {
     addOrUpdateAppSettings(connectionAndSetting.settings, settingsData?.properties ?? {});
   };
 
+  const persistKnowledgeHubConnection = async (): Promise<void> =>
+    createOrUpdateConnection(siteResourceId, connectionsData, settingsData?.properties);
+
   const getConnectionConfiguration = async (connectionId: string, _manifest: any, useMcpConnections?: boolean): Promise<any> => {
     if (!connectionId) {
       return Promise.resolve();
@@ -205,6 +209,7 @@ const DesignerEditor = () => {
         connectionsData ?? {},
         workflowAppData as WorkflowApp,
         addConnectionDataInternal,
+        persistKnowledgeHubConnection,
         getConnectionConfiguration,
         tenantId,
         objectId,
@@ -566,6 +571,7 @@ const getDesignerServices = (
   connectionsData: ConnectionsData,
   workflowApp: WorkflowApp,
   addConnection: (data: ConnectionAndAppSetting) => Promise<void>,
+  persistKnowledgeHubConnection: () => Promise<void>,
   getConfiguration: (connectionId: string) => Promise<any>,
   tenantId: string | undefined,
   objectId: string | undefined,
@@ -615,6 +621,7 @@ const getDesignerServices = (
       return resolveConnectionsReferences(JSON.stringify(clone(connectionsData ?? {})), undefined, appSettings);
     },
     writeConnection: addConnection as any,
+    persistKnowledgeHubConnection,
     connectionCreationClients: {
       FileSystem: new FileSystemConnectionCreationClient({
         baseUrl: armUrl,

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

@@ -20,6 +20,7 @@ import { StandaloneOAuthService } from './Services/OAuthService';
 import {
   getConnectionStandard,
   getCustomCodeAppFiles,
+  createOrUpdateConnection,
   listCallbackUrl,
   saveWorkflowStandard,
   fetchAgentUrl,
@@ -31,6 +32,7 @@ import {
   useWorkflowApp,
   validateWorkflowStandard,
   deployArtifacts,
+  uploadFileToKnowledgeHub,
 } from './Services/WorkflowAndArtifacts';
 import { ArmParser } from './Utilities/ArmParser';
 import { WorkflowUtility, addConnectionInJson, addOrUpdateAppSettings } from './Utilities/Workflow';
@@ -58,6 +60,7 @@ import {
   isArmResourceId,
   optional,
   BaseCognitiveServiceService,
+  BaseResourceService,
   AGENT_MSI_REQUIRED_ROLE_DEFINITION_IDS,
   RoleService,
   normalizeAgentConnectionResourceIdForRoleAssignment,
@@ -91,7 +94,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { QueryClient } from '@tanstack/react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeViewEditor from './CodeViewV2';
-import { CustomConnectionParameterEditorService } from './Services/customConnectionParameterEditorService';
+import { CustomConnectionParameterEditorServiceV2 } from './Services/customConnectionParameterEditorServiceV2';
 import { CustomEditorService } from './Services/customEditorService';
 import { FloatingRunButton } from '../../../../../../libs/designer-v2/src/lib/ui/FloatingRunButton';
 
@@ -225,6 +228,9 @@ const DesignerEditor = () => {
     addOrUpdateAppSettings(connectionAndSetting.settings, settingsData?.properties ?? {});
   };
 
+  const persistKnowledgeHubConnection = async (): Promise<void> =>
+    createOrUpdateConnection(siteResourceId, connectionsData, settingsData?.properties, /* isDraft */ true);
+
   const switchWorkflowMode = useCallback((draftMode: boolean) => {
     setIsDraftMode(draftMode);
   }, []);
@@ -375,6 +381,7 @@ const DesignerEditor = () => {
         connectionsData ?? {},
         workflowAppData as WorkflowApp,
         addConnectionDataInternal,
+        persistKnowledgeHubConnection,
         getConnectionConfiguration,
         tenantId,
         objectId,
@@ -821,6 +828,7 @@ const getDesignerServices = (
   connectionsData: ConnectionsData,
   workflowApp: WorkflowApp,
   addConnection: (data: ConnectionAndAppSetting) => Promise<void>,
+  persistKnowledgeHubConnection: () => Promise<void>,
   getConfiguration: (connectionId: string) => Promise<any>,
   tenantId: string | undefined,
   objectId: string | undefined,
@@ -871,6 +879,7 @@ const getDesignerServices = (
       return resolveConnectionsReferences(JSON.stringify(clone(connectionsData ?? {})), undefined, appSettings);
     },
     writeConnection: addConnection as any,
+    persistKnowledgeHubConnection,
     connectionCreationClients: {
       FileSystem: new FileSystemConnectionCreationClient({
         baseUrl: armUrl,
@@ -1102,6 +1111,7 @@ const getDesignerServices = (
     getAgentUrl: (isDraftMode?: boolean) =>
       fetchAgentUrl(siteResourceId, workflowName, workflowApp?.properties?.defaultHostName ?? '', isDraftMode),
     getAppIdentity: () => workflowApp?.identity,
+    getLogicAppId: () => siteResourceId,
     isExplicitAuthRequiredForManagedIdentity: () => true,
     isSplitOnSupported: () => !!isStateful,
     resubmitWorkflow: async (runId, actionsToResubmit) => {
@@ -1131,6 +1141,8 @@ const getDesignerServices = (
     notifyCallbackUrlUpdate: (triggerName, newTriggerId) => {
       alert(`Callback URL for ${triggerName} trigger updated to ${newTriggerId}`);
     },
+    uploadFileArtifact: uploadFileToKnowledgeHub,
+    isKnowledgeHubEnabled: () => true,
   };
 
   const hostService: IHostService = {
@@ -1201,8 +1213,9 @@ const getDesignerServices = (
   // The proxy handles auth server-side via MSI (production) or Bearer token (local POC).
   cognitiveServiceService.foundryProxyBaseUrl = `${baseUrl}/foundryProxy`;
 
-  const connectionParameterEditorService = new CustomConnectionParameterEditorService();
+  const connectionParameterEditorService = new CustomConnectionParameterEditorServiceV2();
   const editorService = new CustomEditorService(areCustomEditorsEnabled ?? false);
+  const resourceService = new BaseResourceService({ baseUrl: armUrl, httpClient, apiVersion });
 
   return {
     appService,
@@ -1226,6 +1239,7 @@ const getDesignerServices = (
     cognitiveServiceService,
     connectionParameterEditorService,
     editorService,
+    resourceService,
     userPreferenceService: new BaseUserPreferenceService(),
     experimentationService: new BaseExperimentationService(),
   };

libs/designer-ui/src/lib/builtintools/__test__/builtintools.spec.tsx

@@ -1,9 +1,13 @@
+/**
+ * @vitest-environment jsdom
+ */
 import { BuiltinToolsEditor } from '../index';
 import type { BuiltinToolOption } from '../index';
-import { render, fireEvent, act } from '@testing-library/react';
+import { render, fireEvent, act, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
-import renderer from 'react-test-renderer';
-import { describe, vi, beforeEach, it, expect } from 'vitest';
+import { describe, vi, beforeEach, afterEach, it, expect } from 'vitest';
 import { createLiteralValueSegment } from '../../editor/base/utils/helper';
 
 const TestWrapper = ({ children }: { children: React.ReactNode }) => (
@@ -31,15 +35,18 @@ describe('lib/builtintools', () => {
     vi.clearAllMocks();
   });
 
+  afterEach(() => {
+    cleanup();
+  });
+
   it('should render with basic props', () => {
-    const tree = renderer
-      .create(
-        <TestWrapper>
-          <BuiltinToolsEditor {...defaultProps} />
-        </TestWrapper>
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+    const { getByRole } = render(
+      <TestWrapper>
+        <BuiltinToolsEditor {...defaultProps} />
+      </TestWrapper>
+    );
+
+    expect(getByRole('switch')).toBeInTheDocument();
   });
 
   it('should render header text', () => {
@@ -145,18 +152,17 @@ describe('lib/builtintools', () => {
     expect(switchEl).toBeDisabled();
   });
 
-  it('should not call onChange when readonly and clicked', () => {
+  it('should not call onChange when readonly and clicked', async () => {
     const onChange = vi.fn();
+    const user = userEvent.setup();
     const { getByRole } = render(
       <TestWrapper>
         <BuiltinToolsEditor {...defaultProps} readonly={true} onChange={onChange} />
       </TestWrapper>
     );
 
     const switchEl = getByRole('switch');
-    act(() => {
-      fireEvent.click(switchEl);
-    });
+    await user.click(switchEl);
 
     expect(onChange).not.toHaveBeenCalled();
   });

libs/designer-ui/src/lib/builtintools/styles.ts

@@ -8,6 +8,7 @@ export const useBuiltinToolsStyles = makeStyles({
     border: `1px solid ${tokens.colorNeutralStroke1}`,
     padding: tokens.spacingVerticalM,
     gap: tokens.spacingVerticalS,
+    marginTop: tokens.spacingVerticalXL,
   },
   header: {
     fontWeight: tokens.fontWeightSemibold,

libs/designer-v2/src/lib/common/constants.ts

@@ -252,6 +252,7 @@ export default {
     DROPDOWN: 'dropdown',
     FILEPICKER: 'filepicker',
     FLOATINGACTIONMENU: 'floatingactionmenu',
+    KNOWLEDGE_BASE: 'knowledgebase',
     SCHEMA: 'schema',
     STRING: 'string',
     TABLE: 'table',
@@ -578,6 +579,10 @@ export default {
     OPERATIONS: 'OPERATIONS',
     CONNECTIONS: 'CONNECTIONS',
   },
+  KNOWLEDGE_PANEL_TAB_NAMES: {
+    BASICS: 'BASICS',
+    MODEL: 'MODEL',
+  },
   ERRORS_PANEL_TAB_NAMES: {
     ERRORS: 'ERRORS',
     WARNINGS: 'WARNINGS',