Skip to content

Commit

Permalink
Replace all PF3 Tooltips that are using the React Component with PF4
Browse files Browse the repository at this point in the history 
The workaround we were using for Tooltips to work with disabled buttons
does not work anymore.
Wrap disabled elements with a span when the these are children of a
tooltip.
See: patternfly/patternfly-react#1894

The remaining PF3 tooltips in non React pages were reworked so that they look like PF4.

Closes #14195
Co-authored-by: Garrett LeSage <[email protected]>
  • Loading branch information
@KKoukiou
KKoukiou authored Jun 15, 2020
1 parent f6697a9 commit acb44c6
Show file tree
Hide file tree
Showing 30 changed files with 187 additions and 190 deletions.
19 changes: 9 additions & 10 deletions pkg/kdump/kdump-view.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@ import cockpit from "cockpit";

import React from "react";
import { OnOffSwitch } from "cockpit-components-onoff.jsx";
import { OverlayTrigger, Tooltip } from "patternfly-react";
import { Button } from "@patternfly/react-core";
import { Button, Tooltip, TooltipPosition } from "@patternfly/react-core";

import * as Select from "cockpit-components-select.jsx";
import { show_modal_dialog } from "cockpit-components-dialog.jsx";
Expand Down Expand Up @@ -453,20 +452,20 @@ export class KdumpPage extends React.Component {
if (this.props.reservedMemory == 0) {
const tooltip = _("No memory reserved. Append a crashkernel option to the kernel command line (e.g. in /etc/default/grub) to reserve memory at boot time. Example: crashkernel=512M");
serviceHint = (
<OverlayTrigger overlay={ <Tooltip id="tip-service">{tooltip}</Tooltip> } placement="bottom">
<Tooltip id="tip-service" content={tooltip} position={TooltipPosition.bottom}>
<span className="popover-ct-kdump fa fa-lg fa-info-circle" />
</OverlayTrigger>
</Tooltip>
);
}
kdumpServiceDetails = <button role="link" className="popover-ct-kdump link-button" onClick={this.handleServiceDetailsClick}>{serviceDescription}{serviceHint}</button>;
} else if (this.props.kdumpStatus && !this.props.kdumpStatus.installed) {
const tooltip = _("Kdump service not installed. Please ensure package kexec-tools is installed.");
kdumpServiceDetails = (
<OverlayTrigger overlay={ <Tooltip id="tip-service">{tooltip}</Tooltip> } placement="bottom">
<Tooltip id="tip-service" content={tooltip} position={TooltipPosition.bottom}>
<button className="popover-ct-kdump link-button">
<span className="fa fa-lg fa-info-circle" />
</button>
</OverlayTrigger>
</Tooltip>
);
}
var serviceWaiting;
Expand All @@ -483,11 +482,11 @@ export class KdumpPage extends React.Component {
} else {
const tooltip = _("Test is only available while the kdump service is running.");
testButton = (
<OverlayTrigger overlay={ <Tooltip id="tip-test">{tooltip}</Tooltip> } placement="top">
<Tooltip id="tip-test" content={tooltip}>
<Button variant="secondary" isDisabled>
{_("Test Configuration")}
</Button>
</OverlayTrigger>
</Tooltip>
);
}
const tooltip_info = _("This will test the kdump configuration by crashing the kernel.");
Expand All @@ -511,9 +510,9 @@ export class KdumpPage extends React.Component {
<div role="group">
{testButton}
<button className="popover-ct-kdump link-button">
<OverlayTrigger overlay={ <Tooltip id="tip-test-info">{tooltip_info}</Tooltip> } placement="top">
<Tooltip id="tip-test-info" content={tooltip_info}>
<span className="fa fa-lg fa-info-circle" />
</OverlayTrigger>
</Tooltip>
</button>
</div>
</form>
Expand Down
9 changes: 4 additions & 5 deletions pkg/lib/cockpit-components-privileged.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,7 @@
import React from 'react';
import PropTypes from 'prop-types';

import { Button } from '@patternfly/react-core';
import { OverlayTrigger, Tooltip } from 'patternfly-react';
import { Button, Tooltip, TooltipPosition } from '@patternfly/react-core';

import cockpit from "cockpit";

Expand All @@ -37,10 +36,10 @@ export function Privileged({ excuse, allowed, placement, tooltipId, children })
let contents = <span id={allowed ? null : tooltipId}>{ children }</span>;
if (!allowed) {
contents = (
<OverlayTrigger placement={ placement || "top" }
overlay={ <Tooltip id={ tooltipId + "_tooltip" }>{ excuse }</Tooltip> }>
<Tooltip position={ placement || TooltipPosition.top} id={ tooltipId + "_tooltip" }
content={ excuse }>
{ contents }
</OverlayTrigger>);
</Tooltip>);
}
return contents;
}
Expand Down
2 changes: 1 addition & 1 deletion pkg/lib/patternfly-4-overrides.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,4 @@
/* Helper mod to center pf-c-nav__tertiary when it wraps */
.ct-m-nav__tertiary-center {
justify-content: center;
}
}
23 changes: 11 additions & 12 deletions pkg/machines/components/create-vm-dialog/createVmDialog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@

