Merge branch 'test/storage_classes_e2e' of github.com:FedeAlonso/odh-…

…dashboard into test/storage_classes_e2e

.github/workflows/test.yml

@@ -9,7 +9,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/[email protected].3
+        uses: actions/[email protected].4
         with:
           node-version: ${{ matrix.node-version }}
       - name: Node.js modules cache, repository

.github/workflows/vuln_scan.yml

@@ -17,7 +17,7 @@ jobs:
           trivy-config: .github/trivy.yaml
 
       - name: Upload Trivy scan results to GitHub Security tab
-        uses: github/codeql-action/upload-sarif@v2
+        uses: github/codeql-action/upload-sarif@v3
         with:
           sarif_file: 'scan_result.sarif'
 

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

@@ -144,7 +144,7 @@ const useRunFormData = (
   const { project } = usePipelinesAPI();
   const { pipeline, version, experiment, nameDesc } = initialFormData || {};
 
-  const formState = useGenericObjectState<RunFormData>({
+  const formState = useGenericObjectState<RunFormData>(() => ({
     project,
     nameDesc: nameDesc ?? { name: '', description: '' },
     pipeline: pipeline ?? null,
@@ -161,7 +161,7 @@ const useRunFormData = (
         {},
       ),
     ...initialFormData,
-  });
+  }));
   const [, setFormValue] = formState;
 
   useUpdateExperimentFormData(formState, experiment);

frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx

@@ -16,8 +16,7 @@ import { Link } from 'react-router-dom';
 import FormSection from '~/components/pf-overrides/FormSection';
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import { modelRegistryUrl, registeredModelUrl } from '~/pages/modelRegistry/screens/routeUtils';
-import { ValueOf } from '~/typeHelpers';
-import { useRegisterModelData, RegistrationCommonFormData } from './useRegisterModelData';
+import { useRegisterModelData } from './useRegisterModelData';
 import { isRegisterModelSubmitDisabled, registerModel } from './utils';
 import RegistrationCommonFormSections from './RegistrationCommonFormSections';
 import { useRegistrationCommonState } from './useRegistrationCommonState';
@@ -90,10 +89,7 @@ const RegisterModel: React.FC = () => {
               </FormSection>
               <RegistrationCommonFormSections
                 formData={formData}
-                setData={(
-                  propKey: keyof RegistrationCommonFormData,
-                  propValue: ValueOf<RegistrationCommonFormData>,
-                ) => setData(propKey, propValue)}
+                setData={setData}
                 isFirstVersion
               />
             </StackItem>

frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterVersion.tsx

@@ -16,8 +16,7 @@ import ApplicationsPage from '~/pages/ApplicationsPage';
 import { modelRegistryUrl, registeredModelUrl } from '~/pages/modelRegistry/screens/routeUtils';
 import useRegisteredModels from '~/concepts/modelRegistry/apiHooks/useRegisteredModels';
 import { filterLiveModels } from '~/concepts/modelRegistry/utils';
-import { ValueOf } from '~/typeHelpers';
-import { RegistrationCommonFormData, useRegisterVersionData } from './useRegisterModelData';
+import { useRegisterVersionData } from './useRegisterModelData';
 import { isRegisterVersionSubmitDisabled, registerVersion } from './utils';
 import RegistrationCommonFormSections from './RegistrationCommonFormSections';
 import { useRegistrationCommonState } from './useRegistrationCommonState';
@@ -119,10 +118,7 @@ const RegisterVersion: React.FC = () => {
             <StackItem>
               <RegistrationCommonFormSections
                 formData={formData}
-                setData={(
-                  propKey: keyof RegistrationCommonFormData,
-                  propValue: ValueOf<RegistrationCommonFormData>,
-                ) => setData(propKey, propValue)}
+                setData={setData}
                 isFirstVersion={false}
                 latestVersion={latestVersion}
               />

frontend/src/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx

@@ -22,22 +22,28 @@ import { ModelVersion } from '~/concepts/modelRegistry/types';
 import { ModelLocationType, RegistrationCommonFormData } from './useRegisterModelData';
 import { ConnectionModal } from './ConnectionModal';
 
-type RegistrationCommonFormSectionsProps = {
-  formData: RegistrationCommonFormData;
-  setData: UpdateObjectAtPropAndValue<RegistrationCommonFormData>;
+type RegistrationCommonFormSectionsProps<D extends RegistrationCommonFormData> = {
+  formData: D;
+  setData: UpdateObjectAtPropAndValue<D>;
   isFirstVersion: boolean;
   latestVersion?: ModelVersion;
 };
 
-const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsProps> = ({
+const RegistrationCommonFormSections = <D extends RegistrationCommonFormData>({
   formData,
   setData,
   isFirstVersion,
   latestVersion,
-}) => {
+}: RegistrationCommonFormSectionsProps<D>): React.ReactNode => {
   const [isAutofillModalOpen, setAutofillModalOpen] = React.useState(false);
 
-  const connectionDataMap: Record<string, keyof RegistrationCommonFormData> = {
+  const connectionDataMap: Record<
+    string,
+    keyof Pick<
+      RegistrationCommonFormData,
+      'modelLocationEndpoint' | 'modelLocationBucket' | 'modelLocationRegion'
+    >
+  > = {
     AWS_S3_ENDPOINT: 'modelLocationEndpoint',
     AWS_S3_BUCKET: 'modelLocationBucket',
     AWS_DEFAULT_REGION: 'modelLocationRegion',

frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceServingRuntimeSection.tsx

@@ -66,7 +66,9 @@ const InferenceServiceServingRuntimeSection: React.FC<
         }
         onChange={(option) => {
           setData('servingRuntimeName', option);
-          setData('format', '');
+          setData('format', {
+            name: '',
+          });
         }}
       />
     </FormGroup>

frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/AuthServingRuntimeSection.tsx

@@ -11,28 +11,23 @@ import {
 } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
-import {
-  CreatingInferenceServiceObject,
-  CreatingServingRuntimeObject,
-} from '~/pages/modelServing/screens/types';
+import { CreatingModelServingObjectCommon } from '~/pages/modelServing/screens/types';
 
 import ServingRuntimeTokenSection from './ServingRuntimeTokenSection';
 
-type AuthServingRuntimeSectionProps = {
-  data: CreatingServingRuntimeObject | CreatingInferenceServiceObject;
-  setData:
-    | UpdateObjectAtPropAndValue<CreatingServingRuntimeObject>
-    | UpdateObjectAtPropAndValue<CreatingInferenceServiceObject>;
+type AuthServingRuntimeSectionProps<D extends CreatingModelServingObjectCommon> = {
+  data: D;
+  setData: UpdateObjectAtPropAndValue<D>;
   allowCreate: boolean;
   publicRoute?: boolean;
 };
 
-const AuthServingRuntimeSection: React.FC<AuthServingRuntimeSectionProps> = ({
+const AuthServingRuntimeSection = <D extends CreatingModelServingObjectCommon>({
   data,
   setData,
   allowCreate,
   publicRoute,
-}) => {
+}: AuthServingRuntimeSectionProps<D>): React.ReactNode => {
   const createNewToken = React.useCallback(() => {
     const name = 'default-name';
     const duplicated = data.tokens.filter((token) => token.name === name);

frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeSizeExpandedField.tsx

@@ -2,27 +2,22 @@ import * as React from 'react';
 import { FormGroup, Grid } from '@patternfly/react-core';
 import IndentSection from '~/pages/projects/components/IndentSection';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
-import {
-  CreatingInferenceServiceObject,
-  CreatingServingRuntimeObject,
-} from '~/pages/modelServing/screens/types';
+import { CreatingModelServingObjectCommon } from '~/pages/modelServing/screens/types';
 import { ContainerResourceAttributes, ContainerResources } from '~/types';
 import CPUField from '~/components/CPUField';
 import MemoryField from '~/components/MemoryField';
 
-type ServingRuntimeSizeExpandedFieldProps = {
-  data: CreatingServingRuntimeObject | CreatingInferenceServiceObject;
-  setData:
-    | UpdateObjectAtPropAndValue<CreatingServingRuntimeObject>
-    | UpdateObjectAtPropAndValue<CreatingInferenceServiceObject>;
+type ServingRuntimeSizeExpandedFieldProps<D extends CreatingModelServingObjectCommon> = {
+  data: D;
+  setData: UpdateObjectAtPropAndValue<D>;
 };
 
 type ResourceKeys = keyof ContainerResources;
 
-const ServingRuntimeSizeExpandedField: React.FC<ServingRuntimeSizeExpandedFieldProps> = ({
+const ServingRuntimeSizeExpandedField = <D extends CreatingModelServingObjectCommon>({
   data,
   setData,
-}) => {
+}: ServingRuntimeSizeExpandedFieldProps<D>): React.ReactNode => {
   const handleChange = (
     type: ContainerResourceAttributes.CPU | ContainerResourceAttributes.MEMORY,
     variant: ResourceKeys,

frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeSizeSection.tsx

@@ -3,8 +3,7 @@ import { FormGroup, Stack, StackItem, Popover, Icon } from '@patternfly/react-co
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
 import {
-  CreatingInferenceServiceObject,
-  CreatingServingRuntimeObject,
+  CreatingModelServingObjectCommon,
   ModelServingSize,
 } from '~/pages/modelServing/screens/types';
 import { ServingRuntimeKind } from '~/k8sTypes';
@@ -17,11 +16,9 @@ import { AcceleratorProfileState } from '~/utilities/useAcceleratorProfileState'
 import SimpleSelect from '~/components/SimpleSelect';
 import ServingRuntimeSizeExpandedField from './ServingRuntimeSizeExpandedField';
 
-type ServingRuntimeSizeSectionProps = {
-  data: CreatingServingRuntimeObject | CreatingInferenceServiceObject;
-  setData:
-    | UpdateObjectAtPropAndValue<CreatingServingRuntimeObject>
-    | UpdateObjectAtPropAndValue<CreatingInferenceServiceObject>;
+type ServingRuntimeSizeSectionProps<D extends CreatingModelServingObjectCommon> = {
+  data: D;
+  setData: UpdateObjectAtPropAndValue<D>;
   sizes: ModelServingSize[];
   servingRuntimeSelected?: ServingRuntimeKind;
   acceleratorProfileState: AcceleratorProfileState;
@@ -30,7 +27,7 @@ type ServingRuntimeSizeSectionProps = {
   infoContent?: string;
 };
 
-const ServingRuntimeSizeSection: React.FC<ServingRuntimeSizeSectionProps> = ({
+const ServingRuntimeSizeSection = <D extends CreatingModelServingObjectCommon>({
   data,
   setData,
   sizes,
@@ -39,7 +36,7 @@ const ServingRuntimeSizeSection: React.FC<ServingRuntimeSizeSectionProps> = ({
   selectedAcceleratorProfile,
   setSelectedAcceleratorProfile,
   infoContent,
-}) => {
+}: ServingRuntimeSizeSectionProps<D>): React.ReactNode => {
   const [supportedAcceleratorProfiles, setSupportedAcceleratorProfiles] = React.useState<
     string[] | undefined
   >();

frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTokenInput.tsx

@@ -13,27 +13,24 @@ import {
 import { ExclamationCircleIcon, MinusCircleIcon } from '@patternfly/react-icons';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
 import {
-  CreatingInferenceServiceObject,
-  CreatingServingRuntimeObject,
+  CreatingModelServingObjectCommon,
   ServingRuntimeToken,
 } from '~/pages/modelServing/screens/types';
 import { translateDisplayNameForK8s } from '~/concepts/k8s/utils';
 
-type ServingRuntimeTokenInputProps = {
-  data: CreatingServingRuntimeObject | CreatingInferenceServiceObject;
-  setData:
-    | UpdateObjectAtPropAndValue<CreatingServingRuntimeObject>
-    | UpdateObjectAtPropAndValue<CreatingInferenceServiceObject>;
+type ServingRuntimeTokenInputProps<D extends CreatingModelServingObjectCommon> = {
+  data: D;
+  setData: UpdateObjectAtPropAndValue<D>;
   token: ServingRuntimeToken;
   disabled?: boolean;
 };
 
-const ServingRuntimeTokenInput: React.FC<ServingRuntimeTokenInputProps> = ({
+const ServingRuntimeTokenInput = <D extends CreatingModelServingObjectCommon>({
   data,
   setData,
   token,
   disabled,
-}) => {
+}: ServingRuntimeTokenInputProps<D>): React.ReactNode => {
   const checkDuplicates = (name: string): boolean => {
     const duplicates = data.tokens.filter(
       (currentToken) =>

frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTokenSection.tsx

@@ -3,27 +3,22 @@ import { Alert, Button, Checkbox, FormGroup, Stack, StackItem } from '@patternfl
 import { PlusCircleIcon } from '@patternfly/react-icons';
 import IndentSection from '~/pages/projects/components/IndentSection';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
-import {
-  CreatingInferenceServiceObject,
-  CreatingServingRuntimeObject,
-} from '~/pages/modelServing/screens/types';
+import { CreatingModelServingObjectCommon } from '~/pages/modelServing/screens/types';
 import ServingRuntimeTokenInput from './ServingRuntimeTokenInput';
 
-type ServingRuntimeTokenSectionProps = {
-  data: CreatingServingRuntimeObject | CreatingInferenceServiceObject;
-  setData:
-    | UpdateObjectAtPropAndValue<CreatingServingRuntimeObject>
-    | UpdateObjectAtPropAndValue<CreatingInferenceServiceObject>;
+type ServingRuntimeTokenSectionProps<D extends CreatingModelServingObjectCommon> = {
+  data: D;
+  setData: UpdateObjectAtPropAndValue<D>;
   allowCreate: boolean;
   createNewToken: () => void;
 };
 
-const ServingRuntimeTokenSection: React.FC<ServingRuntimeTokenSectionProps> = ({
+const ServingRuntimeTokenSection = <D extends CreatingModelServingObjectCommon>({
   data,
   setData,
   allowCreate,
   createNewToken,
-}) => (
+}: ServingRuntimeTokenSectionProps<D>): React.ReactNode => (
   <FormGroup
     label="Token authentication"
     data-testid="auth-section"

frontend/src/pages/modelServing/screens/types.ts

@@ -40,14 +40,9 @@ export type SupportedModelFormatsInfo = {
   priority?: number;
 };
 
-export type CreatingServingRuntimeObject = {
-  name: string;
+export type CreatingServingRuntimeObject = CreatingModelServingObjectCommon & {
   servingRuntimeTemplateName: string;
   numReplicas: number;
-  modelSize: ModelServingSize;
-  externalRoute: boolean;
-  tokenAuth: boolean;
-  tokens: ServingRuntimeToken[];
   imageName?: string;
   supportedModelFormatsInfo?: SupportedModelFormatsInfo;
 };
@@ -64,19 +59,22 @@ export type ModelServingSize = {
   resources: ContainerResources;
 };
 
-export type CreatingInferenceServiceObject = {
-  name: string;
+export type CreatingInferenceServiceObject = CreatingModelServingObjectCommon & {
   project: string;
   servingRuntimeName: string;
   storage: InferenceServiceStorage;
-  modelSize: ModelServingSize;
   format: InferenceServiceFormat;
   maxReplicas: number;
   minReplicas: number;
+  labels?: Record<string, string>;
+};
+
+export type CreatingModelServingObjectCommon = {
+  name: string;
+  modelSize: ModelServingSize;
   externalRoute: boolean;
   tokenAuth: boolean;
   tokens: ServingRuntimeToken[];
-  labels?: Record<string, string>;
 };
 
 export enum InferenceServiceStorageType {

frontend/src/pages/projects/screens/detail/storage/ManageStorageModal.tsx

@@ -174,7 +174,7 @@ const ManageStorageModal: React.FC<AddStorageModalProps> = ({ existingData, isOp
           <StackItem>
             <CreateNewStorageSection
               data={createData}
-              setData={(key, value) => setCreateData(key, value)}
+              setData={setCreateData}
               currentSize={existingData?.status?.capacity?.storage}
               autoFocusName
               disableStorageClassSelect={!!existingData}

frontend/src/pages/projects/screens/spawner/storage/CreateNewStorageSection.tsx

@@ -6,23 +6,23 @@ import NameDescriptionField from '~/concepts/k8s/NameDescriptionField';
 import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 import StorageClassSelect from './StorageClassSelect';
 
-type CreateNewStorageSectionProps = {
-  data: CreatingStorageObject;
-  setData: UpdateObjectAtPropAndValue<CreatingStorageObject>;
+type CreateNewStorageSectionProps<D extends CreatingStorageObject> = {
+  data: D;
+  setData: UpdateObjectAtPropAndValue<D>;
   currentSize?: string;
   autoFocusName?: boolean;
   menuAppendTo?: HTMLElement;
   disableStorageClassSelect?: boolean;
 };
 
-const CreateNewStorageSection: React.FC<CreateNewStorageSectionProps> = ({
+const CreateNewStorageSection = <D extends CreatingStorageObject>({
   data,
   setData,
   currentSize,
   menuAppendTo,
   autoFocusName,
   disableStorageClassSelect,
-}) => {
+}: CreateNewStorageSectionProps<D>): React.ReactNode => {
   const isStorageClassesAvailable = useIsAreaAvailable(SupportedArea.STORAGE_CLASSES).status;
 
   return (