strapi-plugin-meilisearch 0.10.0 → 0.11.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021-2022 Meili SAS
+Copyright (c) 2021-2024 Meili SAS
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -28,7 +28,7 @@ Meilisearch is an open-source search engine. [Discover what Meilisearch is!](htt
 
 Add your Strapi content-types into a Meilisearch instance. The plugin listens to modifications made on your content-types and updates Meilisearch accordingly.
 
-## Table of Contents <!-- omit in toc -->
+## Table of Contents <!-- omit in TOC -->
 
 - [📖 Documentation](#-documentation)
 - [⚡ Supercharge your Meilisearch experience](#-supercharge-your-meilisearch-experience)
@@ -106,7 +106,7 @@ To run the Docker script add both files `Dockerfile` and `docker-compose.yaml` a
 
 ## 🎬 Getting Started
 
-Now that you have installed the plugin, a running meiliSearch instance and, a running Strapi app, let's go to the plugin page on your admin dashboard.
+Now that you have installed the plugin, a running Meilisearch instance and, a running Strapi app, let's go to the plugin page on your admin dashboard.
 
 On the left-navbar, `Meilisearch` appears under the `PLUGINS` category. If it does not, ensure that you have installed the plugin and re-build Strapi (see [installation](#-installation)).
 
@@ -211,6 +211,7 @@ Settings:
 - [🤚 Filter entries](#-filter-entries)
 - [🏗 Add Meilisearch settings](#-add-meilisearch-settings)
 - [🔎 Entries query](#-entries-query)
+- [🔐 Selectively index private fields](#-selectively-index-private-fields)
 
 ### 🏷 Custom index name
 
@@ -412,13 +413,34 @@ module.exports = {
 
 [See resources](./resources/entries-query) for more entriesQuery examples.
 
+### 🔐 Selectively index private fields
+
+Private fields are sanitized by default to prevent data leaks. However, you might want to allow some of these private fields to be used for `search`, `filter` or `sort`. This is possible with the `noSanitizePrivateFields`. For example, if you have a private field called `internal_notes` in your content-type schema that you wish to include in searching, you can add it to the `noSanitizePrivateFields` array to allow it to be indexed.
+
+```js
+// config/plugins.js
+
+module.exports = {
+  meilisearch: {
+    config: {
+      restaurant: {
+        noSanitizePrivateFields: ["internal_notes"], // All attributes: ["*"]
+        settings:  {
+          "searchableAttributes": ["internal_notes"],
+        }
+      },
+    },
+  },
+}
+```
+
 ### 🕵️‍♀️ Start Searching <!-- omit in toc -->
 
 Once you have a content-type indexed in Meilisearch, you can [start searching](https://www.meilisearch.com/docs/learn/getting_started/quick_start.html#search).
 
 To search in Meilisearch, you can use the [instant-meilisearch](https://github.com/meilisearch/meilisearch-js-plugins/tree/main/packages/instant-meilisearch) library that integrates a whole search interface, or our [meilisearch-js](https://github.com/meilisearch/meilisearch-js) SDK.
 
-#### ⚡️ Using Instant meiliSearch <!-- omit in toc -->
+#### ⚡️ Using Instant Meilisearch <!-- omit in toc -->
 
 You can have a front up and running in record time with [instant-meilisearch](https://github.com/meilisearch/meilisearch-js-plugins/tree/main/packages/instant-meilisearch).
 
@@ -543,10 +565,9 @@ If you are using [Strapi v3](https://github.com/strapi/strapi/tree/v3.6.9), plea
 
 This package guarantees compatibility with [version v1.x of Meilisearch](https://github.com/meilisearch/meilisearch/releases/latest), but some features may not be present. Please check the [issues](https://github.com/meilisearch/strapi-plugin-meilisearch/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22+label%3Aenhancement) for more info.
 
-**Node / NPM versions**:
+**Node**:
 
-- NodeJS >= 14.10 <= 16
-- NPM >= 6.x
+- NodeJS >= 18
 
 **We recommend always using the latest version of Strapi to start your new projects**.
 

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/components/PluginIcon/index.js

@@ -5,7 +5,7 @@
  */
 
 import React from 'react'
-import Search from '@strapi/icons/Search'
+import { Search } from '@strapi/icons'
 
 const PluginIcon = () => <Search />
 

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

@@ -1,10 +1,15 @@
 import React, { memo } from 'react'
-import { Tr, Td } from '@strapi/design-system/Table'
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox'
-import { Typography } from '@strapi/design-system/Typography'
-import { Flex } from '@strapi/design-system/Flex'
-import { Box } from '@strapi/design-system/Box'
-import { Button } from '@strapi/design-system/Button'
+import {
+  BaseCheckbox,
+  Box,
+  Button,
+  Flex,
+  Td,
+  Tr,
+  Typography,
+} from '@strapi/design-system'
+import { CheckPermissions } from '@strapi/helper-plugin'
+import { PERMISSIONS } from '../../constants'
 
 const CollectionColumn = ({
   entry,
@@ -14,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>
@@ -55,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

@@ -1,7 +1,5 @@
 import React, { memo, useEffect, useState } from 'react'
-import { Table, Tbody } from '@strapi/design-system/Table'
-import { Box } from '@strapi/design-system/Box'
-import { Button } from '@strapi/design-system/Button'
+import { Box, Button, Table, Tbody } from '@strapi/design-system'
 import { request, useAutoReloadOverlayBlocker } from '@strapi/helper-plugin'
 import CollectionTableHeader from './CollectionTableHeader'
 import CollectionColumn from './CollectionColumn'
@@ -17,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
@@ -37,7 +33,7 @@ const Collection = () => {
         {
           method: 'GET',
         },
-        true
+        true,
       )
       setReload(false)
     } catch (err) {

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

@@ -1,15 +1,23 @@
 import React, { memo } from 'react'
-import { Thead, Tr, Th } from '@strapi/design-system/Table'
-import { Typography } from '@strapi/design-system/Typography'
-import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden'
+import {
+  Th,
+  Thead,
+  Tr,
+  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>
@@ -28,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/PluginHeader/index.js

@@ -1,8 +1,6 @@
 import React, { memo } from 'react'
-import ArrowLeft from '@strapi/icons/ArrowLeft'
-import { Box } from '@strapi/design-system/Box'
-import { Link } from '@strapi/design-system/Link'
-import { BaseHeaderLayout } from '@strapi/design-system/Layout'
+import { Box, Link, BaseHeaderLayout } from '@strapi/design-system'
+import { ArrowLeft } from '@strapi/icons'
 
 const PluginHeader = () => {
   return (

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

@@ -1,14 +1,16 @@
 import React, { memo } from 'react'
-import { Box } from '@strapi/design-system/Box'
 import {
-  Tabs,
+  Box,
   Tab,
   TabGroup,
-  TabPanels,
   TabPanel,
-} from '@strapi/design-system/Tabs'
+  TabPanels,
+  Tabs,
+} 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>