@localazy/strapi-plugin 0.1.0

package/admin/src/modules/@common/utils/get-nav.js

@@ -0,0 +1,35 @@
+import React from "react";
+import House from "@strapi/icons/House";
+import Download from "@strapi/icons/Download";
+import Upload from "@strapi/icons/Upload";
+import pluginId from "../../../pluginId";
+import i18n from "../../../i18n";
+
+const BASE_PATH = `/admin/plugins/${pluginId}`;
+const t = i18n.t;
+const gevNav = () => {
+  return [
+    {
+      id: "settings",
+      label: t("common.settings"),
+      description: t("settings.description"),
+      icon: <House />,
+      to: `${BASE_PATH}/settings`,
+    },
+    {
+      id: "upload",
+      label: t("common.upload_to_localazy"),
+      description: t("upload.description"),
+      icon: < Upload />,
+      to: `${BASE_PATH}/upload`,
+    },
+    {
+      id: "download",
+      label: t("common.download_to_strapi"),
+      description: t("download.description"),
+      icon: <Download />,
+      to: `${BASE_PATH}/download`,
+    },
+  ];
+};
+export default gevNav;

package/admin/src/modules/@common/utils/history.js

@@ -0,0 +1,6 @@
+// history.js
+import { createBrowserHistory } from 'history';
+
+export default createBrowserHistory({
+  /* pass a configuration object here if needed */
+})

package/admin/src/modules/@common/utils/is-plugin-route.js

@@ -0,0 +1,15 @@
+import pluginId from "../../../pluginId";
+
+export default (location, path = "") => {
+  if (path) {
+    return (
+      location.pathname.endsWith(`${pluginId}/${path}`) ||
+      location.pathname.endsWith(`${pluginId}/${path}/`)
+    );
+  }
+
+  return (
+    location.pathname.endsWith(pluginId) ||
+    location.pathname.endsWith(`${pluginId}/`)
+  );
+};

package/admin/src/modules/@common/utils/iso-locales-utils.js

@@ -0,0 +1,15 @@
+export const isoStrapiToLocalazy = (isoStrapi) => {
+  if (!isoStrapi) {
+    return null;
+  }
+
+  return isoStrapi.replace("_", "-");
+};
+
+export const isoLocalazyToStrapi = (isoLocalazy) => {
+  if (!isoLocalazy) {
+    return null;
+  }
+
+  return isoLocalazy.replace("-", "_");
+};

package/admin/src/modules/@common/utils/redirect-to-plugin-route.js

@@ -0,0 +1,22 @@
+import pluginId from "../../../pluginId";
+import history from "./history";
+
+export const PLUGIN_ROUTES = {
+  ROOT: "",
+  LOGIN: "login",
+  UPLOAD: "upload",
+  DOWNLOAD: "download",
+  SETTINGS: "settings",
+  // settings routes
+  CONTENT_TRANSFER_SETUP: "content-transfer-setup",
+};
+
+export default (route) => {
+  if (route === PLUGIN_ROUTES.CONTENT_TRANSFER_SETUP) {
+    history.push(`/admin/settings/${pluginId}/${route}`);
+
+    return;
+  }
+
+  history.push(`/admin/plugins/${pluginId}/${route}`);
+};

package/admin/src/modules/@common/utils/sort-by-model-name.js

@@ -0,0 +1,10 @@
+export default (a, b) => {
+  const uidA = Object.keys(a)[0].toLowerCase();
+  const uidB = Object.keys(b)[0].toLowerCase();
+
+  if (uidA < uidB) return -1;
+
+  if (uidA > uidB) return 1;
+
+  return 0;
+};

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

