chore(releases): convert to rrd@6

packages/core/admin/admin/src/StrapiApp.tsx

@@ -207,7 +207,7 @@ class StrapiApp {
     ) {
       console.warn(`
       [${link.intlLabel.defaultMessage}]: [deprecated] addMenuLink() was called with an async Component from the plugin "${link.intlLabel.defaultMessage}". This will be removed
-        in the future. Please use: \`Component: () => import(path)\` instead.
+        in the future. Please use: \`Component: () => import(path)\` ensuring you return a default export instead.
       `);
     }
 
@@ -221,7 +221,15 @@ class StrapiApp {
 
     this.menu.push({
       ...link,
-      Component: React.lazy(link.Component),
+      Component: React.lazy(async () => {
+        const mod = await link.Component();
+
+        if ('default' in mod) {
+          return mod;
+        } else {
+          return { default: mod };
+        }
+      }),
     });
   };
 
@@ -264,7 +272,7 @@ class StrapiApp {
     ) {
       console.warn(`
       [${link.intlLabel.defaultMessage}]: [deprecated] addSettingsLink() was called with an async Component from the plugin "${link.intlLabel.defaultMessage}". This will be removed
-        in the future. Please use: \`Component: () => import(path)\` instead.
+        in the future. Please use: \`Component: () => import(path)\` ensuring you return a default export instead.
       `);
     }
 
@@ -286,7 +294,15 @@ class StrapiApp {
 
     this.settings[sectionId].links.push({
       ...link,
-      Component: React.lazy(link.Component),
+      Component: React.lazy(async () => {
+        const mod = await link.Component();
+
+        if ('default' in mod) {
+          return mod;
+        } else {
+          return { default: mod };
+        }
+      }),
     });
   };
 

packages/core/admin/admin/src/pages/Settings/pages/Roles/EditPage.tsx

@@ -270,7 +270,7 @@ const ProtectedEditPage = () => {
   }
 
   if (!canRead && !canUpdate) {
-    return <Navigate to="/" />;
+    return <Navigate to=".." />;
   }
 
   return <EditPage />;

packages/core/content-releases/admin/src/components/CMReleasesContainer.tsx

