Merge pull request #8793 from pcbailey/use-field-level-help-component…

…-in-kubevirt-ui Bug 1944761: Use FieldLevelHelp component instead of Popover
openshift · May 1, 2021 · ed8d3df · ed8d3df
2 parents fcdd6a9 + fc0d396
commit ed8d3df
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 38 deletions.
diff --git a/frontend/packages/kubevirt-plugin/locales/en/kubevirt-plugin.json b/frontend/packages/kubevirt-plugin/locales/en/kubevirt-plugin.json
@@ -620,12 +620,10 @@
   "FileSystems": "FileSystems",
   "No File Systems Found": "No File Systems Found",
   "File Systems": "File Systems",
-  "File systems description": "File systems description",
   "The following information regarding how the disks are partitioned is provided by the guest agent.": "The following information regarding how the disks are partitioned is provided by the guest agent.",
   "VM Disks List": "VM Disks List",
   "Content": "Content",
   "Drive": "Drive",
-  "Disks description": "Disks description",
   "The following information is provided by the OpenShift Virtualization operator.": "The following information is provided by the OpenShift Virtualization operator.",
   "VM Nics List": "VM Nics List",
   "Snapshot Details": "Snapshot Details",

diff --git a/frontend/packages/kubevirt-plugin/src/components/vm-disks/guest-agent-file-systems.tsx b/frontend/packages/kubevirt-plugin/src/components/vm-disks/guest-agent-file-systems.tsx
@@ -4,9 +4,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Table, TableData, TableRow } from '@console/internal/components/factory';
-import { humanizeBinaryBytes } from '@console/internal/components/utils';
-import { Button, Popover } from '@patternfly/react-core';
-import { QuestionCircleIcon } from '@patternfly/react-icons';
+import { FieldLevelHelp, humanizeBinaryBytes } from '@console/internal/components/utils';
 import { sortable } from '@patternfly/react-table';
 
 import { useGuestAgentInfo } from '../../hooks/use-guest-agent-info';
@@ -123,21 +121,11 @@ export const FileSystemsList: React.FC<FileSystemsListProps> = ({ vmi, vmStatusB
     <div className="kubevirt-vm-details__file-systems">
       <h3 id="file-systems-header">
         {t('kubevirt-plugin~File Systems')}
-        <Popover
-          aria-label={t('kubevirt-plugin~File systems description')}
-          position="top"
-          bodyContent={
-            <>
-              {t(
-                'kubevirt-plugin~The following information regarding how the disks are partitioned is provided by the guest agent.',
-              )}
-            </>
-          }
-        >
-          <Button variant="plain">
-            <QuestionCircleIcon />
-          </Button>
-        </Popover>
+        <FieldLevelHelp>
+          {t(
+            'kubevirt-plugin~The following information regarding how the disks are partitioned is provided by the guest agent.',
+          )}
+        </FieldLevelHelp>
       </h3>
       {body()}
     </div>

diff --git a/frontend/packages/kubevirt-plugin/src/components/vm-disks/vm-disks.tsx b/frontend/packages/kubevirt-plugin/src/components/vm-disks/vm-disks.tsx
@@ -4,13 +4,11 @@ import { useTranslation } from 'react-i18next';
 
 import { MultiListPage, RowFunction, Table } from '@console/internal/components/factory';
 import { useSafetyFirst } from '@console/internal/components/safety-first';
-import { FirehoseResult } from '@console/internal/components/utils';
+import { FieldLevelHelp, FirehoseResult } from '@console/internal/components/utils';
 import { PersistentVolumeClaimModel, TemplateModel } from '@console/internal/models';
 import { K8sResourceKind, TemplateKind } from '@console/internal/module/k8s';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { dimensifyHeader, getNamespace } from '@console/shared';
-import { Button, Popover } from '@patternfly/react-core';
-import { QuestionCircleIcon } from '@patternfly/react-icons';
 import { sortable } from '@patternfly/react-table';
 
 import { CombinedDiskFactory } from '../../k8s/wrapper/vm/combined-disk';
@@ -124,21 +122,11 @@ export const VMDisksTable: React.FC<React.ComponentProps<typeof Table> | VMDisks
         <>
           <h3>
             {t('kubevirt-plugin~Disks')}
-            <Popover
-              aria-label={t('kubevirt-plugin~Disks description')}
-              position="top"
-              bodyContent={
-                <>
-                  {t(
-                    'kubevirt-plugin~The following information is provided by the OpenShift Virtualization operator.',
-                  )}
-                </>
-              }
-            >
-              <Button variant="plain">
-                <QuestionCircleIcon />
-              </Button>
-            </Popover>
+            <FieldLevelHelp>
+              {t(
+                'kubevirt-plugin~The following information is provided by the OpenShift Virtualization operator.',
+              )}
+            </FieldLevelHelp>
           </h3>
         </>
       )}