@@ -0,0 +1,20 @@
+export default {
+  description: "Download content in multiple languages to your Strapi project",
+  download_to_strapi: "Start download",
+  content_types_model_changed: "Content Types Model Changed",
+  close: "Close",
+  please_update_your_content:
+    "Please update your content transfer setup before proceeding to upload/download",
+  languages_incompatible: "Languages incompatible",
+  languages_incompatible_message:
+    "Strapi default language and Localazy source language are incompatible, to proceed, please update one of them.",
+  download_result: "Download completed:",
+  download_success: "Content successfully imported to Strapi.",
+  download_failed: "Download partially failed, please check the report for details...",
+  translate_in_localazy: "Translate in Localazy",
+  download_note_a: "Download ",
+  download_note_b: "will rewrite all previous translations.",
+  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.",
+};

package/admin/src/modules/localazy-download/services/localazy-download-service.js

@@ -0,0 +1,16 @@
+import createAxiosInstance from "../../../utils/createAxiosInstance";
+
+const BASE_PATH = "/transfer";
+const axiosInstance = createAxiosInstance();
+
+export default class LocalazyDownloadService {
+  static async download(data = {}) {
+    try {
+      const result = await axiosInstance.post(`${BASE_PATH}/download`, data);
+
+      return result.data;
+    } catch (e) {
+      throw e.data;
+    }
+  }
+}

package/admin/src/modules/localazy-upload/components/ReadDocsButton.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { Button } from "@strapi/design-system/Button";
+import { useTranslation } from "react-i18next";
+import "../../../i18n";
+
+function ReadDocsButton() {
+  const { t } = useTranslation();
+
+  const link = "https://localazy.com/docs/strapi";
+  const onReadDocumentationClick = () => {
+    window.open(link, "_blank");
+  };
+
+  return (
+    <Button variant="tertiary" onClick={onReadDocumentationClick}>
+      {t("upload.read_documentation")}
+    </Button>
+  );
+}
+
+export default ReadDocsButton;

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

@@ -0,0 +1,18 @@
+export default {
+  description: "Upload your content from Strapi to Localazy",
+  upload_to_localazy: "Start upload",
+  default_strapi_language: "Default Strapi language",
+  localazy_source_language: "Localazy source language",
+  change_settings: "Change settings",
+  read_documentation: "Read documentation",
+  content_types_model_changed: "Content Types Model Changed",
+  close: "Close",
+  please_update_your_content:
+    "Please update your content transfer configuration before proceeding to upload/download.",
+  languages_incompatible: "Languages mismatch!",
+  languages_incompatible_message: "The source language at Localazy doesn't match the Strapi default language setting. To continue, please set both languages to be the same.",
+  upload_result: "Upload completed:",
+  upload_success: "Content successfully imported to the Localazy project.",
+  upload_failed:
+    "Upload partially failed, please check the report for details...",
+};

package/admin/src/modules/localazy-upload/services/localazy-upload-service.js

@@ -0,0 +1,16 @@
+import createAxiosInstance from "../../../utils/createAxiosInstance";
+
+const BASE_PATH = "/transfer";
+const axiosInstance = createAxiosInstance();
+
+export default class LocalazyUploadService {
+  static async upload(data = {}) {
+    try {
+      const result = await axiosInstance.post(`${BASE_PATH}/upload`, data);
+
+      return result.data;
+    } catch (e) {
+      throw e.data;
+    }
+  }
+}

package/admin/src/modules/login/components/LoginButton/index.js

