fix(designerv2): MCP servers fit and finish (#8863)

fix(designerv2): mcp wizard fit and finish

Author: anthony0t

Localize/lang/strings.json

@@ -1420,6 +1420,7 @@
   "Uxckds": "Suggested flow",
   "V+/c21": "General",
   "V0ZbQO": "Show less",
+  "V1U5Gz": "MCP servers added directly to a single logic app for quick setup, experiments, or proofs of concept.",
   "V3vpin": "''{parameterName}'' is no longer present in the operation schema. It should be removed before the workflow is re-saved.",
   "V5f3ha": "Week",
   "V7NT3q": "Connected",
@@ -1474,6 +1475,7 @@
   "WCASt1": "Describe something in your flow that should be replaced, as well as what should replace it. Add details where possible, including the connector to use and if any content should be included.",
   "WDROA9": "Back",
   "WGwH45": "Clear",
+  "WIIV8A": "MCP servers provided and managed by Microsoft.",
   "WMX2ig": "What is the concurrency setting of this workflow?",
   "WOEOfm": "Tool management",
   "WP8egw": "Select an option",
@@ -1587,7 +1589,7 @@
   "YTJ78g": "Learn how to assign it",
   "YUbSFS": "Yes/No",
   "YV6qd0": "Agent activity",
-  "YW1rx0": "Add new",
+  "YW1rx0": "Create a new connection",
   "YWD/RY": "condition, collapse",
   "YWws/r": "Output names should not be empty.",
   "YX0jQs": "All",
@@ -3074,6 +3076,7 @@
   "_Uxckds.comment": "Title for the suggested flow section",
   "_V+/c21.comment": "title for general setting section",
   "_V0ZbQO.comment": "Toggle button text for hiding advanced parameters",
+  "_V1U5Gz.comment": "Description text for Others MCP servers tab",
   "_V3vpin.comment": "Unknown Parameter error message. Do not remove the double single quotes around the display name, as it is needed to wrap the placeholder text.",
   "_V5f3ha.comment": "Frequency value ",
   "_V7NT3q.comment": "Text indicating a connector is connected",
@@ -3128,6 +3131,7 @@
   "_WCASt1.comment": "Chatbot prompt to replace an action description",
   "_WDROA9.comment": "Back button text",
   "_WGwH45.comment": "Label to clear editor",
+  "_WIIV8A.comment": "Description text for Microsoft MCP servers tab",
   "_WMX2ig.comment": "Chatbot suggestion message to get the concurrency setting of the workflow",
   "_WOEOfm.comment": "Label for tool selection mode",
   "_WP8egw.comment": "Placeholder text for dropdown editor",
@@ -3241,7 +3245,7 @@
   "_YTJ78g.comment": "Link text to learn how to assign the required role for the session pool in Azure Container Apps",
   "_YUbSFS.comment": "Placeholder title for a newly inserted Boolean parameter",
   "_YV6qd0.comment": "Chat view tab title",
-  "_YW1rx0.comment": "Link text to add a new connection",
+  "_YW1rx0.comment": "Button text to create a new connection",
   "_YWD/RY.comment": "condition",
   "_YWws/r.comment": "Invalid output names",
   "_YX0jQs.comment": "All templates tab",
@@ -3467,6 +3471,7 @@
   "_daoo3l.comment": "Text to show which connection is connected to the node",
   "_ddnfTx.comment": "Aria label for refresh button",
   "_dfKsgg.comment": "Chatbot report a bug button",
+  "_dfYgIR.comment": "Description text for Custom MCP servers tab",
   "_dfmH55.comment": "Command for italic text for non-mac users",
   "_dgPMsl.comment": "Completed status message in mock card.",
   "_dhlB0s.comment": "Loading aria-label for workflows list",
@@ -3813,7 +3818,6 @@
   "_lLhS3T.comment": "Button text for creating new workflows",
   "_lM9qrG.comment": "Time zone value ",
   "_lPTdSf.comment": "Button text for run trigger",
-  "_lPj8hf.comment": "Description for create connection step",
   "_lQNKUB.comment": "Describes connection being added",
   "_lR7V87.comment": "Section header for the functions section",
   "_lSUNx5.comment": "Action Tracking ID text",
@@ -4653,6 +4657,7 @@
   "daoo3l": "Connected to {connectionName}.",
   "ddnfTx": "Refresh",
   "dfKsgg": "Sorry, I couldn't understand your request. Please rephrase it and try again.",
+  "dfYgIR": "MCP servers created or managed by your organization for reuse across logic apps, with enterprise-level authentication.",
   "dfmH55": "Italic (Ctrl+I)",
   "dgPMsl": "Completed",
   "dhlB0s": "Loading workflows aria label",
@@ -4999,7 +5004,6 @@
   "lLhS3T": "Create new workflows",
   "lM9qrG": "(UTC+13:00) Nuku'alofa",
   "lPTdSf": "Run trigger",
-  "lPj8hf": "Create a new connection for the MCP server.",
   "lQNKUB": "A line for the parent element is added automatically.",
   "lR7V87": "Functions",
   "lSUNx5": "Action tracking ID",

libs/designer-v2/src/lib/ui/panel/recommendation/browse/__test__/mcpServersBrowse.spec.tsx

@@ -295,6 +295,34 @@ describe('McpServersBrowse', () => {
     expect(screen.getByTestId('grid-item-nativemcpclient')).toBeDefined();
   });
 
+  test('should list builtin MCP server operation first in Others tab', async () => {
+    const mockConnection = {
+      id: 'conn-123',
+      name: 'my-connection',
+      type: 'builtinMcpClientToolConnection',
+      properties: {
+        displayName: 'My Connection',
+        api: {
+          id: 'connectionProviders/mcpclient',
+        },
+      },
+    };
+
+    mockUseConnectionsForConnector.mockReturnValue({
+      data: [mockConnection],
+      isLoading: false,
+    } as any);
+
+    render(<McpServersBrowse />, { wrapper: createWrapper() });
+    fireEvent.click(screen.getByRole('tab', { name: 'Others' }));
+
+    await waitFor(() => {
+      const gridItems = document.querySelectorAll('[data-testid^="grid-item-"]');
+      expect(gridItems.length).toBeGreaterThan(0);
+      expect(gridItems[0]?.getAttribute('data-testid')).toBe('grid-item-nativemcpclient');
+    });
+  });
+
   test('should force create connection for builtin MCP server', async () => {
     render(<McpServersBrowse />, { wrapper: createWrapper() });
 

libs/designer-v2/src/lib/ui/panel/recommendation/browse/__test__/mcpToolWizard.spec.tsx

@@ -360,6 +360,30 @@ describe('McpToolWizard', () => {
       const cancelButtons = screen.getAllByTestId('create-connection-cancel');
       expect(cancelButtons.length).toBeGreaterThan(0);
     });
+
+    test('should not show create-connection description text in empty state', () => {
+      render(<McpToolWizard />, { wrapper: createWrapper() });
+
+      expect(screen.queryByText('Create a new connection for the MCP server.')).toBeNull();
+    });
+
+    test('should not show create-connection description text when connections exist', () => {
+      mockUseConnectionsForConnector.mockReturnValue({
+        data: [
+          {
+            id: 'conn-1',
+            name: 'connection-1',
+            properties: { displayName: 'Connection 1' },
+          },
+        ],
+        isLoading: false,
+        refetch: vi.fn(),
+      } as any);
+
+      render(<McpToolWizard />, { wrapper: createWrapper() });
+
+      expect(screen.queryByText('Create a new connection for the MCP server.')).toBeNull();
+    });
   });
 
   describe('Wizard Navigation', () => {

libs/designer-v2/src/lib/ui/panel/recommendation/browse/mcpServersBrowse.tsx

@@ -55,12 +55,31 @@ export const McpServersBrowse = ({ onOperationClick: _onOperationClick }: McpSer
     description: 'Text shown when no MCP servers are available',
   });
 
-  const descriptionText = intl.formatMessage({
+  const allTabDescriptionText = intl.formatMessage({
     defaultMessage: 'Choose a Model Context Protocol (MCP) server to invoke.',
     id: 'EvgBRe',
     description: 'Description text for MCP server selection',
   });
 
+  const microsoftTabDescriptionText = intl.formatMessage({
+    defaultMessage: 'MCP servers provided and managed by Microsoft.',
+    id: 'WIIV8A',
+    description: 'Description text for Microsoft MCP servers tab',
+  });
+
+  const customTabDescriptionText = intl.formatMessage({
+    defaultMessage:
+      'MCP servers created or managed by your organization for reuse across logic apps, with enterprise-level authentication.',
+    id: 'dfYgIR',
+    description: 'Description text for Custom MCP servers tab',
+  });
+
+  const othersTabDescriptionText = intl.formatMessage({
+    defaultMessage: 'MCP servers added directly to a single logic app for quick setup, experiments, or proofs of concept.',
+    id: 'V1U5Gz',
+    description: 'Description text for Others MCP servers tab',
+  });
+
   const allTabText = intl.formatMessage({
     defaultMessage: 'All',
     id: 'hGbRBS',
@@ -132,7 +151,7 @@ export const McpServersBrowse = ({ onOperationClick: _onOperationClick }: McpSer
       return [builtinMcpServerOperation, ...filtered];
     }
     if (selectedTab === 'others') {
-      return [...filtered, builtinMcpServerOperation];
+      return [builtinMcpServerOperation, ...filtered];
     }
     return filtered;
   }, [mcpServers, mcpConnections, selectedTab, sortOrder, isMicrosoftServer]);
@@ -146,6 +165,15 @@ export const McpServersBrowse = ({ onOperationClick: _onOperationClick }: McpSer
     { count: filteredAndSortedServers.length }
   );
 
+  const descriptionText =
+    selectedTab === 'microsoft'
+      ? microsoftTabDescriptionText
+      : selectedTab === 'custom'
+        ? customTabDescriptionText
+        : selectedTab === 'others'
+          ? othersTabDescriptionText
+          : allTabDescriptionText;
+
   if (isLoading) {
     return (
       <div className={classes.loadingContainer}>

libs/designer-v2/src/lib/ui/panel/recommendation/browse/mcpToolWizard.tsx

@@ -506,14 +506,9 @@ export const McpToolWizard = () => {
         description: 'Retry button text',
       }),
       addConnectionLink: intl.formatMessage({
-        defaultMessage: 'Add new',
+        defaultMessage: 'Create a new connection',
         id: 'YW1rx0',
-        description: 'Link text to add a new connection',
-      }),
-      createConnectionDescription: intl.formatMessage({
-        defaultMessage: 'Create a new connection for the MCP server.',
-        id: 'lPj8hf',
-        description: 'Description for create connection step',
+        description: 'Button text to create a new connection',
       }),
     }),
     [intl]
@@ -532,23 +527,13 @@ export const McpToolWizard = () => {
 
     const buttonContents: TemplatePanelFooterProps['buttonContents'] = [
       {
-        type: 'navigation',
+        type: 'action',
         text: INTL_TEXT.backButton,
         onClick: handleBack,
         appearance: 'subtle',
       },
     ];
 
-    // Add "Add a connection" button on connection step
-    if (isConnectionStep) {
-      buttonContents.push({
-        type: 'action',
-        text: INTL_TEXT.addConnectionLink,
-        onClick: handleAddConnectionClick,
-        appearance: 'subtle',
-      });
-    }
-
     // Disable Done button if in "selected tools" mode with no tools selected
     const isDoneDisabled =
       (isConnectionStep && !localConnectionId) || (isParametersStep && toolSelectionMode === 'selected' && localAllowedTools.length === 0);
@@ -600,12 +585,14 @@ export const McpToolWizard = () => {
     }
 
     return (
-      <ConnectionTable
-        connections={validConnections}
-        currentConnectionId={localConnectionId}
-        saveSelectionCallback={handleConnectionTableSelect}
-        isXrmConnectionReferenceMode={false}
-      />
+      <div className={classes.connectionStepContainer}>
+        <ConnectionTable
+          connections={validConnections}
+          currentConnectionId={localConnectionId}
+          saveSelectionCallback={handleConnectionTableSelect}
+          isXrmConnectionReferenceMode={false}
+        />
+      </div>
     );
   };
 
@@ -749,9 +736,6 @@ export const McpToolWizard = () => {
     if (isConnectionStep) {
       return INTL_TEXT.step1Description;
     }
-    if (isCreateConnectionStep) {
-      return INTL_TEXT.createConnectionDescription;
-    }
     if (isParametersStep) {
       return INTL_TEXT.step2Description;
     }
@@ -778,6 +762,7 @@ export const McpToolWizard = () => {
   // When step 1 is completed but not locked, show checkmark with brand color
   const isStep1Locked = (isConnectionLocked || wasOpenedAtCreateConnection) && isParametersStep;
   const isStep1Completed = !isConnectionLocked && !wasOpenedAtCreateConnection && isParametersStep;
+  const stepDescription = getStepDescription();
 
   return (
     <div className={classes.container}>
@@ -841,7 +826,7 @@ export const McpToolWizard = () => {
           </div>
           <Text weight={currentStepNumber === 2 ? 'semibold' : 'regular'}>{INTL_TEXT.step2Label}</Text>
         </div>
-        <Text className={classes.stepDescription}>{getStepDescription()}</Text>
+        {stepDescription ? <Text className={classes.stepDescription}>{stepDescription}</Text> : null}
         {isParametersStep && toolsErrorMessage && (
           <div className={classes.warningContainer}>
             <MessageBar intent="warning">
@@ -857,6 +842,13 @@ export const McpToolWizard = () => {
           </div>
         )}
         {renderCurrentStep()}
+        {isConnectionStep ? (
+          <div className={classes.connectionStepActionContainer}>
+            <Button onClick={handleAddConnectionClick} size="small">
+              {INTL_TEXT.addConnectionLink}
+            </Button>
+          </div>
+        ) : null}
       </div>
       {(footerContent.buttonContents?.length ?? 0) > 0 && (
         <div className={classes.footer}>

libs/designer-v2/src/lib/ui/panel/recommendation/browse/styles/McpToolWizard.styles.ts

@@ -125,19 +125,24 @@ export const useMcpToolWizardStyles = makeStyles({
     ...shorthands.gap('12px'),
     alignItems: 'flex-start',
   },
-  addConnectionLink: {
-    marginTop: '8px',
-    cursor: 'pointer',
-    color: tokens.colorBrandForeground1,
-    fontSize: tokens.fontSizeBase300,
-    '&:hover': {
-      textDecoration: 'underline',
-    },
-  },
   createConnectionContainer: {
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
     overflowY: 'auto',
   },
+  connectionStepContainer: {
+    width: '100%',
+    maxWidth: '100%',
+    boxSizing: 'border-box',
+    '& .msla-connection-table': {
+      width: '100%',
+      maxWidth: '100%',
+      boxSizing: 'border-box',
+    },
+  },
+  connectionStepActionContainer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+  },
 });