SONAR-21482 - Profile page adopts new UI

diff --git a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
index 55900e06cb4787d392f454c3a69e7d5073ecd9f8..66951e5aae3e2ca5580539de0d2f335531b92306 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
@@ -58,6 +58,7 @@ const TEMP_PAGELIST_WITH_NEW_BACKGROUND = [
   '/security_hotspots',
   '/web_api_v2',
   '/portfolio',
+  '/account',
 ];
 
 const TEMP_PAGELIST_WITH_NEW_BACKGROUND_WHITE = [

diff --git a/server/sonar-web/src/main/js/apps/account/__tests__/Account-it.tsx b/server/sonar-web/src/main/js/apps/account/__tests__/Account-it.tsx
index 44209c8012dc50e2e4da1edc335126183c835aac..e3d1e1b39afd014e18c3caa839db360cbacf55f1 100644 (file)
--- a/server/sonar-web/src/main/js/apps/account/__tests__/Account-it.tsx
+++ b/server/sonar-web/src/main/js/apps/account/__tests__/Account-it.tsx
@@ -176,7 +176,7 @@ it('should render the top menu', () => {
 
   expect(screen.getByText(name)).toBeInTheDocument();
 
-  expect(screen.getByText('my_account.profile')).toBeInTheDocument();
+  expect(screen.getByRole('heading', { name: 'my_account.profile' })).toBeInTheDocument();
   expect(screen.getByText('my_account.security')).toBeInTheDocument();
   expect(screen.getByText('my_account.notifications')).toBeInTheDocument();
   expect(screen.getByText('my_account.projects')).toBeInTheDocument();

diff --git a/server/sonar-web/src/main/js/apps/account/profile/Preferences.tsx b/server/sonar-web/src/main/js/apps/account/profile/Preferences.tsx
index 8a7bedc93375fb0d3ce0f3905a7c0525586c3e8b..27e945eb62cef19a82ec14ba44d2d46b707b32f9 100644 (file)
--- a/server/sonar-web/src/main/js/apps/account/profile/Preferences.tsx
+++ b/server/sonar-web/src/main/js/apps/account/profile/Preferences.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 { SubHeading, Switch } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import Toggle from '../../../components/controls/Toggle';
 import { translate } from '../../../helpers/l10n';
 import {
   getKeyboardShortcutEnabled,
@@ -40,43 +40,36 @@ export function Preferences() {
   );
 
   return (
-    <div className="boxed-group">
-      <div className="boxed-group-inner">
-        <h2 className="big-spacer-bottom">{translate('my_account.preferences')}</h2>
-        <ul>
-          <li>
-            <div className="text-bold spacer-bottom">
-              {translate('my_account.preferences.keyboard_shortcuts')}
-            </div>
-            <div className="display-flex-row">
-              <div className="width-50 big-padded-right">
-                <FormattedMessage
-                  id="my_account.preferences.keyboard_shortcuts.description"
-                  defaultMessage={translate(
-                    'my_account.preferences.keyboard_shortcuts.description',
-                  )}
-                  values={{
-                    questionMark: (
-                      <span className="markdown">
-                        <code>?</code>
-                      </span>
-                    ),
-                  }}
-                />
-              </div>
-              <Toggle
-                ariaLabel={
-                  shortcutsPreferenceValue
-                    ? translate('my_account.preferences.keyboard_shortcuts.enabled')
-                    : translate('my_account.preferences.keyboard_shortcuts.disabled')
-                }
-                onChange={handleToggleKeyboardShortcut}
-                value={shortcutsPreferenceValue}
+    <>
+      <SubHeading as="h2">{translate('my_account.preferences')}</SubHeading>
+      <ul>
+        <li>
+          <div>{translate('my_account.preferences.keyboard_shortcuts')}</div>
+          <div className="sw-flex sw-flex-row">
+            <div className="sw-max-w-3/4">
+              <FormattedMessage
+                id="my_account.preferences.keyboard_shortcuts.description"
+                defaultMessage={translate('my_account.preferences.keyboard_shortcuts.description')}
+                values={{
+                  questionMark: (
+                    <span className="markdown">
+                      <code>?</code>
+                    </span>
+                  ),
+                }}
               />
             </div>
-          </li>
-        </ul>
-      </div>
-    </div>
+            <Switch
+              labels={{
+                on: translate('my_account.preferences.keyboard_shortcuts.enabled'),
+                off: translate('my_account.preferences.keyboard_shortcuts.disabled'),
+              }}
+              onChange={handleToggleKeyboardShortcut}
+              value={shortcutsPreferenceValue}
+            />
+          </div>
+        </li>
+      </ul>
+    </>
   );
 }

diff --git a/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx b/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx
index 2b2dd321c6078de163b854b0fa390c37b3a4249c..05e4a1a7f7ea5ccc6dc0bb7da018319a1efd5772 100644 (file)
--- a/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx
+++ b/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx
@@ -17,6 +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 { GreySeparator, HelperHintIcon, SubHeading, Title } from 'design-system';
 import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
 import HelpTooltip from '../../../components/controls/HelpTooltip';
@@ -34,14 +35,15 @@ export function Profile({ currentUser }: ProfileProps) {
   const isExternalProvider = !currentUser.local && currentUser.externalProvider !== 'sonarqube';
 
   return (
-    <div className="account-body account-container account-profile">
+    <div className="sw-max-w-1/2">
       <Helmet defer={false} title={translate('my_account.profile')} />
-      <div className="boxed-group">
-        {renderLogin()}
-        {renderEmail()}
-        {renderUserGroups()}
-        {renderScmAccounts()}
-      </div>
+      <Title className="sw-mb-6">{translate('my_account.profile')}</Title>
+      {renderLogin()}
+      {renderEmail()}
+      <GreySeparator className="sw-my-4" />
+      {renderUserGroups()}
+      {renderScmAccounts()}
+      <GreySeparator className="sw-my-4" />
       <Preferences />
     </div>
   );
@@ -52,13 +54,9 @@ export function Profile({ currentUser }: ProfileProps) {
     }
 
     return (
-      <div className="boxed-group-inner">
-        <h2 className="spacer-bottom">{translate('my_profile.login')}</h2>
-        {currentUser.login && (
-          <p className="spacer-bottom" id="login">
-            {currentUser.login}
-          </p>
-        )}
+      <div className="sw-flex sw-items-center sw-mb-2">
+        <strong className="sw-body-sm-highlight sw-mr-1">{translate('my_profile.login')}:</strong>
+        {currentUser.login && <span id="login">{currentUser.login}</span>}
         {isExternalProvider && <UserExternalIdentity user={currentUser} />}
       </div>
     );
@@ -70,11 +68,9 @@ export function Profile({ currentUser }: ProfileProps) {
     }
 
     return (
-      <div className="boxed-group-inner">
-        <h2 className="spacer-bottom">{translate('my_profile.email')}</h2>
-        <div className="spacer-bottom">
-          <p id="email">{currentUser.email}</p>
-        </div>
+      <div className="sw-mb-2">
+        <strong className="sw-body-sm-highlight sw-mr-1">{translate('my_profile.email')}:</strong>
+        <span id="email">{currentUser.email}</span>
       </div>
     );
   }
@@ -85,16 +81,17 @@ export function Profile({ currentUser }: ProfileProps) {
     }
 
     return (
-      <div className="boxed-group-inner">
-        <h2 className="spacer-bottom">{translate('my_profile.groups')}</h2>
+      <>
+        <SubHeading as="h2">{translate('my_profile.groups')}</SubHeading>
         <ul id="groups">
           {currentUser.groups.map((group) => (
-            <li className="little-spacer-bottom" key={group} title={group}>
+            <li className="sw-mb-2" key={group} title={group}>
               {group}
             </li>
           ))}
         </ul>
-      </div>
+        <GreySeparator className="sw-my-4" />
+      </>
     );
   }
 
@@ -108,36 +105,27 @@ export function Profile({ currentUser }: ProfileProps) {
     }
 
     return (
-      <div className="boxed-group-inner">
-        <h2 className="spacer-bottom">
+      <>
+        <SubHeading as="h2">
           {translate('my_profile.scm_accounts')}
-          <HelpTooltip
-            className="little-spacer-left"
-            overlay={translate('my_profile.scm_accounts.tooltip')}
-          />
-        </h2>
+          <HelpTooltip className="sw-ml-2" overlay={translate('my_profile.scm_accounts.tooltip')}>
+            <HelperHintIcon />
+          </HelpTooltip>
+        </SubHeading>
         <ul id="scm-accounts">
-          {currentUser.login && (
-            <li className="little-spacer-bottom text-ellipsis" title={currentUser.login}>
-              {currentUser.login}
-            </li>
-          )}
+          {currentUser.login && <li title={currentUser.login}>{currentUser.login}</li>}
 
-          {currentUser.email && (
-            <li className="little-spacer-bottom text-ellipsis" title={currentUser.email}>
-              {currentUser.email}
-            </li>
-          )}
+          {currentUser.email && <li title={currentUser.email}>{currentUser.email}</li>}
 
           {currentUser.scmAccounts &&
             currentUser.scmAccounts.length > 0 &&
             currentUser.scmAccounts.map((scmAccount) => (
-              <li className="little-spacer-bottom" key={scmAccount} title={scmAccount}>
+              <li key={scmAccount} title={scmAccount}>
                 {scmAccount}
               </li>
             ))}
         </ul>
-      </div>
+      </>
     );
   }
 }

