From 4ceb209cdc1f3c43b88050b991971973c1ae1084 Mon Sep 17 00:00:00 2001
From: rsun19 <robertssun1234@gmail.com>
Date: Wed, 1 Apr 2026 11:38:03 -0400
Subject: [PATCH 1/4] updated status labels, mocks, and unit tests

Signed-off-by: rsun19 <robertssun1234@gmail.com>
---
 .../api/model_registry_settings_handler.go    |  51 +++++---
 .../internal/models/model_registry_kind.go    |   1 +
 .../modelRegistry/modelTransferJobs.cy.ts     |   2 +-
 .../components/CatalogSourceStatus.tsx        |  13 +-
 .../CatalogSourceStatusErrorModal.tsx         |   2 +-
 .../__tests__/CatalogSourceStatus.spec.tsx    | 122 ++++++++++++++++++
 .../ModelTransferJobStatusModal.tsx           |   2 +-
 .../ModelTransferJobTableRow.tsx              |   5 +-
 .../ModelTransferJobStatusModal.spec.tsx      |  19 +++
 .../__tests__/getStatusLabel.spec.ts          |  34 +++++
 .../ArchiveModelVersionDetails.tsx            |   2 +-
 .../ModelVersionArchiveDetails.tsx            |   2 +-
 .../RegisteredModelArchiveDetails.tsx         |   2 +-
 .../settings/ModelRegistriesTableRow.tsx      |   5 +-
 .../settings/ModelRegistryTableRowStatus.tsx  |  23 ++--
 .../ModelRegistryTableRowStatus.spec.tsx      |  87 +++++++++++--
 16 files changed, 327 insertions(+), 45 deletions(-)
 create mode 100644 clients/ui/frontend/src/app/pages/modelCatalogSettings/components/__tests__/CatalogSourceStatus.spec.tsx
 create mode 100644 clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/getStatusLabel.spec.ts

diff --git a/clients/ui/bff/internal/api/model_registry_settings_handler.go b/clients/ui/bff/internal/api/model_registry_settings_handler.go
index 95d35aa826..410929ca87 100644
--- a/clients/ui/bff/internal/api/model_registry_settings_handler.go
+++ b/clients/ui/bff/internal/api/model_registry_settings_handler.go
@@ -36,10 +36,33 @@ func (app *App) GetAllModelRegistriesSettingsHandler(w http.ResponseWriter, r *h
 		Key:  "ssl-secret-key",
 	}
 
