From: Siegfried Ehret <49895321+siegfried-ehret-sonarsource@users.noreply.github.com>
Date: Mon, 27 May 2019 08:40:59 +0000 (+0200)
Subject: SONARCLOUD-669 Fix favorite star behavior
X-Git-Tag: 7.8~144
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=75a9d16ede11214ca31d8f75bff8c2247918376c;p=sonarqube.git

SONARCLOUD-669 Fix favorite star behavior
---

diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
index 8c52c9be55c..70b8d4657a1 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
@@ -172,6 +172,18 @@ export class AllProjects extends React.PureComponent<Props, State> {
     this.props.router.push({ pathname: this.props.location.pathname });
   };
 
+  handleFavorite = (key: string, isFavorite: boolean) => {
+    this.setState(({ projects }) => {
+      if (!projects) {
+        return null;
+      }
+
+      return {
+        projects: projects.map(p => (p.key === key ? { ...p, isFavorite } : p))
+      };
+    });
+  };
+
   handlePerspectiveChange = ({ view, visualization }: { view: string; visualization?: string }) => {
     const { storageOptionsSuffix } = this.props;
     const query: {
@@ -317,6 +329,7 @@ export class AllProjects extends React.PureComponent<Props, State> {
               <ProjectsList
                 cardType={this.getView()}
                 currentUser={this.props.currentUser}
+                handleFavorite={this.handleFavorite}
                 isFavorite={this.props.isFavorite}
                 isFiltered={hasFilterParams(this.state.query)}
                 organization={this.props.organization}
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 034f91cf3cc..c72bc780b65 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
@@ -23,15 +23,18 @@ import ProjectCardOverall from './ProjectCardOverall';
 import { Project } from '../types';
 
 interface Props {
+  handleFavorite: (component: string, isFavorite: boolean) => void;
   height: number;
   organization: T.Organization | undefined;
   project: Project;
   type?: string;
 }
 
-export default function ProjectCard(props: Props) {
-  if (props.type === 'leak') {
-    return <ProjectCardLeak {...props} />;
+export default class ProjectCard extends React.PureComponent<Props> {
+  render() {
+    if (this.props.type === 'leak') {
+      return <ProjectCardLeak {...this.props} />;
+    }
+    return <ProjectCardOverall {...this.props} />;
   }
-  return <ProjectCardOverall {...props} />;
 }
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 cf0bce1ac04..beb338949ff 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
@@ -33,81 +33,90 @@ import { formatDuration } from '../utils';
 import { getProjectUrl } from '../../../helpers/urls';
 
 interface Props {
+  handleFavorite: (component: string, isFavorite: boolean) => void;
   height: number;
   organization: T.Organization | undefined;
   project: Project;
 }
 
-export default function ProjectCardLeak({ height, organization, project }: Props) {
-  const { measures } = project;
-  const hasTags = project.tags.length > 0;
-  const periodMs = project.leakPeriodDate ? difference(Date.now(), project.leakPeriodDate) : 0;
+export default class ProjectCardLeak extends React.PureComponent<Props> {
+  render() {
+    const { handleFavorite, height, organization, project } = this.props;
+    const { measures } = project;
+    const hasTags = project.tags.length > 0;
+    const periodMs = project.leakPeriodDate ? difference(Date.now(), project.leakPeriodDate) : 0;
 
-  return (
-    <div className="boxed-group project-card" data-key={project.key} style={{ height }}>
-      <div className="boxed-group-header clearfix">
-        <div className="project-card-header">
-          {project.isFavorite != null && (
-            <Favorite
-              className="spacer-right"
-              component={project.key}
-              favorite={project.isFavorite}
-              qualifier="TRK"
-            />
-          )}
-          <h2 className="project-card-name">
-            {!organization && (
-              <ProjectCardOrganizationContainer organization={project.organization} />
+    return (
+      <div className="boxed-group project-card" data-key={project.key} style={{ height }}>
+        <div className="boxed-group-header clearfix">
+          <div className="project-card-header">
+            {project.isFavorite != null && (
+              <Favorite
+                className="spacer-right"
+                component={project.key}
+                favorite={project.isFavorite}
+                handleFavorite={handleFavorite}
+                qualifier="TRK"
+              />
             )}
-            <Link to={{ pathname: '/dashboard', query: { id: project.key } }}>{project.name}</Link>
-          </h2>
-          {project.analysisDate && <ProjectCardQualityGate status={measures['alert_status']} />}
-          <div className="project-card-header-right">
-            <PrivacyBadgeContainer
-              className="spacer-left"
-              organization={organization || project.organization}
-              qualifier="TRK"
-              tooltipProps={{ projectKey: project.key }}
-              visibility={project.visibility}
-            />
+            <h2 className="project-card-name">
+              {!organization && (
+                <ProjectCardOrganizationContainer organization={project.organization} />
+              )}
+              <Link to={{ pathname: '/dashboard', query: { id: project.key } }}>
+                {project.name}
+              </Link>
+            </h2>
+            {project.analysisDate && <ProjectCardQualityGate status={measures['alert_status']} />}
+            <div className="project-card-header-right">
+              <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} />}
+              {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">
+              <span className="project-card-leak-date pull-right">
+                {translateWithParameters('projects.new_code_period_x', formatDuration(periodMs))}
+              </span>
+              <DateTimeFormatter date={project.analysisDate}>
+                {formattedDate => (
+                  <span>
+                    {translateWithParameters('projects.last_analysis_on_x', formattedDate)}
+                  </span>
+                )}
+              </DateTimeFormatter>
+            </div>
+          )}
         </div>
-        {project.analysisDate && project.leakPeriodDate && (
-          <div className="project-card-dates note text-right pull-right">
-            <span className="project-card-leak-date pull-right">
-              {translateWithParameters('projects.new_code_period_x', formatDuration(periodMs))}
-            </span>
-            <DateTimeFormatter date={project.analysisDate}>
-              {formattedDate => (
-                <span>{translateWithParameters('projects.last_analysis_on_x', formattedDate)}</span>
+
+        {project.analysisDate && project.leakPeriodDate ? (
+          <div className="boxed-group-inner">
+            <ProjectCardLeakMeasures measures={measures} />
+          </div>
+        ) : (
+          <div className="boxed-group-inner">
+            <div className="project-card-not-analyzed">
+              <span className="note">
+                {project.analysisDate
+                  ? translate('projects.no_new_code_period')
+                  : translate('projects.not_analyzed')}
+              </span>
+              {!project.analysisDate && (
+                <Link className="button spacer-left" to={getProjectUrl(project.key)}>
+                  {translate('projects.configure_analysis')}
+                </Link>
               )}
-            </DateTimeFormatter>
+            </div>
           </div>
         )}
       </div>
-
-      {project.analysisDate && project.leakPeriodDate ? (
-        <div className="boxed-group-inner">
-          <ProjectCardLeakMeasures measures={measures} />
-        </div>
-      ) : (
-        <div className="boxed-group-inner">
-          <div className="project-card-not-analyzed">
-            <span className="note">
-              {project.analysisDate
-                ? translate('projects.no_new_code_period')
-                : translate('projects.not_analyzed')}
-            </span>
-            {!project.analysisDate && (
-              <Link className="button spacer-left" to={getProjectUrl(project.key)}>
-                {translate('projects.configure_analysis')}
-              </Link>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
+    );
+  }
 }
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 c494faa25b4..214c6970ffb 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
@@ -31,73 +31,78 @@ import { Project } from '../types';
 import { getProjectUrl } from '../../../helpers/urls';
 
 interface Props {
+  handleFavorite: (component: string, isFavorite: boolean) => void;
   height: number;
   organization: T.Organization | undefined;
   project: Project;
 }
 
-export default function ProjectCardOverall({ height, organization, project }: Props) {
-  const { measures } = project;
+export default class ProjectCardOverall extends React.PureComponent<Props> {
+  render() {
+    const { handleFavorite, height, organization, project } = this.props;
+    const { measures } = project;
 
-  const hasTags = project.tags.length > 0;
+    const hasTags = project.tags.length > 0;
 
-  return (
-    <div className="boxed-group project-card" data-key={project.key} style={{ height }}>
-      <div className="boxed-group-header clearfix">
-        <div className="project-card-header">
-          {project.isFavorite !== undefined && (
-            <Favorite
-              className="spacer-right"
-              component={project.key}
-              favorite={project.isFavorite}
-              qualifier="TRK"
-            />
-          )}
-          <h2 className="project-card-name">
-            {!organization && (
-              <ProjectCardOrganizationContainer organization={project.organization} />
+    return (
+      <div className="boxed-group project-card" data-key={project.key} style={{ height }}>
+        <div className="boxed-group-header clearfix">
+          <div className="project-card-header">
+            {project.isFavorite !== undefined && (
+              <Favorite
+                className="spacer-right"
+                component={project.key}
+                favorite={project.isFavorite}
+                handleFavorite={handleFavorite}
+                qualifier="TRK"
+              />
             )}
-            <Link to={getProjectUrl(project.key)}>{project.name}</Link>
-          </h2>
-          {project.analysisDate && <ProjectCardQualityGate status={measures['alert_status']} />}
-          <div className="project-card-header-right">
-            <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} />}
+            <h2 className="project-card-name">
+              {!organization && (
+                <ProjectCardOrganizationContainer organization={project.organization} />
+              )}
+              <Link to={getProjectUrl(project.key)}>{project.name}</Link>
+            </h2>
+            {project.analysisDate && <ProjectCardQualityGate status={measures['alert_status']} />}
+            <div className="project-card-header-right">
+              <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 && (
+            <div className="project-card-dates note text-right">
+              <DateTimeFormatter date={project.analysisDate}>
+                {formattedDate => (
+                  <span className="big-spacer-left">
+                    {translateWithParameters('projects.last_analysis_on_x', formattedDate)}
+                  </span>
+                )}
+              </DateTimeFormatter>
+            </div>
+          )}
         </div>
-        {project.analysisDate && (
-          <div className="project-card-dates note text-right">
-            <DateTimeFormatter date={project.analysisDate}>
-              {formattedDate => (
-                <span className="big-spacer-left">
-                  {translateWithParameters('projects.last_analysis_on_x', formattedDate)}
-                </span>
-              )}
-            </DateTimeFormatter>
+
+        {project.analysisDate ? (
+          <div className="boxed-group-inner">
+            {<ProjectCardOverallMeasures measures={measures} />}
+          </div>
+        ) : (
+          <div className="boxed-group-inner">
+            <div className="project-card-not-analyzed">
+              <span className="note">{translate('projects.not_analyzed')}</span>
+              <Link className="button spacer-left" to={getProjectUrl(project.key)}>
+                {translate('projects.configure_analysis')}
+              </Link>
+            </div>
           </div>
         )}
       </div>
-
-      {project.analysisDate ? (
-        <div className="boxed-group-inner">
-          {<ProjectCardOverallMeasures measures={measures} />}
-        </div>
-      ) : (
-        <div className="boxed-group-inner">
-          <div className="project-card-not-analyzed">
-            <span className="note">{translate('projects.not_analyzed')}</span>
-            <Link className="button spacer-left" to={getProjectUrl(project.key)}>
-              {translate('projects.configure_analysis')}
-            </Link>
-          </div>
-        </div>
-      )}
-    </div>
-  );
+    );
+  }
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx
index ac05a3a5862..7225fdedf85 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx
@@ -33,6 +33,7 @@ import { OnboardingContext } from '../../../app/components/OnboardingContext';
 interface Props {
   cardType?: string;
   currentUser: T.CurrentUser;
+  handleFavorite: (component: string, isFavorite: boolean) => void;
   isFavorite: boolean;
   isFiltered: boolean;
   organization: T.Organization | undefined;
@@ -75,6 +76,7 @@ export default class ProjectsList extends React.PureComponent<Props> {
     return (
       <div key={key} style={{ ...style, height }}>
         <ProjectCard
+          handleFavorite={this.props.handleFavorite}
           height={height}
           key={project.key}
           organization={this.props.organization}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/AllProjects-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/AllProjects-test.tsx
index fac7ae2096c..51910cc0d84 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/AllProjects-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/AllProjects-test.tsx
@@ -188,12 +188,20 @@ it('renders correctly empty organization', async () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+it('handles favorite projects', () => {
+  const wrapper = shallowRender();
+  expect(wrapper.state('projects')).toMatchSnapshot();
+
+  wrapper.instance().handleFavorite('foo', true);
+  expect(wrapper.state('projects')).toMatchSnapshot();
+});
+
 function shallowRender(
   props: Partial<AllProjects['props']> = {},
   push = jest.fn(),
   replace = jest.fn()
 ) {
-  const wrapper = shallow(
+  const wrapper = shallow<AllProjects>(
     <AllProjects
       currentUser={{ isLoggedIn: true }}
       isFavorite={false}
@@ -205,7 +213,7 @@ function shallowRender(
   );
   wrapper.setState({
     loading: false,
-    projects: [{ key: 'foo', measures: {}, name: 'Foo' }],
+    projects: [{ key: 'foo', measures: {}, name: 'Foo', tags: [], visibility: 'public' }],
     total: 0
   });
   return wrapper;
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
new file mode 100644
index 00000000000..e5ef944be49
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCard-test.tsx
@@ -0,0 +1,67 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { Project } from '../../types';
+import ProjectCard from '../ProjectCard';
+
+const ORGANIZATION = { key: 'org', name: 'org' };
+
+const MEASURES = {
+  alert_status: 'OK',
+  reliability_rating: '1.0',
+  sqale_rating: '1.0',
+  new_bugs: '12'
+};
+
+const PROJECT: Project = {
+  analysisDate: '2017-01-01',
+  leakPeriodDate: '2016-12-01',
+  key: 'foo',
+  measures: MEASURES,
+  name: 'Foo',
+  organization: { key: 'org', name: 'org' },
+  tags: [],
+  visibility: 'public'
+};
+
+it('should show <ProjectCardOverall/> by default', () => {
+  const wrapper = shallowRender();
+  expect(wrapper.find('ProjectCardOverall')).toBeTruthy();
+  expect(wrapper.find('ProjectCardLeak')).toBeTruthy();
+});
+
+it('should show <ProjectCardLeak/> when asked', () => {
+  const wrapper = shallowRender();
+  expect(wrapper.find('ProjectCardLeak')).toBeTruthy();
+  expect(wrapper.find('ProjectCardOverall')).toBeTruthy();
+});
+
+function shallowRender(type?: string) {
+  return shallow(
+    <ProjectCard
+      handleFavorite={jest.fn}
+      height={200}
+      organization={ORGANIZATION}
+      project={PROJECT}
+      type={type}
+    />
+  );
+}
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 7e455598b3c..59df2a1b6e5 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
@@ -46,7 +46,7 @@ const PROJECT: Project = {
 };
 
 it('should display analysis date and leak start date', () => {
-  const card = shallow(<ProjectCardLeak height={100} organization={undefined} project={PROJECT} />);
+  const card = shallowRender(PROJECT);
   expect(card.find('.project-card-dates').exists()).toBeTruthy();
   expect(card.find('.project-card-dates').find('.project-card-leak-date')).toHaveLength(1);
   expect(card.find('.project-card-dates').find('DateTimeFormatter')).toHaveLength(1);
@@ -54,14 +54,14 @@ 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} organization={undefined} project={project} />);
+  const card = shallowRender(project);
   expect(card.find('.project-card-dates').exists()).toBeFalsy();
 });
 
 it('should display tags', () => {
   const project = { ...PROJECT, tags: ['foo', 'bar'] };
   expect(
-    shallow(<ProjectCardLeak height={100} organization={undefined} project={project} />)
+    shallowRender(project)
       .find('TagsList')
       .exists()
   ).toBeTruthy();
@@ -70,26 +70,27 @@ it('should display tags', () => {
 it('should display private badge', () => {
   const project: Project = { ...PROJECT, visibility: 'private' };
   expect(
-    shallow(<ProjectCardLeak height={100} organization={undefined} project={project} />)
+    shallowRender(project)
       .find('Connect(PrivacyBadge)')
       .exists()
   ).toBeTruthy();
 });
 
 it('should display the leak measures and quality gate', () => {
-  expect(
-    shallow(<ProjectCardLeak height={100} organization={undefined} project={PROJECT} />)
-  ).toMatchSnapshot();
+  expect(shallowRender(PROJECT)).toMatchSnapshot();
 });
 
 it('should display not analyzed yet', () => {
-  expect(
-    shallow(
-      <ProjectCardLeak
-        height={100}
-        organization={undefined}
-        project={{ ...PROJECT, analysisDate: undefined }}
-      />
-    )
-  ).toMatchSnapshot();
+  expect(shallowRender({ ...PROJECT, analysisDate: undefined })).toMatchSnapshot();
 });
+
+function shallowRender(project: Project) {
+  return shallow(
+    <ProjectCardLeak
+      handleFavorite={jest.fn()}
+      height={100}
+      organization={undefined}
+      project={project}
+    />
+  );
+}
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 bc3eef5411d..827d89e4aef 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
@@ -41,18 +41,12 @@ const PROJECT: Project = {
 
 it('should display analysis date (and not leak period) when defined', () => {
   expect(
-    shallow(<ProjectCardOverall height={100} organization={undefined} project={PROJECT} />)
+    shallowRender(PROJECT)
       .find('.project-card-dates')
       .exists()
   ).toBeTruthy();
   expect(
-    shallow(
-      <ProjectCardOverall
-        height={100}
-        organization={undefined}
-        project={{ ...PROJECT, analysisDate: undefined }}
-      />
-    )
+    shallowRender({ ...PROJECT, analysisDate: undefined })
       .find('.project-card-dates')
       .exists()
   ).toBeFalsy();
@@ -61,7 +55,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} organization={undefined} project={project} />)
+    shallowRender(project)
       .find('ProjectCardOverallQualityGate')
       .exists()
   ).toBeFalsy();
@@ -70,7 +64,7 @@ it('should not display the quality gate', () => {
 it('should display tags', () => {
   const project = { ...PROJECT, tags: ['foo', 'bar'] };
   expect(
-    shallow(<ProjectCardOverall height={100} organization={undefined} project={project} />)
+    shallowRender(project)
       .find('TagsList')
       .exists()
   ).toBeTruthy();
@@ -79,26 +73,27 @@ it('should display tags', () => {
 it('should display private badge', () => {
   const project: Project = { ...PROJECT, visibility: 'private' };
   expect(
-    shallow(<ProjectCardOverall height={100} organization={undefined} project={project} />)
+    shallowRender(project)
       .find('Connect(PrivacyBadge)')
       .exists()
   ).toBeTruthy();
 });
 
 it('should display the overall measures and quality gate', () => {
-  expect(
-    shallow(<ProjectCardOverall height={100} organization={undefined} project={PROJECT} />)
-  ).toMatchSnapshot();
+  expect(shallowRender(PROJECT)).toMatchSnapshot();
 });
 
 it('should display not analyzed yet', () => {
-  expect(
-    shallow(
-      <ProjectCardOverall
-        height={100}
-        organization={undefined}
-        project={{ ...PROJECT, analysisDate: undefined }}
-      />
-    )
-  ).toMatchSnapshot();
+  expect(shallowRender({ ...PROJECT, analysisDate: undefined })).toMatchSnapshot();
 });
+
+function shallowRender(project: Project) {
+  return shallow(
+    <ProjectCardOverall
+      handleFavorite={jest.fn()}
+      height={100}
+      organization={undefined}
+      project={project}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/AllProjects-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/AllProjects-test.tsx.snap
index d41f0b2801d..28726c14b96 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/AllProjects-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/AllProjects-test.tsx.snap
@@ -1,5 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`handles favorite projects 1`] = `
+Array [
+  Object {
+    "key": "foo",
+    "measures": Object {},
+    "name": "Foo",
+    "tags": Array [],
+    "visibility": "public",
+  },
+]
+`;
+
+exports[`handles favorite projects 2`] = `
+Array [
+  Object {
+    "isFavorite": true,
+    "key": "foo",
+    "measures": Object {},
+    "name": "Foo",
+    "tags": Array [],
+    "visibility": "public",
+  },
+]
+`;
+
 exports[`renders 1`] = `
 <div
   className="layout-page projects-page"
@@ -50,6 +75,8 @@ exports[`renders 1`] = `
                   "key": "foo",
                   "measures": Object {},
                   "name": "Foo",
+                  "tags": Array [],
+                  "visibility": "public",
                 },
               ]
             }
@@ -98,6 +125,7 @@ exports[`renders 1`] = `
               "isLoggedIn": true,
             }
           }
+          handleFavorite={[Function]}
           isFavorite={false}
           isFiltered={false}
           projects={
@@ -106,6 +134,8 @@ exports[`renders 1`] = `
                 "key": "foo",
                 "measures": Object {},
                 "name": "Foo",
+                "tags": Array [],
+                "visibility": "public",
               },
             ]
           }
@@ -195,6 +225,8 @@ exports[`renders 2`] = `
                   "key": "foo",
                   "measures": Object {},
                   "name": "Foo",
+                  "tags": Array [],
+                  "visibility": "public",
                 },
               ]
             }
@@ -226,6 +258,8 @@ exports[`renders 2`] = `
                 "key": "foo",
                 "measures": Object {},
                 "name": "Foo",
+                "tags": Array [],
+                "visibility": "public",
               },
             ]
           }
@@ -391,6 +425,7 @@ exports[`renders correctly empty organization 3`] = `
               "isLoggedIn": true,
             }
           }
+          handleFavorite={[Function]}
           isFavorite={false}
           isFiltered={false}
           organization={
diff --git a/server/sonar-web/src/main/js/components/controls/Favorite.tsx b/server/sonar-web/src/main/js/components/controls/Favorite.tsx
index db7765c2f65..59e3028ac15 100644
--- a/server/sonar-web/src/main/js/components/controls/Favorite.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Favorite.tsx
@@ -26,14 +26,23 @@ interface Props {
   component: string;
   favorite: boolean;
   qualifier: string;
+  handleFavorite?: (component: string, isFavorite: boolean) => void;
 }
 
-export default function Favorite({ component, ...other }: Props) {
-  return (
-    <FavoriteBase
-      {...other}
-      addFavorite={() => addFavorite(component)}
-      removeFavorite={() => removeFavorite(component)}
-    />
-  );
+export default class Favorite extends React.PureComponent<Props> {
+  callback = (isFavorite: boolean) =>
+    this.props.handleFavorite && this.props.handleFavorite(this.props.component, isFavorite);
+
+  add = () => {
+    return addFavorite(this.props.component).then(() => this.callback(true));
+  };
+
+  remove = () => {
+    return removeFavorite(this.props.component).then(() => this.callback(false));
+  };
+
+  render() {
+    const { component, handleFavorite, ...other } = this.props;
+    return <FavoriteBase {...other} addFavorite={this.add} removeFavorite={this.remove} />;
+  }
 }
diff --git a/server/sonar-web/src/main/js/components/controls/FavoriteBase.tsx b/server/sonar-web/src/main/js/components/controls/FavoriteBase.tsx
index 0566fbdfd85..10865ee16c7 100644
--- a/server/sonar-web/src/main/js/components/controls/FavoriteBase.tsx
+++ b/server/sonar-web/src/main/js/components/controls/FavoriteBase.tsx
@@ -47,12 +47,6 @@ export default class FavoriteBase extends React.PureComponent<Props, State> {
     this.mounted = true;
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.favorite !== this.props.favorite || nextProps.favorite !== this.state.favorite) {
-      this.setState({ favorite: nextProps.favorite });
-    }
-  }
-
   componentWillUnmount() {
     this.mounted = false;
   }
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/Favorite-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/Favorite-test.tsx
index c57716e3871..009f15f6e30 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/Favorite-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/Favorite-test.tsx
@@ -21,6 +21,33 @@ import * as React from 'react';
 import { shallow } from 'enzyme';
 import Favorite from '../Favorite';
 
+jest.mock('../../../api/favorites', () => ({
+  addFavorite: jest.fn(() => Promise.resolve()),
+  removeFavorite: jest.fn(() => Promise.resolve())
+}));
+
 it('renders', () => {
-  expect(shallow(<Favorite component="foo" favorite={true} qualifier="TRK" />)).toMatchSnapshot();
+  expect(shallowRender()).toMatchSnapshot();
+});
+
+it('calls handleFavorite when given', async () => {
+  const handleFavorite = jest.fn();
+  const wrapper = shallowRender(handleFavorite);
+  const favoriteBase = wrapper.find('FavoriteBase');
+  const addFavorite = favoriteBase.prop<Function>('addFavorite');
+  const removeFavorite = favoriteBase.prop<Function>('removeFavorite');
+
+  removeFavorite();
+  await new Promise(setImmediate);
+  expect(handleFavorite).toHaveBeenCalledWith('foo', false);
+
+  addFavorite();
+  await new Promise(setImmediate);
+  expect(handleFavorite).toHaveBeenCalledWith('foo', true);
 });
+
+function shallowRender(handleFavorite?: () => void) {
+  return shallow(
+    <Favorite component="foo" favorite={true} handleFavorite={handleFavorite} qualifier="TRK" />
+  );
+}