SONAR-10963 Improve privacy badges of projects and organization

9 files changed, 98 insertions, 36 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx
index b6a3c63c2b4..912bf578736 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx
@@ -26,20 +26,19 @@ import Favorite from '../../../components/controls/Favorite';
 import DateFromNow from '../../../components/intl/DateFromNow';
 import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import TagsList from '../../../components/tags/TagsList';
-import PrivateBadge from '../../../components/common/PrivateBadge';
+import PrivacyBadgeContainer from '../../../components/common/PrivacyBadgeContainer';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { Project } from '../types';
+import { Organization } from '../../../app/types';
 
 interface Props {
   height: number;
-  organization?: { key: string };
+  organization: Organization | undefined;
   project: Project;
 }
 
 export default function ProjectCardLeak({ height, organization, project }: Props) {
   const { measures } = project;
-
-  const isPrivate = project.visibility === 'private';
   const hasTags = project.tags.length > 0;
 
   return (
@@ -60,23 +59,30 @@ export default function ProjectCardLeak({ height, organization, project }: Props
             )}
             <Link to={{ pathname: '/dashboard', query: { id: project.key } }}>{project.name}</Link>
           </h2>
-          {project.analysisDate && <ProjectCardQualityGate status={measures!['alert_status']} />}
+          {project.analysisDate && <ProjectCardQualityGate status={measures['alert_status']} />}
           <div className="project-card-header-right">
-            {isPrivate && <PrivateBadge className="spacer-left" qualifier="TRK" />}
+            <PrivacyBadgeContainer
+              className="spacer-left"
+              organization={organization || project.organization}
+              qualifier="TRK"
+              tooltipProps={{ projectKey: project.key }}
+              visibility={project.visibility}
+            />
+
             {hasTags && <TagsList className="spacer-left note" tags={project.tags} />}
           </div>
         </div>
         {project.analysisDate &&
           project.leakPeriodDate && (
             <div className="project-card-dates note text-right pull-right">
-              <DateFromNow date={project.leakPeriodDate!}>
+              <DateFromNow date={project.leakPeriodDate}>
                 {fromNow => (
                   <span className="project-card-leak-date pull-right">
                     {translateWithParameters('projects.leak_period_x', fromNow)}
                   </span>
                 )}
               </DateFromNow>
-              <DateTimeFormatter date={project.analysisDate!}>
+              <DateTimeFormatter date={project.analysisDate}>
                 {formattedDate => (
                   <span>
                     {translateWithParameters('projects.last_analysis_on_x', formattedDate)}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx
index f653d14975d..859572fb80a 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx
@@ -25,20 +25,20 @@ import ProjectCardOrganizationContainer from './ProjectCardOrganizationContainer
 import Favorite from '../../../components/controls/Favorite';
 import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import TagsList from '../../../components/tags/TagsList';
-import PrivateBadge from '../../../components/common/PrivateBadge';
+import PrivacyBadgeContainer from '../../../components/common/PrivacyBadgeContainer';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { Project } from '../types';
+import { Organization } from '../../../app/types';
 
 interface Props {
   height: number;
-  organization?: { key: string };
+  organization: Organization | undefined;
   project: Project;
 }
 
 export default function ProjectCardOverall({ height, organization, project }: Props) {
   const { measures } = project;
 
-  const isPrivate = project.visibility === 'private';
   const hasTags = project.tags.length > 0;
 
   return (
@@ -61,7 +61,13 @@ export default function ProjectCardOverall({ height, organization, project }: Pr
           </h2>
           {project.analysisDate && <ProjectCardQualityGate status={measures['alert_status']} />}
           <div className="project-card-header-right">
-            {isPrivate && <PrivateBadge className="spacer-left" qualifier="TRK" />}
+            <PrivacyBadgeContainer
+              className="spacer-left"
+              organization={organization || project.organization}
+              qualifier="TRK"
+              tooltipProps={{ projectKey: project.key }}
+              visibility={project.visibility}
+            />
             {hasTags && <TagsList className="spacer-left note" tags={project.tags} />}
           </div>
         </div>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardLeak-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardLeak-test.tsx
index 3a25da57bf3..c2982771b7c 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardLeak-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardLeak-test.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import ProjectCardLeak from '../ProjectCardLeak';
+import { Visibility } from '../../../../app/types';
 
 const MEASURES = {
   alert_status: 'OK',
@@ -36,11 +37,11 @@ const PROJECT = {
   name: 'Foo',
   organization: { key: 'org', name: 'org' },
   tags: [],
-  visibility: 'public'
+  visibility: Visibility.Public
 };
 
 it('should display analysis date and leak start date', () => {
-  const card = shallow(<ProjectCardLeak height={100} project={PROJECT} />);
+  const card = shallow(<ProjectCardLeak height={100} organization={undefined} project={PROJECT} />);
   expect(card.find('.project-card-dates').exists()).toBeTruthy();
   expect(card.find('.project-card-dates').find('DateFromNow')).toHaveLength(1);
   expect(card.find('.project-card-dates').find('DateTimeFormatter')).toHaveLength(1);
@@ -48,28 +49,30 @@ it('should display analysis date and leak start date', () => {
 
 it('should not display analysis date or leak start date', () => {
   const project = { ...PROJECT, analysisDate: undefined };
-  const card = shallow(<ProjectCardLeak height={100} project={project} />);
+  const card = shallow(<ProjectCardLeak height={100} organization={undefined} project={project} />);
   expect(card.find('.project-card-dates').exists()).toBeFalsy();
 });
 
 it('should display tags', () => {
   const project = { ...PROJECT, tags: ['foo', 'bar'] };
   expect(
-    shallow(<ProjectCardLeak height={100} project={project} />)
+    shallow(<ProjectCardLeak height={100} organization={undefined} project={project} />)
       .find('TagsList')
       .exists()
   ).toBeTruthy();
 });
 
-it('should private badge', () => {
-  const project = { ...PROJECT, visibility: 'private' };
+it('should display private badge', () => {
+  const project = { ...PROJECT, visibility: Visibility.Private };
   expect(
-    shallow(<ProjectCardLeak height={100} project={project} />)
-      .find('PrivateBadge')
+    shallow(<ProjectCardLeak height={100} organization={undefined} project={project} />)
+      .find('Connect(PrivacyBadge)')
       .exists()
   ).toBeTruthy();
 });
 
 it('should display the leak measures and quality gate', () => {
-  expect(shallow(<ProjectCardLeak height={100} project={PROJECT} />)).toMatchSnapshot();
+  expect(
+    shallow(<ProjectCardLeak height={100} organization={undefined} project={PROJECT} />)
+  ).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverall-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverall-test.tsx
index fc3e58bbd80..4ed5e6753ab 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverall-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverall-test.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import ProjectCardOverall from '../ProjectCardOverall';
+import { Visibility } from '../../../../app/types';
 
 const MEASURES = {
   alert_status: 'OK',
@@ -35,17 +36,23 @@ const PROJECT = {
   name: 'Foo',
   organization: { key: 'org', name: 'org' },
   tags: [],
-  visibility: 'public'
+  visibility: Visibility.Public
 };
 
 it('should display analysis date (and not leak period) when defined', () => {
   expect(
-    shallow(<ProjectCardOverall height={100} project={PROJECT} />)
+    shallow(<ProjectCardOverall height={100} organization={undefined} project={PROJECT} />)
       .find('.project-card-dates')
       .exists()
   ).toBeTruthy();
   expect(
-    shallow(<ProjectCardOverall height={100} project={{ ...PROJECT, analysisDate: undefined }} />)
+    shallow(
+      <ProjectCardOverall
+        height={100}
+        organization={undefined}
+        project={{ ...PROJECT, analysisDate: undefined }}
+      />
+    )
       .find('.project-card-dates')
       .exists()
   ).toBeFalsy();
@@ -54,7 +61,7 @@ it('should display analysis date (and not leak period) when defined', () => {
 it('should not display the quality gate', () => {
   const project = { ...PROJECT, analysisDate: undefined };
   expect(
-    shallow(<ProjectCardOverall height={100} project={project} />)
+    shallow(<ProjectCardOverall height={100} organization={undefined} project={project} />)
       .find('ProjectCardOverallQualityGate')
       .exists()
   ).toBeFalsy();
@@ -63,21 +70,23 @@ it('should not display the quality gate', () => {
 it('should display tags', () => {
   const project = { ...PROJECT, tags: ['foo', 'bar'] };
   expect(
-    shallow(<ProjectCardOverall height={100} project={project} />)
+    shallow(<ProjectCardOverall height={100} organization={undefined} project={project} />)
       .find('TagsList')
       .exists()
   ).toBeTruthy();
 });
 
-it('should private badge', () => {
-  const project = { ...PROJECT, visibility: 'private' };
+it('should display private badge', () => {
+  const project = { ...PROJECT, visibility: Visibility.Private };
   expect(
-    shallow(<ProjectCardOverall height={100} project={project} />)
-      .find('PrivateBadge')
+    shallow(<ProjectCardOverall height={100} organization={undefined} project={project} />)
+      .find('Connect(PrivacyBadge)')
       .exists()
   ).toBeTruthy();
 });
 
 it('should display the overall measures and quality gate', () => {
-  expect(shallow(<ProjectCardOverall height={100} project={PROJECT} />)).toMatchSnapshot();
+  expect(
+    shallow(<ProjectCardOverall height={100} organization={undefined} project={PROJECT} />)
+  ).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeak-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeak-test.tsx.snap
index fa106ed2ac6..1c7f8335013 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeak-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeak-test.tsx.snap
@@ -47,7 +47,24 @@ exports[`should display the leak measures and quality gate 1`] = `
       />
       <div
         className="project-card-header-right"
-      />
+      >
+        <Connect(PrivacyBadge)
+          className="spacer-left"
+          organization={
+            Object {
+              "key": "org",
+              "name": "org",
+            }
+          }
+          qualifier="TRK"
+          tooltipProps={
+            Object {
+              "projectKey": "foo",
+            }
+          }
+          visibility="public"
+        />
+      </div>
     </div>
     <div
       className="project-card-dates note text-right pull-right"
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverall-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverall-test.tsx.snap
index 263d0bf5fd0..039ca9bd89c 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverall-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverall-test.tsx.snap
@@ -47,7 +47,24 @@ exports[`should display the overall measures and quality gate 1`] = `
       />
       <div
         className="project-card-header-right"
-      />
+      >
+        <Connect(PrivacyBadge)
+          className="spacer-left"
+          organization={
+            Object {
+              "key": "org",
+              "name": "org",
+            }
+          }
+          qualifier="TRK"
+          tooltipProps={
+            Object {
+              "projectKey": "foo",
+            }
+          }
+          visibility="public"
+        />
+      </div>
     </div>
     <div
       className="project-card-dates note text-right"
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 2d339fb7d4c..e997ca3eae6 100644
--- a/server/sonar-web/src/main/js/apps/projects/types.ts
+++ b/server/sonar-web/src/main/js/apps/projects/types.ts
@@ -17,6 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { Visibility } from '../../app/types';
+
 export interface Project {
   analysisDate?: string;
   isFavorite?: boolean;
@@ -26,7 +28,7 @@ export interface Project {
   name: string;
   organization?: { key: string; name: string };
   tags: string[];
-  visibility: string;
+  visibility: Visibility;
 }
 
 export interface Facet {
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Risk-test.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Risk-test.tsx
index 688230948db..23d9bb2830c 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Risk-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/Risk-test.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import Risk from '../Risk';
+import { Visibility } from '../../../../app/types';
 
 it('renders', () => {
   const project1 = {
@@ -27,7 +28,7 @@ it('renders', () => {
     measures: { complexity: '17.2', coverage: '53.5', ncloc: '1734' },
     name: 'Foo',
     tags: [],
-    visibility: 'public'
+    visibility: Visibility.Public
   };
   expect(
     shallow(<Risk displayOrganizations={false} helpText="foobar" projects={[project1]} />)
diff --git a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/SimpleBubbleChart-test.tsx b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/SimpleBubbleChart-test.tsx
index 4224630f25d..5d0acd4b3c3 100644
--- a/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/SimpleBubbleChart-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/visualizations/__tests__/SimpleBubbleChart-test.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import SimpleBubbleChart from '../SimpleBubbleChart';
+import { Visibility } from '../../../../app/types';
 
 it('renders', () => {
   const project1 = {
@@ -28,7 +29,7 @@ it('renders', () => {
     measures: { complexity: '17.2', coverage: '53.5', ncloc: '1734', security_rating: '2' },
     name: 'Foo',
     tags: [],
-    visibility: 'public'
+    visibility: Visibility.Public
   };
   expect(
     shallow(