@@ -0,0 +1,56 @@
+/*
+ *
+ * LoginButton
+ *
+ */
+
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Button } from "@strapi/design-system/Button";
+import { useTranslation } from "react-i18next";
+import LocalazyLoginService from "../../services/localazy-login-service";
+import { getStrapiDefaultLocale } from "../../../@common/utils/get-default-locale";
+import { isoStrapiToLocalazy } from "../../../@common/utils/iso-locales-utils";
+import { config } from "../../../../../../server";
+import "../../../../i18n";
+
+function LoginButton(props) {
+  const { t } = useTranslation();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const login = async () => {
+    setIsLoading(true);
+
+    const strapiDefaultLocale = await getStrapiDefaultLocale();
+    const localazyFormatLocaleCode = isoStrapiToLocalazy(strapiDefaultLocale.code);
+    const keys = await LocalazyLoginService.generateKeys();
+    const params = new URLSearchParams({
+      client_id: config.default.LOCALAZY_OAUTH_APP_CLIENT_ID,
+      custom_id: keys.writeKey,
+      allow_create: "true",
+      create_locale: localazyFormatLocaleCode,
+    });
+    const url = `${config.default.LOCALAZY_OAUTH_URL}?${params.toString()}`;
+    window.open(url);
+
+    const pollResult = await LocalazyLoginService.continuousPoll(keys.readKey);
+
+    setIsLoading(false);
+
+    props.onResultFetched(pollResult);
+  };
+
+  return (
+    <div>
+      <Button variant="default" size="L" loading={isLoading} onClick={login}>
+        {t("login.login_with_localazy")}
+      </Button>
+    </div>
+  );
+}
+
+LoginButton.propTypes = {
+  onResultFetched: PropTypes.func.isRequired,
+};
+
+export default LoginButton;

package/admin/src/modules/login/components/LogoutButton/index.js

@@ -0,0 +1,50 @@
+/*
+ *
+ * LogoutButton
+ *
+ */
+
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Button } from "@strapi/design-system/Button";
+import { useTranslation } from "react-i18next";
+import Exit from "@strapi/icons/Exit";
+import LocalazyUserService from "../../../user/services/localazy-user-service";
+import { setLocalazyIdentity } from "../../../../state/localazy-identity";
+import "../../../../i18n";
+
+function LogoutButton(props) {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
+  const logout = async () => {
+    setIsLoading(true);
+
+    // delete identity from db
+    // delete identity from app state
+    LocalazyUserService.deleteIdentity();
+    setLocalazyIdentity();
+
+    setIsLoading(false);
+
+    props.onResultFetched();
+  };
+
+  return (
+    <div>
+      <Button
+        startIcon={<Exit />}
+        variant="secondary"
+        loading={isLoading}
+        onClick={logout}
+      >
+        {t("login.logout_from_localazy")}
+      </Button>
+    </div>
+  );
+}
+
+LogoutButton.propTypes = {
+  onResultFetched: PropTypes.func.isRequired,
+};
+
+export default LogoutButton;

package/admin/src/modules/login/locale/en.js

@@ -0,0 +1,7 @@
+export default {
+  login_with_localazy: "Login with Localazy",
+  login_and_start_translating_your_project: "Login and start translating your project with powerful Localazy tools.",
+  you_have_to_own_account_for_the_plugin_to_work_properly: "You have to own a Localazy account for the plugin to work properly.",
+  read_the_documentation: "Read the documentation",
+  logout_from_localazy: "Disconnect from Localazy",
+};

package/admin/src/modules/login/services/localazy-login-service.js

@@ -0,0 +1,29 @@
+/* eslint-disable no-useless-catch */
+import createAxiosInstance from "../../../utils/createAxiosInstance";
+
+const BASE_PATH = "/auth";
+const axiosInstance = createAxiosInstance();
+
+export default class LocalazyLoginService {
+  static async generateKeys() {
+    try {
+      const result = await axiosInstance.get(`${BASE_PATH}/generate-keys`);
+
+      return result.data;
+    } catch (e) {
+      throw e;
+    }
+  }
+
+  static async continuousPoll(readKey) {
+    try {
+      const result = await axiosInstance.get(
+        `${BASE_PATH}/continuous-poll?readKey=${readKey}`
+      );
+
+      return result.data;
+    } catch (e) {
+      throw e;
+    }
+  }
+}

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

