strapi-plugin-meilisearch 0.11.0 → 0.11.1

package/admin/src/Hooks/useAlert.js

@@ -14,8 +14,11 @@ export function useAlert() {
     message = 'Something occured in Meilisearch',
     link,
     blockTransition = true,
+    title,
   }) => {
     toggleNotification({
+      // optional
+      title,
       // required
       // type: 'info|success|warning',
       type,
@@ -32,8 +35,22 @@ export function useAlert() {
       onClose: () => localStorage.setItem('STRAPI_UPDATE_NOTIF', true),
     })
   }
+
+  const checkForbiddenError = ({ response }) => {
+    const status = response?.payload?.error?.status
+    if (status && status === 403) {
+      handleNotification({
+        title: 'Forbidden',
+        type: 'warning',
+        message: 'You do not have permission to do this action',
+        blockTransition: false,
+      })
+    }
+  }
+
   return {
     handleNotification,
+    checkForbiddenError,
   }
 }
 

package/admin/src/Hooks/useCollection.js

@@ -16,7 +16,7 @@ export function useCollection() {
   const [reloadNeeded, setReloadNeeded] = useState(false)
   const [realTimeReports, setRealTimeReports] = useState(false)
 
-  const { handleNotification } = useAlert()
+  const { handleNotification, checkForbiddenError } = useAlert()
 
   const refetchCollection = () =>
     setRefetchIndex(prevRefetchIndex => !prevRefetchIndex)
@@ -41,7 +41,7 @@ export function useCollection() {
         return collection
       })
       const reload = collections.find(
-        col => col.reloadNeeded === 'Reload needed'
+        col => col.reloadNeeded === 'Reload needed',
       )
 
       const isIndexing = collections.find(col => col.isIndexing === true)