@@ -277,9 +277,8 @@ export const CMReleasesContainer = () => {
   /**
    * - Impossible to add entry to release before it exists
    * - Content types without draft and publish cannot add entries to release
-   * TODO v5: All contentTypes will have draft and publish enabled
    */
-  if (isCreatingEntry || !contentType?.options?.draftAndPublish) {
+  if (isCreatingEntry) {
     return null;
   }
 

packages/core/content-releases/admin/src/components/tests/ReleaseModal.test.tsx

@@ -9,14 +9,15 @@ describe('ReleaseModal', () => {
   it('renders correctly the dialog content on create', async () => {
     const handleCloseMocked = jest.fn();
     const { user } = render(
-      <MemoryRouter initialEntries={[`/plugins/${pluginId}`]}>
-        <ReleaseModal
-          handleClose={handleCloseMocked}
-          handleSubmit={jest.fn()}
-          initialValues={{ name: '' }}
-          isLoading={false}
-        />
-      </MemoryRouter>
+      <ReleaseModal
+        handleClose={handleCloseMocked}
+        handleSubmit={jest.fn()}
+        initialValues={{ name: '' }}
+        isLoading={false}
+      />,
+      {
+        initialEntries: [{ pathname: `/plugins/${pluginId}` }],
+      }
     );
     const dialogContainer = screen.getByRole('dialog');
     const dialogCancelButton = within(dialogContainer).getByRole('button', {

packages/core/content-releases/admin/src/pages/App.tsx

@@ -1,19 +1,18 @@
 import { CheckPagePermissions } from '@strapi/helper-plugin';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 
 import { PERMISSIONS } from '../constants';
-import { pluginId } from '../pluginId';
 
 import { ReleaseDetailsPage } from './ReleaseDetailsPage';
 import { ReleasesPage } from './ReleasesPage';
 
 export const App = () => {
   return (
     <CheckPagePermissions permissions={PERMISSIONS.main}>
-      <Switch>
-        <Route exact path={`/plugins/${pluginId}`} component={ReleasesPage} />
-        <Route exact path={`/plugins/${pluginId}/:releaseId`} component={ReleaseDetailsPage} />
-      </Switch>
+      <Routes>
+        <Route index element={<ReleasesPage />} />
+        <Route path={':releaseId'} element={<ReleaseDetailsPage />} />
+      </Routes>
     </CheckPagePermissions>
   );
 };

packages/core/content-releases/admin/src/pages/ReleaseDetailsPage.tsx

@@ -34,7 +34,7 @@ import {
 } from '@strapi/helper-plugin';
 import { ArrowLeft, CheckCircle, More, Pencil, Trash } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { useParams, useHistory, Link as ReactRouterLink, Redirect } from 'react-router-dom';
+import { useParams, useNavigate, Link as ReactRouterLink, Navigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { ReleaseActionMenu } from '../components/ReleaseActionMenu';
@@ -179,7 +179,7 @@ interface ReleaseDetailsLayoutProps {
   children: React.ReactNode;
 }
 
-export const ReleaseDetailsLayout = ({
+const ReleaseDetailsLayout = ({
   toggleEditReleaseModal,
   toggleWarningSubmit,
   children,
@@ -193,7 +193,12 @@ export const ReleaseDetailsLayout = ({
     isLoading: isLoadingDetails,
     isError,
     error,
-  } = useGetReleaseQuery({ id: releaseId });
+  } = useGetReleaseQuery(
+    { id: releaseId! },
+    {
+      skip: !releaseId,
+    }
+  );
   const [publishRelease, { isLoading: isPublishing }] = usePublishReleaseMutation();
   const toggleNotification = useNotification();
   const { formatAPIError } = useAPIErrorHandler();
@@ -212,8 +217,8 @@ export const ReleaseDetailsLayout = ({
     handleTogglePopover();
   };
 
-  const handlePublishRelease = async () => {
-    const response = await publishRelease({ id: releaseId });
+  const handlePublishRelease = (id: string) => async () => {
+    const response = await publishRelease({ id });
 
     if ('data' in response) {
       // When the response returns an object with 'data', handle success
@@ -254,16 +259,14 @@ export const ReleaseDetailsLayout = ({
 
   if (isError || !release) {
     return (
-      <Redirect
-        to={{
-          pathname: '/plugins/content-releases',
-          state: {
-            errors: [
-              {
-                code: error?.code,
-              },
-            ],
-          },
+      <Navigate
+        to=".."
+        state={{
+          errors: [
+            {
+              code: error?.code,
+            },
+          ],
         }}
       />
     );
@@ -364,7 +367,7 @@ export const ReleaseDetailsLayout = ({
                 <Button
                   size="S"
                   variant="default"
-                  onClick={handlePublishRelease}
+                  onClick={handlePublishRelease(release.id.toString())}
                   loading={isPublishing}
                   disabled={release.actions.meta.count === 0}
                 >
@@ -408,9 +411,12 @@ const getGroupByOptionLabel = (value: (typeof GROUP_BY_OPTIONS)[number]) => {
   };
 };
 
-const ReleaseDetailsBody = () => {
+interface ReleaseDetailsBodyProps {
+  releaseId: string;
+}
+
+const ReleaseDetailsBody = ({ releaseId }: ReleaseDetailsBodyProps) => {
   const { formatMessage } = useIntl();
-  const { releaseId } = useParams<{ releaseId: string }>();
   const [{ query }, setQuery] = useQueryParams<GetReleaseActionsQueryParams>();
   const toggleNotification = useNotification();
   const { formatAPIError } = useAPIErrorHandler();
@@ -492,12 +498,10 @@ const ReleaseDetailsBody = () => {
       });
     }
     return (
-      <Redirect
-        to={{
-          pathname: '/plugins/content-releases',
-          state: {
-            errors: errorsArray,
-          },
+      <Navigate
+        to=".."
+        state={{
+          errors: errorsArray,
         }}
       />
     );
@@ -702,15 +706,20 @@ const ReleaseDetailsPage = () => {
   const { releaseId } = useParams<{ releaseId: string }>();
   const toggleNotification = useNotification();
   const { formatAPIError } = useAPIErrorHandler();
-  const { push } = useHistory();
+  const navigate = useNavigate();
   const [releaseModalShown, setReleaseModalShown] = React.useState(false);
   const [showWarningSubmit, setWarningSubmit] = React.useState(false);
 
   const {
     isLoading: isLoadingDetails,
     data,
     isSuccess: isSuccessDetails,
-  } = useGetReleaseQuery({ id: releaseId });
+  } = useGetReleaseQuery(
+    { id: releaseId! },
+    {
+      skip: !releaseId,
+    }
+  );
   const [updateRelease, { isLoading: isSubmittingForm }] = useUpdateReleaseMutation();
   const [deleteRelease, { isLoading: isDeletingRelease }] = useDeleteReleaseMutation();
 
@@ -733,6 +742,10 @@ const ReleaseDetailsPage = () => {
     );
   }
 
+  if (!releaseId) {
+    return <Navigate to=".." />;
+  }
+
   const title = (isSuccessDetails && data?.data?.name) || '';
 
   const handleEditRelease = async (values: FormValues) => {
@@ -773,7 +786,7 @@ const ReleaseDetailsPage = () => {
     });
 
     if ('data' in response) {
-      push('/plugins/content-releases');
+      navigate('..');
     } else if (isAxiosError(response.error)) {
       // When the response returns an object with 'error', handle axios error
       toggleNotification({
@@ -794,7 +807,7 @@ const ReleaseDetailsPage = () => {
       toggleEditReleaseModal={toggleEditReleaseModal}
       toggleWarningSubmit={toggleWarningSubmit}
     >
-      <ReleaseDetailsBody />
+      <ReleaseDetailsBody releaseId={releaseId} />
       {releaseModalShown && (
         <ReleaseModal
           handleClose={toggleEditReleaseModal}

packages/core/content-releases/admin/src/pages/ReleasesPage.tsx

@@ -31,7 +31,7 @@ import {
 } from '@strapi/helper-plugin';
 import { EmptyDocuments, Plus } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { GetReleases } from '../../../shared/contracts/releases';
@@ -173,20 +173,17 @@ const ReleasesGrid = ({ sectionTitle, releases = [], isError = false }: Releases
 /* -------------------------------------------------------------------------------------------------
  * ReleasesPage
  * -----------------------------------------------------------------------------------------------*/
-interface CustomLocationState {
-  errors?: Record<'code', string>[];
-}
 
 const INITIAL_FORM_VALUES = {
   name: '',
 } satisfies FormValues;
 
 const ReleasesPage = () => {
-  const location = useLocation<CustomLocationState>();
+  const location = useLocation();
   const [releaseModalShown, setReleaseModalShown] = React.useState(false);
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
-  const { push, replace } = useHistory();
+  const navigate = useNavigate();
   const { formatAPIError } = useAPIErrorHandler();
   const [{ query }, setQuery] = useQueryParams<GetReleasesQueryParams>();
   const response = useGetReleasesQuery(query);
@@ -208,9 +205,9 @@ const ReleasesPage = () => {
           defaultMessage: 'Please try again or open another release.',
         }),
       });
-      replace({ state: null });
+      navigate('', { replace: true, state: null });
     }
-  }, [formatMessage, location?.state?.errors, replace, toggleNotification]);
+  }, [formatMessage, location?.state?.errors, navigate, toggleNotification]);
 
   const toggleAddReleaseModal = () => {
     setReleaseModalShown((prev) => !prev);
@@ -257,7 +254,7 @@ const ReleasesPage = () => {
         }),
       });
 
-      push(`/plugins/content-releases/${response.data.data.id}`);
+      navigate(response.data.data.id.toString());
     } else if (isAxiosError(response.error)) {
       // When the response returns an object with 'error', handle axios error
       toggleNotification({