SONAR-12322 Project Mark/Unmark as favorite button is not refreshing properly when switching of project

4 files changed, 61 insertions, 20 deletions

diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json
index d31730a77ac..e909a0cfcad 100644
--- a/server/sonar-web/package.json
+++ b/server/sonar-web/package.json
@@ -35,7 +35,7 @@
     "regenerator-runtime": "0.13.2",
     "remark-custom-blocks": "2.3.0",
     "remark-slug": "5.1.0",
-    "sonar-ui-common": "0.0.19",
+    "sonar-ui-common": "0.0.20",
     "unist-util-visit": "1.4.0",
     "valid-url": "1.0.9",
     "whatwg-fetch": "2.0.4"
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 a75341bbe11..b070a9e04e2 100644
--- a/server/sonar-web/src/main/js/components/controls/Favorite.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Favorite.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import FavoriteBase from 'sonar-ui-common/components/controls/FavoriteBase';
+import FavoriteButton from 'sonar-ui-common/components/controls/FavoriteButton';
 import { addFavorite, removeFavorite } from '../../api/favorites';
 
 interface Props {
@@ -29,20 +29,62 @@ interface Props {
   handleFavorite?: (component: string, isFavorite: boolean) => void;
 }
 
-export default class Favorite extends React.PureComponent<Props> {
-  callback = (isFavorite: boolean) =>
-    this.props.handleFavorite && this.props.handleFavorite(this.props.component, isFavorite);
+interface State {
+  favorite: boolean;
+}
 
-  add = () => {
-    return addFavorite(this.props.component).then(() => this.callback(true));
-  };
+export default class Favorite extends React.PureComponent<Props, State> {
+  mounted = false;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      favorite: props.favorite
+    };
+  }
+
+  componentDidMount() {
+    this.mounted = true;
+  }
+
+  componentDidUpdate(_prevProps: Props, prevState: State) {
+    if (prevState.favorite !== this.props.favorite) {
+      this.setState({ favorite: this.props.favorite });
+    }
+  }
 
-  remove = () => {
-    return removeFavorite(this.props.component).then(() => this.callback(false));
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  toggleFavorite = () => {
+    const newFavorite = !this.state.favorite;
+    const apiMethod = newFavorite ? addFavorite : removeFavorite;
+
+    return apiMethod(this.props.component).then(() => {
+      if (this.mounted) {
+        this.setState({ favorite: newFavorite }, () => {
+          if (this.props.handleFavorite) {
+            this.props.handleFavorite(this.props.component, newFavorite);
+          }
+        });
+      }
+    });
   };
 
   render() {
-    const { component, handleFavorite, ...other } = this.props;
-    return <FavoriteBase {...other} addFavorite={this.add} removeFavorite={this.remove} />;
+    const { className, qualifier } = this.props;
+    const { favorite } = this.state;
+
+    return (
+      <FavoriteButton
+        className={className}
+        favorite={favorite}
+        qualifier={qualifier}
+        toggleFavorite={this.toggleFavorite}
+      />
+    );
   }
 }
+/*  */
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 21f3af2c980..8432d71ecd0 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
@@ -19,6 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import FavoriteButton from 'sonar-ui-common/components/controls/FavoriteButton';
 import Favorite from '../Favorite';
 
 jest.mock('../../../api/favorites', () => ({
@@ -33,15 +34,14 @@ it('renders', () => {
 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');
+  const favoriteBase = wrapper.find(FavoriteButton);
+  const toggleFavorite = favoriteBase.prop<Function>('toggleFavorite');
 
-  removeFavorite();
+  toggleFavorite();
   await new Promise(setImmediate);
   expect(handleFavorite).toHaveBeenCalledWith('foo', false);
 
-  addFavorite();
+  toggleFavorite();
   await new Promise(setImmediate);
   expect(handleFavorite).toHaveBeenCalledWith('foo', true);
 });
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Favorite-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Favorite-test.tsx.snap
index 592afbf9398..d3419ee44ae 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Favorite-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Favorite-test.tsx.snap
@@ -1,10 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders 1`] = `
-<FavoriteBase
-  addFavorite={[Function]}
+<FavoriteButton
   favorite={true}
   qualifier="TRK"
-  removeFavorite={[Function]}
+  toggleFavorite={[Function]}
 />
 `;