From 35ee200b38f663970b1aa69241ea379c71d35164 Mon Sep 17 00:00:00 2001 From: Hilda Stastna Date: Tue, 29 Nov 2022 16:13:17 +0100 Subject: [PATCH] Bug 2148849: Make help text links work, in VM & DataSource details pages Redirect to proper websites when clicking on the help/popover text links, in VM and DataSource Details tabs. Improve the design, incorrect aligning of the text, breadcrumbs, in those popovers. Fixes https://bugzilla.redhat.com/show_bug.cgi?id=2148849 --- locales/en/plugin__kubevirt-plugin.json | 4 +- .../DescriptionItem/DescriptionItem.scss | 4 ++ .../DescriptionItem/DescriptionItemHeader.tsx | 15 ++--- .../OwnerDetailsItem/OwnerDetailsItem.tsx | 2 +- .../details/tabs/details/components/Owner.tsx | 57 ------------------- .../components/TemplateDetailsLeftGrid.tsx | 4 +- .../VirtualMachineDescriptionItem.scss | 4 ++ .../VirtualMachineDescriptionItem.tsx | 52 ++++------------- .../VirtualMachineDetailsLeftGrid.tsx | 13 +---- 9 files changed, 32 insertions(+), 123 deletions(-) delete mode 100644 src/views/templates/details/tabs/details/components/Owner.tsx diff --git a/locales/en/plugin__kubevirt-plugin.json b/locales/en/plugin__kubevirt-plugin.json index ed273086d..bcd82554a 100644 --- a/locales/en/plugin__kubevirt-plugin.json +++ b/locales/en/plugin__kubevirt-plugin.json @@ -43,8 +43,7 @@ "<0>Donuts chart represent current values.<1>Sparkline charts represent data over time": "<0>Donuts chart represent current values.<1>Sparkline charts represent data over time", "<0>Elapsed time {t('{{minutes}}{{seconds}} seconds', {\n seconds,\n minutes: minutes ? `${minutes} minutes, ` : null,\n })}": "<0>Elapsed time {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.<4> Click <7> + Add {type === HARDWARE_DEVICE_TYPE.GPUS ? 'GPU' : 'Host'} device to add another devices.": "<0>Enter a name for the device to be assigned and select it from the dropdown menu. Click <2> Save.<4> Click <7> + Add {type === HARDWARE_DEVICE_TYPE.GPUS ? 'GPU' : 'Host'} device to add another devices.", - "<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.<1><0>{obj.kind}<1>metadata<2>ownerReferences": "<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.<1><0>{obj.kind}<1>metadata<2>ownerReferences", - "<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.<1><0>Template<1>metadata<2>ownerReferences": "<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.<1><0>Template<1>metadata<2>ownerReferences", + "<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.<1><0>{obj?.kind}<1>metadata<2>ownerReferences": "<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.<1><0>{obj?.kind}<1>metadata<2>ownerReferences", "<0>Phase <2> {vmim?.status?.phase}": "<0>Phase <2> {vmim?.status?.phase}", "<0>Policy {vmi?.status?.migrationState?.migrationPolicyName ? (\n \n ) : (\n \n )}": "<0>Policy {vmi?.status?.migrationState?.migrationPolicyName ? (\n \n ) : (\n \n )}", "<0>Started {vmi?.status?.migrationState?.startTimestamp &&\n dateTimeFormatter.format(new Date(vmi?.status?.migrationState?.startTimestamp))}": "<0>Started {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<1>metadata<2>ownerReferences": "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<1>metadata<2>ownerReferences", "Live migration": "Live migration", "Live migration network": "Live migration network", diff --git a/src/utils/components/DescriptionItem/DescriptionItem.scss b/src/utils/components/DescriptionItem/DescriptionItem.scss index 6ad2dad79..b907a6acc 100644 --- a/src/utils/components/DescriptionItem/DescriptionItem.scss +++ b/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); +} diff --git a/src/utils/components/DescriptionItem/DescriptionItemHeader.tsx b/src/utils/components/DescriptionItem/DescriptionItemHeader.tsx index 05d2fae25..ed4d0a9d0 100644 --- a/src/utils/components/DescriptionItem/DescriptionItemHeader.tsx +++ b/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 = ({ {moreInfoURL && ( <> {t('More info: ')} - {moreInfoURL} + {moreInfoURL} )} {breadcrumb && ( - - {breadcrumb.split('.').map((item) => ( - {item} - ))} - +
+ + {breadcrumb.split('.').map((item) => ( + {item} + ))} + +
)} } diff --git a/src/utils/components/OwnerDetailsItem/OwnerDetailsItem.tsx b/src/utils/components/OwnerDetailsItem/OwnerDetailsItem.tsx index 1cbd8efbe..c6cd5060e 100644 --- a/src/utils/components/OwnerDetailsItem/OwnerDetailsItem.tsx +++ b/src/utils/components/OwnerDetailsItem/OwnerDetailsItem.tsx @@ -37,7 +37,7 @@ const OwnerDetailsItem: React.FC = ({ obj }) => { controller field set to true. There cannot be more than one managing controller. - {obj.kind} + {obj?.kind} metadata ownerReferences diff --git a/src/views/templates/details/tabs/details/components/Owner.tsx b/src/views/templates/details/tabs/details/components/Owner.tsx deleted file mode 100644 index b095d4279..000000000 --- a/src/views/templates/details/tabs/details/components/Owner.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import * as React from 'react'; -import { Trans } from 'react-i18next'; - -import OwnerReferences from '@kubevirt-utils/components/OwnerReferences/OwnerReferences'; -import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation'; -import { V1Template } from '@kubevirt-utils/models'; -import { - Breadcrumb, - BreadcrumbItem, - DescriptionListDescription, - DescriptionListGroup, - DescriptionListTermHelpText, - DescriptionListTermHelpTextButton, - Popover, -} from '@patternfly/react-core'; - -type OwnerProps = { - template: V1Template; -}; - -const Owner: React.FC = ({ template }) => { - const { t } = useKubevirtTranslation(); - - return ( - - - -
- 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. -
- - Template - metadata - ownerReferences - - - } - > - {t('Owner')} - - - - - - - ); -}; - -export default Owner; diff --git a/src/views/templates/details/tabs/details/components/TemplateDetailsLeftGrid.tsx b/src/views/templates/details/tabs/details/components/TemplateDetailsLeftGrid.tsx index 50ac12e11..ededb2ae4 100644 --- a/src/views/templates/details/tabs/details/components/TemplateDetailsLeftGrid.tsx +++ b/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 = ({ template - + ); }; diff --git a/src/views/virtualmachines/details/tabs/details/components/VirtualMachineDescriptionItem/VirtualMachineDescriptionItem.scss b/src/views/virtualmachines/details/tabs/details/components/VirtualMachineDescriptionItem/VirtualMachineDescriptionItem.scss index 8964b0aa4..3471c5585 100644 --- a/src/views/virtualmachines/details/tabs/details/components/VirtualMachineDescriptionItem/VirtualMachineDescriptionItem.scss +++ b/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); +} diff --git a/src/views/virtualmachines/details/tabs/details/components/VirtualMachineDescriptionItem/VirtualMachineDescriptionItem.tsx b/src/views/virtualmachines/details/tabs/details/components/VirtualMachineDescriptionItem/VirtualMachineDescriptionItem.tsx index 749142739..b1aba3b08 100644 --- a/src/views/virtualmachines/details/tabs/details/components/VirtualMachineDescriptionItem/VirtualMachineDescriptionItem.tsx +++ b/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; - const getItemHeader = () => { - if (isPopover && bodyContent) { - return ( - - {bodyContent} - {moreInfoURL && ( - <> - {t('More info: ')} - {moreInfoURL} - - )} - {breadcrumb && ( - - {breadcrumb.split('.').map((item) => ( - {item} - ))} - - )} - - } - > - - {' '} - {descriptionHeader}{' '} - - - ); - } - - return {descriptionHeader}; - }; - const description = (