@localazy/strapi-plugin 0.1.0

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

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { Loader } from "@strapi/design-system/Loader";
+import { HeaderLayout } from "@strapi/design-system/Layout";
+import { Box } from "@strapi/design-system/Box";
+import { useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Grid } from '@strapi/design-system/Grid';
+import { Divider } from '@strapi/design-system/Divider';
+import LogoutButton from "../../modules/login/components/LogoutButton";
+import redirectToPluginRoute, {
+  PLUGIN_ROUTES,
+} from "../../modules/@common/utils/redirect-to-plugin-route";
+import { getLocalazyIdentity } from "../../state/localazy-identity";
+import OverviewItem from "../../modules/settings/components/OverviewItem";
+import OverviewItemLink from "../../modules/settings/components/OverviewItemLink";
+import PrerequisitiesInfo from "../../modules/settings/components/PrerequisitiesInfo";
+import ProjectService from "../../modules/@common/services/project-service";
+
+import "../../i18n";
+
+function Settings(props) {
+  const history = useHistory();
+  const { t } = useTranslation();
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  const [localazyIdentity] = getLocalazyIdentity();
+  const projectUrl = localazyIdentity.project.url;
+
+  const [connectedProject, setConnectedProject] = useState({});
+
+  useEffect(() => {
+    async function initComponent() {
+      setIsLoading(true);
+      const project = await ProjectService.getConnectedProject();
+      setConnectedProject(project);
+      setIsLoading(false);
+    }
+
+    initComponent();
+  }, []);
+
+  /**
+   * On logout action
+   */
+  const onLoggedOut = () => {
+    redirectToPluginRoute(PLUGIN_ROUTES.LOGIN, history);
+  };
+
+  return (
+    <>
+      <HeaderLayout
+        title={props.title}
+        subtitle={props.subtitle}
+        primaryAction={<LogoutButton onResultFetched={onLoggedOut} />}
+        as="h2"
+      />
+      {(props.isLoading || isLoading) && (<Loader>{t("common.loading_content")}</Loader>)}
+      {!(props.isLoading || isLoading) && (
+        <Box paddingRight={10} paddingLeft={10}>
+          <Box
+            background="neutral0"
+            paddingTop={6}
+            paddingRight={7}
+            paddingBottom={6}
+            paddingLeft={7}
+            hasRadius
+            shadow="tableShadow"
+          >
+            <Grid
+              gap={{
+                desktop: 5,
+                tablet: 2,
+                mobile: 1
+              }}
+            >
+              <OverviewItem
+                label={t("settings.connected_user")}
+                value={localazyIdentity.user.name}
+              />
+              <OverviewItem
+                label={t("settings.connected_project")}
+                value={localazyIdentity.project.name}
+              />
+              <OverviewItem
+                label={t("settings.remaining_organization_keys")}
+                value={
+                  connectedProject.organization.availableKeys - connectedProject.organization.usedKeys
+                }
+              />
+              <OverviewItemLink
+                label={t("settings.open_project_in_localazy")}
+                to={projectUrl}
+              />
+            </Grid>
+            <Box
+              paddingTop={4}
+              paddingBottom={4}
+            >
+              <Divider />
+            </Box>
+            <PrerequisitiesInfo />
+          </Box>
+        </Box>)}
+    </>
+  );
+}
+
+Settings.propTypes = {
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+  isLoading: PropTypes.bool,
+};
+
+Settings.defaultProps = {
+  isLoading: false,
+};
+
+export default Settings;

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

