set tsconfig noImplicitAny = true and fixup all errors

Author: christianvogt

frontend/jest.config.js

@@ -23,11 +23,8 @@ module.exports = {
   testEnvironment: 'jest-environment-jsdom',
 
   // include projects from node_modules as required
-  transformIgnorePatterns: [
-    'node_modules/(?!yaml)',
-  ],
+  transformIgnorePatterns: ['node_modules/(?!yaml)'],
 
   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
   snapshotSerializers: [],
-
 };

frontend/package-lock.json

@@ -77,6 +77,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
+    "@types/dompurify": "^2.2.6",
+    "@types/lodash-es": "^4.17.8",
     "@types/node": "^17.0.29",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",

frontend/package.json

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { rest } from 'msw';
 import { within } from '@storybook/testing-library';
 import { mockClusterSettings } from '~/__mocks__/mockClusterSettings';
@@ -20,7 +20,7 @@ export default {
 
 const Template: StoryFn<typeof ClusterSettings> = (args) => <ClusterSettings {...args} />;
 
-export const Default = {
+export const Default: StoryObj = {
   render: Template,
 
   play: async ({ canvasElement }) => {

frontend/src/__tests__/integration/pages/clusterSettings/ClusterSettings.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta, StoryObj } from '@storybook/react';
 import { rest } from 'msw';
 import { within, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
@@ -51,7 +51,7 @@ const Template: StoryFn<typeof ModelServingGlobal> = (args) => (
   </Routes>
 );
 
-export const EditModel = {
+export const EditModel: StoryObj = {
   render: Template,
 
   parameters: {
@@ -72,7 +72,7 @@ export const EditModel = {
   },
 };
 
-export const DeleteModel = {
+export const DeleteModel: StoryObj = {
   render: Template,
 
   parameters: {
@@ -92,7 +92,7 @@ export const DeleteModel = {
   },
 };
 
-export const DeployModel = {
+export const DeployModel: StoryObj = {
   render: Template,
 
   parameters: {

frontend/src/__tests__/integration/pages/modelServing/ModelServingGlobal.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta, StoryObj } from '@storybook/react';
 import { rest } from 'msw';
 import { userEvent, within } from '@storybook/testing-library';
 import { Route } from 'react-router-dom';
@@ -130,7 +130,7 @@ const Template: StoryFn<typeof ServingRuntimeList> = (args) => {
   );
 };
 
-export const ListAvailableModels = {
+export const ListAvailableModels: StoryObj = {
   render: Template,
 
   play: async ({ canvasElement }) => {
@@ -141,7 +141,7 @@ export const ListAvailableModels = {
   },
 };
 
-export const DeployModel = {
+export const DeployModel: StoryObj = {
   render: Template,
 
   play: async ({ canvasElement }) => {

frontend/src/__tests__/integration/pages/modelServing/ServingRuntimeList.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta, StoryObj } from '@storybook/react';
 import { DefaultBodyType, MockedRequest, rest, RestHandler } from 'msw';
 import { within } from '@storybook/testing-library';
 import { Route } from 'react-router-dom';
@@ -151,7 +151,7 @@ const Template: StoryFn<typeof ProjectDetails> = (args) => {
   );
 };
 
-export const Default = {
+export const Default: StoryObj = {
   render: Template,
   play: async ({ canvasElement }) => {
     // load page and wait until settled
@@ -160,7 +160,7 @@ export const Default = {
   },
 };
 
-export const EmptyDetailsPage = {
+export const EmptyDetailsPage: StoryObj = {
   render: Template,
 
   parameters: {

frontend/src/__tests__/integration/pages/projects/ProjectDetails.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { rest } from 'msw';
 import { within, userEvent } from '@storybook/testing-library';
 import { mockProjectK8sResource } from '~/__mocks__/mockProjectK8sResource';
@@ -45,7 +45,7 @@ export default {
   },
 } as Meta<typeof ProjectView>;
 
-export const EditProject = {
+export const EditProject: StoryObj = {
   parameters: {
     a11y: {
       // need to select modal as root
@@ -64,7 +64,7 @@ export const EditProject = {
   },
 };
 
-export const DeleteProject = {
+export const DeleteProject: StoryObj = {
   parameters: {
     a11y: {
       element: '.pf-c-backdrop',
@@ -82,7 +82,7 @@ export const DeleteProject = {
   },
 };
 
-export const CreateProject = {
+export const CreateProject: StoryObj = {
   parameters: {
     a11y: {
       element: '.pf-c-backdrop',

frontend/src/__tests__/integration/pages/projects/ProjectView.stories.tsx

@@ -95,16 +95,17 @@ export const createProject = (
 export const getModelServingProjects = (): Promise<ProjectKind[]> =>
   getProjects(`${LABEL_SELECTOR_DASHBOARD_RESOURCE},${LABEL_SELECTOR_MODEL_SERVING_PROJECT}`);
 
-async function filter(arr, callback) {
+const filter = async (arr: ProjectKind[], callback: (project: ProjectKind) => Promise<boolean>) => {
   const fail = Symbol();
+  const isProject = (i: ProjectKind | typeof fail): i is ProjectKind => i !== fail;
   return (
     await Promise.all(arr.map(async (item) => ((await callback(item)) ? item : fail)))
-  ).filter((i) => i !== fail);
-}
+  ).filter(isProject);
+};
 
 export const getModelServingProjectsAvailable = async (): Promise<ProjectKind[]> =>
   getModelServingProjects().then((projects) =>
-    filter(projects, async (project) => {
+    filter(projects, async (project: ProjectKind) => {
       const projectServing = await listServingRuntimes(project.metadata.name);
       return projectServing.length !== 0;
     }),

frontend/src/api/k8s/projects.ts

@@ -19,10 +19,10 @@ export const assembleSecret = (
   type: 'aws' | 'generic' = 'generic',
   secretName?: string,
 ): SecretKind => {
-  const labels = {
+  const labels: Record<string, string> = {
     [KnownLabels.DASHBOARD_RESOURCE]: 'true',
   };
-  const annotations = {};
+  const annotations: Record<string, string> = {};
 
   let stringData = data;
   let name = `secret-${genRandomChars()}`;