SONAR-13399 Deactivate project card when issue is indexing.

6 files changed, 105 insertions, 3 deletions

diff --git a/server/sonar-web/src/main/js/api/components.ts b/server/sonar-web/src/main/js/api/components.ts
index 2b7ddb74492..86cd1968ce1 100644
--- a/server/sonar-web/src/main/js/api/components.ts
+++ b/server/sonar-web/src/main/js/api/components.ts
@@ -216,6 +216,7 @@ export interface Component {
   tags: string[];
   visibility: T.Visibility;
   leakPeriodDate?: string;
+  needIssueSync?: boolean;
 }
 
 export interface Facet {
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.tsx
index b4a318602e5..a5b7f1407e7 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.tsx
@@ -73,7 +73,11 @@ function renderHeader(props: Props) {
         />
       )}
       <h2 className="project-card-name">
-        <Link to={getProjectUrl(project.key)}>{project.name}</Link>
+        {props.project.needIssueSync ? (
+          props.project.name
+        ) : (
+          <Link to={getProjectUrl(project.key)}>{props.project.name}</Link>
+        )}
       </h2>
       {project.analysisDate && <ProjectCardQualityGate status={project.measures['alert_status']} />}
       <div className="project-card-header-right">
@@ -172,13 +176,19 @@ function renderMeasures(props: Props, dates: Dates | undefined) {
 
 export default function ProjectCard(props: Props) {
   const { height, project, type } = props;
+  const { needIssueSync, key } = project;
 
   const dates = getDates(project, type);
 
   return (
     <div
-      className="boxed-group project-card big-padded display-flex-column display-flex-space-between"
-      data-key={project.key}
+      className={classNames(
+        'boxed-group project-card big-padded display-flex-column display-flex-space-between',
+        {
+          'need-issue-sync': needIssueSync
+        }
+      )}
+      data-key={key}
       style={{ height }}>
       <div>
         {renderHeader(props)}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCard-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCard-test.tsx
index 2425c5b5d75..96ce0408ee0 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCard-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCard-test.tsx
@@ -51,6 +51,10 @@ const PROJECT: Project = {
 const USER_LOGGED_OUT = mockCurrentUser();
 const USER_LOGGED_IN = mockLoggedInUser();
 
+it('should display correclty when project need issue synch', () => {
+  expect(shallowRender({ ...PROJECT, needIssueSync: true })).toMatchSnapshot();
+});
+
 it('should display analysis date (and not leak period) when defined', () => {
   expect(
     shallowRender(PROJECT)
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCard-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCard-test.tsx.snap
index cc5f4dce330..e8188017818 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCard-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCard-test.tsx.snap
@@ -233,6 +233,62 @@ exports[`should display configure analysis button for logged in user 1`] = `
 </div>
 `;
 
+exports[`should display correclty when project need issue synch 1`] = `
+<div
+  className="boxed-group project-card big-padded display-flex-column display-flex-space-between need-issue-sync"
+  data-key="foo"
+  style={
+    Object {
+      "height": 100,
+    }
+  }
+>
+  <div>
+    <div
+      className="project-card-header"
+    >
+      <h2
+        className="project-card-name"
+      >
+        Foo
+      </h2>
+      <ProjectCardQualityGate
+        status="OK"
+      />
+      <div
+        className="project-card-header-right"
+      >
+        <PrivacyBadgeContainer
+          className="spacer-left"
+          qualifier="TRK"
+          visibility="public"
+        />
+      </div>
+    </div>
+    <div
+      className="display-flex-center project-card-dates spacer-top"
+    >
+      <DateTimeFormatter
+        date="2017-01-01"
+      >
+        <Component />
+      </DateTimeFormatter>
+    </div>
+  </div>
+  <ProjectCardOverallMeasures
+    componentQualifier="TRK"
+    measures={
+      Object {
+        "alert_status": "OK",
+        "new_bugs": "12",
+        "reliability_rating": "1.0",
+        "sqale_rating": "1.0",
+      }
+    }
+  />
+</div>
+`;
+
 exports[`should display not analyzed yet 1`] = `
 <div
   className="boxed-group project-card big-padded display-flex-column display-flex-space-between"
diff --git a/server/sonar-web/src/main/js/apps/projects/styles.css b/server/sonar-web/src/main/js/apps/projects/styles.css
index 7cd2e2a6216..32f24fed987 100644
--- a/server/sonar-web/src/main/js/apps/projects/styles.css
+++ b/server/sonar-web/src/main/js/apps/projects/styles.css
@@ -295,3 +295,33 @@
   padding: calc(4 * var(--gridSize)) 0;
   text-align: center;
 }
+
+.need-issue-sync .rating,
+.need-issue-sync .size-rating,
+.need-issue-sync .duplications-rating:after,
+.need-issue-sync .level {
+  background-color: lightgray;
+}
+
+.need-issue-sync .project-card-dates path,
+.need-issue-sync .project-card-measure path,
+.need-issue-sync .project-card-leak-measures path {
+  fill: lightgray !important;
+}
+
+.need-issue-sync .duplications-rating {
+  border-color: lightgray;
+}
+
+.need-issue-sync * {
+  color: #adadad;
+}
+
+.need-issue-sync .project-card-header .icon-outline.is-filled path {
+  color: rgb(237, 125, 32);
+}
+
+.need-issue-sync .rating,
+.need-issue-sync .size-rating {
+  color: white !important;
+}
diff --git a/server/sonar-web/src/main/js/apps/projects/types.ts b/server/sonar-web/src/main/js/apps/projects/types.ts
index 566e8496b1d..1afbee949b5 100644
--- a/server/sonar-web/src/main/js/apps/projects/types.ts
+++ b/server/sonar-web/src/main/js/apps/projects/types.ts
@@ -31,6 +31,7 @@ export interface Project {
   qualifier: ComponentQualifier;
   tags: string[];
   visibility: T.Visibility;
+  needIssueSync?: boolean;
 }
 
 export interface Facet {