From ebdfbbf57ddc127f71746687a2aa09444151e414 Mon Sep 17 00:00:00 2001
From: Jacob Kozol <jacobdkozol@gmail.com>
Date: Mon, 31 May 2021 12:30:34 +0200
Subject: [PATCH] ImagesTable: add gcp info

When a gcp image is successfully uploaded the user needs to know the
project id, image name, and account the image is shared with. These are
now displayed in a popover accessible from the status section of the
images table.
---
 src/Components/ImagesTable/ImageLink.js       | 38 ++++++++++++++++++-
 .../ImagesTable/ImagesTable.test.js           |  6 ++-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/Components/ImagesTable/ImageLink.js b/src/Components/ImagesTable/ImageLink.js
index ae0f4985..a4c052f6 100644
--- a/src/Components/ImagesTable/ImageLink.js
+++ b/src/Components/ImagesTable/ImageLink.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@patternfly/react-core';
+import { Button, TextContent, Text, TextVariants, Popover } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 
 const ImageLink = (props) => {
@@ -41,6 +41,42 @@ const ImageLink = (props) => {
                         View uploaded image
                 </Button>
             );
+        } else if (uploadStatus.type === 'gcp') {
+            return (
+                <Popover
+                    aria-label="Popover with google cloud platform image details"
+                    maxWidth='30rem'
+                    headerContent={ 'GCP image details' }
+                    bodyContent={ <TextContent>
+                        <Text component={ TextVariants.p }>
+                            To use an Image Builder created Google Cloud Platform (GCP) image in your project,
+                            specify the project ID and image name in your templates and configurations.
+                        </Text>
+                        <Text>
+                            <strong>Project ID</strong>
+                            <br />
+                            {uploadStatus.options.project_id}
+                        </Text>
+                        <Text>
+                            <strong>Image Name</strong>
+                            <br />
+                            {uploadStatus.options.image_name}
+                        </Text>
+                        <Text>
+                            <strong>Shared with</strong>
+                            <br />
+                            {/* the account the image is shared with is stored in the form type:account so this extracts the account */}
+                            {props.uploadOptions.share_with_accounts[0].split(':')[1]}
+                        </Text>
+                    </TextContent> }>
+                    <Button
+                        component="a"
+                        target="_blank"
+                        variant="link">
+                            Image details
+                    </Button>
+                </Popover>
+            );
         }
     }
 
diff --git a/src/test/Components/ImagesTable/ImagesTable.test.js b/src/test/Components/ImagesTable/ImagesTable.test.js
index 2ddeb980..35705188 100644
--- a/src/test/Components/ImagesTable/ImagesTable.test.js
+++ b/src/test/Components/ImagesTable/ImagesTable.test.js
@@ -183,7 +183,11 @@ const store = {
                             image_type: 'vhd',
                             upload_request: {
                                 type: 'gcp',
-                                options: {}
+                                options: {
+                                    share_with_accounts: [
+                                        'serviceAccount:test@email.com'
+                                    ]
+                                }
                             }
                         }
                     ],