Fix global tests for refactor

Author: katieperry4

frontend/packages/modelServing/src/components/global/GlobalDeploymentsView.tsx

@@ -3,13 +3,13 @@ import ApplicationsPage from '@odh-dashboard/internal/pages/ApplicationsPage';
 import { ProjectObjectType } from '@odh-dashboard/internal/concepts/design/utils';
 import TitleWithIcon from '@odh-dashboard/internal/concepts/design/TitleWithIcon';
 import type { ProjectKind } from '@odh-dashboard/internal/k8sTypes';
-import ModelServingLoading from '@odh-dashboard/internal/pages/modelServing/screens/global/ModelServingLoading';
 import { useNavigate, useParams } from 'react-router-dom';
 import { byName, ProjectsContext } from '@odh-dashboard/internal/concepts/projects/ProjectsContext';
 import { GlobalNoModelsView } from './GlobalNoModelsView';
 import GlobalDeploymentsTable from './GlobalDeploymentsTable';
 import ModelServingProjectSelection from './ModelServingProjectSelection';
 import NoProjectsPage from './NoProjectsPage';
+import GlobalModelsLoading from './GlobalModelsLoading';
 import { ModelDeploymentsContext } from '../../concepts/ModelDeploymentsContext';
 
 type GlobalDeploymentsViewProps = {
@@ -32,7 +32,7 @@ const GlobalDeploymentsView: React.FC<GlobalDeploymentsViewProps> = ({ projects
     <ApplicationsPage
       loaded={!isLoading}
       loadingContent={
-        <ModelServingLoading
+        <GlobalModelsLoading
           title="Loading"
           description="Retrieving model data from all projects in the cluster. This can take a few minutes."
           onCancel={() => {

frontend/packages/modelServing/src/components/global/GlobalModelsLoading.tsx

@@ -0,0 +1,44 @@
+import {
+  Button,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateVariant,
+  PageSection,
+  Spinner,
+} from '@patternfly/react-core';
+import React from 'react';
+
+type ModelServingLoadingProps = {
+  title: string;
+  description: string;
+  onCancel: () => void;
+};
+
+const ModelServingLoading: React.FC<ModelServingLoadingProps> = ({
+  title,
+  description,
+  onCancel,
+}) => (
+  <PageSection hasBodyWrapper={false} isFilled>
+    <EmptyState
+      headingLevel="h1"
+      titleText={title}
+      variant={EmptyStateVariant.lg}
+      data-testid="loading-empty-state"
+    >
+      <Spinner size="xl" />
+      <EmptyStateBody>{description}</EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button data-testid="empty-state-cancel-button" variant="primary" onClick={onCancel}>
+            Cancel
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  </PageSection>
+);
+
+export default ModelServingLoading;

frontend/packages/modelServing/src/components/global/GlobalModelsPage.tsx

@@ -11,7 +11,7 @@ import { isModelServingPlatformExtension } from '../../../extension-points';
 const GlobalModelsPage: React.FC = () => {
   const availablePlatforms = useExtensions(isModelServingPlatformExtension);
 
-  const { projects, loaded: projectsLoaded, preferredProject } = React.useContext(ProjectsContext);
+  const { projects, preferredProject } = React.useContext(ProjectsContext);
 
   const { namespace } = useParams();
   const navigate = useNavigate();
@@ -51,13 +51,6 @@ const GlobalModelsPage: React.FC = () => {
     );
   }
 
-  if (!projectsLoaded) {
-    return (
-      <Bullseye>
-        <Spinner />
-      </Bullseye>
-    );
-  }
   return (
     <ModelDeploymentsProvider modelServingPlatforms={availablePlatforms} projects={projectsToShow}>
       <GlobalDeploymentsView projects={projectsToShow} />

frontend/src/__tests__/cypress/cypress/pages/modelServing.ts

@@ -56,6 +56,17 @@ class ModelServingGlobal {
     return cy.findByTestId('deploy-button');
   }
 
+  clickDeployModelButtonWithRetry() {
+    this.findDeployModelButton().click();
+    // If modal doesn't appear, retry once
+    cy.get('body').then(($body) => {
+      if ($body.find('[role="dialog"]:visible').length === 0) {
+        this.findDeployModelButton().click();
+      }
+    });
+    return this;
+  }
+
   findNoProjectSelectedTooltip() {
     return cy.findByTestId('deploy-model-tooltip');
   }

frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/modelServingGlobal.cy.ts

@@ -162,6 +162,13 @@ const initIntercepts = ({
       body: mockK8sResourceList(servingRuntimes),
     },
   ).as('getServingRuntimes');
+  cy.interceptK8sList(
+    { model: ServingRuntimeModel, ns: 'test-project' },
+    {
+      delay: delayServingRuntimes ? 500 : 0, //TODO: Remove the delay when we add support for loading states
+      body: mockK8sResourceList(servingRuntimes),
+    },
+  );
   cy.interceptK8sList(
     { model: InferenceServiceModel, ns: 'test-project' },
     mockK8sResourceList(inferenceServices),
@@ -301,19 +308,14 @@ describe('Model Serving Global', () => {
 
     // Visit the all-projects view (no project name passed here)
     modelServingGlobal.visit();
-    cy.findByRole('button', { name: 'Models' }).should('exist').click();
 
+    // Wait for the loading state to be visible and hit the cancel button -> this redirects to the preferred project page
     modelServingGlobal.shouldWaitAndCancel();
 
+    // Verify the empty state is visible
     modelServingGlobal.shouldBeEmpty();
 
-    cy.wait('@getServingRuntimes').then((response) => {
-      expect(response.error?.message).to.eq('Socket closed before finished writing response');
-    });
-
-    cy.wait('@getInferenceServices').then((response) => {
-      expect(response.error?.message).to.eq('Socket closed before finished writing response');
-    });
+    cy.url().should('include', '/modelServing/test-project');
   });
 
   it('All projects with every type of serving listed', () => {
@@ -667,7 +669,7 @@ describe('Model Serving Global', () => {
     });
     modelServingGlobal.visit('test-project');
 
-    modelServingGlobal.findDeployModelButton().click();
+    modelServingGlobal.clickDeployModelButtonWithRetry();
 
     kserveModal.shouldBeOpen();
     kserveModal.findServingRuntimeTemplateHelptext().should('not.exist');
@@ -684,7 +686,9 @@ describe('Model Serving Global', () => {
     });
     modelServingGlobal.visit('test-project');
 
-    modelServingGlobal.findDeployModelButton().click();
+    modelServingGlobal.clickDeployModelButtonWithRetry();
+
+    kserveModal.shouldBeOpen();
 
     kserveModal.findModelNameInput().should('exist');
 
@@ -752,7 +756,9 @@ describe('Model Serving Global', () => {
       disableHardwareProfiles: false,
     });
     modelServingGlobal.visit('test-project');
-    modelServingGlobal.findDeployModelButton().click();
+    modelServingGlobal.findDeployModelButton().should('be.enabled');
+    modelServingGlobal.clickDeployModelButtonWithRetry();
+    kserveModal.shouldBeOpen();
     kserveModal.findModelNameInput().should('exist');
 
     // Verify hardware profile section exists
@@ -826,7 +832,7 @@ describe('Model Serving Global', () => {
       disableProjectScoped: false,
     });
     modelServingGlobal.visit('test-project');
-    modelServingGlobal.findDeployModelButton().click();
+    modelServingGlobal.clickDeployModelButtonWithRetry();
     kserveModal.findModelNameInput().should('exist');
 
     // Verify accelerator profile section exists
@@ -926,9 +932,10 @@ describe('Model Serving Global', () => {
     });
     modelServingGlobal.visit('test-project');
 
-    modelServingGlobal.findDeployModelButton().click();
+    modelServingGlobal.clickDeployModelButtonWithRetry();
 
     kserveModal.shouldBeOpen();
+    kserveModal.findPredefinedArgsButton().scrollIntoView();
     kserveModal.findPredefinedArgsButton().click();
     kserveModal.findPredefinedArgsList().should('not.exist');
     kserveModal.findPredefinedArgsTooltip().should('exist');
@@ -947,7 +954,7 @@ describe('Model Serving Global', () => {
     });
     modelServingGlobal.visit('test-project');
 
-    modelServingGlobal.findDeployModelButton().click();
+    modelServingGlobal.clickDeployModelButtonWithRetry();
 
     kserveModal.shouldBeOpen();
     kserveModal.findPredefinedVarsButton().click();