fix a11y from model catalog details (#2627)

* fix a11y from model details

Signed-off-by: Philip Colares Carneiro <philip.colares@gmail.com>

* add changes requested

Signed-off-by: Philip Colares Carneiro <philip.colares@gmail.com>

---------

Signed-off-by: Philip Colares Carneiro <philip.colares@gmail.com>

Author: Philip-Carneiro

clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelCatalog.ts

@@ -168,6 +168,10 @@ class ModelCatalog {
     return cy.findByTestId('model-long-description');
   }
 
+  findModelCardMarkdown() {
+    return cy.findByTestId('model-card-markdown');
+  }
+
   findModelArchitecture() {
     return cy.findByTestId('model-architecture');
   }

clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelCatalog/modelCatalogDetails.cy.ts

@@ -7,8 +7,9 @@ import {
   interceptArtifactsList,
   interceptPerformanceArtifactsList,
 } from '~/__tests__/cypress/cypress/support/interceptHelpers/modelCatalog';
-import { mockCatalogModelArtifact } from '~/__mocks__';
+import { mockCatalogModelArtifact, mockCatalogModel } from '~/__mocks__';
 import { ModelRegistryMetadataType } from '~/app/types';
+import { MODEL_CATALOG_API_VERSION } from '~/__tests__/cypress/cypress/support/commands/api';
 
 describe('Model Catalog Details Page', () => {
   beforeEach(() => {
@@ -201,3 +202,113 @@ describe('Model Catalog Details Page - Filter State Management', () => {
     modelCatalog.findPerformanceFiltersUpdatedAlert().should('be.visible');
   });
 });
+
+describe('Model Catalog Details Page - Edge Cases', () => {
+  beforeEach(() => {
+    cy.intercept('GET', '/model-registry/api/v1/model_registry*', [
+      mockModelRegistry({ name: 'modelregistry-sample' }),
+    ]).as('getModelRegistries');
+  });
+
+  it('should show "No description" when model has no description', () => {
+    const modelWithoutDescription = mockCatalogModel({
+      name: 'no-description-model',
+      description: undefined,
+    });
+
+    setupModelCatalogIntercepts({ customNonValidatedModel: modelWithoutDescription });
+    modelCatalog.visit();
+    modelCatalog.findLoadingState().should('not.exist');
+    modelCatalog.findModelCatalogDetailLink().first().click();
+    modelCatalog.findBreadcrumb().should('exist');
+
+    modelCatalog.findDetailsDescription().should('contain.text', 'No description');
+  });
+
+  it('should show model card markdown when readme exists', () => {
+    setupModelCatalogIntercepts({});
+    modelCatalog.visit();
+    modelCatalog.findLoadingState().should('not.exist');
+    modelCatalog.findModelCatalogDetailLink().first().click();
+    modelCatalog.findBreadcrumb().should('exist');
+
+    modelCatalog.findModelCardMarkdown().should('exist');
+  });
+
+  it('should show "No model card" when model has no readme', () => {
+    const modelWithoutReadme = mockCatalogModel({
+      name: 'no-readme-model',
+      readme: undefined,
+    });
+
+    setupModelCatalogIntercepts({ customNonValidatedModel: modelWithoutReadme });
+    modelCatalog.visit();
+    modelCatalog.findLoadingState().should('not.exist');
+    modelCatalog.findModelCatalogDetailLink().first().click();
+    modelCatalog.findBreadcrumb().should('exist');
+
+    cy.contains('No model card').should('be.visible');
+  });
+
+  it('should show "N/A" for provider when provider is not set', () => {
+    const modelWithoutProvider = mockCatalogModel({
+      name: 'no-provider-model',
+      provider: undefined,
+    });
+
+    setupModelCatalogIntercepts({ customNonValidatedModel: modelWithoutProvider });
+    modelCatalog.visit();
+    modelCatalog.findLoadingState().should('not.exist');
+    modelCatalog.findModelCatalogDetailLink().first().click();
+    modelCatalog.findBreadcrumb().should('exist');
+
+    cy.findAllByText('N/A').should('have.length.at.least', 1);
+  });
+
+  it('should show error alert when artifacts fail to load', () => {
+    setupModelCatalogIntercepts({});
+
+    cy.intercept(
+      {
+        method: 'GET',
+        url: new RegExp(
+          `/model-registry/api/${MODEL_CATALOG_API_VERSION}/model_catalog/sources/.*/artifacts/.*`,
+        ),
+      },
+      { statusCode: 500, body: { message: 'Failed to load artifacts' } },
+    ).as('getArtifactsError');
+
+    modelCatalog.visit();
+    modelCatalog.findLoadingState().should('not.exist');
+    modelCatalog.findModelCatalogDetailLink().first().click();
+    modelCatalog.findBreadcrumb().should('exist');
+
+    cy.wait('@getArtifactsError');
+    cy.get('.pf-v6-c-alert.pf-m-danger').should('be.visible');
+  });
+
+  it('should show spinner while artifacts are loading', () => {
+    setupModelCatalogIntercepts({});
+
+    cy.intercept(
+      {
+        method: 'GET',
+        url: new RegExp(
+          `/model-registry/api/${MODEL_CATALOG_API_VERSION}/model_catalog/sources/.*/artifacts/.*`,
+        ),
+      },
+      (req) => {
+        req.on('response', (res) => {
+          res.setDelay(10000);
+        });
+      },
+    ).as('getArtifactsSlow');
+
+    modelCatalog.visit();
+    modelCatalog.findLoadingState().should('not.exist');
+    modelCatalog.findModelCatalogDetailLink().first().click();
+    modelCatalog.findBreadcrumb().should('exist');
+
+    cy.findByRole('progressbar').should('exist');
+  });
+});

clients/ui/frontend/src/app/pages/modelCatalog/screens/ModelDetailsView.tsx

@@ -166,11 +166,13 @@ const ModelDetailsView: React.FC<ModelDetailsViewProps> = ({
                 </DescriptionListGroup>
                 <DescriptionListGroup>
                   <DescriptionListTerm>License</DescriptionListTerm>
-                  <ExternalLink
-                    text="Agreement"
-                    to={model.licenseLink || ''}
-                    testId="model-license-link"
-                  />
+                  <DescriptionListDescription>
+                    <ExternalLink
+                      text="Agreement"
+                      to={model.licenseLink || ''}
+                      testId="model-license-link"
+                    />
+                  </DescriptionListDescription>
                 </DescriptionListGroup>
                 <DescriptionListGroup>
                   <DescriptionListTerm>Provider</DescriptionListTerm>