SONAR-22622 Project onboarding - add spinner

5 files changed, 20 insertions, 11 deletions

diff --git a/server/sonar-web/src/main/js/apps/groups/__tests__/GroupsApp-it.tsx b/server/sonar-web/src/main/js/apps/groups/__tests__/GroupsApp-it.tsx
index e1186e4b538..69a3b7d5e14 100644
--- a/server/sonar-web/src/main/js/apps/groups/__tests__/GroupsApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/__tests__/GroupsApp-it.tsx
@@ -45,7 +45,7 @@ const githubHandler = new GithubProvisioningServiceMock(dopTranslationHandler);
 
 const ui = {
   createGroupButton: byRole('button', { name: 'groups.create_group' }),
-  infoManageMode: byText(/groups\.page\.managed_description2/),
+  infoManageMode: byText(/groups\.page\.managed_description\.recommendation/),
   description: byText('user_groups.page.description'),
   allFilter: byRole('radio', { name: 'all' }),
   selectedFilter: byRole('radio', { name: 'selected' }),
diff --git a/server/sonar-web/src/main/js/apps/groups/components/Header.tsx b/server/sonar-web/src/main/js/apps/groups/components/Header.tsx
index 2159446f0bc..407d79de670 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/Header.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/Header.tsx
@@ -63,8 +63,8 @@ export default function Header({ manageProvider }: Readonly<HeaderProps>) {
             />
             <div className="sw-mt-2">
               <FormattedMessage
-                defaultMessage={translate('user_groups.page.managed_description2')}
-                id="user_groups.page.managed_description2"
+                defaultMessage={translate('user_groups.page.managed_description.recommendation')}
+                id="user_groups.page.managed_description.recommendation"
                 values={{
                   link: (
                     <DocumentationLink to={DocLink.AuthOverview}>
diff --git a/server/sonar-web/src/main/js/apps/overview/components/EmptyOverview.tsx b/server/sonar-web/src/main/js/apps/overview/components/EmptyOverview.tsx
index 6037324a053..abf12138c2e 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/EmptyOverview.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/EmptyOverview.tsx
@@ -18,7 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { FlagMessage, LargeCenteredLayout, PageContentFontWrapper, Spinner } from 'design-system';
+import styled from '@emotion/styled';
+import { Spinner } from '@sonarsource/echoes-react';
+import { FlagMessage, LargeCenteredLayout, PageContentFontWrapper } from 'design-system';
 import * as React from 'react';
 import { Navigate } from 'react-router-dom';
 import { isBranch, isMainBranch } from '~sonar-aligned/helpers/branch-like';
@@ -73,7 +75,7 @@ export function EmptyOverview(props: Readonly<EmptyOverviewProps>) {
   }, [component.key, currentUser, currentUserCanScanProject]);
 
   if (isLoading) {
-    return <Spinner loading />;
+    return <Spinner />;
   }
 
   if (component.qualifier === ComponentQualifier.Application) {
@@ -98,10 +100,10 @@ export function EmptyOverview(props: Readonly<EmptyOverviewProps>) {
     return (
       <LargeCenteredLayout className="sw-pt-8">
         <PageContentFontWrapper>
-          <FlagMessage variant="warning">
+          <SynchInProgress>
+            <Spinner className="sw-mr-2" />
             {translate('provisioning.permission_synch_in_progress')}
-            <Spinner className="sw-ml-8 sw-hidden" aria-hidden loading />
-          </FlagMessage>
+          </SynchInProgress>
         </PageContentFontWrapper>
       </LargeCenteredLayout>
     );
@@ -141,3 +143,10 @@ export function EmptyOverview(props: Readonly<EmptyOverviewProps>) {
 }
 
 export default withCurrentUserContext(EmptyOverview);
+
+const SynchInProgress = styled.div`
+  height: 50vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/server/sonar-web/src/main/js/apps/users/Header.tsx b/server/sonar-web/src/main/js/apps/users/Header.tsx
index 61734b3c962..55e53f28f69 100644
--- a/server/sonar-web/src/main/js/apps/users/Header.tsx
+++ b/server/sonar-web/src/main/js/apps/users/Header.tsx
@@ -63,8 +63,8 @@ export default function Header(props: Props) {
             />
             <div className="sw-mt-2">
               <FormattedMessage
-                defaultMessage={translate('users.page.managed_description2')}
-                id="users.page.managed_description2"
+                defaultMessage={translate('users.page.managed_description.recommendation')}
+                id="users.page.managed_description.recommendation"
                 values={{
                   link: (
                     <DocumentationLink to={DocLink.AuthOverview}>
diff --git a/server/sonar-web/src/main/js/apps/users/__tests__/UsersApp-it.tsx b/server/sonar-web/src/main/js/apps/users/__tests__/UsersApp-it.tsx
index d373d9d4049..42eda7113ff 100644
--- a/server/sonar-web/src/main/js/apps/users/__tests__/UsersApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/users/__tests__/UsersApp-it.tsx
@@ -129,7 +129,7 @@ const ui = {
   dialogCreateUser: byRole('dialog', { name: 'users.create_user' }),
   dialogDeactivateUser: byRole('dialog', { name: 'users.deactivate_user' }),
 
-  infoManageMode: byText(/users\.page\.managed_description2/),
+  infoManageMode: byText(/users\.page\.managed_description\.recommendation/),
   description: byText('users.page.description'),
   deleteUserAlert: byText('delete-user-warning'),