feat(RHINENG-9709): Add available image to bootc card

src/components/GeneralInfo/BootcImageCard/BootcImageCard.js

@@ -22,6 +22,13 @@ export const BootcImageCard = ({ handleClick, extra }) => {
         ...[{ title: 'Booted Image Digest', value: bootc.bootedImageDigest }],
         ...[{ title: 'Staged Image', value: bootc.stagedImage }],
         ...[{ title: 'Staged Image Digest', value: bootc.stagedImageDigest }],
+        ...[{ title: 'Available Image', value: bootc.availableImage }],
+        ...[
+          {
+            title: 'Available Image Digest',
+            value: bootc.availableImageDigest,
+          },
+        ],
         ...[{ title: 'Rollback Image', value: bootc.rollbackImage }],
         ...[
           { title: 'Rollback Image Digest', value: bootc.rollbackImageDigest },
@@ -43,6 +50,8 @@ BootcImageCard.propTypes = {
     bootedImageDigest: PropTypes.string,
     stagedImage: PropTypes.string,
     stagedImageDigest: PropTypes.string,
+    availableImage: PropTypes.string,
+    availableImageDigest: PropTypes.string,
     rollbackImage: PropTypes.string,
     rollbackImageDigest: PropTypes.string,
   }),

src/components/GeneralInfo/BootcImageCard/BootcImageCard.test.js

@@ -0,0 +1,57 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import { TestWrapper } from '../../../Utilities/TestingUtilities';
+import { BootcImageCard } from './BootcImageCard';
+
+describe('BootcImageCard', () => {
+  let initialState;
+  let mockStore;
+
+  beforeEach(() => {
+    mockStore = configureStore();
+    initialState = {
+      systemProfileStore: {
+        systemProfile: {
+          loaded: true,
+          bootc_status: {
+            booted: {
+              image: 'quay.io:5000/bootc-insights:latest',
+              image_digest:
+                'sha256:8fa5b818d1560c7d15d8744069651b671acd13ec5290c2bb55d1fae2492fcb5f',
+            },
+            rollback: {
+              image: 'quay.io:5000/bootc-insights:latest',
+              cached_image: 'quay.io:5000/bootc-insights:latest',
+              image_digest:
+                'sha256:99dec597bd1e95565d9df181cab9bf0278b15e79a613dbd0a357d60f295e9a72',
+              cached_image_digest:
+                'sha256:06462b5728c3b445df63327451c32874d946eb1f2071401680145d52e578137b',
+            },
+          },
+          cpu_flags: ['one'],
+        },
+      },
+    };
+  });
+
+  it('should render correctly - no data', () => {
+    const store = mockStore({ systemProfileStore: {} });
+    const view = render(
+      <TestWrapper store={store}>
+        <BootcImageCard />
+      </TestWrapper>
+    );
+    expect(view.asFragment()).toMatchSnapshot();
+  });
+
+  it('should render correctly with data', () => {
+    const store = mockStore(initialState);
+    const view = render(
+      <TestWrapper store={store}>
+        <BootcImageCard />
+      </TestWrapper>
+    );
+    expect(view.asFragment()).toMatchSnapshot();
+  });
+});

src/components/GeneralInfo/selectors/selectors.js

@@ -77,6 +77,11 @@ export const biosSelector = ({
 export const bootcSelector = ({ bootc_status } = {}) => ({
   bootedImage: bootc_status?.booted?.image,
   bootedImageDigest: bootc_status?.booted?.image_digest,
+  availableImage:
+    bootc_status?.staged?.cached_image || bootc_status?.booted?.cached_image,
+  availableImageDigest:
+    bootc_status?.staged?.cached_image_digest ||
+    bootc_status?.booted?.cached_image_digest,
   stagedImage: bootc_status?.staged?.image,
   stagedImageDigest: bootc_status?.staged?.image_digest,
   rollbackImage: bootc_status?.rollback?.image,