fixing input and dropdown issues

Author: katieperry4

frontend/src/pages/modelServing/screens/global/ServeModelButton.tsx

@@ -105,8 +105,8 @@ const ServeModelButton: React.FC = () => {
             projectContext={{
               currentProject: project,
               connections,
-              pvcs: pvcs.data,
             }}
+            pvcs={pvcs.data}
             servingRuntimeTemplates={templatesEnabled.filter((template) =>
               getTemplateEnabledForPlatform(template, ServingRuntimePlatform.SINGLE),
             )}

frontend/src/pages/modelServing/screens/projects/DeployPrefilledModelModal.tsx

@@ -180,8 +180,8 @@ const DeployPrefilledModelModalContents: React.FC<
         projectContext={{
           currentProject: selectedProject,
           connections,
-          pvcs: pvcs.data,
         }}
+        pvcs={pvcs.data}
         projectSection={projectSection}
         existingUriOption={
           modelDeployPrefillInfo.modelArtifactUri &&

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

@@ -245,7 +245,7 @@ type Props = {
   loaded?: boolean;
   loadError?: Error | undefined;
   connections?: LabeledConnection[];
-  pvcs?: PersistentVolumeClaimKind[] | [];
+  pvcs?: PersistentVolumeClaimKind[];
   connectionTypeFilter?: (ct: ConnectionTypeConfigMapObj) => boolean;
 };
 
@@ -271,7 +271,6 @@ export const ConnectionSection: React.FC<Props> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [modelServingConnectionTypes],
   );
-
   const hasImagePullSecret = React.useMemo(() => !!data.imagePullSecrets, [data.imagePullSecrets]);
   const pvcServingEnabled = useIsAreaAvailable(SupportedArea.PVCSERVING).status;
   const selectedConnection = React.useMemo(
@@ -323,8 +322,7 @@ export const ConnectionSection: React.FC<Props> = ({
             });
           }}
           body={
-            data.storage.type === InferenceServiceStorageType.PVC_STORAGE &&
-            pvcs && (
+            data.storage.type === InferenceServiceStorageType.PVC_STORAGE && (
               <PvcSelect
                 pvcs={pvcs}
                 setModelUri={(uri) => setData('storage', { ...data.storage, uri })}

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

@@ -7,6 +7,7 @@ import {
   InputGroup,
 } from '@patternfly/react-core';
 import { PersistentVolumeClaimKind } from '#~/k8sTypes';
+import { trimInputOnBlur, trimInputOnPaste } from '#~/concepts/connectionTypes/utils';
 
 type PVCFieldsProps = {
   selectedPVC: PersistentVolumeClaimKind;
@@ -20,14 +21,20 @@ export const PVCFields: React.FC<PVCFieldsProps> = ({ selectedPVC, setModelUri,
       <InputGroupText>pvc://{selectedPVC.metadata.name}/</InputGroupText>
       <InputGroupItem isFill>
         <TextInput
-          id="model-path"
+          id="pvc-model-path"
           aria-label="Model path"
-          data-testid="model-path"
+          data-testid="pvc-model-path"
           type="text"
           value={modelPath ?? ''}
           isRequired
           onChange={(e, value: string) => {
-            setModelUri(`pvc://${selectedPVC.metadata.name}/${value}`);
+            setModelUri(value.trim());
+          }}
+          onBlur={() => {
+            trimInputOnBlur(modelPath, setModelUri);
+          }}
+          onPaste={() => {
+            trimInputOnPaste(modelPath, setModelUri);
           }}
         />
       </InputGroupItem>

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

@@ -18,6 +18,7 @@ type PvcSelectProps = {
   setIsConnectionValid: (isValid: boolean) => void;
   modelUri?: string;
 };
+
 export const PvcSelect: React.FC<PvcSelectProps> = ({
   pvcs,
   selectedPVC,
@@ -26,12 +27,43 @@ export const PvcSelect: React.FC<PvcSelectProps> = ({
   setIsConnectionValid,
   modelUri,
 }) => {
+  const [modelPath, setModelPath] = React.useState('');
+  const lastPVCNameRef = React.useRef<string | undefined>();
+
+  React.useEffect(() => {
+    if (selectedPVC && selectedPVC.metadata.name !== lastPVCNameRef.current) {
+      const { modelPath: annotatedPath } = getModelServingPVCAnnotations(selectedPVC);
+      const path = annotatedPath ?? '';
+      setModelPath(path);
+      setModelUri(generateModelUri(selectedPVC.metadata.name, path));
+      lastPVCNameRef.current = selectedPVC.metadata.name;
+    } else if (!selectedPVC) {
+      setModelPath('');
+      setModelUri('');
+      lastPVCNameRef.current = undefined;
+    }
+  }, [selectedPVC, setModelUri]);
+
+  const handleModelPathChange = (newPath: string): void => {
+    setModelPath(newPath);
+    if (selectedPVC) {
+      setModelUri(generateModelUri(selectedPVC.metadata.name, newPath));
+    }
+  };
+
+  const generateModelUri = (pvcName: string, path: string): string => `pvc://${pvcName}/${path}`;
+
+  React.useEffect(() => {
+    const isValidPVCUri = (uri: string): boolean => /^pvc:\/\/[a-z0-9-]+\/\S+$/.test(uri);
+    setIsConnectionValid(!!selectedPVC && isValidPVCUri(modelUri ?? ''));
+  }, [selectedPVC, modelUri, setIsConnectionValid]);
+
   const options: TypeaheadSelectOption[] = React.useMemo(
     () =>
       pvcs?.map((pvc) => {
         const displayName = getDisplayNameFromK8sResource(pvc);
-        const { modelPath, modelName } = getModelServingPVCAnnotations(pvc);
-        const isModelServingPVC = !!modelPath || !!modelName;
+        const { modelPath: modelPathAnnotation, modelName } = getModelServingPVCAnnotations(pvc);
+        const isModelServingPVC = !!modelPathAnnotation || !!modelName;
         return {
           content: displayName,
           value: pvc.metadata.name,
@@ -49,23 +81,9 @@ export const PvcSelect: React.FC<PvcSelectProps> = ({
       }) || [],
     [pvcs, selectedPVC],
   );
+
   const accessMode = selectedPVC ? getModelServingPVCAccessMode(selectedPVC) : undefined;
-  const { modelPath } = React.useMemo(() => {
-    if (selectedPVC) {
-      const { modelPath: selectedModelPath, modelName: selectedModelName } =
-        getModelServingPVCAnnotations(selectedPVC);
-      return {
-        modelPath: selectedModelPath ?? undefined,
-        modelName: selectedModelName ?? undefined,
-      };
-    }
-    return { modelPath: undefined, modelName: undefined };
-  }, [selectedPVC]);
-  const isValidPVCUri = (uri: string): boolean => /^pvc:\/\/[a-z0-9-]+\/\S+$/.test(uri);
 
-  React.useEffect(() => {
-    setIsConnectionValid(!!selectedPVC && isValidPVCUri(modelUri ?? ''));
-  }, [selectedPVC, modelPath, modelUri, setIsConnectionValid]);
   return (
     <FormGroup label="Cluster storage" isRequired>
       <Stack hasGutter>
@@ -91,7 +109,11 @@ export const PvcSelect: React.FC<PvcSelectProps> = ({
         )}
         {selectedPVC && (
           <StackItem>
-            <PVCFields selectedPVC={selectedPVC} setModelUri={setModelUri} modelPath={modelPath} />
+            <PVCFields
+              selectedPVC={selectedPVC}
+              modelPath={modelPath}
+              setModelUri={handleModelPathChange}
+            />
           </StackItem>
         )}
       </Stack>

frontend/src/pages/modelServing/screens/projects/KServeSection/KServeInferenceServiceTable.tsx

@@ -42,6 +42,7 @@ const KServeInferenceServiceTable: React.FC = () => {
     },
     serverSecrets: { refresh: refreshServerSecrets },
     filterTokens,
+    pvcs: { data: pvcs },
   } = React.useContext(ProjectDetailsContext);
   const columns = getKServeInferenceServiceColumns();
 
@@ -96,6 +97,7 @@ const KServeInferenceServiceTable: React.FC = () => {
               editKserveResources.inferenceService.spec.predictor.model?.runtime,
             ),
           }}
+          pvcs={pvcs}
           onClose={(submit: boolean) => {
             setEditKServeResources(undefined);
             if (submit) {

frontend/src/pages/modelServing/screens/projects/ModelServingPlatform.tsx

@@ -210,7 +210,8 @@ const ModelServingPlatform: React.FC = () => {
 
     return (
       <ManageKServeModal
-        projectContext={{ currentProject, connections, pvcs }}
+        projectContext={{ currentProject, connections }}
+        pvcs={pvcs}
         servingRuntimeTemplates={templatesEnabled.filter((template) =>
           getTemplateEnabledForPlatform(template, ServingRuntimePlatform.SINGLE),
         )}

frontend/src/pages/modelServing/screens/projects/kServeModal/ManageKServeModal.tsx

@@ -66,6 +66,7 @@ import usePrefillModelDeployModal, {
 import { useKServeDeploymentMode } from '#~/pages/modelServing/useKServeDeploymentMode';
 import { SERVING_RUNTIME_SCOPE } from '#~/pages/modelServing/screens/const';
 import { useModelDeploymentNotification } from '#~/pages/modelServing/screens/projects/useModelDeploymentNotification';
+import { getDashboardPvcs } from '#~/api/k8s/pvcs';
 import KServeAutoscalerReplicaSection from './KServeAutoscalerReplicaSection';
 import EnvironmentVariablesSection from './EnvironmentVariablesSection';
 import ServingRuntimeArgsSection from './ServingRuntimeArgsSection';
@@ -85,12 +86,12 @@ type ManageKServeModalProps = {
   shouldFormHidden?: boolean;
   projectSection?: React.ReactNode;
   existingUriOption?: string;
+  pvcs?: PersistentVolumeClaimKind[] | [];
 } & EitherOrNone<
   {
     projectContext?: {
       currentProject: ProjectKind;
       connections: Connection[];
-      pvcs: PersistentVolumeClaimKind[] | [];
     };
   },
   {
@@ -105,6 +106,7 @@ type ManageKServeModalProps = {
 const ManageKServeModal: React.FC<ManageKServeModalProps> = ({
   onClose,
   servingRuntimeTemplates,
+  pvcs,
   projectContext,
   editInfo,
   projectSection,
@@ -141,6 +143,16 @@ const ManageKServeModal: React.FC<ManageKServeModalProps> = ({
   const namespace = currentProjectName || createDataInferenceService.project;
 
   const projectTemplates = useTemplates(namespace);
+  const [fallbackPvcs, setFallbackPvcs] = React.useState<PersistentVolumeClaimKind[]>([]);
+  React.useEffect(() => {
+    getDashboardPvcs(namespace)
+      .then((data) => {
+        setFallbackPvcs(data.filter((pvc) => pvc.metadata.namespace === namespace));
+      })
+      .catch(() => {
+        setFallbackPvcs([]);
+      });
+  }, [namespace]);
 
   const customServingRuntimesEnabled = useCustomServingRuntimesEnabled();
   const [allowCreate] = useAccessReview({
@@ -475,7 +487,7 @@ const ManageKServeModal: React.FC<ManageKServeModalProps> = ({
                 setConnection={setConnection}
                 setIsConnectionValid={setIsConnectionValid}
                 connections={connections}
-                pvcs={projectContext?.pvcs}
+                pvcs={pvcs?.length && pvcs.length > 0 ? pvcs : fallbackPvcs}
               />
             </FormSection>
           )}

frontend/src/pages/projects/screens/detail/overview/serverModels/AddModelFooter.tsx

@@ -106,7 +106,8 @@ const AddModelFooter: React.FC<AddModelFooterProps> = ({ selectedPlatform, isNIM
       ) : null}
       {modalShown && !isProjectModelMesh && !isNIM ? (
         <ManageKServeModal
-          projectContext={{ currentProject, connections, pvcs: pvcs.data }}
+          projectContext={{ currentProject, connections }}
+          pvcs={pvcs.data}
           servingRuntimeTemplates={templatesEnabled.filter((template) =>
             getTemplateEnabledForPlatform(template, ServingRuntimePlatform.SINGLE),
           )}