@@ -57,71 +57,84 @@ export function useCollection() {
   }
 
   const deleteCollection = async ({ contentType }) => {
-    const { error } = await request(
-      `/${pluginId}/content-type/${contentType}`,
-      {
-        method: 'DELETE',
+    try {
+      const { error } = await request(
+        `/${pluginId}/content-type/${contentType}`,
+        {
+          method: 'DELETE',
+        },
+      )
+      if (error) {
+        handleNotification({
+          type: 'warning',
+          message: error.message,
+          link: error.link,
+        })
+      } else {
+        refetchCollection()
+        handleNotification({
+          type: 'success',
+          message: 'Request to delete content-type is successful',
+          blockTransition: false,
+        })
       }
-    )
-    if (error) {
-      handleNotification({
-        type: 'warning',
-        message: error.message,
-        link: error.link,
-      })
-    } else {
-      refetchCollection()
-      handleNotification({
-        type: 'success',
-        message: 'Request to delete content-type is successful',
-        blockTransition: false,
-      })
+    } catch (error) {
+      checkForbiddenError(error)
     }
   }
 
   const addCollection = async ({ contentType }) => {
-    const { error } = await request(`/${pluginId}/content-type`, {
-      method: 'POST',
-      body: {
-        contentType,
-      },
-    })
-    if (error) {
-      handleNotification({
-        type: 'warning',
-        message: error.message,
-        link: error.link,
-      })
-    } else {
-      refetchCollection()
-      handleNotification({
-        type: 'success',
-        message: 'Request to add a content-type is successful',
-        blockTransition: false,
+    try {
+      const { error } = await request(`/${pluginId}/content-type`, {
+        method: 'POST',
+        body: {
+          contentType,
+        },
       })
+      if (error) {
+        handleNotification({
+          type: 'warning',
+          message: error.message,
+          link: error.link,
+        })
+      } else {
+        refetchCollection()
+        handleNotification({
+          type: 'success',
+          message: 'Request to add a content-type is successful',
+          blockTransition: false,
+        })
+      }
+    } catch (error) {
+      checkForbiddenError(error)
     }
   }
 
   const updateCollection = async ({ contentType }) => {
-    const { error } = await request(`/${pluginId}/content-type`, {
-      method: 'PUT',
-      body: {
-        contentType,
-      },
-    })
-    if (error) {
-      handleNotification({
-        type: 'warning',
-        message: error.message,
-        link: error.link,
-      })
-    } else {
-      refetchCollection()
-      handleNotification({
-        type: 'success',
-        message: 'Request to update content-type is successful',
-        blockTransition: false,
+    try {
+      const { error } = await request(`/${pluginId}/content-type`, {
+        method: 'PUT',
+        body: {
+          contentType,
+        },
       })
+
+      if (error) {
+        handleNotification({
+          type: 'warning',
+          message: error.message,
+          link: error.link,
+        })
+      } else {
+        refetchCollection()
+        handleNotification({
+          type: 'success',
+          message: 'Request to update content-type is successful',
+          blockTransition: false,
+        })
+      }
+    } catch (error) {
+      checkForbiddenError(error)
     }
   }
 

package/admin/src/Hooks/useCredential.js

@@ -13,32 +13,36 @@ export function useCredential() {
   const [refetchIndex, setRefetchIndex] = useState(true)
   const [host, setHost] = useState('')
   const [apiKey, setApiKey] = useState('')
-  const { handleNotification } = useAlert()
+  const { handleNotification, checkForbiddenError } = useAlert()
 
   const refetchCredentials = () =>
     setRefetchIndex(prevRefetchIndex => !prevRefetchIndex)
 
   const updateCredentials = async () => {
-    const { error } = await request(`/${pluginId}/credential`, {
-      method: 'POST',
-      body: {
-        apiKey: apiKey,
-        host: host,
-      },
-    })
-    if (error) {
-      handleNotification({
-        type: 'warning',
-        message: error.message,
-        link: error.link,
-      })
-    } else {
-      refetchCredentials()
-      handleNotification({
-        type: 'success',
-        message: 'Credentials sucessfully updated!',
-        blockTransition: false,
+    try {
+      const { error } = await request(`/${pluginId}/credential`, {
+        method: 'POST',
+        body: {
+          apiKey: apiKey,
+          host: host,
+        },
       })
+      if (error) {
+        handleNotification({
+          type: 'warning',
+          message: error.message,
+          link: error.link,
+        })
+      } else {
+        refetchCredentials()
+        handleNotification({
+          type: 'success',
+          message: 'Credentials sucessfully updated!',
+          blockTransition: false,
+        })
+      }
+    } catch (error) {
+      checkForbiddenError(error)
     }
   }
 

package/admin/src/components/Initializer/index.js

@@ -0,0 +1,27 @@
+/**
+ *
+ * Initializer
+ *
+ */
+
+import PropTypes from 'prop-types'
+import { useEffect, useRef } from 'react'
+
+import pluginId from '../../pluginId'
+
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef()
+  ref.current = setPlugin
+
+  useEffect(() => {
+    ref.current(pluginId)
+  }, [])
+
+  return null
+}
+
+Initializer.propTypes = {
+  setPlugin: PropTypes.func.isRequired,
+}
+
+export default Initializer

package/admin/src/constants.js

@@ -0,0 +1,34 @@
+export const PERMISSIONS = {
+  // This permission regards the main component (App) and is used to tell
+  // If the plugin link should be displayed in the menu
+  // And also if the plugin is accessible. This use case is found when a user types the url of the
+  // plugin directly in the browser
+  main: [
+    { action: 'plugin::meilisearch.read', subject: null },
+    { action: 'plugin::meilisearch.collections.create', subject: null },
+    { action: 'plugin::meilisearch.collections.update', subject: null },
+    { action: 'plugin::meilisearch.collections.delete', subject: null },
+    { action: 'plugin::meilisearch.settings.edit', subject: null },
+  ],
+  collections: [
+    { action: 'plugin::meilisearch.read', subject: null },
+    { action: 'plugin::meilisearch.collections.create', subject: null },
+    { action: 'plugin::meilisearch.collections.update', subject: null },
+    { action: 'plugin::meilisearch.collections.delete', subject: null },
+  ],
+  settings: [
+    { action: 'plugin::meilisearch.read', subject: null },
+    { action: 'plugin::meilisearch.settings.edit', subject: null },
+  ],
+  read: [{ action: 'plugin::meilisearch.read', subject: null }],
+  create: [{ action: 'plugin::meilisearch.collections.create', subject: null }],
+  update: [{ action: 'plugin::meilisearch.collections.update', subject: null }],
+  delete: [{ action: 'plugin::meilisearch.collections.delete', subject: null }],
+  settingsEdit: [
+    { action: 'plugin::meilisearch.settings.edit', subject: null },
+  ],
+  createAndDelete: [
+    { action: 'plugin::meilisearch.collections.create', subject: null },
+    { action: 'plugin::meilisearch.collections.delete', subject: null },
+  ],
+}

package/admin/src/containers/Collection/CollectionColumn.js

@@ -8,6 +8,8 @@ import {
   Tr,
   Typography,
 } from '@strapi/design-system'
+import { CheckPermissions } from '@strapi/helper-plugin'
+import { PERMISSIONS } from '../../constants'
 
 const CollectionColumn = ({
   entry,
@@ -17,17 +19,19 @@ const CollectionColumn = ({
 }) => {
   return (
     <Tr key={entry.contentType}>
-      <Td>
-        <BaseCheckbox
-          aria-label={`Select ${entry.collection}`}
-          onValueChange={() => {
-            if (entry.indexed)
-              deleteCollection({ contentType: entry.contentType })
-            else addCollection({ contentType: entry.contentType })
-          }}
-          value={entry.indexed}
-        />
-      </Td>
+      <CheckPermissions permissions={PERMISSIONS.createAndDelete}>
+        <Td>
+          <BaseCheckbox
+            aria-label={`Select ${entry.collection}`}
+            onValueChange={() => {
+              if (entry.indexed)
+                deleteCollection({ contentType: entry.contentType })
+              else addCollection({ contentType: entry.contentType })
+            }}
+            value={entry.indexed}
+          />
+        </Td>
+      </CheckPermissions>
       {/* // Name */}
       <Td>
         <Typography textColor="neutral800">{entry.collection}</Typography>
@@ -58,21 +62,25 @@ const CollectionColumn = ({
       <Td>
         <Typography textColor="neutral800">{entry.reloadNeeded}</Typography>
       </Td>
-      <Td>
-        <Flex>
-          <Box paddingLeft={1}>
-            <Button
-              onClick={() =>
-                updateCollection({ contentType: entry.contentType })
-              }
-              size="S"
-              variant="secondary"
-            >
-              Update
-            </Button>
-          </Box>
-        </Flex>
-      </Td>
+      <CheckPermissions permissions={PERMISSIONS.update}>
+        <Td>
+          <Flex>
+            <Box paddingLeft={1}>
+              {entry.indexed && (
+                <Button
+                  onClick={() =>
+                    updateCollection({ contentType: entry.contentType })
+                  }
+                  size="S"
+                  variant="secondary"
+                >
+                  Update
+                </Button>
+              )}
+            </Box>
+          </Flex>
+        </Td>
+      </CheckPermissions>
     </Tr>
   )
 }

package/admin/src/containers/Collection/CollectionTable.js

@@ -15,10 +15,8 @@ const Collection = () => {
     reloadNeeded,
     refetchCollection,
   } = useCollection()
-  const {
-    lockAppWithAutoreload,
-    unlockAppWithAutoreload,
-  } = useAutoReloadOverlayBlocker()
+  const { lockAppWithAutoreload, unlockAppWithAutoreload } =
+    useAutoReloadOverlayBlocker()
   const [reload, setReload] = useState(false)
 
   const ROW_COUNT = 6
@@ -35,7 +33,7 @@ const Collection = () => {
         {
           method: 'GET',
         },
-        true
+        true,
       )
       setReload(false)
     } catch (err) {

package/admin/src/containers/Collection/CollectionTableHeader.js

@@ -6,14 +6,18 @@ import {
   Typography,
   VisuallyHidden,
 } from '@strapi/design-system'
+import { CheckPermissions } from '@strapi/helper-plugin'
+import { PERMISSIONS } from '../../constants'
 
 const CollectionTableHeader = () => {
   return (
     <Thead>
       <Tr>
-        <Th>
-          <VisuallyHidden>INDEX</VisuallyHidden>
-        </Th>
+        <CheckPermissions permissions={PERMISSIONS.createAndDelete}>
+          <Th>
+            <VisuallyHidden>INDEX</VisuallyHidden>
+          </Th>
+        </CheckPermissions>
         <Th>
           <Typography variant="sigma">NAME</Typography>
         </Th>
@@ -32,9 +36,11 @@ const CollectionTableHeader = () => {
         <Th>
           <Typography variant="sigma">HOOKS</Typography>
         </Th>
-        <Th>
-          <VisuallyHidden>Actions</VisuallyHidden>
-        </Th>
+        <CheckPermissions permissions={PERMISSIONS.update}>
+          <Th>
+            <VisuallyHidden>Actions</VisuallyHidden>
+          </Th>
+        </CheckPermissions>
       </Tr>
     </Thead>
   )

package/admin/src/containers/HomePage/index.js

@@ -3,17 +3,20 @@
  * HomePage
  *
  */
-
+import { CheckPagePermissions } from '@strapi/helper-plugin'
 import React, { memo } from 'react'
 import PluginTabs from '../PluginTabs'
 import PluginHeader from '../PluginHeader'
+import { PERMISSIONS } from '../../constants'
 
 const HomePage = () => {
   return (
-    <div>
-      <PluginHeader />
-      <PluginTabs />
-    </div>
+    <CheckPagePermissions permissions={PERMISSIONS.main}>
+      <div>
+        <PluginHeader />
+        <PluginTabs />
+      </div>
+    </CheckPagePermissions>
   )
 }
 

package/admin/src/containers/PluginTabs/index.js

@@ -9,6 +9,8 @@ import {
 } from '@strapi/design-system'
 import { CollectionTable } from '../Collection'
 import { Settings } from '../Settings'
+import { CheckPermissions } from '@strapi/helper-plugin'
+import { PERMISSIONS } from '../../constants'
 
 const PluginTabs = () => {
   return (
@@ -20,14 +22,18 @@ const PluginTabs = () => {
         </Tabs>
         <TabPanels>
           <TabPanel>
-            <Box color="neutral800" padding={4} background="neutral0">
-              <CollectionTable />
-            </Box>
+            <CheckPermissions permissions={PERMISSIONS.collections}>
+              <Box color="neutral800" padding={4} background="neutral0">
+                <CollectionTable />
+              </Box>
+            </CheckPermissions>
           </TabPanel>
           <TabPanel>
-            <Box color="neutral800" padding={4} background="neutral0">
-              <Settings />
-            </Box>
+            <CheckPermissions permissions={PERMISSIONS.settings}>
+              <Box color="neutral800" padding={4} background="neutral0">
+                <Settings />
+              </Box>
+            </CheckPermissions>
           </TabPanel>
         </TabPanels>
       </TabGroup>

package/admin/src/containers/Settings/Credentials.js

@@ -1,17 +1,12 @@
 import React, { memo } from 'react'
 import { Box, Button, TextInput, Typography } from '@strapi/design-system'
 import { useCredential } from '../../Hooks/useCredential'
+import { CheckPermissions } from '@strapi/helper-plugin'
+import { PERMISSIONS } from '../../constants'
 
 const Credentials = () => {
-  const {
-    host,
-    apiKey,
-    credentials,
-    setHost,
-    setApiKey,
-    updateCredentials,
-  } = useCredential()
-
+  const { host, apiKey, credentials, setHost, setApiKey, updateCredentials } =
+    useCredential()
   return (
     <Box>
       <Box padding={2}>
@@ -42,23 +37,30 @@ const Credentials = () => {
         <Typography variant="pi" style={{ color: 'red' }}>
           Do not use this API key on your front-end as it has too much rights.
           Instead, use the public key available using{' '}
-          <a href="https://www.meilisearch.com/docs/reference/api/keys#get-keys">
+          <a
+            href="https://www.meilisearch.com/docs/reference/api/keys#get-keys"
+            target="_blank"
+            rel="noreferrer"
+          >
             the key route
           </a>
           .
         </Typography>
       </Box>
+
       <Box paddingTop={2} paddingLeft={2} paddingRight={2} paddingBottom={2}>
-        <Button
-          variant="secondary"
-          onClick={() => updateCredentials()}
-          disabled={
-            credentials.ApiKeyIsFromConfigFile &&
-            credentials.HostIsFromConfigFile
-          }
-        >
-          Save
-        </Button>
+        <CheckPermissions permissions={PERMISSIONS.settingsEdit}>
+          <Button
+            variant="secondary"
+            onClick={() => updateCredentials()}
+            disabled={
+              credentials.ApiKeyIsFromConfigFile &&
+              credentials.HostIsFromConfigFile
+            }
+          >
+            Save
+          </Button>
+        </CheckPermissions>
       </Box>
     </Box>
   )

package/admin/src/index.js

@@ -1,6 +1,8 @@
 import pluginPkg from '../../package.json'
 import pluginId from './pluginId'
 import PluginIcon from './components/PluginIcon'
+import Initializer from './components/Initializer'
+import { PERMISSIONS } from './constants'
 
 const name = pluginPkg.strapi.name
 
@@ -8,9 +10,9 @@ export default {
   register(app) {
     app.registerPlugin({
       id: pluginId,
+      initializer: Initializer,
       isReady: true,
       name,
-      description: 'TEST',
     })
 
     app.addMenuLink({
@@ -27,7 +29,7 @@ export default {
 
         return component
       },
-      permissions: [],
+      permissions: PERMISSIONS.main,
     })
   },
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-meilisearch",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Synchronise and search in your Strapi content-types with Meilisearch",
   "scripts": {
     "playground:dev": "yarn --cwd ./playground && yarn --cwd ./playground dev",
@@ -25,10 +25,10 @@
     "README.md"
   ],
   "dependencies": {
-    "@strapi/utils": "^4.14.4",
+    "@strapi/utils": "^4.21.1",
     "@strapi/icons": "^1.12.2",
     "@strapi/design-system": "^1.13.2",
-    "meilisearch": "^0.37.0"
+    "meilisearch": "^0.38.0"
   },
   "peerDependencies": {
     "@strapi/strapi": "^4.0.0"
@@ -61,18 +61,18 @@
   },
   "homepage": "https://github.com/meilisearch/strapi-plugin-meilisearch#readme",
   "devDependencies": {
-    "@types/jest": "^27.4.1",
-    "concurrently": "^6.2.0",
+    "@types/jest": "^29.5.12",
+    "concurrently": "^8.2.2",
     "cypress": "^7.3.0",
     "eslint": "^8.2.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.27.0",
-    "jest": "^27.4.3",
-    "prettier": "2.2.1"
+    "jest": "^29.7.0",
+    "prettier": "3.2.5"
   }
 }