@@ -0,0 +1,292 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import isEqual from "lodash-es/isEqual";
+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 { 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 set from "lodash-es/set";
+import get from "lodash-es/get";
+import PluginSettingsService from "../../services/plugin-settings-service";
+import StrapiModelService from "../../services/strapi-model-service";
+import getFilteredModelsSchemas from "../../utils/get-filtered-models-schemas";
+import getModelsTree from "../../utils/get-models-tree";
+import hasModelChanged from "../../functions/has-model-changed";
+import buildContentTransferSetupSchema from "../../functions/build-content-transfer-setup-schema";
+import { getLocalazyIdentity } from "../../../../state/localazy-identity";
+import Tree from "../Tree";
+
+import "../../../../i18n";
+
+function ContentTransferSetup() {
+  /**
+   * Translation function
+   */
+  // eslint-disable-next-line no-unused-vars
+  const { t } = useTranslation();
+
+  /**
+   * Is user logged in
+   */
+  const [localazyIdentity] = getLocalazyIdentity();
+  const hasLocalazyIdentity = () => !!localazyIdentity.accessToken;
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  /**
+   * Component state
+   */
+  const [isLoading, setIsLoading] = useState(true);
+  const [showAlert, setShowAlert] = useState(false);
+  const [showModalChangedAlert, setShowModalChangedAlert] = useState(false);
+
+  /**
+   * Accordion expanded state model
+   */
+  const [, setItemsExpandedModel] = useState([]);
+  const buildItemsExpandedModel = (models) => {
+    const r = {};
+    getFilteredModelsSchemas(models).forEach((model, index) => {
+      r[model.modelUid] = index === 0;
+    });
+
+    return r;
+  };
+
+  /**
+   * Helper form model object
+   */
+  const [, setTreeModelsSchemas] = useState([]);
+
+  /**
+   * Content transfer setup form model
+   */
+  const [originalFormModel, setOriginalFormModel] = useState([]);
+  const [formModel, setFormModel] = useState([]);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  const onCancelClick = () => {
+    setFormModel(cloneDeep(originalFormModel));
+    setHasUnsavedChanges(false);
+  }
+
+  /**
+   * Save the content transfer setup
+   */
+  const saveContentTransferSetup = async (data) => {
+    try {
+      await PluginSettingsService.updateContentTransferSetup(data);
+      setOriginalFormModel(cloneDeep(data));
+      setHasUnsavedChanges(false);
+      setShowAlert(true);
+      setShowModalChangedAlert(false);
+    } catch (e) {
+      throw e.data;
+    }
+  };
+
+  const onTreeItemClick = (keys, currentValue) => {
+    setFormModel((prevState) => {
+      // model of a subtree is the same for each of the keys
+      const modelName = keys[0].split(".")[0];
+      let arrayIndex;
+      const model = prevState.find((m, index) => {
+        if (Object.keys(m).includes(modelName)) {
+          arrayIndex = index;
+
+          return true;
+        }
+
+        return false;
+      });
+
+      if (model === undefined) {
+        return prevState;
+      }
+
+      const newState = cloneDeep(prevState);
+      keys.forEach((key) => {
+        const isEditable = get(model, key) !== null;
+
+        if (isEditable) {
+          set(model, key, !currentValue);
+        }
+      });
+      newState.splice(arrayIndex, 1, model);
+      setHasUnsavedChanges(!isEqual(originalFormModel, newState) || showModalChangedAlert);
+
+      return newState;
+    });
+  };
+
+  const link = "https://localazy.com/docs/strapi";
+  const onReadDocumentationClick = () => {
+    window.open(link, "_blank");
+  };
+
+  useEffect(() => {
+    async function fetchData() {
+      setIsLoading(true);
+      setIsLoggedIn(hasLocalazyIdentity());
+
+      if (!hasLocalazyIdentity()) {
+        setIsLoading(false);
+
+        return;
+      }
+
+      /**
+       * Fetch current models schemas
+       */
+      const [models, localizableModels] = await Promise.all([
+        StrapiModelService.getModels(),
+        StrapiModelService.getLocalizableModels(),
+      ]);
+
+      /**
+       * Fetch stored content transfer setup
+       */
+      const storedContentTransferSetup =
+        await PluginSettingsService.getContentTransferSetup();
+
+      /**
+       * Build and set accordion expanded state model
+       */
+      const itemsExpandedModel = buildItemsExpandedModel(localizableModels);
+      setItemsExpandedModel(itemsExpandedModel);
+
+      /**
+       * Build and set form model
+       */
+      const allModelsTree = getModelsTree(models, models);
+
+      const localizableTree = getModelsTree(models, localizableModels);
+      setTreeModelsSchemas(localizableTree);
+
+      const computedFormModel = buildContentTransferSetupSchema(
+        localizableTree,
+        storedContentTransferSetup.setup,
+        allModelsTree
+      );
+
+      setFormModel(computedFormModel);
+      setOriginalFormModel(cloneDeep(computedFormModel));
+
+      /**
+       * Handle alerts onload apperance
+       */
+      const localHasModelChanged = await hasModelChanged(localizableTree, storedContentTransferSetup.setup);
+      setShowModalChangedAlert(localHasModelChanged);
+      setHasUnsavedChanges(localHasModelChanged)
+
+      setIsLoading(false);
+    }
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      {!isLoading && !isLoggedIn && <Redirect to="/plugins/localazy/login" />}
+
+      <HeaderLayout
+        title={t("plugin_settings.content_transfer_setup")}
+        subtitle={t("plugin_settings.content_transfer_setup_description")}
+        primaryAction={
+          <Flex gap={2}>
+            <Button
+              variant="secondary"
+              disabled={!hasUnsavedChanges}
+              onClick={onCancelClick}
+            >
+              {t("plugin_settings.cancel")}
+            </Button>
+            <Button
+              startIcon={<Check />}
+              disabled={!hasUnsavedChanges}
+              onClick={() => { saveContentTransferSetup(formModel) }}
+            >
+              {t("plugin_settings.save")}
+            </Button>
+          </Flex>
+        }
+        as="h2"
+      />
+      <Box marginRight={10} marginLeft={10}>
+        {!isLoading && showAlert && (
+          <Box marginBottom={8}>
+            <Alert
+              onClose={() => setShowAlert(false)}
+              closeLabel={t("plugin_settings.close")}
+              title={t("plugin_settings.content_transfer_setup_saved")}
+              variant="success"
+            >
+              {t("plugin_settings.content_transfer_setup_saved_successfully")}
+            </Alert>
+          </Box>
+        )}
+        {!isLoading && showModalChangedAlert && (
+          <Box marginBottom={8}>
+            <Alert
+              onClose={() => setShowModalChangedAlert(false)}
+              closeLabel={t("plugin_settings.close")}
+              title={t("plugin_settings.content_types_model_changed")}
+              variant="default"
+            >
+              {t("plugin_settings.please_update_your_content")}
+            </Alert>
+          </Box>
+        )}
+        {!isLoading && (
+          <Box
+            background="neutral0"
+            padding={7}
+            paddingTop={6}
+            shadow="tableShadow"
+            hasRadius
+          >
+            {formModel.map((tree, index) => {
+              return (
+                <Box
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={`box_tree_${index}`}
+                  marginBottom={3}
+                >
+                  <Tree onTreeItemClick={onTreeItemClick} objects={tree} />
+                </Box>
+              );
+            })}
+            <Box
+              paddingTop={6}
+              paddingBottom={6}
+            >
+              <Divider />
+            </Box>
+            <Typography variant="omega">{t("plugin_settings.you_can_upload_download")}</Typography>
+            <Typography variant="omega" fontWeight="semiBold">{t("plugin_settings.only_text_based_content")}</Typography>
+            <br />
+            <br />
+            <Typography variant="omega">{t("plugin_settings.learn_more_in_docs_message_a")}</Typography>
+            <Typography
+              onClick={onReadDocumentationClick}
+              variant="omega"
+              fontWeight="semiBold"
+              textColor="primary600"
+              style={{ cursor: "pointer" }}
+            >
+              {t("plugin_settings.learn_more_in_docs_message_b")}
+            </Typography>
+          </Box>
+        )
+        }
+      </Box>
+    </>
+  );
+}
+
+export default ContentTransferSetup;