ImagesTable: Add OCI images

This adds a row for OCI images in the ImagesTable. Details about the images show UUID of the image and the Object Storage URL which is needed to deploy the image.

"Image link" button in the Instance column contains instrucion on how to run an OCI image built by Image Builder in Oracle Cloud. The documentation link in the popover is just a placeholder for now as the documentation is being prepared.

Until the build is finished the "Image link" button is disabled as it would be missing the Object Storage URL which is creating on upload.

src/Components/ImagesTable/Instance.tsx

@@ -1,6 +1,19 @@
 import React, { Suspense, useState } from 'react';
 
-import { Button, Modal, ModalVariant, Skeleton } from '@patternfly/react-core';
+import {
+  Alert,
+  Button,
+  ClipboardCopy,
+  List,
+  ListComponent,
+  ListItem,
+  Modal,
+  ModalVariant,
+  OrderType,
+  Popover,
+  Skeleton,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
 import { useLoadModule, useScalprum } from '@scalprum/react-core';
 import { useNavigate } from 'react-router-dom';
@@ -16,6 +29,7 @@ import {
   isAwsUploadRequestOptions,
   isAwss3UploadStatus,
   isGcpUploadRequestOptions,
+  isOciUploadStatus,
 } from '../../store/typeGuards';
 import { resolveRelPath } from '../../Utilities/path';
 import useProvisioningPermissions from '../../Utilities/useProvisioningPermissions';
@@ -164,6 +178,101 @@ const getImageProvider = (compose: ComposesResponseItem) => {
   }
 };
 
+type OciInstancePropTypes = {
+  compose: ComposesResponseItem;
+};
+
+export const OciInstance = ({ compose }: OciInstancePropTypes) => {
+  const { data, isSuccess, isFetching, isError } = useGetComposeStatusQuery({
+    composeId: compose.id,
+  });
+
+  if (!isSuccess) {
+    return <Skeleton />;
+  }
+
+  const options = data.image_status.upload_status?.options;
+
+  if (options && !isOciUploadStatus(options)) {
+    throw TypeError(
+      `Error: options must be of type OciUploadStatus, not ${typeof options}.`
+    );
+  }
+
+  return (
+    <Popover
+      position="bottom"
+      headerContent={<div>Launch an OCI image</div>}
+      bodyContent={
+        <>
+          <p>
+            To run the image copy the link below and follow the steps below:
+          </p>
+          <List component={ListComponent.ol} type={OrderType.number}>
+            <ListItem>
+              Go to &quot;Compute&quot; in Oracle Cloud and choose &quot;Custom
+              Images&quot;.
+            </ListItem>
+            <ListItem>
+              Click on &quot;Import image&quot;, choose &quot;Import from an
+              object storage URL&quot;.
+            </ListItem>
+            <ListItem>
+              Choose &quot;Import from an object storage URL&quot; and paste the
+              URL in the &quot;Object Storage URL&quot; field. The image type
+              has to be set to QCOW2 and the launch mode should be
+              paravirtualized.
+            </ListItem>
+          </List>
+          <br />
+          {isSuccess && (
+            <ClipboardCopy
+              hoverTip="Copy"
+              clickTip="Copied"
+              variant="inline-compact"
+              ouiaId="oci-link"
+              isBlock
+            >
+              {options?.url}
+            </ClipboardCopy>
+          )}
+          {isFetching && <Skeleton />}
+          {isError && (
+            <Alert
+              title="The link to launch the image could not be loaded. Please refresh
+              the page and try again."
+              variant="danger"
+              isPlain
+              isInline
+            />
+          )}
+          <br />
+          <Button
+            component="a"
+            target="_blank"
+            variant="link"
+            icon={<ExternalLinkAltIcon />}
+            iconPosition="right"
+            // TO DO update the link after documentation is up
+            href="https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/creating_customized_images_by_using_insights_image_builder/customizing-file-systems-during-the-image-creation"
+            className="pf-u-pl-0"
+          >
+            Read more about launching OCI images
+          </Button>
+        </>
+      }
+    >
+      <Button
+        variant="link"
+        className="pf-u-p-0 pf-u-font-size-sm"
+        isDisabled={data?.image_status.status === 'success' ? false : true}
+      >
+        Image link
+      </Button>
+    </Popover>
+  );
+};
+
 type AwsS3InstancePropTypes = {
   compose: ComposesResponseItem;
   isExpired: boolean;
@@ -198,6 +307,7 @@ export const AwsS3Instance = ({
     'rhel-edge-commit': '',
     'rhel-edge-installer': '',
     vhd: '',
+    oci: '',
   };
 
   const status = composeStatus.image_status.status;