Typrescript fixes and added TypeScript Type Check to the pipeline

.github/workflows/build.yaml

@@ -24,6 +24,9 @@ jobs:
       - name: Lint
         run: npm run lint
 
+      - name: TypeScript Type Check
+        run: npx tsc --noEmit
+
       - name: Run Vitest Tests
         run: npm run test:vi
 

src/components/ControlPlane/MCPHealthPopoverButton.tsx

@@ -11,7 +11,7 @@ import {
 import { AnalyticalTableColumnDefinition } from '@ui5/webcomponents-react/wrappers';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
 import '@ui5/webcomponents-icons/dist/copy';
-import { JSX, useRef, useState, ReactNode } from 'react';
+import { JSX, useRef, useState } from 'react';
 import type { ButtonClickEventDetail } from '@ui5/webcomponents/dist/Button.js';
 import {
   ControlPlaneStatusType,
@@ -27,13 +27,11 @@ import type { Ui5CustomEvent } from '@ui5/webcomponents-react-base';
 
 interface CellData<T> {
   cell: {
-    value: ReactNode;
+    value: T | undefined;
+    row: {
+      original: Record<string, unknown>;
+    };
   };
-  row: {
-    original: T;
-    [key: string]: unknown;
-  };
-  [key: string]: unknown;
 }
 
 type MCPHealthPopoverButtonProps = {
@@ -99,7 +97,7 @@ const MCPHealthPopoverButton = ({ mcpStatus, projectName, workspaceName, mcpName
       Header: t('MCPHealthPopoverButton.statusHeader'),
       accessor: 'status',
       width: 50,
-      Cell: (instance: CellData<ControlPlaneStatusCondition>) => {
+      Cell: (instance: CellData<string>) => {
         const isReady = instance.cell.value === 'True';
         return (
           <Icon
@@ -113,31 +111,31 @@ const MCPHealthPopoverButton = ({ mcpStatus, projectName, workspaceName, mcpName
       Header: t('MCPHealthPopoverButton.typeHeader'),
       accessor: 'type',
       width: 150,
-      Cell: (instance: CellData<ControlPlaneStatusCondition>) => {
+      Cell: (instance: CellData<string>) => {
         return <TooltipCell>{instance.cell.value}</TooltipCell>;
       },
     },
     {
       Header: t('MCPHealthPopoverButton.messageHeader'),
       accessor: 'message',
       width: 350,
-      Cell: (instance: CellData<ControlPlaneStatusCondition>) => {
+      Cell: (instance: CellData<string>) => {
         return <TooltipCell>{instance.cell.value}</TooltipCell>;
       },
     },
     {
       Header: t('MCPHealthPopoverButton.reasonHeader'),
       accessor: 'reason',
       width: 100,
-      Cell: (instance: CellData<ControlPlaneStatusCondition>) => {
+      Cell: (instance: CellData<string>) => {
         return <TooltipCell>{instance.cell.value}</TooltipCell>;
       },
     },
     {
       Header: t('MCPHealthPopoverButton.transitionHeader'),
       accessor: 'lastTransitionTime',
       width: 125,
-      Cell: (instance: CellData<ControlPlaneStatusCondition>) => {
+      Cell: (instance: CellData<string>) => {
         const rawDate = instance.cell.value;
         const date = new Date(rawDate as string);
         return (

src/components/ControlPlane/Providers.tsx

@@ -24,14 +24,13 @@ import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
 import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
-interface CellData<T> {
+type CellInstance = {
   cell: {
-    value: T | null;
     row: {
-      original?: ProvidersRow;
+      original: Record<string, unknown>;
     };
   };
-}
+};
 
 type ProvidersRow = {
   name: string;
@@ -78,14 +77,14 @@ export function Providers() {
         width: 125,
         Filter: ({ column }) => <StatusFilter column={column} />,
         filter: 'equals',
-        Cell: (cellData: CellData<ProvidersRow['installed']>) =>
+        Cell: (cellData: CellInstance) =>
           cellData.cell.row.original?.installed != null ? (
             <ResourceStatusCell
               isOk={cellData.cell.row.original?.installed === 'true'}
-              transitionTime={cellData.cell.row.original?.installedTransitionTime}
+              transitionTime={cellData.cell.row.original?.installedTransitionTime as string}
               positiveText={t('common.installed')}
               negativeText={t('errors.installError')}
-              message={cellData.cell.row.original?.installedMessage}
+              message={cellData.cell.row.original?.installedMessage as string}
             />
           ) : null,
       },
@@ -96,14 +95,14 @@ export function Providers() {
         width: 125,
         Filter: ({ column }) => <StatusFilter column={column} />,
         filter: 'equals',
-        Cell: (cellData: CellData<ProvidersRow['healthy']>) =>
+        Cell: (cellData: CellInstance) =>
           cellData.cell.row.original?.installed != null ? (
             <ResourceStatusCell
               isOk={cellData.cell.row.original?.healthy === 'true'}
-              transitionTime={cellData.cell.row.original?.healthyTransitionTime}
+              transitionTime={cellData.cell.row.original?.healthyTransitionTime as string}
               positiveText={t('common.healthy')}
               negativeText={t('errors.notHealthy')}
-              message={cellData.cell.row.original?.healthyMessage}
+              message={cellData.cell.row.original?.healthyMessage as string}
             />
           ) : null,
       },
@@ -113,7 +112,7 @@ export function Providers() {
         width: 75,
         accessor: 'yaml',
         disableFilters: true,
-        Cell: (cellData: CellData<ProvidersRow>) => (
+        Cell: (cellData: CellInstance) => (
           <YamlViewButton variant="resource" resource={cellData.cell.row.original?.item as Resource} />
         ),
       },

src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx

@@ -52,7 +52,7 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
   const errorView = createErrorView(cpsError);
   const shouldCollapsePanel = !!errorView;
 
-  function createErrorView(error: APIError) {
+  function createErrorView(error: APIError | undefined) {
     if (error) {
       if (error.status === 403) {
         return (

src/components/Core/FeedbackButton.tsx

@@ -17,6 +17,7 @@ import { Dispatch, RefObject, SetStateAction, useRef, useState } from 'react';
 import { useAuthOnboarding } from '../../spaces/onboarding/auth/AuthContextOnboarding';
 import { useTranslation } from 'react-i18next';
 import { ButtonClickEventDetail } from '@ui5/webcomponents/dist/Button.js';
+import { TextAreaInputEventDetail } from '@ui5/webcomponents/dist/TextArea.js';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 
@@ -35,7 +36,7 @@ export function FeedbackButton() {
     setFeedbackPopoverOpen(!feedbackPopoverOpen);
   };
 
-  const onFeedbackMessageChange = (event: Ui5CustomEvent<TextAreaDomRef, { value: string; previousValue: string }>) => {
+  const onFeedbackMessageChange = (event: Ui5CustomEvent<TextAreaDomRef, TextAreaInputEventDetail>) => {
     const newValue = event.target.value;
     setFeedbackMessage(newValue);
   };
@@ -98,15 +99,7 @@ const FeedbackPopover = ({
   rating: number;
   onFeedbackSent: () => void;
   feedbackMessage: string;
-  onFeedbackMessageChange: (
-    event: Ui5CustomEvent<
-      TextAreaDomRef,
-      {
-        value: string;
-        previousValue: string;
-      }
-    >,
-  ) => void;
+  onFeedbackMessageChange: (event: Ui5CustomEvent<TextAreaDomRef, TextAreaInputEventDetail>) => void;
   feedbackSent: boolean;
 }) => {
   const { t } = useTranslation();

src/components/Members/ImportMembersDialog.tsx

@@ -25,6 +25,15 @@ import { useTranslation } from 'react-i18next';
 import IllustratedError from '../Shared/IllustratedError.tsx';
 import { TFunction } from 'i18next';
 
+interface CellData<T> {
+  cell: {
+    value: T | undefined;
+    row: {
+      original: Record<string, unknown>;
+    };
+  };
+}
+
 type FilteredFor = 'All' | 'Users' | 'ServiceAccounts';
 type SourceType = 'Workspace' | 'Project';
 type TableRow = {
@@ -91,8 +100,9 @@ export const ImportMembersDialog: FC<ImportMembersDialogProps> = ({
         Header: t('MemberTable.columnTypeHeader'),
         accessor: 'kind',
         width: 145,
-        Cell: (instance: { cell: { row: { original: TableRow } } }) => {
-          const kind = ACCOUNT_TYPES.find(({ value }) => value === instance.cell.row.original.kind);
+        Cell: (instance: CellData<string>) => {
+          const original = instance.cell.row.original as TableRow;
+          const kind = ACCOUNT_TYPES.find(({ value }) => value === original.kind);
           return (
             <FlexBox gap={'0.5rem'} wrap={'NoWrap'}>
               <Icon name={kind?.icon} accessibleName={kind?.label} showTooltip />

src/components/Members/MemberTable.tsx

@@ -25,7 +25,7 @@ type MemberTableProps = {
 type CellInstance = {
   cell: {
     row: {
-      original: MemberTableRow;
+      original: Record<string, unknown>;
     };
   };
 };
@@ -81,15 +81,15 @@ export const MemberTable: FC<MemberTableProps> = ({
             icon="edit"
             design="Transparent"
             onClick={() => {
-              const selectedMember = instance.cell.row.original._member;
+              const selectedMember = instance.cell.row.original._member as Member;
               onEditMember(selectedMember);
             }}
           />
           <Button
             design="Transparent"
             icon="delete"
             onClick={() => {
-              const selectedMemberEmail = instance.cell.row.original.email;
+              const selectedMemberEmail = instance.cell.row.original.email as string;
               onDeleteMember(selectedMemberEmail);
             }}
           />

src/components/Projects/ProjectsList.tsx

@@ -20,9 +20,9 @@ type ProjectListRow = {
 
 type ProjectListCellInstance<T> = {
   cell: {
-    value: string;
+    value: T | undefined;
     row: {
-      original: T;
+      original: Record<string, unknown>;
     };
   };
 };
@@ -47,7 +47,7 @@ export default function ProjectsList() {
       {
         Header: t('ProjectsListView.title'),
         accessor: 'projectName',
-        Cell: (instance: ProjectListCellInstance<ProjectListRow>) => (
+        Cell: (instance: ProjectListCellInstance<string>) => (
           <Link
             design={'Emphasized'}
             style={{
@@ -57,7 +57,7 @@ export default function ProjectsList() {
               paddingBottom: '0.5rem',
             }}
             onClick={() => {
-              navigate(`/mcp/projects/${instance.cell.row.original?.projectName}`);
+              navigate(`/mcp/projects/${instance.cell.row.original?.projectName as string}`);
             }}
           >
             {instance.cell.value}
@@ -68,7 +68,7 @@ export default function ProjectsList() {
         Header: 'Namespace',
         accessor: 'nameSpace',
         width: 340,
-        Cell: (instance: ProjectListCellInstance<ProjectListRow>) => (
+        Cell: (instance: ProjectListCellInstance<string>) => (
           <div
             style={{
               display: 'flex',
@@ -79,7 +79,7 @@ export default function ProjectsList() {
               cursor: 'pointer',
             }}
           >
-            <CopyButton text={instance.cell.value} />
+            <CopyButton text={instance.cell.value ?? ''} />
           </div>
         ),
       },
@@ -89,7 +89,7 @@ export default function ProjectsList() {
         width: 75,
         disableFilters: true,
         hAlign: 'Center' as const,
-        Cell: (instance: ProjectListCellInstance<ProjectListRow>) => (
+        Cell: (instance: ProjectListCellInstance<string>) => (
           <div
             style={{
               width: '100%',
@@ -101,7 +101,7 @@ export default function ProjectsList() {
             <YamlViewButton
               variant="loader"
               resourceType={'projects'}
-              resourceName={instance.cell.row.original?.projectName}
+              resourceName={instance.cell.row.original?.projectName as string}
             />
           </div>
         ),
@@ -112,7 +112,7 @@ export default function ProjectsList() {
         width: 60,
         disableFilters: true,
         hAlign: 'Center' as const,
-        Cell: (instance: ProjectListCellInstance<ProjectListRow>) => (
+        Cell: (instance: ProjectListCellInstance<string>) => (
           <div
             style={{
               width: '100%',
@@ -121,7 +121,7 @@ export default function ProjectsList() {
               alignItems: 'center',
             }}
           >
-            <ProjectsListItemMenu projectName={instance.cell.row.original?.projectName ?? ''} />
+            <ProjectsListItemMenu projectName={(instance.cell.row.original?.projectName as string) ?? ''} />
           </div>
         ),
       },

src/components/YamlEditor/YamlEditor.tsx

@@ -45,7 +45,9 @@ export const YamlEditor = (props: YamlEditorProps) => {
       if (isEdit) {
         setEditorContent(val ?? '');
       }
-      onChange?.(val ?? '', event);
+      if (event) {
+        onChange?.(val ?? '', event);
+      }
     },
     [isEdit, onChange],
   );

src/utils/hintsCardsRowCalculations.spec.ts

@@ -28,7 +28,8 @@ describe('calculations', () => {
     metadata: {
       name: 'test-resource',
       creationTimestamp: '2023-01-01T00:00:00Z',
-      labels: [],
+      resourceVersion: '1',
+      labels: {},
     },
     status: {
       conditions,