Images: add popover when the image is outdated

Add Popover to inform user the image is build for an older then current Blueprint version.

Fixes HMS-3763
This commit is contained in:
Ondrej Ezr 2024-03-14 00:23:58 +01:00 committed by Lucas Garfield
parent 71683a1ad1
commit aa0a3f107c

View file

@ -11,6 +11,7 @@ import {
ModalVariant, ModalVariant,
OrderType, OrderType,
Popover, Popover,
PopoverPosition,
Skeleton, Skeleton,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { ExternalLinkAltIcon } from '@patternfly/react-icons'; import { ExternalLinkAltIcon } from '@patternfly/react-icons';
@ -20,6 +21,13 @@ import { useNavigate } from 'react-router-dom';
import { MODAL_ANCHOR } from '../../constants'; import { MODAL_ANCHOR } from '../../constants';
import { import {
selectSelectedBlueprintId,
selectBlueprintSearchInput,
} from '../../store/BlueprintSlice';
import { useAppSelector } from '../../store/hooks';
import {
BlueprintItem,
useGetBlueprintsQuery,
ComposesResponseItem, ComposesResponseItem,
ComposeStatus, ComposeStatus,
ImageTypes, ImageTypes,
@ -93,6 +101,19 @@ const ProvisioningLink = ({
document.querySelector(MODAL_ANCHOR) as HTMLElement document.querySelector(MODAL_ANCHOR) as HTMLElement
); );
const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
const { selectedBlueprintVersion } = useGetBlueprintsQuery(
{ search: blueprintSearchInput },
{
selectFromResult: ({ data }) => ({
selectedBlueprintVersion: data?.data?.find(
(blueprint: BlueprintItem) => blueprint.id === selectedBlueprintId
)?.version,
}),
}
);
if ( if (
error || error ||
!exposedScalprumModule || !exposedScalprumModule ||
@ -117,18 +138,40 @@ const ProvisioningLink = ({
sourceIds = options.share_with_sources; sourceIds = options.share_with_sources;
} }
const btn = (
<Button
spinnerAriaLabel="Loading launch"
isLoading={isLoadingPermission}
variant="link"
isInline
onClick={() => setWizardOpen(true)}
>
Launch
</Button>
);
const buttonWithTooltip = (
<Popover
triggerAction="hover"
position={PopoverPosition.left}
aria-label="Outdated image tooltip"
headerContent={<div>A newer version is available</div>}
bodyContent={
<div>
This image can be launched, but it is not the latest version.
</div>
}
>
{btn}
</Popover>
);
return ( return (
<> <>
<Suspense fallback="loading..."> <Suspense fallback="loading...">
<Button {selectedBlueprintVersion &&
spinnerAriaLabel="Loading launch" compose.blueprint_version !== selectedBlueprintVersion
isLoading={isLoadingPermission} ? buttonWithTooltip
variant="link" : btn}
isInline
onClick={() => setWizardOpen(true)}
>
Launch
</Button>
{wizardOpen && ( {wizardOpen && (
<Modal <Modal
isOpen isOpen