diff --git a/src/Components/ImagesTable/Instance.tsx b/src/Components/ImagesTable/Instance.tsx index 9b02f89d..94c97609 100644 --- a/src/Components/ImagesTable/Instance.tsx +++ b/src/Components/ImagesTable/Instance.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { Suspense, useState } from 'react'; import { Button, Modal, ModalVariant, Skeleton } from '@patternfly/react-core'; import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome'; @@ -18,6 +18,7 @@ import { isGcpUploadRequestOptions, } from '../../store/typeGuards'; import { resolveRelPath } from '../../Utilities/path'; +import useProvisioningPermissions from '../../Utilities/useProvisioningPermissions'; type CloudInstancePropTypes = { compose: ComposesResponseItem; @@ -60,7 +61,7 @@ const ProvisioningLink = ({ compose, composeStatus, }: ProvisioningLinkPropTypes) => { - const [wizardOpen, openWizard] = useState(false); + const [wizardOpen, setWizardOpen] = useState(false); const [exposedScalprumModule, error] = useLoadModule( { scope: 'provisioning', @@ -69,6 +70,15 @@ const ProvisioningLink = ({ {} ); + const { permissions, isLoading: isLoadingPermission } = + useProvisioningPermissions(); + + // Recomputing this value on every render made the modal crash. Using a state + // helps avoiding this situation as the value is only set the first time. + const [appendTo] = useState( + document.querySelector(MODAL_ANCHOR) as HTMLElement + ); + if ( error || !exposedScalprumModule || @@ -76,8 +86,7 @@ const ProvisioningLink = ({ ) { return ; } else { - const appendTo = () => document.querySelector(MODAL_ANCHOR) as HTMLElement; - const ProvisioningWizard = exposedScalprumModule.default; + const ProvisioningWizard = exposedScalprumModule?.default; const provider = getImageProvider(compose); const options = compose.request.image_requests[0].upload_request.options; @@ -96,35 +105,44 @@ const ProvisioningLink = ({ return ( <> - - {wizardOpen && ( - + + {wizardOpen && ( + + setWizardOpen(false)} + image={{ + name: compose.image_name || compose.id, + id: compose.id, + architecture: + compose.request.image_requests[0].upload_request.options, + provider: provider, + sourceIDs: sourceIds, + accountIDs: accountIds, + uploadOptions: + compose.request.image_requests[0].upload_request.options, + uploadStatus: composeStatus.image_status.upload_status, + }} + /> + + )} + ); }