diff options
| author | Viktor Vorona <viktor.vorona@sonarsource.com> | 2024-04-22 14:35:10 +0200 |
|---|---|---|
| committer | Matteo Mara <matteo.mara@sonarsource.com> | 2024-04-30 10:59:03 +0200 |
| commit | b1926c0127b9765afd449c90f415027a4341caad (patch) | |
| tree | d1c530593bd069b39405c256a159af1634e5cd42 | |
| parent | d6bcc16d72c2084dac48582bc9a6f4fd7c6ab042 (diff) | |
| download | sonarqube-b1926c0127b9765afd449c90f415027a4341caad.tar.gz sonarqube-b1926c0127b9765afd449c90f415027a4341caad.zip | |
SONAR-22049 Align HelpTooltip And DocHelpTooltip (DocumentationTooltip)
59 files changed, 266 insertions, 263 deletions
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchHelpTooltip.tsx b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchHelpTooltip.tsx index bc23a0d9ae0..53585914f9c 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchHelpTooltip.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchHelpTooltip.tsx @@ -20,11 +20,11 @@ import { Link } from '@sonarsource/echoes-react'; import { HelperHintIcon } from 'design-system'; import React from 'react'; -import DocumentationTooltip from '../../../../../components/common/DocumentationTooltip'; -import HelpTooltip from '../../../../../components/controls/HelpTooltip'; import { translate, translateWithParameters } from '../../../../../helpers/l10n'; import { getApplicationAdminUrl } from '../../../../../helpers/urls'; import { useProjectBindingQuery } from '../../../../../queries/devops-integration'; +import DocHelpTooltip from '../../../../../sonar-aligned/components/controls/DocHelpTooltip'; +import HelpTooltip from '../../../../../sonar-aligned/components/controls/HelpTooltip'; import { AlmKeys } from '../../../../../types/alm-settings'; import { Component } from '../../../../../types/types'; @@ -68,7 +68,7 @@ export default function BranchHelpTooltip({ } else { if (!branchSupportEnabled) { return ( - <DocumentationTooltip + <DocHelpTooltip content={ projectBinding != null ? translateWithParameters( @@ -92,13 +92,13 @@ export default function BranchHelpTooltip({ } > {helpIcon} - </DocumentationTooltip> + </DocHelpTooltip> ); } if (!hasManyBranches) { return ( - <DocumentationTooltip + <DocHelpTooltip content={translate('branch_like_navigation.only_one_branch.content')} data-test="only-one-branch-like" links={[ @@ -120,7 +120,7 @@ export default function BranchHelpTooltip({ title={translate('branch_like_navigation.only_one_branch.title')} > {helpIcon} - </DocumentationTooltip> + </DocHelpTooltip> ); } } diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/MenuItemList.tsx b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/MenuItemList.tsx index db062241481..de5014e202c 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/MenuItemList.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/MenuItemList.tsx @@ -19,10 +19,10 @@ */ import { HelperHintIcon, ItemDivider, ItemHeader } from 'design-system'; import * as React from 'react'; -import HelpTooltip from '../../../../../components/controls/HelpTooltip'; import { getBranchLikeKey, isSameBranchLike } from '../../../../../helpers/branch-like'; import { translate } from '../../../../../helpers/l10n'; import { isDefined } from '../../../../../helpers/types'; +import HelpTooltip from '../../../../../sonar-aligned/components/controls/HelpTooltip'; import { BranchLike, BranchLikeTree } from '../../../../../types/branch-like'; import MenuItem from './MenuItem'; diff --git a/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx b/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx index 05e4a1a7f7e..340bb851e22 100644 --- a/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx +++ b/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx @@ -20,9 +20,9 @@ import { GreySeparator, HelperHintIcon, SubHeading, Title } from 'design-system'; import * as React from 'react'; import { Helmet } from 'react-helmet-async'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { whenLoggedIn } from '../../../components/hoc/whenLoggedIn'; import { translate } from '../../../helpers/l10n'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { LoggedInUser } from '../../../types/users'; import { Preferences } from './Preferences'; import UserExternalIdentity from './UserExternalIdentity'; diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingTime.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingTime.tsx index 51866966d15..d52332bbc76 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingTime.tsx +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingTime.tsx @@ -19,9 +19,9 @@ */ import { HelperHintIcon } from 'design-system'; import * as React from 'react'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { translate } from '../../../helpers/l10n'; import { formatMeasure } from '../../../helpers/measures'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; // Do not display the pending time for values smaller than this threshold (in ms) const MIN_PENDING_TIME_THRESHOLD = 1000; diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/StatStillFailing.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/StatStillFailing.tsx index 295b25a435a..cd70916cb79 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/StatStillFailing.tsx +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/StatStillFailing.tsx @@ -19,8 +19,8 @@ */ import { HelperHintIcon, StandoutLink } from 'design-system'; import * as React from 'react'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { translate } from '../../../helpers/l10n'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; export interface Props { failingCount?: number; diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx index 987f4786e52..7369ce40e27 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx @@ -26,9 +26,9 @@ import { } from 'design-system'; import * as React from 'react'; import { getWorkers } from '../../../api/ce'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import Tooltip from '../../../components/controls/Tooltip'; import { translate } from '../../../helpers/l10n'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import NoWorkersSupportPopup from './NoWorkersSupportPopup'; import WorkersForm from './WorkersForm'; diff --git a/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx b/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx index feea2774bad..d62f224316e 100644 --- a/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx @@ -30,7 +30,6 @@ import { difference, intersection } from 'lodash'; import * as React from 'react'; import { Helmet } from 'react-helmet-async'; import A11ySkipTarget from '../../../components/a11y/A11ySkipTarget'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import ListFooter from '../../../components/controls/ListFooter'; import Suggestions from '../../../components/embed-docs-modal/Suggestions'; import { Location } from '../../../components/hoc/withRouter'; @@ -39,6 +38,7 @@ import { CCT_SOFTWARE_QUALITY_METRICS, OLD_TAXONOMY_METRICS } from '../../../hel import { KeyboardKeys } from '../../../helpers/keycodes'; import { translate } from '../../../helpers/l10n'; import { areCCTMeasuresComputed } from '../../../helpers/measures'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { BranchLike } from '../../../types/branch-like'; import { isApplication, isPortfolioLike } from '../../../types/component'; import { Breadcrumb, Component, ComponentMeasure, Dict, Metric } from '../../../types/types'; diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx index 83e78403bd5..5f17719be4e 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx @@ -22,8 +22,8 @@ import { FacetBox, FacetItem, HelperHintIcon, Note, themeColor } from 'design-sy import { sortBy } from 'lodash'; import * as React from 'react'; import { Profile } from '../../../api/quality-profiles'; -import DocumentationTooltip from '../../../components/common/DocumentationTooltip'; import { translate } from '../../../helpers/l10n'; +import DocHelpTooltip from '../../../sonar-aligned/components/controls/DocHelpTooltip'; import { Dict } from '../../../types/types'; import { FacetItemsList } from '../../issues/sidebar/FacetItemsList'; import { FacetKey, Query } from '../query'; @@ -175,7 +175,7 @@ export default class ProfileFacet extends React.PureComponent<Props> { clearIconLabel={translate('clear')} count={count} help={ - <DocumentationTooltip + <DocHelpTooltip content={translate('coding_rules.facet.qprofile.help')} links={[ { @@ -185,7 +185,7 @@ export default class ProfileFacet extends React.PureComponent<Props> { ]} > <HelperHintIcon /> - </DocumentationTooltip> + </DocHelpTooltip> } > {open && ( diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetails.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetails.tsx index 03e7e4ef504..d6db414460f 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetails.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetails.tsx @@ -30,7 +30,6 @@ import { import * as React from 'react'; import { Profile } from '../../../api/quality-profiles'; import ConfirmButton from '../../../components/controls/ConfirmButton'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import DateFormatter from '../../../components/intl/DateFormatter'; import { translate, translateWithParameters } from '../../../helpers/l10n'; import { @@ -38,6 +37,7 @@ import { useRuleDetailsQuery, useUpdateRuleMutation, } from '../../../queries/rules'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { Dict } from '../../../types/types'; import { Activation } from '../query'; import CustomRuleButton from './CustomRuleButton'; diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx index 9c6971a7e40..2437e4905a0 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx @@ -19,11 +19,11 @@ */ import { Note, SeparatorCircleIcon, TextSubdued } from 'design-system'; import * as React from 'react'; -import DocumentationTooltip from '../../../components/common/DocumentationTooltip'; import IssueSeverityIcon from '../../../components/icon-mappers/IssueSeverityIcon'; import IssueTypeIcon from '../../../components/icon-mappers/IssueTypeIcon'; import TagsList from '../../../components/tags/TagsList'; import { translate } from '../../../helpers/l10n'; +import DocHelpTooltip from '../../../sonar-aligned/components/controls/DocHelpTooltip'; import { IssueSeverity } from '../../../types/issues'; import { Dict, RuleDetails } from '../../../types/types'; import RuleDetailsTagsPopup from './RuleDetailsTagsPopup'; @@ -44,7 +44,7 @@ export default function RuleDetailsHeaderActions(props: Readonly<Props>) { return ( <Note className="sw-flex sw-flex-wrap sw-items-center sw-gap-2 sw-body-xs"> {/* Type */} - <DocumentationTooltip + <DocHelpTooltip content={ <> <p className="sw-mb-4">{translate('coding_rules.type.deprecation.title')}</p> @@ -71,11 +71,11 @@ export default function RuleDetailsHeaderActions(props: Readonly<Props>) { /> {translate('issue.type', ruleDetails.type)} </TextSubdued> - </DocumentationTooltip> + </DocHelpTooltip> <SeparatorCircleIcon /> {/* Severity */} - <DocumentationTooltip + <DocHelpTooltip content={ <> <p className="sw-mb-4">{translate('coding_rules.severity.deprecation.title')}</p> @@ -102,7 +102,7 @@ export default function RuleDetailsHeaderActions(props: Readonly<Props>) { /> {translate('severity', ruleDetails.severity)} </TextSubdued> - </DocumentationTooltip> + </DocHelpTooltip> <SeparatorCircleIcon /> {/* Tags */} diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx index a60a0e5b927..203f4826d5e 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx @@ -19,10 +19,10 @@ */ import { Badge, HelperHintIcon, Link, Note, SeparatorCircleIcon } from 'design-system'; import React from 'react'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import Tooltip from '../../../components/controls/Tooltip'; import { translate, translateWithParameters } from '../../../helpers/l10n'; import { getRuleUrl } from '../../../helpers/urls'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { Dict, RuleDetails } from '../../../types/types'; const EXTERNAL_RULE_REPO_PREFIX = 'external_'; diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx index eab02e846c3..c5b9bdde608 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx @@ -30,7 +30,6 @@ import { } from 'design-system'; import * as React from 'react'; import { Profile, deactivateRule } from '../../../api/quality-profiles'; -import DocumentationTooltip from '../../../components/common/DocumentationTooltip'; import ConfirmButton from '../../../components/controls/ConfirmButton'; import Tooltip from '../../../components/controls/Tooltip'; import { CleanCodeAttributePill } from '../../../components/shared/CleanCodeAttributePill'; @@ -39,6 +38,7 @@ import TypeHelper from '../../../components/shared/TypeHelper'; import TagsList from '../../../components/tags/TagsList'; import { translate, translateWithParameters } from '../../../helpers/l10n'; import { getRuleUrl } from '../../../helpers/urls'; +import DocHelpTooltip from '../../../sonar-aligned/components/controls/DocHelpTooltip'; import { Rule } from '../../../types/types'; import { Activation } from '../query'; import ActivationButton from './ActivationButton'; @@ -245,7 +245,7 @@ export default class RuleListItem extends React.PureComponent<Props> { <SeparatorCircleIcon aria-hidden as="li" /> <li> - <DocumentationTooltip + <DocHelpTooltip content={ <div> <p className="sw-mb-2">{translate('coding_rules.type.deprecation.title')}</p> @@ -264,7 +264,7 @@ export default class RuleListItem extends React.PureComponent<Props> { iconFill="iconTypeDisabled" type={rule.type} /> - </DocumentationTooltip> + </DocHelpTooltip> </li> {rule.isTemplate && ( diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx index da7cd21b1c1..9924f4ba39e 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx @@ -19,10 +19,10 @@ */ import { HelperHintIcon } from 'design-system'; import * as React from 'react'; -import DocumentationTooltip from '../../../components/common/DocumentationTooltip'; import SoftwareImpactSeverityIcon from '../../../components/icon-mappers/SoftwareImpactSeverityIcon'; import { IMPACT_SEVERITIES } from '../../../helpers/constants'; import { translate } from '../../../helpers/l10n'; +import DocHelpTooltip from '../../../sonar-aligned/components/controls/DocHelpTooltip'; import Facet, { BasicProps } from './Facet'; export default function SeverityFacet(props: BasicProps) { @@ -49,7 +49,7 @@ export default function SeverityFacet(props: BasicProps) { renderName={renderName} renderTextName={renderTextName} help={ - <DocumentationTooltip + <DocHelpTooltip placement="right" content={ <> @@ -65,7 +65,7 @@ export default function SeverityFacet(props: BasicProps) { ]} > <HelperHintIcon /> - </DocumentationTooltip> + </DocHelpTooltip> } /> ); diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/TemplateFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/TemplateFacet.tsx index d973a4f6847..ba3b7fbc37c 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/TemplateFacet.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/TemplateFacet.tsx @@ -19,8 +19,8 @@ */ import { HelperHintIcon } from 'design-system'; import * as React from 'react'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { translate } from '../../../helpers/l10n'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import Facet, { BasicProps } from './Facet'; interface Props extends Omit<BasicProps, 'onChange' | 'values'> { diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/ComponentMeasuresApp.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/ComponentMeasuresApp.tsx index 72b5e0bbdd7..91285196104 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/components/ComponentMeasuresApp.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/components/ComponentMeasuresApp.tsx @@ -34,7 +34,6 @@ import { Helmet } from 'react-helmet-async'; import { getMeasuresWithPeriod } from '../../../api/measures'; import { getAllMetrics } from '../../../api/metrics'; import { ComponentContext } from '../../../app/components/componentContext/ComponentContext'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import Suggestions from '../../../components/embed-docs-modal/Suggestions'; import { Location, Router, withRouter } from '../../../components/hoc/withRouter'; import { enhanceMeasure } from '../../../components/measure/utils'; @@ -44,6 +43,7 @@ import { getBranchLikeQuery, isPullRequest, isSameBranchLike } from '../../../he import { translate } from '../../../helpers/l10n'; import { areLeakAndOverallCCTMeasuresComputed } from '../../../helpers/measures'; import { WithBranchLikesProps, useBranchesQuery } from '../../../queries/branch'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { ComponentQualifier, isPortfolioLike } from '../../../types/component'; import { MeasurePageView } from '../../../types/measures'; import { MetricKey } from '../../../types/metrics'; diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx index f307a7d6530..28bee63698c 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx @@ -27,7 +27,6 @@ import { themeColor, } from 'design-system'; import * as React from 'react'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { getLocalizedMetricDomain, getLocalizedMetricName, @@ -37,6 +36,7 @@ import { import { formatMeasure, isDiffMetric } from '../../../helpers/measures'; import { isDefined } from '../../../helpers/types'; import { getComponentDrilldownUrl } from '../../../helpers/urls'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { BranchLike } from '../../../types/branch-like'; import { isProject, isView } from '../../../types/component'; import { MetricKey } from '../../../types/metrics'; diff --git a/server/sonar-web/src/main/js/apps/component-measures/sidebar/DomainSubnavigation.tsx b/server/sonar-web/src/main/js/apps/component-measures/sidebar/DomainSubnavigation.tsx index 685e3c0d9c6..2ed3904b2a3 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/sidebar/DomainSubnavigation.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/sidebar/DomainSubnavigation.tsx @@ -25,7 +25,6 @@ import { SubnavigationSubheading, } from 'design-system'; import React from 'react'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { getLocalizedCategoryMetricName, getLocalizedMetricDomain, @@ -33,6 +32,7 @@ import { hasMessage, translate, } from '../../../helpers/l10n'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { MeasureEnhanced } from '../../../types/types'; import { addMeasureCategories, diff --git a/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx b/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx index 5c91aa611a7..935fe980209 100644 --- a/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx @@ -32,9 +32,9 @@ import { import * as React from 'react'; import withAppStateContext from '../../../app/components/app-state/withAppStateContext'; import { Image } from '../../../components/common/Image'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { translate } from '../../../helpers/l10n'; import { getCreateProjectModeLocation } from '../../../helpers/urls'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { AlmKeys } from '../../../types/alm-settings'; import { AppState } from '../../../types/appstate'; import { CreateProjectModes } from './types'; diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx index ca5ddc08eba..b1907d35798 100644 --- a/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx +++ b/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx @@ -19,10 +19,10 @@ */ import { HelperHintIcon } from 'design-system'; import * as React from 'react'; -import DocumentationTooltip from '../../../components/common/DocumentationTooltip'; import SoftwareImpactSeverityIcon from '../../../components/icon-mappers/SoftwareImpactSeverityIcon'; import { IMPACT_SEVERITIES } from '../../../helpers/constants'; import { translate } from '../../../helpers/l10n'; +import DocHelpTooltip from '../../../sonar-aligned/components/controls/DocHelpTooltip'; import { SoftwareImpactSeverity } from '../../../types/clean-code-taxonomy'; import { CommonProps, SimpleListStyleFacet } from './SimpleListStyleFacet'; @@ -43,7 +43,7 @@ export function SeverityFacet(props: Props) { <SoftwareImpactSeverityIcon severity={severity} disabled={disabled} /> )} help={ - <DocumentationTooltip + <DocHelpTooltip placement="right" content={ <> @@ -59,7 +59,7 @@ export function SeverityFacet(props: Props) { ]} > <HelperHintIcon /> - </DocumentationTooltip> + </DocHelpTooltip> } {...rest} /> diff --git a/server/sonar-web/src/main/js/apps/overview/branches/ApplicationLeakPeriodInfo.tsx b/server/sonar-web/src/main/js/apps/overview/branches/ApplicationLeakPeriodInfo.tsx index 06580922a2d..7f7ef16ebcd 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/ApplicationLeakPeriodInfo.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/ApplicationLeakPeriodInfo.tsx @@ -19,9 +19,9 @@ */ import { HelperHintIcon } from 'design-system'; import * as React from 'react'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import DateFromNow from '../../../components/intl/DateFromNow'; import { translateWithParameters } from '../../../helpers/l10n'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { ApplicationPeriod } from '../../../types/application'; export interface ApplicationLeakPeriodInfoProps { diff --git a/server/sonar-web/src/main/js/apps/overview/branches/QualityGateStatusTitle.tsx b/server/sonar-web/src/main/js/apps/overview/branches/QualityGateStatusTitle.tsx index 9932523ba05..481531aad96 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/QualityGateStatusTitle.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/QualityGateStatusTitle.tsx @@ -19,8 +19,8 @@ */ import { HelperHintIcon, LightGreyCardTitle, PageTitle } from 'design-system'; import React from 'react'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { translate } from '../../../helpers/l10n'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; export function QualityGateStatusTitle() { return ( diff --git a/server/sonar-web/src/main/js/apps/overview/components/IgnoredConditionWarning.tsx b/server/sonar-web/src/main/js/apps/overview/components/IgnoredConditionWarning.tsx index 89bf1fef0ec..56fd70b6516 100644 --- a/server/sonar-web/src/main/js/apps/overview/components/IgnoredConditionWarning.tsx +++ b/server/sonar-web/src/main/js/apps/overview/components/IgnoredConditionWarning.tsx @@ -19,8 +19,8 @@ */ import { FlagMessage, HelperHintIcon } from 'design-system'; import React from 'react'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { translate } from '../../../helpers/l10n'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; export default function IgnoredConditionWarning() { return ( diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/BranchQualityGate.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/BranchQualityGate.tsx index 2cb03cfc314..45315610a8a 100644 --- a/server/sonar-web/src/main/js/apps/overview/pullRequests/BranchQualityGate.tsx +++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/BranchQualityGate.tsx @@ -20,7 +20,7 @@ import { HelperHintIcon, LightPrimary, QualityGateIndicator, TextMuted } from 'design-system'; import React from 'react'; import { useIntl } from 'react-intl'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { BranchLike } from '../../../types/branch-like'; import { QualityGateStatusConditionEnhanced } from '../../../types/quality-gates'; import { Component, Status } from '../../../types/types'; diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/ListHeader.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/ListHeader.tsx index 2e08b3488a9..ce6891f530a 100644 --- a/server/sonar-web/src/main/js/apps/permission-templates/components/ListHeader.tsx +++ b/server/sonar-web/src/main/js/apps/permission-templates/components/ListHeader.tsx @@ -20,8 +20,8 @@ import { ContentCell, FlagMessage, HelperHintIcon, TableRow } from 'design-system'; import * as React from 'react'; import InstanceMessage from '../../../components/common/InstanceMessage'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { translate } from '../../../helpers/l10n'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { Permission } from '../../../types/types'; interface Props { diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionCell.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionCell.tsx index b68f60da361..aaad8c6b7b3 100644 --- a/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionCell.tsx +++ b/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionCell.tsx @@ -19,8 +19,8 @@ */ import { ContentCell, HelperHintIcon } from 'design-system'; import * as React from 'react'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { translate } from '../../../helpers/l10n'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; interface Props { permission: { diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeTable.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeTable.tsx index 5027286ccfe..20f766a3620 100644 --- a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeTable.tsx +++ b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeTable.tsx @@ -19,9 +19,9 @@ */ import { ActionCell, ContentCell, HelperHintIcon, Table, TableRow } from 'design-system'; import * as React from 'react'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { getBranchLikeKey } from '../../../helpers/branch-like'; import { translate } from '../../../helpers/l10n'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { BranchLike } from '../../../types/branch-like'; import { Component } from '../../../types/types'; import BranchLikeRow from './BranchLikeRow'; diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchPurgeSetting.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchPurgeSetting.tsx index dce0f7d4ef6..ee171be74f5 100644 --- a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchPurgeSetting.tsx +++ b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchPurgeSetting.tsx @@ -20,10 +20,10 @@ import { HelperHintIcon, Spinner, Switch } from 'design-system'; import * as React from 'react'; import { useEffect } from 'react'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { isMainBranch } from '../../../helpers/branch-like'; import { translate } from '../../../helpers/l10n'; import { useExcludeFromPurgeMutation } from '../../../queries/branch'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { Branch } from '../../../types/branch-like'; import { Component } from '../../../types/types'; diff --git a/server/sonar-web/src/main/js/apps/projectInformation/about/components/MetaKey.tsx b/server/sonar-web/src/main/js/apps/projectInformation/about/components/MetaKey.tsx index 1aefa601e49..7eb6b2adf69 100644 --- a/server/sonar-web/src/main/js/apps/projectInformation/about/components/MetaKey.tsx +++ b/server/sonar-web/src/main/js/apps/projectInformation/about/components/MetaKey.tsx @@ -19,8 +19,8 @@ */ import { ClipboardIconButton, CodeSnippet, HelperHintIcon, SubHeading } from 'design-system'; import * as React from 'react'; -import HelpTooltip from '../../../../components/controls/HelpTooltip'; import { translate } from '../../../../helpers/l10n'; +import HelpTooltip from '../../../../sonar-aligned/components/controls/HelpTooltip'; interface MetaKeyProps { componentKey: string; diff --git a/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx b/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx index fde87b3a979..208a0e3ba22 100644 --- a/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx @@ -37,12 +37,12 @@ import { FormattedMessage } from 'react-intl'; import { OptionProps, components } from 'react-select'; import A11ySkipTarget from '../../components/a11y/A11ySkipTarget'; import DisableableSelectOption from '../../components/common/DisableableSelectOption'; -import HelpTooltip from '../../components/controls/HelpTooltip'; import Suggestions from '../../components/embed-docs-modal/Suggestions'; import { translate } from '../../helpers/l10n'; import { isDiffMetric } from '../../helpers/measures'; import { LabelValueSelectOption } from '../../helpers/search'; import { getQualityGateUrl } from '../../helpers/urls'; +import HelpTooltip from '../../sonar-aligned/components/controls/HelpTooltip'; import { QualityGate } from '../../types/types'; import BuiltInQualityGateBadge from '../quality-gates/components/BuiltInQualityGateBadge'; import { USE_SYSTEM_DEFAULT } from './constants'; diff --git a/server/sonar-web/src/main/js/apps/projectQualityProfiles/ProjectQualityProfilesAppRenderer.tsx b/server/sonar-web/src/main/js/apps/projectQualityProfiles/ProjectQualityProfilesAppRenderer.tsx index 9b4128d882e..791fbddc4aa 100644 --- a/server/sonar-web/src/main/js/apps/projectQualityProfiles/ProjectQualityProfilesAppRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/projectQualityProfiles/ProjectQualityProfilesAppRenderer.tsx @@ -38,10 +38,10 @@ import * as React from 'react'; import { Helmet } from 'react-helmet-async'; import { Profile } from '../../api/quality-profiles'; import A11ySkipTarget from '../../components/a11y/A11ySkipTarget'; -import HelpTooltip from '../../components/controls/HelpTooltip'; import Suggestions from '../../components/embed-docs-modal/Suggestions'; import { translate } from '../../helpers/l10n'; import { getRulesUrl } from '../../helpers/urls'; +import HelpTooltip from '../../sonar-aligned/components/controls/HelpTooltip'; import { Component } from '../../types/types'; import BuiltInQualityProfileBadge from '../quality-profiles/components/BuiltInQualityProfileBadge'; import AddLanguageModal from './components/AddLanguageModal'; diff --git a/server/sonar-web/src/main/js/apps/projects/filters/QualityGateFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/QualityGateFilter.tsx index cbc1a174a9d..88fdd770958 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/QualityGateFilter.tsx +++ b/server/sonar-web/src/main/js/apps/projects/filters/QualityGateFilter.tsx @@ -20,9 +20,9 @@ import { FacetBox, FacetItem, HelperHintIcon, QualityGateIndicator } from 'design-system'; import { without } from 'lodash'; import * as React from 'react'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { translate } from '../../../helpers/l10n'; import { isDefined } from '../../../helpers/types'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { RawQuery, Status } from '../../../types/types'; import { FacetItemsList } from '../../issues/sidebar/FacetItemsList'; import { formatFacetStat } from '../../issues/utils'; diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx index e6cf3d19f8f..e13d7e2a77d 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx +++ b/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx @@ -33,9 +33,9 @@ import * as React from 'react'; import { OptionProps, SingleValueProps, components } from 'react-select'; import { Project } from '../../api/project-management'; import withAppStateContext from '../../app/components/app-state/withAppStateContext'; -import HelpTooltip from '../../components/controls/HelpTooltip'; import { translate } from '../../helpers/l10n'; import { LabelValueSelectOption } from '../../helpers/search'; +import HelpTooltip from '../../sonar-aligned/components/controls/HelpTooltip'; import { AppState } from '../../types/appstate'; import { Visibility } from '../../types/component'; import BulkApplyTemplateModal from './BulkApplyTemplateModal'; diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCondition.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCondition.tsx index 3aae6feafeb..4d523433faa 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCondition.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCondition.tsx @@ -22,9 +22,9 @@ import { HelperHintIcon, Highlight } from 'design-system'; import React from 'react'; import { FormattedMessage } from 'react-intl'; import withMetricsContext from '../../../app/components/metrics/withMetricsContext'; -import DocumentationTooltip from '../../../components/common/DocumentationTooltip'; import { translate } from '../../../helpers/l10n'; import { formatMeasure } from '../../../helpers/measures'; +import DocHelpTooltip from '../../../sonar-aligned/components/controls/DocHelpTooltip'; import { MetricKey } from '../../../types/metrics'; import { Condition, Dict, Metric } from '../../../types/types'; import { getCaycConditionMetadata, getLocalizedMetricNameNoDiffMetric } from '../utils'; @@ -64,12 +64,12 @@ function CaycCondition({ condition, metric, metrics }: Readonly<Props>) { value: <Highlight> {formatMeasure(condition.error, metric.type)}</Highlight>, }} /> - <DocumentationTooltip + <DocHelpTooltip className="sw-ml-2 sw-align-text-top" content={translate('quality_gates.conditions.cayc.threshold.hint')} > <HelperHintIcon /> - </DocumentationTooltip> + </DocHelpTooltip> </StyledContentCell> )} </StyledItem> diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx index 259d754d95e..d5323fb8bf5 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx @@ -36,10 +36,10 @@ import { FormattedMessage } from 'react-intl'; import { useAvailableFeatures } from '../../../app/components/available-features/withAvailableFeatures'; import { useMetrics } from '../../../app/components/metrics/withMetricsContext'; import DocumentationLink from '../../../components/common/DocumentationLink'; -import DocumentationTooltip from '../../../components/common/DocumentationTooltip'; import ModalButton, { ModalProps } from '../../../components/controls/ModalButton'; import { useDocUrl } from '../../../helpers/docs'; import { getLocalizedMetricName, translate } from '../../../helpers/l10n'; +import DocHelpTooltip from '../../../sonar-aligned/components/controls/DocHelpTooltip'; import { Feature } from '../../../types/features'; import { MetricKey } from '../../../types/metrics'; import { CaycStatus, Condition as ConditionType, QualityGate } from '../../../types/types'; @@ -181,7 +181,7 @@ export default function Conditions({ qualityGate, isFetching }: Readonly<Props>) {translate('quality_gates.conditions')} </HeadingDark> {!qualityGate.isBuiltIn && ( - <DocumentationTooltip + <DocHelpTooltip className="sw-ml-2" content={translate('quality_gates.conditions.help')} links={[ @@ -192,7 +192,7 @@ export default function Conditions({ qualityGate, isFetching }: Readonly<Props>) ]} > <HelperHintIcon /> - </DocumentationTooltip> + </DocHelpTooltip> )} <Spinner loading={isFetching} className="sw-ml-4 sw-mt-1" /> </div> @@ -227,12 +227,12 @@ export default function Conditions({ qualityGate, isFetching }: Readonly<Props>) <div> <div className="sw-flex sw-items-center sw-gap-2 sw-mb-2"> <HeadingDark as="h3">{translate('quality_gates.conditions.cayc')}</HeadingDark> - <DocumentationTooltip + <DocHelpTooltip content={translate('quality_gates.conditions.cayc.hint')} placement="right" > <HelperHintIcon /> - </DocumentationTooltip> + </DocHelpTooltip> </div> <HighlightedSection className="sw-p-0 sw-my-2 sw-w-3/4" id="cayc-highlight"> diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx index ae76b6635f0..736d86f8b60 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx @@ -19,8 +19,8 @@ */ import { FlagMessage, HelperHintIcon, SubTitle } from 'design-system'; import * as React from 'react'; -import DocumentationTooltip from '../../../components/common/DocumentationTooltip'; import { translate } from '../../../helpers/l10n'; +import DocHelpTooltip from '../../../sonar-aligned/components/controls/DocHelpTooltip'; import { QualityGate } from '../../../types/types'; import Conditions from './Conditions'; import Projects from './Projects'; @@ -50,12 +50,9 @@ export function DetailsContent(props: DetailsContentProps) { <div className="sw-flex sw-flex-col"> <SubTitle as="h3" className="sw-body-md-highlight"> {translate('quality_gates.projects')} - <DocumentationTooltip - className="sw-ml-2" - content={translate('quality_gates.projects.help')} - > + <DocHelpTooltip className="sw-ml-2" content={translate('quality_gates.projects.help')}> <HelperHintIcon /> - </DocumentationTooltip> + </DocHelpTooltip> </SubTitle> {qualityGate.isDefault ? ( diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx index 77e4efe8365..b7ee1f61cee 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx @@ -19,9 +19,9 @@ */ import { ButtonPrimary, HelperHintIcon, Title } from 'design-system'; import * as React from 'react'; -import DocumentationTooltip from '../../../components/common/DocumentationTooltip'; import ModalButton, { ModalProps } from '../../../components/controls/ModalButton'; import { translate } from '../../../helpers/l10n'; +import DocHelpTooltip from '../../../sonar-aligned/components/controls/DocHelpTooltip'; import CreateQualityGateForm from './CreateQualityGateForm'; interface Props { @@ -54,7 +54,7 @@ export default function ListHeader({ canCreate }: Readonly<Props>) { <Title className="sw-flex sw-items-center sw-body-md-highlight sw-mb-0"> {translate('quality_gates.page')} </Title> - <DocumentationTooltip + <DocHelpTooltip className="sw-ml-2" content={translate('quality_gates.help')} links={[ @@ -65,7 +65,7 @@ export default function ListHeader({ canCreate }: Readonly<Props>) { ]} > <HelperHintIcon /> - </DocumentationTooltip> + </DocHelpTooltip> </div> {canCreate && <CreateQualityGateModal />} </div> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.tsx index 226c6e0ecec..4e2a832175e 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.tsx @@ -33,10 +33,10 @@ import * as React from 'react'; import { useEffect, useState } from 'react'; import { getQualityProfile } from '../../../api/quality-profiles'; import { searchRules } from '../../../api/rules'; -import DocumentationTooltip from '../../../components/common/DocumentationTooltip'; import { translate } from '../../../helpers/l10n'; import { isDefined } from '../../../helpers/types'; import { getRulesUrl } from '../../../helpers/urls'; +import DocHelpTooltip from '../../../sonar-aligned/components/controls/DocHelpTooltip'; import { CleanCodeAttributeCategory, SoftwareQuality } from '../../../types/clean-code-taxonomy'; import { SearchRulesResponse } from '../../../types/coding-rules'; import { RulesFacetName } from '../../../types/rules'; @@ -219,11 +219,11 @@ export default function ProfileRules({ profile }: Readonly<Props>) { {/* this user could potentially activate more rules if the profile was not built-in */} {/* in such cases it's better to show the button but disable it with a tooltip */} {actions.copy && profile.isBuiltIn && ( - <DocumentationTooltip content={translate('quality_profiles.activate_more.help.built_in')}> + <DocHelpTooltip content={translate('quality_profiles.activate_more.help.built_in')}> <ButtonPrimary className="it__quality-profiles__activate-rules" disabled> {translate('quality_profiles.activate_more')} </ButtonPrimary> - </DocumentationTooltip> + </DocHelpTooltip> )} </div> </section> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesDeprecatedWarning.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesDeprecatedWarning.tsx index 59945d15aae..19d831e5749 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesDeprecatedWarning.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesDeprecatedWarning.tsx @@ -20,9 +20,9 @@ import { FlagMessage, HelperHintIcon, Link } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { translate } from '../../../helpers/l10n'; import { getDeprecatedActiveRulesUrl } from '../../../helpers/urls'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; interface Props { activeDeprecatedRules: number; diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesSonarWayComparison.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesSonarWayComparison.tsx index 3b6e43f84be..762d3f8228b 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesSonarWayComparison.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRulesSonarWayComparison.tsx @@ -20,9 +20,9 @@ import { FlagMessage, Link } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { translate, translateWithParameters } from '../../../helpers/l10n'; import { getRulesUrl } from '../../../helpers/urls'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; interface Props { language: string; diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.tsx index a0f2f4861e5..11ce798c9f1 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.tsx @@ -21,7 +21,7 @@ import { ContentCell, FlagMessage, HelperHintIcon, Table, TableRow } from 'desig import { groupBy, pick, sortBy } from 'lodash'; import * as React from 'react'; import { useIntl } from 'react-intl'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { Language } from '../../../types/languages'; import { Dict } from '../../../types/types'; import { Profile } from '../types'; diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx index 3553fa6a9b0..49b4badb0c2 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx @@ -33,12 +33,12 @@ import { import * as React from 'react'; import withComponentContext from '../../../app/components/componentContext/withComponentContext'; import withCurrentUserContext from '../../../app/components/current-user/withCurrentUserContext'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import Tooltip from '../../../components/controls/Tooltip'; import Measure from '../../../components/measure/Measure'; import { PopupPlacement } from '../../../components/ui/popups'; import { isBranch } from '../../../helpers/branch-like'; import { translate } from '../../../helpers/l10n'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { BranchLike } from '../../../types/branch-like'; import { ComponentContextShape } from '../../../types/component'; import { MetricKey, MetricType } from '../../../types/metrics'; diff --git a/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.tsx b/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.tsx index f844a2df4d7..82d220e413f 100644 --- a/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.tsx +++ b/server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.tsx @@ -19,9 +19,9 @@ */ import { BasicSeparator, ThirdPartyButton } from 'design-system'; import * as React from 'react'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { translateWithParameters } from '../../../helpers/l10n'; import { getBaseUrl } from '../../../helpers/system'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { IdentityProvider } from '../../../types/types'; interface Props { diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionBox.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionBox.tsx index dca6a27b378..5320238478b 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionBox.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionBox.tsx @@ -30,11 +30,11 @@ import { import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import DocumentationLink from '../../../../components/common/DocumentationLink'; -import HelpTooltip from '../../../../components/controls/HelpTooltip'; import Tooltip from '../../../../components/controls/Tooltip'; import { ALM_DOCUMENTATION_PATHS, IMPORT_COMPATIBLE_ALMS } from '../../../../helpers/constants'; import { getEdition, getEditionUrl } from '../../../../helpers/editions'; import { translate, translateWithParameters } from '../../../../helpers/l10n'; +import HelpTooltip from '../../../../sonar-aligned/components/controls/HelpTooltip'; import { AlmBindingDefinitionBase, AlmKeys, diff --git a/server/sonar-web/src/main/js/apps/users/UsersApp.tsx b/server/sonar-web/src/main/js/apps/users/UsersApp.tsx index 13c7b35368e..dcb20140794 100644 --- a/server/sonar-web/src/main/js/apps/users/UsersApp.tsx +++ b/server/sonar-web/src/main/js/apps/users/UsersApp.tsx @@ -32,7 +32,6 @@ import { Helmet } from 'react-helmet-async'; import { getIdentityProviders } from '../../api/users'; import GitHubSynchronisationWarning from '../../app/components/GitHubSynchronisationWarning'; import GitLabSynchronisationWarning from '../../app/components/GitLabSynchronisationWarning'; -import HelpTooltip from '../../components/controls/HelpTooltip'; import ListFooter from '../../components/controls/ListFooter'; import { ManagedFilter } from '../../components/controls/ManagedFilter'; import Suggestions from '../../components/embed-docs-modal/Suggestions'; @@ -41,6 +40,7 @@ import { translate } from '../../helpers/l10n'; import { LabelValueSelectOption } from '../../helpers/search'; import { useIdentityProviderQuery } from '../../queries/identity-provider/common'; import { useUsersQueries } from '../../queries/users'; +import HelpTooltip from '../../sonar-aligned/components/controls/HelpTooltip'; import { IdentityProvider, Provider } from '../../types/types'; import { RestUserDetailed } from '../../types/users'; import Header from './Header'; diff --git a/server/sonar-web/src/main/js/apps/users/UsersList.tsx b/server/sonar-web/src/main/js/apps/users/UsersList.tsx index 19a2bb20dd6..38c6ad6fc40 100644 --- a/server/sonar-web/src/main/js/apps/users/UsersList.tsx +++ b/server/sonar-web/src/main/js/apps/users/UsersList.tsx @@ -19,8 +19,8 @@ */ import { ActionCell, ContentCell, HelperHintIcon, Table, TableRow } from 'design-system'; import * as React from 'react'; -import HelpTooltip from '../../components/controls/HelpTooltip'; import { translate } from '../../helpers/l10n'; +import HelpTooltip from '../../sonar-aligned/components/controls/HelpTooltip'; import { IdentityProvider, Provider } from '../../types/types'; import { RestUserDetailed } from '../../types/users'; import UserListItem from './components/UserListItem'; diff --git a/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiSidebar.tsx b/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiSidebar.tsx index dda53c78836..1d445d41e02 100644 --- a/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiSidebar.tsx +++ b/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiSidebar.tsx @@ -32,8 +32,8 @@ import { sortBy } from 'lodash'; import { OpenAPIV3 } from 'openapi-types'; import React, { Fragment, useContext, useMemo, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { translate } from '../../../helpers/l10n'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { Dict } from '../../../types/types'; import { InternalExtension } from '../types'; import { URL_DIVIDER, getApiEndpointKey } from '../utils'; diff --git a/server/sonar-web/src/main/js/apps/web-api/components/Search.tsx b/server/sonar-web/src/main/js/apps/web-api/components/Search.tsx index be7bb705e78..ec3be1f3c87 100644 --- a/server/sonar-web/src/main/js/apps/web-api/components/Search.tsx +++ b/server/sonar-web/src/main/js/apps/web-api/components/Search.tsx @@ -19,8 +19,8 @@ */ import { Checkbox, HelperHintIcon, InputSearch } from 'design-system'; import * as React from 'react'; -import HelpTooltip from '../../../components/controls/HelpTooltip'; import { translate } from '../../../helpers/l10n'; +import HelpTooltip from '../../../sonar-aligned/components/controls/HelpTooltip'; import { Query } from '../utils'; interface Props { diff --git a/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx b/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx deleted file mode 100644 index 7fd645b4976..00000000000 --- a/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx +++ /dev/null @@ -1,123 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2024 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - */ -import { first, last } from 'lodash'; -import * as React from 'react'; -import HelpTooltip from '../../components/controls/HelpTooltip'; -import { KeyboardKeys } from '../../helpers/keycodes'; -import { Placement } from '../controls/Tooltip'; -import DocumentationLink from './DocumentationLink'; -import Link from './Link'; - -export interface DocumentationTooltipProps { - children?: React.ReactNode; - className?: string; - placement?: Placement; - content?: React.ReactNode; - links?: Array<{ href: string; label: string; inPlace?: boolean; doc?: boolean }>; - title?: string; -} - -export default function DocumentationTooltip(props: DocumentationTooltipProps) { - const nextSelectableNode = React.useRef<HTMLElement | undefined | null>(); - const linksRef = React.useRef<Array<HTMLAnchorElement | null>>([]); - const helpRef = React.useRef<HTMLElement>(null); - const { className, children, content, links, title, placement } = props; - - function handleShowTooltip() { - document.addEventListener('keydown', handleTabPress); - } - - function handleHideTooltip() { - document.removeEventListener('keydown', handleTabPress); - nextSelectableNode.current = undefined; - } - - function handleTabPress(event: KeyboardEvent) { - if (event.code === KeyboardKeys.Tab) { - if (event.shiftKey) { - if (event.target === first(linksRef.current)) { - helpRef.current?.focus(); - } - return; - } - if (event.target === last(linksRef.current)) { - event.preventDefault(); - nextSelectableNode.current?.focus(); - return; - } - if (nextSelectableNode.current === undefined) { - nextSelectableNode.current = event.target as HTMLElement; - event.preventDefault(); - linksRef.current[0]?.focus(); - } - } - } - - return ( - <HelpTooltip - className={className} - onShow={handleShowTooltip} - onHide={handleHideTooltip} - placement={placement} - isInteractive - innerRef={helpRef} - overlay={ - <div className="sw-py-4"> - {title && ( - <div className="sw-mb-2"> - <strong>{title}</strong> - </div> - )} - - {content && <div>{content}</div>} - - {links && ( - <> - <hr className="sw-my-4" /> - - {links.map(({ href, label, inPlace, doc = true }, index) => ( - <div className="sw-mb-1" key={label}> - {doc ? ( - <DocumentationLink - to={href} - innerRef={(ref) => (linksRef.current[index] = ref)} - > - {label} - </DocumentationLink> - ) : ( - <Link - to={href} - ref={(ref) => (linksRef.current[index] = ref)} - target={inPlace ? undefined : '_blank'} - > - {label} - </Link> - )} - </div> - ))} - </> - )} - </div> - } - > - {children} - </HelpTooltip> - ); -} diff --git a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx index 4119d20a857..a9b2ab472de 100644 --- a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx +++ b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx @@ -43,7 +43,7 @@ export interface TooltipProps { visible?: 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 DocumentationTooltip + // See example DocHelpTooltip isInteractive?: boolean; classNameInner?: string; } diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx index 632e595bfae..6097ec405e8 100644 --- a/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx +++ b/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx @@ -21,9 +21,9 @@ import { IconProps, TextSubdued } from 'design-system'; import * as React from 'react'; import { translate } from '../../../helpers/l10n'; +import DocHelpTooltip from '../../../sonar-aligned/components/controls/DocHelpTooltip'; import { IssueSeverity as IssueSeverityType } from '../../../types/issues'; import { Issue } from '../../../types/types'; -import DocumentationTooltip from '../../common/DocumentationTooltip'; import IssueSeverityIcon from '../../icon-mappers/IssueSeverityIcon'; import { DeprecatedFieldTooltip } from './DeprecatedFieldTooltip'; @@ -33,7 +33,7 @@ interface Props extends IconProps { export default function IssueSeverity({ issue, ...iconProps }: Readonly<Props>) { return ( - <DocumentationTooltip + <DocHelpTooltip content={<DeprecatedFieldTooltip field="severity" />} links={[ { @@ -51,6 +51,6 @@ export default function IssueSeverity({ issue, ...iconProps }: Readonly<Props>) /> {translate('severity', issue.severity)} </TextSubdued> - </DocumentationTooltip> + </DocHelpTooltip> ); } diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx index fca4bc1cc81..cf04cc0553d 100644 --- a/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx +++ b/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx @@ -21,8 +21,8 @@ import { IconProps, TextSubdued } from 'design-system'; import * as React from 'react'; import { translate } from '../../../helpers/l10n'; +import DocHelpTooltip from '../../../sonar-aligned/components/controls/DocHelpTooltip'; import { Issue } from '../../../types/types'; -import DocumentationTooltip from '../../common/DocumentationTooltip'; import IssueTypeIcon from '../../icon-mappers/IssueTypeIcon'; import { DeprecatedFieldTooltip } from './DeprecatedFieldTooltip'; @@ -32,7 +32,7 @@ interface Props extends IconProps { export default function IssueType({ issue, ...iconProps }: Readonly<Props>) { return ( - <DocumentationTooltip + <DocHelpTooltip content={<DeprecatedFieldTooltip field="type" />} links={[ { @@ -45,6 +45,6 @@ export default function IssueType({ issue, ...iconProps }: Readonly<Props>) { <IssueTypeIcon fill="iconTypeDisabled" type={issue.type} aria-hidden {...iconProps} /> {translate('issue.type', issue.type)} </TextSubdued> - </DocumentationTooltip> + </DocHelpTooltip> ); } diff --git a/server/sonar-web/src/main/js/components/permissions/PermissionHeader.tsx b/server/sonar-web/src/main/js/components/permissions/PermissionHeader.tsx index 0d39147668b..45ffe967014 100644 --- a/server/sonar-web/src/main/js/components/permissions/PermissionHeader.tsx +++ b/server/sonar-web/src/main/js/components/permissions/PermissionHeader.tsx @@ -22,10 +22,10 @@ import { BareButton, ContentCell, HelperHintIcon } from 'design-system'; import * as React from 'react'; import { translate, translateWithParameters } from '../../helpers/l10n'; import { isPermissionDefinitionGroup } from '../../helpers/permissions'; +import HelpTooltip from '../../sonar-aligned/components/controls/HelpTooltip'; import { PermissionDefinition, PermissionDefinitionGroup } from '../../types/types'; import InstanceMessage from '../common/InstanceMessage'; import ClickEventBoundary from '../controls/ClickEventBoundary'; -import HelpTooltip from '../controls/HelpTooltip'; import Tooltip from '../controls/Tooltip'; interface Props { diff --git a/server/sonar-web/src/main/js/components/shared/CleanCodeAttributePill.tsx b/server/sonar-web/src/main/js/components/shared/CleanCodeAttributePill.tsx index b8c20b40ae1..da66a71b98e 100644 --- a/server/sonar-web/src/main/js/components/shared/CleanCodeAttributePill.tsx +++ b/server/sonar-web/src/main/js/components/shared/CleanCodeAttributePill.tsx @@ -20,8 +20,8 @@ import { Pill } from 'design-system'; import React from 'react'; import { translate } from '../../helpers/l10n'; +import DocHelpTooltip from '../../sonar-aligned/components/controls/DocHelpTooltip'; import { CleanCodeAttribute, CleanCodeAttributeCategory } from '../../types/clean-code-taxonomy'; -import DocumentationTooltip from '../common/DocumentationTooltip'; export interface Props { className?: string; @@ -34,7 +34,7 @@ export function CleanCodeAttributePill(props: Readonly<Props>) { const { className, cleanCodeAttributeCategory, cleanCodeAttribute, type = 'issue' } = props; return ( - <DocumentationTooltip + <DocHelpTooltip content={ <> <p className="sw-mb-4"> @@ -70,6 +70,6 @@ export function CleanCodeAttributePill(props: Readonly<Props>) { <span> | {translate(type, 'clean_code_attribute', cleanCodeAttribute)}</span> )} </Pill> - </DocumentationTooltip> + </DocHelpTooltip> ); } diff --git a/server/sonar-web/src/main/js/components/shared/SoftwareImpactPill.tsx b/server/sonar-web/src/main/js/components/shared/SoftwareImpactPill.tsx index d4dca929885..916b2736627 100644 --- a/server/sonar-web/src/main/js/components/shared/SoftwareImpactPill.tsx +++ b/server/sonar-web/src/main/js/components/shared/SoftwareImpactPill.tsx @@ -22,8 +22,8 @@ import { Pill } from 'design-system'; import React from 'react'; import { FormattedMessage } from 'react-intl'; import { translate } from '../../helpers/l10n'; +import DocHelpTooltip from '../../sonar-aligned/components/controls/DocHelpTooltip'; import { SoftwareImpactSeverity } from '../../types/clean-code-taxonomy'; -import DocumentationTooltip from '../common/DocumentationTooltip'; import SoftwareImpactSeverityIcon from '../icon-mappers/SoftwareImpactSeverityIcon'; export interface Props { @@ -43,7 +43,7 @@ export default function SoftwareImpactPill(props: Props) { }[severity] as 'danger' | 'warning' | 'info'; return ( - <DocumentationTooltip + <DocHelpTooltip content={ <FormattedMessage id={`${type}.impact.severity.tooltip`} @@ -65,6 +65,6 @@ export default function SoftwareImpactPill(props: Props) { {quality} <SoftwareImpactSeverityIcon severity={severity} data-guiding-id="issue-3" /> </Pill> - </DocumentationTooltip> + </DocHelpTooltip> ); } diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CreateJenkinsfileBulletPoint.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CreateJenkinsfileBulletPoint.tsx index fc59e061889..84b70ae1789 100644 --- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CreateJenkinsfileBulletPoint.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CreateJenkinsfileBulletPoint.tsx @@ -19,7 +19,7 @@ */ import { CodeSnippet, FlagMessage, HelperHintIcon, NumberedListItem } from 'design-system'; import * as React from 'react'; -import HelpTooltip from '../../../../components/controls/HelpTooltip'; +import HelpTooltip from '../../../../sonar-aligned/components/controls/HelpTooltip'; import SentenceWithFilename from '../../components/SentenceWithFilename'; import SentenceWithHighlights from '../../components/SentenceWithHighlights'; diff --git a/server/sonar-web/src/main/js/components/tutorials/other/TokenStep.tsx b/server/sonar-web/src/main/js/components/tutorials/other/TokenStep.tsx index 4349810a5fd..675a4801c03 100644 --- a/server/sonar-web/src/main/js/components/tutorials/other/TokenStep.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/other/TokenStep.tsx @@ -48,9 +48,9 @@ import { computeTokenExpirationDate, getAvailableExpirationOptions, } from '../../../helpers/tokens'; +import DocHelpTooltip from '../../../sonar-aligned/components/controls/DocHelpTooltip'; import { TokenExpiration, TokenType, UserToken } from '../../../types/token'; import { LoggedInUser } from '../../../types/users'; -import DocumentationTooltip from '../../common/DocumentationTooltip'; import ProjectTokenScopeInfo from '../components/ProjectTokenScopeInfo'; import Step from '../components/Step'; import { getUniqueTokenName } from '../utils'; @@ -213,7 +213,7 @@ export default class TokenStep extends React.PureComponent<Props, State> { <div className="sw-flex sw-flex-col"> <HighlightLabel className="sw-mb-2" htmlFor="generate-token-input"> {translate('onboarding.token.name.label')} - <DocumentationTooltip + <DocHelpTooltip className="sw-ml-2" content={translate('onboarding.token.name.help')} links={[ @@ -224,7 +224,7 @@ export default class TokenStep extends React.PureComponent<Props, State> { ]} > <HelperHintIcon /> - </DocumentationTooltip> + </DocHelpTooltip> </HighlightLabel> <InputField id="generate-token-input" @@ -276,7 +276,7 @@ export default class TokenStep extends React.PureComponent<Props, State> { <div className="sw-flex sw-flex-col sw-mt-4"> <HighlightLabel className="sw-mb-2" htmlFor="existing-token-input"> {translate('onboarding.token.use_existing_token.label')} - <DocumentationTooltip + <DocHelpTooltip className="sw-ml-2" content={translate('onboarding.token.use_existing_token.help')} links={[ @@ -287,7 +287,7 @@ export default class TokenStep extends React.PureComponent<Props, State> { ]} > <HelperHintIcon /> - </DocumentationTooltip> + </DocHelpTooltip> </HighlightLabel> <InputField id="existing-token-input" diff --git a/server/sonar-web/src/main/js/sonar-aligned/components/controls/DocHelpTooltip.tsx b/server/sonar-web/src/main/js/sonar-aligned/components/controls/DocHelpTooltip.tsx new file mode 100644 index 00000000000..8454f7c1b90 --- /dev/null +++ b/server/sonar-web/src/main/js/sonar-aligned/components/controls/DocHelpTooltip.tsx @@ -0,0 +1,148 @@ +/* + * SonarQube + * Copyright (C) 2009-2024 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import classNames from 'classnames'; +import { HelperHintIcon } from 'design-system'; +import { first, last } from 'lodash'; +import * as React from 'react'; +import DocumentationLink from '../../../components/common/DocumentationLink'; +import Link from '../../../components/common/Link'; +import Tooltip, { Placement } from '../../../components/controls/Tooltip'; +import { KeyboardKeys } from '../../../helpers/keycodes'; +import { translate } from '../../../helpers/l10n'; + +export interface DocHelpTooltipProps { + children?: React.ReactNode; + className?: string; + content?: React.ReactNode; + linkTextLabel?: string; + links?: Array<{ href: string; label?: string; inPlace?: boolean; doc?: boolean }>; + placement?: Placement; + title?: string; +} + +export default function DocHelpTooltip(props: Readonly<DocHelpTooltipProps>) { + const nextSelectableNode = React.useRef<HTMLElement | undefined | null>(); + const linksRef = React.useRef<Array<HTMLAnchorElement | null>>([]); + const helpRef = React.useRef<HTMLElement>(null); + const { className, children, content, links, title, placement, linkTextLabel } = props; + + function handleShowTooltip() { + document.addEventListener('keydown', handleTabPress); + } + + function handleHideTooltip() { + document.removeEventListener('keydown', handleTabPress); + nextSelectableNode.current = undefined; + } + + function handleTabPress(event: KeyboardEvent) { + if (event.code === KeyboardKeys.Tab) { + if (event.shiftKey) { + if (event.target === first(linksRef.current)) { + helpRef.current?.focus(); + } + return; + } + if (event.target === last(linksRef.current)) { + event.preventDefault(); + nextSelectableNode.current?.focus(); + return; + } + if (nextSelectableNode.current === undefined) { + nextSelectableNode.current = event.target as HTMLElement; + event.preventDefault(); + linksRef.current[0]?.focus(); + } + } + } + + const overlay = ( + <div className="sw-py-4"> + {title !== undefined && ( + <div className="sw-mb-2"> + <strong>{title}</strong> + </div> + )} + + {content && <div>{content}</div>} + + {links && ( + <> + <hr className="sw-my-4" /> + + {links.map(({ href, label = translate('learn_more'), inPlace, doc = true }, index) => ( + <div className="sw-mb-1" key={label}> + {index === 0 && linkTextLabel && `${linkTextLabel}: `} + {doc ? ( + <DocumentationLink to={href} innerRef={(ref) => (linksRef.current[index] = ref)}> + {label} + </DocumentationLink> + ) : ( + <Link + to={href} + ref={(ref) => (linksRef.current[index] = ref)} + target={inPlace ? undefined : '_blank'} + > + {label} + </Link> + )} + </div> + ))} + </> + )} + </div> + ); + + return ( + <div + className={classNames( + 'it__help-tooltip sw-inline-flex sw-items-center sw-align-middle', + className, + )} + > + <Tooltip + mouseLeaveDelay={0.25} + onShow={handleShowTooltip} + onHide={handleHideTooltip} + overlay={overlay} + placement={placement} + isInteractive + > + <span + className="sw-inline-flex sw-items-center" + data-testid="help-tooltip-activator" + ref={helpRef} + > + {children ?? ( + <HelperHintIcon + aria-label={translate('tooltip_is_interactive')} + description={ + <> + {translate('tooltip_is_interactive')} + {overlay} + </> + } + /> + )} + </span> + </Tooltip> + </div> + ); +} diff --git a/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx b/server/sonar-web/src/main/js/sonar-aligned/components/controls/HelpTooltip.tsx index 1105fef9a03..5b62130d27b 100644 --- a/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx +++ b/server/sonar-web/src/main/js/sonar-aligned/components/controls/HelpTooltip.tsx @@ -20,25 +20,22 @@ import classNames from 'classnames'; import { HelperHintIcon } from 'design-system'; import * as React from 'react'; -import { translate } from '../../helpers/l10n'; -import Tooltip, { Placement } from './Tooltip'; +import Tooltip, { Placement } from '../../../components/controls/Tooltip'; +import { translate } from '../../../helpers/l10n'; interface Props { - className?: string; + 'aria-label'?: string; children?: React.ReactNode; - onShow?: () => void; - onHide?: () => void; + className?: string; + 'data-testid'?: string; overlay: React.ReactNode; placement?: Placement; - isInteractive?: boolean; - innerRef?: React.Ref<HTMLSpanElement>; - size?: number; } const DEFAULT_SIZE = 12; -export default function HelpTooltip(props: Props) { - const { size = DEFAULT_SIZE, overlay, placement, isInteractive, innerRef, children } = props; +export default function HelpTooltip(props: Readonly<Props>) { + const { overlay, placement, children } = props; return ( <div className={classNames( @@ -46,34 +43,18 @@ export default function HelpTooltip(props: Props) { props.className, )} > - <Tooltip - mouseLeaveDelay={0.25} - onShow={props.onShow} - onHide={props.onHide} - overlay={overlay} - placement={placement} - isInteractive={isInteractive} - > + <Tooltip mouseLeaveDelay={0.25} overlay={overlay} placement={placement}> <span + aria-label={props['aria-label']} className="sw-inline-flex sw-items-center" - data-testid="help-tooltip-activator" - ref={innerRef} + data-testid={props['data-testid'] ?? 'help-tooltip-activator'} > {children ?? ( <HelperHintIcon - aria-label={isInteractive ? translate('tooltip_is_interactive') : translate('help')} - description={ - isInteractive ? ( - <> - {translate('tooltip_is_interactive')} - {overlay} - </> - ) : ( - overlay - ) - } - height={size} - width={size} + aria-label={translate('help')} + description={overlay} + height={DEFAULT_SIZE} + width={DEFAULT_SIZE} /> )} </span> diff --git a/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx b/server/sonar-web/src/main/js/sonar-aligned/components/controls/__tests__/DocHelpTooltip-test.tsx index d6a721b4719..691d25f2910 100644 --- a/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx +++ b/server/sonar-web/src/main/js/sonar-aligned/components/controls/__tests__/DocHelpTooltip-test.tsx @@ -19,11 +19,11 @@ */ import userEvent from '@testing-library/user-event'; import * as React from 'react'; -import { byRole, byTestId } from '../../../helpers/testSelector'; +import { byRole, byTestId } from '../../../../helpers/testSelector'; -import { renderComponent } from '../../../helpers/testReactTestingUtils'; -import DocumentationTooltip, { DocumentationTooltipProps } from '../DocumentationTooltip'; -import Link from '../Link'; +import Link from '../../../../components/common/Link'; +import { renderComponent } from '../../../../helpers/testReactTestingUtils'; +import DocHelpTooltip, { DocHelpTooltipProps } from '../DocHelpTooltip'; const ui = { body: byRole('body'), @@ -37,7 +37,7 @@ const ui = { it('should correctly navigate through TAB', async () => { const user = userEvent.setup(); - renderDocumentationTooltip(); + renderDocHelpTooltip(); await user.tab(); expect(await ui.beforeLink.find()).toHaveFocus(); @@ -59,13 +59,13 @@ it('should correctly navigate through TAB', async () => { expect(await ui.beforeLink.find()).toHaveFocus(); }); -function renderDocumentationTooltip(props: Partial<DocumentationTooltipProps> = {}) { +function renderDocHelpTooltip(props: Partial<DocHelpTooltipProps> = {}) { return renderComponent( <> <Link to="/" target="_blank"> Interactive element before </Link> - <DocumentationTooltip + <DocHelpTooltip title="Tooltip title" content="Tooltip content" links={[ @@ -86,7 +86,7 @@ function renderDocumentationTooltip(props: Partial<DocumentationTooltipProps> = <Link to="/" target="_blank"> Icon </Link> - </DocumentationTooltip> + </DocHelpTooltip> <Link to="/" target="_blank"> Interactive element after </Link> |