Bug 2148849: Make help text links work, in VM & DataSource details pages

locales/en/plugin__kubevirt-plugin.json

@@ -43,8 +43,7 @@
   "<0>Donuts chart represent current values.</0><1>Sparkline charts represent data over time</1>": "<0>Donuts chart represent current values.</0><1>Sparkline charts represent data over time</1>",
   "<0>Elapsed time</0> {t('{{minutes}}{{seconds}} seconds', {\n                seconds,\n                minutes: minutes ? `${minutes} minutes, ` : null,\n              })}": "<0>Elapsed time</0> {t('{{minutes}}{{seconds}} seconds', {\n                seconds,\n                minutes: minutes ? `${minutes} minutes, ` : null,\n              })}",
   "<0>Enter a name for the device to be assigned and select it from the dropdown menu. Click <2> Save</2>.<4></4> Click <7> + Add {type === HARDWARE_DEVICE_TYPE.GPUS ? 'GPU' : 'Host'} device </7> to add another devices.</0>": "<0>Enter a name for the device to be assigned and select it from the dropdown menu. Click <2> Save</2>.<4></4> Click <7> + Add {type === HARDWARE_DEVICE_TYPE.GPUS ? 'GPU' : 'Host'} device </7> to add another devices.</0>",
-  "<0>List of objects depended by this object. If ALL objects in the list have been deleted, this object will be garbage collected. If this object is managed by a controller, then an entry in this list will point to this controller, with the controller field set to true. There cannot be more than one managing controller.</0><1><0>{obj.kind}</0><1>metadata</1><2>ownerReferences</2></1>": "<0>List of objects depended by this object. If ALL objects in the list have been deleted, this object will be garbage collected. If this object is managed by a controller, then an entry in this list will point to this controller, with the controller field set to true. There cannot be more than one managing controller.</0><1><0>{obj.kind}</0><1>metadata</1><2>ownerReferences</2></1>",
-  "<0>List of objects depended by this object. If ALL objects in the list have been deleted, this object will be garbage collected. If this object is managed by a controller, then an entry in this list will point to this controller, with the controller field set to true. There cannot be more than one managing controller.</0><1><0>Template</0><1>metadata</1><2>ownerReferences</2></1>": "<0>List of objects depended by this object. If ALL objects in the list have been deleted, this object will be garbage collected. If this object is managed by a controller, then an entry in this list will point to this controller, with the controller field set to true. There cannot be more than one managing controller.</0><1><0>Template</0><1>metadata</1><2>ownerReferences</2></1>",
+  "<0>List of objects depended by this object. If ALL objects in the list have been deleted, this object will be garbage collected. If this object is managed by a controller, then an entry in this list will point to this controller, with the controller field set to true. There cannot be more than one managing controller.</0><1><0>{obj?.kind}</0><1>metadata</1><2>ownerReferences</2></1>": "<0>List of objects depended by this object. If ALL objects in the list have been deleted, this object will be garbage collected. If this object is managed by a controller, then an entry in this list will point to this controller, with the controller field set to true. There cannot be more than one managing controller.</0><1><0>{obj?.kind}</0><1>metadata</1><2>ownerReferences</2></1>",
   "<0>Phase</0> <2></2> {vmim?.status?.phase}": "<0>Phase</0> <2></2> {vmim?.status?.phase}",
   "<0>Policy</0> {vmi?.status?.migrationState?.migrationPolicyName ? (\n                <ResourceLink\n                  groupVersionKind={MigrationPolicyModelGroupVersionKind}\n                  name={vmi.status.migrationState.migrationPolicyName}\n                />\n              ) : (\n                <MutedTextSpan text=\"No MigrationPolicy\" />\n              )}": "<0>Policy</0> {vmi?.status?.migrationState?.migrationPolicyName ? (\n                <ResourceLink\n                  groupVersionKind={MigrationPolicyModelGroupVersionKind}\n                  name={vmi.status.migrationState.migrationPolicyName}\n                />\n              ) : (\n                <MutedTextSpan text=\"No MigrationPolicy\" />\n              )}",
   "<0>Started</0> {vmi?.status?.migrationState?.startTimestamp &&\n                dateTimeFormatter.format(new Date(vmi?.status?.migrationState?.startTimestamp))}": "<0>Started</0> {vmi?.status?.migrationState?.startTimestamp &&\n                dateTimeFormatter.format(new Date(vmi?.status?.migrationState?.startTimestamp))}",
@@ -488,7 +487,6 @@
   "Learn more about supported formats": "Learn more about supported formats",
   "Learn more about working with projects": "Learn more about working with projects",
   "Limitations": "Limitations",
