Fix button order and standardize help icons in Deploy MCP Server modal (opendatahub-io#7318)

* Fix button order and standardize help icons in Deploy MCP Server modal

Resolves RHOAIENG-57708: The modal footer buttons were right-aligned with
Close on the left and Deploy on the right. Replaced the manual footer with
DashboardModalFooter to follow PatternFly conventions (primary action first,
left-aligned). Also switched FormGroupLabelHelp icons on OCI image, Namespace,
and YAML configuration fields to FieldGroupHelpLabelIcon for consistency with
the existing Deployment name tooltip icon.

Made-with: Cursor

* Update Cypress page objects to match DashboardModalFooter test IDs

Replace custom mcp-deploy-* test IDs with the standard ones provided
by DashboardModalFooter and remove unused findResetButton method.

Made-with: Cursor

* Fix project selector help icon and scope Cypress submit button query

- Use FieldGroupHelpLabelIcon in ProjectSelectorField to match
  the icon style used by other fields in the deploy modal
- Revert upstream NamespaceSelectorField change (should go upstream)
- Scope findSubmitButton in mcpCatalog.ts to modal container

Made-with: Cursor

Author: manaswinidas

packages/cypress/cypress/pages/mcpCatalog.ts

@@ -71,7 +71,7 @@ class McpDeployModal {
   }
 
   findSubmitButton() {
-    return cy.findByTestId('mcp-deploy-submit-button');
+    return this.find().findByTestId('modal-submit-button');
   }
 }
 

packages/cypress/cypress/pages/mcpDeployments.ts

