SONAR-22523 Replace old Buttons with Echoes Buttons

10 files changed, 63 insertions, 57 deletions

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' })}