-  "List of objects depended by this object. If ALL objects in the list have been deleted, this object will be garbage collected. If this object is managed by a controller, then an entry in this list will point to this controller, with the controller field set to true. There cannot be more than one managing controller.": "List of objects depended by this object. If ALL objects in the list have been deleted, this object will be garbage collected. If this object is managed by a controller, then an entry in this list will point to this controller, with the controller field set to true. There cannot be more than one managing controller.",
   "List of objects depended by this object. If ALL objects in the list have been deleted, this object will be garbage collected. If this object is managed by a controller, then an entry in this list will point to this controller, with the controller field set to true. There cannot be more than one managing controller.<1><0>VirtualMachineInstance</0><1>metadata</1><2>ownerReferences</2></1>": "List of objects depended by this object. If ALL objects in the list have been deleted, this object will be garbage collected. If this object is managed by a controller, then an entry in this list will point to this controller, with the controller field set to true. There cannot be more than one managing controller.<1><0>VirtualMachineInstance</0><1>metadata</1><2>ownerReferences</2></1>",
   "Live migration": "Live migration",
   "Live migration network": "Live migration network",

src/utils/components/DescriptionItem/DescriptionItem.scss

@@ -2,3 +2,7 @@
   justify-content: space-between;
   flex: 1;
 }
+
+.margin-top {
+  margin-top: var(--pf-global--spacer--md);
+}

