Bug 2132793: Load and show boot source reference

src/views/templates/actions/components/EditBootSourceModal.scss

@@ -2,6 +2,7 @@
   margin-bottom: var(--pf-global--spacer--md);
 }
 
-.select-source-option {
+.select-source-option,
+.disk-source-form-group {
   margin-bottom: var(--pf-global--spacer--md);
 }

src/views/templates/actions/components/EditBootSourceModal.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import { Trans } from 'react-i18next';
 
-import { getTemplateStorageQuantity } from '@catalog/customize/components/CustomizeSource/utils';
 import {
   modelToGroupVersionKind,
   TemplateModel,
@@ -19,6 +18,8 @@ import { editBootSource } from '../editBootSource';
 
 import useBootSourceEditAffectedTemplates from './hooks/useBootSourceEditAffectedTemplates';
 import { SelectSource } from './SelectSource';
+import SelectSourceSkeleton from './SelectSourceSkeleton';
+import { getDataVolumeSpec } from './utils';
 
 import './EditBootSourceModal.scss';
 
@@ -29,14 +30,22 @@ type EditBootSourceModalProps = {
   onClose: () => void;
 };
 
-const EditBootSourceModal: React.FC<EditBootSourceModalProps> = ({
+const EditBootSourceModal: FC<EditBootSourceModalProps> = ({
   isOpen,
   obj,
   dataSource,
   onClose,
 }) => {
   const { t } = useKubevirtTranslation();
-  const [bootSource, setBootSource] = React.useState<V1beta1DataVolumeSpec>();
+  const [bootSource, setBootSource] = useState<V1beta1DataVolumeSpec>();
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    getDataVolumeSpec(dataSource)
+      .then(setBootSource)
+      .finally(() => setLoading(false));
+  }, [dataSource]);
 
   const affectedTemplates = useBootSourceEditAffectedTemplates(obj);
 
@@ -79,17 +88,21 @@ const EditBootSourceModal: React.FC<EditBootSourceModalProps> = ({
 
         <Form>
           <FormGroup fieldId="boot-source-type" isRequired>
-            <SelectSource
-              onSourceChange={setBootSource}
-              sourceLabel={t('Boot source type')}
-              sourceOptions={[
-                SOURCE_TYPES.pvcSource,
-                SOURCE_TYPES.registrySource,
-                SOURCE_TYPES.httpSource,
-              ]}
-              withSize
-              initialVolumeQuantity={getTemplateStorageQuantity(obj)}
-            />
+            {loading ? (
+              <SelectSourceSkeleton />
+            ) : (
+              <SelectSource
+                source={bootSource}
+                onSourceChange={setBootSource}
+                sourceLabel={t('Boot source type')}
+                sourceOptions={[
+                  SOURCE_TYPES.pvcSource,
+                  SOURCE_TYPES.registrySource,
+                  SOURCE_TYPES.httpSource,
+                ]}
+                withSize
+              />
+            )}
           </FormGroup>
         </Form>
       </TabModal>

src/views/templates/actions/components/PersistentVolumeClaimSelect/PersistentVolumeClaimSelect.tsx

@@ -10,34 +10,32 @@ import './PersistentVolumeClaimSelect.scss';
 type PersistentVolumeClaimSelectProps = {
   pvcNameSelected: string;
   projectSelected: string;
-  selectNamespace: (namespace: string) => void;
-  selectPVCName: (pvcName: string) => void;
+  selectPVC: (pvcNamespace: string, pvcName?: string) => void;
 };
 
 export const PersistentVolumeClaimSelect: React.FC<PersistentVolumeClaimSelectProps> = ({
   pvcNameSelected,
   projectSelected,
-  selectPVCName,
-  selectNamespace,
+  selectPVC,
 }) => {
-  const { projectsNames, filteredPVCNames, loaded } = useProjectsAndPVCs(projectSelected);
+  const { projectsNames, filteredPVCNames, projectsLoaded, pvcsLoaded } =
+    useProjectsAndPVCs(projectSelected);
 
   const onSelectProject = React.useCallback(
     (newProject) => {
-      selectNamespace(newProject);
-      selectPVCName(undefined);
+      selectPVC(newProject);
     },
-    [selectNamespace, selectPVCName],
+    [selectPVC],
   );
 
   const onPVCSelected = React.useCallback(
     (selection) => {
-      selectPVCName(selection);
+      selectPVC(projectSelected, selection);
     },
-    [selectPVCName],
+    [selectPVC, projectSelected],
   );
 
-  if (!loaded) return <PersistentVolumeClainSelectSkeleton />;
+  if (!projectsLoaded) return <PersistentVolumeClainSelectSkeleton />;
 
   return (
     <div>
@@ -51,6 +49,7 @@ export const PersistentVolumeClaimSelect: React.FC<PersistentVolumeClaimSelectPr
         pvcNameSelected={pvcNameSelected}
         pvcNames={filteredPVCNames}
         isDisabled={!projectSelected}
+        isLoading={!pvcsLoaded}
       />
     </div>
   );

src/views/templates/actions/components/PersistentVolumeClaimSelect/PersistentVolumeSelectName.tsx

@@ -6,6 +6,7 @@ import {
   Select,
   SelectOption,
   SelectVariant,
+  Skeleton,
   ValidatedOptions,
 } from '@patternfly/react-core';
 
@@ -16,13 +17,15 @@ type PersistentVolumeSelectNameProps = {
   pvcNameSelected: string;
   pvcNames: string[];
   onChange: (newPVCName: string) => void;
+  isLoading?: boolean;
 };
 
 export const PersistentVolumeSelectName: React.FC<PersistentVolumeSelectNameProps> = ({
   isDisabled,
   pvcNameSelected,
   pvcNames,
   onChange,
+  isLoading,
 }) => {
   const { t } = useKubevirtTranslation();
   const [isOpen, setSelectOpen] = React.useState(false);
@@ -37,6 +40,16 @@ export const PersistentVolumeSelectName: React.FC<PersistentVolumeSelectNameProp
 
   const fieldId = 'pvc-name-select';
 
+  if (isLoading) {
+    return (
+      <>
+        <br />
+        <Skeleton fontSize="lg" className="pvc-selection-formgroup" />
+        <br />
+      </>
+    );
+  }
+
   return (
     <FormGroup
       label={t('Persistent Volume Claim name')}

src/views/templates/actions/components/PersistentVolumeClaimSelect/utils.tsx

@@ -5,12 +5,7 @@ import {
   PersistentVolumeClaimModel,
   ProjectModel,
 } from '@kubevirt-ui/kubevirt-api/console';
-import { getAllowedResourceData, getAllowedResources } from '@kubevirt-utils/resources/shared';
-import {
-  K8sResourceCommon,
-  useK8sWatchResource,
-  useK8sWatchResources,
-} from '@openshift-console/dynamic-plugin-sdk';
+import { K8sResourceCommon, useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
 import { SelectOption } from '@patternfly/react-core';
 
 export const filter = (options: string[]) => {
@@ -31,7 +26,8 @@ export const filter = (options: string[]) => {
 type useProjectsAndPVCsReturnType = {
   projectsNames: string[];
   filteredPVCNames: string[];
-  loaded: boolean;
+  projectsLoaded: boolean;
+  pvcsLoaded: boolean;
   error: Error;
 };
 
@@ -42,24 +38,25 @@ export const useProjectsAndPVCs = (projectSelected: string): useProjectsAndPVCsR
     isList: true,
   });
 
-  const projectsNames = projects.map((project) => project.metadata.name);
-
-  const watchedResources = getAllowedResources(projectsNames, PersistentVolumeClaimModel);
-  const resources = useK8sWatchResources<{ [key: string]: K8sResourceCommon[] }>(watchedResources);
-  const {
-    data: pvcs,
-    loaded: pvcsLoaded,
-    loadError: pvcsErrors,
-  } = getAllowedResourceData(resources, PersistentVolumeClaimModel);
+  const [pvcs, pvcsLoaded, pvcsErrors] = useK8sWatchResource<K8sResourceCommon[]>(
+    projectSelected
+      ? {
+          groupVersionKind: modelToGroupVersionKind(PersistentVolumeClaimModel),
+          namespaced: true,
+          namespace: projectSelected,
+          isList: true,
+        }
+      : null,
+  );
 
-  const pvcNamesFilteredByProjects = pvcs
-    .filter((pvc) => pvc.metadata.namespace === projectSelected)
-    .map((pvc) => pvc.metadata.name);
+  const projectsNames = (projects || []).map((project) => project.metadata.name);
+  const filteredPVCNames = (pvcs || []).map((pvc) => pvc.metadata.name);
 
   return {
     projectsNames,
-    filteredPVCNames: pvcNamesFilteredByProjects,
-    loaded: projectsLoaded && pvcsLoaded,
+    filteredPVCNames,
+    projectsLoaded,
+    pvcsLoaded,
     error: projectsErrors || pvcsErrors,
   };
 };