diff options
| -rw-r--r-- | server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx | 50 | ||||
| -rw-r--r-- | sonar-core/src/main/resources/org/sonar/l10n/core.properties | 3 |
2 files changed, 33 insertions, 20 deletions
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 c13f91b0cd8..c78f88b41c6 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 @@ -18,10 +18,16 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { + Button, + ButtonVariety, + Heading, + IconQuestionMark, + Popover, +} from '@sonarsource/echoes-react'; import * as React from 'react'; -import { HelperHintIcon, Title } from '~design-system'; -import DocHelpTooltip from '~sonar-aligned/components/controls/DocHelpTooltip'; +import { useIntl } from 'react-intl'; +import DocumentationLink from '../../../components/common/DocumentationLink'; import ModalButton, { ModalProps } from '../../../components/controls/ModalButton'; import { DocLink } from '../../../helpers/doc-links'; import { translate } from '../../../helpers/l10n'; @@ -41,7 +47,7 @@ function CreateQualityGateModal() { <div> <ModalButton modal={renderModal}> {({ onClick }) => ( - <Button data-test="quality-gates__add" onClick={onClick} variety={ButtonVariety.Primary}> + <Button data-test="quality-gates__add" onClick={onClick} variety={ButtonVariety.Default}> {translate('create')} </Button> )} @@ -51,24 +57,30 @@ function CreateQualityGateModal() { } export default function ListHeader({ canCreate }: Readonly<Props>) { + const intl = useIntl(); return ( <div className="sw-flex sw-justify-between sw-pb-4"> - <div className="sw-flex sw-justify-between"> - <Title className="sw-flex sw-items-center sw-typo-lg-semibold sw-mb-0"> - {translate('quality_gates.page')} - </Title> - <DocHelpTooltip - className="sw-ml-2" - content={translate('quality_gates.help')} - links={[ - { - href: DocLink.QualityGates, - label: translate('learn_more'), - }, - ]} + <div className="sw-flex sw-items-center sw-gap-1 sw-justify-between"> + <Heading as="h1" className="sw-flex sw-items-center sw-typo-lg-semibold sw-mb-0"> + {intl.formatMessage({ id: 'quality_gates.page' })} + </Heading> + <Popover + title={intl.formatMessage({ id: 'quality_gates.help.title' })} + description={intl.formatMessage({ id: 'quality_gates.help.desc' })} + footer={ + <DocumentationLink standalone to={DocLink.QualityGates}> + {intl.formatMessage({ id: 'learn_more' })} + </DocumentationLink> + } > - <HelperHintIcon /> - </DocHelpTooltip> + <Button + className="sw-p-0 sw-h-fit sw-min-h-fit" + aria-label={intl.formatMessage({ id: 'help' })} + variety={ButtonVariety.DefaultGhost} + > + <IconQuestionMark /> + </Button> + </Popover> </div> {canCreate && <CreateQualityGateModal />} </div> diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties index 6b03a41cfe1..1ebd3ff29b2 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -2509,7 +2509,8 @@ quality_gates.built_in.help=Built-in, immutable Quality Gate reflecting best pra quality_gates.built_in.description.1=This quality gate is provided by default. quality_gates.built_in.description.2=It will automatically be updated with the latest recommendations. quality_gates.status=Quality Gate status -quality_gates.help=A Quality Gate is a set of measure-based, Boolean conditions. It helps you know immediately whether your projects are production-ready. Ideally, all projects will use the same quality gate. Each project's Quality Gate status is displayed prominently on its homepage. +quality_gates.help.title=What is a quality gate? +quality_gates.help.desc=It`s a set of measure-based, Boolean conditions. It helps you know immediately whether your projects are production-ready. Ideally, all projects will use the same quality gate. Each project's Quality Gate status is displayed prominently on its homepage. quality_gates.permissions=Permissions quality_gates.permissions.help=Users with the global "Administer quality gates" permission and those listed below can manage this quality gate. quality_gates.permissions.grant=Grant permissions to a user or a group |