if (isLastBreadcrumb && breadcrumbSize > maxWidth) {
onlyVisibleBreadcrumbs.push(
<Tooltip
- key={modifiedChildren[index].key}
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
- overlay={modifiedChildren[index].props.children as React.ReactNode}
+ content={modifiedChildren[index].props.children as React.ReactNode}
+ key={modifiedChildren[index].key}
>
{modifiedChildren[index]}
</Tooltip>,
return (
<div>
<div className="sw-flex sw-items-center sw-justify-end sw-h-control sw-mb-4">
- <Tooltip overlay={zoomTooltipText}>
+ <Tooltip content={zoomTooltipText}>
<span>
<Note className="sw-body-sm-highlight">{zoomLabel}</Note>
{': '}
</a>
);
- return <Tooltip overlay={tooltip}>{circle}</Tooltip>;
+ return <Tooltip content={tooltip}>{circle}</Tooltip>;
}
const BubbleStyled = styled.circle`
<ColorsLegendWrapper className={className}>
{colors.map((color, idx) => (
<li className="sw-ml-4" key={color.value}>
- <Tooltip overlay={color.overlay}>
+ <Tooltip content={color.overlay}>
<div>
<Checkbox
checked={color.selected}
return (
<ClipboardBase>
{({ setCopyButton, copySuccess }) => (
- <Tooltip overlay={tooltipOverlay} visible={copySuccess}>
+ <Tooltip content={tooltipOverlay} visible={copySuccess}>
<li role="none">
<ItemButtonStyled
className={className}
onClear?: () => void;
onClick?: (isOpen: boolean) => void;
open?: boolean;
- tooltipComponent?: React.ComponentType<React.PropsWithChildren<{ overlay: React.ReactNode }>>;
+ tooltipComponent?: React.ComponentType<React.PropsWithChildren<{ content: React.ReactNode }>>;
}
export function FacetBox(props: FacetBoxProps) {
{expandable && <OpenCloseIndicator aria-hidden open={open} />}
{disabled ? (
- <Tooltip overlay={disabledHelper}>
+ <Tooltip content={disabledHelper}>
<HeaderTitle
aria-disabled
aria-label={`${name}, ${disabledHelper ?? ''}`}
</Badge>
{Boolean(clearable) && (
- <Tooltip overlay={clearIconLabel}>
+ <Tooltip content={clearIconLabel}>
<ClearIcon
Icon={CloseIcon}
aria-label={clearIconLabel ?? ''}
innerRef?: React.Ref<HTMLButtonElement>;
overlay: string;
toggleFavorite: VoidFunction;
- tooltip?: React.ComponentType<React.PropsWithChildren<{ overlay: React.ReactNode }>>;
+ tooltip?: React.ComponentType<React.PropsWithChildren<{ content: React.ReactNode }>>;
}
export function FavoriteButton(props: Props) {
const Tooltip = tooltip ?? React.Fragment;
return (
- <Tooltip overlay={overlay}>
+ <Tooltip content={overlay}>
<InteractiveIcon
Icon={favorite ? StarFillIcon : StarIcon}
aria-label={overlay}
const y = Math.round((yScale(index) ?? 0) + yScale.bandwidth() / 2 + BAR_HEIGHT / 2);
return (
- <Tooltip overlay={this.props.yTooltips && this.props.yTooltips[index]}>
+ <Tooltip content={this.props.yTooltips && this.props.yTooltips[index]}>
<HistogramTick dx="1em" dy="0.3em" textAnchor="start" x={x} y={y}>
{value}
</HistogramTick>
export function DisabledTabLink(props: { label: string; overlay: React.ReactNode }) {
return (
<NavBarTabLinkWrapper>
- <Tooltip overlay={props.overlay}>
+ <Tooltip content={props.overlay}>
<a aria-disabled="true" className="disabled-link" role="link">
{props.label}
</a>
tags: string[];
tagsClassName?: string;
tagsToDisplay?: number;
- tooltip?: React.ComponentType<React.PropsWithChildren<{ overlay: React.ReactNode }>>;
+ tooltip?: React.ComponentType<React.PropsWithChildren<{ content: React.ReactNode }>>;
}
export function Tags({
const Tooltip = tooltip || React.Fragment;
const displayedTagsContent = (open = false) => (
- <Tooltip overlay={open ? undefined : tags.join(', ')}>
+ <Tooltip content={open ? undefined : tags.join(', ')}>
<span className="sw-inline-flex sw-items-center sw-gap-1">
{/* Display first 3 (tagsToDisplay) tags */}
{displayedTags.map((tag) => (
interface TooltipProps {
children: React.ReactElement;
+ content: React.ReactNode;
mouseEnterDelay?: number;
mouseLeaveDelay?: number;
onHide?: VoidFunction;
onShow?: VoidFunction;
- overlay: React.ReactNode;
placement?: BasePlacement;
visible?: boolean;
}
// overlay is a ReactNode, so it can be a boolean, `undefined` or `null`
// this allows to easily render a tooltip conditionally
// more generaly we avoid rendering empty tooltips
- return props.overlay ? <TooltipInner {...props}>{props.children}</TooltipInner> : props.children;
+ return props.content ? <TooltipInner {...props}>{props.children}</TooltipInner> : props.children;
}
export class TooltipInner extends React.Component<TooltipProps, State> {
role="tooltip"
style={style}
>
- <TooltipWrapperInner>{this.props.overlay}</TooltipWrapperInner>
+ <TooltipWrapperInner>{this.props.content}</TooltipWrapperInner>
<TooltipWrapperArrow
style={
isMeasured(this.state)
const isIconVisible = width >= ICON_VISIBLE_AT_WIDTH && height >= ICON_VISIBLE_AT_HEIGHT;
return (
- <Tooltip overlay={tooltip} placement={placement ?? PopupPlacement.Left}>
+ <Tooltip content={tooltip} placement={placement ?? PopupPlacement.Left}>
<StyledCell style={cellStyles}>
<StyledCellLink href="#" onClick={handleRectClick}>
<StyledCellLabel width={width}>
it('menu items should work with tooltips', async () => {
render(
- <Tooltip overlay="test tooltip">
+ <Tooltip content="test tooltip">
<ItemButton onClick={jest.fn()}>button</ItemButton>
</Tooltip>,
{},
children = <div role="note" />,
) {
return render(
- <TooltipInner mouseLeaveDelay={0} overlay={<span id="overlay" />} {...props}>
+ <TooltipInner content={<span id="overlay" />} mouseLeaveDelay={0} {...props}>
{children}
</TooltipInner>,
);
describe('Tooltip', () => {
it('should not render tooltip without overlay', async () => {
- const { user } = setupWithProps({ overlay: undefined });
+ const { user } = setupWithProps({ content: undefined });
await user.hover(screen.getByRole('note'));
expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
});
it('should not render undefined tooltips', async () => {
- const { user } = setupWithProps({ overlay: undefined, visible: true });
+ const { user } = setupWithProps({ content: undefined, visible: true });
await user.hover(screen.getByRole('note'));
expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
});
it('should not render empty tooltips', async () => {
- const { user } = setupWithProps({ overlay: '', visible: true });
+ const { user } = setupWithProps({ content: '', visible: true });
await user.hover(screen.getByRole('note'));
expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
});
children = <div role="note" />,
) {
return render(
- <Tooltip overlay={<span id="overlay" />} {...props}>
+ <Tooltip content={<span id="overlay" />} {...props}>
{children}
</Tooltip>,
);
return (
<ClipboardBase>
{({ setCopyButton, copySuccess }) => (
- <Tooltip overlay={copiedLabel} visible={copySuccess}>
+ <Tooltip content={copiedLabel} visible={copySuccess}>
<ButtonSecondary
className={classNames('sw-select-none', className)}
data-clipboard-text={copyValue}
icon={icon}
- innerRef={setCopyButton}
+ ref={setCopyButton}
>
{children ?? copyLabel}
</ButtonSecondary>
{({ setCopyButton, copySuccess }) => {
return (
<Tooltip
- mouseEnterDelay={INTERACTIVE_TOOLTIP_DELAY}
- overlay={
+ content={
<div className="sw-w-abs-150 sw-text-center">
{copySuccess ? copiedLabel : copyLabel}
</div>
}
+ mouseEnterDelay={INTERACTIVE_TOOLTIP_DELAY}
{...(copySuccess ? { visible: copySuccess } : undefined)}
>
<InteractiveIconComponent
}
return (
- <Tooltip overlay={status} placement={PopupPlacement.Right}>
+ <Tooltip content={status} placement={PopupPlacement.Right}>
<LineMeta data-line-number={lineNumber} ref={coverageMarker}>
{coverageStatus === 'covered' && <CoveredBlock aria-label={status} />}
{coverageStatus === 'uncovered' && <UncoveredBlock aria-label={status} />}
const label = renderLabel(element);
return (
- <Tooltip overlay={renderTooltip?.(element, disabled)} placement={PopupPlacement.Right}>
+ <Tooltip content={renderTooltip?.(element, disabled)} placement={PopupPlacement.Right}>
<ItemCheckbox
checked={Boolean(selected)}
className={classNames('sw-flex sw-py-2 sw-px-4', { active })}
import styled from '@emotion/styled';
import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers';
import { ThemedProps } from '../../../types';
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
export const PrimaryStyle = (props: ThemedProps) => css`
--background: ${themeColor('button')(props)};
--border: ${themeBorder('default', 'transparent')(props)};
`;
-export const ButtonPrimary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)`
+export const ButtonPrimary = styled(Button)`
${PrimaryStyle}
`;
*/
import styled from '@emotion/styled';
import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers';
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
-export const ButtonSecondary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)`
+export const ButtonSecondary = styled(Button)`
--background: ${themeColor('buttonSecondary')};
--backgroundHover: ${themeColor('buttonSecondaryHover')};
--color: ${themeContrast('buttonSecondary')};
*/
import styled from '@emotion/styled';
import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers';
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
-export const DangerButtonPrimary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)`
+export const DangerButtonPrimary = styled(Button)`
--background: ${themeColor('dangerButton')};
--backgroundHover: ${themeColor('dangerButtonHover')};
--color: ${themeContrast('dangerButton')};
*/
import styled from '@emotion/styled';
import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers';
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
-export const DangerButtonSecondary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)`
+export const DangerButtonSecondary = styled(Button)`
--background: ${themeColor('dangerButtonSecondary')};
--backgroundHover: ${themeColor('dangerButtonSecondaryHover')};
--color: ${themeContrast('dangerButtonSecondary')};
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import styled from '@emotion/styled';
-import React from 'react';
import { OPACITY_20_PERCENT } from '../../../helpers/constants';
import { themeBorder, themeColor, themeContrast } from '../../../helpers/theme';
import { Button, ButtonProps } from './Button';
);
}
-const ThirdPartyButtonStyled: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)`
+const ThirdPartyButtonStyled = styled(Button)`
--background: ${themeColor('thirdPartyButton')};
--backgroundHover: ${themeColor('thirdPartyButtonHover')};
--color: ${themeContrast('thirdPartyButton')};
return (
<form role="search">
{!open && !query ? (
- <Tooltip mouseEnterDelay={INTERACTIVE_TOOLTIP_DELAY} overlay={translate('search_verb')}>
+ <Tooltip mouseEnterDelay={INTERACTIVE_TOOLTIP_DELAY} content={translate('search_verb')}>
<InteractiveIcon
className="it__search-icon"
Icon={MenuSearchIcon}
{({ a11yAttrs: { role, ...a11yAttrs }, onToggleClick, open }) => (
<Tooltip
mouseEnterDelay={0.2}
- overlay={!open ? translate('global_nav.account.tooltip') : undefined}
+ content={!open ? translate('global_nav.account.tooltip') : undefined}
>
<BareButton
aria-label={translate('global_nav.account.tooltip')}
{project.qualityGate !== undefined && (
<div>
- <Tooltip overlay={qualityGateLabel}>
+ <Tooltip content={qualityGateLabel}>
<span className="sw-flex sw-items-center">
<QualityGateIndicator
status={(project.qualityGate as Status) ?? 'NONE'}
onConfirm={onCancelAllPending}
>
{({ onClick }) => (
- <Tooltip overlay={translate('background_tasks.cancel_all_tasks')}>
+ <Tooltip content={translate('background_tasks.cancel_all_tasks')}>
<DestructiveIcon
aria-label={translate('background_tasks.cancel_all_tasks')}
className="sw-ml-1"
return (
<div className="sw-flex sw-items-center">
{!loading && workerCount > 1 && (
- <Tooltip overlay={translate('background_tasks.number_of_workers.warning')}>
+ <Tooltip content={translate('background_tasks.number_of_workers.warning')}>
<div className="sw-py-1/2 sw-mr-1">
<FlagWarningIcon />
</div>
</Spinner>
{!loading && canSetWorkerCount && (
- <Tooltip overlay={translate('background_tasks.change_number_of_workers')}>
+ <Tooltip content={translate('background_tasks.change_number_of_workers')}>
<InteractiveIcon
Icon={PencilIcon}
aria-label={translate('background_tasks.change_number_of_workers')}
);
if (!canBulkChange) {
return (
- <Tooltip overlay={translate('coding_rules.can_not_bulk_change')}>
+ <Tooltip content={translate('coding_rules.can_not_bulk_change')}>
<ButtonPrimary disabled>{translate('bulk_change')}</ButtonPrimary>
</Tooltip>
);
{!ruleDetails.isExternal && ruleDetails.isTemplate && (
<>
<li>
- <Tooltip overlay={translate('coding_rules.rule_template.title')}>
+ <Tooltip content={translate('coding_rules.rule_template.title')}>
<span className="it__coding-rules-detail-property">
{translate('coding_rules.rule_template')}
</span>
<SeparatorCircleIcon aria-hidden as="li" />
<li>
<Tooltip
- overlay={translateWithParameters(
+ content={translateWithParameters(
'coding_rules.external_rule.engine_tooltip',
externalEngine,
)}
<>
<SeparatorCircleIcon aria-hidden as="li" />
<li>
- <Tooltip overlay={translate('status')}>
+ <Tooltip content={translate('status')}>
<Note data-meta="status">
<Badge variant="deleted">{translate('rules.status', ruleDetails.status)}</Badge>
</Note>
}
return (
- <Tooltip overlay={translate('coding_rules.issues.only_main_branches')}>{totalItem}</Tooltip>
+ <Tooltip content={translate('coding_rules.issues.only_main_branches')}>{totalItem}</Tooltip>
);
};
<div className="sw-mr-2 sw-shrink-0">
{activation.inherit === 'OVERRIDES' && (
<Tooltip
- overlay={translateWithParameters(
+ content={translateWithParameters(
'coding_rules.overrides',
selectedProfile.name,
selectedProfile.parentName,
)}
{activation.inherit === 'INHERITED' && (
<Tooltip
- overlay={translateWithParameters(
+ content={translateWithParameters(
'coding_rules.inherits',
selectedProfile.name,
selectedProfile.parentName,
if (selectedProfile.isBuiltIn && canCopy) {
return (
<div className="sw-ml-4">
- <Tooltip overlay={translate('coding_rules.need_extend_or_copy')}>
+ <Tooltip content={translate('coding_rules.need_extend_or_copy')}>
<DangerButtonSecondary disabled>
{translate('coding_rules', activation ? 'deactivate' : 'activate')}
</DangerButtonSecondary>
)}
</ConfirmButton>
) : (
- <Tooltip overlay={translate('coding_rules.can_not_deactivate')}>
+ <Tooltip content={translate('coding_rules.can_not_deactivate')}>
<DangerButtonSecondary disabled>
{translate('coding_rules.deactivate')}
</DangerButtonSecondary>
<>
<SeparatorCircleIcon aria-hidden as="li" />
<li>
- <Tooltip overlay={translate('coding_rules.rule_template.title')}>
+ <Tooltip content={translate('coding_rules.rule_template.title')}>
<span>
<Badge>{translate('coding_rules.rule_template')}</Badge>
</span>
</div>
);
- return <Tooltip overlay={tooltip}>{label}</Tooltip>;
+ return <Tooltip content={tooltip}>{label}</Tooltip>;
}
}
</div>
{!isDiff && hasHistory && (
- <Tooltip overlay={translate('component_measures.show_metric_history')}>
+ <Tooltip content={translate('component_measures.show_metric_history')}>
<span className="sw-ml-4">
<LinkStandalone
className="it__show-history-link sw-font-semibold"
sqProjectKey={project.sqProjectKey}
onImport={props.onImport}
primaryTextNode={
- <Tooltip overlay={project.slug}>
+ <Tooltip content={project.slug}>
<span>{project.name}</span>
</Tooltip>
}
secondaryTextNode={
- <Tooltip overlay={project.pathSlug}>
+ <Tooltip content={project.pathSlug}>
<span>{project.pathName}</span>
</Tooltip>
}
<ButtonSecondary
disabled={checked.length === 0}
id="issues-bulk-change"
- innerRef={this.bulkButtonRef}
+ ref={this.bulkButtonRef}
onClick={this.handleOpenBulkChange}
>
{this.getButtonLabel(checked, checkAll, paging)}
/>
</div>
))}
- <Tooltip overlay={translate('marketplace.requires_restart')}>
+ <Tooltip content={translate('marketplace.requires_restart')}>
<DangerButtonSecondary disabled={loading} onClick={this.handleUninstall}>
{translate('marketplace.uninstall')}
</DangerButtonSecondary>
</>
)}
{isAvailablePlugin(plugin) && (
- <Tooltip overlay={translate('marketplace.requires_restart')}>
+ <Tooltip content={translate('marketplace.requires_restart')}>
<ButtonSecondary
disabled={
loading || (plugin.termsAndConditionsUrl != null && !this.state.acceptTerms)
{release.version}
</Badge>
) : (
- <Tooltip overlay={translate('marketplace.update_status', update.status)}>
+ <Tooltip content={translate('marketplace.update_status', update.status)}>
<span>
<Badge className="sw-mr-4">{release.version}</Badge>
</span>
}
return (
<ListItem>
- <Tooltip overlay={license}>
+ <Tooltip content={license}>
<div>
<FormattedMessage
id="marketplace.licensed_under_x"
return null;
}
return (
- <Tooltip overlay={translate('marketplace.requires_restart')}>
+ <Tooltip content={translate('marketplace.requires_restart')}>
<ButtonSecondary disabled={disabled} onClick={handleClick}>
{translateWithParameters('marketplace.update_to_x', update.release.version)}
</ButtonSecondary>
{update.status === 'COMPATIBLE' ? (
<Badge variant="new">{release.version}</Badge>
) : (
- <Tooltip overlay={translate('marketplace.update_status', update.status)}>
+ <Tooltip content={translate('marketplace.update_status', update.status)}>
<span>
<Badge>{release.version}</Badge>
</span>
<HomePageSelect currentPage={currentPage} type="button" />
<ComponentReportActions component={component} branch={branch} />
{showTakeTheTourButton && (
- <Tooltip overlay={translate('overview.promoted_section.button_tooltip')}>
+ <Tooltip content={translate('overview.promoted_section.button_tooltip')}>
<ButtonSecondary
className="sw-pl-4 sw-shrink-0"
data-spotlight-id="take-tour-1"
{showActions && (
<div className="sw-grow-0 sw-shrink-0 sw-ml-2">
{canChange && (
- <Tooltip overlay={translate('project_activity.events.tooltip.edit')}>
+ <Tooltip content={translate('project_activity.events.tooltip.edit')}>
<InteractiveIcon
Icon={PencilIcon}
aria-label={translate('project_activity.events.tooltip.edit')}
</Tooltip>
)}
{canDelete && (
- <Tooltip overlay={translate('project_activity.events.tooltip.delete')}>
+ <Tooltip content={translate('project_activity.events.tooltip.delete')}>
<DestructiveIcon
Icon={TrashIcon}
aria-label={translate('project_activity.events.tooltip.delete')}
{translate('project_activity.new_code_period_start')}
</span>
<Tooltip
- overlay={translate('project_activity.new_code_period_start.help')}
- placement="top"
+ content={translate('project_activity.new_code_period_start.help')}
+ side="top"
>
<HelperHintIcon className="sw-ml-1" />
</Tooltip>
>
<Tooltip
mouseEnterDelay={0.5}
- overlay={`${translate('version')} ${version.version}`}
+ content={`${translate('version')} ${version.version}`}
>
<Badge className="sw-p-1">{version.version}</Badge>
</Tooltip>
return (
<>
- <Tooltip mouseEnterDelay={0.5} overlay={tooltipContent} placement="left">
+ <Tooltip mouseEnterDelay={0.5} content={tooltipContent} side="left">
<ActivityAnalysisListItem
className={classNames(
'it__project-activity-analysis sw-flex sw-cursor-pointer sw-p-1 sw-relative',
<span className="sw-py-1/2 sw-px-1">
{translate('project_activity.new_code_period_start')}
</span>
- <Tooltip
- overlay={translate('project_activity.new_code_period_start.help')}
- placement="top"
- >
+ <Tooltip content={translate('project_activity.new_code_period_start.help')} side="top">
<HelperHintIcon className="sw-ml-1" />
</Tooltip>
</BaselineMarker>
{profile.deleted ? (
<Tooltip
key={profile.key}
- overlay={translateWithParameters('overview.deleted_profile', profile.name)}
+ content={translateWithParameters('overview.deleted_profile', profile.name)}
>
<div className="project-info-deleted-profile">{profile.name}</div>
</Tooltip>
{count > 0 && (
<Tooltip
key={profile.key}
- overlay={translateWithParameters('overview.deprecated_profile', count)}
+ content={translateWithParameters('overview.deprecated_profile', count)}
>
<span className="sw-ml-6">
<Badge variant="deleted">{translate('deprecated')}</Badge>
{branch.isMain && <Badge className="sw-ml-1">{translate('branches.main_branch')}</Badge>}
</ContentCell>
<ContentCell>
- <Tooltip overlay={settingWarning}>
+ <Tooltip content={settingWarning}>
<span>
{settingWarning !== undefined && <FlagWarningIcon className="sw-mr-1" />}
{branch.newCodePeriod
ariaLabel={translateWithParameters('branch_list.show_actions_for_x', branch.name)}
>
<Tooltip
- overlay={
+ content={
isCompliant ? null : translate('project_baseline.compliance.warning.title.project')
}
>
<components.Option {...props}>
{option.isInvalid ? (
<Tooltip
- overlay={translateWithParameters(
+ content={translateWithParameters(
'baseline.reference_branch.does_not_exist',
option.value,
)}
</div>
<div className="sw-flex sw-justify-between">
<div className="sw-flex sw-flex-1">
- <Tooltip overlay={translate('projects.search')}>
+ <Tooltip content={translate('projects.search')}>
<InputSearch
className="sw-mr-4 it__page-header-search sw-max-w-abs-300 sw-flex-1"
minLength={MIN_SEARCH_QUERY_LENGTH}
/>
<Tooltip
mouseLeaveDelay={1}
- overlay={
+ content={
sortDesc ? translate('projects.sort_descending') : translate('projects.sort_ascending')
}
>
{qualifier === ComponentQualifier.Application && (
<Tooltip
- overlay={
+ content={
<span>
{translate('qualifier.APP')}
{measures.projects !== '' && (
</Tooltip>
)}
- <Tooltip overlay={translate('visibility', visibility, 'description', qualifier)}>
+ <Tooltip content={translate('visibility', visibility, 'description', qualifier)}>
<span>
<Badge className="sw-ml-2">{translate('visibility', visibility)}</Badge>
</span>
</Tooltip>
{awaitingScan && !isNewCode && !isEmpty(analysisDate) && measures.ncloc !== undefined && (
- <Tooltip overlay={translate(`projects.awaiting_scan.description.${qualifier}`)}>
+ <Tooltip content={translate(`projects.awaiting_scan.description.${qualifier}`)}>
<span>
<Badge variant="new" className="sw-ml-2">
{translate('projects.awaiting_scan')}
</div>
{isDefined(analysisDate) && analysisDate !== '' && (
- <Tooltip overlay={qualityGateLabel}>
+ <Tooltip content={qualityGateLabel}>
<span className="sw-flex sw-items-center">
<QualityGateIndicator
status={(measures[MetricKey.alert_status] as Status) ?? 'NONE'}
) : null;
return (
- <Tooltip overlay={tooltip}>
+ <Tooltip content={tooltip}>
<span className={className}>{languagesText}</span>
</Tooltip>
);
highlight={LinkHighlight.CurrentColor}
to={getComponentOverviewUrl(project.key, project.qualifier)}
>
- <Tooltip overlay={project.name} placement="left">
+ <Tooltip content={project.name} side="left">
<span>{project.name}</span>
</Tooltip>
</LinkStandalone>
<PrivacyBadgeContainer qualifier={project.qualifier} visibility={project.visibility} />
</ContentCell>
<ContentCell className="it__project-row-text-cell">
- <Tooltip overlay={project.key} placement="left">
+ <Tooltip content={project.key} side="left">
<Note>{project.key}</Note>
</Tooltip>
</ContentCell>
export default function BuiltInQualityGateBadge({ className }: Props) {
return (
- <Tooltip overlay={translate('quality_gates.built_in.help')}>
+ <Tooltip content={translate('quality_gates.built_in.help')}>
<Badge className={className}>{translate('quality_gates.built_in')}</Badge>
</Tooltip>
);
)}
{actions.copy && (
<Tooltip
- overlay={
+ content={
qualityGate.caycStatus === CaycStatus.NonCompliant
? translate('quality_gates.cannot_copy_no_cayc')
: null
)}
{actions.setAsDefault && (
<Tooltip
- overlay={
+ content={
qualityGate.caycStatus === CaycStatus.NonCompliant
? translate('quality_gates.cannot_set_default_no_cayc')
: null
)}
{actions.copy && (
<Tooltip
- overlay={
+ content={
qualityGate.caycStatus === CaycStatus.NonCompliant
? translate('quality_gates.cannot_copy_no_cayc')
: null
)}
{actions.setAsDefault && (
<Tooltip
- overlay={
+ content={
qualityGate.caycStatus === CaycStatus.NonCompliant
? translate('quality_gates.cannot_set_default_no_cayc')
: null
)}
</div>
{qualityGate.caycStatus !== CaycStatus.NonCompliant && (
- <Tooltip overlay={translate('quality_gates.cayc.tooltip.message')}>
+ <Tooltip content={translate('quality_gates.cayc.tooltip.message')}>
<span>
<QGRecommendedIcon />
</span>
<components.Option {...props}>
<span>{label}</span>
{isDefault && (
- <Tooltip overlay={intl.formatMessage({ id: 'quality_profiles.list.default.help' })}>
+ <Tooltip content={intl.formatMessage({ id: 'quality_profiles.list.default.help' })}>
<span>
<Badge className="sw-ml-1">{intl.formatMessage({ id: 'default' })}</Badge>
</span>
return (
<Spinner loading={state === 'opening'}>
- <Tooltip placement="bottom" overlay={activateRuleMsg}>
+ <Tooltip side="bottom" content={activateRuleMsg}>
<ButtonSecondary
disabled={state !== 'closed'}
aria-label={activateRuleMsg}
>
{({ onClick }) => (
<Tooltip
- overlay={
+ content={
canDeactivateInheritedRules
? intl.formatMessage(
{ id: 'quality_profiles.comparison.deactivate_rule' },
);
if (tooltip) {
- return <Tooltip overlay={translate('quality_profiles.built_in.description')}>{badge}</Tooltip>;
+ return <Tooltip content={translate('quality_profiles.built_in.description')}>{badge}</Tooltip>;
}
return badge;
<ContentCell>
{profile.isDefault ? (
- <Tooltip overlay={intl.formatMessage({ id: 'quality_profiles.list.default.help' })}>
+ <Tooltip content={intl.formatMessage({ id: 'quality_profiles.list.default.help' })}>
<Badge>{intl.formatMessage({ id: 'default' })}</Badge>
</Tooltip>
) : (
{profile.activeDeprecatedRuleCount > 0 && (
<span className="sw-ml-2">
- <Tooltip overlay={intl.formatMessage({ id: 'quality_profiles.deprecated_rules' })}>
+ <Tooltip content={intl.formatMessage({ id: 'quality_profiles.deprecated_rules' })}>
<BaseLink to={deprecatedRulesUrl} className="sw-border-0">
<Badge variant="deleted">{profile.activeDeprecatedRuleCount}</Badge>
</BaseLink>
{hotspot.codeVariants && hotspot.codeVariants.length > 0 && (
<HotspotHeaderInfo title={translate('issues.facet.codeVariants')} className="sw-truncate">
<LightLabel className="sw-body-sm">
- <Tooltip overlay={hotspot.codeVariants.join(', ')}>
+ <Tooltip content={hotspot.codeVariants.join(', ')}>
<span>{hotspot.codeVariants.join(', ')}</span>
</Tooltip>
</LightLabel>
{userLoggedIn && (
<Tooltip
classNameSpace={component?.needIssueSync ? 'tooltip' : 'sw-hidden'}
- overlay={<HotspotDisabledFilterTooltip />}
- placement="right"
+ content={<HotspotDisabledFilterTooltip />}
+ side="right"
>
<ItemCheckbox
checked={Boolean(filters.assignedToMe)}
<SubNavigationContainer className="sw-flex sw-justify-between">
<div className="sw-flex sw-items-center">
{filterByFile ? (
- <Tooltip overlay={filterByFile}>
+ <Tooltip content={filterByFile}>
<span>
<QualifierIcon className="sw-mr-1" qualifier={ComponentQualifier.File} />
{fileFromPath(filterByFile)}
return (
<>
<Tooltip
- overlay={readonly ? translate('hotspots.status.cannot_change_status') : null}
- placement="bottom"
+ content={readonly ? translate('hotspots.status.cannot_change_status') : null}
+ side="bottom"
>
<ButtonPrimary id="status-trigger" onClick={() => setIsOpen(true)} disabled={readonly}>
{translate('hotspots.status.review')}
/>
)}
- <Tooltip overlay={translateWithParameters('settings.key_x', definition.key)}>
+ <Tooltip content={translateWithParameters('settings.key_x', definition.key)}>
<Note as="div" className="sw-mt-4">
{translateWithParameters('settings.key_x', definition.key)}
</Note>
{status.type !== AlmSettingsBindingStatusType.Warning && (
<div className="sw-flex sw-mb-3">
<div className="sw-mr-10">
- <Tooltip overlay={getPrDecoFeatureDescription(alm)}>
+ <Tooltip content={getPrDecoFeatureDescription(alm)}>
<span>{translate('settings.almintegration.feature.status_reporting.title')}</span>
</Tooltip>
{getPRDecorationFeatureStatus(branchesEnabled, status.type)}
{IMPORT_COMPATIBLE_ALMS.includes(alm) && (
<div>
<Tooltip
- overlay={translate('settings.almintegration.feature.alm_repo_import.description')}
+ content={translate('settings.almintegration.feature.alm_repo_import.description')}
>
<span>{translate('settings.almintegration.feature.alm_repo_import.title')}</span>
</Tooltip>
return (
<Tooltip
- overlay={
+ content={
preventCreation ? (
<FormattedMessage
id="settings.almintegration.create.tooltip"
))}
<Tooltip
- overlay={name ? translateWithParameters('system.current_health_of_x', name) : undefined}
+ content={name ? translateWithParameters('system.current_health_of_x', name) : undefined}
>
<span>{statusIndicator}</span>
</Tooltip>
? translateWithParameters('api_documentation.deprecated_since_x', since)
: translate('api_documentation.deprecated');
return (
- <Tooltip overlay={overlay}>
+ <Tooltip content={overlay}>
<span>
<Badge variant="default">{label}</Badge>
</span>
export default function InternalBadge() {
return (
- <Tooltip overlay={translate('api_documentation.internal_tooltip')}>
+ <Tooltip content={translate('api_documentation.internal_tooltip')}>
<span>
<Badge variant="deleted">{translate('internal')}</Badge>
</span>
if (webhooksCount >= WEBHOOKS_LIMIT) {
return (
- <Tooltip overlay={translateWithParameters('webhooks.maximum_reached', WEBHOOKS_LIMIT)}>
+ <Tooltip content={translateWithParameters('webhooks.maximum_reached', WEBHOOKS_LIMIT)}>
<ButtonPrimary className="it__webhook-create" disabled>
{translate('create')}
</ButtonPrimary>
const handleClose = React.useCallback(() => setPopupOpen(false), []);
return duplicated ? (
- <Tooltip overlay={tooltip} placement={PopupPlacement.Right}>
+ <Tooltip content={tooltip} side={PopupPlacement.Right}>
<LineMeta
className="it__source-line-duplicated"
data-index={index}
>
<OutsideClickHandler onClickOutside={handleClose}>
<Tooltip
- placement={PopupPlacement.Right}
- visible={popupOpen}
+ side={PopupPlacement.Right}
+ isOpen={popupOpen}
isInteractive
- overlay={popupOpen ? props.renderDuplicationPopup(index, line.line) : undefined}
+ content={popupOpen ? props.renderDuplicationPopup(index, line.line) : undefined}
classNameInner="sw-max-w-abs-400"
>
<DuplicationBlock
return (
<LineMeta className="it__source-line-with-issues" data-line-number={line.line}>
- <Tooltip mouseLeaveDelay={MOUSE_LEAVE_DELAY} overlay={tooltipContent}>
+ <Tooltip mouseLeaveDelay={MOUSE_LEAVE_DELAY} content={tooltipContent}>
<IssueIndicatorButton
aria-label={tooltipContent}
aria-expanded={issuesOpen}
<LineMeta data-line-number={line.line}>
<OutsideClickHandler onClickOutside={handleClose}>
<Tooltip
- overlay={<SCMPopup line={line} />}
- placement={PopupPlacement.Right}
- visible={isOpen}
+ content={<SCMPopup line={line} />}
+ side={PopupPlacement.Right}
+ isOpen={isOpen}
isInteractive
classNameInner="sw-max-w-abs-600"
>
: event.description;
return (
- <Tooltip overlay={tooltipContent}>
+ <Tooltip content={tooltipContent}>
<div className="sw-min-w-0 sw-flex-1 sw-py-1/2">
<div className="sw-flex sw-items-start">
<span>
return (
<Tooltip
key={serie.name}
- overlay={translate('project_activity.graphs.custom.metric_no_history')}
+ content={translate('project_activity.graphs.custom.metric_no_history')}
>
<li
className="sw-mx-2"
</span>
{isDeprecated && (
<Tooltip
- overlay={
+ content={
<FormattedMessage
id={getDeprecatedTranslationKeyForTooltip(metric as MetricKey)}
tagName="div"
const { option, disableTooltipOverlay, disabledReason, className = '' } = props;
const label = option.label || option.value;
return option.isDisabled ? (
- <Tooltip overlay={disableTooltipOverlay()} placement="left">
+ <Tooltip content={disableTooltipOverlay()} side="left">
<span className={className}>
{label}
{disabledReason !== undefined && <em className="small sw-ml-1">({disabledReason})</em>}
visibility,
}: PrivacyBadgeContainerProps) {
return (
- <Tooltip overlay={translate('visibility', visibility, 'description', qualifier)}>
+ <Tooltip content={translate('visibility', visibility, 'description', qualifier)}>
<div className={classNames('badge', className)}>{translate('visibility', visibility)}</div>
</Tooltip>
);
toggleFavorite={this.toggleFavorite}
tooltip={Tooltip}
favorite={favorite}
- innerRef={(node) => (this.buttonNode = node)}
+ innerRef={(node: HTMLElement | null) => (this.buttonNode = node)}
/>
);
}
const Icon = isChecked ? HomeFillIcon : HomeIcon;
return (
- <Tooltip overlay={tooltip}>
+ <Tooltip content={tooltip}>
{type === 'icon' ? (
<DiscreetInteractiveIcon
aria-label={tooltip}
mouseLeaveDelay?: number;
onShow?: () => void;
onHide?: () => void;
- overlay: React.ReactNode;
- placement?: Placement;
- visible?: boolean;
+ content: React.ReactNode;
+ side?: Placement;
+ isOpen?: boolean;
// If tooltip overlay has interactive content (links for instance) we may set this to true to stop
// default behavior of tabbing (other changes should be done outside of this component to make it work)
// See example DocHelpTooltip
export default function Tooltip(props: TooltipProps) {
// `overlay` is a ReactNode, so it can be `undefined` or `null`. This allows to easily
// render a tooltip conditionally. More generally, we avoid rendering empty tooltips.
- return props.overlay != null && props.overlay !== '' ? (
+ return props.content != null && props.content !== '' ? (
<TooltipInner {...props} />
) : (
props.children
super(props);
this.state = {
flipped: false,
- placement: props.placement,
- visible: props.visible ?? false,
+ placement: props.side,
+ visible: props.isOpen ?? false,
};
this.id = uniqueId('tooltip-');
this.throttledPositionTooltip = throttle(this.positionTooltip, 10);
componentDidMount() {
this.mounted = true;
- if (this.props.visible === true) {
+ if (this.props.isOpen === true) {
this.positionTooltip();
this.addEventListeners();
}
}
componentDidUpdate(prevProps: TooltipProps, prevState: State) {
- if (this.props.placement !== prevProps.placement) {
- this.setState({ placement: this.props.placement });
+ if (this.props.side !== prevProps.side) {
+ this.setState({ placement: this.props.side });
// Break. This will trigger a new componentDidUpdate() call, so the below
// positionTooltip() call will be correct. Otherwise, it might not use
// the new state.placement value.
if (
// opens
- (this.props.visible === true && !prevProps.visible) ||
- (this.props.visible === undefined && this.state.visible && !prevState.visible)
+ (this.props.isOpen === true && !prevProps.isOpen) ||
+ (this.props.isOpen === undefined && this.state.visible && !prevState.visible)
) {
this.positionTooltip();
this.addEventListeners();
} else if (
// closes
- (!this.props.visible && prevProps.visible === true) ||
- (this.props.visible === undefined && !this.state.visible && prevState.visible)
+ (!this.props.isOpen && prevProps.isOpen === true) ||
+ (this.props.isOpen === undefined && !this.state.visible && prevState.visible)
) {
this.clearPosition();
this.removeEventListeners();
};
isVisible = () => {
- return this.props.visible ?? this.state.visible;
+ return this.props.isOpen ?? this.state.visible;
};
getPlacement = (): Placement => {
top: undefined,
width: undefined,
height: undefined,
- placement: this.props.placement,
+ placement: this.props.side,
});
};
// (if it's `undefined`, it means the timer has been reset).
if (
this.mounted &&
- this.props.visible === undefined &&
+ this.props.isOpen === undefined &&
this.mouseEnterTimeout !== undefined
) {
this.setState({ visible: true });
if (!this.mouseIn) {
this.mouseLeaveTimeout = window.setTimeout(
() => {
- if (this.mounted && this.props.visible === undefined && !this.mouseIn) {
+ if (this.mounted && this.props.isOpen === undefined && !this.mouseIn) {
this.setState({ visible: false });
}
if (this.props.onHide && !this.mouseIn) {
renderOverlay() {
const isVisible = this.isVisible();
- const { classNameSpace = 'tooltip', isInteractive, overlay, classNameInner } = this.props;
+ const {
+ classNameSpace = 'tooltip',
+ isInteractive,
+ content: overlay,
+ classNameInner,
+ } = this.props;
return (
<div
className={classNames(`${classNameSpace}-inner sw-font-sans`, classNameInner, {
zLevel={PopupZLevel.Global}
>
{({ onToggleClick, open }) => (
- <Tooltip mouseLeaveDelay={0.2} overlay={!open ? translate('help') : undefined}>
+ <Tooltip mouseLeaveDelay={0.2} content={!open ? translate('help') : undefined}>
<InteractiveIcon
Icon={IconQuestionMark}
aria-expanded={open}
<>
<li className={issueMetaListItemClassNames}>
<Tooltip
- overlay={translateWithParameters('issue.from_external_rule_engine', ruleEngine)}
+ content={translateWithParameters('issue.from_external_rule_engine', ruleEngine)}
>
<span>
<Badge>{ruleEngine}</Badge>
{!!issue.codeVariants?.length && (
<>
<IssueMetaListItem>
- <Tooltip overlay={issue.codeVariants.join(', ')}>
+ <Tooltip content={issue.codeVariants.join(', ')}>
<span>
{issue.codeVariants.length > 1
? translateWithParameters('issue.x_code_variants', issue.codeVariants.length)
{showLine && isDefined(issue.textRange) && (
<>
- <Tooltip overlay={translate('line_number')}>
+ <Tooltip content={translate('line_number')}>
<IssueMetaListItem className={issueMetaListItemClassNames}>
{translateWithParameters('issue.ncloc_x.short', issue.textRange.endLine)}
</IssueMetaListItem>
function SonarLintBadgeFull() {
return (
<Tooltip
- overlay={translate('issue.quick_fix_available_with_sonarlint_no_link')}
+ content={translate('issue.quick_fix_available_with_sonarlint_no_link')}
mouseLeaveDelay={0.5}
>
<LinkStandalone
function SonarLintBadgeCompact() {
return (
<Tooltip
- overlay={
+ content={
<FormattedMessage
id="issue.quick_fix_available_with_sonarlint"
defaultMessage={translate('issue.quick_fix_available_with_sonarlint')}
<ClickEventBoundary>
<BareButton onClick={this.handlePermissionClick}>
<Tooltip
- overlay={translateWithParameters(
+ content={translateWithParameters(
'global_permissions.filter_by_x_permission',
permission.name,
)}
tooltipContent,
}: Readonly<WorkspaceHeaderButtonProps>) {
return (
- <Tooltip overlay={translate(tooltipContent)}>
+ <Tooltip content={translate(tooltipContent)}>
<InteractiveIcon
aria-label={translate(tooltipContent)}
Icon={icon}
mouseLeaveDelay={0.25}
onShow={handleShowTooltip}
onHide={handleHideTooltip}
- overlay={overlay}
- placement={placement}
+ content={overlay}
+ side={placement}
isInteractive
>
<span
props.className,
)}
>
- <Tooltip mouseLeaveDelay={0.25} overlay={overlay} placement={placement}>
+ <Tooltip mouseLeaveDelay={0.25} content={overlay} side={placement}>
<span
aria-label={props['aria-label']}
className="sw-inline-flex sw-items-center"
projects / sonarqube.git / commitdiff