fix(mcp): update MCP Server UI copy, add dark-mode icon, add copy-URL action and tests (#8755)

* fix(mcp): update MCP server UI copy/text, add dark-mode icon support, copy-URL action, and tests (#8752)

fix(mcp): Updating styling and content changes from review and minor design updates

Co-authored-by: Priti Sambandam <psamband@microsoft.com>

* chore(test): Remove obsolete getAgentBaseUrl tests from config-parser.spec.ts (#8736)

fix: remove getAgentBaseUrl tests from config-parser.spec.ts

---------

Co-authored-by: Priti Sambandam <psamband@microsoft.com>
Co-authored-by: Carlos Castro Trejo <102700317+ccastrotrejo@users.noreply.github.com>

Author: 3 people

Localize/lang/strings.json

@@ -848,7 +848,7 @@ export const updateMcpServers = async (
     let updatedHostConfig: any;
     const queryClient = getReactQueryClient();
 
-    if (!areAllServersDeleted && hostConfig?.extensions?.workflow?.McpServerEndpoints?.enabled === false) {
+    if (!areAllServersDeleted && !hostConfig?.extensions?.workflow?.McpServerEndpoints?.enabled) {
       updatedHostConfig = {
         ...(hostConfig.properties ?? {}),
         extensions: {

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

@@ -52,7 +52,7 @@ export const McpServer = () => {
         <div className={styles.wizardContainer}>
           <div className={styles.wizardContent}>
             <div className={styles.wizardWrapper}>
-              <McpServerDataProvider resourceDetails={resourceDetails} services={services}>
+              <McpServerDataProvider resourceDetails={resourceDetails} services={services} isDarkMode={theme === 'dark'}>
                 <McpServersWizard
                   onUpdateServers={handleUpdateServers}
                   onOpenWorkflow={handleOpenWorkflow}

apps/Standalone/src/mcp/app/McpServer.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { parseIframeConfig, getAgentBaseUrl, parseIdentityProviders } from '../config-parser';
+import { parseIframeConfig, parseIdentityProviders } from '../config-parser';
 
 describe('config-parser', () => {
   const originalLocation = window.location;
@@ -180,32 +180,6 @@ describe('config-parser', () => {
     });
   });
 
-  describe('getAgentBaseUrl', () => {
-    it('should remove .well-known/agent-card.json from URL', () => {
-      const result = getAgentBaseUrl('https://example.com/api/agents/myAgent/.well-known/agent-card.json');
-
-      expect(result).toBe('https://example.com/api/agents/myAgent');
-    });
-
-    it('should preserve query params when removing agent-card.json', () => {
-      const result = getAgentBaseUrl('https://example.com/api/agents/myAgent/.well-known/agent-card.json?param=value');
-
-      expect(result).toBe('https://example.com/api/agents/myAgent?param=value');
-    });
-
-    it('should return empty string for undefined input', () => {
-      const result = getAgentBaseUrl(undefined);
-
-      expect(result).toBe('');
-    });
-
-    it('should return URL unchanged if no agent-card.json pattern', () => {
-      const result = getAgentBaseUrl('https://example.com/api/agents/myAgent');
-
-      expect(result).toBe('https://example.com/api/agents/myAgent');
-    });
-  });
-
   describe('parseIdentityProviders', () => {
     afterEach(() => {
       delete window.IDENTITY_PROVIDERS;

apps/iframe-app/src/lib/utils/__tests__/config-parser.spec.ts

@@ -12,44 +12,53 @@ import {
   Switch,
   Text,
   Textarea,
+  mergeClasses,
 } from '@fluentui/react-components';
 import type { BaseFieldItem, TemplatesSectionItem } from './templatesSectionModel';
 import { useTemplatesStyles } from './styles';
 
 interface FieldSectionItemProps {
   item: TemplatesSectionItem;
+  cssOverrides?: Record<string, string>;
 }
 
-export const FieldSectionItem = ({ item }: FieldSectionItemProps) => {
+export const FieldSectionItem = ({ item, cssOverrides }: FieldSectionItemProps) => {
   const styles = useTemplatesStyles();
 
   return (
-    <div className={styles.fieldSectionItem}>
-      <SectionLabel item={item} />
+    <div className={mergeClasses(styles.fieldSectionItem, cssOverrides?.['sectionItem'])}>
+      <SectionLabel item={item} cssOverrides={cssOverrides} />
       <div className={styles.fieldSectionItemValue}>
         <SectionItemInner item={item} />
       </div>
     </div>
   );
 };
 
-const SectionLabel = ({ item }: { item: TemplatesSectionItem }) => {
+const SectionLabel = ({ item, cssOverrides }: { item: TemplatesSectionItem; cssOverrides?: Record<string, string> }) => {
   const styles = useTemplatesStyles();
 
   if (!item.label) {
     return null;
   }
 
   if (typeof item.label !== 'string') {
-    return <div className={styles.fieldSectionItemLabel}>{item.label}</div>;
+    return <div className={mergeClasses(styles.fieldSectionItemLabel, cssOverrides?.['itemLabel'])}>{item.label}</div>;
   }
 
   return item.description ? (
-    <InfoLabel info={item.description} className={styles.fieldSectionItemLabel} required={(item as BaseFieldItem)?.required ?? false}>
+    <InfoLabel
+      info={item.description}
+      className={mergeClasses(styles.fieldSectionItemLabel, cssOverrides?.['itemLabel'])}
+      required={(item as BaseFieldItem)?.required ?? false}
+    >
       {item.label}
     </InfoLabel>
   ) : (
-    <Label className={styles.fieldSectionItemLabel} required={(item as BaseFieldItem)?.required ?? false}>
+    <Label
+      className={mergeClasses(styles.fieldSectionItemLabel, cssOverrides?.['itemLabel'])}
+      required={(item as BaseFieldItem)?.required ?? false}
+    >
       {item.label}
     </Label>
   );

libs/designer-ui/src/lib/templates/fieldsectionitem.tsx

@@ -37,7 +37,7 @@ export const TemplatesSection = ({
       <div className={css('msla-templates-section-items', cssOverrides?.['sectionItems'])}>
         {items
           ? items.map((item, index) => {
-              return <FieldSectionItem key={index} item={item} />;
+              return <FieldSectionItem key={index} item={item} cssOverrides={cssOverrides} />;
             })
           : children}
       </div>

libs/designer-ui/src/lib/templates/templatesSection.tsx

@@ -4,8 +4,14 @@ import type { AppDispatch, RootState } from '../state/mcp/store';
 import { setInitialData } from '../state/mcp/resourceSlice';
 import { initializeMcpData } from '../actions/bjsworkflow/mcp';
 import type { McpDataProviderProps } from './McpDataProvider';
+import { setDarkMode } from '../state/mcp/mcpOptions/mcpOptionsSlice';
 
-export const McpServerDataProvider = ({ resourceDetails, services, children }: McpDataProviderProps) => {
+export const McpServerDataProvider = ({
+  resourceDetails,
+  services,
+  children,
+  isDarkMode,
+}: McpDataProviderProps & { isDarkMode: boolean }) => {
   const dispatch = useDispatch<AppDispatch>();
 
   const { servicesInitialized } = useSelector((state: RootState) => ({
@@ -29,5 +35,11 @@ export const McpServerDataProvider = ({ resourceDetails, services, children }: M
     );
   }, [dispatch, resourceDetails]);
 
+  useEffect(() => {
+    if (isDarkMode !== undefined) {
+      dispatch(setDarkMode(isDarkMode));
+    }
+  }, [dispatch, isDarkMode]);
+
   return <>{children}</>;
 };

libs/designer/src/lib/common/images/mcp/server_dark.svg

@@ -0,0 +1,103 @@
+import { describe, it, expect } from 'vitest';
+import { isHttpRequestTrigger } from '../helper';
+
+describe('isHttpRequestTrigger', () => {
+  describe('when trigger is an HTTP request trigger', () => {
+    it('should return true for request type with Http kind', () => {
+      const trigger = {
+        type: 'Request',
+        kind: 'Http',
+        inputs: {},
+      };
+      expect(isHttpRequestTrigger(trigger)).toBe(true);
+    });
+
+    it('should return true for request type without kind (defaults to Http)', () => {
+      const trigger = {
+        type: 'Request',
+        inputs: {},
+      };
+      expect(isHttpRequestTrigger(trigger)).toBe(true);
+    });
+
+    it('should return true for request type with undefined kind', () => {
+      const trigger = {
+        type: 'Request',
+        kind: undefined,
+        inputs: {},
+      };
+      expect(isHttpRequestTrigger(trigger)).toBe(true);
+    });
+
+    it('should be case-insensitive for type', () => {
+      const trigger = {
+        type: 'Request',
+        kind: 'Http',
+        inputs: {},
+      };
+      expect(isHttpRequestTrigger(trigger)).toBe(true);
+    });
+
+    it('should be case-insensitive for kind', () => {
+      const trigger = {
+        type: 'Request',
+        kind: 'HTTP',
+        inputs: {},
+      };
+      expect(isHttpRequestTrigger(trigger)).toBe(true);
+    });
+
+    it('should be case-insensitive for both type and kind', () => {
+      const trigger = {
+        type: 'REQUEST',
+        kind: 'http',
+        inputs: {},
+      };
+      expect(isHttpRequestTrigger(trigger)).toBe(true);
+    });
+  });
+
+  describe('when trigger is not an HTTP request trigger', () => {
+    it('should return false for non-request type', () => {
+      const trigger = {
+        type: 'recurrence',
+        inputs: {},
+      };
+      expect(isHttpRequestTrigger(trigger)).toBe(false);
+    });
+
+    it('should return false for request type with non-Http kind', () => {
+      const trigger = {
+        type: 'Request',
+        kind: 'PowerAppV2',
+        inputs: {},
+      };
+      expect(isHttpRequestTrigger(trigger)).toBe(false);
+    });
+
+    it('should return false for http type (not request)', () => {
+      const trigger = {
+        type: 'http',
+        inputs: {},
+      };
+      expect(isHttpRequestTrigger(trigger)).toBe(false);
+    });
+
+    it('should return false for ApiConnection type', () => {
+      const trigger = {
+        type: 'ApiConnection',
+        inputs: {},
+      };
+      expect(isHttpRequestTrigger(trigger)).toBe(false);
+    });
+
+    it('should return false for request type with Button kind', () => {
+      const trigger = {
+        type: 'Request',
+        kind: 'Button',
+        inputs: {},
+      };
+      expect(isHttpRequestTrigger(trigger)).toBe(false);
+    });
+  });
+});