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:
parent
71683a1ad1
commit
aa0a3f107c
1 changed files with 52 additions and 9 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue