From 74c352e235ca0b4dde302dd11fc8d60c595c42fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anna=20V=C3=ADtov=C3=A1?= <avitova@redhat.com>
Date: Wed, 11 Dec 2024 13:30:53 +0200
Subject: [PATCH] Wizard: Add popover to suggest importing on-prem

In order to hint users that on-premise blueprints are accepted in
import, we are adding a popover with a message.
---
 .../Blueprints/ImportBlueprintModal.tsx       | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/Components/Blueprints/ImportBlueprintModal.tsx b/src/Components/Blueprints/ImportBlueprintModal.tsx
index 7f62d38b..290b7d3e 100644
--- a/src/Components/Blueprints/ImportBlueprintModal.tsx
+++ b/src/Components/Blueprints/ImportBlueprintModal.tsx
@@ -11,8 +11,10 @@ import {
   HelperTextItem,
   Modal,
   ModalVariant,
+  Popover,
 } from '@patternfly/react-core';
 import { DropEvent } from '@patternfly/react-core/dist/esm/helpers';
+import { HelpIcon } from '@patternfly/react-icons';
 import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import { useNavigate } from 'react-router-dom';
 import { parse } from 'toml';
@@ -140,7 +142,28 @@ export const ImportBlueprintModal: React.FunctionComponent<
     <Modal
       variant={ModalVariant.medium}
       isOpen={isOpen}
-      title={'Import pipeline'}
+      title={
+        <>
+          Import pipeline
+          <Popover
+            bodyContent={
+              <div>
+                You can import the blueprints you created by using the Red Hat
+                image builder into Insights images to create customized images.
+              </div>
+            }
+          >
+            <Button
+              variant="plain"
+              aria-label="About import"
+              className="pf-v5-u-pl-sm"
+              isInline
+            >
+              <HelpIcon />
+            </Button>
+          </Popover>
+        </>
+      }
       onClose={onImportClose}
       ouiaId="import-blueprint-modal"
     >
@@ -175,12 +198,12 @@ export const ImportBlueprintModal: React.FunctionComponent<
                 }
               >
                 {isRejected
-                  ? 'Must be a valid Blueprint JSON file no larger than 25 KB'
+                  ? 'Must be a valid Blueprint JSON/TOML file no larger than 25 KB'
                   : isInvalidFormat
                   ? 'Not compatible with the blueprints format.'
                   : isOnPrem
                   ? 'Importing on-premises blueprints is currently in beta. Results may vary.'
-                  : 'Upload a JSON file'}
+                  : 'Upload your blueprint file. Supported formats: JSON, TOML.'}
               </HelperTextItem>
             </HelperText>
           </FormHelperText>