From 560abcf99234557068e4c16c6ea7b54be8511019 Mon Sep 17 00:00:00 2001
From: Christian Vogt <cvogt@redhat.com>
Date: Thu, 7 Nov 2024 16:12:59 -0500
Subject: [PATCH] add env var to field details popover

---
 .../fields/DataFormFieldGroup.tsx             | 40 ++++++++++++++-----
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/frontend/src/concepts/connectionTypes/fields/DataFormFieldGroup.tsx b/frontend/src/concepts/connectionTypes/fields/DataFormFieldGroup.tsx
index 022efaba0f..f575f15152 100644
--- a/frontend/src/concepts/connectionTypes/fields/DataFormFieldGroup.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/DataFormFieldGroup.tsx
@@ -1,5 +1,13 @@
 import * as React from 'react';
-import { FormGroup, GenerateId, Popover } from '@patternfly/react-core';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  FormGroup,
+  GenerateId,
+  Popover,
+} from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { ConnectionTypeDataField } from '~/concepts/connectionTypes/types';
 import DashboardPopupIconButton from '~/concepts/dashboard/DashboardPopupIconButton';
@@ -19,14 +27,28 @@ const DataFormFieldGroup: React.FC<Props> = ({ field, children }): React.ReactNo
         // do not mark read only fields as required
         isRequired={field.required && !field.properties.defaultReadOnly}
         labelIcon={
-          field.description ? (
-            <Popover bodyContent={field.description}>
-              <DashboardPopupIconButton
-                icon={<OutlinedQuestionCircleIcon />}
-                aria-label="More info"
-              />
-            </Popover>
-          ) : undefined
+          <Popover
+            headerContent="Field details"
+            bodyContent={
+              <DescriptionList isCompact>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>Environment variable</DescriptionListTerm>
+                  <DescriptionListDescription>{field.envVar}</DescriptionListDescription>
+                </DescriptionListGroup>
+                {field.description ? (
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>Description</DescriptionListTerm>
+                    <DescriptionListDescription>{field.description}</DescriptionListDescription>
+                  </DescriptionListGroup>
+                ) : null}
+              </DescriptionList>
+            }
+          >
+            <DashboardPopupIconButton
+              icon={<OutlinedQuestionCircleIcon />}
+              aria-label="More info"
+            />
+          </Popover>
         }
       >
         {children(id)}