@localazy/strapi-plugin 0.1.0

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

@@ -0,0 +1,120 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Box } from "@strapi/design-system/Box";
+import { Switch } from '@strapi/design-system/Switch';
+import { Checkbox } from '@strapi/design-system/Checkbox';
+import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
+import TreeItem from "../TreeItem";
+import flattenObject from "../../../@common/utils/functions/flatten-deep";
+
+function Tree(props) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const onTreeItemClick = (key, currentValue) => {
+    props.onTreeItemClick(key, currentValue);
+  };
+
+  const createTree = (name, branch, path = "") => {
+    const isBranchObject = typeof branch === "object" && branch !== null;
+
+    if (isBranchObject) {
+      return (
+        <>
+          {Object.entries(branch).map(([key, value]) => {
+            const isSubbranchObject = typeof value === "object" && value !== null;
+            const flattened = flattenObject(value);
+            const flattenedKeys = Object.keys(flattened).map((k) => `${path}.${key}.${k}`);
+
+            const hasTruthyValue = Object.values(flattened).some(v => v);
+            const hasFalsyValue = Object.values(flattened).some(v => !v && v !== null);
+
+            if (key === "__model__") {
+              return false;
+            }
+            const passedKey = `${path}.${key}`;
+
+            return (
+              <Box
+                key={passedKey}
+                marginTop={6}
+                marginBottom={6}
+                marginLeft={6}
+              >
+                {isSubbranchObject && (
+                  <Checkbox
+                    checked={hasTruthyValue && !hasFalsyValue}
+                    indeterminate={hasTruthyValue && hasFalsyValue}
+                    onChange={() => onTreeItemClick(flattenedKeys, hasTruthyValue && !hasFalsyValue)}
+                  >
+                    {key || "-"}
+                  </Checkbox>)
+                }
+                <TreeItem
+                  onTreeItemClick={onTreeItemClick}
+                  passedKey={passedKey}
+                >
+                  {createTree(key, value, passedKey)}
+                </TreeItem>
+              </Box>
+            );
+          })}
+        </>
+      );
+    }
+
+    return (
+      <TreeItem
+        onTreeItemClick={onTreeItemClick}
+        key={path}
+        passedKey={path}
+        label={name}
+        value={branch}
+      />
+    );
+  };
+
+  return (
+    <Box>
+      {Object.entries(props.objects).map(([key, value]) => {
+        return (
+          value.__model__ !== undefined && (
+            <Box borderColor="neutral200" hasRadius>
+              <Accordion
+                size="S"
+                expanded={isExpanded}
+                onToggle={() => { setIsExpanded(!isExpanded) }}
+              >
+                <AccordionToggle
+                  variant="secondary"
+                  title={key}
+                  togglePosition="left"
+                  action={
+                    <Switch
+                      label={`switch_tree_${key}`}
+                      onChange={() =>
+                        onTreeItemClick([`${key}.__model__`], value.__model__)
+                      }
+                      selected={!!value.__model__}
+                    />}
+                />
+
+                <AccordionContent>
+                  {createTree(key, value, key)}
+                </AccordionContent>
+              </Accordion>
+            </Box>
+          )
+
+        )
+
+      }
+      )}
+    </Box>
+  );
+}
+
+Tree.propTypes = {
+  objects: PropTypes.object.isRequired,
+  onTreeItemClick: PropTypes.func.isRequired,
+};
+
+export default Tree;

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

@@ -0,0 +1,48 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Checkbox } from '@strapi/design-system/Checkbox';
+
+function TreeItem(props) {
+  const onChange = (key, currentValue) => {
+    props.onTreeItemClick(key, currentValue);
+  };
+
+  return (
+    <>
+      {typeof props.value === "boolean" && (
+        <Checkbox
+          checked={props.value}
+          onChange={() => onChange([props.passedKey], props.value)}
+        >
+          {props.label || "-"}
+        </Checkbox>
+      )}
+      {props.value === null && (
+        <Checkbox
+          checked={false}
+          disabled
+        >
+          {props.label || "-"}
+        </Checkbox>
+      )}
+      {props.children && <div key={props.passedKey}>{props.children}</div>}
+    </>
+  );
+}
+
+TreeItem.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.any,
+  children: PropTypes.any,
+  passedKey: PropTypes.string,
+  onTreeItemClick: PropTypes.func.isRequired,
+};
+
+TreeItem.defaultProps = {
+  label: undefined,
+  value: undefined,
+  children: undefined,
+  passedKey: "",
+};
+
+export default TreeItem;

package/admin/src/modules/plugin-settings/functions/build-content-transfer-setup-schema.js

