From: 7PH <benjamin.raymond@sonarsource.com>
Date: Tue, 3 Oct 2023 09:15:37 +0000 (+0200)
Subject: SONAR-20366 Migrate profile changelog page to MIUI
X-Git-Tag: 10.3.0.82913~290
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=de7a6f1b14703043705718aa4a74b460cdd817b2;p=sonarqube.git

SONAR-20366 Migrate profile changelog page to MIUI
---

diff --git a/server/sonar-web/design-system/src/components/input/DateRangePicker.tsx b/server/sonar-web/design-system/src/components/input/DateRangePicker.tsx
index 393946732ea..8c917da71b2 100644
--- a/server/sonar-web/design-system/src/components/input/DateRangePicker.tsx
+++ b/server/sonar-web/design-system/src/components/input/DateRangePicker.tsx
@@ -21,6 +21,7 @@ import classNames from 'classnames';
 import { max, min } from 'date-fns';
 import * as React from 'react';
 import { PopupZLevel } from '../../helpers';
+import { InputSizeKeys } from '../../types';
 import { LightLabel } from '../Text';
 import { DatePicker } from './DatePicker';
 
@@ -34,6 +35,7 @@ interface Props {
   className?: string;
   clearButtonLabel: string;
   fromLabel: string;
+  inputSize?: InputSizeKeys;
   maxDate?: Date;
   minDate?: Date;
   onChange: (date: DateRange) => void;
@@ -75,6 +77,7 @@ export class DateRangePicker extends React.PureComponent<Props> {
       alignEndDateCalandarRight,
       clearButtonLabel,
       fromLabel,
+      inputSize = 'full',
       minDate,
       maxDate,
       separatorText,
@@ -95,7 +98,7 @@ export class DateRangePicker extends React.PureComponent<Props> {
           minDate={minDate}
           onChange={this.handleFromChange}
           placeholder={fromLabel}
-          size="full"
+          size={inputSize}
           value={this.from}
           valueFormatter={valueFormatter}
           zLevel={zLevel}
@@ -115,7 +118,7 @@ export class DateRangePicker extends React.PureComponent<Props> {
           minDate={minDate && this.from ? max([minDate, this.from]) : minDate ?? this.from}
           onChange={this.handleToChange}
           placeholder={toLabel}
-          size="full"
+          size={inputSize}
           value={this.to}
           valueFormatter={valueFormatter}
           zLevel={zLevel}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx
index f5c9c7fac3d..28ecbf03029 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx
@@ -18,12 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import { isSameMinute } from 'date-fns';
+import { ContentCell, Link, Note, Table, TableRow, TableRowInteractive } from 'design-system';
 import { sortBy } from 'lodash';
 import * as React from 'react';
-import Link from '../../../components/common/Link';
+import { useIntl } from 'react-intl';
 import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import { parseDate } from '../../../helpers/dates';
-import { translate } from '../../../helpers/l10n';
 import { getRulesUrl } from '../../../helpers/urls';
 import { ProfileChangelogEvent } from '../types';
 import ChangesList from './ChangesList';
@@ -33,6 +33,8 @@ interface Props {
 }
 
 export default function Changelog(props: Props) {
+  const intl = useIntl();
+
   let isEvenRow = false;
   const sortedRows = sortBy(
     props.events,
@@ -54,46 +56,44 @@ export default function Changelog(props: Props) {
       isEvenRow = !isEvenRow;
     }
 
-    const className = 'js-profile-changelog-event ' + (isEvenRow ? 'even' : 'odd');
-
     return (
-      <tr className={className} key={index}>
-        <td className="thin nowrap">{!isBulkChange && <DateTimeFormatter date={event.date} />}</td>
+      <TableRowInteractive key={`${event.date}-${event.ruleKey}`}>
+        <ContentCell className="sw-whitespace-nowrap">
+          {!isBulkChange && <DateTimeFormatter date={event.date} />}
+        </ContentCell>
 
-        <td className="thin nowrap">
-          {!isBulkChange &&
-            (event.authorName ? (
-              <span>{event.authorName}</span>
-            ) : (
-              <span className="note">System</span>
-            ))}
-        </td>
+        <ContentCell className="sw-whitespace-nowrap sw-max-w-[120px]">
+          {!isBulkChange && (event.authorName ? event.authorName : <Note>System</Note>)}
+        </ContentCell>
 
-        <td className="thin nowrap">
-          {!isBulkChange && translate('quality_profiles.changelog', event.action)}
-        </td>
+        <ContentCell className="sw-whitespace-nowrap">
+          {!isBulkChange &&
+            intl.formatMessage({ id: `quality_profiles.changelog.${event.action}` })}
+        </ContentCell>
 
-        <td className="quality-profile-changelog-rule-cell">
+        <ContentCell>
           <Link to={getRulesUrl({ rule_key: event.ruleKey })}>{event.ruleName}</Link>
-        </td>
+        </ContentCell>
 
-        <td>{event.params && <ChangesList changes={event.params} />}</td>
-      </tr>
+        <ContentCell>{event.params && <ChangesList changes={event.params} />}</ContentCell>
+      </TableRowInteractive>
     );
   });
 
   return (
-    <table className="data zebra-hover">
-      <thead>
-        <tr>
-          <th className="thin nowrap">{translate('date')}</th>
-          <th className="thin nowrap">{translate('user')}</th>
-          <th className="thin nowrap">{translate('action')}</th>
-          <th>{translate('rule')}</th>
-          <th>{translate('parameters')}</th>
-        </tr>
-      </thead>
-      <tbody>{rows}</tbody>
-    </table>
+    <Table
+      columnCount={5}
+      header={
+        <TableRow>
+          <ContentCell>{intl.formatMessage({ id: 'date' })}</ContentCell>
+          <ContentCell>{intl.formatMessage({ id: 'user' })}</ContentCell>
+          <ContentCell>{intl.formatMessage({ id: 'action' })}</ContentCell>
+          <ContentCell>{intl.formatMessage({ id: 'rule' })}</ContentCell>
+          <ContentCell>{intl.formatMessage({ id: 'updates' })}</ContentCell>
+        </TableRow>
+      }
+    >
+      {rows}
+    </Table>
   );
 }
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 4d0507c2dea..b78462000cc 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,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 { ButtonSecondary, Spinner } from 'design-system';
 import * as React from 'react';
 import { ChangelogResponse, getProfileChangelog } from '../../../api/quality-profiles';
 import { Location, Router, withRouter } from '../../../components/hoc/withRouter';
-import Spinner from '../../../components/ui/Spinner';
 import { parseDate, toISO8601WithOffsetString } from '../../../helpers/dates';
 import { translate } from '../../../helpers/l10n';
 import { withQualityProfilesContext } from '../qualityProfilesContext';
@@ -137,8 +137,8 @@ class ChangelogContainer extends React.PureComponent<Props, State> {
       this.state.events.length < this.state.total;
 
     return (
-      <div className="boxed-group boxed-group-inner js-profile-changelog">
-        <div className="spacer-bottom">
+      <div>
+        <div className="sw-mb-2 sw-flex sw-gap-4 sw-items-center">
           <ChangelogSearch
             dateRange={{
               from: query.since ? parseDate(query.since) : undefined,
@@ -147,7 +147,7 @@ class ChangelogContainer extends React.PureComponent<Props, State> {
             onDateRangeChange={this.handleDateRangeChange}
             onReset={this.handleReset}
           />
-          <Spinner loading={this.state.loading} className="spacer-left" />
+          <Spinner loading={this.state.loading} />
         </div>
 
         {this.state.events != null && this.state.events.length === 0 && <ChangelogEmpty />}
@@ -157,10 +157,10 @@ class ChangelogContainer extends React.PureComponent<Props, State> {
         )}
 
         {shouldDisplayFooter && (
-          <footer className="text-center spacer-top small">
-            <a href="#" onClick={this.loadMore.bind(this)}>
+          <footer className="sw-text-center sw-mt-2">
+            <ButtonSecondary onClick={this.loadMore.bind(this)}>
               {translate('show_more')}
-            </a>
+            </ButtonSecondary>
           </footer>
         )}
       </div>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogEmpty.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogEmpty.tsx
index 9c51644b1f5..2159594477f 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogEmpty.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogEmpty.tsx
@@ -18,8 +18,10 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { translate } from '../../../helpers/l10n';
+import { useIntl } from 'react-intl';
 
 export default function ChangelogEmpty() {
-  return <div className="big-spacer-top">{translate('no_results')}</div>;
+  const intl = useIntl();
+
+  return <div className="sw-mt-6">{intl.formatMessage({ id: 'no_results' })}</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 6cb2ad54a74..8fcec92577b 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,10 +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 { ButtonSecondary, DateRangePicker } from 'design-system';
 import * as React from 'react';
-import { Button } from '../../../components/controls/buttons';
-import DateRangeInput from '../../../components/controls/DateRangeInput';
-import { translate } from '../../../helpers/l10n';
+import { useIntl } from 'react-intl';
 
 interface ChangelogSearchProps {
   dateRange: { from?: Date; to?: Date } | undefined;
@@ -30,12 +29,23 @@ interface ChangelogSearchProps {
 
 export default function ChangelogSearch(props: ChangelogSearchProps) {
   const { dateRange } = props;
+
+  const intl = useIntl();
+
   return (
-    <div className="display-flex-end" id="quality-profile-changelog-form">
-      <DateRangeInput onChange={props.onDateRangeChange} value={dateRange} />
-      <Button className="spacer-left text-top" onClick={props.onReset}>
-        {translate('reset_verb')}
-      </Button>
+    <div className="sw-flex sw-gap-2">
+      <DateRangePicker
+        clearButtonLabel={intl.formatMessage({ id: 'clear' })}
+        fromLabel={intl.formatMessage({ id: 'start_date' })}
+        inputSize="small"
+        separatorText={intl.formatMessage({ id: 'to' })}
+        toLabel={intl.formatMessage({ id: 'end_date' })}
+        onChange={props.onDateRangeChange}
+        value={dateRange}
+      />
+      <ButtonSecondary className="sw-ml-2 sw-align-top" onClick={props.onReset}>
+        {intl.formatMessage({ id: 'reset_verb' })}
+      </ButtonSecondary>
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangesList.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangesList.tsx
index 047c2ccb2cf..c1ea0b8b39e 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangesList.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangesList.tsx
@@ -33,7 +33,7 @@ export default function ChangesList({ changes }: Props) {
   };
 
   return (
-    <ul>
+    <ul className="sw-flex sw-flex-col sw-gap-1">
       {Object.keys(changes).map((key) => (
         <li key={key}>
           {key === 'severity' ? (
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ParameterChange.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ParameterChange.tsx
index b289c2c799d..68b7abb92f3 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ParameterChange.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ParameterChange.tsx
@@ -27,13 +27,13 @@ interface Props {
 
 export default function ParameterChange({ name, value }: Props) {
   return (
-    <div className="quality-profile-changelog-parameter">
+    <p className="sw-break-words">
       {value == null
         ? translateWithParameters(
             'quality_profiles.changelog.parameter_reset_to_default_value',
             name,
           )
         : translateWithParameters('quality_profiles.parameter_set_to', name, value)}
-    </div>
+    </p>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/__tests__/ChangelogContainer-it.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/__tests__/ChangelogContainer-it.tsx
index 7af855cbbfb..6f6c1e489f3 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/__tests__/ChangelogContainer-it.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/__tests__/ChangelogContainer-it.tsx
@@ -33,7 +33,7 @@ const ui = {
   row: byRole('row'),
   link: byRole('link'),
   emptyPage: byText('no_results'),
-  showMore: byRole('link', { name: 'show_more' }),
+  showMore: byRole('button', { name: 'show_more' }),
   startDate: byRole('textbox', { name: 'start_date' }),
   endDate: byRole('textbox', { name: 'end_date' }),
   reset: byRole('button', { name: 'reset_verb' }),
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx
index f877e5b1ad6..ee7041557f5 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx
@@ -94,14 +94,16 @@ export default function ProfileHeader(props: Props) {
                 <DateFromNow date={profile.lastUsed} />
               </div>
 
-              <div>
-                <Link
-                  className="it__quality-profiles__changelog"
-                  to={getProfileChangelogPath(profile.name, profile.language)}
-                >
-                  {translate('see_changelog')}
-                </Link>
-              </div>
+              {!isChangeLogPage && (
+                <div>
+                  <Link
+                    className="it__quality-profiles__changelog"
+                    to={getProfileChangelogPath(profile.name, profile.language)}
+                  >
+                    {translate('see_changelog')}
+                  </Link>
+                </div>
+              )}
             </>
           )}
 
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/styles.css b/server/sonar-web/src/main/js/apps/quality-profiles/styles.css
index 291324828b8..e22d2dea61f 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/styles.css
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/styles.css
@@ -18,15 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-.quality-profile-changelog-rule-cell {
-  line-height: 1.5;
-}
-
-.quality-profile-changelog-parameter {
-  max-width: 270px;
-  word-break: break-word;
-}
-
 #create-profile-form .radio-card {
   width: 244px;
   background-color: var(--neutral50);
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index c76c2d6bb7d..e9a392af9b6 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -236,6 +236,7 @@ unknown=Unknown
 unresolved=Unresolved
 updated=Updated
 updated_on=Updated on
+updates=Updates
 update_verb=Update
 updating=Updating
 unselected=Unselected