diff options
| author | Grégoire Aubert <gregoire.aubert@sonarsource.com> | 2024-07-22 11:37:38 +0200 |
|---|---|---|
| committer | sonartech <sonartech@sonarsource.com> | 2024-07-24 20:02:49 +0000 |
| commit | 04de2de3d71fceab34404f5bb047671658dd1bb9 (patch) | |
| tree | 0e2cb02442a587e32cb58811c52fdaebea6cee96 /server/sonar-web/src/main | |
| parent | b0789ab729b158223d633fd3ebfb34bf7c5ab516 (diff) | |
| download | sonarqube-04de2de3d71fceab34404f5bb047671658dd1bb9.tar.gz sonarqube-04de2de3d71fceab34404f5bb047671658dd1bb9.zip | |
SONAR-22523 Replace old Buttons with Echoes Buttons
Diffstat (limited to 'server/sonar-web/src/main')
113 files changed, 724 insertions, 533 deletions
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<PluginRiskConsentProps>) { <p className="sw-mb-6">{translate('plugin_risk_consent.description2')}</p> - <ButtonPrimary className="sw-my-4" onClick={acknowledgeRisk}> + <Button className="sw-my-4" onClick={acknowledgeRisk} variety={ButtonVariety.Primary}> {translate('plugin_risk_consent.action')} - </ButtonPrimary> + </Button> </Card> </CenteredLayout> ); 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<Props>) { </p> <p className="sw-mb-10">{translate('sonarlint-connection.request.description2')}</p> - <ButtonPrimary icon={<IconCheck className="sw-mr-1" />} onClick={authorize}> + <Button + prefix={<IconCheck className="sw-mr-1" />} + onClick={authorize} + variety={ButtonVariety.Primary} + > {translate('sonarlint-connection.request.action')} - </ButtonPrimary> + </Button> </> )} 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} > - <ButtonSecondary + <Button className="sw-max-w-abs-800 sw-px-3" onClick={() => { setIsMenuOpen(!isMenuOpen); }} - disabled={!isMenuEnabled} + isDisabled={!isMenuEnabled} aria-expanded={isMenuOpen} aria-haspopup="menu" > {currentBranchLikeElement} - </ButtonSecondary> + </Button> </Popup> <div className="sw-ml-2"> 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 ( <div> - <ButtonSecondary onClick={handleLogin}>{translate('layout.login')}</ButtonSecondary> + <Button onClick={handleLogin}>{translate('layout.login')}</Button> </div> ); } 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<Props /> </span> ))} - - <RestartButton - className="sw-ml-2" - fetchSystemStatus={this.props.fetchSystemStatus} - systemStatus={this.props.systemStatus} - /> - <ButtonSecondary className="sw-ml-2" onClick={this.handleRevert}> - {translate('marketplace.revert')} - </ButtonSecondary> + <ButtonGroup className="sw-ml-2"> + <RestartButton + fetchSystemStatus={this.props.fetchSystemStatus} + systemStatus={this.props.systemStatus} + /> + <Button onClick={this.handleRevert}>{translate('marketplace.revert')}</Button> + </ButtonGroup> </div> </FlagMessage> ); 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')} </ButtonPrimary> - <ButtonSecondary className="sw-justify-center" onClick={onClick}> + <Button className="sw-justify-center" onClick={onClick}> {translate('dismiss')} - </ButtonSecondary> + </Button> </div> </PromotionNotificationWrapper> ); 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<Props, State> { headerTitle={translate('my_account.set_notifications_for.title')} onClose={closeModal} primaryButton={ - <ButtonPrimary - disabled={selectedProject === undefined} + <Button + isDisabled={selectedProject === undefined} form="project-notifications-modal-form" type="submit" + variety={ButtonVariety.Primary} > {translate('add_verb')} - </ButtonPrimary> + </Button> } 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<Props, State> { {translate('my_profile.per_project_notifications.title')} </h2> - <ButtonPrimary onClick={this.openModal}> + <Button onClick={this.openModal} variety={ButtonVariety.Primary}> <span data-test="account__add-project-notification"> {translate('my_profile.per_project_notifications.add')} </span> - </ButtonPrimary> + </Button> </div> {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<Props, State> { <div> {dismissable && currentUser.isLoggedIn && ( <div className="sw-mt-4"> - <DangerButtonSecondary - disabled={Boolean(dismissedWarning)} + <Button + isDisabled={Boolean(dismissedWarning)} onClick={() => { this.handleDismissMessage(key); }} + variety={ButtonVariety.DangerOutline} > {translate('dismiss_permanently')} - </DangerButtonSecondary> + </Button> <Spinner className="sw-ml-2" loading={dismissedWarning === key} /> </div> 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<Props> { )} <li> - <ButtonSecondary - className="js-reload sw-mr-2" - disabled={loading} - onClick={this.handleReload} - > + <Button className="js-reload sw-mr-2" isDisabled={loading} onClick={this.handleReload}> {translate('reload')} - </ButtonSecondary> - <ButtonSecondary disabled={loading} onClick={this.handleReset}> + </Button> + <Button isDisabled={loading} onClick={this.handleReset}> {translate('reset_verb')} - </ButtonSecondary> + </Button> </li> </ul> </section> 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<Props, State> { </form> } primaryButton={ - <ButtonPrimary disabled={submitting} type="submit" form={WORKERS_FORM_ID}> + <Button + isDisabled={submitting} + type="submit" + form={WORKERS_FORM_ID} + variety={ButtonVariety.Primary} + > {translate('save')} - </ButtonPrimary> + </Button> } 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<Props, State> { body={<Spinner loading={this.state.submitting}>{formBody}</Spinner>} primaryButton={ !this.state.finished && ( - <ButtonPrimary - autoFocus + <Button + hasAutoFocus type="submit" - disabled={ + isDisabled={ this.state.submitting || (this.state.selectedProfiles.length === 0 && profile === undefined) } form={FORM_ID} + variety={ButtonVariety.Primary} > {translate('apply')} - </ButtonPrimary> + </Button> ) } 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={ - <DangerButtonPrimary disabled={submitting} onClick={handleClick}> + <Button isDisabled={submitting} onClick={handleClick} variety={ButtonVariety.Danger}> {translate('remove')} - </DangerButtonPrimary> + </Button> } 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<Props>) { > {({ onClick }) => ( <> - <DangerButtonSecondary + <Button className="sw-ml-2 js-delete" id="coding-rules-detail-rule-delete" onClick={onClick} + variety={ButtonVariety.DangerOutline} > {translate('delete')} - </DangerButtonSecondary> + </Button> <HelpTooltip className="sw-ml-2" overlay={ diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsCustomRules.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsCustomRules.tsx index 86d454ba10e..d0799052306 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsCustomRules.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsCustomRules.tsx @@ -17,10 +17,10 @@ * 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 } from '@sonarsource/echoes-react'; import { ButtonSecondary, ContentCell, - DangerButtonSecondary, HeadingDark, Link, Spinner, @@ -142,13 +142,14 @@ function RuleListItem( onConfirm={props.onDelete} > {({ onClick }) => ( - <DangerButtonSecondary + <Button className="js-delete-custom-rule" aria-label={translateWithParameters('coding_rules.delete_rule_x', rule.name)} onClick={onClick} + variety={ButtonVariety.DangerOutline} > {translate('delete')} - </DangerButtonSecondary> + </Button> )} </ConfirmButton> </ContentCell> 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<Props>) { {ruleDetails.mdNote !== undefined && ( <> - <DangerButtonSecondary + <Button className="sw-ml-2" - disabled={updatingRule} + isDisabled={updatingRule} id="coding-rules-detail-extend-description-remove" onClick={() => setDescriptionModal(true)} + variety={ButtonVariety.DangerOutline} > {translate('remove')} - </DangerButtonSecondary> + </Button> {removeDescriptionModal && ( <RemoveExtendedDescriptionModal onCancel={() => 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<Props>) { return ( <div className="sw-ml-4"> <Tooltip content={translate('coding_rules.need_extend_or_copy')}> - <DangerButtonSecondary disabled> + <Button isDisabled variety={ButtonVariety.DangerOutline}> {translate('coding_rules', activation ? 'deactivate' : 'activate')} - </DangerButtonSecondary> + </Button> </Tooltip> </div> ); 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<Props, State> { ), formatMeasure(this.props.metric.bestValue, this.props.metric.type), )} - <ButtonSecondary + <Button onClick={this.handleShowBestMeasures} className="sw-ml-4" aria-label={translate('component_measures.hidden_best_score_metrics_show_label')} > {translate('show_them')} - </ButtonSecondary> + </Button> </FlagMessage> )} {!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<RepositoryListProps>) { /> </SetupBoxContent> <div className="sw-mt-4"> - <ButtonPrimary onClick={onImport} className="js-set-up-projects"> + <Button + onClick={onImport} + className="js-set-up-projects" + variety={ButtonVariety.Primary} + > {formatMessage({ id: 'onboarding.create_project.import' })} - </ButtonPrimary> + </Button> </div> </div> </SetupBox> 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<MonorepoProjectCre )} <div className="sw-my-5"> - <ButtonSecondary onClick={cancelMonorepoSetup}> + <Button onClick={cancelMonorepoSetup}> <FormattedMessage id="cancel" /> - </ButtonSecondary> - <ButtonPrimary className="sw-ml-3" disabled={isSetupInvalid} onClick={submitProjects}> + </Button> + <Button + className="sw-ml-3" + isDisabled={isSetupInvalid} + onClick={submitProjects} + variety={ButtonVariety.Primary} + > <FormattedMessage id="next" /> - </ButtonPrimary> + </Button> </div> </div> ); 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({ </div> <div className="sw-flex sw-justify-end sw-mt-4"> - <ButtonSecondary onClick={onAddProject}> + <Button onClick={onAddProject}> <FormattedMessage id="onboarding.create_project.monorepo.add_project" /> - </ButtonSecondary> + </Button> </div> </div> ); 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<Props>) { onClose={props.onClose} body={translateWithParameters('groups.delete_group.confirmation', group.name)} primaryButton={ - <DangerButtonPrimary autoFocus type="submit" onClick={onSubmit} disabled={isPending}> + <Button + hasAutoFocus + type="submit" + onClick={onSubmit} + isDisabled={isPending} + variety={ButtonVariety.Danger} + > {translate('delete')} - </DangerButtonPrimary> + </Button> } 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={ - <ButtonPrimary - disabled={isUpdating || isCreating || name === ''} + <Button + isDisabled={isUpdating || isCreating || name === ''} onClick={create ? handleCreateGroup : handleUpdateGroup} + variety={ButtonVariety.Primary} > {create ? translate('create') : translate('update_verb')} - </ButtonPrimary> + </Button> } 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<HeaderProps>) { <div id="groups-header"> <div className="sw-flex sw-justify-between"> <Title className="sw-mb-4">{translate('user_groups.page')}</Title> - <ButtonPrimary + <Button id="groups-create" - disabled={manageProvider !== undefined} + isDisabled={manageProvider !== undefined} onClick={() => setCreateModal(true)} + variety={ButtonVariety.Primary} > {translate('groups.create_group')} - </ButtonPrimary> + </Button> </div> {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<P /> {issue.actions.includes(IssueActions.Comment) && ( - <ButtonSecondary className="sw-mt-4 sw-mb-2" onClick={this.handleShowCommentModal}> + <Button className="sw-mt-4 sw-mb-2" onClick={this.handleShowCommentModal}> {translate('issue.activity.add_comment')} - </ButtonSecondary> + </Button> )} <IssueReviewHistory diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/FiltersHeader.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/FiltersHeader.tsx index d87569beb51..7c8abd5f118 100644 --- a/server/sonar-web/src/main/js/apps/issues/sidebar/FiltersHeader.tsx +++ b/server/sonar-web/src/main/js/apps/issues/sidebar/FiltersHeader.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, PageTitle } from 'design-system'; +import { Button, ButtonVariety } from '@sonarsource/echoes-react'; +import { BasicSeparator, PageTitle } from 'design-system'; import * as React from 'react'; import { translate } from '../../../helpers/l10n'; @@ -33,9 +34,9 @@ export function FiltersHeader({ displayReset, onReset }: Props) { <PageTitle className="sw-body-md-highlight" as="h2" text={translate('filters')} /> {displayReset && ( - <DangerButtonSecondary onClick={onReset}> + <Button onClick={onReset} variety={ButtonVariety.DangerOutline}> {translate('clear_all_filters')} - </DangerButtonSecondary> + </Button> )} </div> 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<Props, State> { <MaintenanceText>{translate('maintenance.upgrade_database.3')}</MaintenanceText> <MaintenanceSpinner> - <ButtonPrimary id="start-migration" onClick={this.handleMigrateClick}> + <Button + id="start-migration" + onClick={this.handleMigrateClick} + variety={ButtonVariety.Primary} + > {translate('maintenance.upgrade')} - </ButtonPrimary> + </Button> </MaintenanceSpinner> </> )} 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<Props, State> { </div> ))} <Tooltip content={translate('marketplace.requires_restart')}> - <DangerButtonSecondary disabled={loading} onClick={this.handleUninstall}> + <Button + isDisabled={loading} + onClick={this.handleUninstall} + variety={ButtonVariety.DangerOutline} + > {translate('marketplace.uninstall')} - </DangerButtonSecondary> + </Button> </Tooltip> </> )} 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={<PluginChangeLog release={release} update={update} />} > - <ButtonSecondary + <Button aria-label={translateWithParameters( 'marketplace.show_plugin_changelog', pluginName, @@ -49,7 +50,7 @@ export default function PluginChangeLogButton({ pluginName, release, update }: R onClick={() => setOpen((open) => !open)} > {translate('see_changelog')} - </ButtonSecondary> + </Button> </DropdownToggler> ); } 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<PluginRiskConsentBo {currentEdition === EditionKey.community && ( <p className="sw-mt-2">{translate('marketplace.risk_consent.installation')}</p> )} - <ButtonPrimary className="sw-mt-4" onClick={props.acknowledgeRisk}> + <Button className="sw-mt-4" onClick={props.acknowledgeRisk} variety={ButtonVariety.Primary}> {translate('marketplace.risk_consent.action')} - </ButtonPrimary> + </Button> </Card> ); } 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({ <ComponentReportActions component={component} branch={branch} /> {showTakeTheTourButton && ( <Tooltip content={translate('overview.promoted_section.button_tooltip')}> - <ButtonSecondary + <Button className="sw-pl-4 sw-shrink-0" data-spotlight-id="take-tour-1" onClick={startTour} > <IconSlideshow className="sw-mr-1" /> {translate('overview.promoted_section.button_primary')} - </ButtonSecondary> + </Button> </Tooltip> )} </div> 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) { <div> {dismissable && currentUser.isLoggedIn && ( <div className="sw-mt-4"> - <DangerButtonSecondary - disabled={Boolean(isPending)} + <Button + isDisabled={Boolean(isPending)} onClick={() => { handleDismissMessage(key); }} + variety={ButtonVariety.DangerOutline} > {translate('dismiss_permanently')} - </DangerButtonSecondary> + </Button> <Spinner className="sw-ml-2" loading={isPending && variables?.key === key} /> </div> 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={ <> <Spinner loading={submitting} /> - <DangerButtonPrimary onClick={handleClick} disabled={submitting}> + <Button onClick={handleClick} isDisabled={submitting} variety={ButtonVariety.Danger}> {translate('delete')} - </DangerButtonPrimary> + </Button> </> } /> 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<Props, State> { primaryButton={ <> <Spinner loading={this.state.submitting} /> - <ButtonPrimary - disabled={this.state.submitting} + <Button + isDisabled={this.state.submitting} type="submit" form="permission-template-form" id="permission-template-submit" + variety={ButtonVariety.Primary} > {this.props.confirmButtonText} - </ButtonPrimary> + </Button> </> } /> 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) { <Spinner className="sw-mt-2" loading={!ready} /> </div> - <ButtonPrimary onClick={() => setCreateModal(true)}>{translate('create')}</ButtonPrimary> + <Button onClick={() => setCreateModal(true)} variety={ButtonVariety.Primary}> + {translate('create')} + </Button> </div> <div className="sw-mb-4">{translate('permission_templates.page.description')}</div> </div> 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) { </div> {canApplyPermissionTemplate && ( <div> - <ButtonPrimary className="js-apply-template" onClick={handleApplyTemplate}> + <Button + className="js-apply-template" + onClick={handleApplyTemplate} + variety={ButtonVariety.Primary} + > {translate('projects_role.apply_template')} - </ButtonPrimary> + </Button> {applyTemplateModal && ( <ApplyTemplate diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.tsx index 1cdec36bf1c..828c8d001b3 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.tsx +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.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, PopupZLevel } from 'design-system'; +import { Button } from '@sonarsource/echoes-react'; +import { DateRangePicker, PopupZLevel } from 'design-system'; import * as React from 'react'; import { translate } from '../../../helpers/l10n'; import { Query } from '../utils'; @@ -50,13 +51,13 @@ export default class ProjectActivityDateInput extends React.PureComponent<Props> value={{ from: this.props.from, to: this.props.to }} zLevel={PopupZLevel.Content} /> - <ButtonSecondary + <Button className="sw-ml-2" - disabled={this.props.from === undefined && this.props.to === undefined} + isDisabled={this.props.from === undefined && this.props.to === undefined} onClick={this.handleResetClick} > {translate('project_activity.reset_dates')} - </ButtonSecondary> + </Button> </div> ); } 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<Props>) { </form> } primaryButton={ - <ButtonPrimary + <Button id="add-event-submit" form="add-event-form" type="submit" - disabled={name === ''} + isDisabled={name === ''} onClick={handleSubmit} + variety={ButtonVariety.Primary} > {translate('save')} - </ButtonPrimary> + </Button> } 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<Props>) { </form> } primaryButton={ - <ButtonPrimary + <Button id="change-event-submit" form="change-event-form" type="submit" - disabled={name === '' || name === event.name} + isDisabled={name === '' || name === event.name} onClick={handleSubmit} + variety={ButtonVariety.Primary} > {translate('change_verb')} - </ButtonPrimary> + </Button> } 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<Props onClose={onClose} body={<p>{translate('project_activity.delete_analysis.question')}</p>} primaryButton={ - <DangerButtonPrimary onClick={() => deleteAnalysis(analysis.key)} type="submit"> + <Button + onClick={() => deleteAnalysis(analysis.key)} + type="submit" + variety={ButtonVariety.Danger} + > {translate('delete')} - </DangerButtonPrimary> + </Button> } 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={<p>{removeEventQuestion}</p>} primaryButton={ - <DangerButtonPrimary + <Button onClick={() => deleteEvent({ analysis: analysisKey, event: event.key })} + variety={ButtonVariety.Danger} > {translate('delete')} - </DangerButtonPrimary> + </Button> } 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={ - <DangerButtonPrimary type="submit" form={FORM_ID}> + <Button type="submit" form={FORM_ID} variety={ButtonVariety.Danger}> <FormattedMessage id="delete" /> - </DangerButtonPrimary> + </Button> } secondaryButtonLabel={<FormattedMessage id="cancel" />} 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={ - <ButtonPrimary disabled={submitDisabled} type="submit" form={FORM_ID}> + <Button + isDisabled={submitDisabled} + type="submit" + form={FORM_ID} + variety={ButtonVariety.Primary} + > <FormattedMessage id="rename" /> - </ButtonPrimary> + </Button> } secondaryButtonLabel={<FormattedMessage id="cancel" />} 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) { </form> } primaryButton={ - <ButtonPrimary disabled={isPending} type="submit" form={FORM_ID}> + <Button isDisabled={isPending} type="submit" form={FORM_ID} variety={ButtonVariety.Primary}> <FormattedMessage id="project_branch_pull_request.branch.set_main" /> - </ButtonPrimary> + </Button> } secondaryButtonLabel={<FormattedMessage id="cancel" />} /> 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<Props> { onConfirm={this.handleDelete} > {({ onClick }) => ( - <DangerButtonPrimary id="delete-project" onClick={onClick}> + <Button id="delete-project" onClick={onClick} variety={ButtonVariety.Danger}> {translate('delete')} - </DangerButtonPrimary> + </Button> )} </ConfirmButton> ); 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<Props>) { return ( <> <div>{translate('project_dump.export_form_description')}</div> - <ButtonSecondary + <Button aria-label={translate('project_dump.do_export')} className="sw-mt-4" onClick={handleExport} > {translate('project_dump.do_export')} - </ButtonSecondary> + </Button> </> ); } 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<Props>) { return ( <> <div className="sw-mt-4">{translate('project_dump.import_form_description')}</div> - <ButtonSecondary + <Button aria-label={translate('project_dump.do_import')} className="sw-mt-4" onClick={handleImport} > {translate('project_dump.do_import')} - </ButtonSecondary> + </Button> </> ); } 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<Props, State> { onClose={this.props.onClose} body={formBody} primaryButton={ - <ButtonPrimary form={FORM_ID} type="submit"> + <Button form={FORM_ID} type="submit" variety={ButtonVariety.Primary}> {translate('create')} - </ButtonPrimary> + </Button> } /> ); 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<Props, State> { <header className="sw-mt-8 sw-mb-4"> <div className="sw-flex sw-justify-between"> <Title className="sw-mb-4">{translate('project_links.page')}</Title> - <ButtonPrimary id="create-project-link" onClick={this.handleCreateClick}> + <Button + id="create-project-link" + onClick={this.handleCreateClick} + variety={ButtonVariety.Primary} + > {translate('create')} - </ButtonPrimary> + </Button> </div> <p>{translate('project_links.page.description')}</p> </header> 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={ <> <Spinner loading={saving} /> - <ButtonPrimary form={FORM_ID} disabled={!isChanged || saving || !isValid} type="submit"> + <Button + form={FORM_ID} + isDisabled={!isChanged || saving || !isValid} + type="submit" + variety={ButtonVariety.Primary} + > {translate('save')} - </ButtonPrimary> + </Button> </> } 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( </FlagMessage> )} - <div className="sw-flex sw-items-center"> - <ButtonPrimary type="submit" disabled={!isValid || !isChanged || saving}> + <ButtonGroup className="sw-flex"> + <Button + type="submit" + isLoading={saving} + isDisabled={!isValid || !isChanged || saving} + variety={ButtonVariety.Primary} + > {translate('save')} - </ButtonPrimary> + </Button> - <ButtonSecondary - className="sw-ml-2" - disabled={saving || !isChanged} - onClick={props.onCancel} - > + <Button isDisabled={saving || !isChanged} onClick={props.onCancel}> {translate('cancel')} - </ButtonSecondary> - - <Spinner className="sw-ml-2" loading={saving} /> - </div> + </Button> + </ButtonGroup> </div> </form> ); 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={ - <ButtonPrimary - disabled={!language || !key} + <Button + isDisabled={!language || !key} form="add-language-quality-profile" type="submit" + variety={ButtonVariety.Primary} > {translate('save')} - </ButtonPrimary> + </Button> } 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) { <p className="sw-mt-2 sw-body-sm"> {translate('projects.no_projects.empty_instance.how_to_add_projects')} </p> - <ButtonPrimary + <Button className="sw-mt-6" onClick={() => { router.push('/projects/create'); }} + variety={ButtonVariety.Primary} > {translate('my_account.create_new.TRK')} - </ButtonPrimary> + </Button> </div> )} </div> 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) { </StyledPageTitle> {isFiltered && ( - <DangerButtonSecondary onClick={clearAll}> + <Button onClick={clearAll} variety={ButtonVariety.DangerOutline}> {translate('clear_all_filters')} - </DangerButtonSecondary> + </Button> )} </div> 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<Props>) { onClose={props.onClose} body={body} primaryButton={ - <ButtonPrimary form={FORM_ID} autoFocus type="submit"> + <Button form={FORM_ID} hasAutoFocus type="submit" variety={ButtonVariety.Primary}> {translate('settings.projects.change_visibility_form.submit')} - </ButtonPrimary> + </Button> } 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<Props, State> { </> } primaryButton={ - <DangerButtonPrimary - autoFocus - disabled={this.state.loading} + <Button + hasAutoFocus + isDisabled={this.state.loading} onClick={this.handleConfirmClick} type="submit" + variety={ButtonVariety.Danger} > {translate('delete')} - </DangerButtonPrimary> + </Button> } 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<Props>) { </div> {hasProvisionPermission && ( - <ButtonPrimary + <Button id="create-project" onClick={() => navigate('/projects/create?mode=manual', { state: { from: location.pathname }, }) } + variety={ButtonVariety.Primary} > {translate('qualifiers.create.TRK')} - </ButtonPrimary> + </Button> )} </div> </div> 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<Props, State </form> } primaryButton={ - <ButtonPrimary autoFocus disabled={loading} form={FORM_ID} type="submit"> + <Button + hasAutoFocus + isDisabled={loading} + form={FORM_ID} + type="submit" + variety={ButtonVariety.Primary} + > {translate('restore')} - </ButtonPrimary> + </Button> } 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={ - <ButtonPrimary - autoFocus - disabled={selectedMetric === undefined} + <Button + hasAutoFocus + isDisabled={selectedMetric === undefined} id="add-condition-button" form={ADD_CONDITION_MODAL_ID} type="submit" + variety={ButtonVariety.Primary} > {translate('quality_gates.add_condition')} - </ButtonPrimary> + </Button> } 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 } </div> <ModalButton modal={renderCaycModal}> {({ onClick }) => ( - <ButtonPrimary className="sw-mt-4" onClick={onClick}> + <Button className="sw-mt-4" onClick={onClick} variety={ButtonVariety.Primary}> {translate( isOptimizing ? 'quality_gates.cayc_condition.review_optimize' : 'quality_gates.cayc_condition.review_update', )} - </ButtonPrimary> + </Button> )} </ModalButton> </CardWithPrimaryBackground> 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<Props>) onClose={onClose} body={body} primaryButton={ - <ButtonPrimary - autoFocus + <Button + hasAutoFocus id="fix-quality-gate" type="submit" onClick={updateCaycQualityGate} + variety={ButtonVariety.Primary} > {translate( isOptimizing ? 'quality_gates.cayc.review_optimize_modal.confirm_text' : 'quality_gates.cayc.review_update_modal.confirm_text', )} - </ButtonPrimary> + </Button> } 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<P </form> } primaryButton={ - <ButtonPrimary autoFocus type="submit" disabled={buttonDisabled} form={FORM_ID}> + <Button + hasAutoFocus + type="submit" + isDisabled={buttonDisabled} + form={FORM_ID} + variety={ButtonVariety.Primary} + > {translate('copy')} - </ButtonPrimary> + </Button> } 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<Props>) { isScrollable body={body} primaryButton={ - <ButtonSecondary - disabled={name === null || name === ''} + <Button + isDisabled={name === null || name === ''} form="create-application-form" type="submit" onClick={handleCreate} > {translate('quality_gate.create')} - </ButtonSecondary> + </Button> } 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={ - <DangerButtonPrimary autoFocus type="submit" onClick={onDelete}> + <Button hasAutoFocus type="submit" onClick={onDelete} variety={ButtonVariety.Danger}> {translate('delete')} - </DangerButtonPrimary> + </Button> } 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={ - <ButtonPrimary form={EDIT_CONDITION_MODAL_ID} type="submit"> + <Button form={EDIT_CONDITION_MODAL_ID} type="submit" variety={ButtonVariety.Primary}> {translate('quality_gates.update_condition')} - </ButtonPrimary> + </Button> } 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() { <div> <ModalButton modal={renderModal}> {({ onClick }) => ( - <ButtonPrimary data-test="quality-gates__add" onClick={onClick}> + <Button data-test="quality-gates__add" onClick={onClick} variety={ButtonVariety.Primary}> {translate('create')} - </ButtonPrimary> + </Button> )} </ModalButton> </div> 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( </form> } primaryButton={ - <ButtonPrimary disabled={!selection || submitting} type="submit" form={FORM_ID}> + <Button + isDisabled={!selection || submitting} + type="submit" + form={FORM_ID} + variety={ButtonVariety.Primary} + > {translate('add_verb')} - </ButtonPrimary> + </Button> } 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 </form> } primaryButton={ - <ButtonPrimary autoFocus type="submit" disabled={confirmDisable} form={FORM_ID}> + <Button + hasAutoFocus + type="submit" + isDisabled={confirmDisable} + form={FORM_ID} + variety={ButtonVariety.Primary} + > {translate('rename')} - </ButtonPrimary> + </Button> } 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<Props, State> { {shouldDisplayFooter && ( <footer className="sw-text-center sw-mt-2"> - <ButtonSecondary onClick={this.loadMore.bind(this)}> - {translate('show_more')} - </ButtonSecondary> + <Button onClick={this.loadMore.bind(this)}>{translate('show_more')}</Button> </footer> )} </div> 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} /> - <ButtonSecondary className="sw-ml-2 sw-align-top" onClick={props.onReset}> + <Button className="sw-ml-2 sw-align-top" onClick={props.onReset}> {intl.formatMessage({ id: 'reset_verb' })} - </ButtonSecondary> + </Button> </div> ); } 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 ( <Spinner loading={state === 'opening'}> <Tooltip side="bottom" content={activateRuleMsg}> - <ButtonSecondary - disabled={state !== 'closed'} + <Button + isDisabled={state !== 'closed'} aria-label={activateRuleMsg} onClick={handleButtonClick} > {intl.formatMessage({ id: 'activate' })} - </ButtonSecondary> + </Button> </Tooltip> {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={ - <DangerButtonPrimary + <Button onClick={() => { props.onDelete(); }} - disabled={loading} + isDisabled={loading} + variety={ButtonVariety.Danger} > {translate('delete')} - </DangerButtonPrimary> + </Button> } 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={ - <ButtonPrimary onClick={handleSubmit} disabled={submitDisabled}> + <Button onClick={handleSubmit} isDisabled={submitDisabled} variety={ButtonVariety.Primary}> {translate(labels.button)} - </ButtonPrimary> + </Button> } 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<Props>) { <div className="sw-flex sw-items-center sw-gap-3 sw-mb-6"> <SubTitle className="sw-mb-0">{translate('quality_profiles.profile_inheritance')}</SubTitle> {profile.actions?.edit && !profile.isBuiltIn && ( - <ButtonSecondary - className="it__quality-profiles__change-parent" - onClick={handleChangeParentClick} - > + <Button className="it__quality-profiles__change-parent" onClick={handleChangeParentClick}> {translate('quality_profiles.change_parent')} - </ButtonSecondary> + </Button> )} </div> 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<Props>) { onClose={props.onClose} loading={loading} primaryButton={ - <ButtonPrimary type="submit" form="grant_permissions_form" disabled={submitDisabled}> + <Button + type="submit" + form="grant_permissions_form" + isDisabled={submitDisabled} + variety={ButtonVariety.Primary} + > {translate('add_verb')} - </ButtonPrimary> + </Button> } 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<Props, State> { <SubTitle className="sw-mb-0">{translate('projects')}</SubTitle> } {profile.actions?.associateProjects && ( - <ButtonSecondary + <Button className="it__quality-profiles__change-projects" onClick={this.handleChangeClick} - disabled={hasNoActiveRules} + isDisabled={hasNoActiveRules} > {translate('quality_profiles.change_projects')} - </ButtonSecondary> + </Button> )} </div> 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<Props>) { </div> {actions.create && ( <div className="sw-flex sw-flex-col sw-items-end"> - <div> - <ButtonPrimary - disabled={languages.length === 0} + <ButtonGroup> + <Button + isDisabled={languages.length === 0} id="quality-profiles-create" onClick={() => setModal('createProfile')} + variety={ButtonVariety.Primary} > {intl.formatMessage({ id: 'create' })} - </ButtonPrimary> - <ButtonSecondary - className="sw-ml-2" - id="quality-profiles-restore" - onClick={() => setModal('restoreProfile')} - > + </Button> + <Button id="quality-profiles-restore" onClick={() => setModal('restoreProfile')}> {intl.formatMessage({ id: 'restore' })} - </ButtonSecondary> - </div> + </Button> + </ButtonGroup> {languages.length === 0 && ( <FlagMessage className="sw-mt-2" variant="warning"> {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<Prop } primaryButton={ ruleSuccesses == null ? ( - <> - <Spinner loading={loading} /> - <ButtonPrimary - disabled={loading} - onClick={handleFormSubmit} - id="restore-profile-submit" - > - {intl.formatMessage({ id: 'restore' })} - </ButtonPrimary> - </> + <Button + isDisabled={loading} + isLoading={loading} + onClick={handleFormSubmit} + id="restore-profile-submit" + variety={ButtonVariety.Primary} + > + {intl.formatMessage({ id: 'restore' })} + </Button> ) : ( - <ButtonPrimary id="restore-profile-cancel" onClick={onClose}> + <Button id="restore-profile-cancel" onClick={onClose} variety={ButtonVariety.Primary}> {intl.formatMessage({ id: 'close' })} - </ButtonPrimary> + </Button> ) } 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) { </FormField> } primaryButton={ - <ButtonPrimary onClick={() => props.onSubmit(comment)} disabled={!comment}> + <Button + onClick={() => props.onSubmit(comment)} + isDisabled={!comment} + variety={ButtonVariety.Primary} + > {translate('hotspots.comment.submit')} - </ButtonPrimary> + </Button> } 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) && ( - <ButtonSecondary className="sw-mt-4 sw-mb-2" onClick={this.handleShowCommentModal}> + <Button className="sw-mt-4 sw-mb-2" onClick={this.handleShowCommentModal}> {translate('hotspots.status.add_comment')} - </ButtonSecondary> + </Button> )} <HotspotReviewHistory diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/StatusUpdateSuccessModal.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/StatusUpdateSuccessModal.tsx index 1f5b65e24e5..81dd5767bcb 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/StatusUpdateSuccessModal.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/StatusUpdateSuccessModal.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, Checkbox, Modal, Note } from 'design-system'; +import { Button, ButtonGroup, ButtonVariety } from '@sonarsource/echoes-react'; +import { Checkbox, Modal, Note } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import { formatMeasure } from '~sonar-aligned/helpers/measures'; @@ -92,19 +93,19 @@ export default function StatusUpdateSuccessModal(props: StatusUpdateSuccessModal <Note className="sw-ml-2">{translate('hotspots.success_dialog.do_not_show')}</Note> </Checkbox> - <div className="sw-flex sw-justify-between sw-mt-4"> - <ButtonSecondary + <ButtonGroup className="sw-mt-4"> + <Button onClick={() => { props.onSwitchFilterToStatusOfUpdatedHotspot(); props.onClose(); }} > {translateWithParameters('hotspots.see_x_hotspots', statusLabel)} - </ButtonSecondary> - <ButtonPrimary onClick={props.onClose}> + </Button> + <Button onClick={props.onClose} variety={ButtonVariety.Primary}> {translate('hotspots.continue_to_next_hotspot')} - </ButtonPrimary> - </div> + </Button> + </ButtonGroup> </Modal> ); } 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" > - <ButtonPrimary id="status-trigger" onClick={() => setIsOpen(true)} disabled={readonly}> + <Button + id="status-trigger" + onClick={() => setIsOpen(true)} + isDisabled={readonly} + variety={ButtonVariety.Primary} + > {translate('hotspots.status.review')} - </ButtonPrimary> + </Button> </Tooltip> {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={ - <ButtonPrimary disabled={submitDisabled || loading} onClick={props.onSubmit}> + <Button + isDisabled={submitDisabled || loading} + onClick={props.onSubmit} + variety={ButtonVariety.Primary} + > {translate('hotspots.status.change_status')} - </ButtonPrimary> + </Button> } /> ); 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<Props, State> { render() { if (this.state.collapsed) { return ( - <ButtonSecondary + <Button className="sw-w-full sw-justify-center" aria-expanded={false} onClick={this.handleMoreOptionsClick} > {translate('login.more_options')} - </ButtonSecondary> + </Button> ); } return ( @@ -117,12 +111,12 @@ export default class LoginForm extends React.PureComponent<Props, State> { </FormField> <div> - <div className="sw-overflow-hidden sw-flex sw-items-center sw-justify-end sw-gap-3"> - <Spinner loading={this.state.loading} /> - <Link to="/">{translate('go_back')}</Link> - <ButtonPrimary disabled={this.state.loading} type="submit"> + <div className="sw-flex sw-items-center sw-justify-end sw-gap-3"> + <Spinner isLoading={this.state.loading} /> + <LinkStandalone to="/">{translate('go_back')}</LinkStandalone> + <Button isDisabled={this.state.loading} type="submit" variety={ButtonVariety.Primary}> {translate('sessions.log_in')} - </ButtonPrimary> + </Button> </div> </div> </form> 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<Props, State> </form> } primaryButton={ - <DangerButtonPrimary type="submit" form={MODAL_FORM_ID}> + <Button type="submit" form={MODAL_FORM_ID} variety={ButtonVariety.Danger}> {translate('reset_verb')} - </DangerButtonPrimary> + </Button> } secondaryButtonLabel={translate('cancel')} /> @@ -86,30 +87,31 @@ export default class DefinitionActions extends React.PureComponent<Props, State> return ( <div className="sw-mt-8"> - {hasValueChanged && ( - <ButtonPrimary className="sw-mr-3" disabled={hasError} onClick={this.props.onSave}> - {translate('save')} - </ButtonPrimary> - )} + <ButtonGroup className="sw-mr-3"> + {hasValueChanged && ( + <Button + isDisabled={hasError} + onClick={this.props.onSave} + variety={ButtonVariety.Primary} + > + {translate('save')} + </Button> + )} - {showReset && ( - <ButtonSecondary - className="sw-mr-3" - aria-label={translateWithParameters( - 'settings.definition.reset', - getPropertyName(setting.definition), - )} - onClick={this.handleReset} - > - {translate('reset_verb')} - </ButtonSecondary> - )} + {showReset && ( + <Button + aria-label={translateWithParameters( + 'settings.definition.reset', + getPropertyName(setting.definition), + )} + onClick={this.handleReset} + > + {translate('reset_verb')} + </Button> + )} - {showCancel && ( - <ButtonSecondary className="sw-mr-3" onClick={this.props.onCancel}> - {translate('cancel')} - </ButtonSecondary> - )} + {showCancel && <Button onClick={this.props.onCancel}>{translate('cancel')}</Button>} + </ButtonGroup> {showReset && ( <Note> 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() { </p> <Spinner className="sw-mr-2" isLoading={isSaving} /> {!isSaving && ( - <> - <ButtonPrimary type="submit" disabled={!isFormTouched || !isValid}> - {translate('save')} - </ButtonPrimary> - <ButtonSecondary - className="sw-ml-2" - disabled={!isFormTouched} - onClick={resetNewCodeDefinition} + <ButtonGroup> + <Button + type="submit" + isDisabled={!isFormTouched || !isValid} + variety={ButtonVariety.Primary} > + {translate('save')} + </Button> + <Button isDisabled={!isFormTouched} onClick={resetNewCodeDefinition}> {translate('cancel')} - </ButtonSecondary> - </> + </Button> + </ButtonGroup> )} </div> </form> 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 ( <div className="it__alm-binding-definition sw-pb-10"> <BasicSeparator className="sw-mb-6" /> - <div className="sw-float-right"> - <ButtonSecondary + <ButtonGroup className="sw-float-right"> + <Button aria-label={translateWithParameters( 'settings.almintegration.edit_configuration', definition.key, @@ -161,20 +161,20 @@ export default function AlmBindingDefinitionBox(props: AlmBindingDefinitionBoxPr }} > {translate('edit')} - </ButtonSecondary> - <DangerButtonSecondary + </Button> + <Button aria-label={translateWithParameters( 'settings.almintegration.delete_configuration', definition.key, )} - className="sw-ml-2" onClick={() => { props.onDelete(definition.key); }} + variety={ButtonVariety.DangerOutline} > {translate('delete')} - </DangerButtonSecondary> - </div> + </Button> + </ButtonGroup> <div className="sw-mb-4"> <h3>{definition.key}</h3> 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={ <> <Spinner loading={submitting} /> - <ButtonPrimary + <Button form={FORM_ID} type="submit" - autoFocus - disabled={!canSubmit || submitting} + hasAutoFocus + isDisabled={!canSubmit || submitting} + variety={ButtonVariety.Primary} > {translate('settings.almintegration.form.save')} - </ButtonPrimary> + </Button> </> } 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<AlmTabRendererProps>) { <div className={definitions.length > 0 ? 'sw-mb-5' : 'sw-my-3'}> <CreationTooltip alm={almTab} preventCreation={preventCreation}> - <ButtonPrimary + <Button data-test="settings__alm-create" - disabled={preventCreation} + isDisabled={preventCreation} onClick={props.onCreate} + variety={ButtonVariety.Primary} > {translate('settings.almintegration.create')} - </ButtonPrimary> + </Button> </CreationTooltip> </div> {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 && ( <div className="sw-flex sw-items-center"> <p className="sw-mr-2">{translate('settings.almintegration.form.secret.field')}</p> - <ButtonSecondary + <Button onClick={() => { setShowSecretField(false); }} > {translate('settings.almintegration.form.secret.update_field')} - </ButtonSecondary> + </Button> </div> )} </> 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() { </Modal.Body> <Modal.Footer primaryButton={ - <ButtonSecondary onClick={onClickAutoProvisioning}> + <Button onClick={onClickAutoProvisioning}> <FormattedMessage id="settings.authentication.github.confirm_auto_provisioning.continue" /> - </ButtonSecondary> + </Button> } secondaryButton={ - <ButtonSecondary onClick={onClickJitProvisioning}> + <Button onClick={onClickJitProvisioning}> <FormattedMessage id="settings.authentication.github.confirm_auto_provisioning.switch_jit" /> - </ButtonSecondary> + </Button> } /> </Modal> 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<Props>) { isScrollable onClose={props.onClose} primaryButton={ - <ButtonPrimary form={FORM_ID} type="submit" autoFocus disabled={!canBeSave}> + <Button + form={FORM_ID} + type="submit" + hasAutoFocus + isDisabled={!canBeSave} + variety={ButtonVariety.Primary} + > {translate('settings.almintegration.form.save')} <Spinner className="sw-ml-2" isLoading={loading} /> - </ButtonPrimary> + </Button> } /> ); 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<Props>) { primaryButton={ <> <Spinner className="sw-ml-2" isLoading={isCreating || isUpdating} /> - <ButtonPrimary form={FORM_ID} type="submit" autoFocus disabled={!isFormValid}> + <Button + form={FORM_ID} + type="submit" + hasAutoFocus + isDisabled={!isFormValid} + variety={ButtonVariety.Primary} + > <FormattedMessage id="settings.almintegration.form.save" /> - </ButtonPrimary> + </Button> </> } /> 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<Props>) { primaryButton={ <> <Spinner loading={createLoading || updateLoading} /> - <ButtonPrimary form={FORM_ID} type="submit" disabled={!canBeSaved}> + <Button + form={FORM_ID} + type="submit" + isDisabled={!canBeSaved} + variety={ButtonVariety.Primary} + > {translate('settings.almintegration.form.save')} - </ButtonPrimary> + </Button> </> } /> 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({ <div className="sw-mb-4"> <SubHeading as="h4">{title}</SubHeading> {showCreate && ( - <ButtonPrimary className="sw-mt-2" onClick={onCreate}> + <Button className="sw-mt-2" onClick={onCreate} variety={ButtonVariety.Primary}> {translate('settings.authentication.form.create')} - </ButtonPrimary> + </Button> )} </div> {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<Props>) { > {loading ? undefined : flagMessageContent} </FlagMessage> - <ButtonSecondary + <Button onClick={onTestConf} - disabled={loading} + isDisabled={loading} className="sw-whitespace-nowrap sw-text-center sw-my-4" > {translate(`${intlPrefix}.test`)} - </ButtonSecondary> + </Button> </> ); } 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<DefaultSpecialized isInvalid={isInvalid} /> <div className="sw-ml-2"> - <ButtonPrimary className="sw-mt-2" onClick={this.format}> + <Button className="sw-mt-2" onClick={this.format} variety={ButtonVariety.Primary}> {translate('settings.json.format')} - </ButtonPrimary> + </Button> </div> </div> {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<Props, State> { return ( <div className="sw-flex sw-items-center"> <LockIcon className="sw-mr-4" /> - <ButtonSecondary onClick={this.handleChangeClick}> - {translate('change_verb')} - </ButtonSecondary> + <Button onClick={this.handleChangeClick}>{translate('change_verb')}</Button> </div> ); } 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<Props, State </form> } primaryButton={ - <ButtonPrimary disabled={updating} id="set-log-level-submit" type="submit" form={FORM_ID}> + <Button + isDisabled={updating} + id="set-log-level-submit" + type="submit" + form={FORM_ID} + variety={ButtonVariety.Primary} + > {translate('save')} - </ButtonPrimary> + </Button> } 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) { <div className="sw-flex sw-justify-between"> <Title>{translate('users.page')}</Title> - <ButtonPrimary + <Button id="users-create" - disabled={manageProvider !== undefined} + isDisabled={manageProvider !== undefined} onClick={() => setOpenUserForm(true)} + variety={ButtonVariety.Primary} > {translate('users.create_user')} - </ButtonPrimary> + </Button> </div> <div> {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={ - <ButtonPrimary + <Button form={PASSWORD_FORM_ID} - disabled={submitting || !newPassword || newPassword !== confirmPassword} + isDisabled={submitting || !newPassword || newPassword !== confirmPassword} type="submit" + variety={ButtonVariety.Primary} > {translate('change_verb')} - </ButtonPrimary> + </Button> } 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<Props>) { <ContentCell> {token.isExpired && ( - <DangerButtonSecondary - disabled={isPending} + <Button + isDisabled={isPending} + isLoading={isPending} onClick={handleRevoke} aria-label={translateWithParameters('users.tokens.remove_label', token.name)} + variety={ButtonVariety.DangerOutline} > - <Spinner className="sw-mr-1" loading={isPending}> - {translate('remove')} - </Spinner> - </DangerButtonSecondary> + {translate('remove')} + </Button> )} {!token.isExpired && deleteConfirmation === 'modal' && ( @@ -141,31 +135,32 @@ export default function TokensFormItem(props: Readonly<Props>) { onConfirm={handleRevoke} > {({ onClick }) => ( - <DangerButtonSecondary - disabled={isPending} + <Button + isDisabled={isPending} onClick={onClick} aria-label={translateWithParameters('users.tokens.revoke_label', token.name)} + variety={ButtonVariety.DangerOutline} > {translate('users.tokens.revoke')} - </DangerButtonSecondary> + </Button> )} </ConfirmButton> )} {!token.isExpired && deleteConfirmation === 'inline' && ( - <DangerButtonSecondary + <Button aria-label={ showConfirmation ? translate('users.tokens.sure') : translateWithParameters('users.tokens.revoke_label', token.name) } - disabled={isPending} + isDisabled={isPending} + isLoading={isPending} onClick={handleClick} + variety={ButtonVariety.DangerOutline} > - <Spinner className="sw-mr-1" loading={isPending} /> - {showConfirmation ? translate('users.tokens.sure') : translate('users.tokens.revoke')} - </DangerButtonSecondary> + </Button> )} </ContentCell> </TableRow> 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={ - <DangerButtonPrimary form={FORM_ID} type="submit"> + <Button form={FORM_ID} type="submit" variety={ButtonVariety.Danger}> {translate('delete')} - </DangerButtonPrimary> + </Button> } 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 ( <Tooltip content={translateWithParameters('webhooks.maximum_reached', WEBHOOKS_LIMIT)}> - <ButtonPrimary className="it__webhook-create" disabled> + <Button className="it__webhook-create" isDisabled variety={ButtonVariety.Primary}> {translate('create')} - </ButtonPrimary> + </Button> </Tooltip> ); } return ( <> - <ButtonPrimary className="it__webhook-create" onClick={handleCreateOpen}> + <Button + className="it__webhook-create" + onClick={handleCreateOpen} + variety={ButtonVariety.Primary} + > {translate('create')} - </ButtonPrimary> + </Button> {openCreate && <CreateWebhookForm onClose={handleCreateClose} onDone={onCreate} />} </> ); 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<Props, State> </LightLabel> </div> ) : ( - <ButtonSecondary onClick={this.props.loadSourcesBefore}> + <Button onClick={this.props.loadSourcesBefore}> {translate('source_viewer.load_more_code')} - </ButtonSecondary> + </Button> )} </div> )} @@ -331,9 +332,9 @@ export default class SourceViewerCode extends React.PureComponent<Props, State> </LightLabel> </div> ) : ( - <ButtonSecondary onClick={this.props.loadSourcesAfter}> + <Button onClick={this.props.loadSourcesAfter}> {translate('source_viewer.load_more_code')} - </ButtonSecondary> + </Button> )} </div> )} 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<Props, State> { /> } > - <ButtonSecondary + <Button className={ 'sw-ml-2 sw-body-sm sw-flex sw-flex-row sw-justify-between sw-pl-3 sw-pr-2 sw-w-32 ' + 'sw-z-normal' // needed because the legends overlap part of the button @@ -159,7 +160,7 @@ export default class AddGraphMetric extends React.PureComponent<Props, State> { > <TextMuted text={translate('project_activity.graphs.custom.add')} /> <ChevronDownIcon className="sw-ml-1 sw-mr-0 sw-pr-0" /> - </ButtonSecondary> + </Button> </Dropdown> ); } 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) { <div className={className}> <div className="sw-flex"> <DropdownMenu.Root align={DropdownMenuAlign.Start} id="activity-graph-type" items={options}> - <ButtonSecondary + <Button aria-label={translate('project_activity.graphs.choose_type')} className={ 'sw-body-sm sw-flex sw-flex-row sw-justify-between sw-pl-3 sw-pr-2 sw-w-32 ' + @@ -87,7 +87,7 @@ export default function GraphsHeader(props: Props) { > <TextMuted text={translate('project_activity.graphs', graph)} /> <ChevronDownIcon className="sw-ml-1 sw-mr-0 sw-pr-0" /> - </ButtonSecondary> + </Button> </DropdownMenu.Root> {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({ </div> <div className="sw-py-3"> - <ButtonPrimary id="change-password" type="submit"> + <Button id="change-password" type="submit" variety={ButtonVariety.Primary}> {translate('update_verb')} - </ButtonPrimary> + </Button> </div> </form> ); 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<Props> { onConfirm={this.handleConfirm} > {({ onClick }) => ( - <DangerButtonSecondary + <Button className={className} - disabled={systemStatus !== 'UP'} + isDisabled={systemStatus !== 'UP'} onClick={onClick} + variety={ButtonVariety.DangerOutline} > {systemStatus === 'RESTARTING' ? translate('system.restart_in_progress') : translate('system.restart_server')} - </DangerButtonSecondary> + </Button> )} </ConfirmButton> ); 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<Props>) { onClick={handleClick} /> ) : ( - <ButtonSecondary + <Button aria-label={tooltip} - icon={<Icon />} + prefix={<Icon />} className={className} - disabled={isDefault} + isDisabled={isDefault} onClick={handleClick} > {intl.formatMessage({ id: 'overview.set_as_homepage' })} - </ButtonSecondary> + </Button> )} </Tooltip> ); 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 = ( - <ButtonSecondary + <Button data-test="reload" className="sw-ml-2 sw-body-sm" - disabled={loading} + isDisabled={loading} onClick={props.reload} > {translate('reload')} - </ButtonSecondary> + </Button> ); } else if (hasMore && props.loadMore) { button = ( - <ButtonSecondary + <Button aria-label={loadMoreAriaLabel} data-test="show-more" className="sw-ml-2 sw-body-sm" - disabled={loading} + isDisabled={loading} onClick={onLoadMore} > {translate('show_more')} - </ButtonSecondary> + </Button> ); } 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<V extends FormikValues> extends React.PureC <Modal.Footer loading={formState.isSubmitting} primaryButton={ - <ButtonPrimary + <Button type="submit" - disabled={formState.isSubmitting || !formState.isValid || !formState.dirty} + isDisabled={formState.isSubmitting || !formState.isValid || !formState.dirty} + variety={ButtonVariety.Primary} > {this.props.confirmButtonText} - </ButtonPrimary> + </Button> } secondaryButton={ - <ButtonSecondary + <Button className="sw-ml-2" - disabled={formState.isSubmitting} + isDisabled={formState.isSubmitting} onClick={this.props.onClose} > {translate('cancel')} - </ButtonSecondary> + </Button> } /> </> 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<Props> <FlagMessage variant="info"> <p className="sw-my-1">{translate('coding_rules.more_info.notification_message')}</p> - <ButtonSecondary + <Button className="sw-whitespace-nowrap" onClick={() => { this.handleNotificationScroll(); }} > {translate('coding_rules.more_info.scroll_message')} - </ButtonSecondary> + </Button> </FlagMessage> )} |