@@ -0,0 +1,71 @@
+import set from "lodash-es/set";
+import get from "lodash-es/get";
+import deepKeys from "deep-keys";
+import sortByModelName from "../../@common/utils/sort-by-model-name";
+import arrayOfModelsToObject from "../utils/array-of-models-to-object";
+import findModelValueByKey from "../utils/find-model-value-by-key";
+
+export default (
+  localizableTree = [],
+  storedSetupSchema = [],
+  allModelsTree = []
+) => {
+  localizableTree = arrayOfModelsToObject(
+    localizableTree.sort(sortByModelName)
+  );
+  storedSetupSchema = arrayOfModelsToObject(
+    storedSetupSchema.sort(sortByModelName)
+  );
+
+  const currentModelsSchemaKeys = deepKeys(localizableTree);
+  const storedSetupSchemaKeys = deepKeys(storedSetupSchema);
+
+  const removedKeys = storedSetupSchemaKeys.filter(
+    (x) => !currentModelsSchemaKeys.includes(x)
+  );
+
+  const newKeys = currentModelsSchemaKeys.filter(
+    (key) => !storedSetupSchemaKeys.includes(key)
+  );
+
+  const filteredStoredSetupSchemaKeys = storedSetupSchemaKeys.filter(
+    (key) => !removedKeys.includes(key)
+  );
+
+  const destinationObject = {};
+  filteredStoredSetupSchemaKeys.forEach((key) => {
+    const localizableTreeValueToSet = get(storedSetupSchema, key);
+    const allModelsTreeValueToSet = findModelValueByKey(allModelsTree, key);
+
+    if (allModelsTreeValueToSet === null) {
+      set(destinationObject, key, null);
+    } else if (localizableTreeValueToSet !== null) {
+      set(destinationObject, key, localizableTreeValueToSet);
+    } else {
+      // check for newly activated localizable fields & update model accordingly
+      const newValueToSet = findModelValueByKey(allModelsTree, key);
+      set(destinationObject, key, newValueToSet);
+    }
+  });
+  newKeys.forEach((key) => {
+    set(destinationObject, key, get(localizableTree, key));
+  });
+
+  const destinationArray = [];
+  const sortedDestinationObjectKeys = Object.keys(destinationObject).sort(
+    (a, b) => {
+      if (a < b) return -1;
+
+      if (a > b) return 1;
+
+      return 0;
+    }
+  );
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const key of sortedDestinationObjectKeys) {
+    destinationArray.push(destinationObject[key]);
+  }
+
+  return destinationArray;
+};

package/admin/src/modules/plugin-settings/functions/has-model-changed.js

