particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

LaunchWizard: Restore Launch wizard functionality

Browse source 
This commit is a hotfix that restores functionality to the Launch
wizard.

The `appendTo` variable can't be recomputed on every render. Wrap it in
a useState() hook to work properly.

Additionally, the `hasAccess`  property was missing from the
<ProvisioningWizard> component.

To ensure full backwards compatibility, the component has also been
wrapped in a <Suspense> as it was previously.
This commit is contained in:
lucasgarfield 2023-09-18 14:46:46 +02:00 • committed by Lucas Garfield
parent 543d4e95d3
commit adaec7e34d
1 changed files with 50 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

82
src/Components/ImagesTable/Instance.tsx
View file

@ -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 <DisabledProvisioningLink />;
} 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 (
<>
<Button variant="link" isInline onClick={() => openWizard(true)}>
Launch
</Button>
{wizardOpen && (
<Modal
isOpen
hasNoBodyWrapper
appendTo={appendTo}
showClose={false}
variant={ModalVariant.large}
aria-label="Open launch wizard"
<Suspense fallback="loading...">
<Button
spinnerAriaLabel="Loading launch"
isLoading={isLoadingPermission}
variant="link"
isInline
onClick={() => setWizardOpen(true)}
>
<ProvisioningWizard
onClose={() => openWizard(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,
}}
/>
</Modal>
)}
Launch
</Button>
{wizardOpen && (
<Modal
isOpen
hasNoBodyWrapper
appendTo={appendTo}
showClose={false}
variant={ModalVariant.large}
aria-label="Open launch wizard"
>
<ProvisioningWizard
hasAccess={permissions[provider]}
onClose={() => 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,
}}
/>
</Modal>
)}
</Suspense>
</>
);
}