feat: upgrade Strapi to v5

Author: squelix

Diff for: README.md

@@ -12,16 +12,32 @@ A strapi plugin to sync your strapi content with Algolia.
 
 ### 1. Installation
 
-#### With Yarn
+#### Strapi v5 - Use latest version
+
+##### With Yarn
+
+```bash
+yarn add strapi-plugin-strapi-algolia@latest
+```
+
+###### With NPM
+
+```bash
+npm install --save strapi-plugin-strapi-algolia@latest
+```
+
+#### Strapi v4 - Use version 1.x.x
+
+##### With Yarn
 
 ```bash
-yarn add strapi-plugin-strapi-algolia
+yarn add strapi-plugin-strapi-algolia@1
 ```
 
-##### With NPM
+###### With NPM
 
 ```bash
-npm install --save strapi-plugin-strapi-algolia
+npm install --save strapi-plugin-strapi-algolia@1
 ```
 
 ### 2. Setup environment variables

Diff for: admin/custom.d.ts

@@ -0,0 +1,2 @@
+declare module '@strapi/design-system/*';
+declare module '@strapi/design-system';

Diff for: admin/src/components/IndexAllButton/index.tsx renamed to admin/src/components/IndexAllButton.tsx

@@ -1,26 +1,21 @@
-import { Button } from '@strapi/design-system/Button';
-import {
-  ConfirmDialog,
-  useFetchClient,
-  useNotification,
-} from '@strapi/helper-plugin';
-import Play from '@strapi/icons/Play';
+import { Button } from '@strapi/design-system';
+import { Play, WarningCircle } from '@strapi/icons';
+import { useNotification } from '@strapi/strapi/admin';
 import { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { useConfigContentTypes } from '../../hooks';
-import pluginId from '../../pluginId';
+import { useConfigContentTypes } from '../hooks';
+import pluginId from '../pluginId';
 
-const IndexAllButton = ({ contentType }: { contentType: string }) => {
+import { Dialog } from '@strapi/design-system';
+import { ConfirmDialog, useFetchClient } from '@strapi/strapi/admin';
+
+export default ({ contentType }: { contentType?: string }) => {
   const { contentTypes } = useConfigContentTypes();
   const { post } = useFetchClient();
 
   const [showConfirmModal, setShowConfirmModal] = useState(false);
-  const [
-    isModalConfirmButtonLoading,
-    setIsModalConfirmButtonLoading,
-  ] = useState(false);
   const { formatMessage } = useIntl();
-  const toggleNotification = useNotification();
+  const { toggleNotification } = useNotification();
 
   const abortController = new AbortController();
   const { signal } = abortController;
@@ -36,9 +31,6 @@ const IndexAllButton = ({ contentType }: { contentType: string }) => {
 
   const handleConfirmDelete = async () => {
     try {
-      // Show the loading state
-      setIsModalConfirmButtonLoading(true);
-
       await post(
         `/${pluginId}/index-all-articles`,
         {
@@ -49,33 +41,27 @@ const IndexAllButton = ({ contentType }: { contentType: string }) => {
 
       toggleNotification({
         type: 'success',
-        message: {
+        message: formatMessage({
           id: 'cache.purge.success',
           defaultMessage: 'All items have been indexed',
-        },
+        }),
       });
-
-      setIsModalConfirmButtonLoading(false);
-
-      toggleConfirmModal();
     } catch (err) {
       const errorMessage = (err as any)?.response?.payload?.error
         ?.message;
-      setIsModalConfirmButtonLoading(false);
-      toggleConfirmModal();
 
       if (errorMessage) {
         toggleNotification({
           type: 'warning',
-          message: {
+          message: formatMessage({
             id: 'cache.purge.error',
             defaultMessage: errorMessage,
-          },
+          }),
         });
       } else {
         toggleNotification({
           type: 'warning',
-          message: { id: 'notification.error' },
+          message: formatMessage({ id: 'notification.error' }),
         });
       }
     }
@@ -96,35 +82,32 @@ const IndexAllButton = ({ contentType }: { contentType: string }) => {
         size="S"
         startIcon={<Play />}
         variant="default"
+        type="button"
       >
         {formatMessage({
           id: 'cache.purge.delete-entry',
           defaultMessage: 'Index all items',
         })}
       </Button>
-      <ConfirmDialog
-        variantRightButton="default"
-        isConfirmButtonLoading={isModalConfirmButtonLoading}
-        isOpen={showConfirmModal}
-        onConfirm={handleConfirmDelete}
-        onToggleDialog={toggleConfirmModal}
-        title={{
-          id: 'cache.purge.confirm-modal-title',
-          defaultMessage: 'Confirm indexing all items?',
-        }}
-        bodyText={{
-          id: 'cache.purge.confirm-modal-body',
-          defaultMessage:
-            'Are you sure you want to index all items this content type?',
-        }}
-        iconRightButton={<Play />}
-        rightButtonText={{
-          id: 'cache.purge.confirm-modal-confirm',
-          defaultMessage: 'Index all items',
-        }}
-      />
+      <Dialog.Root
+        open={showConfirmModal}
+        onOpenChange={toggleConfirmModal}
+      >
+        <ConfirmDialog
+          onConfirm={handleConfirmDelete}
+          title={formatMessage({
+            id: 'cache.purge.confirm-modal-title',
+            defaultMessage: 'Confirm indexing all items?',
+          })}
+          variant="default"
+          icon={<WarningCircle fill="danger500" />}
+          children={formatMessage({
+            id: 'cache.purge.confirm-modal-body',
+            defaultMessage:
+              'Are you sure you want to index all items this content type?',
+          })}
+        />
+      </Dialog.Root>
     </>
   );
 };
-
-export default IndexAllButton;

Diff for: admin/src/components/Initializer/index.tsx renamed to admin/src/components/Initializer.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
-import pluginId from '../../pluginId';
+import pluginId from '../pluginId';
 
-const Initializer = ({
+export default ({
   setPlugin,
 }: {
   setPlugin: (id: string) => void;
@@ -14,5 +14,3 @@ const Initializer = ({
 
   return null;
 };
-
-export default Initializer;

Diff for: admin/src/components/ListViewInjectedComponent.tsx

@@ -0,0 +1,17 @@
+import { useRBAC } from '@strapi/strapi/admin';
+import { useMatch } from 'react-router-dom';
+import strapiAlgoliaPermissions from '../permissions';
+import IndexAllButton from './IndexAllButton';
+
+const ListViewInjectedComponent = () => {
+  const routeMatch = useMatch('/content-manager/:kind/:slug?');
+  const { allowedActions } = useRBAC(strapiAlgoliaPermissions);
+
+  if (!allowedActions.canIndexAll) {
+    return null;
+  }
+
+  return <IndexAllButton contentType={routeMatch?.params.slug} />;
+};
+
+export default ListViewInjectedComponent;

Diff for: admin/src/components/ListViewInjectedComponent/index.tsx

@@ -1,21 +1,18 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-import {
-  useFetchClient,
-  useNotification,
-} from '@strapi/helper-plugin';
+import { useNotification } from '@strapi/strapi/admin';
 import { useEffect, useReducer, useRef } from 'react';
 import pluginId from '../../pluginId';
 import init from './init';
 import reducer, { Actions, initialState } from './reducer';
 
+import { useFetchClient } from '@strapi/strapi/admin';
+
 const useConfigContentTypes = (shouldFetchData = true) => {
   const [{ contentTypes, isLoading }, dispatch] = useReducer(
     reducer,
     initialState,
     () => init(initialState, shouldFetchData)
   );
-  const toggleNotification = useNotification();
+  const { toggleNotification } = useNotification();
   const client = useFetchClient();
 
   const isMounted = useRef(true);
@@ -42,7 +39,6 @@ const useConfigContentTypes = (shouldFetchData = true) => {
       const { data } = await client.get(
         `/${pluginId}/config/content-types`,
         {
-          method: 'GET',
           signal,
         }
       );

Diff for: admin/src/hooks/useConfigContentTypes/index.ts

@@ -1,11 +1,28 @@
-import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import Initializer from './components/Initializer';
 import ListViewInjectedComponent from './components/ListViewInjectedComponent';
 import pluginId from './pluginId';
 
 const { name } = pluginPkg.strapi;
 
+type TradOptions = Record<string, string>;
+
+const prefixPluginTranslations = (
+  trad: TradOptions,
+  pluginId: string
+): TradOptions => {
+  if (!pluginId) {
+    throw new TypeError("pluginId can't be empty");
+  }
+  return Object.keys(trad).reduce<TradOptions>(
+    (acc, current) => ({
+      ...acc,
+      [`${pluginId}.${current}`]: trad[current],
+    }),
+    {}
+  );
+};
+
 export default {
   register(app: any) {
     app.registerPlugin({
@@ -16,10 +33,12 @@ export default {
     });
   },
   bootstrap(app: any) {
-    app.injectContentManagerComponent('listView', 'actions', {
-      name: 'ListViewInjectedComponent',
-      Component: ListViewInjectedComponent,
-    });
+    app
+      .getPlugin('content-manager')
+      .injectComponent('listView', 'actions', {
+        name: 'ListViewInjectedComponent',
+        Component: ListViewInjectedComponent,
+      });
   },
   async registerTrads({ locales }: any) {
     const importedTranslations = await Promise.all(
@@ -36,6 +55,6 @@ export default {
       )
     );
 
-    return Promise.resolve(importedTranslations);
+    return importedTranslations;
   },
 };

Diff for: admin/src/index.tsx renamed to admin/src/index.ts

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig",
+  "include": ["./src", "./custom.d.ts"],
+  "exclude": ["**/*.test.ts", "**/*.test.tsx"],
+  "compilerOptions": {
+    "rootDir": "../",
+    "baseUrl": ".",
+    "outDir": "./dist",
+    "skipLibCheck": true
+  }
+}

Diff for: admin/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@strapi/typescript-utils/tsconfigs/admin",
+  "include": ["./src", "./custom.d.ts"],
+  "compilerOptions": {
+    "rootDir": "../",
+    "baseUrl": ".",
+    "skipLibCheck": true
+  }
+}