chore(admin): remove react-helmet

package.json

@@ -95,7 +95,6 @@
     "@types/prettier": "2.7.3",
     "@types/react": "18.2.66",
     "@types/react-dom": "18.2.22",
-    "@types/react-helmet": "6.1.11",
     "@types/styled-components": "5.1.34",
     "@typescript-eslint/eslint-plugin": "6.7.3",
     "@typescript-eslint/parser": "6.7.3",

packages/core/admin/admin/src/App.tsx

@@ -3,9 +3,8 @@
  * App.js
  *
  */
-import { Suspense } from 'react';
+import { Suspense, useEffect } from 'react';
 
-import { Helmet } from 'react-helmet';
 import { Outlet } from 'react-router-dom';
 
 import { Page } from './components/PageHelpers';
@@ -21,12 +20,17 @@ interface AppProps {
 }
 
 const App = ({ strapi, store }: AppProps) => {
+  useEffect(() => {
+    const language = localStorage.getItem(LANGUAGE_LOCAL_STORAGE_KEY) || 'en';
+
+    if (language) {
+      document.documentElement.lang = language;
+    }
+  }, []);
+
   return (
     <Providers strapi={strapi} store={store}>
       <Suspense fallback={<Page.Loading />}>
-        <Helmet
-          htmlAttributes={{ lang: localStorage.getItem(LANGUAGE_LOCAL_STORAGE_KEY) || 'en' }}
-        />
         <Outlet />
       </Suspense>
     </Providers>

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

@@ -231,13 +231,34 @@ const Protect = ({ permissions = [], children }: ProtectProps) => {
   return typeof children === 'function' ? children({ permissions: matchingPermissions }) : children;
 };
 
+/* -------------------------------------------------------------------------------------------------
+ * Title
+ * -----------------------------------------------------------------------------------------------*/
+export interface TitleProps {
+  children: string;
+}
+
+/**
+ * @public
+ * @description This component takes the children (must be a string) and sets
+ * it as the title of the html.
+ */
+const Title = ({ children: title }: TitleProps) => {
+  React.useEffect(() => {
+    document.title = `${title} | Strapi`;
+  }, [title]);
+
+  return null;
+};
+
 const Page = {
   Error,
   Loading,
   NoPermissions,
   Protect,
   NoData,
   Main: PageMain,
+  Title,
 };
 
 export { Page };

packages/core/admin/admin/src/content-manager/history/pages/History.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { Box, Flex, Main } from '@strapi/design-system';
 import { Contracts } from '@strapi/plugin-content-manager/_internal/shared';
 import { stringify } from 'qs';
-import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { Navigate, useParams } from 'react-router-dom';
 
@@ -151,8 +150,8 @@ const HistoryPage = () => {
 
   return (
     <>
-      <Helmet
-        title={formatMessage(
+      <Page.Title>
+        {formatMessage(
           {
             id: 'content-manager.history.page-title',
             defaultMessage: '{contentType} history',
@@ -161,7 +160,7 @@ const HistoryPage = () => {
             contentType: displayName,
           }
         )}
-      />
+      </Page.Title>
       <HistoryProvider
         contentType={slug}
         id={documentId}

packages/core/admin/admin/src/content-manager/layout.tsx

@@ -4,7 +4,6 @@ import * as React from 'react';
 import { AnyAction } from '@reduxjs/toolkit';
 import { Layout as DSLayout } from '@strapi/design-system';
 import { produce } from 'immer';
-import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { Navigate, Outlet, useLocation, useMatch } from 'react-router-dom';
 
@@ -53,12 +52,12 @@ const Layout = () => {
   if (isLoading) {
     return (
       <>
-        <Helmet
-          title={formatMessage({
+        <Page.Title>
+          {formatMessage({
             id: getTranslation('plugin.name'),
             defaultMessage: 'Content Manager',
           })}
-        />
+        </Page.Title>
         <Page.Loading />
       </>
     );
@@ -94,12 +93,12 @@ const Layout = () => {
 
   return (
     <>
-      <Helmet
-        title={formatMessage({
+      <Page.Title>
+        {formatMessage({
           id: getTranslation('plugin.name'),
           defaultMessage: 'Content Manager',
         })}
-      />
+      </Page.Title>
       {isHistoryRoute ? (
         <Outlet />
       ) : (

packages/core/admin/admin/src/content-manager/pages/ComponentConfigurationPage.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
@@ -204,7 +203,7 @@ const ComponentConfigurationPage = () => {
 
   return (
     <>
-      <Helmet title={`Configure ${editLayout.settings.displayName} Edit View | Strapi`} />
+      <Page.Title>{`Configure ${editLayout.settings.displayName} Edit View`}</Page.Title>
       <ConfigurationForm
         onSubmit={handleSubmit}
         attributes={schema.attributes}

packages/core/admin/admin/src/content-manager/pages/EditConfigurationPage.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 
 import { Page } from '../../components/PageHelpers';
@@ -144,7 +143,7 @@ const EditConfigurationPage = () => {
 
   return (
     <>
-      <Helmet title={`Configure ${edit.settings.displayName} Edit View | Strapi`} />
+      <Page.Title>{`Configure ${edit.settings.displayName} Edit View`}</Page.Title>
       <ConfigurationForm
         onSubmit={handleSubmit}
         attributes={schema.attributes}

packages/core/admin/admin/src/content-manager/pages/EditView/EditViewPage.tsx

@@ -11,7 +11,6 @@ import {
   TabPanels,
   Tabs,
 } from '@strapi/design-system';
-import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useLocation, useParams } from 'react-router-dom';
 import styled from 'styled-components';
@@ -164,7 +163,7 @@ const EditViewPage = () => {
 
   return (
     <Main paddingLeft={10} paddingRight={10}>
-      <Helmet title={`${documentTitle} | Strapi`} />
+      <Page.Title>{`${documentTitle}`}</Page.Title>
       <Form
         disabled={hasDraftAndPublished && status === 'published'}
         initialValues={initialValues}

packages/core/admin/admin/src/content-manager/pages/ListConfiguration/ListConfigurationPage.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import { ContentLayout, Divider, Flex, Layout, Main } from '@strapi/design-system';
-import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { Navigate } from 'react-router-dom';
 
@@ -121,7 +120,7 @@ const ListConfiguration = () => {
 
   return (
     <Layout>
-      <Helmet title={`Configure ${list.settings.displayName} List View | Strapi`} />
+      <Page.Title>{`Configure ${list.settings.displayName} List View`}</Page.Title>
       <Main>
         <Form initialValues={initialValues} onSubmit={handleSubmit} method="PUT">
           <Header

packages/core/admin/admin/src/content-manager/pages/ListView/ListViewPage.tsx

@@ -13,7 +13,6 @@ import {
 import { Plus } from '@strapi/icons';
 import isEqual from 'lodash/isEqual';
 import { stringify } from 'qs';
-import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useNavigate, Link as ReactRouterLink } from 'react-router-dom';
 import styled from 'styled-components';
@@ -240,7 +239,7 @@ const ListViewPage = () => {
 
   return (
     <Page.Main>
-      <Helmet title={`${contentTypeTitle} | Strapi`} />
+      <Page.Title>{`${contentTypeTitle}`}</Page.Title>
       <HeaderLayout
         primaryAction={canCreate ? <CreateButton /> : null}
         subtitle={formatMessage(

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

@@ -16,7 +16,6 @@ import {
   Strapi,
   Twitter,
 } from '@strapi/icons';
-import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
@@ -67,12 +66,12 @@ const HomePageCE = () => {
 
   return (
     <Layout>
-      <Helmet
-        title={formatMessage({
-          id: 'HomePage.helmet.title',
+      <Page.Title>
+        {formatMessage({
+          id: 'HomePage.head.title',
           defaultMessage: 'Homepage',
         })}
-      />
+      </Page.Title>
       <Main>
         <LogoContainer>
           <img alt="" aria-hidden src={cornerOrnamentPath} />

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

@@ -13,7 +13,6 @@ import {
   Typography,
   useNotifyAT,
 } from '@strapi/design-system';
-import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 
@@ -133,12 +132,12 @@ const ProtectedInstalledPluginsPage = () => {
 
   return (
     <Page.Protect permissions={permissions.marketplace?.main}>
-      <Helmet
-        title={formatMessage({
+      <Page.Title>
+        {formatMessage({
           id: 'global.plugins',
           defaultMessage: 'Plugins',
         })}
-      />
+      </Page.Title>
       <InstalledPluginsPage />
     </Page.Protect>
   );

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

@@ -14,7 +14,6 @@ import {
   Tabs,
 } from '@strapi/design-system';
 import { ExternalLink, GlassesSquare } from '@strapi/icons';
-import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 
 import { ContentBox } from '../../components/ContentBox';
@@ -166,12 +165,12 @@ const MarketplacePage = () => {
   return (
     <Layout>
       <Page.Main>
-        <Helmet
-          title={formatMessage({
-            id: 'admin.pages.MarketPlacePage.helmet',
+        <Page.Title>
+          {formatMessage({
+            id: 'admin.pages.MarketPlacePage.head',
             defaultMessage: 'Marketplace - Plugins',
           })}
-        />
+        </Page.Title>
         <PageHeader isOnline={isOnline} npmPackageType={npmPackageType} />
         <ContentLayout>
           <TabGroup

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

@@ -13,7 +13,6 @@ import {
 } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
 import upperFirst from 'lodash/upperFirst';
-import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import * as yup from 'yup';
 
@@ -146,7 +145,6 @@ const ProfilePage = () => {
         isBaseQueryError(res.error) &&
         (res.error.name === 'ValidationError' || res.error.message === 'ValidationError')
       ) {
-        // @ts-expect-error – We get a BadRequest error here instead of a ValidationError if the currentPassword is wrong.
         setErrors(formatValidationErrors(res.error));
       } else if (isBaseQueryError(res.error)) {
         toggleNotification({
@@ -181,12 +179,12 @@ const ProfilePage = () => {
 
   return (
     <Page.Main aria-busy={isSubmittingForm}>
-      <Helmet
-        title={formatMessage({
-          id: 'Settings.profile.form.section.helmet.title',
+      <Page.Title>
+        {formatMessage({
+          id: 'Settings.profile.form.section.head.title',
           defaultMessage: 'User profile',
         })}
-      />
+      </Page.Title>
       <Form
         method="PUT"
         onSubmit={handleSubmit}

packages/core/admin/admin/src/pages/Settings/Layout.tsx

@@ -1,5 +1,4 @@
 import { Layout as DSLayout } from '@strapi/design-system';
-import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { Navigate, Outlet, useMatch } from 'react-router-dom';
 
@@ -29,12 +28,12 @@ const Layout = () => {
 
   return (
     <DSLayout sideNav={<SettingsNav menu={menu} />}>
-      <Helmet
-        title={formatMessage({
+      <Page.Title>
+        {formatMessage({
           id: 'global.settings',
           defaultMessage: 'Settings',
         })}
-      />
+      </Page.Title>
       <Outlet />
     </DSLayout>
   );

packages/core/admin/admin/src/pages/Settings/pages/ApiTokens/EditView/EditViewPage.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import { ContentLayout, Flex } from '@strapi/design-system';
 import { Formik, Form, FormikHelpers } from 'formik';
-import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useLocation, useMatch, useNavigate } from 'react-router-dom';
 
@@ -319,12 +318,12 @@ export const EditView = () => {
   return (
     <ApiTokenPermissionsProvider value={providerValue}>
       <Page.Main>
-        <Helmet
-          title={formatMessage(
+        <Page.Title>
+          {formatMessage(
             { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
             { name: 'API Tokens' }
           )}
-        />
+        </Page.Title>
         <Formik
           validationSchema={schema}
           validateOnChange={false}