Fixes #38013 - Add Image mode card on host details tab

[lfu]

What are the changes introduced in this pull request?

Add Image mode card on host details tab for bootc hosts

Considerations taken when implementing this change?

Depends on #11209

What are the testing steps for this pull request?

Follow the test steps in #11209.
Go to a bootc host - details tab.

[lfu]

[jeremylenz]

I think it'd be cool to have our shiny new image mode icon on the card :)

[ianballou]

@sambible I think this card might be a good candidate to use as a stopping point for packit testing on what we've developed so far for image mode.

[lfu]

Not sure if it is shiny.

[jeremylenz]

Icon looks awesome :) but we maybe don't need so many! I was thinking just in the header. Maybe instead of "Image information" it could be " Image-mode host".

[lfu]

[ianballou]

Working great! Just a couple suggestions.

[ianballou]

"Image mode host" as a title more sounds like it's announcing that this is an image mode host rather than describing image mode host details.

What if we change it to:

Suggested change

	<span style={{ marginRight: '0.5rem' }}>{__('Image mode host')}</span>
	<span style={{ marginRight: '0.5rem' }}>{__('Image mode details')}</span>

[ianballou]

For any field that is empty, should we display a dash - like in the mock image?

[ianballou]

This seems to work well:

diff --git a/webpack/components/extensions/HostDetails/DetailsTabCards/ImageModeCard.js b/webpack/components/extensions/HostDetails/DetailsTabCards/ImageModeCard.js
index 7ec258bf77..ce281d6274 100644
--- a/webpack/components/extensions/HostDetails/DetailsTabCards/ImageModeCard.js
+++ b/webpack/components/extensions/HostDetails/DetailsTabCards/ImageModeCard.js
@@ -19,6 +19,8 @@ const ImageModeCard = ({ isExpandedGlobal, hostDetails }) => {
     </>
   );
   if (!imageMode) return null;
+  const getValueOrDash = value => (value || '-');
+
   return (
     <CardTemplate
       header={header}
@@ -29,24 +31,24 @@ const ImageModeCard = ({ isExpandedGlobal, hostDetails }) => {
       <DescriptionList isHorizontal>
         <DescriptionListGroup>
           <Dt>{__('Running image')}</Dt>
-          <Dd>{hostDetails.content_facet_attributes.bootc_booted_image}</Dd>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_booted_image)}</Dd>
           <Dt>{__('Running image digest')}</Dt>
-          <Dd>{hostDetails.content_facet_attributes.bootc_booted_digest}</Dd>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_booted_digest)}</Dd>
 
           <Dt>{__('Staged image')}</Dt>
-          <Dd>{hostDetails.content_facet_attributes.bootc_staged_image}</Dd>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_staged_image)}</Dd>
           <Dt>{__('Staged image digest')}</Dt>
-          <Dd>{hostDetails.content_facet_attributes.bootc_staged_digest}</Dd>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_staged_digest)}</Dd>
 
           <Dt>{__('Available image')}</Dt>
-          <Dd>{hostDetails.content_facet_attributes.bootc_available_image}</Dd>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_available_image)}</Dd>
           <Dt>{__('Available image digest')}</Dt>
-          <Dd>{hostDetails.content_facet_attributes.bootc_available_digest}</Dd>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_available_digest)}</Dd>
 
           <Dt>{__('Rollback image')}</Dt>
-          <Dd>{hostDetails.content_facet_attributes.bootc_rollback_image}</Dd>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_rollback_image)}</Dd>
           <Dt>{__('Rollback image digest')}</Dt>
-          <Dd>{hostDetails.content_facet_attributes.bootc_rollback_digest}</Dd>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_rollback_digest)}</Dd>
         </DescriptionListGroup>
       </DescriptionList>
     </CardTemplate>

[lfu]

[ianballou]

This is looking perfect to me.

I'd like to see if we can get a review from @sambible since we've merged a few imagae mode things without a check from a QE reviewer. I'll hold off on acking the PR for now.

[jeremylenz]

Looks great except I'd make the icon a bit bigger (and move it up vertically a bit so it's better aligned.)

[ianballou]

Looks great except I'd make the icon a bit bigger (and move it up vertically a bit so it's better aligned.)

It renders like this on Firefox:

[jeremylenz]

This could be moved outside the component so it doesn't get recreated on each render. Not essential here though, it shouldn't be too expensive :)

[jeremylenz]

It's not actually a hyphen ;)

Suggested change

	const getValueOrDash = value => (value || '-');
	const getValueOrDash = value => (value || '—');

[jeremylenz]

It renders like this on Firefox:

oh! Yeah, that's much better..