feat(ws): Notebooks 2.0 // Frontend // Workspaces table // Workspace …

…Kind column #148 Signed-off-by: Liav Weiss (EXT-Nokia) <[email protected]>
kubeflow · Jan 29, 2025 · 0bc7007 · 0bc7007
1 parent ff41665
commit 0bc7007
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 20 deletions.
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
@@ -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
@@ -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
@@ -9,13 +9,13 @@ type KindLogoDict = Record<string, string>;
  */
 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
@@ -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 = () => {
                     />
                     <Td dataLabel={columnNames.name}>{workspace.name}</Td>
                     <Td dataLabel={columnNames.kind}>
-                      <Tooltip content={workspace.kind}>
-                        <Brand
-                          src={kindLogoDict[workspace.kind]}
-                          alt={workspace.kind}
-                          style={{ width: '20px', height: '20px', cursor: 'pointer' }}
-                        />
-                      </Tooltip>
+                      {kindLogoDict[workspace.kind] ? (
+                        <Tooltip content={workspace.kind}>
+                          <Brand
+                            src={kindLogoDict[workspace.kind]}
+                            alt={workspace.kind}
+                            style={{ width: '20px', height: '20px', cursor: 'pointer' }}
+                          />
+                        </Tooltip>
+                      ) : (
+                        <Tooltip content={workspace.kind}>
+                          <CodeIcon />
+                        </Tooltip>
+                      )}
                     </Td>
                     <Td dataLabel={columnNames.image}>{workspace.options.imageConfig}</Td>
                     <Td dataLabel={columnNames.podConfig}>{workspace.options.podConfig}</Td>
-Original file line number
+Diff line change
@@ Expand Up / @@ -67,7 +67,7 @@ export const mockWorkspaceKindsInValid = { @@
       data: [
         createMockWorkspaceKind({
           logo: {
-            url: 'https://invalid-url.example.com/invalid-logo.svg', // Broken URL
+            url: '',
           },
         }),
       ],
@@ Expand Down @@