Merge branch 'f/byon' into incubation

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -30,7 +30,10 @@ body:
     id: version
     attributes:
       label: Version
-      description: What was the version this was found on?
+      description: |
+        What was the version this was found on?
+        
+        eg. a branch name, a commit id, or a version number
     validations:
       required: true
   - type: textarea

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.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/src/__tests__/integration/pages/clusterSettings/ClusterSettings.stories.tsx

@@ -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/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 { 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/ServingRuntimeList.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/projects/ProjectDetails.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/ProjectView.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/api/k8s/projects.ts

@@ -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/secrets.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()}`;

frontend/src/app/useApplicationSettings.tsx

@@ -16,7 +16,7 @@ export const useApplicationSettings = (): {
   const setRefreshMarker = useTimeBasedRefresh();
 
   React.useEffect(() => {
-    let watchHandle;
+    let watchHandle: ReturnType<typeof setTimeout>;
     let cancelled = false;
     const watchDashboardConfig = () => {
       fetchDashboardConfig()

frontend/src/components/OdhAppCard.tsx

@@ -44,15 +44,15 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
   const { dashboardConfig } = useAppContext();
   const dispatch = useAppDispatch();
 
-  const onToggle = (value) => {
+  const onToggle = (value: boolean) => {
     setIsOpen(value);
   };
 
   const onOpenKebab = () => {
     setIsOpen(!isOpen);
   };
 
-  const onQuickStart = (e) => {
+  const onQuickStart = (e: React.SyntheticEvent | Event) => {
     e.preventDefault();
     launchQuickStart(odhApp.spec.quickStart, qsContext);
   };
@@ -130,7 +130,7 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
     'm-disabled': disabled,
   });
 
-  const popoverBodyContent = (hide) => (
+  const popoverBodyContent = (hide: () => void) => (
     <div>
       Subscription is no longer valid. To validate click&nbsp;
       <Button

frontend/src/components/OdhDocCard.tsx

@@ -71,7 +71,7 @@ const OdhDocCard: React.FC<OdhDocCardProps> = ({ odhDoc, favorite, updateFavorit
     });
   }, [odhDoc.metadata.name, odhDoc.spec.type, qsContext]);
 
-  const onQuickStart = (e) => {
+  const onQuickStart = (e: React.SyntheticEvent) => {
     e.preventDefault();
     launchQuickStart(odhDoc.metadata.name, qsContext);
     fireResourceAccessedEvent(odhDoc.metadata.name, odhDoc.spec.type, qsContext)();

frontend/src/components/OdhDocListItem.tsx

@@ -20,7 +20,7 @@ type OdhDocCardProps = {
 const OdhDocListItem: React.FC<OdhDocCardProps> = ({ odhDoc, favorite, updateFavorite }) => {
   const [qsContext] = useQuickStartCardSelected(odhDoc.metadata.name, odhDoc.metadata.name);
 
-  const onQuickStart = (e) => {
+  const onQuickStart = (e: React.SyntheticEvent) => {
     e.preventDefault();
     launchQuickStart(odhDoc.metadata.name, qsContext);
   };

frontend/src/components/error/ErrorBoundary.tsx

@@ -14,14 +14,14 @@ type ErrorBoundaryState =
     };
 
 class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  constructor(props) {
+  constructor(props: ErrorBoundaryProps) {
     super(props);
     this.state = {
       hasError: false,
     };
   }
 
-  componentDidCatch(error, errorInfo) {
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     this.setState({
       hasError: true,
       error,

frontend/src/components/table/useTableColumnSort.ts

@@ -58,8 +58,8 @@ const useTableColumnSort = <T>(
             return 0;
           }
 
-          const dataValueA = a[columnField.field];
-          const dataValueB = b[columnField.field];
+          const dataValueA = a[columnField.field as keyof T];
+          const dataValueB = b[columnField.field as keyof T];
           if (typeof dataValueA === 'string' && typeof dataValueB === 'string') {
             return dataValueA.localeCompare(dataValueB);
           }

frontend/src/concepts/dashboard/DashboardSearchField.tsx

@@ -17,7 +17,7 @@ export enum SearchType {
 }
 
 type DashboardSearchFieldProps = {
-  types: string[];
+  types: SearchType[];
   searchType: SearchType;
   onSearchTypeChange: (searchType: SearchType) => void;
   searchValue: string;
@@ -42,14 +42,14 @@ const DashboardSearchField: React.FC<DashboardSearchFieldProps> = ({
         selections={searchType}
         onSelect={(e, key) => {
           if (typeof key === 'string') {
-            onSearchTypeChange(SearchType[key]);
+            onSearchTypeChange(key as SearchType);
             setTypeOpen(false);
           }
         }}
       >
         {types.map((key) => (
           <SelectOption key={key} value={key}>
-            {SearchType[key]}
+            {key}
           </SelectOption>
         ))}
       </Select>

frontend/src/concepts/pipelines/content/configurePipelinesServer/utils.ts

@@ -99,7 +99,7 @@ const createObjectStorageSecret = (
   });
 };
 
-const createSecrets = (config: PipelineServerConfigType, projectName) =>
+const createSecrets = (config: PipelineServerConfigType, projectName: string) =>
   new Promise<SecretsResponse>((resolve, reject) => {
     Promise.all([
       createDatabaseSecret(config.database, projectName, true),

frontend/src/concepts/pipelines/content/createRun/contentSections/RunTypeSectionScheduled.tsx

@@ -41,9 +41,9 @@ const RunTypeSectionScheduled: React.FC<RunTypeSectionScheduledProps> = ({ data,
                 <b>Run every</b>
               </Text>
               <SimpleDropdownSelect
-                options={Object.keys(PeriodicOptions).map((key) => ({
-                  key: PeriodicOptions[key],
-                  label: PeriodicOptions[key],
+                options={Object.values(PeriodicOptions).map((v) => ({
+                  key: v,
+                  label: v,
                 }))}
                 value={data.value}
                 onChange={(value) => onChange({ ...data, value })}

frontend/src/concepts/pipelines/content/createRun/submitUtils.ts

@@ -93,7 +93,10 @@ const createJob = async (
       periodic_schedule:
         formData.runType.data.triggerType === ScheduledType.PERIODIC
           ? {
-              interval_second: periodicOptionAsSeconds[formData.runType.data.value].toString(),
+              interval_second:
+                periodicOptionAsSeconds[
+                  formData.runType.data.value as keyof typeof periodicOptionAsSeconds
+                ].toString(),
               start_time: startDate,
               end_time: endDate,
             }