fix(type)

Author: andreaskienle

src/lib/api/types/crate/controlPlanes.ts

@@ -6,9 +6,9 @@ export interface Metadata {
   name: string;
   namespace: string;
   creationTimestamp: string;
-  annotations: {
+  annotations?: {
     'openmcp.cloud/display-name': string;
-    'openmcp.cloud/created-by': string;
+    'openmcp.cloud/created-by'?: string;
   };
 }
 

src/spaces/mcp/components/McpHeader.cy.tsx

@@ -1,18 +1,18 @@
 import { McpHeader } from './McpHeader';
 import { ControlPlaneType } from '../../../lib/api/types/crate/controlPlanes.ts';
 
-const mcp = {
-  metadata: {
-    name: 'my-control-plane',
-    creationTimestamp: '2024-04-15T10:30:00.000Z',
-    annotations: {
-      'openmcp.cloud/created-by': '[email protected]',
-    },
-  },
-} as ControlPlaneType;
-
 describe('McpHeader', () => {
-  it('renders MCP matadata', () => {
+  it('renders MCP metadata', () => {
+    const mcp = {
+      metadata: {
+        name: 'my-control-plane',
+        creationTimestamp: '2024-04-15T10:30:00.000Z',
+        annotations: {
+          'openmcp.cloud/created-by': '[email protected]',
+        },
+      },
+    } as ControlPlaneType;
+
     cy.clock(new Date('2024-04-17T10:30:00.000Z').getTime()); // 2 days after MCP creation date
     const creationDateAsString = new Date('2024-04-15T10:30:00.000Z').toLocaleDateString(undefined, {
       day: 'numeric',
@@ -26,4 +26,25 @@ describe('McpHeader', () => {
     cy.contains('span', '[email protected]').should('be.visible');
     cy.contains('span', `${creationDateAsString} (2 days ago)`).should('be.visible');
   });
+
+  it('renders with missing MCP metadata', () => {
+    const mcp = {
+      metadata: {
+        name: 'my-control-plane',
+        creationTimestamp: '2024-04-15T10:30:00.000Z',
+      },
+    } as ControlPlaneType; // missing annotations
+
+    cy.clock(new Date('2024-04-17T10:30:00.000Z').getTime()); // 2 days after MCP creation date
+    const creationDateAsString = new Date('2024-04-15T10:30:00.000Z').toLocaleDateString(undefined, {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    });
+
+    cy.mount(<McpHeader mcp={mcp} />);
+
+    cy.contains('span', 'my-control-plane').should('be.visible');
+    cy.contains('span', `${creationDateAsString} (2 days ago)`).should('be.visible');
+  });
 });

src/spaces/mcp/components/McpHeader.module.css

@@ -5,7 +5,7 @@
 .grid {
   display: grid;
   grid-template-columns: auto auto;
-  gap: 6px 12px;
+  gap: 0.375rem 0.75rem;
   align-items: center;
   font-size: var(--sapFontSize);
 }

src/spaces/mcp/components/McpHeader.tsx

@@ -3,7 +3,6 @@ import { ControlPlaneType } from '../../../lib/api/types/crate/controlPlanes.ts'
 import styles from './McpHeader.module.css';
 import { formatDateAsTimeAgo } from '../../../utils/i18n/timeAgo.ts';
 import { useTranslation } from 'react-i18next';
-import { Button, Icon } from '@ui5/webcomponents-react';
 
 export interface McpHeaderProps {
   mcp: ControlPlaneType;
@@ -17,6 +16,9 @@ export function McpHeader({ mcp }: McpHeaderProps) {
     month: 'long',
     year: 'numeric',
   });
+
+  const createdBy = mcp.metadata.annotations?.['openmcp.cloud/created-by'];
+
   return (
     <div className={styles.container}>
       <div className={styles.grid}>
@@ -28,8 +30,12 @@ export function McpHeader({ mcp }: McpHeaderProps) {
           {created} ({formatDateAsTimeAgo(mcp.metadata.creationTimestamp)})
         </span>
 
-        <span className={styles.label}>{t('McpHeader.createdByLabel')}</span>
-        <span>{mcp.metadata.annotations['openmcp.cloud/created-by']}</span>
+        {createdBy ? (
+          <>
+            <span className={styles.label}>{t('McpHeader.createdByLabel')}</span>
+            <span>{createdBy}</span>
+          </>
+        ) : null}
       </div>
     </div>
   );