fix(HMS-3203): Add GCP copy image command when missing a source

This adds a clipboard box to make copying (and thus saving) the image
easier.

src/Components/ProvisioningWizard/steps/SourceMissing/DirectProviderLink.js

@@ -6,6 +6,7 @@ import { AWS_PROVIDER, AZURE_PROVIDER, GCP_PROVIDER } from '../../../../constant
 import RegionsSelect from '../../../RegionsSelect';
 import { imageProps } from '../../helpers.js';
 import GCPConsoleLaunch from './GCPConsoleLaunch';
+import GCPCreateImage from './GCPCreateImage';
 
 const DirectProviderLink = ({ image }) => {
   const uploadStatus = image.uploadStatus || { options: {} };
@@ -45,7 +46,10 @@ const DirectProviderLink = ({ image }) => {
   return (
     <Stack>
       {image.provider === GCP_PROVIDER ? (
-        <GCPConsoleLaunch text={text} image={image} />
+        <>
+          <GCPConsoleLaunch text={text} image={image} />
+          <GCPCreateImage text="Copy image to your account" image={image} />
+        </>
       ) : (
         <StackItem>
           <Button component="a" variant="link" icon={<ExternalLinkAltIcon />} iconPosition="right" target="_blank" href={url}>

src/Components/ProvisioningWizard/steps/SourceMissing/GCPConsoleLaunch.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { ClipboardCopy, StackItem } from '@patternfly/react-core';
 import { imageProps } from '../../helpers';
-import './GCPConsoleLaunch.scss';
+import './GCP.scss';
 
 const launchInstanceCommand = (options) => {
   return `gcloud compute instances create ${options.image_name}-instance --image-project ${options.project_id} --image ${options.image_name}`;
@@ -20,6 +20,7 @@ const GCPConsoleLaunch = ({ text, image }) => {
           hoverTip="Copy"
           clickTip="Copied"
           ouiaId="gcp-launch-instance"
+          data-testid="gcp-launch-instance"
           variant="expansion"
           isReadOnly
         >

src/Components/ProvisioningWizard/steps/SourceMissing/GCPCreateImage.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ClipboardCopy, StackItem } from '@patternfly/react-core';
+import { imageProps } from '../../helpers';
+import './GCP.scss';
+
+const createImageCommand = (options) => {
+  return `gcloud compute images create ${options.image_name}-copy --source-image-project ${options.project_id} --source-image ${options.image_name}`;
+};
+
+const GCPCreateImage = ({ text, image }) => {
+  return (
+    <>
+      <StackItem>
+        <strong>{text}</strong>
+      </StackItem>
+      <StackItem isFilled>
+        <ClipboardCopy
+          className="custom-clipboard-copy"
+          hoverTip="Copy"
+          clickTip="Copied"
+          ouiaId="gcp-copy-image"
+          data-testid="gcp-copy-image"
+          variant="expansion"
+          isReadOnly
+        >
+          {createImageCommand(image.uploadStatus.options)}
+        </ClipboardCopy>
+      </StackItem>
+    </>
+  );
+};
+
+GCPCreateImage.propTypes = {
+  image: imageProps,
+  text: PropTypes.string,
+};
+
+export default GCPCreateImage;

src/Components/ProvisioningWizard/steps/SourceMissing/SourceMissing.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import SourceMissing from '.';
-import { render, screen } from '../../../../mocks/utils';
+import { render, screen, within } from '../../../../mocks/utils';
 import { awsImage, azureImage, gcpImage } from '../../../../mocks/fixtures/image.fixtures';
 
 describe('Source missing', () => {
@@ -89,10 +89,16 @@ describe('Source missing', () => {
       const headingElement = screen.getByText(/Launch with Google Cloud Console/i);
       expect(headingElement).toBeInTheDocument();
 
-      const element = screen.getByRole('textbox', { name: 'Copyable input' });
+      const launchImageBox = within(screen.getByTestId('gcp-launch-instance')).getByRole('textbox', { name: 'Copyable input' });
+      expect(launchImageBox).toHaveClass('pf-c-form-control');
+      expect(launchImageBox).toHaveAttribute('value', 'gcloud compute instances create cool-image-instance --image-project test --image cool-image');
 
-      expect(element).toHaveClass('pf-c-form-control');
-      expect(element).toHaveAttribute('value', 'gcloud compute instances create cool-image-instance --image-project test --image cool-image');
+      const copyImageBox = within(screen.getByTestId('gcp-copy-image')).getByRole('textbox', { name: 'Copyable input' });
+      expect(copyImageBox).toHaveClass('pf-c-form-control');
+      expect(copyImageBox).toHaveAttribute(
+        'value',
+        'gcloud compute images create cool-image-copy --source-image-project test --source-image cool-image'
+      );
     });
   });
 });