Merge #77

77: Step 4: Hooks r=bidoubiwa a=bidoubiwa

In this PR

### On launch of server: 
Create hooks by surcharging lifecycles functions of collections that are indexed in MeiliSearch

### On the plugin page
- A reload server button when hooks must be updated
- A hooks column that mentioned you should reload or if hooks are active
- An update button if you want to update manually your data to MeiliSearch
 
fixes: #79 -> automatic hooks
fixes: #18 -> Hooks
fixes: #16 -> Step 4
fixes: #58 -> If collection is in draft mode it is still added to MeiliSearch if the users ask for it
fixes: #84 -> server reload brings back to plugin page

Co-authored-by: Charlotte Vermandel <[email protected]>
Co-authored-by: bors[bot] <26634292+bors[bot]@users.noreply.github.com>
Co-authored-by: LtdJorge <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: 4 people

.eslintrc.js

@@ -19,7 +19,7 @@ module.exports = {
     },
     ecmaVersion: 11
   },
-  ignorePatterns: ['playground'],
+  ignorePatterns: ['playground/plugins'],
   plugins: [
     'react'
   ],
@@ -33,6 +33,8 @@ module.exports = {
     'react/jsx-indent-props': [2, 2],
     'cypress/no-unnecessary-waiting': 'off',
     'react/prop-types': 'off',
-    'react/jsx-closing-bracket-location': [2, 'tag-aligned']
+    'react/jsx-closing-bracket-location': [2, 'tag-aligned'],
+    'no-unused-vars': ['error', { varsIgnorePattern: '^omit.*$' }],
+    'array-callback-return': 'off'
   }
 }

.github/workflows/tests.yml

@@ -28,7 +28,7 @@ jobs:
         uses: actions/setup-node@v1
       - name: Install dependencies
         run: yarn --dev && yarn --cwd ./playground
-      - name: Cypress run
+      - name: Test develop no-reload
         uses: cypress-io/github-action@v2
         with:
           build: yarn playground:build

admin/src/components/Collections.js

@@ -6,9 +6,21 @@
 import React, { memo, useState, useEffect } from 'react'
 import { request } from 'strapi-helper-plugin'
 import pluginId from '../pluginId'
-import { Table } from '@buffetjs/core'
+import { Table, Button } from '@buffetjs/core'
 import { errorNotifications, successNotification } from '../utils/notifications'
 import { Wrapper } from '../components/Wrapper'
