From 6436ad4482a46747d26d07cfa452740329d99f61 Mon Sep 17 00:00:00 2001
From: Sharon Gratch <sgratch@redhat.com>
Date: Wed, 3 Jan 2024 20:17:16 +0200
Subject: [PATCH] Enable displaying a HelpIcon next to the title of a
 DetailsItem

In case of a DetailsItem with info help text, support displaying a help
Icon (question mark) instead of the Patternfly default dashed underline.

This is required for adding tooltips with the same appearance for both Forms
(e.g. providers Create and credentials edit dialogs) and DescriptionLists
(e.g. providers credentials List view dialog).

Keeping the default mode as the default Patternfly mode - default dashed underline.

Signed-off-by: Sharon Gratch <sgratch@redhat.com>
---
 .../components/DetailsPage/DetailItem.tsx     | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/packages/forklift-console-plugin/src/modules/Providers/utils/components/DetailsPage/DetailItem.tsx b/packages/forklift-console-plugin/src/modules/Providers/utils/components/DetailsPage/DetailItem.tsx
index 3d43e086e..16c71efc5 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/utils/components/DetailsPage/DetailItem.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/utils/components/DetailsPage/DetailItem.tsx
@@ -15,6 +15,7 @@ import {
   Popover,
   Truncate,
 } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import Pencil from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
 
 /**
@@ -28,6 +29,7 @@ export const DetailsItem: React.FC<DetailsItemProps> = ({
   title,
   content,
   helpContent,
+  showHelpIconNextToTitle,
   moreInfoLabel,
   moreInfoLink,
   crumbs,
@@ -39,6 +41,7 @@ export const DetailsItem: React.FC<DetailsItemProps> = ({
         <DescriptionTitleWithHelp
           title={title}
           helpContent={helpContent}
+          showHelpIconNextToTitle={showHelpIconNextToTitle}
           moreInfoLabel={moreInfoLabel}
           moreInfoLink={moreInfoLink}
           crumbs={crumbs}
@@ -63,11 +66,20 @@ export const DetailsItem: React.FC<DetailsItemProps> = ({
 export const DescriptionTitleWithHelp: React.FC<{
   title: string;
   helpContent: ReactNode;
+  showHelpIconNextToTitle: boolean;
   moreInfoLabel?: string;
   moreInfoLink?: string;
   crumbs?: string[];
-}> = ({ title, helpContent, crumbs, moreInfoLabel = 'More info:', moreInfoLink }) => (
+}> = ({
+  title,
+  helpContent,
+  showHelpIconNextToTitle = false,
+  crumbs,
+  moreInfoLabel = 'More info:',
+  moreInfoLink,
+}) => (
   <DescriptionListTermHelpText>
+    {showHelpIconNextToTitle ? <label>{title} &nbsp;</label> : null}
     <Popover
       headerContent={<div>{title}</div>}
       bodyContent={
@@ -95,7 +107,17 @@ export const DescriptionTitleWithHelp: React.FC<{
         </Flex>
       }
     >
-      <DescriptionListTermHelpTextButton> {title} </DescriptionListTermHelpTextButton>
+      {showHelpIconNextToTitle ? (
+        <button
+          type="button"
+          onClick={(e) => e.preventDefault()}
+          className="pf-c-form__group-label-help"
+        >
+          <HelpIcon noVerticalAlign />
+        </button>
+      ) : (
+        <DescriptionListTermHelpTextButton> {title} </DescriptionListTermHelpTextButton>
+      )}
     </Popover>
   </DescriptionListTermHelpText>
 );
@@ -144,6 +166,8 @@ export const NonEditableContent: React.FC<{ content: ReactNode }> = ({ content }
  * @property {string} title - The title of the details item.
  * @property {ReactNode} content - The content of the details item.
  * @property {ReactNode} [helpContent] - The content to display in the help popover.
+ * @property {ReactNode} [showHelpIconNextToTitle] - if true, adding a help icon next to the title for displaying the help popover.
+ *    If false, show the default Patternfly dashed line under the title.
  * @property {string[]} [crumbs] - Breadcrumbs for the details item.
  * @property {Function} [onEdit] - Function to be called when the edit button is clicked.
  */
@@ -151,6 +175,7 @@ export type DetailsItemProps = {
   title: string;
   content: ReactNode;
   helpContent?: ReactNode;
+  showHelpIconNextToTitle?: boolean;
   moreInfoLabel?: string;
   moreInfoLink?: string;
   crumbs?: string[];