SONAR-23030 Use Text component

diff --git a/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx
index e56bf23087c80b3d11726712c29490650321f8f8..23df1709b69a39f96e8a514e678f1af3aab5da5b 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx
@@ -18,19 +18,20 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
+import { Text, TextSize } from '@sonarsource/echoes-react';
 import classNames from 'classnames';
 import {
   LightLabel,
   NoDataIcon,
   SnoozeCircleIcon,
   TextError,
-  TextSubdued,
   TrendUpCircleIcon,
   getTabPanelId,
   themeColor,
 } from 'design-system';
+import { isEmpty } from 'lodash';
 import React from 'react';
-import { useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { getBranchLikeQuery } from '~sonar-aligned/helpers/branch-like';
 import { formatMeasure } from '~sonar-aligned/helpers/measures';
 import {
@@ -109,21 +110,19 @@ export default function NewCodeMeasuresPanel(props: Readonly<Props>) {
   }
 
   let acceptedIssuesFooter = null;
-  if (!newAcceptedIssues) {
+  if (isEmpty(newAcceptedIssues)) {
     acceptedIssuesFooter = (
-      <StyledInfoMessage className="sw-rounded-2 sw-text-xs sw-p-4 sw-flex sw-gap-1 sw-flex-wrap">
-        <span>
-          {intl.formatMessage({
-            id: `overview.run_analysis_to_compute.${component.qualifier}`,
-          })}
-        </span>
+      <StyledInfoMessage className="sw-rounded-2 sw-p-4">
+        <Text size={TextSize.Small}>
+          <FormattedMessage id={`overview.run_analysis_to_compute.${component.qualifier}`} />
+        </Text>
       </StyledInfoMessage>
     );
   } else {
     acceptedIssuesFooter = (
-      <TextSubdued className="sw-body-xs">
+      <Text size={TextSize.Small} isSubdued>
         {intl.formatMessage({ id: 'overview.accepted_issues.help' })}
-      </TextSubdued>
+      </Text>
     );
   }
 
@@ -156,15 +155,14 @@ export default function NewCodeMeasuresPanel(props: Readonly<Props>) {
   return (
     <div id={getTabPanelId(CodeScope.New)}>
       {leakPeriod && (
-        <span
-          className="sw-body-xs sw-flex sw-items-center sw-mr-6"
-          data-spotlight-id="cayc-promotion-2"
-        >
-          <LightLabel className="sw-mr-1">{translate('overview.new_code')}:</LightLabel>
-          <b className="sw-flex">
+        <div className="sw-flex sw-items-center sw-mr-6" data-spotlight-id="cayc-promotion-2">
+          <Text isSubdued size={TextSize.Small} className="sw-mr-1">
+            {translate('overview.new_code')}:
+          </Text>
+          <Text isHighlighted size={TextSize.Small} className="sw-flex">
             <LeakPeriodInfo leakPeriod={leakPeriod} />
-          </b>
-        </span>
+          </Text>
+        </div>
       )}
       <GridContainer className="sw-relative sw-overflow-hidden sw-mt-8 js-summary">
         {!noConditionsAndWarningForNewCode && (
@@ -213,7 +211,7 @@ export default function NewCodeMeasuresPanel(props: Readonly<Props>) {
         >
           <IssueMeasuresCardInner
             data-testid="overview__measures-accepted_issues"
-            disabled={Boolean(component.needIssueSync) || !newAcceptedIssues}
+            disabled={Boolean(component.needIssueSync) || isEmpty(newAcceptedIssues)}
             metric={MetricKey.new_accepted_issues}
             value={formatMeasure(newAcceptedIssues, MetricType.ShortInteger)}
             header={intl.formatMessage({

diff --git a/server/sonar-web/src/main/js/apps/settings/components/DefinitionDescription.tsx b/server/sonar-web/src/main/js/apps/settings/components/DefinitionDescription.tsx
index 69cf100f557497ccb08be30caa59e98a1331fb66..b2635d566e92114854bd29e73a40de74897d357b 100644 (file)
--- a/server/sonar-web/src/main/js/apps/settings/components/DefinitionDescription.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/DefinitionDescription.tsx
@@ -17,9 +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 { Note, SubHeading } from 'design-system';
+import { Text, Tooltip } from '@sonarsource/echoes-react';
+import { SubHeading } from 'design-system';
 import * as React from 'react';
-import Tooltip from '../../../components/controls/Tooltip';
 import { translateWithParameters } from '../../../helpers/l10n';
 import { sanitizeStringRestricted } from '../../../helpers/sanitize';
 import { ExtendedSettingDefinition } from '../../../types/settings';
@@ -48,9 +48,9 @@ export default function DefinitionDescription({ definition }: Readonly<Props>) {
       )}
 
       <Tooltip content={translateWithParameters('settings.key_x', definition.key)}>
-        <Note as="div" className="sw-mt-4">
+        <Text isSubdued as="div" className="sw-mt-4">
           {translateWithParameters('settings.key_x', definition.key)}
-        </Note>
+        </Text>
       </Tooltip>
     </div>
   );

diff --git a/server/sonar-web/src/main/js/apps/settings/components/authentication/Authentication.tsx b/server/sonar-web/src/main/js/apps/settings/components/authentication/Authentication.tsx
index ddb88e3a2d4dd0fcf861e49b802036339e02dc07..8f6e46d7097537fb9d3f835ee31f40f60ea19518 100644 (file)
--- a/server/sonar-web/src/main/js/apps/settings/components/authentication/Authentication.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/authentication/Authentication.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { Link } from '@sonarsource/echoes-react';
+import { Link, Text } from '@sonarsource/echoes-react';
 import classNames from 'classnames';
 import { FlagMessage, SubTitle, ToggleButton, getTabId, getTabPanelId } from 'design-system';
 import * as React from 'react';
@@ -123,9 +123,9 @@ export function Authentication(props: Props & WithAvailableFeaturesProps) {
         </FlagMessage>
       )}
 
-      <div className="sw-my-6">
-        <p>{translate('settings.authentication.description')}</p>
-      </div>
+      <Text as="p" className="sw-my-6">
+        {translate('settings.authentication.description')}
+      </Text>
 
       <ToggleButton
         role="tablist"

diff --git a/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotification.tsx b/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotification.tsx
index 2c43f2532b3771602e7dce8e5f35cb635a92e7f5..2c2f4c4a82260a1d5e76cbc886e6e34c32d0eb8a 100644 (file)
--- a/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotification.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotification.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 { Spinner } from '@sonarsource/echoes-react';
+import { Spinner, Text } from '@sonarsource/echoes-react';
 import { SubTitle } from 'design-system/lib';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -34,7 +34,9 @@ export default function EmailNotification() {
       <SubTitle as="h3">
         <FormattedMessage id="email_notification.header" />
       </SubTitle>
-      <FormattedMessage id="email_notification.description" />
+      <Text>
+        <FormattedMessage id="email_notification.description" />
+      </Text>
       <Spinner isLoading={isLoading}>
         {configuration == null || isEditing ? (
           <EmailNotificationConfiguration

diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsHistory.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsHistory.tsx
index 5bf2137e1d84a5c892deafb89cd4649bddab726b..2cc024cf64a5ee9de989ee77ff05eeb81c1b4a55 100644 (file)
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsHistory.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsHistory.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 { LightLabel, Spinner } from 'design-system';
+import { Spinner, Text } from '@sonarsource/echoes-react';
 import { isEqual, uniqBy } from 'lodash';
 import * as React from 'react';
 import { translate, translateWithParameters } from '../../helpers/l10n';
@@ -73,7 +73,7 @@ export default class GraphsHistory extends React.PureComponent<Props, State> {
       return (
         <div className="sw-flex sw-justify-center sw-flex-col sw-items-stretch sw-grow">
           <div className="sw-text-center">
-            <Spinner loading={loading} />
+            <Spinner isLoading={loading} />
           </div>
         </div>
       );
@@ -82,13 +82,13 @@ export default class GraphsHistory extends React.PureComponent<Props, State> {
     if (!hasHistoryData(series)) {
       return (
         <div className="sw-flex sw-items-center sw-justify-center sw-h-full">
-          <LightLabel className="sw-body-sm">
+          <Text isSubdued>
             {translate(
               isCustom
                 ? 'project_activity.graphs.custom.no_history'
                 : 'component_measures.no_history',
             )}
-          </LightLabel>
+          </Text>
         </div>
       );
     }

diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/PreRequisitesStep.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/PreRequisitesStep.tsx
index da01cd504e50aaf557c677ec5bd9e03a22457e9a..c1c1246f064c1dfedfaa7bc9d96d36f6f2d7e8a1 100644 (file)
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/PreRequisitesStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/PreRequisitesStep.tsx
@@ -18,7 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { FlagMessage, Link, ListItem, TutorialStep, UnorderedList } from 'design-system';
+import { Text } from '@sonarsource/echoes-react';
+import { FlagMessage, Link, TutorialStep } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { DocLink } from '../../../helpers/doc-links';
@@ -47,37 +48,37 @@ export default function PreRequisitesStep(props: PreRequisitesStepProps) {
           />
         </span>
       </FlagMessage>
-      <UnorderedList ticks className="sw-ml-8 sw-mb-4">
-        {branchesEnabled && (
-          <ListItem>
-            {translate('onboarding.tutorial.with.jenkins.prereqs.plugins.branch_source', alm)}
-          </ListItem>
-        )}
-        {!branchesEnabled && alm === AlmKeys.GitLab && (
-          <ListItem>
-            {translate('onboarding.tutorial.with.jenkins.prereqs.plugins.gitlab_plugin')}
-          </ListItem>
-        )}
-        <ListItem>
-          {translate('onboarding.tutorial.with.jenkins.prereqs.plugins.sonar_scanner')}
-        </ListItem>
-      </UnorderedList>
-      <p className="sw-mb-4">
-        <FormattedMessage
-          defaultMessage={translate('onboarding.tutorial.with.jenkins.prereqs.step_by_step_guide')}
-          id="onboarding.tutorial.with.jenkins.prereqs.step_by_step_guide"
-          values={{
-            link: (
-              <Link to={docUrl}>
-                {translate('onboarding.tutorial.with.jenkins.prereqs.step_by_step_guide.link')}
-              </Link>
-            ),
-          }}
-        />
-      </p>
-      <p className="sw-mb-4">
-        {translate('onboarding.tutorial.with.jenkins.prereqs.following_are_recommendations')}
-      </p>
+      <Text as="div">
+        <ul className="sw-mb-4">
+          {branchesEnabled && (
+            <li>
+              {translate('onboarding.tutorial.with.jenkins.prereqs.plugins.branch_source', alm)}
+            </li>
+          )}
+          {!branchesEnabled && alm === AlmKeys.GitLab && (
+            <li>{translate('onboarding.tutorial.with.jenkins.prereqs.plugins.gitlab_plugin')}</li>
+          )}
+          <li>{translate('onboarding.tutorial.with.jenkins.prereqs.plugins.sonar_scanner')}</li>
+        </ul>
+        <p className="sw-mb-4">
+          <FormattedMessage
+            defaultMessage={translate(
+              'onboarding.tutorial.with.jenkins.prereqs.step_by_step_guide',
+            )}
+            id="onboarding.tutorial.with.jenkins.prereqs.step_by_step_guide"
+            values={{
+              link: (
+                <Link to={docUrl}>
+                  {translate('onboarding.tutorial.with.jenkins.prereqs.step_by_step_guide.link')}
+                </Link>
+              ),
+            }}
+          />
+        </p>
+        <p className="sw-mb-4">
+          {translate('onboarding.tutorial.with.jenkins.prereqs.following_are_recommendations')}
+        </p>
+      </Text>
     </TutorialStep>
   );
 }