src/utils/components/DescriptionItem/DescriptionItemHeader.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import {
@@ -37,15 +36,17 @@ export const DescriptionItemHeader: React.FC<DescriptionItemHeaderProps> = ({
             {moreInfoURL && (
               <>
                 {t('More info: ')}
-                <Link to={moreInfoURL}>{moreInfoURL}</Link>
+                <a href={moreInfoURL}>{moreInfoURL}</a>
               </>
             )}
             {breadcrumb && (
-              <Breadcrumb>
-                {breadcrumb.split('.').map((item) => (
-                  <BreadcrumbItem key={item}>{item}</BreadcrumbItem>
-                ))}
-              </Breadcrumb>
+              <div className="margin-top">
+                <Breadcrumb>
+                  {breadcrumb.split('.').map((item) => (
+                    <BreadcrumbItem key={item}>{item}</BreadcrumbItem>
+                  ))}
+                </Breadcrumb>
+              </div>
             )}
           </>
         }

src/utils/components/OwnerDetailsItem/OwnerDetailsItem.tsx

@@ -37,7 +37,7 @@ const OwnerDetailsItem: React.FC<OwnerDetailsItemProps> = ({ obj }) => {
                 controller field set to true. There cannot be more than one managing controller.
               </div>
               <Breadcrumb className="margin-top">
-                <BreadcrumbItem>{obj.kind}</BreadcrumbItem>
+                <BreadcrumbItem>{obj?.kind}</BreadcrumbItem>
                 <BreadcrumbItem>metadata</BreadcrumbItem>
                 <BreadcrumbItem>ownerReferences</BreadcrumbItem>
               </Breadcrumb>

src/views/templates/details/tabs/details/components/TemplateDetailsLeftGrid.tsx

@@ -6,9 +6,9 @@ import DescriptionItem from 'src/views/templates/details/tabs/details/components
 import Labels from 'src/views/templates/details/tabs/details/components/Labels';
 import Name from 'src/views/templates/details/tabs/details/components/Name';
 import Namespace from 'src/views/templates/details/tabs/details/components/Namespace';
-import Owner from 'src/views/templates/details/tabs/details/components/Owner';
 import { TemplateDetailsGridProps } from 'src/views/templates/details/tabs/details/TemplateDetailsPage';
 
+import OwnerDetailsItem from '@kubevirt-utils/components/OwnerDetailsItem/OwnerDetailsItem';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { getTemplateVirtualMachineObject } from '@kubevirt-utils/resources/template';
 import { getMachineType } from '@kubevirt-utils/resources/vm';
@@ -44,7 +44,7 @@ const TemplateDetailsLeftGrid: React.FC<TemplateDetailsGridProps> = ({ template
       <BootMethod template={template} />
       <BaseTemplate template={template} />
       <CreatedAt template={template} />
-      <Owner template={template} />
+      <OwnerDetailsItem obj={template} />
     </DescriptionList>
   );
 };

src/views/virtualmachines/details/tabs/details/components/VirtualMachineDescriptionItem/VirtualMachineDescriptionItem.scss

@@ -2,3 +2,7 @@
   justify-content: space-between;
   flex: 1;
 }
+
+.margin-top {
+  margin-top: var(--pf-global--spacer--md);
+}

src/views/virtualmachines/details/tabs/details/components/VirtualMachineDescriptionItem/VirtualMachineDescriptionItem.tsx

@@ -1,20 +1,15 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
 
+import { DescriptionItemHeader } from '@kubevirt-utils/components/DescriptionItem/DescriptionItemHeader';
 import MutedTextSpan from '@kubevirt-utils/components/MutedTextSpan/MutedTextSpan';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import {
-  Breadcrumb,
-  BreadcrumbItem,
   Button,
   DescriptionListDescription,
   DescriptionListGroup,
-  DescriptionListTerm,
   DescriptionListTermHelpText,
-  DescriptionListTermHelpTextButton,
   Flex,
   FlexItem,
-  Popover,
 } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
@@ -52,41 +47,6 @@ const VirtualMachineDescriptionItem: React.FC<VirtualMachineDescriptionItemProps
   const { t } = useKubevirtTranslation();
   const NotAvailable = <MutedTextSpan text={t('Not available')} />;
 
-  const getItemHeader = () => {
-    if (isPopover && bodyContent) {
-      return (
-        <Popover
-          headerContent={descriptionHeader}
-          bodyContent={
-            <>
-              {bodyContent}
-              {moreInfoURL && (
-                <>
-                  {t('More info: ')}
-                  <Link to={moreInfoURL}>{moreInfoURL}</Link>
-                </>
-              )}
-              {breadcrumb && (
-                <Breadcrumb>
-                  {breadcrumb.split('.').map((item) => (
-                    <BreadcrumbItem key={item}>{item}</BreadcrumbItem>
-                  ))}
-                </Breadcrumb>
-              )}
-            </>
-          }
-        >
-          <DescriptionListTermHelpTextButton>
-            {' '}
-            {descriptionHeader}{' '}
-          </DescriptionListTermHelpTextButton>
-        </Popover>
-      );
-    }
-
-    return <DescriptionListTerm>{descriptionHeader}</DescriptionListTerm>;
-  };
-
   const description = (
     <Button
       type="button"
@@ -114,7 +74,15 @@ const VirtualMachineDescriptionItem: React.FC<VirtualMachineDescriptionItemProps
             default: editOnTitleJustify ? 'justifyContentSpaceBetween' : 'justifyContentFlexStart',
           }}
         >
-          <FlexItem>{getItemHeader()}</FlexItem>
+          <FlexItem>
+            <DescriptionItemHeader
+              isPopover={isPopover}
+              bodyContent={bodyContent}
+              moreInfoURL={moreInfoURL}
+              breadcrumb={breadcrumb}
+              descriptionHeader={descriptionHeader}
+            />
+          </FlexItem>
           {isEdit && showEditOnTitle && (
             <FlexItem>
               <Button

src/views/virtualmachines/details/tabs/details/components/grid/leftGrid/VirtualMachineDetailsLeftGrid.tsx

@@ -15,7 +15,7 @@ import GuestAgentIsRequiredText from '@kubevirt-utils/components/GuestAgentIsReq
 import { LabelsModal } from '@kubevirt-utils/components/LabelsModal/LabelsModal';
 import { useModal } from '@kubevirt-utils/components/ModalProvider/ModalProvider';
 import MutedTextSpan from '@kubevirt-utils/components/MutedTextSpan/MutedTextSpan';
-import OwnerReferences from '@kubevirt-utils/components/OwnerReferences/OwnerReferences';
+import OwnerDetailsItem from '@kubevirt-utils/components/OwnerDetailsItem/OwnerDetailsItem';
 import StartPauseModal from '@kubevirt-utils/components/StartPauseModal/StartPauseModal';
 import Timestamp from '@kubevirt-utils/components/Timestamp/Timestamp';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
@@ -308,16 +308,7 @@ const VirtualMachineDetailsLeftGrid: React.FC<VirtualMachineDetailsLeftGridProps
           )}
           breadcrumb="VirtualMachine.metadata.creationTimestamp"
         />
-        <VirtualMachineDescriptionItem
-          descriptionData={<OwnerReferences obj={vm} />}
-          descriptionHeader={t('Owner')}
-          isPopover
-          // body-content text copied from: https://github.com/kubevirt-ui/kubevirt-api/blob/main/containerized-data-importer/models/V1ObjectMeta.ts#L110
-          bodyContent={t(
-            'List of objects depended by this object. If ALL objects in the list have been deleted, this object will be garbage collected. If this object is managed by a controller, then an entry in this list will point to this controller, with the controller field set to true. There cannot be more than one managing controller.',
-          )}
-          breadcrumb="VirtualMachine.metadata.ownerReferences"
-        />
+        <OwnerDetailsItem obj={vm} />
       </DescriptionList>
     </GridItem>
   );