diff --git a/server/sonar-web/src/main/js/apps/account/profile/UserExternalIdentity.tsx b/server/sonar-web/src/main/js/apps/account/profile/UserExternalIdentity.tsx
index 443381051afe67c130c4faf7f991daa72420829e..7c317553268074a067a3d1f53fceb8de4952c9a5 100644 (file)
--- a/server/sonar-web/src/main/js/apps/account/profile/UserExternalIdentity.tsx
+++ b/server/sonar-web/src/main/js/apps/account/profile/UserExternalIdentity.tsx
@@ -96,21 +96,23 @@ export default class UserExternalIdentity extends React.PureComponent<
     }
 
     return (
-      <div
-        className="identity-provider"
-        style={{
-          backgroundColor: identityProvider.backgroundColor,
-          color: getTextColor(identityProvider.backgroundColor, colors.secondFontColor),
-        }}
-      >
-        <img
-          alt={identityProvider.name}
-          className="little-spacer-right"
-          height="14"
-          src={getBaseUrl() + identityProvider.iconPath}
-          width="14"
-        />{' '}
-        {user.externalIdentity}
+      <div className="sw-mt-1 sw-ml-2">
+        <span
+          className="sw-inline-flex sw-items-center sw-px-1"
+          style={{
+            backgroundColor: identityProvider.backgroundColor,
+            color: getTextColor(identityProvider.backgroundColor, colors.secondFontColor),
+          }}
+        >
+          <img
+            alt={identityProvider.name}
+            className="sw-mr-1"
+            height="14"
+            src={getBaseUrl() + identityProvider.iconPath}
+            width="14"
+          />
+          {user.externalIdentity}
+        </span>
       </div>
     );
   }