add changes requested and updated tests

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

Author: Philip-Carneiro

clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelRegistryView/modelTransferJobs.ts

@@ -4,6 +4,18 @@ class ModelTransferJobsTableRow extends TableRow {
   findJobName() {
     return this.find().findByTestId('job-name');
   }
+
+  findStatus() {
+    return this.find().findByTestId('job-status');
+  }
+
+  findErrorMessage() {
+    return this.find().findByTestId('job-error-message');
+  }
+
+  findRetryButton() {
+    return this.find().findByTestId('job-retry-button');
+  }
 }
 
 class ModelTransferJobsPage {
@@ -57,6 +69,14 @@ class ModelTransferJobsPage {
   findEmptyState() {
     return cy.findByTestId('empty-model-transfer-jobs');
   }
+
+  findRetryModal() {
+    return cy.findByTestId('retry-job-modal');
+  }
+
+  findRetryModalSubmitButton() {
+    return this.findRetryModal().findByTestId('retry-job-submit-button');
+  }
 }
 
 export const modelTransferJobsPage = new ModelTransferJobsPage();

clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelTransferJobs.cy.ts

@@ -477,6 +477,146 @@ describe('Model transfer jobs', () => {
     });
   });
 
+  it('should show truncated error message below Failed label when errorMessage exists', () => {
+    interceptWithSingleFailedJob(
+      'job-with-error',
+      'Connection timeout while uploading to destination bucket',
+    );
+
+    modelTransferJobsPage.visit(modelRegistryName);
+    modelTransferJobsPage.findTableRows().should('have.length', 1);
+
+    const row = modelTransferJobsPage.getRow('job-with-error');
+    row.findStatus().should('contain.text', 'Failed');
+    row
+      .findErrorMessage()
+      .should('be.visible')
+      .and('contain.text', 'Connection timeout while uploading to destination bucket');
+  });
+
+  it('should not show error message when job is Failed but errorMessage is undefined', () => {
+    const failedJobList = mockModelTransferJobList({
+      items: [
+        mockModelTransferJob({
+          id: 'job-failed-no-msg',
+          name: 'job-failed-no-msg',
+          jobDisplayName: 'job-failed-no-msg',
+          status: ModelTransferJobStatus.FAILED,
+          errorMessage: undefined,
+        }),
+      ],
+      size: 1,
+      pageSize: 10,
+      nextPageToken: '',
+    });
+
+    cy.intercept(
+      'GET',
+      `**/api/${MODEL_REGISTRY_API_VERSION}/model_registry/${modelRegistryName}/model_transfer_jobs*`,
+      mockModArchResponse(failedJobList),
+    );
+
+    modelTransferJobsPage.visit(modelRegistryName);
+
+    const row = modelTransferJobsPage.getRow('job-failed-no-msg');
+    row.findStatus().should('contain.text', 'Failed');
+    row.findErrorMessage().should('not.exist');
+  });
+
+  it('should not show error message when errorMessage is an empty string', () => {
+    const failedJobList = mockModelTransferJobList({
+      items: [
+        mockModelTransferJob({
+          id: 'job-failed-empty-msg',
+          name: 'job-failed-empty-msg',
+          jobDisplayName: 'job-failed-empty-msg',
+          status: ModelTransferJobStatus.FAILED,
+          errorMessage: '',
+        }),
+      ],
+      size: 1,
+      pageSize: 10,
+      nextPageToken: '',
+    });
+
+    cy.intercept(
+      'GET',
+      `**/api/${MODEL_REGISTRY_API_VERSION}/model_registry/${modelRegistryName}/model_transfer_jobs*`,
+      mockModArchResponse(failedJobList),
+    );
+
+    modelTransferJobsPage.visit(modelRegistryName);
+
+    const row = modelTransferJobsPage.getRow('job-failed-empty-msg');
+    row.findStatus().should('contain.text', 'Failed');
+    row.findErrorMessage().should('not.exist');
+  });
+
+  it('should open status modal when clicking the truncated error message', () => {
+    interceptWithSingleFailedJob('job-click-error', 'Upload failed: insufficient storage');
+
+    cy.intercept('GET', '**/model_transfer_jobs/job-click-error/events*', {
+      forceNetworkError: true,
+    });
+
+    modelTransferJobsPage.visit(modelRegistryName);
+
+    const row = modelTransferJobsPage.getRow('job-click-error');
+    row.findErrorMessage().click();
+
+    cy.findByTestId('transfer-job-status-modal').should('be.visible');
+    cy.findByLabelText('Close').click();
+    cy.findByTestId('transfer-job-status-modal').should('not.exist');
+  });
+
+  it('should show retry button for failed jobs and open retry modal on click', () => {
+    interceptWithSingleFailedJob('job-retry-test', 'Connection error');
+
+    cy.intercept(
+      'PUT',
+      `**/api/${MODEL_REGISTRY_API_VERSION}/model_registry/${modelRegistryName}/model_transfer_jobs/job-retry-test*`,
+      { statusCode: 200, body: {} },
+    ).as('retryJob');
+
+    modelTransferJobsPage.visit(modelRegistryName);
+
+    const row = modelTransferJobsPage.getRow('job-retry-test');
+    row.findRetryButton().should('be.visible').click();
+
+    modelTransferJobsPage.findRetryModal().should('be.visible');
+    modelTransferJobsPage.findRetryModal().contains('Retry model transfer job?').should('exist');
+    modelTransferJobsPage.findRetryModalSubmitButton().should('be.visible');
+  });
+
+  it('should not show error message for non-FAILED statuses', () => {
+    const completedJobList = mockModelTransferJobList({
+      items: [
+        mockModelTransferJob({
+          id: 'job-completed-no-error',
+          name: 'job-completed-no-error',
+          jobDisplayName: 'job-completed-no-error',
+          status: ModelTransferJobStatus.COMPLETED,
+        }),
+      ],
+      size: 1,
+      pageSize: 10,
+      nextPageToken: '',
+    });
+
+    cy.intercept(
+      'GET',
+      `**/api/${MODEL_REGISTRY_API_VERSION}/model_registry/${modelRegistryName}/model_transfer_jobs*`,
+      mockModArchResponse(completedJobList),
+    );
+
+    modelTransferJobsPage.visit(modelRegistryName);
+
+    const row = modelTransferJobsPage.getRow('job-completed-no-error');
+    row.findStatus().should('contain.text', 'Complete');
+    row.findErrorMessage().should('not.exist');
+    row.findRetryButton().should('not.exist');
+  });
+
   it('should show the empty state when there are no transfer jobs', () => {
     const emptyList = mockModelTransferJobList({
       items: [],

clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow.tsx

@@ -168,7 +168,10 @@ const ModelTransferJobTableRow: React.FC<ModelTransferJobTableRowProps> = ({
                 isInline
                 onClick={() => setIsStatusModalOpen(true)}
                 data-testid="job-error-message"
-                style={{ textDecoration: 'underline dotted', textUnderlineOffset: '3px' }}
+                style={{
+                  textDecoration: 'underline dotted',
+                  textUnderlineOffset: 'var(--pf-t--global--spacer--xs)',
+                }}
               >
                 <Truncate content={job.errorMessage} />
               </Button>