@@ -171,19 +171,15 @@ class McpDeployModal {
   }
 
   findSubmitButton(): Cypress.Chainable<JQuery<HTMLElement>> {
-    return this.findModal().findByTestId('mcp-deploy-submit-button');
+    return this.findModal().findByTestId('modal-submit-button');
   }
 
   findCloseButton(): Cypress.Chainable<JQuery<HTMLElement>> {
-    return this.findModal().findByTestId('mcp-deploy-close-button');
-  }
-
-  findResetButton(): Cypress.Chainable<JQuery<HTMLElement>> {
-    return this.findModal().findByTestId('mcp-deploy-reset-button');
+    return this.findModal().findByTestId('modal-cancel-button');
   }
 
   findSubmitError(): Cypress.Chainable<JQuery<HTMLElement>> {
-    return this.findModal().findByTestId('mcp-deploy-submit-error');
+    return this.findModal().findByTestId('error-message-alert');
   }
 
   findLoadError(): Cypress.Chainable<JQuery<HTMLElement>> {

packages/model-registry/src/projectSelector/ProjectSelectorField.tsx

@@ -1,9 +1,8 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import {
   Alert,
   Button,
   FormGroup,
-  FormGroupLabelHelp,
   HelperText,
   HelperTextItem,
   Popover,
@@ -12,6 +11,7 @@ import {
 } from '@patternfly/react-core';
 import ProjectSelector from '@odh-dashboard/internal/concepts/projects/ProjectSelector';
 import { ProjectsContext } from '@odh-dashboard/internal/concepts/projects/ProjectsContext';
+import FieldGroupHelpLabelIcon from '@odh-dashboard/internal/components/FieldGroupHelpLabelIcon';
 import type { NamespaceSelectorFieldProps } from '@mf/modelRegistry/extension-points';
 
 const SELECTOR_TOOLTIP =
@@ -52,17 +52,12 @@ const ProjectSelectorField: React.FC<NamespaceSelectorFieldProps> = ({
   registryName,
   selectorOnly,
 }) => {
-  const labelHelpRef = useRef<HTMLSpanElement>(null);
   const { projects, loaded: projectsLoaded } = React.useContext(ProjectsContext);
   const noProjects = projectsLoaded && projects.length === 0;
 
   const showNoAccessAlert = selectedNamespace && !isLoading && hasAccess === false;
 
-  const labelHelp = (
-    <Popover triggerRef={labelHelpRef} bodyContent={SELECTOR_TOOLTIP} aria-label={SELECTOR_TOOLTIP}>
-      <FormGroupLabelHelp ref={labelHelpRef} aria-label="More info for project field" />
-    </Popover>
-  );
+  const labelHelp = <FieldGroupHelpLabelIcon content={SELECTOR_TOOLTIP} />;
 
   const helperTextNode = (
     <>

packages/model-registry/upstream/frontend/src/odh/components/McpDeployModal.tsx

@@ -2,25 +2,19 @@ import React from 'react';
 import { useNavigate, useParams } from 'react-router';
 import {
   Alert,
-  Button,
   Content,
   Form,
   FormGroup,
-  FormGroupLabelHelp,
   Modal,
   ModalBody,
   ModalFooter,
   ModalHeader,
-  Popover,
   Spinner,
-  Split,
-  SplitItem,
-  Stack,
-  StackItem,
   TextInput,
 } from '@patternfly/react-core';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 import { APIOptions, useQueryParamNamespaces } from 'mod-arch-core';
+import { DashboardModalFooter, FieldGroupHelpLabelIcon } from 'mod-arch-shared';
 import { useThemeContext } from '@odh-dashboard/internal/app/ThemeContext';
 import NamespaceSelectorFieldWrapper from '~/odh/components/NamespaceSelectorFieldWrapper';
 import useMcpServerConverter from '~/app/hooks/mcpCatalogDeployment/useMcpServerConverter';
@@ -69,8 +63,6 @@ const McpDeployModal: React.FC<McpDeployModalProps> = ({
   const [submitError, setSubmitError] = React.useState<Error>();
   const abortControllerRef = React.useRef<AbortController>();
   const crInitializedRef = React.useRef(false);
-  const ociImageLabelHelpRef = React.useRef<HTMLSpanElement>(null);
-  const configLabelHelpRef = React.useRef<HTMLSpanElement>(null);
 
   React.useEffect(() => {
     if (!existingDeployment && crData && !crInitializedRef.current) {
@@ -219,16 +211,7 @@ const McpDeployModal: React.FC<McpDeployModalProps> = ({
             isRequired
             fieldId="mcp-deploy-oci-image"
             labelHelp={
-              <Popover
-                triggerRef={ociImageLabelHelpRef}
-                bodyContent="This is the container image associated with the MCP server that you selected from the catalog. This cannot be edited."
-                aria-label="OCI image help"
-              >
-                <FormGroupLabelHelp
-                  ref={ociImageLabelHelpRef}
-                  aria-label="More info for OCI image field"
-                />
-              </Popover>
+              <FieldGroupHelpLabelIcon content="This is the container image associated with the MCP server that you selected from the catalog. This cannot be edited." />
             }
           >
             <TextInput
@@ -259,16 +242,7 @@ const McpDeployModal: React.FC<McpDeployModalProps> = ({
             label="YAML configuration"
             fieldId="mcp-deploy-yaml"
             labelHelp={
-              <Popover
-                triggerRef={configLabelHelpRef}
-                bodyContent="For more information about the prefilled YAML configuration, check the details page of the selected server."
-                aria-label="Configuration help"
-              >
-                <FormGroupLabelHelp
-                  ref={configLabelHelpRef}
-                  aria-label="More info for configuration field"
-                />
-              </Popover>
+              <FieldGroupHelpLabelIcon content="For more information about the prefilled YAML configuration, check the details page of the selected server." />
             }
           >
             <Content component="small" className="pf-v6-u-mb-sm">
@@ -288,45 +262,15 @@ const McpDeployModal: React.FC<McpDeployModalProps> = ({
         </Form>
       </ModalBody>
       <ModalFooter>
-        <Stack hasGutter style={{ flex: 'auto' }}>
-          {submitError && (
-            <StackItem>
-              <Alert
-                variant="danger"
-                isInline
-                title="Deployment failed"
-                data-testid="mcp-deploy-submit-error"
-              >
-                {submitError.message}
-              </Alert>
-            </StackItem>
-          )}
-          <StackItem>
-            <Split hasGutter className="pf-v6-u-w-100">
-              <SplitItem>
-                <Button
-                  variant="link"
-                  onClick={() => onClose()}
-                  data-testid="mcp-deploy-close-button"
-                >
-                  Close
-                </Button>
-              </SplitItem>
-              <SplitItem isFilled />
-              <SplitItem>
-                <Button
-                  variant="primary"
-                  onClick={handleDeploy}
-                  isDisabled={isDeployDisabled}
-                  isLoading={isSubmitting}
-                  data-testid="mcp-deploy-submit-button"
-                >
-                  {existingDeployment ? 'Save' : 'Deploy'}
-                </Button>
-              </SplitItem>
-            </Split>
-          </StackItem>
-        </Stack>
+        <DashboardModalFooter
+          submitLabel={existingDeployment ? 'Save' : 'Deploy'}
+          onSubmit={handleDeploy}
+          onCancel={() => onClose()}
+          isSubmitDisabled={isDeployDisabled}
+          isSubmitLoading={isSubmitting}
+          error={submitError}
+          alertTitle="Deployment failed"
+        />
       </ModalFooter>
     </Modal>
   );