@localazy/strapi-plugin 0.1.12 → 0.1.13-rc.1

package/.eslintrc

@@ -1,10 +1,13 @@
 {
-  // "extends": "@strapi-community",
+  "extends": "@strapi-community",
   "env": {
     "jest/globals": true,
-    "es6": true
+    "es6": true,
+    "node": true
   },
-  "plugins": ["jest"],
+  "plugins": [
+    "jest"
+  ],
   "parserOptions": {
     "ecmaVersion": "latest"
   }

package/.github/workflows/.build.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: 14.x     
+          node-version: 16.x
       - name: Install dependencies
         run: npm ci
       - name: Run unit tests

package/admin/src/index.js

@@ -12,6 +12,20 @@ const SETTINGS_SETUP = [
     intlId: `localazy_settings`,
     sectionDefaultLabel: "Localazy Settings",
     links: [
+      {
+        linkId: `${pluginId}-settings-global`,
+        intlId: `general`,
+        defaultLabel: "Global Settings",
+        to: `/settings/${pluginId}/global-settings`,
+        Component: async () => {
+          const component = await import("./pages/PluginSettings");
+
+          return component;
+        },
+        permissions: [
+          // TODO: only allow access to this page if the user has the right permissions
+        ],
+      },
       {
         linkId: `${pluginId}-settings-content-transfer-setup`,
         intlId: `content_transfer_setup`,
@@ -61,7 +75,7 @@ export default {
         },
       },
       [
-        // links
+        // General
         {
           id: SETTINGS_SETUP[0].links[0].linkId,
           intlLabel: {
@@ -72,6 +86,17 @@ export default {
           Component: SETTINGS_SETUP[0].links[0].Component,
           permissions: SETTINGS_SETUP[0].links[0].permissions,
         },
+        // Content Transfer Setup
+        {
+          id: SETTINGS_SETUP[0].links[1].linkId,
+          intlLabel: {
+            id: SETTINGS_SETUP[0].links[1].intlId,
+            defaultMessage: SETTINGS_SETUP[0].links[1].defaultLabel,
+          },
+          to: SETTINGS_SETUP[0].links[1].to,
+          Component: SETTINGS_SETUP[0].links[1].Component,
+          permissions: SETTINGS_SETUP[0].links[1].permissions,
+        },
       ]
     );
     app.registerPlugin({

package/admin/src/modules/@common/components/LanguagesSelector/index.js

@@ -0,0 +1,69 @@
+/* eslint-disable react/require-default-props */
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import cloneDeep from "lodash-es/cloneDeep";
+import { Select, Option } from '@strapi/design-system/Select';
+
+import "../../../../i18n";
+
+function LanguagesSelector(props) {
+  /**
+   * Translation function
+   */
+  const { t } = useTranslation();
+
+  /**
+   * Selected languages
+   */
+  const [selectedLanguages, setSelectedLanguages] = useState([]);
+
+  const onChange = (values) => {
+    setSelectedLanguages(values);
+    props.onChange(cloneDeep(values));
+  }
+
+  useEffect(() => {
+    const existingPreselectedLanguages =
+      props.projectLanguages
+        .filter(lang => props.preselectedLanguages.includes(lang.code))
+        .map(lang => lang.code);
+
+    setSelectedLanguages(existingPreselectedLanguages);
+  }, [props.projectLanguages, props.preselectedLanguages]);
+
+  return (
+    <Select
+      label={props.label || t("common.select_languages")}
+      hint={props.hint || t("common.select_languages")}
+      clearLabel={t("plugin_settings.clear")}
+      placeholder={props.placeholder || t("common.select_languages")}
+      onClear={() => setSelectedLanguages([])}
+      value={selectedLanguages || []}
+      onChange={(values) => onChange(values)}
+      multi
+      withTags
+    >
+      {props.projectLanguages.map(lang => (
+        <Option
+          key={lang.id}
+          value={lang.code}
+        >
+          {`${lang.name} (${lang.code})`}
+        </Option>
+      ))}
+    </Select>
+  );
+}
+
+LanguagesSelector.propTypes = {
+  label: PropTypes.string,
+  hint: PropTypes.string,
+  placeholder: PropTypes.string,
+  projectLanguages: PropTypes.array.isRequired,
+  preselectedLanguages: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+
+export default LanguagesSelector;

package/admin/src/modules/@common/locale/en.js

@@ -10,4 +10,5 @@ export default {
   report_will_be_available_after_an_action:
     "Report will be available after performing an action...",
   report: "Report",
+  select_languages: "Select languages",
 };

package/admin/src/modules/localazy-download/locale/en.js

@@ -17,4 +17,7 @@ export default {
   make_sure_note_a: "Make sure the translations are approved in Localazy, otherwise they ",
   make_sure_note_b: "will not ",
   make_sure_note_c: "be downloaded to Strapi.",
+  ui_languages: "Select languages to download",
+  ui_languages_info: "Select translations of which languages wil be downloaded from Localazy",
+  ui_languages_placeholder: "Download all languages",
 };

package/admin/src/modules/plugin-settings/components/ContentTransferSetup/index.js

@@ -299,8 +299,7 @@ function ContentTransferSetup() {
               </Box>
             )}
           </Box>
-        )
-        }
+        )}
       </Box>
     </>
   );

package/admin/src/modules/plugin-settings/components/GlobalSettings/index.js

@@ -0,0 +1,269 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import cloneDeep from "lodash-es/cloneDeep";
+import { HeaderLayout } from "@strapi/design-system/Layout";
+import Check from "@strapi/icons/Check";
+import { Box } from "@strapi/design-system/Box";
+import { Button } from "@strapi/design-system/Button";
+import { ToggleInput } from '@strapi/design-system/ToggleInput';
+import { Select, Option } from '@strapi/design-system/Select';
+import { Alert } from "@strapi/design-system/Alert";
+import { Redirect } from "react-router-dom";
+import { Flex } from "@strapi/design-system/Flex";
+import { Divider } from "@strapi/design-system/Divider";
+import { Typography } from "@strapi/design-system/Typography";
+import isEqual from "lodash-es/isEqual";
+import set from "lodash-es/set";
+import LanguagesSelector from "../../../@common/components/LanguagesSelector";
+import PluginSettingsService from "../../services/plugin-settings-service";
+import StrapiUsersService from "../../services/strapi-users-service";
+import { getLocalazyIdentity } from "../../../../state/localazy-identity";
+import ProjectService from "../../../@common/services/project-service";
+import pluginId from "../../../../pluginId";
+
+import "../../../../i18n";
+
+function GlobalSettings() {
+  /**
+   * Translation function
+   */
+  const { t } = useTranslation();
+
+  /**
+   * Is user logged in
+   */
+  const [localazyIdentity] = getLocalazyIdentity();
+  const hasLocalazyIdentity = () => !!localazyIdentity.accessToken;
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  /**
+   * Project Languages without default language
+   */
+  const [projectLanguages, setProjectLanguages] = useState([]);
+
+  /**
+   * Component state
+   */
+  const [isLoading, setIsLoading] = useState(true);
+  const [showSavedAlert, setShowSavedAlert] = useState(false);
+
+  /**
+   * Admin Panel Users
+   */
+  const [users, setUsers] = useState([]);
+
+  /**
+   * Global Settings form model
+   */
+  const [originalFormModel, setOriginalFormModel] = useState([]);
+  const [formModel, setFormModel] = useState([]);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  const onCancelClick = () => {
+    setFormModel(cloneDeep(originalFormModel));
+    setHasUnsavedChanges(false);
+  }
+
+  /**
+   * Save the Global Settings
+   */
+  const saveGlobalSettings = async (data) => {
+    try {
+      await PluginSettingsService.updatePluginSettings(data);
+      setOriginalFormModel(cloneDeep(data));
+      setHasUnsavedChanges(false);
+      setShowSavedAlert(true);
+    } catch (e) {
+      throw e.data;
+    }
+  };
+
+  /**
+   * Patch Form Model
+   */
+  const patchFormModel = (key, value) => {
+    const newFormModel = cloneDeep(formModel);
+    set(newFormModel, key, value);
+    setFormModel(newFormModel);
+    setHasUnsavedChanges(!isEqual(originalFormModel, newFormModel));
+  };
+
+  useEffect(() => {
+    async function fetchData() {
+      setIsLoading(true);
+      setIsLoggedIn(hasLocalazyIdentity());
+
+      if (!hasLocalazyIdentity()) {
+        setIsLoading(false);
+
+        return;
+      }
+
+      const project = await ProjectService.getConnectedProject();
+      const projectLanguagesWithoutDefaultLanguage =
+        project?.languages?.filter(language => language.id !== project.sourceLanguage) || [];
+      setProjectLanguages(projectLanguagesWithoutDefaultLanguage);
+
+      const globalSettings = await PluginSettingsService.getPluginSettings();
+
+      setFormModel(globalSettings);
+      setOriginalFormModel(cloneDeep(globalSettings));
+
+      const users = await StrapiUsersService.getAdminPanelUsers();
+      setUsers(users);
+
+      setIsLoading(false);
+    }
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      {!isLoading && !isLoggedIn && <Redirect to={`${process.env.ADMIN_PATH}plugins/${pluginId}/login`} />}
+
+      <HeaderLayout
+        title={t("plugin_settings.global_settings")}
+        subtitle={t("plugin_settings.global_settings_description")}
+        primaryAction={
+          <Flex gap={2}>
+            <Button
+              variant="secondary"
+              disabled={!hasUnsavedChanges}
+              onClick={onCancelClick}
+            >
+              {t("plugin_settings.cancel")}
+            </Button>
+            <Button
+              startIcon={<Check />}
+              disabled={!hasUnsavedChanges}
+              onClick={() => { saveGlobalSettings(formModel) }}
+            >
+              {t("plugin_settings.save")}
+            </Button>
+          </Flex>
+        }
+        as="h2"
+      />
+      <Box marginRight={10} marginLeft={10}>
+        {!isLoading && showSavedAlert && (
+          <Box marginBottom={8}>
+            <Alert
+              onClose={() => showSavedAlert(false)}
+              closeLabel={t("plugin_settings.close")}
+              title={t("plugin_settings.content_transfer_setup_saved")}
+              variant="success"
+            >
+              {t("plugin_settings.global_settings_saved_successfully")}
+            </Alert>
+          </Box>
+        )}
+        {!isLoading && (
+          <Box
+            background="neutral0"
+            padding={7}
+            paddingTop={6}
+            shadow="tableShadow"
+            hasRadius
+          >
+            {/* Upload Settings */}
+            <Typography
+              variant="delta"
+              textColor="neutral800"
+            >
+              {t("plugin_settings.upload_settings")}
+            </Typography>
+            {/* Allow automated upload to Localazy */}
+            <br /><br />
+            <ToggleInput
+              label={t("plugin_settings.allow_automated_upload_to_localazy")}
+              hint={t("plugin_settings.allow_automated_upload_to_localazy_info")}
+              offLabel={t("plugin_settings.off")}
+              onLabel={t("plugin_settings.on")}
+              checked={typeof formModel?.upload?.allowAutomated === "boolean" ? formModel.upload.allowAutomated : false}
+              onChange={e => patchFormModel("upload.allowAutomated", e.target.checked)} />
+            {/* Automated upload triggers */}
+            <br /><br />
+            <Select
+              label={t("plugin_settings.automated_upload_triggers")}
+              hint={t("plugin_settings.automated_upload_triggers_info")}
+              clearLabel={t("plugin_settings.clear")}
+              placeholder={t("plugin_settings.automated_upload_triggers_placeholder")}
+              onClear={() => patchFormModel("upload.automatedTriggers", [])}
+              value={formModel?.upload?.automatedTriggers || []}
+              onChange={(values) => patchFormModel("upload.automatedTriggers", values)}
+              disabled={typeof formModel?.upload?.allowAutomated === "boolean" ? !formModel.upload.allowAutomated : true}
+              multi
+              withTags
+            >
+              <Option value="created">{t("plugin_settings.creating_new_data_entry")}</Option>
+              <Option value="updated">{t("plugin_settings.editing_data_entry")}</Option>
+            </Select>
+            {/* Deprecate source keys on deletion */}
+            <br /><br />
+            <ToggleInput
+              label={t("plugin_settings.deprecate_source_keys_on_delete")}
+              hint={t("plugin_settings.deprecate_source_keys_on_delete_info")}
+              offLabel={t("plugin_settings.off")}
+              onLabel={t("plugin_settings.on")}
+              checked={typeof formModel?.upload?.allowDeprecate === "boolean" ? formModel.upload.allowDeprecate : false}
+              onChange={e => patchFormModel("upload.allowDeprecate", e.target.checked)} />
+            <br /><br />
+            <Divider />
+            {/* Download Settings */}
+            <br /><br />
+            <Typography
+              variant="delta"
+              textColor="neutral800"
+            >
+              {t("plugin_settings.download_settings")}
+            </Typography>
+            {/* Processing of download webhook */}
+            <br /><br />
+            <ToggleInput
+              label={t("plugin_settings.processing_of_download_webhook")}
+              hint={t("plugin_settings.processing_of_download_webhook_info")}
+              offLabel={t("plugin_settings.off")}
+              onLabel={t("plugin_settings.on")}
+              // eslint-disable-next-line max-len
+              checked={typeof formModel?.download?.processDownloadWebhook === "boolean" ? formModel.download.processDownloadWebhook : true}
+              onChange={e => patchFormModel("download.processDownloadWebhook", e.target.checked)} />
+            {/* Webhook actions author */}
+            <br /><br />
+            <Select
+              label={t("plugin_settings.webhook_author")}
+              hint={t("plugin_settings.webhook_author_info")}
+              clearLabel={t("plugin_settings.clear")}
+              placeholder={t("plugin_settings.webhook_author_placeholder")}
+              onClear={() => patchFormModel("download.webhookAuthorId", null)}
+              value={formModel?.download?.webhookAuthorId || null}
+              onChange={(value) => patchFormModel("download.webhookAuthorId", value)}
+            >
+              {users.map(user => (
+                <Option
+                  key={user.id}
+                  value={user.id}
+                >
+                  {`${user.firstname} ${user.lastname} (${user.email})`}
+                </Option>
+              ))}
+            </Select>
+            {/* Webhook languages selector */}
+            <br /><br />
+            <LanguagesSelector
+              preselectedLanguages={formModel?.download?.webhookLanguages || []}
+              projectLanguages={projectLanguages}
+              onChange={(languages) => patchFormModel("download.webhookLanguages", languages)}
+              label={t("plugin_settings.webhook_languages")}
+              hint={t("plugin_settings.webhook_languages_info")}
+              placeholder={t("plugin_settings.webhook_languages_placeholder")}
+            />
+
+          </Box>
+        )}
+      </Box>
+    </>
+  );
+}
+
+export default GlobalSettings;

package/admin/src/modules/plugin-settings/locale/en.js

@@ -1,10 +1,43 @@
 export default {
-  content_transfer_setup: "Content Transfer Setup",
-  content_transfer_setup_description:
-    "Select which content type fields will be uploaded to Localazy",
   save: "Save",
   cancel: "Cancel",
   close: "Close",
+  off: "Off",
+  on: "On",
+  clear: "Clear",
+
+  /* Global Settings */
+  global_settings: "Global Settings",
+  global_settings_description: "Setup the Localazy plugin upload/download options.",
+
+  upload_settings: "Upload settings",
+  allow_automated_upload_to_localazy: "Allow automated upload to Localazy",
+  allow_automated_upload_to_localazy_info: "Content will be automatically uploaded to Localazy after its creation or update.",
+  automated_upload_triggers: "Automated upload triggers",
+  automated_upload_triggers_placeholder: "Select triggers",
+  creating_new_data_entry: "Creating new data entry",
+  editing_data_entry: "Editing data entry",
+  automated_upload_triggers_info: "Select actions that will trigger an upload of Strapi data to Localazy.",
+
+  deprecate_source_keys_on_delete: "Deprecate source keys on deletion",
+  deprecate_source_keys_on_delete_info: "Source keys will be automatically set as deprecated if an entry in source language is deleted in Strapi",
+
+  download_settings: "Download settings",
+  processing_of_download_webhook: "Processing of download webhook",
+  processing_of_download_webhook_info: "You can temporarily disable the webhook processing and the information will be scrapped.",
+  webhook_author: "Webhook actions author",
+  webhook_author_info: "Select the author signed under the webhook actions (required by Strapi for certain actions, e.g. creating a locale).",
+  webhook_author_placeholder: "Select webhook actions author",
+  webhook_languages: "Allowed webhook languages",
+  webhook_languages_info: "Select the languages from Localazy. Translations of selected languages would be downloaded. If no language is selected, all translations will be downloaded.",
+  webhook_languages_placeholder: "Download all languages",
+
+  global_settings_saved_successfully: "Global Settings were saved",
+
+  /* Content Transfer Setup */
+  content_transfer_setup: "Content Transfer Setup",
+  content_transfer_setup_description:
+    "Select which content type fields will be uploaded to Localazy",
 
   content_transfer_setup_saved: "Content Transfer Setup saved",
   content_transfer_setup_saved_successfully:
@@ -23,4 +56,6 @@ export default {
   step_3: "Check <1>Enable localization for this Content-Type</1>",
   step_4: "Repeat for all Content-Types you want to translate",
   step_5: "Return to this screen and finish the transfer setup",
+
+  general: "General",
 };

package/admin/src/modules/plugin-settings/services/strapi-users-service.js

@@ -0,0 +1,26 @@
+/* eslint-disable no-useless-catch */
+import createAxiosInstance from "../../../utils/createAxiosInstance";
+
+const axiosInstance = createAxiosInstance("/admin/users");
+
+export default class PluginSettingsService {
+  static async getAdminPanelUsers() {
+    try {
+      // TODO: update to return all users; not just the first 100
+      const result = await axiosInstance.get(
+        "",
+        {
+          params: {
+            "pageSize": 100,
+            "page": 1,
+            "sort": "firstname"
+          }
+        }
+      );
+
+      return result.data.data.results;
+    } catch (e) {
+      throw e;
+    }
+  }
+}

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

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
+import cloneDeep from "lodash-es/cloneDeep";
+import set from "lodash-es/set";
 import { HeaderLayout } from "@strapi/design-system/Layout";
 import { Button } from "@strapi/design-system/Button";
 import DownloadIcon from "@strapi/icons/Download";
@@ -20,6 +22,8 @@ import { getLocalazyIdentity } from "../../state/localazy-identity";
 import ProductAnalyticsService from "../../modules/@common/services/product-analytics-service";
 import PluginSettingsService from "../../modules/plugin-settings/services/plugin-settings-service";
 import { PLUGIN_ROUTES } from "../../modules/@common/utils/redirect-to-plugin-route";
+import LanguagesSelector from "../../modules/@common/components/LanguagesSelector";
+import ProjectService from "../../modules/@common/services/project-service";
 
 function Download(props) {
   const { t } = useTranslation();
@@ -36,13 +40,36 @@ function Download(props) {
   const [isDownloading, setIsDownloading] = useState(false);
 
   /**
-     * localazy identity / access token
-     */
+   * Localazy identity / access token
+   */
   const [localazyIdentity] = getLocalazyIdentity();
   const onTranslateInLocalazyClick = () => {
     window.open(localazyIdentity.project.url, "_blank");
   }
 
+  /**
+   * Project Languages without default language
+   */
+  const [projectLanguages, setProjectLanguages] = useState([]);
+
+  /**
+   * Global Settings form model
+   */
+  const [formModel, setFormModel] = useState([]);
+
+  const onDownloadLanguagesChange = (languages) => {
+    const newFormModel = cloneDeep(formModel);
+    set(newFormModel, 'download.uiLanguages', languages);
+    setFormModel(newFormModel);
+
+    try {
+      PluginSettingsService.updatePluginSettings(newFormModel);
+    } catch (e) {
+      console.error(e.message);
+    }
+  };
+
+
   const onDownloadClick = async () => {
     setIsDownloading(true);
     const result = await LocalazyDownloadService.download();
@@ -71,6 +98,14 @@ function Download(props) {
       setModelChanged(await hasModelChanged());
       setLocalesIncompatible(!(await areLocalesCompatible()));
 
+      const project = await ProjectService.getConnectedProject();
+      const projectLanguagesWithoutDefaultLanguage =
+        project?.languages?.filter(language => language.id !== project.sourceLanguage) || [];
+      setProjectLanguages(projectLanguagesWithoutDefaultLanguage);
+
+      const globalSettings = await PluginSettingsService.getPluginSettings();
+      setFormModel(globalSettings);
+
       PluginSettingsService.updatePluginSettings({ defaultRoute: PLUGIN_ROUTES.DOWNLOAD });
 
       setIsLoading(false);
@@ -124,6 +159,18 @@ function Download(props) {
             <Typography variant="omega">
               {t("download.make_sure_note_c")}
             </Typography>
+            <Box
+              paddingTop={6}
+            >
+              <LanguagesSelector
+                preselectedLanguages={formModel?.download?.uiLanguages || []}
+                projectLanguages={projectLanguages}
+                onChange={(languages) => onDownloadLanguagesChange(languages)}
+                label={t("download.ui_languages")}
+                hint={t("download.ui_languages_info")}
+                placeholder={t("download.ui_languages_placeholder")}
+              />
+            </Box>
             <Box
               paddingTop={4}
               paddingBottom={4}

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

@@ -3,12 +3,22 @@ import { Box } from "@strapi/design-system/Box";
 import { Switch, Route } from "react-router-dom";
 import { ThemeProvider } from "@strapi/design-system/ThemeProvider";
 import { lightTheme } from "@strapi/design-system/themes";
+import { useTranslation } from "react-i18next";
 import pluginId from "../../pluginId";
 import ContentTransferSetup from "../../modules/plugin-settings/components/ContentTransferSetup";
+import GlobalSettings from "../../modules/plugin-settings/components/GlobalSettings";
 import LocalazyUserService from "../../modules/user/services/localazy-user-service";
 import { setLocalazyIdentity } from "../../state/localazy-identity";
+import Loader from "../../modules/@common/components/PluginPageLoader";
+
+import "../../i18n";
 
 function PluginSettings() {
+  /**
+     * Translation function
+     */
+  const { t } = useTranslation();
+
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
@@ -25,17 +35,23 @@ function PluginSettings() {
   }, []);
 
   return (
-    !isLoading && (
-      <ThemeProvider theme={lightTheme}>
-        <Box padding={8}>
-          <Switch>
-            <Route path={`/settings/${pluginId}/content-transfer-setup`} exact>
-              <ContentTransferSetup />
-            </Route>
-          </Switch>
-        </Box>
-      </ThemeProvider>
-    )
+    <>
+      {isLoading && <Loader>{t("common.loading_content")}</Loader>}
+      {!isLoading && (
+        <ThemeProvider theme={lightTheme}>
+          <Box padding={8}>
+            <Switch>
+              <Route path={`/settings/${pluginId}/content-transfer-setup`} exact>
+                <ContentTransferSetup />
+              </Route>
+              <Route path={`/settings/${pluginId}/global-settings`} exact>
+                <GlobalSettings />
+              </Route>
+            </Switch>
+          </Box>
+        </ThemeProvider>
+      )}
+    </>
   );
 }
 

package/admin/src/utils/createAxiosInstance.js

@@ -23,6 +23,8 @@ const createAxiosInstance = (baseUrl = null) => {
         Authorization: `Bearer ${auth.getToken()}`,
         Accept: "application/json",
         "Content-Type": "application/json",
+        // Add this header to identify the request as initiated by the plugin
+        "X-Localazy-Initiated-By": "strapi-plugin-localazy",
       };
 
       return config;