+	lastTransitionTime, _ := time.Parse(time.RFC3339, "2024-03-22T09:30:02Z")
+	deletionTime := lastTransitionTime
 	registries := []models.ModelRegistryKind{
-		createSampleModelRegistry("model-registry", namespace, &sslRootCertificateConfigMap, nil),
-		createSampleModelRegistry("model-registry-dora", namespace, nil, &sslRootCertificateSecret),
-		createSampleModelRegistry("model-registry-bella", namespace, nil, nil),
+		createSampleModelRegistry("model-registry", namespace, &sslRootCertificateConfigMap, nil, nil, nil),
+		createSampleModelRegistry("model-registry-dora", namespace, nil, &sslRootCertificateSecret, nil, nil),
+		createSampleModelRegistry("model-registry-bella", namespace, nil, nil, nil, nil),
+		createSampleModelRegistry("model-registry-ready", namespace, nil, nil, nil,
+			[]models.Condition{
+				{LastTransitionTime: lastTransitionTime, Message: "Deployment for custom resource model-registry-ready is available", Reason: "Available", Status: "True", Type: "Available"},
+			}),
+		createSampleModelRegistry("model-registry-starting", namespace, nil, nil, nil,
+			[]models.Condition{
+				{LastTransitionTime: lastTransitionTime, Message: "Deployment for custom resource model-registry-starting was successfully created", Reason: "CreatedDeployment", Status: "True", Type: "Progressing"},
+			}),
+		createSampleModelRegistry("model-registry-stopping", namespace, nil, nil, &deletionTime,
+			[]models.Condition{
+				{LastTransitionTime: lastTransitionTime, Message: "Deployment for custom resource model-registry-stopping is available", Reason: "Available", Status: "True", Type: "Available"},
+			}),
+		createSampleModelRegistry("model-registry-degrading", namespace, nil, nil, nil,
+			[]models.Condition{
+				{LastTransitionTime: lastTransitionTime, Message: "Service is degrading", Reason: "Degraded", Status: "True", Type: "Degraded"},
+			}),
+		createSampleModelRegistry("model-registry-unavailable", namespace, nil, nil, nil,
+			[]models.Condition{
+				{LastTransitionTime: lastTransitionTime, Message: "Service is unavailable", Reason: "Unavailable", Status: "False", Type: "Available"},
+				{LastTransitionTime: lastTransitionTime, Message: "Istio resources are unavailable", Reason: "IstioUnavailable", Status: "False", Type: "IstioAvailable"},
+			}),
 	}
 
 	modelRegistryRes := ModelRegistrySettingsListEnvelope{
@@ -62,7 +85,7 @@ func (app *App) GetModelRegistrySettingsHandler(w http.ResponseWriter, r *http.R
 	}
 
 	modelId := ps.ByName(ModelRegistryId)
-	registry := createSampleModelRegistry(modelId, namespace, nil, nil)
+	registry := createSampleModelRegistry(modelId, namespace, nil, nil, nil, nil)
 
 	modelRegistryWithCreds := models.ModelRegistryAndCredentials{
 		ModelRegistry:    registry,
@@ -102,7 +125,7 @@ func (app *App) CreateModelRegistrySettingsHandler(w http.ResponseWriter, r *htt
 
 	ctxLogger.Info("Creating model registry", "name", modelRegistryName)
 
-	registry := createSampleModelRegistry(modelRegistryName, namespace, nil, nil)
+	registry := createSampleModelRegistry(modelRegistryName, namespace, nil, nil, nil, nil)
 
 	modelRegistryRes := ModelRegistrySettingsEnvelope{
 		Data: registry,
@@ -125,7 +148,7 @@ func (app *App) UpdateModelRegistrySettingsHandler(w http.ResponseWriter, r *htt
 	}
 
 	modelId := ps.ByName(ModelRegistryId)
-	registry := createSampleModelRegistry(modelId, namespace, nil, nil)
+	registry := createSampleModelRegistry(modelId, namespace, nil, nil, nil, nil)
 
 	modelRegistryRes := ModelRegistrySettingsEnvelope{
 		Data: registry,
@@ -148,7 +171,7 @@ func (app *App) DeleteModelRegistrySettingsHandler(w http.ResponseWriter, r *htt
 
 	// This is a temporary fix to handle frontend error (as it is expecting ModelRegistryKind response) until we have a real implementation
 	modelId := ps.ByName(ModelRegistryId)
-	registry := createSampleModelRegistry(modelId, namespace, nil, nil)
+	registry := createSampleModelRegistry(modelId, namespace, nil, nil, nil, nil)
 
 	modelRegistryRes := ModelRegistrySettingsEnvelope{
 		Data: registry,
@@ -161,10 +184,9 @@ func (app *App) DeleteModelRegistrySettingsHandler(w http.ResponseWriter, r *htt
 }
 
 // This function is a temporary function to create a sample model registry kind until we have a real implementation
-func createSampleModelRegistry(name string, namespace string, SSLRootCertificateConfigMap *models.Entry, SSLRootCertificateSecret *models.Entry) models.ModelRegistryKind {
+func createSampleModelRegistry(name string, namespace string, SSLRootCertificateConfigMap *models.Entry, SSLRootCertificateSecret *models.Entry, deletionTimestamp *time.Time, conditions []models.Condition) models.ModelRegistryKind {
 
 	creationTime, _ := time.Parse(time.RFC3339, "2024-03-14T08:01:42Z")
-	lastTransitionTime, _ := time.Parse(time.RFC3339, "2024-03-22T09:30:02Z")
 
 	return models.ModelRegistryKind{
 		APIVersion: "modelregistry.io/v1alpha1",
@@ -173,6 +195,7 @@ func createSampleModelRegistry(name string, namespace string, SSLRootCertificate
 			Name:              name,
 			Namespace:         namespace,
 			CreationTimestamp: creationTime,
+			DeletionTimestamp: deletionTimestamp,
 			Annotations:       map[string]string{},
 		},
 		Spec: models.ModelRegistrySpec{
@@ -205,15 +228,7 @@ func createSampleModelRegistry(name string, namespace string, SSLRootCertificate
 			},
 		},
 		Status: models.Status{
-			Conditions: []models.Condition{
-				{
-					LastTransitionTime: lastTransitionTime,
-					Message:            "Deployment for custom resource " + name + " was successfully created",
-					Reason:             "CreatedDeployment",
-					Status:             "True",
-					Type:               "Progressing",
-				},
-			},
+			Conditions: conditions,
 		},
 	}
 }
diff --git a/clients/ui/bff/internal/models/model_registry_kind.go b/clients/ui/bff/internal/models/model_registry_kind.go
index f378b68751..ddc3e1998e 100644
--- a/clients/ui/bff/internal/models/model_registry_kind.go
+++ b/clients/ui/bff/internal/models/model_registry_kind.go
@@ -21,6 +21,7 @@ type Metadata struct {
 	Name              string            `json:"name"`
 	Namespace         string            `json:"namespace"`
 	CreationTimestamp time.Time         `json:"creationTimestamp"`
+	DeletionTimestamp *time.Time        `json:"deletionTimestamp,omitempty"`
 	Annotations       map[string]string `json:"annotations,omitempty"`
 }
 
diff --git a/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelTransferJobs.cy.ts b/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelTransferJobs.cy.ts
index 0ef41f860b..4cc905df2d 100644
--- a/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelTransferJobs.cy.ts
+++ b/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelTransferJobs.cy.ts
@@ -250,7 +250,7 @@ describe('Model transfer jobs', () => {
     failedRow.find().findByTestId('job-status').should('contain.text', 'Failed');
 
     const cancelledRow = modelTransferJobsPage.getRow('job-cancelled');
-    cancelledRow.find().findByTestId('job-status').should('contain.text', 'Cancelled');
+    cancelledRow.find().findByTestId('job-status').should('contain.text', 'Canceled');
 
     completedRow.find().findByTestId('job-status').click();
     cy.findByTestId('transfer-job-status-modal').should('be.visible');
diff --git a/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatus.tsx b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatus.tsx
index afb1d181f6..9023ac48e3 100644
--- a/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatus.tsx
+++ b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatus.tsx
@@ -38,6 +38,7 @@ const CatalogSourceStatus: React.FC<CatalogSourceStatusProps> = ({ catalogSource
   const startingOrUnknownLabel = (
     <Label
       color="grey"
+      variant="outline"
       icon={<InProgressIcon />}
       data-testid={`source-status-${catalogSourcesLoadError ? 'unknown' : 'starting'}-${catalogSourceConfig.id}`}
     >
@@ -53,7 +54,11 @@ const CatalogSourceStatus: React.FC<CatalogSourceStatusProps> = ({ catalogSource
   switch (matchingSource.status) {
     case CatalogSourceStatusEnum.AVAILABLE:
       return (
-        <Label status="success" data-testid={`source-status-connected-${catalogSourceConfig.id}`}>
+        <Label
+          status="success"
+          variant="outline"
+          data-testid={`source-status-connected-${catalogSourceConfig.id}`}
+        >
           Ready
         </Label>
       );
@@ -65,7 +70,11 @@ const CatalogSourceStatus: React.FC<CatalogSourceStatusProps> = ({ catalogSource
         <>
           <Stack hasGutter>
             <StackItem>
-              <Label status="danger" data-testid={`source-status-failed-${catalogSourceConfig.id}`}>
+              <Label
+                status="danger"
+                variant="outline"
+                data-testid={`source-status-failed-${catalogSourceConfig.id}`}
+              >
                 Failed
               </Label>
             </StackItem>
diff --git a/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatusErrorModal.tsx b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatusErrorModal.tsx
index 6b85582aa6..803978aeff 100644
--- a/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatusErrorModal.tsx
+++ b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatusErrorModal.tsx
@@ -27,7 +27,7 @@ const CatalogSourceStatusErrorModal: React.FC<CatalogSourceStatusErrorModalProps
     <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
       <FlexItem>Source status</FlexItem>
       <FlexItem>
-        <Label color="red" icon={<ExclamationCircleIcon />}>
+        <Label color="red" variant="outline" icon={<ExclamationCircleIcon />}>
           Failed
         </Label>
       </FlexItem>
diff --git a/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/__tests__/CatalogSourceStatus.spec.tsx b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/__tests__/CatalogSourceStatus.spec.tsx
new file mode 100644
index 0000000000..86de092b35
--- /dev/null
+++ b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/__tests__/CatalogSourceStatus.spec.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  ModelCatalogSettingsContext,
+  ModelCatalogSettingsContextType,
+} from '~/app/context/modelCatalogSettings/ModelCatalogSettingsContext';
+import { CatalogSourceConfig, CatalogSourceType } from '~/app/modelCatalogTypes';
+import CatalogSourceStatus from '~/app/pages/modelCatalogSettings/components/CatalogSourceStatus';
+
+const mockConfig: CatalogSourceConfig = {
+  id: 'test-source',
+  name: 'Test Source',
+  type: CatalogSourceType.YAML,
+  enabled: true,
+};
+
+const defaultPagination = { size: 0, pageSize: 10, nextPageToken: '' };
+
+const renderWithContext = (
+  config: CatalogSourceConfig,
+  contextOverrides: Partial<ModelCatalogSettingsContextType>,
+) => {
+  const defaultContext: ModelCatalogSettingsContextType = {
+    apiState: {
+      apiAvailable: false,
+      api: null as unknown as ModelCatalogSettingsContextType['apiState']['api'],
+    },
+    refreshAPIState: jest.fn(),
+    catalogSourceConfigs: null,
+    catalogSourceConfigsLoaded: false,
+    catalogSourceConfigsLoadError: undefined,
+    refreshCatalogSourceConfigs: jest.fn(),
+    catalogSources: null,
+    catalogSourcesLoaded: true,
+    catalogSourcesLoadError: undefined,
+    refreshCatalogSources: jest.fn(),
+    ...contextOverrides,
+  };
+
+  return render(
+    <ModelCatalogSettingsContext.Provider value={defaultContext}>
+      <CatalogSourceStatus catalogSourceConfig={config} />
+    </ModelCatalogSettingsContext.Provider>,
+  );
+};
+
+describe('CatalogSourceStatus', () => {
+  it('renders "Connected" label with outline variant', () => {
+    renderWithContext(mockConfig, {
+      catalogSources: {
+        ...defaultPagination,
+        items: [{ id: 'test-source', name: 'Test', labels: [], status: 'available' }],
+      },
+      catalogSourcesLoaded: true,
+    });
+
+    const label = screen.getByTestId('source-status-connected-test-source');
+    expect(screen.getByText('Connected')).toBeVisible();
+    expect(label.className).toMatch(/outline/);
+    expect(label.className).not.toMatch(/filled/);
+  });
+
+  it('renders "Failed" label with outline variant', () => {
+    renderWithContext(mockConfig, {
+      catalogSources: {
+        ...defaultPagination,
+        items: [
+          {
+            id: 'test-source',
+            name: 'Test',
+            labels: [],
+            status: 'error',
+            error: 'Connection refused',
+          },
+        ],
+      },
+      catalogSourcesLoaded: true,
+    });
+
+    const label = screen.getByTestId('source-status-failed-test-source');
+    expect(screen.getByText('Failed')).toBeVisible();
+    expect(label.className).toMatch(/outline/);
+    expect(label.className).not.toMatch(/filled/);
+  });
+
+  it('renders "Starting" label with outline variant when source has no status', () => {
+    renderWithContext(mockConfig, {
+      catalogSources: {
+        ...defaultPagination,
+        items: [{ id: 'test-source', name: 'Test', labels: [] }],
+      },
+      catalogSourcesLoaded: true,
+    });
+
+    const label = screen.getByTestId('source-status-starting-test-source');
+    expect(screen.getByText('Starting')).toBeVisible();
+    expect(label.className).toMatch(/outline/);
+  });
+
+  it('renders "Unknown" label with outline variant when there is a load error', () => {
+    renderWithContext(mockConfig, {
+      catalogSources: null,
+      catalogSourcesLoaded: true,
+      catalogSourcesLoadError: new Error('API error'),
+    });
+
+    const label = screen.getByTestId('source-status-unknown-test-source');
+    expect(screen.getByText('Unknown')).toBeVisible();
+    expect(label.className).toMatch(/outline/);
+  });
+
+  it('renders "-" for default sources', () => {
+    renderWithContext({ ...mockConfig, isDefault: true }, { catalogSourcesLoaded: true });
+    expect(screen.getByText('-')).toBeVisible();
+  });
+
+  it('renders "-" for disabled sources', () => {
+    renderWithContext({ ...mockConfig, enabled: false }, { catalogSourcesLoaded: true });
+    expect(screen.getByText('-')).toBeVisible();
+  });
+});
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobStatusModal.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobStatusModal.tsx
index 7febf965b3..a2d7e15ef0 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobStatusModal.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobStatusModal.tsx
@@ -88,7 +88,7 @@ const ModelTransferJobStatusModal: React.FC<ModelTransferJobStatusModalProps> =
     <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
       <FlexItem>{getModalTitle(job.uploadIntent)}</FlexItem>
       <FlexItem>
-        <Label color={statusInfo.color} icon={statusInfo.icon}>
+        <Label color={statusInfo.color} icon={statusInfo.icon} variant="outline">
           {statusInfo.label}
         </Label>
       </FlexItem>
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow.tsx
index 656ca52ba3..5ffe9e0b3e 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow.tsx
@@ -35,11 +35,11 @@ export const getStatusLabel = (
     case ModelTransferJobStatus.RUNNING:
       return { label: 'Running', color: 'blue', icon: <InProgressIcon /> };
     case ModelTransferJobStatus.PENDING:
-      return { label: 'Pending', color: 'grey', icon: <PendingIcon /> };
+      return { label: 'Pending', color: 'purple', icon: <PendingIcon /> };
     case ModelTransferJobStatus.FAILED:
       return { label: 'Failed', color: 'red', icon: <ExclamationCircleIcon /> };
     case ModelTransferJobStatus.CANCELLED:
-      return { label: 'Cancelled', color: 'grey', icon: <BanIcon /> };
+      return { label: 'Canceled', color: 'grey', icon: <BanIcon /> };
     default:
       return { label: status, color: 'grey', icon: null };
   }
@@ -141,6 +141,7 @@ const ModelTransferJobTableRow: React.FC<ModelTransferJobTableRowProps> = ({
                   color={statusInfo.color}
                   icon={statusInfo.icon}
                   data-testid="job-status"
+                  variant="filled"
                   isClickable
                   onClick={() => setIsStatusModalOpen(true)}
                 >
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/ModelTransferJobStatusModal.spec.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/ModelTransferJobStatusModal.spec.tsx
index 038331d45a..746b2a5cd4 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/ModelTransferJobStatusModal.spec.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/ModelTransferJobStatusModal.spec.tsx
@@ -54,6 +54,25 @@ describe('ModelTransferJobStatusModal', () => {
     });
   });
 
+  it('renders the status label in the modal title with outline variant', () => {
+    const job = mockModelTransferJob({
+      status: ModelTransferJobStatus.COMPLETED,
+      namespace: 'kubeflow',
+    });
+
+    mockUseFetchState.mockReturnValue([[], true, undefined, jest.fn()]);
+
+    render(<ModelTransferJobStatusModal job={job} isOpen onClose={jest.fn()} />);
+
+    const label = screen.getByText('Complete');
+    expect(label).toBeVisible();
+
+    const labelWrapper = label.closest('span.pf-v6-c-label');
+    expect(labelWrapper).not.toBeNull();
+    expect(labelWrapper!.className).toMatch(/outline/);
+    expect(labelWrapper!.className).not.toMatch(/filled/);
+  });
+
   it('shows unknown failure reason and danger alert when events fail to load', () => {
     // Arrange job without an explicit errorMessage so the fallback text is used.
     const job = mockModelTransferJob({
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/getStatusLabel.spec.ts b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/getStatusLabel.spec.ts
new file mode 100644
index 0000000000..b89fe83dbd
--- /dev/null
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/getStatusLabel.spec.ts
@@ -0,0 +1,34 @@
+import { ModelTransferJobStatus } from '~/app/types';
+import { getStatusLabel } from '~/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow';
+
+describe('getStatusLabel', () => {
+  it('returns green "Complete" for COMPLETED status', () => {
+    const result = getStatusLabel(ModelTransferJobStatus.COMPLETED);
+    expect(result.label).toBe('Complete');
+    expect(result.color).toBe('green');
+  });
+
+  it('returns blue "Running" for RUNNING status', () => {
+    const result = getStatusLabel(ModelTransferJobStatus.RUNNING);
+    expect(result.label).toBe('Running');
+    expect(result.color).toBe('blue');
+  });
+
+  it('returns purple "Pending" for PENDING status', () => {
+    const result = getStatusLabel(ModelTransferJobStatus.PENDING);
+    expect(result.label).toBe('Pending');
+    expect(result.color).toBe('purple');
+  });
+
+  it('returns red "Failed" for FAILED status', () => {
+    const result = getStatusLabel(ModelTransferJobStatus.FAILED);
+    expect(result.label).toBe('Failed');
+    expect(result.color).toBe('red');
+  });
+
+  it('returns grey "Canceled" for CANCELLED status', () => {
+    const result = getStatusLabel(ModelTransferJobStatus.CANCELLED);
+    expect(result.label).toBe('Canceled');
+    expect(result.color).toBe('grey');
+  });
+});
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ArchiveModelVersionDetails.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ArchiveModelVersionDetails.tsx
index 2023666ee8..b08c7afbe4 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ArchiveModelVersionDetails.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ArchiveModelVersionDetails.tsx
@@ -63,7 +63,7 @@ const ArchiveModelVersionDetails: React.FC<ArchiveModelVersionDetailsProps> = ({
               <Content>{mv.name}</Content>
             </FlexItem>
             <FlexItem>
-              <Label>Archived</Label>
+              <Label variant="outline">Archived</Label>
             </FlexItem>
           </Flex>
         )
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx
index a4b4e1e55c..bf4c365bd8 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx
@@ -74,7 +74,7 @@ const ModelVersionsArchiveDetails: React.FC<ModelVersionsArchiveDetailsProps> =
           mv && (
             <Flex alignItems={{ default: 'alignItemsCenter' }}>
               <FlexItem>{mv.name}</FlexItem>
-              <Label>Archived</Label>
+              <Label variant="outline">Archived</Label>
             </Flex>
           )
         }
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx
index 5542635537..f8a9d03a2e 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx
@@ -54,7 +54,7 @@ const RegisteredModelsArchiveDetails: React.FC<RegisteredModelsArchiveDetailsPro
           rm && (
             <Flex alignItems={{ default: 'alignItemsCenter' }}>
               <FlexItem>{rm.name}</FlexItem>
-              <Label>Archived</Label>
+              <Label variant="outline">Archived</Label>
             </Flex>
           )
         }
diff --git a/clients/ui/frontend/src/app/pages/settings/ModelRegistriesTableRow.tsx b/clients/ui/frontend/src/app/pages/settings/ModelRegistriesTableRow.tsx
index 43086dcab0..8f8042b83f 100644
--- a/clients/ui/frontend/src/app/pages/settings/ModelRegistriesTableRow.tsx
+++ b/clients/ui/frontend/src/app/pages/settings/ModelRegistriesTableRow.tsx
@@ -43,7 +43,10 @@ const ModelRegistriesTableRow: React.FC<ModelRegistriesTableRowProps> = ({
         )}
       </Td>
       <Td dataLabel="Status" style={{ verticalAlign: 'middle' }}>
-        <ModelRegistryTableRowStatus conditions={mr.status?.conditions} />
+        <ModelRegistryTableRowStatus
+          conditions={mr.status?.conditions}
+          deletionTimestamp={mr.metadata.deletionTimestamp}
+        />
       </Td>
       <Td modifier="fitContent" style={{ verticalAlign: 'middle' }}>
         {filteredRoleBindings.length === 0 ? (
diff --git a/clients/ui/frontend/src/app/pages/settings/ModelRegistryTableRowStatus.tsx b/clients/ui/frontend/src/app/pages/settings/ModelRegistryTableRowStatus.tsx
index 405e71a055..e9f6876d50 100644
--- a/clients/ui/frontend/src/app/pages/settings/ModelRegistryTableRowStatus.tsx
+++ b/clients/ui/frontend/src/app/pages/settings/ModelRegistryTableRowStatus.tsx
@@ -17,8 +17,9 @@ enum ModelRegistryStatus {
 }
 
 enum ModelRegistryStatusLabel {
-  Progressing = 'Progressing',
-  Available = 'Available',
+  Starting = 'Starting',
+  Stopping = 'Stopping',
+  Ready = 'Ready',
   Degrading = 'Degrading',
   Unavailable = 'Unavailable',
 }
@@ -29,23 +30,28 @@ enum ConditionStatus {
 }
 interface ModelRegistryTableRowStatusProps {
   conditions: K8sCondition[] | undefined;
+  deletionTimestamp?: string;
 }
 
 export const ModelRegistryTableRowStatus: React.FC<ModelRegistryTableRowStatusProps> = ({
   conditions,
+  deletionTimestamp,
 }) => {
   const conditionsMap =
     conditions?.reduce((acc: Record<string, K8sCondition | undefined>, condition) => {
       acc[condition.type] = condition;
       return acc;
     }, {}) ?? {};
-  let statusLabel: string = ModelRegistryStatusLabel.Progressing;
+  let statusLabel: string = ModelRegistryStatusLabel.Starting;
   let icon = <InProgressIcon />;
   let status: React.ComponentProps<typeof Label>['status'];
   let popoverMessages: string[] = [];
   let popoverTitle = '';
 
-  if (Object.values(conditionsMap).length) {
+  if (deletionTimestamp) {
+    statusLabel = ModelRegistryStatusLabel.Stopping;
+    icon = <InProgressIcon className="kubeflow-u-spin" />;
+  } else if (Object.values(conditionsMap).length) {
     const {
       [ModelRegistryStatus.Available]: availableCondition,
       [ModelRegistryStatus.Progressing]: progressCondition,
@@ -77,15 +83,15 @@ export const ModelRegistryTableRowStatus: React.FC<ModelRegistryTableRowStatusPr
       icon = <InProgressIcon className="kubeflow-u-spin" />;
       popoverTitle = 'Service is degrading';
     }
-    // Available
+    // Ready
     else if (availableCondition?.status === ConditionStatus.True) {
-      statusLabel = ModelRegistryStatusLabel.Available;
+      statusLabel = ModelRegistryStatusLabel.Ready;
       icon = <CheckCircleIcon />;
       status = 'success';
     }
-    // Progressing
+    // Starting
     else if (progressCondition?.status === ConditionStatus.True) {
-      statusLabel = ModelRegistryStatusLabel.Progressing;
+      statusLabel = ModelRegistryStatusLabel.Starting;
       icon = <InProgressIcon className="kubeflow-u-spin" />;
       status = 'info';
     }
@@ -131,6 +137,7 @@ export const ModelRegistryTableRowStatus: React.FC<ModelRegistryTableRowStatusPr
       data-testid="model-registry-label"
       icon={icon}
       status={status}
+      variant={isClickable ? 'filled' : 'outline'}
       isCompact
     >
       {statusLabel}
diff --git a/clients/ui/frontend/src/app/pages/settings/__tests__/ModelRegistryTableRowStatus.spec.tsx b/clients/ui/frontend/src/app/pages/settings/__tests__/ModelRegistryTableRowStatus.spec.tsx
index 30cc8aea13..9b7d936682 100644
--- a/clients/ui/frontend/src/app/pages/settings/__tests__/ModelRegistryTableRowStatus.spec.tsx
+++ b/clients/ui/frontend/src/app/pages/settings/__tests__/ModelRegistryTableRowStatus.spec.tsx
@@ -158,7 +158,7 @@ describe('ModelRegistryTableRowStatus', () => {
     ).toBeVisible();
   });
 
-  it('renders "Available" status', () => {
+  it('renders "Ready" status', () => {
     render(
       <ModelRegistryTableRowStatus
         conditions={[
@@ -167,7 +167,7 @@ describe('ModelRegistryTableRowStatus', () => {
         ]}
       />,
     );
-    expect(screen.getByText('Available')).toBeVisible();
+    expect(screen.getByText('Ready')).toBeVisible();
   });
   it('renders "Progressing" status', async () => {
     const user = userEvent.setup();
@@ -221,7 +221,7 @@ describe('ModelRegistryTableRowStatus', () => {
     expect(degradingText).toBeInTheDocument();
   });
 
-  it('renders "Progressing" status when popover message contains "ContainerCreating"', async () => {
+  it('renders "Starting" status when popover message contains "ContainerCreating"', async () => {
     render(
       <ModelRegistryTableRowStatus
         conditions={[
@@ -235,17 +235,17 @@ describe('ModelRegistryTableRowStatus', () => {
       />,
     );
 
-    expect(screen.getByText('Progressing')).toBeVisible();
+    expect(screen.getByText('Starting')).toBeVisible();
   });
 
-  it('renders "Progressing" status when conditions are empty', () => {
+  it('renders "Starting" status when conditions are empty', () => {
     render(<ModelRegistryTableRowStatus conditions={[]} />);
-    expect(screen.getByText('Progressing')).toBeVisible();
+    expect(screen.getByText('Starting')).toBeVisible();
   });
 
-  it('renders "Progressing" status when conditions are undefined', () => {
+  it('renders "Starting" status when conditions are undefined', () => {
     render(<ModelRegistryTableRowStatus conditions={undefined} />);
-    expect(screen.getByText('Progressing')).toBeVisible();
+    expect(screen.getByText('Starting')).toBeVisible();
   });
 
   it('renders "Unavailable" with multiple messages in popover', async () => {
@@ -286,6 +286,77 @@ describe('ModelRegistryTableRowStatus', () => {
     expect(screen.getByText('Some unavailable message 3')).toBeVisible();
   });
 
+  it('renders "Stopping" status when deletionTimestamp is set', () => {
+    render(
+      <ModelRegistryTableRowStatus
+        conditions={[{ status: 'True', type: 'Available' }]}
+        deletionTimestamp="2024-03-22T10:00:00Z"
+      />,
+    );
+    expect(screen.getByText('Stopping')).toBeVisible();
+  });
+
+  it('renders "Stopping" status even when conditions indicate Ready', () => {
+    render(
+      <ModelRegistryTableRowStatus
+        conditions={[
+          { status: 'True', type: 'Available' },
+          { status: 'False', type: 'Degraded' },
+        ]}
+        deletionTimestamp="2024-03-22T10:00:00Z"
+      />,
+    );
+    expect(screen.getByText('Stopping')).toBeVisible();
+    expect(screen.queryByText('Ready')).not.toBeInTheDocument();
+  });
+
+  describe('label variant styling', () => {
+    it('renders "Ready" label with outline variant (non-interactive)', () => {
+      render(
+        <ModelRegistryTableRowStatus
+          conditions={[
+            { status: 'False', type: 'Degraded' },
+            { status: 'True', type: 'Available' },
+          ]}
+        />,
+      );
+      const labelEl = screen.getByTestId('model-registry-label');
+      expect(labelEl.className).toMatch(/outline/);
+      expect(labelEl.className).not.toMatch(/filled/);
+    });
+
+    it('renders "Starting" label with outline variant (non-interactive)', () => {
+      render(<ModelRegistryTableRowStatus conditions={[]} />);
+      const labelEl = screen.getByTestId('model-registry-label');
+      expect(labelEl.className).toMatch(/outline/);
+    });
+
+    it('renders "Stopping" label with outline variant (non-interactive)', () => {
+      render(
+        <ModelRegistryTableRowStatus
+          conditions={[{ status: 'True', type: 'Available' }]}
+          deletionTimestamp="2024-03-22T10:00:00Z"
+        />,
+      );
+      const labelEl = screen.getByTestId('model-registry-label');
+      expect(labelEl.className).toMatch(/outline/);
+    });
+
+    it('renders "Unavailable" label with filled variant (interactive with popover)', () => {
+      render(
+        <ModelRegistryTableRowStatus
+          conditions={[
+            { status: 'False', type: 'Available', message: 'Service is unavailable' },
+            { status: 'False', type: 'IstioAvailable', message: 'Istio is unavailable' },
+          ]}
+        />,
+      );
+      const labelEl = screen.getByTestId('model-registry-label');
+      expect(labelEl.className).toMatch(/filled/);
+      expect(labelEl.className).not.toMatch(/outline/);
+    });
+  });
+
   it('renders "Unavailable" with an unknown status', async () => {
     const user = userEvent.setup();
 

From cc947a2dd0b852cca096f2697fa3cd40f0db2376 Mon Sep 17 00:00:00 2001
From: rsun19 <robertssun1234@gmail.com>
Date: Thu, 2 Apr 2026 15:55:47 -0400
Subject: [PATCH 2/4] addressed comments

Signed-off-by: rsun19 <robertssun1234@gmail.com>
---
 .../__tests__/useModelTransferJobs.spec.ts    | 13 +++---
 .../__tests__/getStatusLabel.spec.ts          | 44 +++++++------------
 .../ModelRegistryTableRowStatus.spec.tsx      |  2 +-
 3 files changed, 23 insertions(+), 36 deletions(-)

diff --git a/clients/ui/frontend/src/app/hooks/__tests__/useModelTransferJobs.spec.ts b/clients/ui/frontend/src/app/hooks/__tests__/useModelTransferJobs.spec.ts
index 9aed13d1c6..7f7d4dae83 100644
--- a/clients/ui/frontend/src/app/hooks/__tests__/useModelTransferJobs.spec.ts
+++ b/clients/ui/frontend/src/app/hooks/__tests__/useModelTransferJobs.spec.ts
@@ -1,4 +1,4 @@
-import { waitFor } from '@testing-library/react';
+import { act, waitFor } from '@testing-library/react';
 import { useFetchState, POLL_INTERVAL } from 'mod-arch-core';
 import useModelTransferJobs from '~/app/hooks/useModelTransferJobs';
 import { useModelRegistryAPI } from '~/app/hooks/useModelRegistryAPI';
@@ -129,10 +129,9 @@ describe('useModelTransferJobs', () => {
     // toggle hasActiveJobs to true and cause a re-render with refreshRate = POLL_INTERVAL.
     const capturedCallback = getCapturedCallback();
     expect(capturedCallback).toBeDefined();
-    await capturedCallback?.({});
-
-    // Wait for the hook to re-render after state update
-    await renderResult.waitForNextUpdate();
+    await act(async () => {
+      await capturedCallback?.({});
+    });
 
     // The latest call to useFetchState should have refreshRate set to POLL_INTERVAL
     const lastCallOptions = optionsCalls[optionsCalls.length - 1];
@@ -234,7 +233,9 @@ describe('useModelTransferJobs', () => {
     // so refreshRate should remain undefined (no need to wait for another update).
     const capturedCallback = getCapturedCallback();
     expect(capturedCallback).toBeDefined();
-    await capturedCallback?.({});
+    await act(async () => {
+      await capturedCallback?.({});
+    });
 
     const lastCallOptions = optionsCalls[optionsCalls.length - 1];
     expect(lastCallOptions.refreshRate).toBeUndefined();
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/getStatusLabel.spec.ts b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/getStatusLabel.spec.ts
index b89fe83dbd..023c59f33d 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/getStatusLabel.spec.ts
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/getStatusLabel.spec.ts
@@ -2,33 +2,19 @@ import { ModelTransferJobStatus } from '~/app/types';
 import { getStatusLabel } from '~/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow';
 
 describe('getStatusLabel', () => {
-  it('returns green "Complete" for COMPLETED status', () => {
-    const result = getStatusLabel(ModelTransferJobStatus.COMPLETED);
-    expect(result.label).toBe('Complete');
-    expect(result.color).toBe('green');
-  });
-
-  it('returns blue "Running" for RUNNING status', () => {
-    const result = getStatusLabel(ModelTransferJobStatus.RUNNING);
-    expect(result.label).toBe('Running');
-    expect(result.color).toBe('blue');
-  });
-
-  it('returns purple "Pending" for PENDING status', () => {
-    const result = getStatusLabel(ModelTransferJobStatus.PENDING);
-    expect(result.label).toBe('Pending');
-    expect(result.color).toBe('purple');
-  });
-
-  it('returns red "Failed" for FAILED status', () => {
-    const result = getStatusLabel(ModelTransferJobStatus.FAILED);
-    expect(result.label).toBe('Failed');
-    expect(result.color).toBe('red');
-  });
-
-  it('returns grey "Canceled" for CANCELLED status', () => {
-    const result = getStatusLabel(ModelTransferJobStatus.CANCELLED);
-    expect(result.label).toBe('Canceled');
-    expect(result.color).toBe('grey');
-  });
+  it.each([
+    [ModelTransferJobStatus.COMPLETED, 'Complete', 'green'],
+    [ModelTransferJobStatus.RUNNING, 'Running', 'blue'],
+    [ModelTransferJobStatus.PENDING, 'Pending', 'purple'],
+    [ModelTransferJobStatus.FAILED, 'Failed', 'red'],
+    [ModelTransferJobStatus.CANCELLED, 'Canceled', 'grey'],
+  ])(
+    'returns correct label, color, and icon for %s status',
+    (status, expectedLabel, expectedColor) => {
+      const result = getStatusLabel(status);
+      expect(result.label).toBe(expectedLabel);
+      expect(result.color).toBe(expectedColor);
+      expect(result.icon).toBeDefined();
+    },
+  );
 });
diff --git a/clients/ui/frontend/src/app/pages/settings/__tests__/ModelRegistryTableRowStatus.spec.tsx b/clients/ui/frontend/src/app/pages/settings/__tests__/ModelRegistryTableRowStatus.spec.tsx
index 9b7d936682..dc08587fa8 100644
--- a/clients/ui/frontend/src/app/pages/settings/__tests__/ModelRegistryTableRowStatus.spec.tsx
+++ b/clients/ui/frontend/src/app/pages/settings/__tests__/ModelRegistryTableRowStatus.spec.tsx
@@ -169,7 +169,7 @@ describe('ModelRegistryTableRowStatus', () => {
     );
     expect(screen.getByText('Ready')).toBeVisible();
   });
-  it('renders "Progressing" status', async () => {
+  it('renders "Unavailable" status', async () => {
     const user = userEvent.setup();
 
     render(

From 99c0fee7a9353adb0cb4dd8d8b0b2a5ec1bd2164 Mon Sep 17 00:00:00 2001
From: rsun19 <robertssun1234@gmail.com>
Date: Mon, 6 Apr 2026 14:52:51 -0400
Subject: [PATCH 3/4] updated labels to reflect correct status color

Signed-off-by: rsun19 <robertssun1234@gmail.com>
---
 .../components/CatalogSourceStatusErrorModal.tsx  |  2 +-
 .../ModelTransferJobStatusModal.tsx               |  7 ++++++-
 .../ModelTransferJobTableRow.tsx                  |  8 +++++---
 .../__tests__/getStatusLabel.spec.ts              | 15 ++++++++-------
 .../settings/ModelRegistryTableRowStatus.tsx      |  7 ++++++-
 5 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatusErrorModal.tsx b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatusErrorModal.tsx
index 803978aeff..c53b56315a 100644
--- a/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatusErrorModal.tsx
+++ b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/CatalogSourceStatusErrorModal.tsx
@@ -27,7 +27,7 @@ const CatalogSourceStatusErrorModal: React.FC<CatalogSourceStatusErrorModalProps
     <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
       <FlexItem>Source status</FlexItem>
       <FlexItem>
-        <Label color="red" variant="outline" icon={<ExclamationCircleIcon />}>
+        <Label status="danger" variant="outline" icon={<ExclamationCircleIcon />}>
           Failed
         </Label>
       </FlexItem>
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobStatusModal.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobStatusModal.tsx
index a2d7e15ef0..49ee535696 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobStatusModal.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobStatusModal.tsx
@@ -88,7 +88,12 @@ const ModelTransferJobStatusModal: React.FC<ModelTransferJobStatusModalProps> =
     <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
       <FlexItem>{getModalTitle(job.uploadIntent)}</FlexItem>
       <FlexItem>
-        <Label color={statusInfo.color} icon={statusInfo.icon} variant="outline">
+        <Label
+          color={statusInfo.color}
+          status={statusInfo.status}
+          icon={statusInfo.icon}
+          variant="outline"
+        >
           {statusInfo.label}
         </Label>
       </FlexItem>
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow.tsx
index 5ffe9e0b3e..63c9e9e981 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow.tsx
@@ -26,18 +26,19 @@ export const getStatusLabel = (
   status: ModelTransferJobStatus,
 ): {
   label: string;
-  color: React.ComponentProps<typeof Label>['color'];
+  color?: React.ComponentProps<typeof Label>['color'];
+  status?: React.ComponentProps<typeof Label>['status'];
   icon: React.ReactNode;
 } => {
   switch (status) {
     case ModelTransferJobStatus.COMPLETED:
-      return { label: 'Complete', color: 'green', icon: <CheckCircleIcon /> };
+      return { label: 'Complete', status: 'success', icon: <CheckCircleIcon /> };
     case ModelTransferJobStatus.RUNNING:
       return { label: 'Running', color: 'blue', icon: <InProgressIcon /> };
     case ModelTransferJobStatus.PENDING:
       return { label: 'Pending', color: 'purple', icon: <PendingIcon /> };
     case ModelTransferJobStatus.FAILED:
-      return { label: 'Failed', color: 'red', icon: <ExclamationCircleIcon /> };
+      return { label: 'Failed', status: 'danger', icon: <ExclamationCircleIcon /> };
     case ModelTransferJobStatus.CANCELLED:
       return { label: 'Canceled', color: 'grey', icon: <BanIcon /> };
     default:
@@ -139,6 +140,7 @@ const ModelTransferJobTableRow: React.FC<ModelTransferJobTableRowProps> = ({
               <FlexItem>
                 <Label
                   color={statusInfo.color}
+                  status={statusInfo.status}
                   icon={statusInfo.icon}
                   data-testid="job-status"
                   variant="filled"
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/getStatusLabel.spec.ts b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/getStatusLabel.spec.ts
index 023c59f33d..87cc38c19f 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/getStatusLabel.spec.ts
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/__tests__/getStatusLabel.spec.ts
@@ -3,17 +3,18 @@ import { getStatusLabel } from '~/app/pages/modelRegistry/screens/ModelTransferJ
 
 describe('getStatusLabel', () => {
   it.each([
-    [ModelTransferJobStatus.COMPLETED, 'Complete', 'green'],
-    [ModelTransferJobStatus.RUNNING, 'Running', 'blue'],
-    [ModelTransferJobStatus.PENDING, 'Pending', 'purple'],
-    [ModelTransferJobStatus.FAILED, 'Failed', 'red'],
-    [ModelTransferJobStatus.CANCELLED, 'Canceled', 'grey'],
+    [ModelTransferJobStatus.COMPLETED, 'Complete', undefined, 'success'],
+    [ModelTransferJobStatus.RUNNING, 'Running', 'blue', undefined],
+    [ModelTransferJobStatus.PENDING, 'Pending', 'purple', undefined],
+    [ModelTransferJobStatus.FAILED, 'Failed', undefined, 'danger'],
+    [ModelTransferJobStatus.CANCELLED, 'Canceled', 'grey', undefined],
   ])(
-    'returns correct label, color, and icon for %s status',
-    (status, expectedLabel, expectedColor) => {
+    'returns correct label, color/status, and icon for %s',
+    (status, expectedLabel, expectedColor, expectedStatus) => {
       const result = getStatusLabel(status);
       expect(result.label).toBe(expectedLabel);
       expect(result.color).toBe(expectedColor);
+      expect(result.status).toBe(expectedStatus);
       expect(result.icon).toBeDefined();
     },
   );
diff --git a/clients/ui/frontend/src/app/pages/settings/ModelRegistryTableRowStatus.tsx b/clients/ui/frontend/src/app/pages/settings/ModelRegistryTableRowStatus.tsx
index e9f6876d50..90e161ee9b 100644
--- a/clients/ui/frontend/src/app/pages/settings/ModelRegistryTableRowStatus.tsx
+++ b/clients/ui/frontend/src/app/pages/settings/ModelRegistryTableRowStatus.tsx
@@ -45,12 +45,14 @@ export const ModelRegistryTableRowStatus: React.FC<ModelRegistryTableRowStatusPr
   let statusLabel: string = ModelRegistryStatusLabel.Starting;
   let icon = <InProgressIcon />;
   let status: React.ComponentProps<typeof Label>['status'];
+  let color: React.ComponentProps<typeof Label>['color'] = 'blue';
   let popoverMessages: string[] = [];
   let popoverTitle = '';
 
   if (deletionTimestamp) {
     statusLabel = ModelRegistryStatusLabel.Stopping;
     icon = <InProgressIcon className="kubeflow-u-spin" />;
+    color = 'grey';
   } else if (Object.values(conditionsMap).length) {
     const {
       [ModelRegistryStatus.Available]: availableCondition,
@@ -76,11 +78,13 @@ export const ModelRegistryTableRowStatus: React.FC<ModelRegistryTableRowStatusPr
       statusLabel = ModelRegistryStatusLabel.Unavailable;
       icon = <ExclamationTriangleIcon />;
       status = 'warning';
+      color = undefined;
     }
     // Degrading
     else if (degradedCondition?.status === ConditionStatus.True) {
       statusLabel = ModelRegistryStatusLabel.Degrading;
       icon = <InProgressIcon className="kubeflow-u-spin" />;
+      color = 'grey';
       popoverTitle = 'Service is degrading';
     }
     // Ready
@@ -88,12 +92,12 @@ export const ModelRegistryTableRowStatus: React.FC<ModelRegistryTableRowStatusPr
       statusLabel = ModelRegistryStatusLabel.Ready;
       icon = <CheckCircleIcon />;
       status = 'success';
+      color = undefined;
     }
     // Starting
     else if (progressCondition?.status === ConditionStatus.True) {
       statusLabel = ModelRegistryStatusLabel.Starting;
       icon = <InProgressIcon className="kubeflow-u-spin" />;
-      status = 'info';
     }
   }
   // Handle popover logic for Unavailable status
@@ -136,6 +140,7 @@ export const ModelRegistryTableRowStatus: React.FC<ModelRegistryTableRowStatusPr
         : {})}
       data-testid="model-registry-label"
       icon={icon}
+      color={color}
       status={status}
       variant={isClickable ? 'filled' : 'outline'}
       isCompact

From 90bc812980230c7b19cb7093fd849aa90a0312e7 Mon Sep 17 00:00:00 2001
From: rsun19 <robertssun1234@gmail.com>
Date: Mon, 27 Apr 2026 09:39:23 -0400
Subject: [PATCH 4/4] fixed failing test

Signed-off-by: rsun19 <robertssun1234@gmail.com>
---
 .../components/__tests__/CatalogSourceStatus.spec.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/__tests__/CatalogSourceStatus.spec.tsx b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/__tests__/CatalogSourceStatus.spec.tsx
index 86de092b35..5994d84728 100644
--- a/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/__tests__/CatalogSourceStatus.spec.tsx
+++ b/clients/ui/frontend/src/app/pages/modelCatalogSettings/components/__tests__/CatalogSourceStatus.spec.tsx
@@ -46,7 +46,7 @@ const renderWithContext = (
 };
 
 describe('CatalogSourceStatus', () => {
-  it('renders "Connected" label with outline variant', () => {
+  it('renders "Ready" label with outline variant', () => {
     renderWithContext(mockConfig, {
       catalogSources: {
         ...defaultPagination,
@@ -56,7 +56,7 @@ describe('CatalogSourceStatus', () => {
     });
 
     const label = screen.getByTestId('source-status-connected-test-source');
-    expect(screen.getByText('Connected')).toBeVisible();
+    expect(screen.getByText('Ready')).toBeVisible();
     expect(label.className).toMatch(/outline/);
     expect(label.className).not.toMatch(/filled/);
   });