Add custom host toggle tooltip for smart inventory hosts

This commit is contained in:
Marliana Lara 2020-08-11 14:22:04 -04:00
parent 8a4d45ddb6
commit 214cb76e1e
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
2 changed files with 27 additions and 11 deletions

View File

@ -8,7 +8,18 @@ import ErrorDetail from '../ErrorDetail';
import useRequest from '../../util/useRequest';
import { HostsAPI } from '../../api';
function HostToggle({ host, isDisabled = false, onToggle, className, i18n }) {
function HostToggle({
i18n,
className,
host,
isDisabled = false,
onToggle,
tooltip = i18n._(
t`Indicates if a host is available and should be included in running
jobs. For hosts that are part of an external inventory, this may be
reset by the inventory sync process.`
),
}) {
const [isEnabled, setIsEnabled] = useState(host.enabled);
const [showError, setShowError] = useState(false);
@ -39,14 +50,7 @@ function HostToggle({ host, isDisabled = false, onToggle, className, i18n }) {
return (
<Fragment>
<Tooltip
content={i18n._(
t`Indicates if a host is available and should be included in running
jobs. For hosts that are part of an external inventory, this may be
reset by the inventory sync process.`
)}
position="top"
>
<Tooltip content={tooltip} position="top">
<Switch
className={className}
css="display: inline-flex;"

View File

@ -2,7 +2,7 @@ import React from 'react';
import { Link } from 'react-router-dom';
import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { t, Trans } from '@lingui/macro';
import 'styled-components/macro';
import {
@ -67,7 +67,19 @@ function SmartInventoryHostListItem({
aria-labelledby={labelId}
id={labelId}
>
<HostToggle isDisabled host={host} />
<HostToggle
isDisabled
host={host}
tooltip={
<Trans>
<b>Smart inventory hosts are read-only.</b>
<br />
Toggle indicates if a host is available and should be included
in running jobs. For hosts that are part of an external
inventory, this may be reset by the inventory sync process.
</Trans>
}
/>
</DataListAction>
</DataListItemRow>
</DataListItem>