import React from 'react';
import PropTypes from 'prop-types';
import { FormGroup, HelpBlock, Modal, OverlayTrigger, Tooltip, TypeAheadSelect } from 'patternfly-react';
import { Button } from '@patternfly/react-core';
import { FormGroup, HelpBlock, Modal, TypeAheadSelect } from 'patternfly-react';
import { Button, Tooltip, TooltipPosition } from '@patternfly/react-core';

import cockpit from 'cockpit';
import { MachinesConnectionSelector } from '../machinesConnectionSelector.jsx';
Expand Down Expand Up @@ -404,9 +404,9 @@ const UnattendedRow = ({ validationFailed, unattendedDisabled, unattendedInstall
);
if (unattendedDisabled) {
unattendedInstallationCheckbox = (
<OverlayTrigger overlay={ <Tooltip id='os-unattended-installation-tooltip'>{ _("The selected Operating System does not support unattended installation") }</Tooltip> } placement='left'>
<Tooltip id='os-unattended-installation-tooltip' content={_("The selected Operating System does not support unattended installation")} position={TooltipPosition.left}>
{unattendedInstallationCheckbox}
</OverlayTrigger>
</Tooltip>
);
}

Expand Down Expand Up @@ -825,9 +825,11 @@ class CreateVmModal extends React.Component {
);
if (this.state.unattendedInstallation) {
startVmCheckbox = (
<OverlayTrigger overlay={ <Tooltip id='virt-install-not-available-tooltip'>{ _("Setting the user passwords for unattended installation requires starting the VM when creating it") }</Tooltip> } placement='left'>
<Tooltip id='virt-install-not-available-tooltip'
position={TooltipPosition.left}
content={_("Setting the user passwords for unattended installation requires starting the VM when creating it")}>
{startVmCheckbox}
</OverlayTrigger>
</Tooltip>
);
}

Expand Down Expand Up @@ -1010,21 +1012,18 @@ export class CreateVmAction extends React.Component {
testdata={testdata}
id={this.props.mode == 'create' ? 'create-new-vm' : 'import-vm-disk'}
variant='secondary'
style={!this.state.virtInstallAvailable ? { pointerEvents: 'none' } : null} // Fixes OverlayTrigger not showing up
onClick={this.open}>
{this.props.mode == 'create' ? _("Create VM") : _("Import VM")}
</Button>
);
if (!this.state.virtInstallAvailable)
createButton = (
<OverlayTrigger overlay={
<Tooltip id='virt-install-not-available-tooltip'>
{_("virt-install package needs to be installed on the system in order to create new VMs")}
</Tooltip>} placement='top'>
<Tooltip id='virt-install-not-available-tooltip'
content={_("virt-install package needs to be installed on the system in order to create new VMs")}>
<span>
{createButton}
</span>
</OverlayTrigger>
</Tooltip>
);

return (
Expand Down
17 changes: 7 additions & 10 deletions pkg/machines/components/deleteDialog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@

import cockpit from 'cockpit';
import React from 'react';
import { Modal, OverlayTrigger, Tooltip } from 'patternfly-react';
import { Button } from '@patternfly/react-core';
import { Modal } from 'patternfly-react';
import { Button, Tooltip } from '@patternfly/react-core';

import { vmId } from '../helpers.js';
import { deleteVm } from '../actions/provider-actions.js';
Expand Down Expand Up @@ -149,24 +149,21 @@ export class DeleteDialog extends React.Component {

if (!this.props.vm.persistent) {
deleteButton = (
<OverlayTrigger overlay={
<Tooltip id={`${id}-delete-tooltip`}>
{_("This VM is transient. Shut it down if you wish to delete it.")}
</Tooltip> } placement='top'>
<Tooltip id={`${id}-delete-tooltip`}
content={_("This VM is transient. Shut it down if you wish to delete it.")}>
<span>
<Button id={`${id}-delete`}
variant='danger'
style={{ pointerEvents: 'none' }}
isDisabled>
{_("Delete")}
</Button>
</span>
</OverlayTrigger>
</Tooltip>
);
}

return (
<span>
<>
{ deleteButton }

<Modal id={`${id}-delete-modal-dialog`} show={this.state.showModal} onHide={this.close}>
Expand All @@ -186,7 +183,7 @@ export class DeleteDialog extends React.Component {
</Button>
</Modal.Footer>
</Modal>
</span>
</>
);
}
}
13 changes: 5 additions & 8 deletions pkg/machines/components/deleteResource.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@

import React from 'react';
import PropTypes from 'prop-types';
import { Modal, OverlayTrigger, Tooltip } from 'patternfly-react';
import { Button } from '@patternfly/react-core';
import { Modal } from 'patternfly-react';
import { Button, Tooltip } from '@patternfly/react-core';

import cockpit from 'cockpit';
import { ModalError } from 'cockpit-components-inline-notification.jsx';
Expand Down Expand Up @@ -90,19 +90,16 @@ DeleteResourceModal.propTypes = {
export const DeleteResourceButton = ({ objectId, disabled, overlayText, actionName, showDialog }) => {
if (disabled) {
return (
<OverlayTrigger overlay={
<Tooltip id={`delete-${objectId}-tooltip`}>
{ overlayText }
</Tooltip> } placement='top'>
<Tooltip id={`delete-${objectId}-tooltip`}
content={overlayText}>
<span>
<Button id={`delete-${objectId}`}
variant='danger'
style={{ pointerEvents: 'none' }}
isDisabled>
{actionName || _("Delete")}
</Button>
</span>
</OverlayTrigger>
</Tooltip>
);
} else {
return (
Expand Down
35 changes: 11 additions & 24 deletions pkg/machines/components/storagePools/storagePool.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Tooltip, OverlayTrigger, UtilizationBar } from 'patternfly-react';
import { Button } from '@patternfly/react-core';
import { Button, Progress, Tooltip } from '@patternfly/react-core';

import { ListingRow } from 'cockpit-components-listing.jsx';
import {
Expand Down Expand Up @@ -47,22 +46,13 @@ export class StoragePool extends React.Component {
</span>);
const allocation = parseFloat(convertToUnit(storagePool.allocation, units.B, units.GiB).toFixed(2));
const capacity = parseFloat(convertToUnit(storagePool.capacity, units.B, units.GiB).toFixed(2));
const availableTooltipFunction = (max, now) => <Tooltip id='utilization-bar-tooltip-available'> Available {((max - now) / max).toFixed(2) * 100}% </Tooltip>;
const usedTooltipFunction = (max, now) => <Tooltip id='utilization-bar-tooltip-used'> Used {(now / max).toFixed(2) * 100}% </Tooltip>;
const sizeLabel = String(cockpit.format("$0 / $1 GiB", allocation, capacity));
const size = (
<>
<UtilizationBar
now={allocation}
max={capacity}
availableTooltipFunction={availableTooltipFunction}
usedTooltipFunction={usedTooltipFunction}
/>
</>
);
const sizeLabel = (
<>
{`${allocation} / ${capacity} GiB`}
</>
<Progress value={Number(storagePool.allocation)}
min={0}
max={Number(storagePool.capacity)}
label={sizeLabel}
valueText={sizeLabel} />
);
const state = (
<>
Expand All @@ -74,7 +64,6 @@ export class StoragePool extends React.Component {
const cols = [
{ name, header: true },
size,
sizeLabel,
rephraseUI('connections', storagePool.connectionName),
state,
];
Expand Down Expand Up @@ -165,7 +154,6 @@ class StoragePoolActions extends React.Component {
<Button id={`deactivate-${id}`}
variant='secondary'
isDisabled={this.state.operationInProgress}
style={this.state.operationInProgress ? { pointerEvents: 'none' } : null} // Fixes OverlayTrigger not showing up
onClick={this.onDeactivate}>
{_("Deactivate")}
</Button>
Expand All @@ -174,25 +162,24 @@ class StoragePoolActions extends React.Component {
<Button id={`activate-${id}`}
variant='secondary'
isDisabled={this.state.operationInProgress}
style={this.state.operationInProgress ? { pointerEvents: 'none' } : null} // Fixes OverlayTrigger not showing up
onClick={this.onActivate}>
{_("Activate")}
</Button>
);
if (this.state.operationInProgress) {
deactivateButton = (
<OverlayTrigger overlay={ <Tooltip id="tip-in-progress">{_("Operation is in progress")}</Tooltip> } placement="top">
<Tooltip id="tip-in-progress" content={_("Operation is in progress")}>
<span>
{deactivateButton}
</span>
</OverlayTrigger>
</Tooltip>
);
activateButton = (
<OverlayTrigger overlay={ <Tooltip id="tip-in-progress">{_("Operation is in progress")}</Tooltip> } placement="top">
<Tooltip id="tip-in-progress" content={_("Operation is in progress")}>
<span>
{activateButton}
</span>
</OverlayTrigger>
</Tooltip>
);
}

Expand Down
13 changes: 5 additions & 8 deletions pkg/machines/components/storagePools/storagePoolDelete.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Modal, OverlayTrigger, Tooltip } from 'patternfly-react';
import { Button } from '@patternfly/react-core';
import { Modal } from 'patternfly-react';
import { Button, Tooltip } from '@patternfly/react-core';

import { getStorageVolumesUsage, storagePoolId } from '../../helpers.js';
import { ModalError } from 'cockpit-components-inline-notification.jsx';
Expand Down Expand Up @@ -192,19 +192,16 @@ export class StoragePoolDelete extends React.Component {

if (!canDelete(storagePool, vms) || !storagePool.persistent) {
return (
<OverlayTrigger overlay={
<Tooltip id='delete-tooltip'>
{ tooltipText }
</Tooltip> } placement='top'>
<Tooltip id='delete-tooltip'
content={tooltipText}>
<span>
<Button id={`delete-${id}`}
variant='danger'
style={{ pointerEvents: 'none' }}
isDisabled>
{_("Delete")}
</Button>
</span>
</OverlayTrigger>
</Tooltip>
);
} else {
return (
Expand Down
2 changes: 1 addition & 1 deletion pkg/machines/components/storagePools/storagePoolList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export class StoragePoolList extends React.Component {
</Breadcrumb>
<div id='storage-pools-listing' className='container-fluid'>
<Listing title={_("Storage Pools")}
columnTitles={[_("Name"), _("Size"), "", _("Connection"), _("State")]}
columnTitles={[_("Name"), _("Size"), _("Connection"), _("State")]}
emptyCaption={_("No storage pool is defined on this host")}
actions={actions}>
{storagePools
Expand Down
Loading

0 comments on commit acb44c6

Please sign in to comment.