@vegan-friendly/strapi-plugin-elasticsearch 0.0.11-alpha.6 → 0.0.11-alpha.7

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+}

package/README.md

@@ -16,10 +16,6 @@ via yarn:
 yarn add @geeky-biz/strapi-plugin-elasticsearch
 ```
 
-## Supported Strapi version
-
-The latest version of this plugin works for Strapi v5. For Strapi v4, please install the version 0.0.8 of this plugin.
-
 ## Plugin Configuration
 
 Within your Strapi project's `config/plugin.js`, enable the plugin and provide the configuration details:

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

@@ -0,0 +1,26 @@
+/**
+ *
+ * Initializer
+ *
+ */
+
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+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

@@ -0,0 +1,12 @@
+/**
+ *
+ * PluginIcon
+ *
+ */
+
+import React from 'react';
+import { Search } from '@strapi/icons';
+
+const PluginIcon = () => <Search />;
+
+export default PluginIcon;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Connector } from '@strapi/icons';
+import { Box } from '@strapi/design-system';
+import {
+  SubNav,
+  SubNavHeader,
+  SubNavSection,
+  SubNavSections,
+  SubNavLink,
+} from '@strapi/design-system/v2';
+import { NavLink } from 'react-router-dom';
+import pluginId from "../../pluginId";
+
+export const SubNavigation = ({activeUrl}) => {
+  const links = [ {
+    id: 1,
+    label : 'Setup Information',
+    icon : Connector,
+    to : `/plugins/${pluginId}/home`,
+  },
+  {
+    id: 2,
+    label : 'Configure Collections',
+    icon : Connector,
+    to : `/plugins/${pluginId}/configure-collections`,
+  },
+{
+  id: 3,
+  label : 'Indexing Run Logs',
+  icon : Connector,
+  to : `/plugins/${pluginId}/view-indexing-logs`,
+}];
+  return (<Box style={{
+        height: '100vh'
+      }} background="neutral200">
+            <SubNav ariaLabel="Settings sub nav">
+              <SubNavHeader label="Strapi Elasticsearch" />
+              <SubNavSections>
+                <SubNavSection>
+                  {links.map(link => link.icon && <SubNavLink 
+                  as={NavLink} to={link.to} icon={link.icon} key={link.id} >
+                      {link.label}
+                  </SubNavLink>)}
+                </SubNavSection>
+              </SubNavSections>
+            </SubNav>
+        </Box>);
+}

package/admin/src/index.js

@@ -0,0 +1,63 @@
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
+import pluginPkg from '../../package.json';
+import pluginId from './pluginId';
+import Initializer from './components/Initializer';
+import PluginIcon from './components/PluginIcon';
+
+const name = pluginPkg.strapi.name;
+
+export default {
+  register(app) {
+    app.addMenuLink({
+      to: `/plugins/${pluginId}`,
+      icon: PluginIcon,
+      intlLabel: {
+        id: `${pluginId}.plugin.name`,
+        defaultMessage: 'Elasticsearch',
+      },
+      Component: async () => {
+        const component = await import(/* webpackChunkName: "[request]" */ './pages/App');
+
+        return component;
+      },
+      permissions: [
+        // Uncomment to set the permissions of the plugin here
+        // {
+        //   action: '', // the action name should be plugin::plugin-name.actionType
+        //   subject: null,
+        // },
+      ],
+    });
+    app.registerPlugin({
+      id: pluginId,
+      initializer: Initializer,
+      isReady: false,
+      name,
+    });
+  },
+
+  bootstrap(app) {},
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map((locale) => {
+        return import(
+          /* webpackChunkName: "translation-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
+};

package/admin/src/pages/App/index.js

@@ -0,0 +1,29 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+import React from 'react';
+import { Switch, Route, Redirect } from 'react-router-dom';
+import { AnErrorOccurred } from '@strapi/helper-plugin';
+import pluginId from '../../pluginId';
+import ConfigureCollectionList from '../ConfigureCollectionList';
+import ConfigureCollection from '../ConfigureCollection';
+import ViewIndexingRunLog from '../ViewIndexingRunLog';
+import Homepage from '../Homepage';
+const App = () => {
+  return (
+      <Switch>
+        <Route path={`/plugins/${pluginId}`} render={() => (<Redirect to={`/plugins/${pluginId}/home`} />)} exact />
+        <Route path={`/plugins/${pluginId}/home`} component={Homepage} exact />
+        <Route path={`/plugins/${pluginId}/configure-collections`} component={ConfigureCollectionList} exact />
+        <Route path={`/plugins/${pluginId}/configure-collections/:collectionName`} component={ConfigureCollection} exact />
+        <Route path={`/plugins/${pluginId}/view-indexing-logs`} component={ViewIndexingRunLog} />        
+        <Route component={AnErrorOccurred} />
+      </Switch>
+  );
+};
+
+export default App;

package/admin/src/pages/ConfigureCollection/index.js

@@ -0,0 +1,225 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React, { useState, useEffect } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import axiosInstance  from '../../utils/axiosInstance';
+import  { SubNavigation } from '../../components/SubNavigation';;
+import { Box, Flex } from '@strapi/design-system';
+import { ToggleInput } from '@strapi/design-system';
+import { Link, useTracking } from '@strapi/helper-plugin';
+import pluginId from '../../pluginId';
+import { apiGetCollectionConfig, apiSaveCollectionConfig } from "../../utils/apiUrls";
+import { Alert } from '@strapi/design-system';
+import { Button } from '@strapi/design-system';
+import { ArrowLeft } from '@strapi/icons';
+import { Typography } from '@strapi/design-system';
+import { Loader, Textarea, TextInput } from '@strapi/design-system';
+import {LoadingIndicatorPage, useNotification} from '@strapi/helper-plugin';
+
+const loadConfigForCollection = (collectionName) => {
+    return axiosInstance.get(apiGetCollectionConfig(collectionName))
+        .then((resp) => resp.data);
+  } 
+
+const saveConfigForCollection = (collectionName, data) => {
+    return axiosInstance.post(apiSaveCollectionConfig(collectionName), {
+        data
+    })
+}
+
+const ConfigureField = ({config, index, setFieldConfig}) => {
+
+    const validateSubfieldsConfig = (conf) => {
+        if (conf && conf.length > 0)
+        {
+          try {
+            JSON.parse(conf);
+            return true;
+          } catch (e) {
+            return false;
+          }
+        }
+        else
+            return true;
+    }
+    
+    const updateIndex = (checked) => {
+        setFieldConfig({index, config: {...config, index: checked}})
+    }
+
+    const updateSubfieldConfig = (subfields) => {
+        const subfieldsConfigValid = validateSubfieldsConfig(subfields);
+        setFieldConfig({index, config: {...config, subfields, subfieldsConfigValid}})
+    }
+ 
+    const updateMappedFieldName = (mappedName) => {
+        setFieldConfig({index, config: {...config, searchFieldName: mappedName}})
+    }
+
+    return (
+        <Box background="neutral100" borderColor="neutral200" hasRadius index={index} 
+        padding={4}>
+            <Box paddingTop={2} paddingBottom={2}>
+            <Typography fontWeight="bold" textColor="neutral600">{config.name}</Typography>
+            </Box>
+            <Box paddingTop={2} paddingBottom={2}>
+            <ToggleInput label="Index" onLabel="Yes" offLabel="No"
+                checked={config.index} onChange={(e) => updateIndex(e.target.checked)} />
+            </Box>
+            <Box width="50%"  paddingTop={2} paddingBottom={2}>
+                <TextInput label="Maps to search field" placeholder="Enter field name" name="Search field" onChange={e => updateMappedFieldName(e.target.value)} value={config.searchFieldName || ""} />
+            </Box>
+            {
+                config.index && config.type && config.type === "dynamiczone" ? (
+                    <Box paddingTop={2} paddingBottom={2}>
+                    <Textarea 
+                    label="Dynamic zone fields to index" 
+                    error={config.subfieldsConfigValid === false ? 'Invalid indexing configuration' : undefined}
+                    onChange={e => updateSubfieldConfig(e.target.value)}
+                    >{config.subfields || ""}</Textarea>
+                    </Box>
+                ) : null
+            }
+            {
+                config.index && config.type && config.type === "component" ? (
+                    <Box paddingTop={2} paddingBottom={2}>
+                    <Textarea 
+                    label="Component fields to index" 
+                    error={config.subfieldsConfigValid === false ? 'Invalid indexing configuration' : undefined}
+                    onChange={e => updateSubfieldConfig(e.target.value)}
+                    >{config.subfields || ""}</Textarea>
+                    </Box>
+                ) : null
+            }
+        </Box>        
+    )
+}
+  
+const ConfigureCollection = () => {
+    const [isInProgress, setIsInProgress] = useState(false);
+    const [selectedCollection, setSelectedCollection] = useState(null);
+    const [collectionConfig, setCollectionConfig] = useState(null);
+
+    const params = useParams();
+    const toggleNotification = useNotification();
+    const updateCollectionsConfig = ({index, config}) => {
+        setCollectionConfig({
+            collectionName: collectionConfig.collectionName,
+            attributes: collectionConfig.attributes.map((e, idx) => index === idx ? config : e)
+        });
+    }
+
+    const saveCollectionConfig = () => {
+        if (collectionConfig && collectionConfig.collectionName)
+        {
+            const data = {}
+            data[collectionConfig.collectionName] = {}
+            for (let k=0; k<collectionConfig.attributes.length; k++)
+            {
+                const {name, ...attribs} = collectionConfig.attributes[k]
+                data[collectionConfig.collectionName][name] = attribs
+            }
+            setIsInProgress(true);
+            saveConfigForCollection(collectionConfig.collectionName, data)
+            .then((resp) => {
+                toggleNotification({
+                    type: "success", message: "The collection configuration is saved.", timeout: 5000
+                });
+            })
+            .catch((err) => {
+                toggleNotification({
+                    type: "warning", message: err.message || "An error was encountered.", timeout: 5000
+                });
+                console.log(err);
+            })
+            .finally(() => setIsInProgress(false));
+        }
+    }
+
+    useEffect(() => {
+        if (params && params.collectionName)
+            setSelectedCollection(params.collectionName)
+    }, [params]);
+
+    useEffect(() => {
+        if (selectedCollection)
+        {
+            loadConfigForCollection(selectedCollection)
+            .then((resp) => {
+                if (Object.keys(resp).length === 0)
+                {
+                    toggleNotification({
+                        type: "warning", message: 'No collection with the selected name exists.', timeout: 5000
+                    });
+                }
+                else
+                {
+                    const collectionName = Object.keys(resp)[0];
+                    const attributeNames = Object.keys(resp[collectionName]);
+                    const attributes = [];
+                    for (let s = 0; s<attributeNames.length; s++)
+                        attributes.push({name: attributeNames[s], ...resp[collectionName][attributeNames[s]]})
+                    const item = {collectionName, attributes};
+                    setCollectionConfig(item);
+                }
+            })
+            .catch((err) => {
+                toggleNotification({
+                    type: "warning", message: err.message || "An error was encountered.", timeout: 5000
+                });
+                console.log(err);
+            });    
+        }
+    }, [selectedCollection]);
+
+  if (collectionConfig === null)
+    return <LoadingIndicatorPage />;
+  else
+  return (
+    <Flex alignItems="stretch" gap={4}>
+        <SubNavigation />
+        <Box padding={8} background="neutral100" width="100%">
+                <Box paddingBottom={4}>
+                    <Link startIcon={<ArrowLeft />} to={`/plugins/${pluginId}/configure-collections/`}>
+                        Back
+                    </Link>
+                </Box>
+                {
+                    selectedCollection && (
+                        <Box paddingBottom={4}>
+                            <Typography variant="alpha">{selectedCollection}</Typography>
+                        </Box>
+                    )
+                }
+                {
+                    collectionConfig && (
+                        <>
+                        <Flex alignItems="stretch" gap={4} width="100%">
+                            <Box padding={8} background="neutral0" width="100%">
+                                <Box paddingBottom={2}>
+                                    <Typography variant="beta">Attributes</Typography>
+                                    {
+                                        collectionConfig.attributes.map((a, idx) => {
+                                            return <Box paddingTop={4} paddingBottom={4}><ConfigureField index={idx} config={a} 
+                                            setFieldConfig={updateCollectionsConfig} /></Box>
+                                        })
+                                    }
+                                </Box>
+                            </Box>
+                        </Flex>
+                        <Box paddingTop={4}>
+                            <Button loading={isInProgress} variant="default" onClick={saveCollectionConfig} >Save Configuration Changes</Button>
+                        </Box>
+                        </>
+                    ) 
+                }
+        </Box>
+    </Flex>
+  );
+};
+
+export default ConfigureCollection;

package/admin/src/pages/ConfigureCollectionList/index.js

@@ -0,0 +1,266 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React, { useState } from 'react';
+// import PropTypes from 'prop-types';
+import pluginId from '../../pluginId';
+import  { SubNavigation } from '../../components/SubNavigation';;
+import { Box, Flex } from '@strapi/design-system';
+import { useEffect } from 'react';
+import { Loader } from '@strapi/design-system';
+import { apiGetContentConfig, apiRequestCollectionIndexing,
+        apiImportContentConfig, apiExportContentConfig } from "../../utils/apiUrls";
+import axiosInstance  from '../../utils/axiosInstance';
+import { Alert } from '@strapi/design-system';
+import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system';
+import { Typography } from '@strapi/design-system';
+import { Pencil, Server } from '@strapi/icons';
+import { IconButton } from '@strapi/design-system';
+import { useHistory } from "react-router-dom";
+import { Button } from '@strapi/design-system';
+import { ModalLayout, ModalBody, ModalHeader, ModalFooter } from '@strapi/design-system';
+import { Textarea, TwoColsLayout, Divider } from '@strapi/design-system';
+import {LoadingIndicatorPage, useNotification} from '@strapi/helper-plugin';
+
+const exportContentConfig = () => {
+  return axiosInstance.get(apiGetContentConfig,
+    {
+      responseType: 'blob'
+    })
+    .then((response) => {
+      const href = URL.createObjectURL(response.data);
+      const link = document.createElement('a');
+      link.href = href;
+      link.setAttribute('download', 'strapi-plugin-elasticsearch-contentconfig.json'); 
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(href);
+  });
+}
+
+const importContentConfig = (conf) => {
+  return axiosInstance.post(apiImportContentConfig, {
+    data : conf
+  });
+}
+
+const loadContentConfig = () => {
+  return axiosInstance.get(apiGetContentConfig)
+      .then((resp) => resp.data);
+} 
+
+const scheduleCollectionIndexing = (collectionName) => {
+  return axiosInstance.get(apiRequestCollectionIndexing(collectionName))
+}
+
+const Configure = () => {
+  const [isInProgress, setIsInProgress] = useState(false);
+  const [displayImportModal, setDisplayImportModal] = useState(false);
+  const [isEnteredJsonValid, setIsEnteredJsonValid] = useState(true);
+  const [importJson, setImportJson] = useState(null);
+
+  const [config, setConfig] = useState(null);
+  const history = useHistory();
+  const toggleNotification = useNotification();
+
+  const performImport = () => {
+    const conf = importJson
+    console.log(conf && conf.length > 0)
+    if (conf && conf.length > 0) {
+      setIsInProgress(true);
+      importContentConfig(conf)
+      .then(() => {
+        toggleNotification({
+          type: "success", message: "Collections configuration imported. Please refresh this view.", timeout: 5000
+        });
+      })
+      .catch((err) => {
+        toggleNotification({
+          type: "warning", message: "Importing collections configuration failed. An error was encountered.", timeout: 5000
+        });
+        console.log(err);
+      })
+      .finally(() => setIsInProgress(false));
+    }
+  }
+  const performExport = () => {
+    setIsInProgress(true);
+    exportContentConfig()
+    .then(() => {
+      toggleNotification({
+        type: "success", message: "Collections configuration exported.", timeout: 5000
+      });
+    })
+    .catch((err) => {
+      toggleNotification({
+        type: "warning", message: "Exporting collections configuration failed. An error was encountered.", timeout: 5000
+      });
+      console.log(err);
+    })
+    .finally(() => setIsInProgress(false));
+  }
+
+  useEffect(() => {
+    if (importJson && importJson.length > 0)
+    {
+      try {
+        JSON.parse(importJson);
+        setIsEnteredJsonValid(true);
+      } catch (e) {
+          setIsEnteredJsonValid(false);
+      }
+    }
+  }, [importJson]);
+
+  useEffect(() => {
+    setIsInProgress(true);
+    loadContentConfig()
+    .then((resp) => {
+      const displayConfig = [];
+      for (let r=0; r < Object.keys(resp).length; r++)
+      {
+        const item = {collectionName: Object.keys(resp)[r], indexed: [], notIndexed: []};
+        const collectionName = item.collectionName;
+        for (let k=0; k < Object.keys(resp[collectionName]).length; k++)
+        {
+          const attribs = resp[collectionName];
+          for (let s=0; s < Object.keys(attribs).length; s++)
+          {
+            const attrName = Object.keys(attribs)[s]
+            const attr = attribs[attrName]
+            if (attr.index === false && !item.notIndexed.includes(attrName))
+              item.notIndexed.push(attrName)
+            else if (attr.index && !item.indexed.includes(attrName))
+              item.indexed.push(attrName)
+          }
+        }
+        displayConfig.push(item);
+      }
+      setConfig(displayConfig);
+    })
+    .catch((err) => {
+      toggleNotification({
+        type: "warning", message: "An error was encountered while fetching the configuration.", timeout: 5000
+      });
+      console.log(err);
+    })
+    .finally (() => {
+      setIsInProgress(false);
+    })
+  }, []);
+  if (config === null)
+    return <LoadingIndicatorPage />;
+  else
+  {
+    return (
+      <>
+      <Flex alignItems="stretch" gap={4}>
+        <SubNavigation activeUrl={'/configure-collections/'}/>
+          <Box padding={8} background="neutral100">
+            <Box paddingBottom={4}>
+              <Typography variant="alpha">Configure Collections</Typography>
+            </Box>
+            {
+              config && (
+                <TwoColsLayout startCol={
+                <Table colCount={4} rowCount={config.length}>
+                  <Thead>
+                    <Tr>
+                      <Th style={{width: "250px"}}>
+                        <Typography variant="sigma">Collection</Typography>
+                      </Th>
+                      <Th style={{width: "250px"}}>
+                        <Typography variant="sigma">Index</Typography>
+                      </Th>
+                      <Th style={{width: "250px"}}>
+                        <Typography variant="sigma">Do not Index</Typography>
+                      </Th> 
+                      <Th>
+                        <Typography variant="sigma">Actions</Typography>
+                      </Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {
+                      config.map((collection, idx) => {
+                        return (
+                          <Tr key={idx}>
+                            <Td>
+                              <Typography textColor="neutral600">{collection.collectionName}
+                              </Typography>
+                            </Td>
+                            <Td>
+                              {collection.indexed.map((i) =>
+                                <Box paddingBottom={2}>
+                                  <Typography textColor="neutral600">{i}
+                                  </Typography></Box>
+                              )}
+                            </Td>
+                            <Td>
+                              {collection.notIndexed.map((i) =>
+                                <Box paddingBottom={2}>
+                                  <Typography textColor="neutral600">{i}
+                                </Typography></Box>
+                              )}
+                            </Td>    
+                            <Td>
+                              <IconButton onClick={() => history.push(`/plugins/${pluginId}/configure-collections/${collection.collectionName}`)} label="Edit collection configuration" noBorder icon={<Pencil />} />  
+                              <IconButton onClick={() => scheduleCollectionIndexing(collection.collectionName)} label="Schedule indexing for all items in this collection" noBorder icon={<Server />} />  
+                            </Td>                  
+                          </Tr>
+                        );
+                      })
+                    }
+                  </Tbody>
+                </Table>}
+                endCol={<>
+                  <Box paddingLeft={2} paddingRight={2} paddingTop={4} paddingBottom={4} >
+                      <Box paddingTop={4} paddingBottom={4}>
+                          <Typography variant="pi" fontWeight="bold" textColor="neutral600" >CONFIG ACTIONS</Typography>
+                      </Box>
+                      <Divider />
+                      <Box paddingTop={4} paddingBottom={4}>
+                          <Box paddingTop={2} paddingBottom={2}>
+                              <Button loading={isInProgress} fullWidth variant="secondary" onClick={performExport}>Export</Button>
+                          </Box>
+                          <Box paddingTop={2} paddingBottom={2}>
+                              <Button loading={isInProgress} fullWidth variant="secondary" onClick={() => setDisplayImportModal(true)}>Import</Button>
+                          </Box>
+                      </Box>
+                  </Box>
+                  </>
+                  } />
+              )
+            }          
+            {displayImportModal && 
+              <ModalLayout onClose={() => setDisplayImportModal(false)} labelledBy="title">
+              <ModalHeader>
+              <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
+                Import Search Configuration
+              </Typography>
+            </ModalHeader>
+            <ModalBody>
+              <Textarea 
+              label="Configuration Json" 
+              error={!isEnteredJsonValid ? 'Invalid Json' : undefined}
+              onChange={e => setImportJson(e.target.value)}
+              >{importJson}</Textarea>
+            </ModalBody>
+            <ModalFooter startActions={<Button onClick={() => setDisplayImportModal(false)} variant="tertiary">
+                  Cancel
+                </Button>} endActions={<>
+                  <Button loading={isInProgress} onClick={performImport} disabled={!isEnteredJsonValid && !importJson.length>0}>Import</Button>
+                </>} />
+          </ModalLayout>}
+          </Box>
+          </Flex>
+      </>
+    );
+  }
+};
+
+export default Configure;