add env var to field details popover (#3454)

opendatahub-io · Nov 7, 2024 · 2350d91 · 2350d91
1 parent 8b19130
commit 2350d91
Showing 1 changed file with 31 additions and 9 deletions.
diff --git 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)}