+import styled from 'styled-components'
+
+export const UpdateButton = styled(Button)`
+  display: flex;
+  align-items: center;
+`
+
+export const ReloadButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  color: delete;
+`
 
 const headers = [
   {
@@ -18,53 +30,77 @@ const headers = [
   {
     name: 'Status',
     value: 'status'
+  },
+  {
+    name: 'Hooks',
+    value: 'hooked'
   }
 ]
 
 const Collections = ({ updateCredentials }) => {
   const [collectionsList, setCollectionsList] = useState([])
   const [updatedCollections, setUpdatedCollections] = useState(false)
+  const [needReload, setNeedReload] = useState(false)
 
-  const updateStatus = async ({ indexUid, updateId }) => {
-    const response = await request(`/${pluginId}/indexes/${indexUid}/update/${updateId}`, {
-      method: 'GET'
-    })
-    const { error } = response
-    if (error) errorNotifications(error)
-    else successNotification({ message: `${indexUid} has all its documents indexed` })
-    setUpdatedCollections(false)
+  const updateStatus = async ({ collection, updateId }) => {
+    if (updateId) {
+      const response = await request(`/${pluginId}/indexes/${collection}/update/${updateId}`, {
+        method: 'GET'
+      })
+      const { error } = response
+      if (error) errorNotifications(error)
+      else successNotification({ message: `${collection} has all its documents indexed` })
+      setUpdatedCollections(false)
+    }
   }
 
-  const addCollectionToMeiliSearch = async ({ name: indexUid }) => {
-    const update = await request(`/${pluginId}/collections/`, {
-      method: 'POST',
-      body: {
-        indexUid
-      }
+  const addCollection = async ({ name: collection }) => {
+    const update = await request(`/${pluginId}/collections/${collection}/`, {
+      method: 'POST'
     })
     if (update.error) {
       errorNotifications(update)
     } else {
-      successNotification({ message: `${indexUid} is created!` })
+      successNotification({ message: `${collection} is created!`, duration: 4000 })
       setCollectionsList(prev => prev.map(col => {
-        if (col.name === indexUid) col.status = 'enqueued'
+        if (col.name === collection) col.status = 'enqueued'
         return col
       }))
-      updateStatus({ indexUid, updateId: update.updateId })
+      updateStatus({ collection, updateId: update.updateId })
+    }
+  }
+
+  const updateCollections = async ({ collection }) => {
+    try {
+      const update = await request(`/${pluginId}/collections/${collection}/`, {
+        method: 'PUT'
+      })
+      if (update.error) {
+        errorNotifications(update)
+      } else {
+        successNotification({ message: `${collection} updated!` })
+        setCollectionsList(prev => prev.map(col => {
+          if (col.name === collection) col.status = 'enqueued'
+          return col
+        }))
+        updateStatus({ collection, updateId: update.updateId })
+      }
+    } catch (e) {
+      console.error(e)
     }
   }
 
-  const deleteIndex = async ({ name: indexUid }) => {
-    const res = await request(`/${pluginId}/indexes/${indexUid}/`, {
+  const removeCollection = async ({ name: collection }) => {
+    const res = await request(`/${pluginId}/indexes/${collection}/`, {
       method: 'DELETE'
     })
     if (res.error) errorNotifications(res)
-    else successNotification({ message: `${indexUid} collection is removed from MeiliSearch` })
+    else successNotification({ message: `${collection} collection is removed from MeiliSearch!`, duration: 4000 })
   }
 
   const addOrRemoveCollection = async (row) => {
-    if (row._isChecked) await deleteIndex(row)
-    else await addCollectionToMeiliSearch(row)
+    if (row._isChecked) await removeCollection(row)
+    else await addCollection(row)
     setUpdatedCollections(false)
   }
 
@@ -74,17 +110,49 @@ const Collections = ({ updateCredentials }) => {
     })
     if (error) errorNotifications(res)
     else {
+      const reloadNeeded = (indexed, hooked) => {
+        if ((indexed && !hooked) || (!indexed && hooked)) {
+          return 'Reload needed'
+        } else if (indexed && hooked) {
+          return 'Active'
+        } else {
+          return ''
+        }
+      }
+
       const colStatus = collections.map(col => (
         {
           ...col,
+          status: (col.indexed) ? 'Indexed In MeiliSearch' : 'Not in MeiliSearch',
+          hooked: reloadNeeded(col.indexed, col.hooked),
           _isChecked: col.indexed
         }
       ))
+      const reloading = colStatus.find(col => col.hooked === 'Reload needed')
+      setNeedReload(reloading)
       setCollectionsList(colStatus)
       setUpdatedCollections(true)
     }
   }
 
+  const reload = async () => {
+    try {
+      strapi.lockApp({ enabled: true })
+      const { error, ...res } = await request(`/${pluginId}/reload`, {
+        method: 'GET'
+      }, true)
+      if (error) {
+        errorNotifications(res)
+        strapi.unlockApp()
+      } else {
+        window.location.reload()
+      }
+    } catch (err) {
+      strapi.unlockApp()
+      errorNotifications({ message: 'Could not reload the server' })
+    }
+  }
+
   useEffect(() => {
     setUpdatedCollections(false)
   }, [updateCredentials])
@@ -104,7 +172,27 @@ const Collections = ({ updateCredentials }) => {
                 onSelect={(row) => {
                   addOrRemoveCollection(row)
                 }}
+                rowLinks={[
+                  {
+                    icon: <UpdateButton forwardedAs='span'>Update</UpdateButton>,
+                    onClick: data => {
+                      updateCollections({ collection: data.name })
+                    }
+                  }
+                ]}
               />
+              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                  {
+                  needReload && <Button
+                    color="delete"
+                    className="reload_button"
+                    onClick={() => { reload() }}
+                    style={{ marginTop: '20px' }}
+                                >
+                      Reload Server
+                  </Button>
+                }
+              </div>
           </Wrapper>
       </div>
   )

admin/src/utils/notifications.js

@@ -3,15 +3,16 @@ export function errorNotifications ({ message, link }) {
     title: 'Operation on MeiliSearch failed',
     type: 'warning',
     message: message,
-    ...(link ? { link: { url: link, label: 'more information' } } : {}),
-    timeout: 4000
+    ...(link && { link: { url: link, label: 'learn more' } }),
+    blockTransition: true // The user has to close the error notification manually
   })
 }
 
-export function successNotification ({ message }) {
+export function successNotification ({ message, duration = 4000, link }) {
   strapi.notification.toggle({
     type: 'success',
     message: message,
-    timeout: 4000
+    ...(link && { link: { url: link, label: 'learn more' } }),
+    timeout: duration
   })
 }

assets/collections.png

@@ -0,0 +1,109 @@
+'use strict'
+
+/**
+ * An asynchronous bootstrap function that runs before
+ * your application gets started.
+ *
+ * This gives you an opportunity to set up your data model,
+ * run jobs, or perform some special logic.
+ *
+ * See more details here: https://strapi.io/documentation/developer-docs/latest/concepts/configurations.html#bootstrap
+ */
+
+const meilisearch = {
+  http: (client) => strapi.plugins.meilisearch.services.http(client),
+  client: (credentials) => strapi.plugins.meilisearch.services.client(credentials),
+  store: () => strapi.plugins.meilisearch.services.store,
+  lifecycles: () => strapi.plugins.meilisearch.services.lifecycles
+}
+
+async function getClient (credentials) {
+  const client = meilisearch.client(credentials)
+  return await meilisearch.http(client)
+}
+
+async function getIndexes (client) {
+  try {
+    return client.getIndexes()
+  } catch (e) {
+    return []
+  }
+}
+
+async function getCredentials () {
+  const store = await meilisearch.store()
+  const apiKey = await store.getStoreKey('meilisearch_api_key')
+  const host = await store.getStoreKey('meilisearch_host')
+  return { apiKey, host }
+}
+
+function addHookedCollectionsToStore ({ store, collections }) {
+  store.set({
+    key: 'meilisearch_hooked',
+    value: collections
+  })
+}
+
+async function getHookedCollectionsFromStore ({ store }) {
+  return store.get({ key: 'meilisearch_hooked' })
+}
+
+function addLifecycles ({ client, collections }) {
+  // Add lifecyles
+  collections.map(collection => {
+    const model = strapi.models[collection]
+    const meilisearchLifecycles = Object.keys(meilisearch.lifecycles())
+    model.lifecycles = model.lifecycles || {}
+
+    meilisearchLifecycles.map(lifecycleName => {
+      const fn = model.lifecycles[lifecycleName] || (() => {})
+      model.lifecycles[lifecycleName] = (data) => {
+        fn(data)
+        meilisearch.lifecycles()[lifecycleName](data, collection, client)
+      }
+    })
+  })
+}
+
+async function initHooks (store) {
+  try {
+    const credentials = await getCredentials()
+    const getHookedCollections = await getHookedCollectionsFromStore({ store })
+    // If hooked collection is not found it means that no MeiliSearch
+    // Indexes are to be hooked. Meaning we do not have to add any lifecycle.
+    if (credentials.host && getHookedCollections) {
+      const client = await getClient(credentials)
+      // get list of indexes in MeiliSearch Instance
+      const indexes = (await getIndexes(client)).map(index => index.uid)
+
+      // Collections in Strapi
+      const models = strapi.models
+
+      // get list of Indexes In MeilISearch that are Collections in Strapi
+      const indexedCollections = Object.keys(models).filter(model => indexes.includes(model))
+      addLifecycles({
+        collections: indexedCollections,
+        client
+      })
+      addHookedCollectionsToStore({
+        collections: indexedCollections,
+        store
+      })
+    }
+
+    // Add collections to hooked store
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+module.exports = async () => {
+  const store = strapi.store({
+    environment: strapi.config.environment,
+    type: 'plugin',
+    name: 'meilisearch_store'
+  })
+  strapi.plugins.meilisearch.store = store
+
+  await initHooks(store)
+}

assets/credentials.png

@@ -0,0 +1,21 @@
+'use strict'
+
+/**
+ * Cron config that gives you an opportunity
+ * to run scheduled jobs.
+ *
+ * The cron format consists of:
+ * [SECOND (optional)] [MINUTE] [HOUR] [DAY OF MONTH] [MONTH OF YEAR] [DAY OF WEEK]
+ *
+ * See more details here: https://strapi.io/documentation/developer-docs/latest/concepts/configurations.html#cron-tasks
+ */
+
+module.exports = {
+  /**
+   * Simple example.
+   * Every monday at 1am.
+   */
+  // '0 1 * * 1': () => {
+  //
+  // }
+}