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: npm run type-check
+
       - name: Run Vitest Tests
         run: npm run test:vi
 

package.json

@@ -19,7 +19,8 @@
     "test:cy": "cypress run --component --browser chrome",
     "test:cy:open": "cypress open --component --browser chrome",
     "generate-graphql-types": "graphql-codegen --config graphql.config.yaml",
-    "generate-graphql-types:watch": "graphql-codegen --config graphql.config.yaml --watch"
+    "generate-graphql-types:watch": "graphql-codegen --config graphql.config.yaml --watch",
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
     "@apollo/client": "3.14.0",

src/components/ControlPlane/GitRepositories.tsx

@@ -23,10 +23,6 @@ export type GitRepoItem = GitReposResponse['items'][0] & {
   metadata: GitReposResponse['items'][0]['metadata'] & { namespace?: string };
 };
 
-interface CellRow<T> {
-  original: T;
-}
-
 export function GitRepositories() {
   const { data, error, isLoading } = useApiResource(FluxRequest); //404 if component not enabled
   const { t } = useTranslation();
@@ -83,7 +79,7 @@ export function GitRepositories() {
           width: 125,
           hAlign: 'Center',
           Filter: ({ column }) => <StatusFilter column={column} />,
-          Cell: ({ row }: { row: CellRow<FluxRow> }) =>
+          Cell: ({ row }) =>
             row.original?.isReady != null ? (
               <ResourceStatusCell
                 positiveText={t('common.ready')}
@@ -100,17 +96,15 @@ export function GitRepositories() {
           width: 75,
           accessor: 'yaml',
           disableFilters: true,
-          Cell: ({ row }: { row: CellRow<FluxRow> }) => (
-            <YamlViewButton variant="resource" resource={row.original.item as unknown as Resource} />
-          ),
+          Cell: ({ row }) => <YamlViewButton variant="resource" resource={row.original.item as unknown as Resource} />,
         },
         {
           Header: t('ManagedResources.actionColumnHeader'),
           hAlign: 'Center',
           width: 60,
           disableFilters: true,
           accessor: 'actions',
-          Cell: ({ row }: { row: CellRow<FluxRow> }) => {
+          Cell: ({ row }) => {
             const item = row.original?.item;
             if (!item) return undefined;
             const actions: ActionItem<GitRepoItem>[] = [

src/components/ControlPlane/Kustomizations.tsx

@@ -30,10 +30,6 @@ export function Kustomizations() {
   const errorDialogRef = useRef<ErrorDialogHandle>(null);
   const handlePatch = useHandleResourcePatch(errorDialogRef);
 
-  interface CellRow<T> {
-    original: T;
-  }
-
   type FluxRow = {
     name: string;
     created: string;
@@ -78,7 +74,7 @@ export function Kustomizations() {
           width: 125,
           hAlign: 'Center',
           Filter: ({ column }) => <StatusFilter column={column} />,
-          Cell: ({ row }: { row: CellRow<FluxRow> }) =>
+          Cell: ({ row }) =>
             row.original?.isReady != null ? (
               <ResourceStatusCell
                 positiveText={t('common.ready')}
@@ -95,17 +91,15 @@ export function Kustomizations() {
           width: 75,
           accessor: 'yaml',
           disableFilters: true,
-          Cell: ({ row }: { row: CellRow<FluxRow> }) => (
-            <YamlViewButton variant="resource" resource={row.original.item as unknown as Resource} />
-          ),
+          Cell: ({ row }) => <YamlViewButton variant="resource" resource={row.original.item as unknown as Resource} />,
         },
         {
           Header: t('ManagedResources.actionColumnHeader'),
           hAlign: 'Center',
           width: 60,
           disableFilters: true,
           accessor: 'actions',
-          Cell: ({ row }: { row: CellRow<FluxRow> }) => {
+          Cell: ({ row }) => {
             const item = row.original?.item;
             if (!item) return undefined;
             const actions: ActionItem<KustomizationItem>[] = [

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,
@@ -25,17 +25,6 @@ import { useLink } from '../../lib/shared/useLink.ts';
 import TooltipCell from '../Shared/TooltipCell.tsx';
 import type { Ui5CustomEvent } from '@ui5/webcomponents-react-base';
 
-interface CellData<T> {
-  cell: {
-    value: ReactNode;
-  };
-  row: {
-    original: T;
-    [key: string]: unknown;
-  };
-  [key: string]: unknown;
-}
-
 type MCPHealthPopoverButtonProps = {
   mcpStatus: ControlPlaneStatusType | undefined;
   projectName: string;
@@ -99,7 +88,7 @@ const MCPHealthPopoverButton = ({ mcpStatus, projectName, workspaceName, mcpName
       Header: t('MCPHealthPopoverButton.statusHeader'),
       accessor: 'status',
       width: 50,
-      Cell: (instance: CellData<ControlPlaneStatusCondition>) => {
+      Cell: (instance) => {
         const isReady = instance.cell.value === 'True';
         return (
           <Icon
@@ -113,31 +102,31 @@ const MCPHealthPopoverButton = ({ mcpStatus, projectName, workspaceName, mcpName
       Header: t('MCPHealthPopoverButton.typeHeader'),
       accessor: 'type',
       width: 150,
-      Cell: (instance: CellData<ControlPlaneStatusCondition>) => {
+      Cell: (instance) => {
         return <TooltipCell>{instance.cell.value}</TooltipCell>;
       },
     },
     {
       Header: t('MCPHealthPopoverButton.messageHeader'),
       accessor: 'message',
       width: 350,
-      Cell: (instance: CellData<ControlPlaneStatusCondition>) => {
+      Cell: (instance) => {
         return <TooltipCell>{instance.cell.value}</TooltipCell>;
       },
     },
     {
       Header: t('MCPHealthPopoverButton.reasonHeader'),
       accessor: 'reason',
       width: 100,
-      Cell: (instance: CellData<ControlPlaneStatusCondition>) => {
+      Cell: (instance) => {
         return <TooltipCell>{instance.cell.value}</TooltipCell>;
       },
     },
     {
       Header: t('MCPHealthPopoverButton.transitionHeader'),
       accessor: 'lastTransitionTime',
       width: 125,
-      Cell: (instance: CellData<ControlPlaneStatusCondition>) => {
+      Cell: (instance) => {
         const rawDate = instance.cell.value;
         const date = new Date(rawDate as string);
         return (

src/components/ControlPlane/ManagedResources.tsx

@@ -40,9 +40,6 @@ interface StatusFilterColumn {
   filterValue?: string;
   setFilter?: (value?: string) => void;
 }
-interface CellRow<T> {
-  original: T;
-}
 
 type ResourceRow = {
   kind: string;
@@ -130,7 +127,7 @@ export function ManagedResources() {
           hAlign: 'Center',
           width: 125,
           Filter: ({ column }: { column: StatusFilterColumn }) => <StatusFilter column={column} />,
-          Cell: ({ row }: { row: CellRow<ResourceRow> }) => {
+          Cell: ({ row }) => {
             const { original } = row;
             return original?.synced != null ? (
               <ResourceStatusCell
@@ -149,7 +146,7 @@ export function ManagedResources() {
           hAlign: 'Center',
           width: 125,
           Filter: ({ column }: { column: StatusFilterColumn }) => <StatusFilter column={column} />,
-          Cell: ({ row }: { row: CellRow<ResourceRow> }) => {
+          Cell: ({ row }) => {
             const { original } = row;
             return original?.ready != null ? (
               <ResourceStatusCell
@@ -168,7 +165,7 @@ export function ManagedResources() {
           width: 75,
           accessor: 'yaml',
           disableFilters: true,
-          Cell: ({ row }: { row: CellRow<ResourceRow> }) => {
+          Cell: ({ row }) => {
             const { original } = row;
             return original?.item ? (
               <YamlViewButton variant="resource" resource={original.item as unknown as Resource} />
@@ -180,7 +177,7 @@ export function ManagedResources() {
           hAlign: 'Center',
           width: 60,
           disableFilters: true,
-          Cell: ({ row }: { row: CellRow<ResourceRow> }) => {
+          Cell: ({ row }) => {
             const { original } = row;
             const item = original?.item;
             if (!item) return undefined;

src/components/ControlPlane/Providers.tsx

@@ -24,15 +24,6 @@ import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
 import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
-interface CellData<T> {
-  cell: {
-    value: T | null;
-    row: {
-      original?: ProvidersRow;
-    };
-  };
-}
-
 type ProvidersRow = {
   name: string;
   version: string;
@@ -78,14 +69,14 @@ export function Providers() {
         width: 125,
         Filter: ({ column }) => <StatusFilter column={column} />,
         filter: 'equals',
-        Cell: (cellData: CellData<ProvidersRow['installed']>) =>
+        Cell: (cellData) =>
           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 +87,14 @@ export function Providers() {
         width: 125,
         Filter: ({ column }) => <StatusFilter column={column} />,
         filter: 'equals',
-        Cell: (cellData: CellData<ProvidersRow['healthy']>) =>
+        Cell: (cellData) =>
           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 +104,7 @@ export function Providers() {
         width: 75,
         accessor: 'yaml',
         disableFilters: true,
-        Cell: (cellData: CellData<ProvidersRow>) => (
+        Cell: (cellData) => (
           <YamlViewButton variant="resource" resource={cellData.cell.row.original?.item as Resource} />
         ),
       },

src/components/ControlPlane/ProvidersConfig.tsx

@@ -32,10 +32,6 @@ type Rows = {
   resource: ProviderConfigItem;
 };
 
-interface CellRow<T> {
-  original: T;
-}
-
 export function ProvidersConfig() {
   const { t } = useTranslation();
   const { openInAside } = useSplitter();
@@ -104,7 +100,7 @@ export function ProvidersConfig() {
           width: 75,
           accessor: 'yaml',
           disableFilters: true,
-          Cell: ({ row }: { row: CellRow<Rows> }) => {
+          Cell: ({ row }) => {
             const item = row.original?.resource;
             return item ? <YamlViewButton variant="resource" resource={item as unknown as Resource} /> : undefined;
           },
@@ -115,7 +111,7 @@ export function ProvidersConfig() {
           width: 60,
           disableFilters: true,
           accessor: 'actions',
-          Cell: ({ row }: { row: CellRow<Rows> }) => {
+          Cell: ({ row }) => {
             const item = row.original?.resource;
             if (!item) return undefined;
             const actions: ActionItem<ProviderConfigItem>[] = [

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

@@ -91,8 +91,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) => {
+          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 />