chore(admin): remove react-helmet (#19923)

* chore: remove react-helmet * chore: lint fixes --------- Co-authored-by: Josh <37798644+joshuaellis@users.noreply.github.com>
strapi · Mar 27, 2024 · 8af582b · 8af582b
1 parent e78841e
commit 8af582b
Show file tree

Hide file tree

Showing 85 changed files with 261 additions and 325 deletions.
diff --git a/e2e/tests/admin/login.spec.ts b/e2e/tests/admin/login.spec.ts
@@ -17,7 +17,7 @@ test.describe('Login', () => {
     }) => {
       // Test without making user authentication persistent
       await login({ page });
-      await expect(page).toHaveTitle('Homepage');
+      await expect(page).toHaveTitle('Homepage | Strapi');
 
       await page.close();
 
@@ -27,13 +27,13 @@ test.describe('Login', () => {
 
       // Test with making user authentication persistent
       await login({ page, rememberMe: true });
-      await expect(page).toHaveTitle('Homepage');
+      await expect(page).toHaveTitle('Homepage | Strapi');
 
       await page.close();
 
       page = await context.newPage();
       await page.goto('/admin');
-      await expect(page).toHaveTitle('Homepage');
+      await expect(page).toHaveTitle('Homepage | Strapi');
     });
   });
 

diff --git a/e2e/tests/admin/signup.spec.ts b/e2e/tests/admin/signup.spec.ts
@@ -99,6 +99,6 @@ test.describe('Sign Up', () => {
     await page.getByRole('button', { name: "Let's start" }).click();
 
     await page.waitForURL('**/admin');
-    await expect(page).toHaveTitle('Homepage');
+    await expect(page).toHaveTitle('Homepage | Strapi');
   });
 });
diff --git a/e2e/tests/content-manager/listview.spec.ts b/e2e/tests/content-manager/listview.spec.ts
@@ -14,7 +14,7 @@ test.describe('List View', () => {
   }) => {
     await page.getByRole('link', { name: 'Content Manager' }).click();
 
-    await expect(page).toHaveTitle('Content Manager');
+    await expect(page).toHaveTitle('Article | Strapi');
     await expect(page.getByRole('heading', { name: 'Article' })).toBeVisible();
     await expect(page.getByRole('link', { name: /Create new entry/ }).first()).toBeVisible();
   });
@@ -23,7 +23,7 @@ test.describe('List View', () => {
     await test.step('bulk unpublish', async () => {
       await page.getByRole('link', { name: 'Content Manager' }).click();
 
-      await expect(page).toHaveTitle('Content Manager');
+      await expect(page).toHaveTitle('Article | Strapi');
       await expect(page.getByRole('heading', { name: 'Article' })).toBeVisible();
       const publishedItems = page.getByRole('gridcell', { name: 'published' });
       expect(publishedItems).toHaveCount(2);

diff --git a/package.json b/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",

diff --git a/packages/core/admin/admin/src/App.tsx b/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>

diff --git a/packages/core/admin/admin/src/components/PageHelpers.tsx b/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 };

diff --git a/packages/core/admin/admin/src/content-manager/history/pages/History.tsx b/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}

diff --git a/packages/core/admin/admin/src/content-manager/layout.tsx b/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 />
       ) : (

diff --git a/packages/core/admin/admin/src/content-manager/pages/ComponentConfigurationPage.tsx b/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}

diff --git a/packages/core/admin/admin/src/content-manager/pages/EditConfigurationPage.tsx b/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}

diff --git a/packages/core/admin/admin/src/content-manager/pages/EditView/EditViewPage.tsx b/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}

diff --git a/...es/core/admin/admin/src/content-manager/pages/ListConfiguration/ListConfigurationPage.tsx b/...es/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

diff --git a/packages/core/admin/admin/src/content-manager/pages/ListView/ListViewPage.tsx b/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(

diff --git a/packages/core/admin/admin/src/pages/HomePage.tsx b/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} />

diff --git a/packages/core/admin/admin/src/pages/InstalledPluginsPage.tsx b/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>
   );

diff --git a/packages/core/admin/admin/src/pages/Marketplace/MarketplacePage.tsx b/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

diff --git a/packages/core/admin/admin/src/pages/ProfilePage.tsx b/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';
 
@@ -142,11 +141,7 @@ const ProfilePage = () => {
     }
 
     if ('error' in res) {
-      if (
-        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.
+      if (isBaseQueryError(res.error) && res.error.name === 'ValidationError') {
         setErrors(formatValidationErrors(res.error));
       } else if (isBaseQueryError(res.error)) {
         toggleNotification({
@@ -181,12 +176,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}