Merge pull request #12813 from strapi/fix/release-notification

Fix / Release notification stacking

packages/core/admin/admin/src/components/AuthenticatedApp/index.js

@@ -1,6 +1,12 @@
 import React, { useMemo, useState, useEffect, useRef } from 'react';
 //  TODO: DS add loader
-import { auth, LoadingIndicatorPage, AppInfosContext, useGuidedTour } from '@strapi/helper-plugin';
+import {
+  auth,
+  LoadingIndicatorPage,
+  AppInfosContext,
+  useGuidedTour,
+  useNotification,
+} from '@strapi/helper-plugin';
 import { useQueries } from 'react-query';
 import get from 'lodash/get';
 import packageJSON from '../../../../package.json';
@@ -20,6 +26,7 @@ const strapiVersion = packageJSON.version;
 
 const AuthenticatedApp = () => {
   const { setGuidedTourVisibility } = useGuidedTour();
+  const toggleNotification = useNotification();
   const setGuidedTourVisibilityRef = useRef(setGuidedTourVisibility);
   const userInfo = auth.getUserInfo();
   const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
@@ -34,7 +41,7 @@ const AuthenticatedApp = () => {
     { queryKey: 'app-infos', queryFn: fetchAppInfo },
     {
       queryKey: 'strapi-release',
-      queryFn: fetchStrapiLatestRelease,
+      queryFn: () => fetchStrapiLatestRelease(toggleNotification),
       enabled: showReleaseNotification,
       initialData: strapiVersion,
     },

packages/core/admin/admin/src/components/AuthenticatedApp/tests/index.test.js

@@ -21,6 +21,9 @@ jest.mock('@strapi/helper-plugin', () => ({
   useGuidedTour: jest.fn(() => ({
     setGuidedTourVisibility: jest.fn(),
   })),
+  useNotification: jest.fn(() => ({
+    toggleNotification: jest.fn(),
+  })),
 }));
 
 jest.mock('../utils/api', () => ({

packages/core/admin/admin/src/components/AuthenticatedApp/utils/api.js

@@ -1,15 +1,34 @@
 import axios from 'axios';
+import checkLatestStrapiVersion from './checkLatestStrapiVersion';
 import { axiosInstance } from '../../../core/utils';
 import packageJSON from '../../../../../package.json';
 
 const strapiVersion = packageJSON.version;
+const showUpdateNotif = !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'));
 
-const fetchStrapiLatestRelease = async () => {
+const fetchStrapiLatestRelease = async toggleNotification => {
   try {
     const {
       data: { tag_name },
     } = await axios.get('https://api.github.com/repos/strapi/strapi/releases/latest');
 
+    const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, tag_name);
+
+    if (shouldUpdateStrapi && showUpdateNotif) {
+      toggleNotification({
+        type: 'info',
+        message: { id: 'notification.version.update.message' },
+        link: {
+          url: `https://github.com/strapi/strapi/releases/tag/${tag_name}`,
+          label: {
+            id: 'notification.version.update.link',
+          },
+        },
+        blockTransition: true,
+        onClose: () => localStorage.setItem('STRAPI_UPDATE_NOTIF', true),
+      });
+    }
+
     return tag_name;
   } catch (err) {
     // Don't throw an error

packages/core/admin/admin/src/pages/Admin/index.js

@@ -12,7 +12,7 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import LeftMenu from '../../components/LeftMenu';
 import AppLayout from '../../layouts/AppLayout';
-import { useMenu, useReleaseNotification } from '../../hooks';
+import { useMenu } from '../../hooks';
 import Onboarding from './Onboarding';
 import { createRoute } from '../../utils';
 import GuidedTourModal from '../../components/GuidedTour/Modal';
@@ -48,8 +48,6 @@ const useTrackUsage = () => {
 };
 
 const Admin = () => {
-  // Show a notification when the current version of Strapi is not the latest one
-  useReleaseNotification();
   useTrackUsage();
   const { isLoading, generalSectionLinks, pluginsSectionLinks } = useMenu();
   const { menu } = useStrapiApp();