diff --git a/workspaces/frontend/src/__tests__/cypress/cypress/tests/e2e/workspaceKind.cy.ts b/workspaces/frontend/src/__tests__/cypress/cypress/tests/e2e/workspaceKind.cy.ts index b70d6b83..ba810528 100644 --- a/workspaces/frontend/src/__tests__/cypress/cypress/tests/e2e/workspaceKind.cy.ts +++ b/workspaces/frontend/src/__tests__/cypress/cypress/tests/e2e/workspaceKind.cy.ts @@ -47,17 +47,17 @@ describe('Test buildKindLogoDictionary Functionality', () => { cy.visit('/'); }); - it('should fallback when logo URL is invalid', () => { + it('should show a fallback icon when the logo URL is missing', () => { cy.get('tbody tr').each(($row) => { cy.wrap($row) .find('td[data-label="Kind"]') .within(() => { - cy.get('img') - .should('exist') - .then(($img) => { - // If the image src is invalid, it should not load - expect($img[0].naturalWidth).to.equal(0); // If the image is invalid, naturalWidth should be 0 - }); + // Ensure that the image is NOT rendered (because it's invalid or missing) + cy.get('img').should('not.exist'); // No images should be displayed + + // Check if the fallback icon (TimesCircleIcon) is displayed + cy.get('svg').should('exist'); // Look for the SVG (TimesCircleIcon) + cy.get('svg').should('have.class', 'pf-v6-svg'); // Ensure the correct fallback icon class is applied (update the class name based on your icon library) }); }); }); diff --git a/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaceKinds.mock.ts b/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaceKinds.mock.ts index 082e02c8..03c0b05f 100644 --- a/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaceKinds.mock.ts +++ b/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaceKinds.mock.ts @@ -67,7 +67,7 @@ export const mockWorkspaceKindsInValid = { data: [ createMockWorkspaceKind({ logo: { - url: 'https://invalid-url.example.com/invalid-logo.svg', // Broken URL + url: '', }, }), ], diff --git a/workspaces/frontend/src/app/actions/WorkspaceKindsActions.tsx b/workspaces/frontend/src/app/actions/WorkspaceKindsActions.tsx index e6b42388..5bc1abc8 100644 --- a/workspaces/frontend/src/app/actions/WorkspaceKindsActions.tsx +++ b/workspaces/frontend/src/app/actions/WorkspaceKindsActions.tsx @@ -9,13 +9,13 @@ type KindLogoDict = Record; */ export function buildKindLogoDictionary(workspaceKinds: WorkspaceKind[] | []): KindLogoDict { const kindLogoDict: KindLogoDict = {}; - try { - for (const workspaceKind of workspaceKinds) { + + for (const workspaceKind of workspaceKinds) { + try { kindLogoDict[workspaceKind.name] = workspaceKind.logo.url; + } catch { + kindLogoDict[workspaceKind.name] = ''; } - } catch { - return kindLogoDict; } - return kindLogoDict; } diff --git a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx index f316f67c..fbf54b8d 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx @@ -26,6 +26,7 @@ import { IActions, } from '@patternfly/react-table'; import { useState } from 'react'; +import { CodeIcon } from '@patternfly/react-icons'; import { Workspace, WorkspacesColumnNames, WorkspaceState } from '~/shared/types'; import { WorkspaceDetails } from '~/app/pages/Workspaces/Details/WorkspaceDetails'; import { ExpandedWorkspaceRow } from '~/app/pages/Workspaces/ExpandedWorkspaceRow'; @@ -428,13 +429,19 @@ export const Workspaces: React.FunctionComponent = () => { /> {workspace.name} - - - + {kindLogoDict[workspace.kind] ? ( + + + + ) : ( + + + + )} {workspace.options.imageConfig} {workspace.options.podConfig}