SONAR-11029 Move the tutorial inside provisioned projects dashboard

* Move/Rename files of tutorials folder
* SONAR-11049 Update tutorial UI and move it inside the project dashboard
* SONAR-11050 Update tutorial to skip now useless steps
* Remove unused style
* SONAR-11030 Make dashboard tutorial work with already known project key
* Better manage error messages when no analysis and analyzed branches
* SONAR-11052 Refresh project status as long as there is no analysis
* SONAR-11051 Add infos suggestions depending on the ALM of the project
* Do no display tutorial when there is analyses in the pipe

9 files changed, 40 insertions, 45 deletions

diff --git a/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx b/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx
index 82d4b81197e..176a21d06ac 100644
--- a/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/ComponentContainer.tsx
@@ -176,7 +176,12 @@ export class ComponentContainer extends React.PureComponent<Props, State> {
                   differenceBy(newTasksInProgress, tasksInProgress, 'id').length > 0);
 
               shouldFetchComponent = Boolean(currentTaskChanged || progressChanged);
-              if (!shouldFetchComponent && component && newTasksInProgress.length > 0) {
+              if (
+                !shouldFetchComponent &&
+                component &&
+                (newTasksInProgress.length > 0 || !component.analysisDate)
+              ) {
+                // Refresh the status as long as there is tasks in progress or no analysis
                 window.clearTimeout(this.watchStatusTimer);
                 this.watchStatusTimer = window.setTimeout(
                   () => this.fetchStatus(component),
diff --git a/server/sonar-web/src/main/js/app/components/StartupModal.tsx b/server/sonar-web/src/main/js/app/components/StartupModal.tsx
index 8a7e7e2f444..b85885bbcd0 100644
--- a/server/sonar-web/src/main/js/app/components/StartupModal.tsx
+++ b/server/sonar-web/src/main/js/app/components/StartupModal.tsx
@@ -35,7 +35,7 @@ import { lazyLoad } from '../../components/lazyLoad';
 const CreateOrganizationForm = lazyLoad(() =>
   import('../../apps/account/organizations/CreateOrganizationForm')
 );
-const Onboarding = lazyLoad(() => import('../../apps/tutorials/Onboarding'));
+const OnboardingModal = lazyLoad(() => import('../../apps/tutorials/onboarding/OnboardingModal'));
 const LicensePromptModal = lazyLoad(
   () => import('../../apps/marketplace/components/LicensePromptModal'),
   'LicensePromptModal'
@@ -135,7 +135,7 @@ export class StartupModal extends React.PureComponent<Props, State> {
   openProjectOnboarding = () => {
     if (isSonarCloud()) {
       this.setState({ automatic: false, modal: undefined });
-      this.context.router.push(`/onboarding`);
+      this.context.router.push(`/projects/create`);
     } else {
       this.setState({ modal: ModalKey.projectOnboarding });
     }
@@ -189,7 +189,7 @@ export class StartupModal extends React.PureComponent<Props, State> {
         {this.props.children}
         {modal === ModalKey.license && <LicensePromptModal onClose={this.closeLicense} />}
         {modal === ModalKey.onboarding && (
-          <Onboarding
+          <OnboardingModal
             onClose={this.closeOnboarding}
             onOpenOrganizationOnboarding={this.openOrganizationOnboarding}
             onOpenProjectOnboarding={this.openProjectOnboarding}
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/ComponentContainer-test.tsx b/server/sonar-web/src/main/js/app/components/__tests__/ComponentContainer-test.tsx
index 83a4afb2822..e67564559f6 100644
--- a/server/sonar-web/src/main/js/app/components/__tests__/ComponentContainer-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/__tests__/ComponentContainer-test.tsx
@@ -36,25 +36,23 @@ import { STATUSES } from '../../../apps/background-tasks/constants';
 import { waitAndUpdate } from '../../../helpers/testUtils';
 
 jest.mock('../../../api/branches', () => ({
-  getBranches: jest.fn(() => Promise.resolve([])),
-  getPullRequests: jest.fn(() => Promise.resolve([]))
+  getBranches: jest.fn().mockResolvedValue([]),
+  getPullRequests: jest.fn().mockResolvedValue([])
 }));
 
 jest.mock('../../../api/ce', () => ({
-  getTasksForComponent: jest.fn(() => Promise.resolve({ queue: [] }))
+  getTasksForComponent: jest.fn().mockResolvedValue({ queue: [] })
 }));
 
 jest.mock('../../../api/components', () => ({
-  getComponentData: jest.fn(() => Promise.resolve({}))
+  getComponentData: jest.fn().mockResolvedValue({ analysisDate: '2018-07-30' })
 }));
 
 jest.mock('../../../api/nav', () => ({
-  getComponentNavigation: jest.fn(() =>
-    Promise.resolve({
-      breadcrumbs: [{ key: 'portfolioKey', name: 'portfolio', qualifier: 'VW' }],
-      key: 'portfolioKey'
-    })
-  )
+  getComponentNavigation: jest.fn().mockResolvedValue({
+    breadcrumbs: [{ key: 'portfolioKey', name: 'portfolio', qualifier: 'VW' }],
+    key: 'portfolioKey'
+  })
 }));
 
 // mock this, because some of its children are using redux store
@@ -90,14 +88,12 @@ it('changes component', () => {
 });
 
 it("loads branches for module's project", async () => {
-  (getComponentNavigation as jest.Mock<any>).mockImplementationOnce(() =>
-    Promise.resolve({
-      breadcrumbs: [
-        { key: 'projectKey', name: 'project', qualifier: 'TRK' },
-        { key: 'moduleKey', name: 'module', qualifier: 'BRC' }
-      ]
-    })
-  );
+  (getComponentNavigation as jest.Mock<any>).mockResolvedValueOnce({
+    breadcrumbs: [
+      { key: 'projectKey', name: 'project', qualifier: 'TRK' },
+      { key: 'moduleKey', name: 'module', qualifier: 'BRC' }
+    ]
+  });
 
   mount(
     <ComponentContainer fetchOrganizations={jest.fn()} location={{ query: { id: 'moduleKey' } }}>
@@ -149,9 +145,7 @@ it('updates branches on change', () => {
 });
 
 it('loads organization', async () => {
-  (getComponentData as jest.Mock<any>).mockImplementationOnce(() =>
-    Promise.resolve({ organization: 'org' })
-  );
+  (getComponentData as jest.Mock<any>).mockResolvedValueOnce({ organization: 'org' });
 
   const fetchOrganizations = jest.fn();
   mount(
@@ -166,9 +160,7 @@ it('loads organization', async () => {
 });
 
 it('fetches status', async () => {
-  (getComponentData as jest.Mock<any>).mockImplementationOnce(() =>
-    Promise.resolve({ organization: 'org' })
-  );
+  (getComponentData as jest.Mock<any>).mockResolvedValueOnce({ organization: 'org' });
 
   mount(
     <ComponentContainer fetchOrganizations={jest.fn()} location={{ query: { id: 'foo' } }}>
diff --git a/server/sonar-web/src/main/js/app/styles/components/alerts.css b/server/sonar-web/src/main/js/app/styles/components/alerts.css
index b965dced2d6..97457fe8dd6 100644
--- a/server/sonar-web/src/main/js/app/styles/components/alerts.css
+++ b/server/sonar-web/src/main/js/app/styles/components/alerts.css
@@ -51,7 +51,7 @@
 .alert-info {
   border-color: #bce8f1;
   background-color: #d9edf7;
-  color: #31708f;
+  color: #666666;
 }
 
 .alert-success {
diff --git a/server/sonar-web/src/main/js/app/styles/components/boxed-group.css b/server/sonar-web/src/main/js/app/styles/components/boxed-group.css
index e77b22430da..5a79c7f70e8 100644
--- a/server/sonar-web/src/main/js/app/styles/components/boxed-group.css
+++ b/server/sonar-web/src/main/js/app/styles/components/boxed-group.css
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 .boxed-group {
-  margin-bottom: 20px;
+  margin-bottom: calc(2.5 * var(--gridSize));
   border: 1px solid var(--barBorderColor);
   border-radius: 2px;
   background-color: #fff;
diff --git a/server/sonar-web/src/main/js/app/styles/components/page.css b/server/sonar-web/src/main/js/app/styles/components/page.css
index c493b82d22c..a18b282cc45 100644
--- a/server/sonar-web/src/main/js/app/styles/components/page.css
+++ b/server/sonar-web/src/main/js/app/styles/components/page.css
@@ -187,7 +187,6 @@
 }
 
 .page-sidebar-fixed {
-  width: 30%;
   min-width: 300px;
   flex-shrink: 0;
   padding-left: 40px;
@@ -228,17 +227,6 @@
   }
 }
 
-.page-sidebar-sticky .page-sidebar-sticky-inner .search-navigator-facets-list {
-  width: 260px;
-  margin-left: calc(50vw - 640px + 290px - 260px - 37px);
-}
-
-@media (max-width: 1335px) {
-  .page-sidebar-sticky .page-sidebar-sticky-inner .search-navigator-facets-list {
-    margin-left: 20px;
-  }
-}
-
 .layout-page {
   display: flex;
   align-items: stretch;
diff --git a/server/sonar-web/src/main/js/app/styles/init/misc.css b/server/sonar-web/src/main/js/app/styles/init/misc.css
index c0f7bd23abb..11bbc4bb9f7 100644
--- a/server/sonar-web/src/main/js/app/styles/init/misc.css
+++ b/server/sonar-web/src/main/js/app/styles/init/misc.css
@@ -293,6 +293,11 @@ td.big-spacer-top {
   flex-direction: row;
 }
 
+.display-flex-column {
+  display: flex !important;
+  flex-direction: column;
+}
+
 .display-flex-center {
   display: flex !important;
   align-items: center;
diff --git a/server/sonar-web/src/main/js/app/styles/sonarcloud.css b/server/sonar-web/src/main/js/app/styles/sonarcloud.css
index 66a4f2f0ba8..aa5ab408659 100644
--- a/server/sonar-web/src/main/js/app/styles/sonarcloud.css
+++ b/server/sonar-web/src/main/js/app/styles/sonarcloud.css
@@ -37,19 +37,22 @@
   display: flex;
   clear: left;
   margin-bottom: calc(3 * var(--gridSize));
-  box-shadow: 0 1px 0 var(--barBorderColor);
+  border-bottom: 1px solid var(--barBorderColor);
+  font-size: var(--mediumFontSize);
 }
 
 .sonarcloud .flex-tabs > li > a {
+  position: relative;
   display: block;
+  top: 1px;
   height: 100%;
   width: 100%;
   box-sizing: border-box;
   color: var(--secondFontColor);
   font-weight: 600;
   cursor: pointer;
-  padding-bottom: var(--gridSize);
-  border-bottom: 2px solid transparent;
+  padding-bottom: calc(1.5 * var(--gridSize));
+  border-bottom: 3px solid transparent;
   transition: color 0.2s ease;
 }
 
diff --git a/server/sonar-web/src/main/js/app/types.ts b/server/sonar-web/src/main/js/app/types.ts
index ea3be59fc5c..4b55b604c22 100644
--- a/server/sonar-web/src/main/js/app/types.ts
+++ b/server/sonar-web/src/main/js/app/types.ts
@@ -61,6 +61,8 @@ export interface Breadcrumb {
 }
 
 export interface Component extends LightComponent {
+  almId?: string;
+  almRepoUrl?: string;
   analysisDate?: string;
   breadcrumbs: Breadcrumb[];
   configuration?: ComponentConfiguration;