@@ -0,0 +1,187 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { HeaderLayout } from "@strapi/design-system/Layout";
+import { useTranslation } from "react-i18next";
+import { Grid } from '@strapi/design-system/Grid';
+import { Flex } from '@strapi/design-system/Flex';
+import { Divider } from '@strapi/design-system/Divider';
+import { Button } from "@strapi/design-system/Button";
+import UploadIcon from "@strapi/icons/Upload";
+import { Box } from "@strapi/design-system/Box";
+import { Alert } from "@strapi/design-system/Alert";
+import { Loader } from "@strapi/design-system/Loader";
+import LocalazyUploadService from "../../modules/localazy-upload/services/localazy-upload-service";
+import areLocalesCompatible from "../../modules/@common/utils/are-locales-compatible";
+import { getStrapiDefaultLocale, getLocalazySourceLanguage } from "../../modules/@common/utils/get-default-locale";
+import hasModelChanged from "../../modules/plugin-settings/functions/has-model-changed";
+import TransferReport from "../../modules/@common/components/TransferReport";
+import OverviewItem from "../../modules/settings/components/OverviewItem";
+import PrerequisitiesInfo from "../../modules/settings/components/PrerequisitiesInfo";
+import ReadDocsButton from "../../modules/localazy-upload/components/ReadDocsButton";
+import redirectToPluginRoute, {
+  PLUGIN_ROUTES,
+} from "../../modules/@common/utils/redirect-to-plugin-route";
+
+import "../../i18n";
+
+function Upload(props) {
+  const { t } = useTranslation();
+
+  /**
+   * Component state
+   */
+  const [isLoading, setIsLoading] = useState(true);
+  const [modelChanged, setModelChanged] = useState(false);
+  const [localesIncompatible, setLocalesIncompatible] = useState(false);
+  const [showUploadFinishedModal, setShowUploadFinishedModal] = useState(false);
+  const [uploadResult, setUploadResult] = useState({});
+  const [isUploading, setIsUploading] = useState(false);
+  const [strapiDefaultLocale, setStrapiDefaultLocale] = useState(null);
+  const [localazySourceLanguage, setLocalazySourceLanguage] = useState(null);
+
+  const onChangeSettingsClick = () => {
+    redirectToPluginRoute(PLUGIN_ROUTES.CONTENT_TRANSFER_SETUP);
+    // hacky solution, otherwise the route contents won't be instantiated
+    window.location.reload();
+  };
+
+  const onUploadClick = async () => {
+    setIsUploading(true);
+    const result = await LocalazyUploadService.upload();
+    setUploadResult(result);
+    setIsUploading(false);
+    setShowUploadFinishedModal(true);
+  };
+
+  useEffect(() => {
+    async function initComponent() {
+      setIsLoading(true);
+
+      setStrapiDefaultLocale(await getStrapiDefaultLocale());
+      setLocalazySourceLanguage(await getLocalazySourceLanguage());
+
+      /**
+       * Handle alerts onload apperance
+       */
+      setModelChanged(await hasModelChanged());
+      setLocalesIncompatible(!(await areLocalesCompatible(strapiDefaultLocale, localazySourceLanguage)));
+
+      setIsLoading(false);
+    }
+    initComponent();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <HeaderLayout
+        title={props.title}
+        subtitle={props.subtitle}
+        primaryAction={<Button
+          startIcon={<UploadIcon />}
+          disabled={isLoading || modelChanged || localesIncompatible}
+          loading={isUploading}
+          onClick={onUploadClick}
+        >
+          {t("upload.upload_to_localazy")}
+        </Button>}
+        as="h2"
+      />
+      {isLoading && <Loader>{t("common.loading_content")}</Loader>}
+      {!isLoading && (
+        <Box paddingRight={10} paddingLeft={10}>
+          <Box
+            background="neutral0"
+            paddingTop={6}
+            paddingRight={7}
+            paddingBottom={6}
+            paddingLeft={7}
+            hasRadius
+            shadow="tableShadow"
+          >
+            <Grid
+              gap={{
+                desktop: 5,
+                tablet: 2,
+                mobile: 1
+              }}
+            >
+              <OverviewItem
+                label={t("upload.default_strapi_language")}
+                value={strapiDefaultLocale.name}
+              />
+              <OverviewItem
+                label={t("upload.localazy_source_language")}
+                value={localazySourceLanguage.name}
+              />
+            </Grid>
+            <Box
+              paddingTop={4}
+              paddingBottom={4}
+            >
+              <Divider />
+            </Box>
+            <PrerequisitiesInfo />
+            <Box marginTop={4}>
+              <Flex gap="2">
+                <Button variant="secondary" onClick={onChangeSettingsClick}>
+                  {t("upload.change_settings")}
+                </Button>
+                <ReadDocsButton />
+              </Flex>
+            </Box>
+          </Box>
+          {showUploadFinishedModal && (
+            <Box marginTop={4} marginBottom={4}>
+              <Alert
+                onClose={() => setShowUploadFinishedModal(false)}
+                closeLabel={t("upload.close")}
+                title={t("upload.upload_result")}
+                variant={uploadResult.success ? "success" : "danger"}
+              >
+                {uploadResult.success
+                  ? t("upload.upload_success")
+                  : t("upload.upload_failed")}
+              </Alert>
+            </Box>
+          )}
+          {localesIncompatible && (
+            <Box marginTop={4} marginBottom={4}>
+              <Alert
+                onClose={() => setLocalesIncompatible(false)}
+                closeLabel={t("upload.close")}
+                title={t("upload.languages_incompatible")}
+                variant="danger"
+              >
+                {t("upload.languages_incompatible_message")}
+              </Alert>
+            </Box>
+          )}
+          {modelChanged && (
+            <Box marginTop={4} marginBottom={4}>
+              <Alert
+                onClose={() => setModelChanged(false)}
+                closeLabel={t("upload.close")}
+                title={t("upload.content_types_model_changed")}
+                variant="default"
+              >
+                {t("upload.please_update_your_content")}
+              </Alert>
+            </Box>
+          )}
+          {uploadResult.report && uploadResult.report.length > 0 && (
+            <TransferReport report={uploadResult.report} />
+          )}
+        </Box>
+      )}
+    </>
+  );
+}
+
+Upload.propTypes = {
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+};
+
+export default Upload;

package/admin/src/pluginId.js

@@ -0,0 +1,5 @@
+const pluginPkg = require('../../package.json');
+
+const pluginId = pluginPkg.strapi.name;
+
+module.exports = pluginId;

package/admin/src/plugins/apolloClient.js

@@ -0,0 +1,33 @@
+import {
+  ApolloClient,
+  HttpLink,
+  ApolloLink,
+  InMemoryCache,
+} from "@apollo/client";
+import Cookies from "js-cookie";
+
+const createClient = () => {
+  const httpLink = new HttpLink({ uri: process.env.STRAPI_ADMIN_GRAPHQL_URL });
+
+  const authLink = new ApolloLink((operation, forward) => {
+    // Retrieve the authorization token from local storage.
+    const token = Cookies.get('LOCALAZY-API-USER-JWT');
+
+    // Use the setContext method to set the HTTP headers.
+    operation.setContext({
+      headers: {
+        'Authorization': token ? `Bearer ${token}` : ''
+      }
+    });
+
+    // Call the next link in the middleware chain.
+    return forward(operation);
+  });
+
+  return new ApolloClient({
+    link: authLink.concat(httpLink),
+    cache: new InMemoryCache()
+  });
+}
+
+export default createClient;

package/admin/src/state/localazy-identity.js

@@ -0,0 +1,29 @@
+import { createGlobalState } from "react-hooks-global-state";
+import { emptyIdentity } from "../modules/user/model/localazy-identity";
+
+const STATE_NAME = "localazyIdentity";
+const { setGlobalState, useGlobalState } = createGlobalState({
+  [STATE_NAME]: emptyIdentity,
+});
+
+const setLocalazyIdentity = (identity = emptyIdentity) => {
+  setGlobalState(STATE_NAME, () => identity);
+};
+
+const getLocalazyIdentity = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useGlobalState(STATE_NAME);
+};
+
+const hasLocalazyIdentity = () => {
+  const identity = getLocalazyIdentity();
+
+  return !!identity.accessToken;
+};
+
+export {
+  STATE_NAME,
+  getLocalazyIdentity,
+  setLocalazyIdentity,
+  hasLocalazyIdentity,
+};