From 04de2de3d71fceab34404f5bb047671658dd1bb9 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Gr=C3=A9goire=20Aubert?= Date: Mon, 22 Jul 2024 11:37:38 +0200 Subject: [PATCH] SONAR-22523 Replace old Buttons with Echoes Buttons --- .../config/jest/SetupReactTestingLibrary.ts | 4 +- .../src/components/NavBarTabs.tsx | 4 +- .../design-system/src/components/Tooltip.tsx | 5 +- .../src/components/buttons/ButtonLink.tsx | 17 ++++++ .../src/components/input/DiscreetSelect.tsx | 3 +- .../src/components/input/SearchSelect.tsx | 3 +- .../components/input/SearchSelectDropdown.tsx | 4 +- .../input/SearchSelectDropdownControl.tsx | 4 +- .../src/components/modal/Modal.tsx | 8 +-- .../__snapshots__/ModalFooter-test.tsx.snap | 16 +++--- .../components/buttons/Button.tsx | 23 ++++++-- .../components/buttons/ButtonPrimary.tsx | 17 ++++++ .../components/buttons/ButtonSecondary.tsx | 17 ++++++ .../buttons/DangerButtonPrimary.tsx | 17 ++++++ .../buttons/DangerButtonSecondary.tsx | 17 ++++++ .../components/input/InputSelect.tsx | 4 +- .../js/app/components/PluginRiskConsent.tsx | 7 +-- .../js/app/components/SonarLintConnection.tsx | 11 ++-- .../branch-like/BranchLikeNavigation.tsx | 9 ++-- .../components/nav/global/GlobalNavUser.tsx | 6 +-- .../settings/PendingPluginsActionNotif.tsx | 19 ++++--- .../PromotionNotification.tsx | 7 +-- .../account/notifications/ProjectModal.tsx | 9 ++-- .../apps/account/notifications/Projects.tsx | 7 +-- .../components/AnalysisWarningsModal.tsx | 10 ++-- .../background-tasks/components/Search.tsx | 15 +++--- .../components/WorkersForm.tsx | 12 +++-- .../components/BulkChangeModal.tsx | 12 +++-- .../RemoveExtendedDescriptionModal.tsx | 7 +-- .../coding-rules/components/RuleDetails.tsx | 7 +-- .../components/RuleDetailsCustomRules.tsx | 7 +-- .../components/RuleDetailsDescription.tsx | 11 ++-- .../coding-rules/components/RuleListItem.tsx | 6 +-- .../drilldown/FilesView.tsx | 7 +-- .../project/components/RepositoryList.tsx | 12 +++-- .../monorepo/MonorepoProjectCreate.tsx | 17 +++--- .../project/monorepo/MonorepoProjectsList.tsx | 7 +-- .../groups/components/DeleteGroupForm.tsx | 13 +++-- .../js/apps/groups/components/GroupForm.tsx | 10 ++-- .../main/js/apps/groups/components/Header.tsx | 10 ++-- .../IssueReviewHistoryAndComments.tsx | 7 +-- .../js/apps/issues/sidebar/FiltersHeader.tsx | 7 +-- .../js/apps/maintenance/components/App.tsx | 12 +++-- .../marketplace/components/PluginActions.tsx | 18 +++---- .../components/PluginChangeLogButton.tsx | 7 +-- .../components/PluginRiskConsentBox.tsx | 7 +-- .../overview/branches/BranchMetaTopBar.tsx | 8 +-- .../components/AnalysisWarningsModal.tsx | 10 ++-- .../components/DeleteForm.tsx | 7 +-- .../permission-templates/components/Form.tsx | 10 ++-- .../components/Header.tsx | 7 ++- .../project/components/PageHeader.tsx | 11 ++-- .../components/ProjectActivityDateInput.tsx | 9 ++-- .../components/forms/AddEventForm.tsx | 10 ++-- .../components/forms/ChangeEventForm.tsx | 10 ++-- .../components/forms/RemoveAnalysisForm.tsx | 11 ++-- .../components/forms/RemoveEventForm.tsx | 8 +-- .../components/DeleteBranchModal.tsx | 7 +-- .../components/RenameBranchModal.tsx | 12 +++-- .../components/SetAsMainBranchModal.tsx | 7 +-- .../src/main/js/apps/projectDeletion/Form.tsx | 7 +-- .../js/apps/projectDump/components/Export.tsx | 7 +-- .../js/apps/projectDump/components/Import.tsx | 7 +-- .../js/apps/projectLinks/CreationModal.tsx | 7 +-- .../src/main/js/apps/projectLinks/Header.tsx | 11 ++-- .../BranchNewCodeDefinitionSettingModal.tsx | 12 +++-- .../ProjectNewCodeDefinitionSelector.tsx | 26 +++++----- .../components/AddLanguageModal.tsx | 10 ++-- .../projects/components/EmptyInstance.tsx | 8 +-- .../apps/projects/components/PageSidebar.tsx | 7 +-- .../ChangeDefaultVisibilityForm.tsx | 8 +-- .../apps/projectsManagement/DeleteModal.tsx | 12 +++-- .../js/apps/projectsManagement/Header.tsx | 8 +-- .../projectsManagement/RestoreAccessModal.tsx | 13 +++-- .../components/AddConditionModal.tsx | 13 ++--- .../components/CaycFixOptimizeBanner.tsx | 7 +-- .../ConditionReviewAndUpdateModal.tsx | 10 ++-- .../components/CopyQualityGateForm.tsx | 13 +++-- .../components/CreateQualityGateForm.tsx | 9 ++-- .../components/DeleteQualityGateForm.tsx | 7 +-- .../components/EditConditionModal.tsx | 7 +-- .../quality-gates/components/ListHeader.tsx | 7 +-- ...QualityGatePermissionsAddModalRenderer.tsx | 13 +++-- .../components/RenameQualityGateForm.tsx | 13 +++-- .../changelog/ChangelogContainer.tsx | 7 ++- .../changelog/ChangelogSearch.tsx | 7 +-- .../compare/ComparisonResultActivation.tsx | 9 ++-- .../components/DeleteProfileForm.tsx | 10 ++-- .../components/ProfileModalForm.tsx | 7 +-- .../details/ProfileInheritance.tsx | 10 ++-- .../details/ProfilePermissionsForm.tsx | 12 +++-- .../details/ProfileProjects.tsx | 10 ++-- .../apps/quality-profiles/home/PageHeader.tsx | 22 ++++---- .../home/RestoreProfileForm.tsx | 26 +++++----- .../components/HotspotCommentModal.tsx | 11 ++-- .../HotspotReviewHistoryAndComments.tsx | 7 +-- .../components/StatusUpdateSuccessModal.tsx | 15 +++--- .../components/status/StatusReviewButton.tsx | 11 ++-- .../status/StatusSelectionRenderer.tsx | 11 ++-- .../js/apps/sessions/components/LoginForm.tsx | 24 ++++----- .../settings/components/DefinitionActions.tsx | 52 ++++++++++--------- .../settings/components/NewCodeDefinition.tsx | 23 ++++---- .../AlmBindingDefinitionBox.tsx | 16 +++--- .../AlmBindingDefinitionFormRenderer.tsx | 12 +++-- .../almIntegration/AlmTabRenderer.tsx | 10 ++-- .../AuthenticationSecuredField.tsx | 7 +-- .../AutoProvisionningConsent.tsx | 11 ++-- .../authentication/ConfigurationForm.tsx | 14 +++-- .../GitHubConfigurationForm.tsx | 14 +++-- .../GitLabConfigurationForm.tsx | 12 +++-- .../components/authentication/TabHeader.tsx | 7 +-- .../authentication/TestConfiguration.tsx | 9 ++-- .../components/inputs/InputForJSON.tsx | 7 +-- .../components/inputs/InputForSecured.tsx | 7 ++- .../system/components/ChangeLogLevelForm.tsx | 14 +++-- .../src/main/js/apps/users/Header.tsx | 10 ++-- .../js/apps/users/components/PasswordForm.tsx | 17 +++--- .../apps/users/components/TokensFormItem.tsx | 39 ++++++-------- .../webhooks/components/DeleteWebhookForm.tsx | 7 +-- .../apps/webhooks/components/PageActions.tsx | 14 +++-- .../SourceViewer/SourceViewerCode.tsx | 11 ++-- .../activity-graph/AddGraphMetric.tsx | 7 +-- .../activity-graph/GraphsHeader.tsx | 8 +-- .../components/common/ResetPasswordForm.tsx | 7 +-- .../js/components/common/RestartButton.tsx | 9 ++-- .../js/components/controls/HomePageSelect.tsx | 11 ++-- .../js/components/controls/ListFooter.tsx | 15 +++--- .../components/controls/ValidationModal.tsx | 16 +++--- .../rules/MoreInfoRuleDescription.tsx | 7 +-- 129 files changed, 856 insertions(+), 564 deletions(-) diff --git a/server/sonar-web/config/jest/SetupReactTestingLibrary.ts b/server/sonar-web/config/jest/SetupReactTestingLibrary.ts index 346d4a2cb87..6755fa753b9 100644 --- a/server/sonar-web/config/jest/SetupReactTestingLibrary.ts +++ b/server/sonar-web/config/jest/SetupReactTestingLibrary.ts @@ -19,7 +19,7 @@ */ import '@testing-library/jest-dom'; import { configure, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event'; configure({ asyncUtilTimeout: 3000, @@ -27,7 +27,7 @@ configure({ expect.extend({ async toHaveATooltipWithContent(received: any, content: string) { - const user = userEvent.setup(); + const user = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never }); if (!(received instanceof Element)) { return { diff --git a/server/sonar-web/design-system/src/components/NavBarTabs.tsx b/server/sonar-web/design-system/src/components/NavBarTabs.tsx index 7d2aecf4447..14bcfcef228 100644 --- a/server/sonar-web/design-system/src/components/NavBarTabs.tsx +++ b/server/sonar-web/design-system/src/components/NavBarTabs.tsx @@ -19,6 +19,7 @@ */ import styled from '@emotion/styled'; +import { IconChevronDown } from '@sonarsource/echoes-react'; import classNames from 'classnames'; import React, { forwardRef } from 'react'; import tw, { theme } from 'twin.macro'; @@ -26,7 +27,6 @@ import { themeBorder, themeColor, themeContrast } from '../helpers/theme'; import { isDefined } from '../helpers/types'; import NavLink, { NavLinkProps } from './NavLink'; import { Tooltip } from './Tooltip'; -import { ChevronDownIcon } from './icons/ChevronDownIcon'; interface Props extends React.HTMLAttributes { children?: React.ReactNode; @@ -71,7 +71,7 @@ export const NavBarTabLink = forwardRef( {children} - {withChevron && } + {withChevron && } ); diff --git a/server/sonar-web/design-system/src/components/Tooltip.tsx b/server/sonar-web/design-system/src/components/Tooltip.tsx index ccd863ae518..2ce932bdf20 100644 --- a/server/sonar-web/design-system/src/components/Tooltip.tsx +++ b/server/sonar-web/design-system/src/components/Tooltip.tsx @@ -67,7 +67,8 @@ function isMeasured(state: State): state is OwnState & Measurements { return state.height !== undefined; } -/** @deprecated Use {@link Echoes.Tooltip | Tooltip} from Echoes instead. +/** + * @deprecated Use Tooltip from Echoes instead. * * Echoes Tooltip component should mainly be used on interactive element and contain very simple text based content. * If the content is more complex use a Popover component instead (not available yet). @@ -79,7 +80,7 @@ function isMeasured(state: State): state is OwnState & Measurements { * - ~`mouseLeaveDelay`~ doesn't exist anymore, was mostly used in situation that should be replaced by a Popover component. * - ~`onHide`~ doesn't exist anymore, was mostly used in situation that should be replaced by a Popover component. * - ~`onShow`~ doesn't exist anymore, was mostly used in situation that should be replaced by a Popover component. - * - `placement` is now `align` and `side`, based on the {@link Echoes.TooltipAlign | TooltipAlign} and {@link Echoes.TooltipSide | TooltipSide} enums. + * - `placement` is now `align` and `side`, based on the TooltipAlign and TooltipSide enums. * - `visible` is now `isOpen` */ export function Tooltip(props: TooltipProps) { diff --git a/server/sonar-web/design-system/src/components/buttons/ButtonLink.tsx b/server/sonar-web/design-system/src/components/buttons/ButtonLink.tsx index bf52f03599a..f36e40c6235 100644 --- a/server/sonar-web/design-system/src/components/buttons/ButtonLink.tsx +++ b/server/sonar-web/design-system/src/components/buttons/ButtonLink.tsx @@ -22,6 +22,23 @@ import tw from 'twin.macro'; import { themeBorder, themeColor } from '../../helpers'; import { BareButton } from '../../sonar-aligned/components/buttons'; +/** + * @deprecated Use Button from Echoes instead with the `variety` prop set + * to ButtonVariety.DefaultGhost to have the same look and feel. + * + * Some of the props have changed or been renamed: + * - `blurAfterClick` is now `shouldBlurAfterClick` + * - `disabled` is now `isDisabled`, note that a Echoes Tooltip won't work + * on a disabled button, use a text notice or ToggleTip next to the disabled button instead. + * - `icon` is now replace by `prefix` which works the same way + * - `preventDefault` is now `shouldPreventDefault` + * - `stopPropagation` is now `shouldStopPropagation` + * + * The button can't be used as a link anymore, and all props related to links have been dropped. + * Use a real Echoes Link instead. + * + * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3382706231/Button | Migration Guide} for more information. + */ export const ButtonLink = styled(BareButton)` color: ${themeColor('linkDefault')}; border-bottom: ${themeBorder('default', 'linkDefault')}; diff --git a/server/sonar-web/design-system/src/components/input/DiscreetSelect.tsx b/server/sonar-web/design-system/src/components/input/DiscreetSelect.tsx index c4211cee8e3..2b85c6dd65f 100644 --- a/server/sonar-web/design-system/src/components/input/DiscreetSelect.tsx +++ b/server/sonar-web/design-system/src/components/input/DiscreetSelect.tsx @@ -18,7 +18,6 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; -import Echoes from '@sonarsource/echoes-react'; import { GroupBase, OnChangeValue } from 'react-select'; import tw from 'twin.macro'; import { themeBorder, themeColor, themeContrast } from '../../helpers/theme'; @@ -34,7 +33,7 @@ type DiscreetProps< }; /** - * @deprecated Use {@link Echoes.Select | Select} or {@link Echoes.SelectAsync | SelectAsync} from Echoes instead, and use the {@link Echoes.SelectHighlight.Ghost | SelectHighlight.Ghost} highlight property. + * @deprecated Use Select or SelectAsync from Echoes instead, and use the SelectHighlight.Ghost highlight property. * * See the [Migration Guide](https://xtranet-sonarsource.atlassian.net/wiki/x/K4AYxw) */ diff --git a/server/sonar-web/design-system/src/components/input/SearchSelect.tsx b/server/sonar-web/design-system/src/components/input/SearchSelect.tsx index 37b471f9f82..ca6b86a4f60 100644 --- a/server/sonar-web/design-system/src/components/input/SearchSelect.tsx +++ b/server/sonar-web/design-system/src/components/input/SearchSelect.tsx @@ -17,7 +17,6 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import Echoes from '@sonarsource/echoes-react'; import classNames from 'classnames'; import { omit } from 'lodash'; import React from 'react'; @@ -35,7 +34,7 @@ type SearchSelectProps< > = SelectProps & AsyncProps; /** - * @deprecated Use {@link Echoes.Select | Select} or {@link Echoes.SelectAsync | SelectAsync} from Echoes instead. + * @deprecated Use Select or SelectAsync from Echoes instead. * See the [Migration Guide](https://xtranet-sonarsource.atlassian.net/wiki/x/K4AYxw) */ export function SearchSelect< diff --git a/server/sonar-web/design-system/src/components/input/SearchSelectDropdown.tsx b/server/sonar-web/design-system/src/components/input/SearchSelectDropdown.tsx index 9ec3d122000..2fa9f677311 100644 --- a/server/sonar-web/design-system/src/components/input/SearchSelectDropdown.tsx +++ b/server/sonar-web/design-system/src/components/input/SearchSelectDropdown.tsx @@ -18,7 +18,6 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; -import Echoes from '@sonarsource/echoes-react'; import React from 'react'; import { ActionMeta, @@ -65,7 +64,8 @@ interface SearchSelectDropdownProps< } /** - * @deprecated Use {@link Echoes.Select | Select} or {@link Echoes.SelectAsync | SelectAsync} from Echoes instead. + * @deprecated Use Select or SelectAsync from Echoes instead. + * * See the [Migration Guide](https://xtranet-sonarsource.atlassian.net/wiki/x/K4AYxw) */ export function SearchSelectDropdown< diff --git a/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx b/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx index ed383415eea..f8a0ebc09a0 100644 --- a/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx +++ b/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx @@ -18,7 +18,6 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; -import Echoes from '@sonarsource/echoes-react'; import classNames from 'classnames'; import { useIntl } from 'react-intl'; import tw from 'twin.macro'; @@ -42,7 +41,8 @@ interface SearchSelectDropdownControlProps { } /** - * @deprecated Use {@link Echoes.Select | Select} or {@link Echoes.SelectAsync | SelectAsync} from Echoes instead. + * @deprecated Use Select or SelectAsync from Echoes instead. + * * See the [Migration Guide](https://xtranet-sonarsource.atlassian.net/wiki/x/K4AYxw) */ export function SearchSelectDropdownControl(props: SearchSelectDropdownControlProps) { diff --git a/server/sonar-web/design-system/src/components/modal/Modal.tsx b/server/sonar-web/design-system/src/components/modal/Modal.tsx index 9b1a05caa56..63589e5948d 100644 --- a/server/sonar-web/design-system/src/components/modal/Modal.tsx +++ b/server/sonar-web/design-system/src/components/modal/Modal.tsx @@ -18,6 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import { Global, css, useTheme } from '@emotion/react'; +import { Button } from '@sonarsource/echoes-react'; import classNames from 'classnames'; import { Fragment, ReactNode } from 'react'; import { useIntl } from 'react-intl'; @@ -25,7 +26,6 @@ import ReactModal from 'react-modal'; import tw from 'twin.macro'; import { themeColor } from '../../helpers'; import { REACT_DOM_CONTAINER } from '../../helpers/constants'; -import { ButtonSecondary } from '../../sonar-aligned/components/buttons'; import { Theme } from '../../types/theme'; import { ModalBody } from './ModalBody'; import { ModalFooter } from './ModalFooter'; @@ -113,14 +113,14 @@ export function Modal({ loading={props.loading} primaryButton={props.primaryButton} secondaryButton={ - {props.secondaryButtonLabel ?? intl.formatMessage({ id: 'close' })} - + } /> diff --git a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalFooter-test.tsx.snap b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalFooter-test.tsx.snap index 630ebf4e829..7b3942e017d 100644 --- a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalFooter-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalFooter-test.tsx.snap @@ -51,14 +51,14 @@ exports[`should render with primary and secondary buttons 1`] = ` } .emotion-4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; gap: var(--echoes-dimension-space-100); } @@ -148,14 +148,14 @@ exports[`should render with secondary button 1`] = ` } .emotion-4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; gap: var(--echoes-dimension-space-100); } diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx index 28fb7f87113..d36d304732a 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx @@ -47,6 +47,23 @@ export interface ButtonProps extends AllowedButtonAttributes { to?: LinkProps['to']; } +/** + * @deprecated Use Button from Echoes instead. + * Use the `variety` prop with the ButtonVariety enum to change the button's look and feel. + * + * Some of the props have changed or been renamed: + * - `blurAfterClick` is now `shouldBlurAfterClick` + * - `disabled` is now `isDisabled`, note that a Echoes Tooltip won't work + * on a disabled button, use a text notice or ToggleTip next to the disabled button instead. + * - `icon` is now replace by `prefix` which works the same way + * - `preventDefault` is now `shouldPreventDefault` + * - `stopPropagation` is now `shouldStopPropagation` + * + * The button can't be used as a link anymore, and all props related to links have been dropped. + * Use a real Echoes Link instead. + * + * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3382706231/Button | Migration Guide} for more information. + */ export const Button = forwardRef((props, ref) => { const { children, @@ -150,7 +167,7 @@ const BaseButtonLink = styled(BaseLink)` /* Workaround to apply disable style to button-link - as link does not have disabled attribute, using props instead + as link does not have disabled attribute, using props instead */ ${({ disabled, theme }) => @@ -168,8 +185,8 @@ const BaseButton = styled.button` ${buttonStyle} /* - Workaround for tooltips issue with onMouseLeave in disabled buttons: - https://github.com/facebook/react/issues/4251 + Workaround for tooltips issue with onMouseLeave in disabled buttons: + https://github.com/facebook/react/issues/4251 */ & [disabled] { ${tw`sw-pointer-events-none`}; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonPrimary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonPrimary.tsx index 8931442ebc9..9e8230d9634 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonPrimary.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonPrimary.tsx @@ -31,6 +31,23 @@ export const PrimaryStyle = (props: ThemedProps) => css` --border: ${themeBorder('default', 'transparent')(props)}; `; +/** + * @deprecated Use Button from Echoes instead with the `variety` prop set + * to ButtonVariety.Primary to have the same look and feel. + * + * Some of the props have changed or been renamed: + * - `blurAfterClick` is now `shouldBlurAfterClick` + * - `disabled` is now `isDisabled`, note that a Echoes Tooltip won't work + * on a disabled button, use a text notice or ToggleTip next to the disabled button instead. + * - `icon` is now replace by `prefix` which works the same way + * - `preventDefault` is now `shouldPreventDefault` + * - `stopPropagation` is now `shouldStopPropagation` + * + * The button can't be used as a link anymore, and all props related to links have been dropped. + * Use a real Echoes Link instead. + * + * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3382706231/Button | Migration Guide} for more information. + */ export const ButtonPrimary = styled(Button)` ${PrimaryStyle} `; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonSecondary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonSecondary.tsx index f513c5f803a..96112cb2290 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonSecondary.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonSecondary.tsx @@ -21,6 +21,23 @@ import styled from '@emotion/styled'; import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers'; import { Button } from './Button'; +/** + * @deprecated Use Button from Echoes instead without the `variety` prop set, + * this is a the default look and feel of the button. + * + * Some of the props have changed or been renamed: + * - `blurAfterClick` is now `shouldBlurAfterClick` + * - `disabled` is now `isDisabled`, note that a Echoes Tooltip won't work + * on a disabled button, use a text notice or ToggleTip next to the disabled button instead. + * - `icon` is now replace by `prefix` which works the same way + * - `preventDefault` is now `shouldPreventDefault` + * - `stopPropagation` is now `shouldStopPropagation` + * + * The button can't be used as a link anymore, and all props related to links have been dropped. + * Use a real Echoes Link instead. + * + * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3382706231/Button | Migration Guide} for more information. + */ export const ButtonSecondary = styled(Button)` --background: ${themeColor('buttonSecondary')}; --backgroundHover: ${themeColor('buttonSecondaryHover')}; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonPrimary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonPrimary.tsx index ca701d8944e..b192ac9c5cc 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonPrimary.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonPrimary.tsx @@ -21,6 +21,23 @@ import styled from '@emotion/styled'; import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers'; import { Button } from './Button'; +/** + * @deprecated Use Button from Echoes instead with the `variety` prop set + * to ButtonVariety.Danger to have the same look and feel. + * + * Some of the props have changed or been renamed: + * - `blurAfterClick` is now `shouldBlurAfterClick` + * - `disabled` is now `isDisabled`, note that a Echoes Tooltip won't work + * on a disabled button, use a text notice or ToggleTip next to the disabled button instead. + * - `icon` is now replace by `prefix` which works the same way + * - `preventDefault` is now `shouldPreventDefault` + * - `stopPropagation` is now `shouldStopPropagation` + * + * The button can't be used as a link anymore, and all props related to links have been dropped. + * Use a real Echoes Link instead. + * + * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3382706231/Button | Migration Guide} for more information. + */ export const DangerButtonPrimary = styled(Button)` --background: ${themeColor('dangerButton')}; --backgroundHover: ${themeColor('dangerButtonHover')}; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonSecondary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonSecondary.tsx index 81cfc90010b..ed135dd2890 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonSecondary.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonSecondary.tsx @@ -21,6 +21,23 @@ import styled from '@emotion/styled'; import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers'; import { Button } from './Button'; +/** + * @deprecated Use Button from Echoes instead with the `variety` prop set + * to ButtonVariety.DangerOutline to have the same look and feel. + * + * Some of the props have changed or been renamed: + * - `blurAfterClick` is now `shouldBlurAfterClick` + * - `disabled` is now `isDisabled`, note that a Echoes Tooltip won't work + * on a disabled button, use a text notice or ToggleTip next to the disabled button instead. + * - `icon` is now replace by `prefix` which works the same way + * - `preventDefault` is now `shouldPreventDefault` + * - `stopPropagation` is now `shouldStopPropagation` + * + * The button can't be used as a link anymore, and all props related to links have been dropped. + * Use a real Echoes Link instead. + * + * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3382706231/Button | Migration Guide} for more information. + */ export const DangerButtonSecondary = styled(Button)` --background: ${themeColor('dangerButtonSecondary')}; --backgroundHover: ${themeColor('dangerButtonSecondaryHover')}; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/input/InputSelect.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/input/InputSelect.tsx index 95d920e220e..5a0ebf60e02 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/input/InputSelect.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/input/InputSelect.tsx @@ -17,7 +17,6 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import Echoes from '@sonarsource/echoes-react'; import classNames from 'classnames'; import { omit } from 'lodash'; import { useMemo } from 'react'; @@ -32,7 +31,8 @@ import { } from './SelectCommon'; /** - * @deprecated Use {@link Echoes.Select | Select} or {@link Echoes.SelectAsync | SelectAsync} from Echoes instead. + * @deprecated Use Select or SelectAsync from Echoes instead. + * * See the [Migration Guide](https://xtranet-sonarsource.atlassian.net/wiki/x/K4AYxw) */ export function InputSelect< diff --git a/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx b/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx index 01e8dd143d6..565db26147f 100644 --- a/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx +++ b/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, Card, CenteredLayout, Title } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { Card, CenteredLayout, Title } from 'design-system'; import * as React from 'react'; import { Helmet } from 'react-helmet-async'; import { withRouter } from '~sonar-aligned/components/hoc/withRouter'; @@ -80,9 +81,9 @@ export function PluginRiskConsent(props: Readonly) {

{translate('plugin_risk_consent.description2')}

- + ); diff --git a/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx b/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx index bf1323bd209..f9de9cb57c0 100644 --- a/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx +++ b/server/sonar-web/src/main/js/app/components/SonarLintConnection.tsx @@ -18,9 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { IconCheck, LinkStandalone } from '@sonarsource/echoes-react'; +import { Button, ButtonVariety, IconCheck, LinkStandalone } from '@sonarsource/echoes-react'; import { - ButtonPrimary, Card, CardSeparator, ClipboardButton, @@ -99,9 +98,13 @@ export function SonarLintConnection({ currentUser }: Readonly) {

{translate('sonarlint-connection.request.description2')}

- } onClick={authorize}> + )} diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx index 4e92f2c6107..e4cd9332aa9 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/BranchLikeNavigation.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; -import { ButtonSecondary, Popup, PopupPlacement, PopupZLevel } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { Popup, PopupPlacement, PopupZLevel } from 'design-system'; import * as React from 'react'; import { ComponentQualifier } from '~sonar-aligned/types/component'; import EscKeydownHandler from '../../../../../components/controls/EscKeydownHandler'; @@ -97,17 +98,17 @@ export function BranchLikeNavigation(props: BranchLikeNavigationProps) { placement={PopupPlacement.BottomLeft} zLevel={PopupZLevel.Global} > - { setIsMenuOpen(!isMenuOpen); }} - disabled={!isMenuEnabled} + isDisabled={!isMenuEnabled} aria-expanded={isMenuOpen} aria-haspopup="menu" > {currentBranchLikeElement} - +
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.tsx index ffee37efd99..b4919242746 100644 --- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.tsx @@ -17,8 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DropdownMenu, DropdownMenuAlign, Tooltip } from '@sonarsource/echoes-react'; -import { Avatar, BareButton, ButtonSecondary } from 'design-system'; +import { Button, DropdownMenu, DropdownMenuAlign, Tooltip } from '@sonarsource/echoes-react'; +import { Avatar, BareButton } from 'design-system'; import * as React from 'react'; import { translate } from '../../../../helpers/l10n'; import { getBaseUrl } from '../../../../helpers/system'; @@ -44,7 +44,7 @@ export function GlobalNavUser() { if (!currentUser || !isLoggedIn(currentUser)) { return (
- {translate('layout.login')} +
); } diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx b/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx index 64f1e6ec0af..0f4a3e428b6 100644 --- a/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, FlagMessage } from 'design-system'; +import { Button, ButtonGroup } from '@sonarsource/echoes-react'; +import { FlagMessage } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import { cancelPendingPlugins } from '../../../../api/plugins'; @@ -69,15 +70,13 @@ export default class PendingPluginsActionNotif extends React.PureComponent ))} - - - - {translate('marketplace.revert')} - + + + +
); diff --git a/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx b/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx index 0256393b450..fee386277f5 100644 --- a/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx +++ b/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx @@ -19,7 +19,8 @@ */ import styled from '@emotion/styled'; -import { ButtonPrimary, ButtonSecondary, themeBorder, themeColor } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { ButtonPrimary, themeBorder, themeColor } from 'design-system'; import * as React from 'react'; import { dismissNotice } from '../../../api/users'; import { Image } from '../../../components/common/Image'; @@ -62,9 +63,9 @@ export function PromotionNotification(props: CurrentUserContextInterface) { > {translate('learn_more')} - + ); diff --git a/server/sonar-web/src/main/js/apps/account/notifications/ProjectModal.tsx b/server/sonar-web/src/main/js/apps/account/notifications/ProjectModal.tsx index 1f7fa6850ca..07a67a581ea 100644 --- a/server/sonar-web/src/main/js/apps/account/notifications/ProjectModal.tsx +++ b/server/sonar-web/src/main/js/apps/account/notifications/ProjectModal.tsx @@ -18,8 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; import { - ButtonPrimary, DropdownMenu, InputSearch, ItemButton, @@ -249,13 +249,14 @@ export default class ProjectModal extends React.PureComponent { headerTitle={translate('my_account.set_notifications_for.title')} onClose={closeModal} primaryButton={ - {translate('add_verb')} - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/account/notifications/Projects.tsx b/server/sonar-web/src/main/js/apps/account/notifications/Projects.tsx index b99d5ef03fd..fe009cb6d60 100644 --- a/server/sonar-web/src/main/js/apps/account/notifications/Projects.tsx +++ b/server/sonar-web/src/main/js/apps/account/notifications/Projects.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, InputSearch, Note } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { InputSearch, Note } from 'design-system'; import { groupBy, sortBy, uniqBy } from 'lodash'; import * as React from 'react'; import { translate } from '../../../helpers/l10n'; @@ -123,11 +124,11 @@ export default class Projects extends React.PureComponent { {translate('my_profile.per_project_notifications.title')} - + {this.state.showModal && ( diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/AnalysisWarningsModal.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/AnalysisWarningsModal.tsx index aead4d9dd33..31295c6c1ad 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/AnalysisWarningsModal.tsx +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/AnalysisWarningsModal.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DangerButtonSecondary, FlagMessage, HtmlFormatter, Modal, Spinner } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, HtmlFormatter, Modal, Spinner } from 'design-system'; import * as React from 'react'; import { dismissAnalysisWarning, getTask } from '../../../api/ce'; import withCurrentUserContext from '../../../app/components/current-user/withCurrentUserContext'; @@ -128,14 +129,15 @@ export class AnalysisWarningsModal extends React.PureComponent {
{dismissable && currentUser.isLoggedIn && (
- { this.handleDismissMessage(key); }} + variety={ButtonVariety.DangerOutline} > {translate('dismiss_permanently')} - +
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/Search.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/Search.tsx index 724cd058613..f611187e49b 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/Search.tsx +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/Search.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, InputSearch } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { InputSearch } from 'design-system'; import * as React from 'react'; import { translate } from '../../../helpers/l10n'; import { DEFAULT_FILTERS } from '../constants'; @@ -143,16 +144,12 @@ export default class Search extends React.PureComponent { )}
  • - + +
    • diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/WorkersForm.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/WorkersForm.tsx index 4b8b91653d6..a51afaf9b68 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/WorkersForm.tsx +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/WorkersForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FlagMessage, InputSelect, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, InputSelect, Modal } from 'design-system'; import * as React from 'react'; import { setWorkerCount } from '../../../api/ce'; import { translate } from '../../../helpers/l10n'; @@ -109,9 +110,14 @@ export default class WorkersForm extends React.PureComponent { } primaryButton={ - + } secondaryButtonLabel={translate('cancel')} loading={submitting} diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/BulkChangeModal.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/BulkChangeModal.tsx index d1d0a55ad19..76fb3dd19f4 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/BulkChangeModal.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/BulkChangeModal.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FlagMessage, FormField, Modal, Spinner } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, FormField, Modal, Spinner } from 'design-system'; import * as React from 'react'; import { formatMeasure } from '~sonar-aligned/helpers/measures'; import { MetricType } from '~sonar-aligned/types/metrics'; @@ -264,17 +265,18 @@ export class BulkChangeModal extends React.PureComponent { body={{formBody}} primaryButton={ !this.state.finished && ( - {translate('apply')} - + ) } secondaryButtonLabel={this.state.finished ? translate('close') : translate('cancel')} diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RemoveExtendedDescriptionModal.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RemoveExtendedDescriptionModal.tsx index 63452fc4349..e53add9c1e3 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/RemoveExtendedDescriptionModal.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RemoveExtendedDescriptionModal.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DangerButtonPrimary, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { Modal } from 'design-system'; import * as React from 'react'; import { translate } from '../../../helpers/l10n'; @@ -41,9 +42,9 @@ export default function RemoveExtendedDescriptionModal({ onCancel, onSubmit }: P body={translate('coding_rules.remove_extended_description.confirm')} onClose={onCancel} primaryButton={ - + } loading={submitting} secondaryButtonLabel={translate('cancel')} 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 9d1f4f5c5b5..eac729a717b 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 @@ -18,9 +18,9 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; import { ButtonSecondary, - DangerButtonSecondary, HelperHintIcon, Spinner, SubHeadingHighlight, @@ -145,13 +145,14 @@ export default function RuleDetails(props: Readonly) { > {({ onClick }) => ( <> - {translate('delete')} - + {({ onClick }) => ( - {translate('delete')} - + )} diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx index 8a373eb66a9..0a9ac8ee0d4 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx @@ -17,16 +17,14 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { Button, ButtonVariety, Spinner } from '@sonarsource/echoes-react'; import { ButtonPrimary, ButtonSecondary, CodeSyntaxHighlighter, - DangerButtonSecondary, InputTextArea, } from 'design-system'; -import { Spinner } from '@sonarsource/echoes-react'; - import * as React from 'react'; import FormattingTips from '../../../components/common/FormattingTips'; import RuleTabViewer from '../../../components/rules/RuleTabViewer'; @@ -116,14 +114,15 @@ export default function RuleDetailsDescription(props: Readonly) { {ruleDetails.mdNote !== undefined && ( <> - setDescriptionModal(true)} + variety={ButtonVariety.DangerOutline} > {translate('remove')} - + {removeDescriptionModal && ( setDescriptionModal(false)} 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 56df3875bba..cb4e432e848 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 @@ -19,9 +19,9 @@ */ import styled from '@emotion/styled'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; import { Badge, - DangerButtonSecondary, InheritanceIcon, Link, OverridenIcon, @@ -186,9 +186,9 @@ export default function RuleListItem(props: Readonly) { return (
    - +
    ); diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/FilesView.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/FilesView.tsx index 5100108363c..d358d8c6d1a 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/FilesView.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/FilesView.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, FlagMessage } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { FlagMessage } from 'design-system'; import { throttle } from 'lodash'; import * as React from 'react'; import { formatMeasure } from '~sonar-aligned/helpers/measures'; @@ -191,13 +192,13 @@ export default class FilesView extends React.PureComponent { ), formatMeasure(this.props.metric.bestValue, this.props.metric.type), )} - {translate('show_them')} - + )} {!hidingBestMeasures && this.props.paging && this.props.components.length > 0 && ( diff --git a/server/sonar-web/src/main/js/apps/create/project/components/RepositoryList.tsx b/server/sonar-web/src/main/js/apps/create/project/components/RepositoryList.tsx index 02eb7f64b7b..acc72882975 100644 --- a/server/sonar-web/src/main/js/apps/create/project/components/RepositoryList.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/components/RepositoryList.tsx @@ -19,8 +19,8 @@ */ import styled from '@emotion/styled'; -import { Checkbox } from '@sonarsource/echoes-react'; -import { ButtonPrimary, InputSearch, LightPrimary, themeBorder, themeColor } from 'design-system'; +import { Button, ButtonVariety, Checkbox } from '@sonarsource/echoes-react'; +import { InputSearch, LightPrimary, themeBorder, themeColor } from 'design-system'; import React, { useCallback, useMemo } from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; import ListFooter from '../../../../components/controls/ListFooter'; @@ -157,9 +157,13 @@ export default function RepositoryList(props: Readonly) { />
    - +
    diff --git a/server/sonar-web/src/main/js/apps/create/project/monorepo/MonorepoProjectCreate.tsx b/server/sonar-web/src/main/js/apps/create/project/monorepo/MonorepoProjectCreate.tsx index c766eca3c50..a8771bfaa58 100644 --- a/server/sonar-web/src/main/js/apps/create/project/monorepo/MonorepoProjectCreate.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/monorepo/MonorepoProjectCreate.tsx @@ -17,8 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { Spinner } from '@sonarsource/echoes-react'; -import { BlueGreySeparator, ButtonPrimary, ButtonSecondary } from 'design-system'; +import { Button, ButtonVariety, Spinner } from '@sonarsource/echoes-react'; +import { BlueGreySeparator } from 'design-system'; import React, { useEffect, useRef } from 'react'; import { FormattedMessage } from 'react-intl'; import { GroupBase } from 'react-select'; @@ -250,12 +250,17 @@ export default function MonorepoProjectCreate(props: Readonly - + + ); diff --git a/server/sonar-web/src/main/js/apps/create/project/monorepo/MonorepoProjectsList.tsx b/server/sonar-web/src/main/js/apps/create/project/monorepo/MonorepoProjectsList.tsx index d66d5585f7e..32692270ed5 100644 --- a/server/sonar-web/src/main/js/apps/create/project/monorepo/MonorepoProjectsList.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/monorepo/MonorepoProjectsList.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, SubTitle } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { SubTitle } from 'design-system'; import React from 'react'; import { FormattedMessage } from 'react-intl'; import { ProjectData, ProjectValidationCard } from '../components/ProjectValidation'; @@ -60,9 +61,9 @@ export function MonorepoProjectsList({
    - +
    ); diff --git a/server/sonar-web/src/main/js/apps/groups/components/DeleteGroupForm.tsx b/server/sonar-web/src/main/js/apps/groups/components/DeleteGroupForm.tsx index 4abc6d4ab07..a2e24dcf85d 100644 --- a/server/sonar-web/src/main/js/apps/groups/components/DeleteGroupForm.tsx +++ b/server/sonar-web/src/main/js/apps/groups/components/DeleteGroupForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DangerButtonPrimary, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { Modal } from 'design-system'; import * as React from 'react'; import { translate, translateWithParameters } from '../../../helpers/l10n'; import { useDeleteGroupMutation } from '../../../queries/groups'; @@ -45,9 +46,15 @@ export default function DeleteGroupForm(props: Readonly) { onClose={props.onClose} body={translateWithParameters('groups.delete_group.confirmation', group.name)} primaryButton={ - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/groups/components/GroupForm.tsx b/server/sonar-web/src/main/js/apps/groups/components/GroupForm.tsx index 0b76702de2f..768b11ceb5c 100644 --- a/server/sonar-web/src/main/js/apps/groups/components/GroupForm.tsx +++ b/server/sonar-web/src/main/js/apps/groups/components/GroupForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FormField, InputField, InputTextArea, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FormField, InputField, InputTextArea, Modal } from 'design-system'; import * as React from 'react'; import { useState } from 'react'; import MandatoryFieldsExplanation from '../../../components/ui/MandatoryFieldsExplanation'; @@ -102,12 +103,13 @@ export default function GroupForm(props: Props) { } onClose={props.onClose} primaryButton={ - {create ? translate('create') : translate('update_verb')} - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/groups/components/Header.tsx b/server/sonar-web/src/main/js/apps/groups/components/Header.tsx index b2adc904b51..513562c1633 100644 --- a/server/sonar-web/src/main/js/apps/groups/components/Header.tsx +++ b/server/sonar-web/src/main/js/apps/groups/components/Header.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FlagMessage, Title } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, Title } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import DocumentationLink from '../../../components/common/DocumentationLink'; @@ -39,13 +40,14 @@ export default function Header({ manageProvider }: Readonly) {
    {translate('user_groups.page')} - setCreateModal(true)} + variety={ButtonVariety.Primary} > {translate('groups.create_group')} - +
    {manageProvider === undefined ? ( diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistoryAndComments.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistoryAndComments.tsx index 5e5218bf43c..286d41fb721 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistoryAndComments.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistoryAndComments.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, PageTitle } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { PageTitle } from 'design-system'; import * as React from 'react'; import { addIssueComment, deleteIssueComment, editIssueComment } from '../../../api/issues'; import { updateIssue } from '../../../components/issue/actions'; @@ -83,9 +84,9 @@ export default class IssueReviewHistoryAndComments extends React.PureComponent

    {issue.actions.includes(IssueActions.Comment) && ( - + )} {displayReset && ( - + )}

    diff --git a/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx b/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx index 9014ef86d5a..4ce2fcc1842 100644 --- a/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx +++ b/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx @@ -19,8 +19,8 @@ */ import styled from '@emotion/styled'; -import { Link, LinkStandalone, Spinner } from '@sonarsource/echoes-react'; -import { ButtonPrimary, Card, CenteredLayout, Note, Title } from 'design-system'; +import { Button, ButtonVariety, Link, LinkStandalone, Spinner } from '@sonarsource/echoes-react'; +import { Card, CenteredLayout, Note, Title } from 'design-system'; import * as React from 'react'; import { Helmet } from 'react-helmet-async'; import { FormattedMessage } from 'react-intl'; @@ -298,9 +298,13 @@ export default class App extends React.PureComponent { {translate('maintenance.upgrade_database.3')} - + )} diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginActions.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginActions.tsx index 1a4d7c0b87c..2b77281abb6 100644 --- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginActions.tsx +++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginActions.tsx @@ -17,14 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { - ButtonSecondary, - CheckIcon, - Checkbox, - DangerButtonSecondary, - Link, - Spinner, -} from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { ButtonSecondary, CheckIcon, Checkbox, Link, Spinner } from 'design-system'; import * as React from 'react'; import { installPlugin, uninstallPlugin, updatePlugin } from '../../../api/plugins'; import Tooltip from '../../../components/controls/Tooltip'; @@ -150,9 +144,13 @@ export default class PluginActions extends React.PureComponent { ))} - + )} diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLogButton.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLogButton.tsx index d2caa3a3c70..e815a15d673 100644 --- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLogButton.tsx +++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLogButton.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, DropdownToggler } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { DropdownToggler } from 'design-system'; import * as React from 'react'; import { translate, translateWithParameters } from '../../../helpers/l10n'; import { Release, Update } from '../../../types/plugins'; @@ -40,7 +41,7 @@ export default function PluginChangeLogButton({ pluginName, release, update }: R id={`plugin-changelog-${pluginName}`} overlay={} > - setOpen((open) => !open)} > {translate('see_changelog')} - + ); } diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginRiskConsentBox.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginRiskConsentBox.tsx index ade15440de3..d8accd8107c 100644 --- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginRiskConsentBox.tsx +++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginRiskConsentBox.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, Card, DarkLabel } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { Card, DarkLabel } from 'design-system'; import * as React from 'react'; import { translate } from '../../../helpers/l10n'; import { EditionKey } from '../../../types/editions'; @@ -44,9 +45,9 @@ export default function PluginRiskConsentBox(props: Readonly{translate('marketplace.risk_consent.installation')}

    )} - + ); } diff --git a/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx b/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx index 02fb4acbce6..0eb0427a9ac 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx @@ -17,8 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { IconSlideshow } from '@sonarsource/echoes-react'; -import { ButtonSecondary, SeparatorCircleIcon } from 'design-system'; +import { Button, IconSlideshow } from '@sonarsource/echoes-react'; +import { SeparatorCircleIcon } from 'design-system'; import React from 'react'; import { useIntl } from 'react-intl'; import { formatMeasure } from '~sonar-aligned/helpers/measures'; @@ -79,14 +79,14 @@ export default function BranchMetaTopBar({ {showTakeTheTourButton && ( - {translate('overview.promoted_section.button_primary')} - + )} diff --git a/server/sonar-web/src/main/js/apps/overview/components/AnalysisWarningsModal.tsx b/server/sonar-web/src/main/js/apps/overview/components/AnalysisWarningsModal.tsx index 1847fee0f2b..3efcac9115c 100644 --- a/server/sonar-web/src/main/js/apps/overview/components/AnalysisWarningsModal.tsx +++ b/server/sonar-web/src/main/js/apps/overview/components/AnalysisWarningsModal.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DangerButtonSecondary, FlagMessage, HtmlFormatter, Modal, Spinner } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, HtmlFormatter, Modal, Spinner } from 'design-system'; import * as React from 'react'; import withCurrentUserContext from '../../../app/components/current-user/withCurrentUserContext'; import { translate } from '../../../helpers/l10n'; @@ -62,14 +63,15 @@ export function AnalysisWarningsModal(props: Props) {
    {dismissable && currentUser.isLoggedIn && (
    - { handleDismissMessage(key); }} + variety={ButtonVariety.DangerOutline} > {translate('dismiss_permanently')} - +
    diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/DeleteForm.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/DeleteForm.tsx index 018f24cbc0b..7b9d1267f15 100644 --- a/server/sonar-web/src/main/js/apps/permission-templates/components/DeleteForm.tsx +++ b/server/sonar-web/src/main/js/apps/permission-templates/components/DeleteForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DangerButtonPrimary, Modal, Spinner } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { Modal, Spinner } from 'design-system'; import * as React from 'react'; import { useState } from 'react'; import { translate, translateWithParameters } from '../../../helpers/l10n'; @@ -50,9 +51,9 @@ export default function DeleteForm({ onClose, onSubmit, permissionTemplate: t }: primaryButton={ <> - + } /> diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/Form.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/Form.tsx index c2ad8b67db2..be36d557d86 100644 --- a/server/sonar-web/src/main/js/apps/permission-templates/components/Form.tsx +++ b/server/sonar-web/src/main/js/apps/permission-templates/components/Form.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FormField, InputField, InputTextArea, Modal, Spinner } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FormField, InputField, InputTextArea, Modal, Spinner } from 'design-system'; import * as React from 'react'; import MandatoryFieldsExplanation from '../../../components/ui/MandatoryFieldsExplanation'; import { translate } from '../../../helpers/l10n'; @@ -144,14 +145,15 @@ export default class Form extends React.PureComponent { primaryButton={ <> - {this.props.confirmButtonText} - + } /> diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/Header.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/Header.tsx index 0f6e9b53a6a..633d1f0b87d 100644 --- a/server/sonar-web/src/main/js/apps/permission-templates/components/Header.tsx +++ b/server/sonar-web/src/main/js/apps/permission-templates/components/Header.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FlagMessage, Spinner, Title } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, Spinner, Title } from 'design-system'; import React, { useState } from 'react'; import { withRouter } from '~sonar-aligned/components/hoc/withRouter'; import { throwGlobalError } from '~sonar-aligned/helpers/error'; @@ -65,7 +66,9 @@ function Header(props: Props) {
    - setCreateModal(true)}>{translate('create')} +
    {translate('permission_templates.page.description')}
    diff --git a/server/sonar-web/src/main/js/apps/permissions/project/components/PageHeader.tsx b/server/sonar-web/src/main/js/apps/permissions/project/components/PageHeader.tsx index 693ad08b889..d86d5c8fed5 100644 --- a/server/sonar-web/src/main/js/apps/permissions/project/components/PageHeader.tsx +++ b/server/sonar-web/src/main/js/apps/permissions/project/components/PageHeader.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FlagMessage, Title } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, Title } from 'design-system'; import * as React from 'react'; import { isPortfolioLike } from '~sonar-aligned/helpers/component'; import GitHubSynchronisationWarning from '../../../../app/components/GitHubSynchronisationWarning'; @@ -102,9 +103,13 @@ export default function PageHeader(props: Props) { {canApplyPermissionTemplate && (
    - + {applyTemplateModal && ( value={{ from: this.props.from, to: this.props.to }} zLevel={PopupZLevel.Content} /> - {translate('project_activity.reset_dates')} - +
    ); } diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/forms/AddEventForm.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/forms/AddEventForm.tsx index 6041eb64164..8bc24ceda69 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/forms/AddEventForm.tsx +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/forms/AddEventForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, InputField, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { InputField, Modal } from 'design-system'; import * as React from 'react'; import { translate } from '../../../../helpers/l10n'; import { useCreateEventMutation } from '../../../../queries/project-analyses'; @@ -68,15 +69,16 @@ export default function AddEventForm(props: Readonly) { } primaryButton={ - {translate('save')} - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/forms/ChangeEventForm.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/forms/ChangeEventForm.tsx index 14dfbe7a674..c2d16c56b63 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/forms/ChangeEventForm.tsx +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/forms/ChangeEventForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, InputField, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { InputField, Modal } from 'design-system'; import * as React from 'react'; import { translate } from '../../../../helpers/l10n'; import { useChangeEventMutation } from '../../../../queries/project-analyses'; @@ -63,15 +64,16 @@ export default function ChangeEventForm(props: Readonly) { } primaryButton={ - {translate('change_verb')} - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/forms/RemoveAnalysisForm.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/forms/RemoveAnalysisForm.tsx index b04a7426464..b7b1668e426 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/forms/RemoveAnalysisForm.tsx +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/forms/RemoveAnalysisForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DangerButtonPrimary, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { Modal } from 'design-system'; import * as React from 'react'; import { translate } from '../../../../helpers/l10n'; import { useDeleteAnalysisMutation } from '../../../../queries/project-analyses'; @@ -37,9 +38,13 @@ export default function RemoveAnalysisForm({ analysis, onClose }: Readonly{translate('project_activity.delete_analysis.question')}

    } primaryButton={ - deleteAnalysis(analysis.key)} type="submit"> + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/forms/RemoveEventForm.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/forms/RemoveEventForm.tsx index d3d55255c9c..3b7db392427 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/forms/RemoveEventForm.tsx +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/forms/RemoveEventForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DangerButtonPrimary, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { Modal } from 'design-system'; import * as React from 'react'; import { translate } from '../../../../helpers/l10n'; import { useDeleteEventMutation } from '../../../../queries/project-analyses'; @@ -41,11 +42,12 @@ export default function RemoveEventForm(props: RemoveEventFormProps) { onClose={props.onClose} body={

    {removeEventQuestion}

    } primaryButton={ - deleteEvent({ analysis: analysisKey, event: event.key })} + variety={ButtonVariety.Danger} > {translate('delete')} - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/DeleteBranchModal.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/DeleteBranchModal.tsx index 613af3a9334..74d97992aa5 100644 --- a/server/sonar-web/src/main/js/apps/projectBranches/components/DeleteBranchModal.tsx +++ b/server/sonar-web/src/main/js/apps/projectBranches/components/DeleteBranchModal.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DangerButtonPrimary, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { Modal } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import { isPullRequest } from '~sonar-aligned/helpers/branch-like'; @@ -76,9 +77,9 @@ export default function DeleteBranchModal(props: Props) { } loading={isPending} primaryButton={ - + } secondaryButtonLabel={} onClose={props.onClose} diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx index 12ec89d966b..bbbee4f845b 100644 --- a/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx +++ b/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FormField, InputField, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FormField, InputField, Modal } from 'design-system'; import * as React from 'react'; import { useState } from 'react'; import { FormattedMessage } from 'react-intl'; @@ -81,9 +82,14 @@ export default function RenameBranchModal(props: Props) { } loading={isPending} primaryButton={ - + } secondaryButtonLabel={} onClose={props.onClose} diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/SetAsMainBranchModal.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/SetAsMainBranchModal.tsx index e2965ad022f..c306584011d 100644 --- a/server/sonar-web/src/main/js/apps/projectBranches/components/SetAsMainBranchModal.tsx +++ b/server/sonar-web/src/main/js/apps/projectBranches/components/SetAsMainBranchModal.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FlagMessage, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, Modal } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import DocumentationLink from '../../../components/common/DocumentationLink'; @@ -85,9 +86,9 @@ export default function SetAsMainBranchModal(props: SetAsMainBranchModalProps) { } primaryButton={ - + } secondaryButtonLabel={} /> diff --git a/server/sonar-web/src/main/js/apps/projectDeletion/Form.tsx b/server/sonar-web/src/main/js/apps/projectDeletion/Form.tsx index b4c09bf43c1..9de1ebc5f82 100644 --- a/server/sonar-web/src/main/js/apps/projectDeletion/Form.tsx +++ b/server/sonar-web/src/main/js/apps/projectDeletion/Form.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DangerButtonPrimary, addGlobalSuccessMessage } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { addGlobalSuccessMessage } from 'design-system'; import * as React from 'react'; import { withRouter } from '~sonar-aligned/components/hoc/withRouter'; import { isPortfolioLike } from '~sonar-aligned/helpers/component'; @@ -71,9 +72,9 @@ export class Form extends React.PureComponent { onConfirm={this.handleDelete} > {({ onClick }) => ( - + )} ); diff --git a/server/sonar-web/src/main/js/apps/projectDump/components/Export.tsx b/server/sonar-web/src/main/js/apps/projectDump/components/Export.tsx index 7ba095b342f..9b0175fc0e5 100644 --- a/server/sonar-web/src/main/js/apps/projectDump/components/Export.tsx +++ b/server/sonar-web/src/main/js/apps/projectDump/components/Export.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, FlagMessage, Link, Spinner } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { FlagMessage, Link, Spinner } from 'design-system'; import * as React from 'react'; import { doExport } from '../../../api/project-dump'; import DateFromNow from '../../../components/intl/DateFromNow'; @@ -147,13 +148,13 @@ export default function Export(props: Readonly) { return ( <>
    {translate('project_dump.export_form_description')}
    - {translate('project_dump.do_export')} - + ); } diff --git a/server/sonar-web/src/main/js/apps/projectDump/components/Import.tsx b/server/sonar-web/src/main/js/apps/projectDump/components/Import.tsx index b9d88c0470d..09126a9c59b 100644 --- a/server/sonar-web/src/main/js/apps/projectDump/components/Import.tsx +++ b/server/sonar-web/src/main/js/apps/projectDump/components/Import.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, FlagMessage, Link, Spinner } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { FlagMessage, Link, Spinner } from 'design-system'; import * as React from 'react'; import { doImport } from '../../../api/project-dump'; import DateFromNow from '../../../components/intl/DateFromNow'; @@ -57,13 +58,13 @@ export default function Import(props: Readonly) { return ( <>
    {translate('project_dump.import_form_description')}
    - {translate('project_dump.do_import')} - + ); } diff --git a/server/sonar-web/src/main/js/apps/projectLinks/CreationModal.tsx b/server/sonar-web/src/main/js/apps/projectLinks/CreationModal.tsx index dec77f0d0e2..f5833dc98ca 100644 --- a/server/sonar-web/src/main/js/apps/projectLinks/CreationModal.tsx +++ b/server/sonar-web/src/main/js/apps/projectLinks/CreationModal.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FormField, InputField, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FormField, InputField, Modal } from 'design-system'; import * as React from 'react'; import MandatoryFieldsExplanation from '../../components/ui/MandatoryFieldsExplanation'; import { translate } from '../../helpers/l10n'; @@ -97,9 +98,9 @@ export default class CreationModal extends React.PureComponent { onClose={this.props.onClose} body={formBody} primaryButton={ - + } /> ); diff --git a/server/sonar-web/src/main/js/apps/projectLinks/Header.tsx b/server/sonar-web/src/main/js/apps/projectLinks/Header.tsx index aeddac61de2..3cc3a2da89a 100644 --- a/server/sonar-web/src/main/js/apps/projectLinks/Header.tsx +++ b/server/sonar-web/src/main/js/apps/projectLinks/Header.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, Title } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { Title } from 'design-system'; import * as React from 'react'; import { translate } from '../../helpers/l10n'; import CreationModal from './CreationModal'; @@ -58,9 +59,13 @@ export default class Header extends React.PureComponent {
    {translate('project_links.page')} - +

    {translate('project_links.page.description')}

    diff --git a/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchNewCodeDefinitionSettingModal.tsx b/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchNewCodeDefinitionSettingModal.tsx index 3ea6f12303f..6e8dd56f300 100644 --- a/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchNewCodeDefinitionSettingModal.tsx +++ b/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchNewCodeDefinitionSettingModal.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, Modal, PageContentFontWrapper, Spinner } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { Modal, PageContentFontWrapper, Spinner } from 'design-system'; import { noop } from 'lodash'; import * as React from 'react'; import { setNewCodeDefinition } from '../../../api/newCodeDefinition'; @@ -223,9 +224,14 @@ export default class BranchNewCodeDefinitionSettingModal extends React.PureCompo primaryButton={ <> - + } secondaryButtonLabel={translate('cancel')} diff --git a/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionSelector.tsx b/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionSelector.tsx index 65e436e3250..23d3d156c94 100644 --- a/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionSelector.tsx +++ b/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionSelector.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, ButtonSecondary, FlagMessage, RadioButton, Spinner } from 'design-system'; +import { Button, ButtonGroup, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, RadioButton } from 'design-system'; import { noop } from 'lodash'; import * as React from 'react'; import GlobalNewCodeDefinitionDescription from '../../../components/new-code-definition/GlobalNewCodeDefinitionDescription'; @@ -187,21 +188,20 @@ export default function ProjectNewCodeDefinitionSelector( )} -
    - + + - +
    + + ); diff --git a/server/sonar-web/src/main/js/apps/projectQualityProfiles/components/AddLanguageModal.tsx b/server/sonar-web/src/main/js/apps/projectQualityProfiles/components/AddLanguageModal.tsx index f8a6651cd2d..0368ecfadfe 100644 --- a/server/sonar-web/src/main/js/apps/projectQualityProfiles/components/AddLanguageModal.tsx +++ b/server/sonar-web/src/main/js/apps/projectQualityProfiles/components/AddLanguageModal.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FormField, InputSelect, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FormField, InputSelect, Modal } from 'design-system'; import { difference } from 'lodash'; import * as React from 'react'; import { Profile } from '../../../api/quality-profiles'; @@ -116,13 +117,14 @@ export function AddLanguageModal(props: AddLanguageModalProps) { isOverflowVisible body={renderForm} primaryButton={ - {translate('save')} - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx b/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx index 93d52649d90..13d74b44a65 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FishVisual, Highlight } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FishVisual, Highlight } from 'design-system'; import * as React from 'react'; import { withRouter } from '~sonar-aligned/components/hoc/withRouter'; import { Router } from '~sonar-aligned/types/router'; @@ -49,14 +50,15 @@ export function EmptyInstance(props: EmptyInstanceProps) {

    {translate('projects.no_projects.empty_instance.how_to_add_projects')}

    - { router.push('/projects/create'); }} + variety={ButtonVariety.Primary} > {translate('my_account.create_new.TRK')} - + )} diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx index f598577b81a..2aed6d9bfae 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { BasicSeparator, DangerButtonSecondary, StyledPageTitle } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { BasicSeparator, StyledPageTitle } from 'design-system'; import { flatMap } from 'lodash'; import * as React from 'react'; import { RawQuery } from '~sonar-aligned/types/router'; @@ -88,9 +89,9 @@ export default function PageSidebar(props: PageSidebarProps) { {isFiltered && ( - + )} diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ChangeDefaultVisibilityForm.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/ChangeDefaultVisibilityForm.tsx index 5b4005e9171..4846bd46fcb 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/ChangeDefaultVisibilityForm.tsx +++ b/server/sonar-web/src/main/js/apps/projectsManagement/ChangeDefaultVisibilityForm.tsx @@ -17,8 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { RadioButtonGroup } from '@sonarsource/echoes-react'; -import { ButtonPrimary, FlagMessage, Modal } from 'design-system'; +import { Button, ButtonVariety, RadioButtonGroup } from '@sonarsource/echoes-react'; +import { FlagMessage, Modal } from 'design-system'; import React, { useState } from 'react'; import { Visibility } from '~sonar-aligned/types/component'; import { translate } from '../../helpers/l10n'; @@ -80,9 +80,9 @@ export default function ChangeDefaultVisibilityForm(props: Readonly) { onClose={props.onClose} body={body} primaryButton={ - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/DeleteModal.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/DeleteModal.tsx index 81fb8629f6f..efffba35cac 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/DeleteModal.tsx +++ b/server/sonar-web/src/main/js/apps/projectsManagement/DeleteModal.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DangerButtonPrimary, FlagMessage, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, Modal } from 'design-system'; import * as React from 'react'; import { Project, bulkDeleteProjects } from '../../api/project-management'; import { toISO8601WithOffsetString } from '../../helpers/dates'; @@ -104,14 +105,15 @@ export default class DeleteModal extends React.PureComponent { } primaryButton={ - {translate('delete')} - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx index c9c57fc28ca..bae3f637d03 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx +++ b/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, InteractiveIcon, PencilIcon, Title } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { InteractiveIcon, PencilIcon, Title } from 'design-system'; import * as React from 'react'; import { useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; @@ -59,16 +60,17 @@ export default function Header(props: Readonly) { {hasProvisionPermission && ( - navigate('/projects/create?mode=manual', { state: { from: location.pathname }, }) } + variety={ButtonVariety.Primary} > {translate('qualifiers.create.TRK')} - + )} diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/RestoreAccessModal.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/RestoreAccessModal.tsx index b491fd281cd..9bc349a0fd9 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/RestoreAccessModal.tsx +++ b/server/sonar-web/src/main/js/apps/projectsManagement/RestoreAccessModal.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { Modal } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import { grantPermissionToUser } from '../../api/permissions'; @@ -92,9 +93,15 @@ export default class RestoreAccessModal extends React.PureComponent } primaryButton={ - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/AddConditionModal.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/AddConditionModal.tsx index 2000c46713f..ed785c588f4 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/AddConditionModal.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/AddConditionModal.tsx @@ -17,8 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { RadioButtonGroup } from '@sonarsource/echoes-react'; -import { ButtonPrimary, FormField, Modal } from 'design-system'; +import { Button, ButtonVariety, RadioButtonGroup } from '@sonarsource/echoes-react'; +import { FormField, Modal } from 'design-system'; import * as React from 'react'; import { translate } from '../../../helpers/l10n'; import { isDiffMetric } from '../../../helpers/measures'; @@ -161,15 +161,16 @@ export default function AddConditionModal({ metrics, onClose, qualityGate }: Rea onClose={onClose} body={renderBody()} primaryButton={ - {translate('quality_gates.add_condition')} - + } secondaryButtonLabel={translate('close')} /> diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycFixOptimizeBanner.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/CaycFixOptimizeBanner.tsx index 62b4c5fd332..8e895e6c682 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycFixOptimizeBanner.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/CaycFixOptimizeBanner.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, CardWithPrimaryBackground, SubHeadingHighlight } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { CardWithPrimaryBackground, SubHeadingHighlight } from 'design-system'; import React from 'react'; import { FormattedMessage } from 'react-intl'; import DocumentationLink from '../../../components/common/DocumentationLink'; @@ -59,13 +60,13 @@ export default function CaycNonCompliantBanner({ renderCaycModal, isOptimizing } {({ onClick }) => ( - + )} diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx index 70d264e7afb..623fb39b27c 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, Link, Modal, SubHeading, Title } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { Link, Modal, SubHeading, Title } from 'design-system'; import { sortBy } from 'lodash'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; @@ -130,18 +131,19 @@ export default function CaycReviewUpdateConditionsModal(props: Readonly) onClose={onClose} body={body} primaryButton={ - {translate( isOptimizing ? 'quality_gates.cayc.review_optimize_modal.confirm_text' : 'quality_gates.cayc.review_update_modal.confirm_text', )} - + } secondaryButtonLabel={translate('close')} /> diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/CopyQualityGateForm.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/CopyQualityGateForm.tsx index ee09f47d308..5f9eb9f44a3 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/CopyQualityGateForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/CopyQualityGateForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FormField, InputField, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FormField, InputField, Modal } from 'design-system'; import * as React from 'react'; import { useRouter } from '~sonar-aligned/components/hoc/withRouter'; import MandatoryFieldsExplanation from '../../../components/ui/MandatoryFieldsExplanation'; @@ -77,9 +78,15 @@ export default function CopyQualityGateForm({ qualityGate, onClose }: Readonly

    } primaryButton={ - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/CreateQualityGateForm.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/CreateQualityGateForm.tsx index 05d5ddc3f1c..d823757a924 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/CreateQualityGateForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/CreateQualityGateForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, FormField, InputField, Modal } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { FormField, InputField, Modal } from 'design-system'; import * as React from 'react'; import { useRouter } from '~sonar-aligned/components/hoc/withRouter'; import MandatoryFieldsExplanation from '../../../components/ui/MandatoryFieldsExplanation'; @@ -82,14 +83,14 @@ export default function CreateQualityGateForm({ onClose }: Readonly) { isScrollable body={body} primaryButton={ - {translate('quality_gate.create')} - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/DeleteQualityGateForm.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/DeleteQualityGateForm.tsx index 3c92d5e320a..a4dfe88e761 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/DeleteQualityGateForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/DeleteQualityGateForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DangerButtonPrimary, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { Modal } from 'design-system'; import * as React from 'react'; import { useRouter } from '~sonar-aligned/components/hoc/withRouter'; import { translate, translateWithParameters } from '../../../helpers/l10n'; @@ -45,9 +46,9 @@ export default function DeleteQualityGateForm({ qualityGate, onClose }: Readonly onClose={onClose} body={translateWithParameters('quality_gates.delete.confirm.message', qualityGate.name)} primaryButton={ - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/EditConditionModal.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/EditConditionModal.tsx index c12319f7aa8..7c9a805007d 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/EditConditionModal.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/EditConditionModal.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FormField, Highlight, Modal, Note } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FormField, Highlight, Modal, Note } from 'design-system'; import { isArray } from 'lodash'; import * as React from 'react'; import { getLocalizedMetricName, translate } from '../../../helpers/l10n'; @@ -121,9 +122,9 @@ export default function EditConditionModal({ onClose={onClose} body={renderBody()} primaryButton={ - + } secondaryButtonLabel={translate('close')} /> 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 dd33243d83b..93896aa991d 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,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, HelperHintIcon, Title } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { HelperHintIcon, Title } from 'design-system'; import * as React from 'react'; import DocHelpTooltip from '~sonar-aligned/components/controls/DocHelpTooltip'; import ModalButton, { ModalProps } from '../../../components/controls/ModalButton'; @@ -40,9 +41,9 @@ function CreateQualityGateModal() {

    {({ onClick }) => ( - + )}
    diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx index 5d5f021c213..5fc9f6ad88e 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx @@ -17,8 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { IconPeople, SelectAsync } from '@sonarsource/echoes-react'; -import { ButtonPrimary, GenericAvatar, Modal, Note } from 'design-system'; +import { Button, ButtonVariety, IconPeople, SelectAsync } from '@sonarsource/echoes-react'; +import { GenericAvatar, Modal, Note } from 'design-system'; import * as React from 'react'; import Avatar from '../../../components/ui/Avatar'; import { translate } from '../../../helpers/l10n'; @@ -69,9 +69,14 @@ export default function QualityGatePermissionsAddModalRenderer( } primaryButton={ - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/RenameQualityGateForm.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/RenameQualityGateForm.tsx index 49977a45bc0..76c8b5d2547 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/RenameQualityGateForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/RenameQualityGateForm.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FormField, InputField, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FormField, InputField, Modal } from 'design-system'; import * as React from 'react'; import { useRouter } from '~sonar-aligned/components/hoc/withRouter'; import MandatoryFieldsExplanation from '../../../components/ui/MandatoryFieldsExplanation'; @@ -78,9 +79,15 @@ export default function RenameQualityGateForm({ qualityGate, onClose }: Readonly } primaryButton={ - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogContainer.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogContainer.tsx index 723dd1764c1..0f37e03c4ac 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogContainer.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogContainer.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, Spinner } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { Spinner } from 'design-system'; import * as React from 'react'; import { withRouter } from '~sonar-aligned/components/hoc/withRouter'; import { Location, Router } from '~sonar-aligned/types/router'; @@ -159,9 +160,7 @@ class ChangelogContainer extends React.PureComponent { {shouldDisplayFooter && (
    - - {translate('show_more')} - +
    )} diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx index 34c44082203..62de980541c 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, DateRangePicker } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { DateRangePicker } from 'design-system'; import * as React from 'react'; import { useIntl } from 'react-intl'; @@ -43,9 +44,9 @@ export default function ChangelogSearch(props: ChangelogSearchProps) { onChange={props.onDateRangeChange} value={dateRange} /> - + ); } diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResultActivation.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResultActivation.tsx index 7df42fa7ea5..e12115032a1 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResultActivation.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResultActivation.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, Spinner } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { Spinner } from 'design-system'; import * as React from 'react'; import { useIntl } from 'react-intl'; import { Profile } from '../../../api/quality-profiles'; @@ -61,13 +62,13 @@ export default function ComparisonResultActivation(props: React.PropsWithChildre return ( - {intl.formatMessage({ id: 'activate' })} - + {isOpen && ( diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/DeleteProfileForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/DeleteProfileForm.tsx index 021aabf6ac5..0bc3426a8a6 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/components/DeleteProfileForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/DeleteProfileForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DangerButtonPrimary, FlagMessage, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, Modal } from 'design-system'; import * as React from 'react'; import { translate, translateWithParameters } from '../../../helpers/l10n'; import { Profile } from '../types'; @@ -65,14 +66,15 @@ export default function DeleteProfileForm(props: DeleteProfileFormProps) { } primaryButton={ - { props.onDelete(); }} - disabled={loading} + isDisabled={loading} + variety={ButtonVariety.Danger} > {translate('delete')} - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileModalForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileModalForm.tsx index 13a3906d0f7..d0b3b274548 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileModalForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileModalForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FlagMessage, FormField, InputField, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, FormField, InputField, Modal } from 'design-system'; import * as React from 'react'; import MandatoryFieldsExplanation from '../../../components/ui/MandatoryFieldsExplanation'; import { KeyboardKeys } from '../../../helpers/keycodes'; @@ -114,9 +115,9 @@ export default function ProfileModalForm(props: ProfileModalFormProps) { } primaryButton={ - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.tsx index 0147482a4d6..635efa7538a 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileInheritance.tsx @@ -17,8 +17,9 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { Button } from '@sonarsource/echoes-react'; import classNames from 'classnames'; -import { ButtonSecondary, FlagMessage, Spinner, SubTitle, Table } from 'design-system'; +import { FlagMessage, Spinner, SubTitle, Table } from 'design-system'; import * as React from 'react'; import { translate } from '../../../helpers/l10n'; import { useProfileInheritanceQuery } from '../../../queries/quality-profiles'; @@ -71,12 +72,9 @@ export default function ProfileInheritance(props: Readonly) {
    {translate('quality_profiles.profile_inheritance')} {profile.actions?.edit && !profile.isBuiltIn && ( - + )}
    diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsForm.tsx index b7c40626aa9..4b46d1b2cba 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FormField, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FormField, Modal } from 'design-system'; import * as React from 'react'; import { translate } from '../../../helpers/l10n'; import { useAddGroupMutation, useAddUserMutation } from '../../../queries/quality-profiles'; @@ -74,9 +75,14 @@ export default function ProfilePermissionForm(props: Readonly) { onClose={props.onClose} loading={loading} primaryButton={ - + } secondaryButtonLabel={translate('cancel')} body={ diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileProjects.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileProjects.tsx index 672acc4d574..0da921ca31b 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileProjects.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileProjects.tsx @@ -17,8 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { Link, Spinner } from '@sonarsource/echoes-react'; -import { Badge, ButtonSecondary, ContentCell, SubTitle, Table, TableRow } from 'design-system'; +import { Button, Link, Spinner } from '@sonarsource/echoes-react'; +import { Badge, ContentCell, SubTitle, Table, TableRow } from 'design-system'; import * as React from 'react'; import { getProfileProjects } from '../../../api/quality-profiles'; import ListFooter from '../../../components/controls/ListFooter'; @@ -182,13 +182,13 @@ export default class ProfileProjects extends React.PureComponent { {translate('projects')} } {profile.actions?.associateProjects && ( - {translate('quality_profiles.change_projects')} - + )} diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx index 46746dd69a2..55043a09630 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, ButtonSecondary, FlagMessage, Link } from 'design-system'; +import { Button, ButtonGroup, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, Link } from 'design-system'; import * as React from 'react'; import { useIntl } from 'react-intl'; import { useLocation, useRouter } from '~sonar-aligned/components/hoc/withRouter'; @@ -71,22 +72,19 @@ export default function PageHeader(props: Readonly) { {actions.create && (
    -
    - + +
    + + {languages.length === 0 && ( {intl.formatMessage({ id: 'quality_profiles.no_languages_available' })} diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/RestoreProfileForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/RestoreProfileForm.tsx index a0baa2dd6fc..224775aa7e1 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/RestoreProfileForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/RestoreProfileForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FileInput, FlagMessage, FormField, Modal, Spinner } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FileInput, FlagMessage, FormField, Modal } from 'design-system'; import * as React from 'react'; import { useRef, useState } from 'react'; import { useIntl } from 'react-intl'; @@ -116,20 +117,19 @@ export default function RestoreProfileForm({ onClose, onRestore }: Readonly - - - {intl.formatMessage({ id: 'restore' })} - - + ) : ( - + ) } secondaryButtonLabel={intl.formatMessage({ id: ruleSuccesses == null ? 'cancel' : 'close' })} diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotCommentModal.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotCommentModal.tsx index bd19b600e54..3c6aa215a12 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotCommentModal.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotCommentModal.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FormField, InputTextArea, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FormField, InputTextArea, Modal } from 'design-system'; import * as React from 'react'; import FormattingTips from '../../../components/common/FormattingTips'; import { translate } from '../../../helpers/l10n'; @@ -51,9 +52,13 @@ export default function HotspotCommentModal(props: HotspotCommentPopupProps) { } primaryButton={ - props.onSubmit(comment)} disabled={!comment}> + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx index 620b0bf9d75..84e8590b686 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, PageTitle } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { PageTitle } from 'design-system'; import * as React from 'react'; import { commentSecurityHotspot, @@ -87,9 +88,9 @@ export default class HotspotReviewHistoryAndComments extends React.PureComponent /> {isLoggedIn(currentUser) && ( - + )} {translate('hotspots.success_dialog.do_not_show')} -
    - + +
    + + ); } diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusReviewButton.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusReviewButton.tsx index 171ea409a3c..ce7f094868d 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusReviewButton.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusReviewButton.tsx @@ -17,7 +17,7 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; import * as React from 'react'; import withCurrentUserContext from '../../../../app/components/current-user/withCurrentUserContext'; import Tooltip from '../../../../components/controls/Tooltip'; @@ -44,9 +44,14 @@ export function StatusReviewButton(props: StatusProps) { content={readonly ? translate('hotspots.status.cannot_change_status') : null} side="bottom" > - setIsOpen(true)} disabled={readonly}> + {isOpen && ( diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusSelectionRenderer.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusSelectionRenderer.tsx index 67d15a1fcf6..02f175802cc 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusSelectionRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusSelectionRenderer.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FormField, InputTextArea, Modal, Note, SelectionCard } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FormField, InputTextArea, Modal, Note, SelectionCard } from 'design-system'; import * as React from 'react'; import FormattingTips from '../../../../components/common/FormattingTips'; import { translate } from '../../../../helpers/l10n'; @@ -87,9 +88,13 @@ export default function StatusSelectionRenderer(props: StatusSelectionRendererPr } primaryButton={ - + } /> ); diff --git a/server/sonar-web/src/main/js/apps/sessions/components/LoginForm.tsx b/server/sonar-web/src/main/js/apps/sessions/components/LoginForm.tsx index 5db5d5d0efd..3fbb7a98667 100644 --- a/server/sonar-web/src/main/js/apps/sessions/components/LoginForm.tsx +++ b/server/sonar-web/src/main/js/apps/sessions/components/LoginForm.tsx @@ -17,14 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { - ButtonPrimary, - ButtonSecondary, - FormField, - InputField, - Link, - Spinner, -} from 'design-system'; +import { Button, ButtonVariety, LinkStandalone, Spinner } from '@sonarsource/echoes-react'; +import { FormField, InputField } from 'design-system'; import * as React from 'react'; import { translate } from '../../../helpers/l10n'; @@ -79,13 +73,13 @@ export default class LoginForm extends React.PureComponent { render() { if (this.state.collapsed) { return ( - {translate('login.more_options')} - + ); } return ( @@ -117,12 +111,12 @@ export default class LoginForm extends React.PureComponent {
    -
    - - {translate('go_back')} - +
    + + {translate('go_back')} +
    diff --git a/server/sonar-web/src/main/js/apps/settings/components/DefinitionActions.tsx b/server/sonar-web/src/main/js/apps/settings/components/DefinitionActions.tsx index 158dce175b5..a505333cf00 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/DefinitionActions.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/DefinitionActions.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, ButtonSecondary, DangerButtonPrimary, Modal, Note } from 'design-system'; +import { Button, ButtonGroup, ButtonVariety } from '@sonarsource/echoes-react'; +import { Modal, Note } from 'design-system'; import * as React from 'react'; import { translate, translateWithParameters } from '../../../helpers/l10n'; import { Setting } from '../../../types/settings'; @@ -68,9 +69,9 @@ export default class DefinitionActions extends React.PureComponent } primaryButton={ - + } secondaryButtonLabel={translate('cancel')} /> @@ -86,30 +87,31 @@ export default class DefinitionActions extends React.PureComponent return (
    - {hasValueChanged && ( - - {translate('save')} - - )} + + {hasValueChanged && ( + + )} - {showReset && ( - - {translate('reset_verb')} - - )} + {showReset && ( + + )} - {showCancel && ( - - {translate('cancel')} - - )} + {showCancel && } + {showReset && ( diff --git a/server/sonar-web/src/main/js/apps/settings/components/NewCodeDefinition.tsx b/server/sonar-web/src/main/js/apps/settings/components/NewCodeDefinition.tsx index a574b35d2e3..6810c2a1263 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/NewCodeDefinition.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/NewCodeDefinition.tsx @@ -18,9 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { Spinner } from '@sonarsource/echoes-react'; +import { Button, ButtonGroup, ButtonVariety, Spinner } from '@sonarsource/echoes-react'; import classNames from 'classnames'; -import { ButtonPrimary, ButtonSecondary } from 'design-system'; import React, { useCallback, useEffect } from 'react'; import { FormattedMessage } from 'react-intl'; import DocumentationLink from '../../../components/common/DocumentationLink'; @@ -158,18 +157,18 @@ export default function NewCodeDefinition() {

    {!isSaving && ( - <> - - {translate('save')} - - + + + )}
    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 f9aa868d3d0..7fc9a555001 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 @@ -18,10 +18,10 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { Button, ButtonGroup, ButtonVariety } from '@sonarsource/echoes-react'; import { BasicSeparator, ButtonSecondary, - DangerButtonSecondary, FlagErrorIcon, FlagMessage, FlagSuccessIcon, @@ -150,8 +150,8 @@ export default function AlmBindingDefinitionBox(props: AlmBindingDefinitionBoxPr return (
    -
    - +
    + +

    {definition.key}

    diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx index f72477945d5..0a2b1bdf067 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FlagMessage, Modal, PageContentFontWrapper, Spinner } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, Modal, PageContentFontWrapper, Spinner } from 'design-system'; import * as React from 'react'; import { translate } from '../../../../helpers/l10n'; import { @@ -131,14 +132,15 @@ export default class AlmBindingDefinitionFormRenderer extends React.PureComponen primaryButton={ <> - {translate('settings.almintegration.form.save')} - + } secondaryButtonLabel={translate('cancel')} diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTabRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTabRenderer.tsx index 161c0051952..6b510ee45bd 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTabRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTabRenderer.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FlagMessage, Link, Spinner, getTabId, getTabPanelId } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, Link, Spinner, getTabId, getTabPanelId } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import { translate } from '../../../../helpers/l10n'; @@ -83,13 +84,14 @@ export default function AlmTabRenderer(props: Readonly) {
    0 ? 'sw-mb-5' : 'sw-my-3'}> - {translate('settings.almintegration.create')} - +
    {definitions.map((def) => ( diff --git a/server/sonar-web/src/main/js/apps/settings/components/authentication/AuthenticationSecuredField.tsx b/server/sonar-web/src/main/js/apps/settings/components/authentication/AuthenticationSecuredField.tsx index bed6bf52c4a..597c43a89cc 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/authentication/AuthenticationSecuredField.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/authentication/AuthenticationSecuredField.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, InputField, InputTextArea } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { InputField, InputTextArea } from 'design-system'; import React, { useEffect } from 'react'; import { translate } from '../../../../helpers/l10n'; import { DefinitionV2, ExtendedSettingDefinition, SettingType } from '../../../../types/settings'; @@ -68,13 +69,13 @@ export default function AuthenticationSecuredField(props: SamlToggleFieldProps) {showSecretField && (

    {translate('settings.almintegration.form.secret.field')}

    - { setShowSecretField(false); }} > {translate('settings.almintegration.form.secret.update_field')} - +
    )} diff --git a/server/sonar-web/src/main/js/apps/settings/components/authentication/AutoProvisionningConsent.tsx b/server/sonar-web/src/main/js/apps/settings/components/authentication/AutoProvisionningConsent.tsx index 391e56b57ee..1f78fefae0e 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/authentication/AutoProvisionningConsent.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/authentication/AutoProvisionningConsent.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, Modal } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { Modal } from 'design-system'; import { noop } from 'lodash'; import * as React from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; @@ -90,14 +91,14 @@ export default function AutoProvisioningConsent() { + } secondaryButton={ - + } /> diff --git a/server/sonar-web/src/main/js/apps/settings/components/authentication/ConfigurationForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/authentication/ConfigurationForm.tsx index 9f1e35b7133..eba9057fa8b 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/authentication/ConfigurationForm.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/authentication/ConfigurationForm.tsx @@ -18,8 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { Spinner } from '@sonarsource/echoes-react'; -import { ButtonPrimary, FlagMessage, Modal } from 'design-system'; +import { Button, ButtonVariety, Spinner } from '@sonarsource/echoes-react'; +import { FlagMessage, Modal } from 'design-system'; import { keyBy } from 'lodash'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; @@ -133,11 +133,17 @@ export default function ConfigurationForm(props: Readonly) { isScrollable onClose={props.onClose} primaryButton={ - + } /> ); diff --git a/server/sonar-web/src/main/js/apps/settings/components/authentication/GitHubConfigurationForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/authentication/GitHubConfigurationForm.tsx index 6d5e2ea39ca..23e5a512e67 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/authentication/GitHubConfigurationForm.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/authentication/GitHubConfigurationForm.tsx @@ -17,8 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { Spinner } from '@sonarsource/echoes-react'; -import { ButtonPrimary, FlagMessage, Modal } from 'design-system'; +import { Button, ButtonVariety, Spinner } from '@sonarsource/echoes-react'; +import { FlagMessage, Modal } from 'design-system'; import { isEmpty, keyBy } from 'lodash'; import React, { useEffect, useState } from 'react'; import { FormattedMessage } from 'react-intl'; @@ -235,9 +235,15 @@ export default function GitHubConfigurationForm(props: Readonly) { primaryButton={ <> - + } /> diff --git a/server/sonar-web/src/main/js/apps/settings/components/authentication/GitLabConfigurationForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/authentication/GitLabConfigurationForm.tsx index 10fc99408d6..b7324db3e73 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/authentication/GitLabConfigurationForm.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/authentication/GitLabConfigurationForm.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FlagMessage, Modal, Spinner } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, Modal, Spinner } from 'design-system'; import { keyBy } from 'lodash'; import React, { SyntheticEvent, useEffect, useState } from 'react'; import { FormattedMessage } from 'react-intl'; @@ -218,9 +219,14 @@ export default function GitLabConfigurationForm(props: Readonly) { primaryButton={ <> - + } /> diff --git a/server/sonar-web/src/main/js/apps/settings/components/authentication/TabHeader.tsx b/server/sonar-web/src/main/js/apps/settings/components/authentication/TabHeader.tsx index 44dcf633d15..aa8d438430b 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/authentication/TabHeader.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/authentication/TabHeader.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { BasicSeparator, ButtonPrimary, SubHeading } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { BasicSeparator, SubHeading } from 'design-system'; import React, { ReactElement } from 'react'; import { translate } from '../../../../helpers/l10n'; @@ -39,9 +40,9 @@ export default function TabHeader({
    {title} {showCreate && ( - + )}
    {configurationValidity} diff --git a/server/sonar-web/src/main/js/apps/settings/components/authentication/TestConfiguration.tsx b/server/sonar-web/src/main/js/apps/settings/components/authentication/TestConfiguration.tsx index 18ced49b36a..e9c58bdb0bd 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/authentication/TestConfiguration.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/authentication/TestConfiguration.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, FlagMessage, Spinner, Variant } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { FlagMessage, Spinner, Variant } from 'design-system'; import React from 'react'; import { translate } from '../../../../helpers/l10n'; @@ -52,13 +53,13 @@ export default function GitLabConfigurationValidity(props: Readonly) { > {loading ? undefined : flagMessageContent} - {translate(`${intlPrefix}.test`)} - + ); } diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForJSON.tsx b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForJSON.tsx index d4cadbe0665..39ca71cd72e 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForJSON.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForJSON.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FlagMessage, InputTextArea } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, InputTextArea } from 'design-system'; import * as React from 'react'; import { translate } from '../../../../helpers/l10n'; import { DefaultSpecializedInputProps, getPropertyName } from '../../utils'; @@ -65,9 +66,9 @@ export default class InputForJSON extends React.PureComponent
    - +
    {formatError && ( diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForSecured.tsx b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForSecured.tsx index 8a4db97608c..d374ff41838 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForSecured.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForSecured.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, LockIcon } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { LockIcon } from 'design-system'; import * as React from 'react'; import { translate } from '../../../../helpers/l10n'; import { @@ -95,9 +96,7 @@ export default class InputForSecured extends React.PureComponent { return (
    - - {translate('change_verb')} - +
    ); } diff --git a/server/sonar-web/src/main/js/apps/system/components/ChangeLogLevelForm.tsx b/server/sonar-web/src/main/js/apps/system/components/ChangeLogLevelForm.tsx index a7593bf8391..ba99739c585 100644 --- a/server/sonar-web/src/main/js/apps/system/components/ChangeLogLevelForm.tsx +++ b/server/sonar-web/src/main/js/apps/system/components/ChangeLogLevelForm.tsx @@ -17,8 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { RadioButtonGroup } from '@sonarsource/echoes-react'; -import { ButtonPrimary, FlagMessage, Modal } from 'design-system'; +import { Button, ButtonVariety, RadioButtonGroup } from '@sonarsource/echoes-react'; +import { FlagMessage, Modal } from 'design-system'; import * as React from 'react'; import { setLogLevel } from '../../../api/system'; import { translate } from '../../../helpers/l10n'; @@ -87,9 +87,15 @@ export default class ChangeLogLevelForm extends React.PureComponent } primaryButton={ - + } secondaryButtonLabel={translate('cancel')} loading={updating} diff --git a/server/sonar-web/src/main/js/apps/users/Header.tsx b/server/sonar-web/src/main/js/apps/users/Header.tsx index 1b4c87b33f5..7dc105c9017 100644 --- a/server/sonar-web/src/main/js/apps/users/Header.tsx +++ b/server/sonar-web/src/main/js/apps/users/Header.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FlagMessage, Link, Title } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, Link, Title } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import { DocLink } from '../../helpers/doc-links'; @@ -40,13 +41,14 @@ export default function Header(props: Props) {
    {translate('users.page')} - setOpenUserForm(true)} + variety={ButtonVariety.Primary} > {translate('users.create_user')} - +
    {manageProvider === undefined ? ( diff --git a/server/sonar-web/src/main/js/apps/users/components/PasswordForm.tsx b/server/sonar-web/src/main/js/apps/users/components/PasswordForm.tsx index bbece8dbdb0..2dd07421c0b 100644 --- a/server/sonar-web/src/main/js/apps/users/components/PasswordForm.tsx +++ b/server/sonar-web/src/main/js/apps/users/components/PasswordForm.tsx @@ -18,14 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { - ButtonPrimary, - FlagMessage, - FormField, - InputField, - Modal, - addGlobalSuccessMessage, -} from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, FormField, InputField, Modal, addGlobalSuccessMessage } from 'design-system'; import * as React from 'react'; import { changePassword } from '../../../api/users'; import { CurrentUserContext } from '../../../app/components/current-user/CurrentUserContext'; @@ -156,13 +150,14 @@ export default function PasswordForm(props: Props) { onClose={props.onClose} loading={submitting} primaryButton={ - {translate('change_verb')} - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/users/components/TokensFormItem.tsx b/server/sonar-web/src/main/js/apps/users/components/TokensFormItem.tsx index c6ec562dba3..3a8344cdb36 100644 --- a/server/sonar-web/src/main/js/apps/users/components/TokensFormItem.tsx +++ b/server/sonar-web/src/main/js/apps/users/components/TokensFormItem.tsx @@ -19,15 +19,9 @@ */ import styled from '@emotion/styled'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; import classNames from 'classnames'; -import { - ContentCell, - DangerButtonSecondary, - FlagWarningIcon, - Spinner, - TableRow, - themeColor, -} from 'design-system'; +import { ContentCell, FlagWarningIcon, TableRow, themeColor } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import ConfirmButton from '../../../components/controls/ConfirmButton'; @@ -115,15 +109,15 @@ export default function TokensFormItem(props: Readonly) { {token.isExpired && ( - - - {translate('remove')} - - + {translate('remove')} + )} {!token.isExpired && deleteConfirmation === 'modal' && ( @@ -141,31 +135,32 @@ export default function TokensFormItem(props: Readonly) { onConfirm={handleRevoke} > {({ onClick }) => ( - {translate('users.tokens.revoke')} - + )} )} {!token.isExpired && deleteConfirmation === 'inline' && ( - - - {showConfirmation ? translate('users.tokens.sure') : translate('users.tokens.revoke')} - + )} diff --git a/server/sonar-web/src/main/js/apps/webhooks/components/DeleteWebhookForm.tsx b/server/sonar-web/src/main/js/apps/webhooks/components/DeleteWebhookForm.tsx index 2bae38ed2f7..dd1bfdc5781 100644 --- a/server/sonar-web/src/main/js/apps/webhooks/components/DeleteWebhookForm.tsx +++ b/server/sonar-web/src/main/js/apps/webhooks/components/DeleteWebhookForm.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DangerButtonPrimary, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { Modal } from 'design-system'; import * as React from 'react'; import { translate, translateWithParameters } from '../../../helpers/l10n'; import { WebhookResponse } from '../../../types/webhook'; @@ -51,9 +52,9 @@ export default function DeleteWebhookForm({ onClose, onSubmit, webhook }: Props) isOverflowVisible body={renderForm} primaryButton={ - + } secondaryButtonLabel={translate('cancel')} /> diff --git a/server/sonar-web/src/main/js/apps/webhooks/components/PageActions.tsx b/server/sonar-web/src/main/js/apps/webhooks/components/PageActions.tsx index 8fcebb986f7..02c10857831 100644 --- a/server/sonar-web/src/main/js/apps/webhooks/components/PageActions.tsx +++ b/server/sonar-web/src/main/js/apps/webhooks/components/PageActions.tsx @@ -18,7 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; import * as React from 'react'; import { useState } from 'react'; import Tooltip from '../../../components/controls/Tooltip'; @@ -53,18 +53,22 @@ export default function PageActions(props: Props) { if (webhooksCount >= WEBHOOKS_LIMIT) { return ( - + ); } return ( <> - + {openCreate && } ); diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx index 9243f006f31..ca0531b8a1f 100644 --- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx +++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, LightLabel, SonarCodeColorizer, Spinner } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { LightLabel, SonarCodeColorizer, Spinner } from 'design-system'; import * as React from 'react'; import { MetricKey } from '~sonar-aligned/types/metrics'; import { decorateWithUnderlineFlags } from '../../helpers/code-viewer'; @@ -292,9 +293,9 @@ export default class SourceViewerCode extends React.PureComponent
    ) : ( - + )}
    )} @@ -331,9 +332,9 @@ export default class SourceViewerCode extends React.PureComponent
    ) : ( - + )}
    )} diff --git a/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx b/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx index 6af52bfce2f..709fd8f98ea 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, ChevronDownIcon, Dropdown, TextMuted } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { ChevronDownIcon, Dropdown, TextMuted } from 'design-system'; import { sortBy } from 'lodash'; import * as React from 'react'; import { MetricKey, MetricType } from '~sonar-aligned/types/metrics'; @@ -151,7 +152,7 @@ export default class AddGraphMetric extends React.PureComponent { /> } > - { > - + ); } diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx index 13265163d17..84838048d91 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx @@ -18,8 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DropdownMenu, DropdownMenuAlign } from '@sonarsource/echoes-react'; -import { ButtonSecondary, ChevronDownIcon, TextMuted } from 'design-system'; +import { Button, DropdownMenu, DropdownMenuAlign } from '@sonarsource/echoes-react'; +import { ChevronDownIcon, TextMuted } from 'design-system'; import * as React from 'react'; import { translate } from '../../helpers/l10n'; import { GraphType } from '../../types/project-activity'; @@ -78,7 +78,7 @@ export default function GraphsHeader(props: Props) {
    - - + {isCustomGraph(graph) && diff --git a/server/sonar-web/src/main/js/components/common/ResetPasswordForm.tsx b/server/sonar-web/src/main/js/components/common/ResetPasswordForm.tsx index bf14308c9e1..4484b0414b8 100644 --- a/server/sonar-web/src/main/js/components/common/ResetPasswordForm.tsx +++ b/server/sonar-web/src/main/js/components/common/ResetPasswordForm.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FlagMessage, FormField, InputField } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { FlagMessage, FormField, InputField } from 'design-system'; import * as React from 'react'; import { changePassword } from '../../api/users'; import MandatoryFieldsExplanation from '../../components/ui/MandatoryFieldsExplanation'; @@ -140,9 +141,9 @@ export default function ResetPasswordForm({
    - +
    ); diff --git a/server/sonar-web/src/main/js/components/common/RestartButton.tsx b/server/sonar-web/src/main/js/components/common/RestartButton.tsx index df29387ebd5..b3ef6a973ea 100644 --- a/server/sonar-web/src/main/js/components/common/RestartButton.tsx +++ b/server/sonar-web/src/main/js/components/common/RestartButton.tsx @@ -18,7 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DangerButtonSecondary } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; import * as React from 'react'; import { restart } from '../../api/system'; import ConfirmButton from '../../components/controls/ConfirmButton'; @@ -50,15 +50,16 @@ export default class RestartButton extends React.PureComponent { onConfirm={this.handleConfirm} > {({ onClick }) => ( - {systemStatus === 'RESTARTING' ? translate('system.restart_in_progress') : translate('system.restart_server')} - + )} ); diff --git a/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx b/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx index e0fe8fbe090..6bbdd29c686 100644 --- a/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx +++ b/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonSecondary, DiscreetInteractiveIcon, HomeFillIcon, HomeIcon } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { DiscreetInteractiveIcon, HomeFillIcon, HomeIcon } from 'design-system'; import React from 'react'; import { useIntl } from 'react-intl'; import { setHomePage } from '../../api/users'; @@ -75,15 +76,15 @@ export function HomePageSelect(props: Readonly) { onClick={handleClick} /> ) : ( - } + prefix={} className={className} - disabled={isDefault} + isDisabled={isDefault} onClick={handleClick} > {intl.formatMessage({ id: 'overview.set_as_homepage' })} - + )} ); diff --git a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx index ac622c08ca0..22fc0692d78 100644 --- a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx +++ b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx @@ -18,8 +18,9 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; +import { Button } from '@sonarsource/echoes-react'; import classNames from 'classnames'; -import { ButtonSecondary, Spinner, themeColor } from 'design-system'; +import { Spinner, themeColor } from 'design-system'; import * as React from 'react'; import { formatMeasure } from '~sonar-aligned/helpers/measures'; import { MetricType } from '~sonar-aligned/types/metrics'; @@ -73,26 +74,26 @@ export default function ListFooter(props: ListFooterProps) { let button; if (needReload && props.reload) { button = ( - {translate('reload')} - + ); } else if (hasMore && props.loadMore) { button = ( - {translate('show_more')} - + ); } diff --git a/server/sonar-web/src/main/js/components/controls/ValidationModal.tsx b/server/sonar-web/src/main/js/components/controls/ValidationModal.tsx index 82fcd4ae4dd..9f12993c289 100644 --- a/server/sonar-web/src/main/js/components/controls/ValidationModal.tsx +++ b/server/sonar-web/src/main/js/components/controls/ValidationModal.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, ButtonSecondary, Modal } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { Modal } from 'design-system'; import { FormikValues } from 'formik'; import * as React from 'react'; import { translate } from '../../helpers/l10n'; @@ -55,21 +56,22 @@ export default class ValidationModal extends React.PureC {this.props.confirmButtonText} - + } secondaryButton={ - {translate('cancel')} - + } /> diff --git a/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx b/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx index 2023eead139..c59bf878380 100644 --- a/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx +++ b/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; -import { ButtonSecondary, FlagMessage, SubTitle, themeBorder, themeColor } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { FlagMessage, SubTitle, themeBorder, themeColor } from 'design-system'; import * as React from 'react'; import { RuleDescriptionSection } from '../../apps/coding-rules/rule'; import { translate } from '../../helpers/l10n'; @@ -64,14 +65,14 @@ export default class MoreInfoRuleDescription extends React.PureComponent

    {translate('coding_rules.more_info.notification_message')}

    - { this.handleNotificationScroll(); }} > {translate('coding_rules.more_info.scroll_message')} - +     )} -- 2.39.5