chore(helper-plugin)!: move AppInfo to admin

packages/core/admin/admin/src/components/LeftMenu.tsx

@@ -11,7 +11,7 @@ import {
   NavSections,
   NavUser,
 } from '@strapi/design-system/v2';
-import { useAppInfo, usePersistentState } from '@strapi/helper-plugin';
+import { usePersistentState } from '@strapi/helper-plugin';
 import { Exit, Write, Lock } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { NavLink as RouterNavLink, useLocation } from 'react-router-dom';
@@ -21,6 +21,7 @@ import { useAuth } from '../features/Auth';
 import { useConfiguration } from '../features/Configuration';
 import { useTracking } from '../features/Tracking';
 import { Menu } from '../hooks/useMenu';
+import { getDisplayName } from '../utils/users';
 
 const LinkUserWrapper = styled(Box)`
   width: ${150 / 16}rem;
@@ -66,11 +67,12 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) =
     logos: { menu },
   } = useConfiguration('LeftMenu');
   const [condensed, setCondensed] = usePersistentState('navbar-condensed', false);
-  const { userDisplayName } = useAppInfo();
+  const user = useAuth('AuthenticatedApp', (state) => state.user);
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const { pathname } = useLocation();
   const logout = useAuth('Logout', (state) => state.logout);
+  const userDisplayName = getDisplayName(user, formatMessage);
 
   const initials = userDisplayName
     .split(' ')

packages/core/admin/admin/src/components/NpsSurvey.tsx

@@ -13,13 +13,14 @@ import {
   FieldInput,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { useAppInfo, usePersistentState } from '@strapi/helper-plugin';
+import { usePersistentState } from '@strapi/helper-plugin';
 import { Cross } from '@strapi/icons';
 import { Formik, Form } from 'formik';
 import { useIntl } from 'react-intl';
 import styled, { useTheme } from 'styled-components';
 import * as yup from 'yup';
 
+import { useAppInfo } from '../features/AppInfo';
 import { useAuth } from '../features/Auth';
 import { useNotification } from '../features/Notifications';
 
@@ -136,7 +137,8 @@ const NpsSurvey = () => {
   const { npsSurveySettings, setNpsSurveySettings } = useNpsSurveySettings();
   const [isFeedbackResponse, setIsFeedbackResponse] = React.useState(false);
   const { toggleNotification } = useNotification();
-  const { currentEnvironment, strapiVersion } = useAppInfo();
+  const currentEnvironment = useAppInfo('NpsSurvey', (state) => state.currentEnvironment);
+  const strapiVersion = useAppInfo('NpsSurvey', (state) => state.strapiVersion);
 
   interface NpsSurveyMutationBody {
     email: string;

packages/core/admin/admin/src/components/Onboarding.tsx

@@ -11,18 +11,18 @@ import {
   Typography,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { useAppInfo } from '@strapi/helper-plugin';
 import { Cross, Message, Play, Question, Book, PaperPlane } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
 import onboardingPreview from '../assets/images/onboarding-preview.png';
+import { useAppInfo } from '../features/AppInfo';
 
 const Onboarding = () => {
   const triggerRef = React.useRef<HTMLButtonElement>(null!);
   const [isOpen, setIsOpen] = React.useState(false);
   const { formatMessage } = useIntl();
-  const { communityEdition } = useAppInfo();
+  const communityEdition = useAppInfo('Onboarding', (state) => state.communityEdition);
 
   const handlePopoverVisibility = () => {
     setIsOpen((prev) => !prev);

packages/core/admin/admin/src/components/tests/Onboarding.test.tsx

@@ -1,11 +1,11 @@
-import { useAppInfo } from '@strapi/helper-plugin';
 import { render } from '@tests/utils';
 
+import { useAppInfo } from '../../features/AppInfo';
 import { Onboarding } from '../Onboarding';
 
-jest.mock('@strapi/helper-plugin', () => ({
-  ...jest.requireActual('@strapi/helper-plugin'),
-  useAppInfo: jest.fn(() => ({ communityEdition: true })),
+jest.mock('../../features/AppInfo', () => ({
+  ...jest.requireActual('../../features/AppInfo'),
+  useAppInfo: jest.fn((name, getter) => getter({ communityEdition: true })),
 }));
 
 describe('Onboarding', () => {
@@ -38,7 +38,7 @@ describe('Onboarding', () => {
 
   test('should display support link for EE edition', async () => {
     // @ts-expect-error - mock
-    useAppInfo.mockImplementation(() => ({ communityEdition: false }));
+    useAppInfo.mockImplementation((name, getter) => getter({ communityEdition: false }));
     const { getByRole, user } = render(<Onboarding />);
 
     await user.click(getByRole('button', { name: /open help menu/i }));

packages/core/admin/admin/src/features/AppInfo.tsx

@@ -0,0 +1,21 @@
+import { createContext } from '../components/Context';
+
+interface AppInfoContextValue {
+  autoReload?: boolean;
+  communityEdition?: boolean;
+  currentEnvironment?: string;
+  dependencies?: Record<string, string>;
+  latestStrapiReleaseTag?: string;
+  nodeVersion?: string;
+  projectId?: string | null;
+  shouldUpdateStrapi?: boolean;
+  strapiVersion?: string | null;
+  useYarn?: boolean;
+  userId?: string;
+}
+
+const [AppInfoProvider, useAppInfo] = createContext<AppInfoContextValue>('AppInfo', {});
+
+export { AppInfoProvider, useAppInfo };
+
+export type { AppInfoContextValue };

packages/core/admin/admin/src/features/Tracking.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
-import { useAppInfo } from '@strapi/helper-plugin';
 import axios, { AxiosResponse } from 'axios';
 
 import { useInitQuery, useTelemetryPropertiesQuery } from '../services/admin';
 
+import { useAppInfo } from './AppInfo';
 import { useAuth } from './Auth';
 
 export interface TelemetryProperties {
@@ -399,7 +399,7 @@ export interface UseTrackingReturn {
  */
 const useTracking = (): UseTrackingReturn => {
   const { uuid, telemetryProperties } = React.useContext(TrackingContext);
-  const { userId } = useAppInfo();
+  const userId = useAppInfo('useTracking', (state) => state.userId);
   const trackUsage = React.useCallback(
     async <TEvent extends TrackingEvent>(
       event: TEvent['name'],

packages/core/admin/admin/src/features/tests/Tracking.test.tsx

@@ -1,8 +1,8 @@
-import { AppInfoProvider } from '@strapi/helper-plugin';
 import { renderHook } from '@tests/utils';
 import axios from 'axios';
 
 import { useInitQuery } from '../../services/admin';
+import { AppInfoProvider } from '../AppInfo';
 import { TrackingProvider, useTracking } from '../Tracking';
 
 jest.mock('axios', () => ({
@@ -33,8 +33,6 @@ const setup = () =>
           currentEnvironment="testing"
           userId="someTestUserId"
           shouldUpdateStrapi={false}
-          setUserDisplayName={jest.fn()}
-          userDisplayName="someTestUserDisplayName"
         >
           {children}
         </AppInfoProvider>

packages/core/admin/admin/src/hooks/useSettingsMenu.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 
-import { hasPermissions, useRBACProvider, useAppInfo } from '@strapi/helper-plugin';
+import { hasPermissions, useRBACProvider } from '@strapi/helper-plugin';
 import sortBy from 'lodash/sortBy';
 import { useSelector } from 'react-redux';
 
 import { SETTINGS_LINKS_CE, SettingsMenuLink } from '../constants';
+import { useAppInfo } from '../features/AppInfo';
 import { useStrapiApp } from '../features/StrapiApp';
 import { selectAdminPermissions } from '../selectors';
 import { PermissionMap } from '../types/permissions';
@@ -63,7 +64,7 @@ const useSettingsMenu = (): {
     menu: [],
   });
   const { allPermissions: userPermissions } = useRBACProvider();
-  const { shouldUpdateStrapi } = useAppInfo();
+  const shouldUpdateStrapi = useAppInfo('useSettingsMenu', (state) => state.shouldUpdateStrapi);
   const settings = useStrapiApp('useSettingsMenu', (state) => state.settings);
   const permissions = useSelector(selectAdminPermissions);
 

packages/core/admin/admin/src/index.ts

@@ -36,6 +36,7 @@ export {
   type NotificationConfig,
   NotificationsProvider,
 } from './features/Notifications';
+export { useAppInfo, type AppInfoContextValue } from './features/AppInfo';
 
 /**
  * Types

packages/core/admin/admin/src/layouts/AuthenticatedLayout.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import { Box, Flex, SkipToContent } from '@strapi/design-system';
-import { AppInfoProvider } from '@strapi/helper-plugin';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
@@ -20,6 +19,7 @@ import { PluginsInitializer } from '../components/PluginsInitializer';
 import { PrivateRoute } from '../components/PrivateRoute';
 import { RBACProvider } from '../components/RBACProvider';
 import { useIsHistoryRoute } from '../content-manager/history/routes';
+import { AppInfoProvider } from '../features/AppInfo';
 import { useAuth } from '../features/Auth';
 import { useConfiguration } from '../features/Configuration';
 import { useTracking } from '../features/Tracking';
@@ -28,7 +28,6 @@ import { useOnce } from '../hooks/useOnce';
 import { useInformationQuery } from '../services/admin';
 import { useGetMyPermissionsQuery } from '../services/auth';
 import { hashAdminUserEmail } from '../utils/hashAdminUserEmail';
-import { getDisplayName } from '../utils/users';
 
 const strapiVersion = packageJSON.version;
 
@@ -134,9 +133,7 @@ const AdminLayout = () => {
       {...appInfo}
       userId={userId}
       latestStrapiReleaseTag={tagName}
-      setUserDisplayName={() => {}}
       shouldUpdateStrapi={checkLatestStrapiVersion(strapiVersion, tagName)}
-      userDisplayName={getDisplayName(userInfo, formatMessage) ?? ''}
     >
       <RBACProvider permissions={permissions ?? []} refetchPermissions={refetchPermissions}>
         <NpsSurvey />

packages/core/admin/admin/src/pages/HomePage.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import { Box, Button, Flex, Grid, GridItem, Layout, Main, Typography } from '@strapi/design-system';
 import { Link, LinkButton } from '@strapi/design-system/v2';
-import { useAppInfo } from '@strapi/helper-plugin';
 import {
   ArrowRight,
   CodeSquare,
@@ -26,6 +25,7 @@ import { ContentBox } from '../components/ContentBox';
 import { GuidedTourHomepage } from '../components/GuidedTour/Homepage';
 import { useGuidedTour } from '../components/GuidedTour/Provider';
 import { Page } from '../components/PageHelpers';
+import { useAppInfo } from '../features/AppInfo';
 import { useTracking } from '../features/Tracking';
 import { useContentTypes } from '../hooks/useContentTypes';
 import { useEnterprise } from '../hooks/useEnterprise';
@@ -315,7 +315,7 @@ const CloudIconWrapper = styled(Flex)`
 
 const SocialLinks = () => {
   const { formatMessage } = useIntl();
-  const { communityEdition } = useAppInfo();
+  const communityEdition = useAppInfo('SocialLinks', (state) => state.communityEdition);
 
   const socialLinksExtended = [
     ...SOCIAL_LINKS,

packages/core/admin/admin/src/pages/Marketplace/MarketplacePage.tsx

@@ -14,7 +14,7 @@ import {
   TabPanels,
   Tabs,
 } from '@strapi/design-system';
-import { useAppInfo, useFocusWhenNavigate, useQueryParams } from '@strapi/helper-plugin';
+import { useFocusWhenNavigate, useQueryParams } from '@strapi/helper-plugin';
 import { ExternalLink, GlassesSquare } from '@strapi/icons';
 import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
@@ -23,6 +23,7 @@ import { ContentBox } from '../../components/ContentBox';
 import { Page } from '../../components/PageHelpers';
 import { Pagination } from '../../components/Pagination';
 import { useTypedSelector } from '../../core/store/hooks';
+import { useAppInfo } from '../../features/AppInfo';
 import { useNotification } from '../../features/Notifications';
 import { useTracking } from '../../features/Tracking';
 import { useDebounce } from '../../hooks/useDebounce';
@@ -60,7 +61,12 @@ const MarketplacePage = () => {
   const [{ query }, setQuery] = useQueryParams<MarketplacePageQuery>();
   const debouncedSearch = useDebounce(query?.search, 500) || '';
 
-  const { autoReload: isInDevelopmentMode, dependencies, useYarn, strapiVersion } = useAppInfo();
+  const {
+    autoReload: isInDevelopmentMode,
+    dependencies,
+    useYarn,
+    strapiVersion,
+  } = useAppInfo('MarketplacePage', (state) => state);
   const isOnline = useNavigatorOnline();
 
   const npmPackageType = query?.npmPackageType || 'plugin';

packages/core/admin/admin/src/pages/Marketplace/components/NpmPackageCard.tsx

@@ -1,13 +1,14 @@
 import { Box, Flex, Icon, Tooltip, Typography, Divider, Button } from '@strapi/design-system';
 import { LinkButton } from '@strapi/design-system/v2';
-import { AppInfoContextValue, useClipboard } from '@strapi/helper-plugin';
+import { useClipboard } from '@strapi/helper-plugin';
 import { CheckCircle, ExternalLink, Download, Github, Star, Check, Duplicate } from '@strapi/icons';
 import pluralize from 'pluralize';
 import { useIntl } from 'react-intl';
 import * as semver from 'semver';
 import styled from 'styled-components';
 
 import StrapiLogo from '../../../assets/images/logo-strapi-2022.svg';
+import { AppInfoContextValue } from '../../../features/AppInfo';
 import { useNotification } from '../../../features/Notifications';
 import { useTracking } from '../../../features/Tracking';
 

packages/core/admin/admin/src/pages/Marketplace/components/NpmPackagesGrid.tsx

@@ -1,10 +1,10 @@
 import { Box, Flex, Grid, GridItem, GridLayout, Icon, Typography } from '@strapi/design-system';
-import { AppInfoContextValue } from '@strapi/helper-plugin';
 import { EmptyDocuments } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
 import { Page } from '../../../components/PageHelpers';
+import { AppInfoContextValue } from '../../../features/AppInfo';
 
 import { NpmPackageCard, NpmPackageCardProps } from './NpmPackageCard';
 

packages/core/admin/admin/src/pages/Marketplace/tests/MarketplacePage.test.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable testing-library/no-node-access */
-import { useAppInfo } from '@strapi/helper-plugin';
+
 import { screen, within, fireEvent } from '@testing-library/react';
 import { render as renderRTL, waitFor } from '@tests/utils';
 
+import { useAppInfo } from '../../../features/AppInfo';
 import { useTracking } from '../../../features/Tracking';
 import { MarketplacePage } from '../MarketplacePage';
 
@@ -12,8 +13,8 @@ jest.mock('../../../features/Tracking', () => ({
   useTracking: jest.fn(() => ({ trackUsage: jest.fn() })),
 }));
 
-jest.mock('@strapi/helper-plugin', () => ({
-  ...jest.requireActual('@strapi/helper-plugin'),
+jest.mock('../../../features/AppInfo', () => ({
+  ...jest.requireActual('../../../features/AppInfo'),
   useAppInfo: jest.fn(() => ({
     autoReload: true,
     dependencies: {

packages/core/admin/admin/src/pages/Marketplace/tests/MarketplacePlugins.test.tsx

@@ -9,17 +9,6 @@ jest.mock('../hooks/useNavigatorOnline');
 jest.mock('../../../hooks/useDebounce', () => ({
   useDebounce: jest.fn((value) => value),
 }));
-jest.mock('@strapi/helper-plugin', () => ({
-  ...jest.requireActual('@strapi/helper-plugin'),
-  useAppInfo: jest.fn(() => ({
-    autoReload: true,
-    dependencies: {
-      '@strapi/plugin-documentation': '4.2.0',
-      '@strapi/provider-upload-cloudinary': '4.2.0',
-    },
-    useYarn: true,
-  })),
-}));
 
 const waitForReload = async () => {
   await waitFor(() => expect(screen.queryByText('Loading content.')).not.toBeInTheDocument());

packages/core/admin/admin/src/pages/Marketplace/tests/MarketplaceProviders.test.tsx

@@ -12,20 +12,6 @@ jest.mock('../../../hooks/useDebounce', () => ({
   useDebounce: jest.fn((value) => value),
 }));
 jest.mock('../hooks/useNavigatorOnline');
-/**
- * TODO: remove this mock.
- */
-jest.mock('@strapi/helper-plugin', () => ({
-  ...jest.requireActual('@strapi/helper-plugin'),
-  useAppInfo: jest.fn(() => ({
-    autoReload: true,
-    dependencies: {
-      '@strapi/plugin-documentation': '4.2.0',
-      '@strapi/provider-upload-cloudinary': '4.2.0',
-    },
-    useYarn: true,
-  })),
-}));
 
 const LocationDisplay = () => {
   const location = useLocation();