@@ -0,0 +1,85 @@
+import deepKeys from "deep-keys";
+import get from "lodash-es/get";
+import PluginSettingsService from "../services/plugin-settings-service";
+import StrapiModelService from "../services/strapi-model-service";
+import getModelsTree from "../utils/get-models-tree";
+import sortByModelName from "../../@common/utils/sort-by-model-name";
+import arrayOfModelsToObject from "../utils/array-of-models-to-object";
+import findModelValueByKey from "../utils/find-model-value-by-key";
+
+/**
+ * Pass parameters optionally so we don't have to fetch them again
+ * Returns whether the content transfer setup has changed
+ */
+export default async (
+  localizableTree = null,
+  storedSetupSchema = null,
+  allModelsTree = null
+) => {
+  let models;
+
+  if (!localizableTree || !allModelsTree) {
+    models = await StrapiModelService.getModels();
+  }
+
+  if (!localizableTree) {
+    const localizableModels = await StrapiModelService.getLocalizableModels();
+    localizableTree = getModelsTree(models, localizableModels);
+  }
+
+  if (!storedSetupSchema) {
+    storedSetupSchema = (await PluginSettingsService.getContentTransferSetup())
+      .setup;
+  }
+
+  if (!allModelsTree) {
+    allModelsTree = getModelsTree(models, models);
+  }
+
+  localizableTree = arrayOfModelsToObject(
+    localizableTree.sort(sortByModelName)
+  );
+  storedSetupSchema = arrayOfModelsToObject(
+    storedSetupSchema.sort(sortByModelName)
+  );
+
+  const modelsTreeKeys = deepKeys(localizableTree);
+  const storedSetupSchemaKeys = deepKeys(storedSetupSchema);
+
+  const removedKeys = storedSetupSchemaKeys.filter(
+    (x) => !modelsTreeKeys.includes(x)
+  );
+  const newKeys = modelsTreeKeys.filter(
+    (key) => !storedSetupSchemaKeys.includes(key)
+  );
+
+  if (newKeys.length || removedKeys.length) {
+    return true;
+  }
+
+  const filteredStoredSetupSchemaKeys = storedSetupSchemaKeys.filter(
+    (key) => !removedKeys.includes(key)
+  );
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const key of filteredStoredSetupSchemaKeys) {
+    const localizableTreeValueToSet = get(storedSetupSchema, key);
+    const allModelsTreeValueToSet = findModelValueByKey(allModelsTree, key);
+
+    if (
+      typeof localizableTreeValueToSet === "boolean" &&
+      allModelsTreeValueToSet === null
+    ) {
+      return true;
+    }
+
+    if (
+      localizableTreeValueToSet === null &&
+      typeof allModelsTreeValueToSet === "boolean"
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+};

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

@@ -0,0 +1,19 @@
+export default {
+  content_transfer_setup: "Content Transfer Setup",
+  content_transfer_setup_description:
+    "Setup what content type fields will be uploaded to Localazy",
+  save: "Save",
+  cancel: "Cancel",
+  close: "Close",
+
+  content_transfer_setup_saved: "Content Transfer Setup saved",
+  content_transfer_setup_saved_successfully:
+    "Content Transfer Setup saved successfully",
+  content_types_model_changed: "Content Types Model Changed",
+  please_update_your_content:
+    "Please update your content transfer setup before proceeding to upload/download",
+  you_can_upload_download: "You can upload/download ",
+  only_text_based_content: "only text based content.",
+  learn_more_in_docs_message_a: "If you want to learn more about how to setup your Content Transfer settings read the ",
+  learn_more_in_docs_message_b: "Localazy documentation.",
+};

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

@@ -0,0 +1,32 @@
+/* eslint-disable no-useless-catch */
+import createAxiosInstance from "../../../utils/createAxiosInstance";
+
+const BASE_PATH = "/plugin-settings";
+const axiosInstance = createAxiosInstance();
+
+export default class PluginSettingsService {
+  static async getContentTransferSetup() {
+    try {
+      const result = await axiosInstance.get(
+        `${BASE_PATH}/content-transfer-setup`
+      );
+
+      return result.data;
+    } catch (e) {
+      throw e;
+    }
+  }
+
+  static async updateContentTransferSetup(data) {
+    try {
+      const result = await axiosInstance.put(
+        `${BASE_PATH}/content-transfer-setup`,
+        data
+      );
+
+      return result.data;
+    } catch (e) {
+      throw e;
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+import createAxiosInstance from "../../../utils/createAxiosInstance";
+
+const BASE_PATH = "/strapi";
+const axiosInstance = createAxiosInstance();
+
+export default class StrapiModelService {
+  static async getModels() {
+    try {
+      const result = await axiosInstance.get(`${BASE_PATH}/models`);
+
+      return result.data;
+    } catch (e) {
+      throw e.message;
+    }
+  }
+
+  static async getLocalizableModels() {
+    try {
+      const result = await axiosInstance.get(`${BASE_PATH}/localizable-models`);
+
+      return result.data;
+    } catch (e) {
+      throw e.message;
+    }
+  }
+}

package/admin/src/modules/plugin-settings/utils/__tests__/get-models-tree.test.js

@@ -0,0 +1,135 @@
+import getModelsTree from "../get-models-tree";
+
+const allModels = require("../../../../tests/fixtures/all-models");
+const restaurantModel = require("../../../../tests/fixtures/restaurant-model");
+
+it("should return the tree for restaurants", () => {
+  // SETUP
+  const object = allModels;
+  const localizableModels = [restaurantModel];
+
+  // EXECUTE
+  const result = getModelsTree(object, localizableModels);
+
+  // VERIFY
+  const restaurantModelsTree = result.find((model) => model.restaurants);
+  const expected = {
+    restaurants: {
+      __model__: true,
+      title: false,
+      description: false,
+      books: null,
+      recipes: {
+        name: false,
+        ingredients: {
+          name: false,
+          pcs: null,
+          required: null,
+        },
+        variants: {
+          name: false,
+        },
+      },
+      descs: {
+        rich_description: false,
+        history: false,
+        excerpt: false,
+        test_variants: {
+          name: false,
+        },
+      },
+      street: false,
+      city: false,
+      country: false,
+    },
+  };
+  expect(restaurantModelsTree).toEqual(expected);
+});
+
+it("should return a tree for all models", () => {
+  // SETUP
+  const localizableModels = allModels.filter(
+    (model) => model.modelType === "contentType"
+  );
+  const object = allModels;
+
+  // EXECUTE
+  const result = getModelsTree(object, localizableModels);
+
+  // VERIFY
+  const expected = [
+    {
+      tokens: {
+        __model__: true,
+        access_token: null,
+      },
+    },
+    {
+      testtokens: {
+        __model__: true,
+        at: null,
+      },
+    },
+    {
+      up_users: {
+        __model__: true,
+        username: null,
+        email: null,
+        provider: null,
+        password: null,
+        resetPasswordToken: null,
+        confirmationToken: null,
+        confirmed: null,
+        blocked: null,
+        role: null,
+      },
+    },
+    {
+      books: {
+        __model__: true,
+        Title: false,
+        Author: null,
+        Pages: null,
+        additional_info: {
+          rich_description: null,
+          history: null,
+          excerpt: null,
+          test_variants: {
+            name: null,
+          },
+        },
+      },
+    },
+    {
+      restaurants: {
+        __model__: true,
+        title: false,
+        description: false,
+        books: null,
+        recipes: {
+          name: false,
+          ingredients: {
+            name: false,
+            pcs: null,
+            required: null,
+          },
+          variants: {
+            name: false,
+          },
+        },
+        descs: {
+          rich_description: false,
+          history: false,
+          excerpt: false,
+          test_variants: {
+            name: false,
+          },
+        },
+        street: false,
+        city: false,
+        country: false,
+      },
+    },
+  ];
+  expect(result).toEqual(expected);
+});

package/admin/src/modules/plugin-settings/utils/array-of-models-to-object.js

@@ -0,0 +1,6 @@
+export default (array) =>
+  array.reduce((obj, item) => {
+    obj[Object.keys(item)[0]] = item;
+
+    return obj;
+  }, {});

package/admin/src/modules/plugin-settings/utils/find-model-value-by-key.js

@@ -0,0 +1,8 @@
+import get from "lodash-es/get";
+import arrayOfModelsToObject from "./array-of-models-to-object";
+
+export default (allModelsTree, key) => {
+  const objectivizedModelsTree = arrayOfModelsToObject(allModelsTree);
+
+  return get(objectivizedModelsTree, key);
+};

package/admin/src/modules/plugin-settings/utils/get-filtered-models-schemas.js

@@ -0,0 +1,34 @@
+const SUPPORTED_CONTENT_TYPE_FIELDS = [
+  "string",
+  "text",
+  "richtext",
+  // "relation", // relation cannot be supported field type
+  "component",
+];
+
+export default (models) => {
+  if (!models) {
+    return [];
+  }
+
+  return models.map((model) => {
+    const attributesKeys = Object.keys(model.__schema__.attributes);
+
+    const attributes = attributesKeys.map((attributeKey) => {
+      const type = model.__schema__.attributes[attributeKey].type;
+
+      if (!SUPPORTED_CONTENT_TYPE_FIELDS.includes(type.toLowerCase())) {
+        return null;
+      }
+
+      return attributeKey;
+    });
+
+    return {
+      modelUid: model.uid,
+      collectionName: model.collectionName,
+      displayName: model.info.displayName,
+      attributes: attributes.filter((attribute) => !!attribute),
+    };
+  });
+};

package/admin/src/modules/plugin-settings/utils/get-models-tree.js

@@ -0,0 +1,73 @@
+/**
+ * Supported kinds of models are expected by the function, needs to be checked before calling the function
+ */
+const getModelsTree = (allModels, localizableModels = []) => {
+  const modelsTree = [];
+
+  const getModelTree = (
+    attributes,
+    isComponentAttributes = false,
+    isComponentAttributesObjectTranslatable = null
+  ) => {
+    const currentModelTree = {};
+    // eslint-disable-next-line no-restricted-syntax
+    for (const attribute in attributes) {
+      if (attributes[attribute].type === "component") {
+        const nestedModel = allModels.find(
+          (model) => model.uid === attributes[attribute].component
+        );
+
+        currentModelTree[attribute] = {
+          ...getModelTree(
+            nestedModel.__schema__.attributes,
+            true,
+            isComponentAttributesObjectTranslatable === null
+              ? attributes[attribute].pluginOptions?.i18n?.localized || false
+              : isComponentAttributesObjectTranslatable
+          ),
+        };
+      } else if (
+        ["string", "text", "richtext"].includes(attributes[attribute].type)
+      ) {
+        // field might not be localizable
+        if (isComponentAttributes) {
+          if (isComponentAttributesObjectTranslatable) {
+            currentModelTree[attribute] = false;
+          } else {
+            currentModelTree[attribute] = null;
+          }
+        } else if (
+          !isComponentAttributes &&
+          (!attributes[attribute].pluginOptions ||
+            !attributes[attribute].pluginOptions.i18n ||
+            !attributes[attribute].pluginOptions.i18n.localized)
+        ) {
+          currentModelTree[attribute] = null;
+        } else {
+          currentModelTree[attribute] = false;
+        }
+      } else {
+        currentModelTree[attribute] = null;
+      }
+    }
+
+    return currentModelTree;
+  };
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const model of localizableModels) {
+    if (model.__schema__.collectionName) {
+      const modelTree = {
+        [model.__schema__.collectionName]: {
+          __model__: true,
+          ...getModelTree(model.__schema__.attributes),
+        },
+      };
+      modelsTree.push(modelTree);
+    }
+  }
+
+  return modelsTree;
+};
+
+export default getModelsTree;