SONAR-15801 Highlight inaccessible projects in App definition

5 files changed, 46 insertions, 17 deletions

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 c9fd156cc2b..d04aecfc52a 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
@@ -157,6 +157,10 @@ th.hide-overflow {
   padding: var(--gridSize) !important;
 }
 
+.little-padded {
+  padding: calc(var(--gridSize) / 2) !important;
+}
+
 .big-padded {
   padding: calc(2 * var(--gridSize)) !important;
 }
@@ -601,8 +605,8 @@ th.huge-spacer-right {
 }
 
 .bg-warning {
-  background-color: var(--orange);
-  color: #fff;
+  background-color: var(--alertBackgroundWarning);
+  color: var(--alertTextWarning);
 }
 
 .bg-info {
diff --git a/server/sonar-web/src/main/js/apps/application-console/ApplicationProjects.tsx b/server/sonar-web/src/main/js/apps/application-console/ApplicationProjects.tsx
index d1cf0d1a682..c7ca29443b0 100644
--- a/server/sonar-web/src/main/js/apps/application-console/ApplicationProjects.tsx
+++ b/server/sonar-web/src/main/js/apps/application-console/ApplicationProjects.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 classNames from 'classnames';
 import { find, without } from 'lodash';
 import * as React from 'react';
 import {
@@ -28,7 +29,10 @@ import SelectList, {
   SelectListFilter,
   SelectListSearchParams
 } from '../../components/controls/SelectList';
+import Tooltip from '../../components/controls/Tooltip';
 import QualifierIcon from '../../components/icons/QualifierIcon';
+import WarningIcon from '../../components/icons/WarningIcon';
+import { translate } from '../../helpers/l10n';
 import { Application, ApplicationProject } from '../../types/application';
 
 interface Props {
@@ -185,8 +189,17 @@ export default class ApplicationProjects extends React.PureComponent<Props, Stat
     }
 
     return (
-      <div className="views-project-item display-flex-center">
-        <QualifierIcon className="spacer-right" qualifier="TRK" />
+      <div
+        className={classNames('views-project-item display-flex-center little-padded', {
+          'bg-warning': !project.accessible
+        })}>
+        {!project.accessible ? (
+          <Tooltip overlay={translate('application_console.project_inaccessible')}>
+            <WarningIcon className="spacer-right" />
+          </Tooltip>
+        ) : (
+          <QualifierIcon className="spacer-right" qualifier="TRK" />
+        )}
         <div>
           <div title={project.name}>{project.name}</div>
           <div className="note">{project.key}</div>
diff --git a/server/sonar-web/src/main/js/apps/application-console/__tests__/ApplicationProjects-test.tsx b/server/sonar-web/src/main/js/apps/application-console/__tests__/ApplicationProjects-test.tsx
index ded53e11350..3ea49a97ba9 100644
--- a/server/sonar-web/src/main/js/apps/application-console/__tests__/ApplicationProjects-test.tsx
+++ b/server/sonar-web/src/main/js/apps/application-console/__tests__/ApplicationProjects-test.tsx
@@ -33,9 +33,16 @@ jest.mock('../../../api/application', () => ({
   getApplicationProjects: jest.fn().mockResolvedValue({
     paging: { pageIndex: 1, pageSize: 3, total: 55 },
     projects: [
-      { key: 'test1', name: 'test1', selected: false },
-      { key: 'test2', name: 'test2', selected: false, disabled: true, includedIn: 'foo' },
-      { key: 'test3', name: 'test3', selected: true }
+      { key: 'test1', name: 'test1', accessible: true, selected: false },
+      {
+        key: 'test2',
+        name: 'test2',
+        accessible: false,
+        selected: false,
+        disabled: true,
+        includedIn: 'foo'
+      },
+      { key: 'test3', name: 'test3', accessible: true, selected: true }
     ]
   }),
   addProjectToApplication: jest.fn().mockResolvedValue({}),
@@ -53,8 +60,9 @@ it('should render correctly in application mode', async () => {
   await waitAndUpdate(wrapper);
 
   expect(wrapper).toMatchSnapshot();
-  expect(wrapper.instance().renderElement('test1')).toMatchSnapshot();
-  expect(wrapper.instance().renderElement('test2')).toMatchSnapshot();
+  expect(wrapper.instance().renderElement('test1')).toMatchSnapshot('render project: basic');
+  expect(wrapper.instance().renderElement('test2')).toMatchSnapshot('render project: inaccessible');
+  expect(wrapper.instance().renderElement('cheeseburger')).toMatchInlineSnapshot(`""`);
 
   expect(getApplicationProjects).toHaveBeenCalledWith(
     expect.objectContaining({
diff --git a/server/sonar-web/src/main/js/apps/application-console/__tests__/__snapshots__/ApplicationProjects-test.tsx.snap b/server/sonar-web/src/main/js/apps/application-console/__tests__/__snapshots__/ApplicationProjects-test.tsx.snap
index caedd4c5d95..cfd64c1000d 100644
--- a/server/sonar-web/src/main/js/apps/application-console/__tests__/__snapshots__/ApplicationProjects-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/application-console/__tests__/__snapshots__/ApplicationProjects-test.tsx.snap
@@ -25,9 +25,9 @@ exports[`should render correctly in application mode 1`] = `
 />
 `;
 
-exports[`should render correctly in application mode 2`] = `
+exports[`should render correctly in application mode: render project: basic 1`] = `
 <div
-  className="views-project-item display-flex-center"
+  className="views-project-item display-flex-center little-padded"
 >
   <QualifierIcon
     className="spacer-right"
@@ -48,14 +48,17 @@ exports[`should render correctly in application mode 2`] = `
 </div>
 `;
 
-exports[`should render correctly in application mode 3`] = `
+exports[`should render correctly in application mode: render project: inaccessible 1`] = `
 <div
-  className="views-project-item display-flex-center"
+  className="views-project-item display-flex-center little-padded bg-warning"
 >
-  <QualifierIcon
-    className="spacer-right"
-    qualifier="TRK"
-  />
+  <Tooltip
+    overlay="application_console.project_inaccessible"
+  >
+    <WarningIcon
+      className="spacer-right"
+    />
+  </Tooltip>
   <div>
     <div
       title="test2"
diff --git a/server/sonar-web/src/main/js/types/application.ts b/server/sonar-web/src/main/js/types/application.ts
index f919f75f5e9..0269a3c9047 100644
--- a/server/sonar-web/src/main/js/types/application.ts
+++ b/server/sonar-web/src/main/js/types/application.ts
@@ -42,4 +42,5 @@ export interface ApplicationProject {
   key: string;
   name: string;
   selected?: boolean;
+  accessible?: boolean;
 }