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 && (
-
+
- )}
+ Launch
+
+ {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,
+ }}
+ />
+
+ )}
+
>
);
}