Revert "Revamp empty state in Model Serving Global"

docs/architecture.md

@@ -196,7 +196,9 @@ export const EditModel = {
 import { test, expect } from '@playwright/test';
 
 test('Create project', async ({ page }) => {
-  await page.goto(navigateToStory('projects-projectview', 'create-project'));
+  await page.goto(
+    './iframe.html?id=tests-stories-pages-projects-projectview--create-project&viewMode=story',
+  );
 
   // wait for page to load
   await page.waitForSelector('text=Create data science project');
@@ -215,7 +217,9 @@ test('Create project', async ({ page }) => {
 To run storybook UI: `cd ./frontend && npm run storybook`
 
 ```ts
-await page.goto(navigateToStory('projects-projectview', 'create-project'));
+await page.goto(
+  './iframe.html?id=tests-stories-pages-projects-projectview--create-project&viewMode=story',
+);
 ```
 
 6. Wait for the page to load and the story to settle before performing any assertions or actions. Use `page.waitForSelector()` to wait for a specific element to appear as an indication of the story being loaded.

frontend/src/__tests__/integration/hooks/useFetchState.spec.ts

@@ -1,8 +1,9 @@
 import { test, expect } from '@playwright/test';
-import { navigateToStory } from '~/__tests__/integration/utils';
 
 test('Success', async ({ page }) => {
-  await page.goto(navigateToStory('hooks-usefetchstate', 'success'));
+  await page.goto(
+    './iframe.html?args=&id=tests-integration-hooks-usefetchstate--success&viewMode=story',
+  );
 
   // wait 2 seconds to settle
   await new Promise((resolve) => setTimeout(resolve, 2000));
@@ -15,7 +16,9 @@ test('Success', async ({ page }) => {
 });
 
 test('Failure', async ({ page }) => {
-  await page.goto(navigateToStory('hooks-usefetchstate', 'failure'));
+  await page.goto(
+    './iframe.html?args=&id=tests-integration-hooks-usefetchstate--failure&viewMode=story',
+  );
 
   // wait 2 seconds to settle
   await new Promise((resolve) => setTimeout(resolve, 2000));
@@ -31,7 +34,9 @@ test('Failure', async ({ page }) => {
 });
 
 test('Stable', async ({ page }) => {
-  await page.goto(navigateToStory('hooks-usefetchstate', 'stable'));
+  await page.goto(
+    './iframe.html?args=&id=tests-integration-hooks-usefetchstate--stable&viewMode=story',
+  );
 
   // wait 2 seconds to settle
   await new Promise((resolve) => setTimeout(resolve, 2000));
@@ -71,7 +76,9 @@ test('Stable', async ({ page }) => {
 });
 
 test('Refresh rate', async ({ page }) => {
-  await page.goto(navigateToStory('hooks-usefetchstate', 'refresh-rate'));
+  await page.goto(
+    './iframe.html?args=&id=tests-integration-hooks-usefetchstate--refresh-rate&viewMode=story',
+  );
 
   // wait 2 seconds to settle
   await new Promise((resolve) => setTimeout(resolve, 2000));

frontend/src/__tests__/integration/pages/clusterSettings/ClusterSettings.spec.ts

@@ -1,8 +1,9 @@
 import { test, expect } from '@playwright/test';
-import { navigateToStory } from '~/__tests__/integration/utils';
 
 test('Cluster settings', async ({ page }) => {
-  await page.goto(navigateToStory('pages-clustersettings-clustersettings', 'default'));
+  await page.goto(
+    './iframe.html?args=&id=tests-integration-pages-clustersettings-clustersettings--default&viewMode=story',
+  );
   // wait for page to load
   await page.waitForSelector('text=Save changes');
   const submitButton = page.locator('[data-id="submit-cluster-settings"]');

frontend/src/__tests__/integration/pages/modelServing/ModelServingGlobal.spec.ts

@@ -1,36 +1,10 @@
 import { test, expect } from '@playwright/test';
-import { navigateToStory } from '~/__tests__/integration/utils';
 
-test('Empty State No Serving Runtime', async ({ page }) => {
-  await page.goto(
-    navigateToStory('pages-modelserving-modelservingglobal', 'empty-state-no-serving-runtime'),
-  );
-
-  // wait for page to load
-  await page.waitForSelector('text=No deployed models yet');
-
-  // Test that the button is enabled
-  await expect(page.getByRole('button', { name: 'Go to the Projects page' })).toBeTruthy();
-});
-
-test('Empty State No Inference Service', async ({ page }) => {
+test('Delete model', async ({ page }) => {
   await page.goto(
-    navigateToStory('pages-modelserving-modelservingglobal', 'empty-state-no-inference-service'),
+    './iframe.html?args=&id=tests-integration-pages-modelserving-modelservingglobal--delete-model&viewMode=story',
   );
 
-  // wait for page to load
-  await page.waitForSelector('text=No deployed models');
-
-  // Test that the button is enabled
-  await page.getByRole('button', { name: 'Deploy model' }).click();
-
-  // test that you can not submit on empty
-  await expect(await page.getByRole('button', { name: 'Deploy' })).toBeDisabled();
-});
-
-test('Delete model', async ({ page }) => {
-  await page.goto(navigateToStory('pages-modelserving-modelservingglobal', 'delete-model'));
-
   // wait for page to load
   await page.waitForSelector('text=Delete deployed model?');
 
@@ -45,7 +19,9 @@ test('Delete model', async ({ page }) => {
 });
 
 test('Edit model', async ({ page }) => {
-  await page.goto(navigateToStory('pages-modelserving-modelservingglobal', 'edit-model'));
+  await page.goto(
+    './iframe.html?args=&id=tests-integration-pages-modelserving-modelservingglobal--edit-model&viewMode=story',
+  );
 
   // wait for page to load
   await page.waitForSelector('text=Deploy model');
@@ -77,7 +53,9 @@ test('Edit model', async ({ page }) => {
 });
 
 test('Create model', async ({ page }) => {
-  await page.goto(navigateToStory('pages-modelserving-modelservingglobal', 'deploy-model'));
+  await page.goto(
+    './iframe.html?args=&id=tests-integration-pages-modelserving-modelservingglobal--deploy-model&viewMode=story',
+  );
 
   // wait for page to load
   await page.waitForSelector('text=Deploy model');
@@ -116,7 +94,9 @@ test('Create model', async ({ page }) => {
 });
 
 test('Create model error', async ({ page }) => {
-  await page.goto(navigateToStory('pages-modelserving-modelservingglobal', 'deploy-model'));
+  await page.goto(
+    './iframe.html?args=&id=tests-integration-pages-modelserving-modelservingglobal--deploy-model&viewMode=story',
+  );
 
   // wait for page to load
   await page.waitForSelector('text=Deploy model');

frontend/src/__tests__/integration/pages/modelServing/ModelServingGlobal.stories.tsx

@@ -63,51 +63,6 @@ const Template: StoryFn<typeof ModelServingGlobal> = (args) => (
   </Routes>
 );
 
-export const EmptyStateNoServingRuntime: StoryObj = {
-  render: Template,
-
-  parameters: {
-    msw: {
-      handlers: [
-        rest.get(
-          'api/k8s/apis/serving.kserve.io/v1alpha1/namespaces/test-project/servingruntimes',
-          (req, res, ctx) => res(ctx.json(mockK8sResourceList([]))),
-        ),
-        rest.get(
-          'api/k8s/apis/serving.kserve.io/v1beta1/namespaces/test-project/inferenceservices',
-          (req, res, ctx) => res(ctx.json(mockK8sResourceList([]))),
-        ),
-        rest.get('/api/k8s/apis/project.openshift.io/v1/projects', (req, res, ctx) =>
-          res(ctx.json(mockK8sResourceList([mockProjectK8sResource({})]))),
-        ),
-      ],
-    },
-  },
-};
-
-export const EmptyStateNoInferenceServices: StoryObj = {
-  render: Template,
-
-  parameters: {
-    msw: {
-      handlers: [
-        rest.get(
-          'api/k8s/apis/serving.kserve.io/v1alpha1/namespaces/test-project/servingruntimes',
-          (req, res, ctx) =>
-            res(ctx.json(mockK8sResourceList([mockServingRuntimeK8sResource({})]))),
-        ),
-        rest.get(
-          'api/k8s/apis/serving.kserve.io/v1beta1/namespaces/test-project/inferenceservices',
-          (req, res, ctx) => res(ctx.json(mockK8sResourceList([]))),
-        ),
-        rest.get('/api/k8s/apis/project.openshift.io/v1/projects', (req, res, ctx) =>
-          res(ctx.json(mockK8sResourceList([mockProjectK8sResource({})]))),
-        ),
-      ],
-    },
-  },
-};
-
 export const EditModel: StoryObj = {
   render: Template,
 

frontend/src/__tests__/integration/pages/modelServing/ServingRuntimeList.spec.ts

@@ -1,8 +1,9 @@
 import { test, expect } from '@playwright/test';
-import { navigateToStory } from '~/__tests__/integration/utils';
 
 test('Deploy model', async ({ page }) => {
-  await page.goto(navigateToStory('pages-modelserving-servingruntimelist', 'deploy-model'));
+  await page.goto(
+    './iframe.html?args=&id=tests-integration-pages-modelserving-servingruntimelist--deploy-model&viewMode=story',
+  );
 
   // wait for page to load
   await page.waitForSelector('text=Deploy model');
@@ -37,7 +38,7 @@ test('Deploy model', async ({ page }) => {
 
 test('Legacy Serving Runtime', async ({ page }) => {
   await page.goto(
-    navigateToStory('pages-modelserving-servingruntimelist', 'list-available-models'),
+    './iframe.html?args=&id=tests-integration-pages-modelserving-servingruntimelist--list-available-models&viewMode=story',
   );
 
   // wait for page to load

frontend/src/__tests__/integration/pages/projects/ProjectDetails.spec.ts

@@ -1,8 +1,9 @@
 import { test, expect } from '@playwright/test';
-import { navigateToStory } from '~/__tests__/integration/utils';
 
 test('Empty project', async ({ page }) => {
-  await page.goto(navigateToStory('pages-projects-projectdetails', 'empty-details-page'));
+  await page.goto(
+    './iframe.html?args=&id=tests-integration-pages-projects-projectdetails--empty-details-page&viewMode=story',
+  );
 
   // wait for page to load
   await page.waitForSelector('text=No model servers');
@@ -15,7 +16,9 @@ test('Empty project', async ({ page }) => {
 });
 
 test('Non-empty project', async ({ page }) => {
-  await page.goto(navigateToStory('pages-projects-projectdetails', 'default'));
+  await page.goto(
+    './iframe.html?id=tests-integration-pages-projects-projectdetails--default&viewMode=story',
+  );
 
   // wait for page to load
   await page.waitForSelector('text=Test Notebook');

frontend/src/__tests__/integration/pages/projects/ProjectView.spec.ts

@@ -1,8 +1,9 @@
 import { test, expect } from '@playwright/test';
-import { navigateToStory } from '~/__tests__/integration/utils';
 
 test('Create project', async ({ page }) => {
-  await page.goto(navigateToStory('pages-projects-projectview', 'create-project'));
+  await page.goto(
+    './iframe.html?id=tests-integration-pages-projects-projectview--create-project&viewMode=story',
+  );
 
   // wait for page to load
   await page.waitForSelector('text=Create data science project');
@@ -51,7 +52,9 @@ test('Create project', async ({ page }) => {
 });
 
 test('Edit project', async ({ page }) => {
-  await page.goto(navigateToStory('pages-projects-projectview', 'edit-project'));
+  await page.goto(
+    './iframe.html?id=tests-integration-pages-projects-projectview--edit-project&viewMode=story',
+  );
 
   // wait for page to load
   await page.waitForSelector('text=Edit data science project');
@@ -68,7 +71,9 @@ test('Edit project', async ({ page }) => {
 });
 
 test('Delete project', async ({ page }) => {
-  await page.goto(navigateToStory('pages-projects-projectview', 'delete-project'));
+  await page.goto(
+    './iframe.html?id=tests-integration-pages-projects-projectview--delete-project&viewMode=story',
+  );
 
   // wait for page to load
   await page.waitForSelector('text=Delete project?');

frontend/src/pages/modelServing/screens/global/EmptyModelServing.tsx

@@ -1,13 +1,6 @@
 import * as React from 'react';
-import {
-  Button,
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateIcon,
-  EmptyStateVariant,
-  Title,
-} from '@patternfly/react-core';
-import { PlusCircleIcon, WrenchIcon } from '@patternfly/react-icons';
+import { Button, EmptyState, EmptyStateBody, EmptyStateIcon, Title } from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons';
 import { useNavigate } from 'react-router-dom';
 import { ModelServingContext } from '~/pages/modelServing/ModelServingContext';
 import ServeModelButton from './ServeModelButton';
@@ -20,17 +13,16 @@ const EmptyModelServing: React.FC = () => {
 
   if (servingRuntimes.length === 0) {
     return (
-      <EmptyState variant={EmptyStateVariant.small}>
-        <EmptyStateIcon icon={WrenchIcon} />
+      <EmptyState>
+        <EmptyStateIcon icon={PlusCircleIcon} />
         <Title headingLevel="h2" size="lg">
-          No deployed models yet
+          No model servers
         </Title>
         <EmptyStateBody>
-          To get started, deploy a model from the <strong>Models and model servers</strong> section
-          of a project.
+          Before deploying a model, you must first configure a model server.
         </EmptyStateBody>
-        <Button variant="link" onClick={() => navigate('/projects')}>
-          Select a project
+        <Button variant="primary" onClick={() => navigate('/projects')}>
+          Create server
         </Button>
       </EmptyState>
     );
@@ -40,7 +32,7 @@ const EmptyModelServing: React.FC = () => {
     <EmptyState>
       <EmptyStateIcon icon={PlusCircleIcon} />
       <Title headingLevel="h2" size="lg">
-        No deployed models
+        No deployed models.
       </Title>
       <EmptyStateBody>To get started, use existing model servers to serve a model.</EmptyStateBody>
       <ServeModelButton />

frontend/tsconfig.json

@@ -16,9 +16,8 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
-    "baseUrl": "./src",
     "paths": {
-      "~/*": ["./*"]
+      "~/*": ["./src/*"]
     },
     "importHelpers": true,
     "skipLibCheck": true