SONAR-23030 Use Label from Echoes

diff --git a/server/sonar-web/design-system/src/components/input/FormField.tsx b/server/sonar-web/design-system/src/components/input/FormField.tsx
index 0a1c53699488c798a576c0629c14e85ad9742ec0..be9a4afa4529a363e51820a9c4e6c34559b32120 100644 (file)
--- a/server/sonar-web/design-system/src/components/input/FormField.tsx
+++ b/server/sonar-web/design-system/src/components/input/FormField.tsx
@@ -17,7 +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 styled from '@emotion/styled';
+import { Label } from '@sonarsource/echoes-react';
 import { ReactNode } from 'react';
 import tw from 'twin.macro';
 import { Note } from '../../sonar-aligned';
@@ -50,7 +52,7 @@ export function FormField({
   title,
   ariaLabel,
   requiredAriaLabel,
-}: Props) {
+}: Readonly<Props>) {
   return (
     <FieldWrapper className={className} id={id}>
       <Highlight className="sw-mb-2 sw-flex sw-items-center sw-gap-2">
@@ -72,7 +74,7 @@ export function FormField({
 
 // This is needed to prevent the target input/button from being focused
 // when clicking/hovering on the label. More info https://stackoverflow.com/questions/9098581/why-is-hover-for-input-triggered-on-corresponding-label-in-css
-const StyledLabel = styled.label`
+const StyledLabel = styled(Label)`
   pointer-events: none;
 `;
 

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 f611187e49b27762e6f28f34babbd0dc39957019..88168451661677270363bc64a5c79164ffc5b276 100644 (file)
--- 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 { Button } from '@sonarsource/echoes-react';
+
+import { Button, Label } from '@sonarsource/echoes-react';
 import { InputSearch } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../../helpers/l10n';
@@ -88,24 +89,27 @@ export default class Search extends React.PureComponent<Props> {
       <section className="sw-my-4">
         <ul className="sw-flex sw-items-center sw-flex-wrap sw-gap-4">
           <li>
-            <label
+            <Label
               id="background-task-status-filter-label"
-              className="sw-body-sm-highlight sw-mr-2"
+              className="sw-mr-2"
               htmlFor="status-filter"
             >
               {translate('status')}
-            </label>
+            </Label>
+
             <StatusFilter id="status-filter" onChange={this.handleStatusChange} value={status} />
           </li>
+
           {types.length > 1 && (
             <li>
-              <label
+              <Label
                 id="background-task-type-filter-label"
-                className="sw-body-sm-highlight sw-mr-2"
+                className="sw-mr-2"
                 htmlFor="types-filter"
               >
                 {translate('type')}
-              </label>
+              </Label>
+
               <TypesFilter
                 id="types-filter"
                 onChange={this.handleTypeChange}
@@ -114,18 +118,20 @@ export default class Search extends React.PureComponent<Props> {
               />
             </li>
           )}
+
           {!component && (
             <li className="sw-flex sw-items-center">
-              <label className="sw-body-sm-highlight sw-mr-2">
+              <Label className="sw-mr-2">
                 {translate('background_tasks.currents_filter.ONLY_CURRENTS')}
-              </label>
+              </Label>
+
               <CurrentsFilter onChange={this.handleCurrentsChange} value={currents} />
             </li>
           )}
+
           <li className="sw-flex sw-items-center">
-            <label className="sw-body-sm-highlight sw-mr-2">
-              {translate('background_tasks.date_filter')}
-            </label>
+            <Label className="sw-mr-2">{translate('background_tasks.date_filter')}</Label>
+
             <DateFilter
               maxExecutedAt={maxExecutedAt}
               minSubmittedAt={minSubmittedAt}
@@ -147,6 +153,7 @@ export default class Search extends React.PureComponent<Props> {
             <Button className="js-reload sw-mr-2" isDisabled={loading} onClick={this.handleReload}>
               {translate('reload')}
             </Button>
+
             <Button isDisabled={loading} onClick={this.handleReset}>
               {translate('reset_verb')}
             </Button>

diff --git a/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx b/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx
index d7914cb8807f86c219245b5b905162228844f907..7bbe050746700c85ed67c786ca6edf4d70baeb56 100644 (file)
--- a/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx
@@ -18,14 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { Heading } from '@sonarsource/echoes-react';
+import { Button, ButtonVariety, Heading, Label, Spinner } from '@sonarsource/echoes-react';
 import {
-  ButtonPrimary,
   ContentCell,
   GreySeparator,
   InputField,
   InputSelect,
-  Spinner,
   Table,
   TableRow,
 } from 'design-system';
@@ -203,9 +201,7 @@ export function TokensForm(props: Readonly<Props>) {
 
       <form autoComplete="off" className="sw-flex sw-items-center" onSubmit={handleGenerateToken}>
         <div className="sw-flex sw-flex-col sw-mr-2">
-          <label htmlFor="token-name" className="sw-font-bold">
-            {translate('users.tokens.name')}
-          </label>
+          <Label htmlFor="token-name">{translate('users.tokens.name')}</Label>
 
           <InputField
             className="sw-mt-2 sw-w-auto it__token-name"
@@ -222,9 +218,7 @@ export function TokensForm(props: Readonly<Props>) {
         {displayTokenTypeInput && (
           <>
             <div className="sw-flex sw-flex-col sw-mr-2">
-              <label htmlFor="token-select-type" className="sw-font-bold">
-                {translate('users.tokens.type')}
-              </label>
+              <Label htmlFor="token-select-type">{translate('users.tokens.type')}</Label>
 
               <InputSelect
                 className="sw-mt-2 it__token-type"
@@ -243,9 +237,7 @@ export function TokensForm(props: Readonly<Props>) {
 
             {newTokenType === TokenType.Project && (
               <div className="sw-flex sw-flex-col sw-mr-2">
-                <label htmlFor="token-select-project" className="sw-font-bold">
-                  {translate('users.tokens.project')}
-                </label>
+                <Label htmlFor="token-select-project">{translate('users.tokens.project')}</Label>
 
                 <InputSelect
                   className="sw-mt-2 it__project"
@@ -261,9 +253,7 @@ export function TokensForm(props: Readonly<Props>) {
         )}
 
         <div className="sw-flex sw-flex-col sw-mr-2">
-          <label htmlFor="token-select-expiration" className="sw-font-bold">
-            {translate('users.tokens.expires_in')}
-          </label>
+          <Label htmlFor="token-select-expiration">{translate('users.tokens.expires_in')}</Label>
 
           <InputSelect
             className="sw-mt-2"
@@ -275,21 +265,22 @@ export function TokensForm(props: Readonly<Props>) {
           />
         </div>
 
-        <ButtonPrimary
+        <Button
           className="it__generate-token"
-          disabled={isSubmitButtonDisabled()}
+          isDisabled={isSubmitButtonDisabled()}
           style={{ marginTop: 'auto' }}
           type="submit"
+          variety={ButtonVariety.Primary}
         >
           {translate('users.generate')}
-        </ButtonPrimary>
+        </Button>
       </form>
 
       {newToken && <TokensFormNewToken token={newToken} />}
 
       <GreySeparator className="sw-mb-4 sw-mt-6" />
 
-      <Spinner loading={loading}>
+      <Spinner isLoading={loading}>
         <Table
           className="sw-min-h-40 sw-w-full"
           columnCount={COLUMN_WIDTHS.length}