@crowdin/app-project-module 0.26.6 → 0.28.0-10

package/out/views/login.handlebars

@@ -52,20 +52,56 @@
                                         {{/each}}
                                     </crowdin-select>
                                 {{else}}
-                                    <crowdin-input
-                                        id="{{key}}"
-                                        label="{{label}}"
-                                        {{#if helpText}}
-                                            help-text="{{helpText}}"
-                                        {{/if}}
-                                        {{#if helpTextHtml}}
-                                            help-text-html="{{helpTextHtml}}"
-                                        {{/if}}
-                                        {{#if type}}
-                                            type="{{type}}"
-                                        {{/if}}
-                                        value="{{#if defaultValue}}{{defaultValue}}{{/if}}">
-                                    </crowdin-input>
+                                    {{#ifeq type "textarea"}}
+                                        <crowdin-textarea
+                                            id="{{key}}"
+                                            label="{{label}}"
+                                            {{#if helpText}}
+                                                help-text="{{helpText}}"
+                                            {{/if}}
+                                            {{#if helpTextHtml}}
+                                                help-text-html="{{helpTextHtml}}"
+                                            {{/if}}
+                                                value="{{#if defaultValue}}{{defaultValue}}{{/if}}">
+                                        </crowdin-textarea>
+                                    {{else}}
+                                        {{#ifeq type "file"}}
+                                            <div class="file-field">
+                                                {{#if helpText}}<div class="help-text">{{helpText}}</div>{{/if}}
+                                                {{#if helpTextHtml}}<div class="help-text">{{helpTextHtml}}</div>{{/if}}
+                                                <div class="upload">
+                                                    <crowdin-button outlined onclick="uploadFiles('{{key}}');">{{label}}</crowdin-button>
+                                                    <textarea hidden id="{{key}}"></textarea>
+                                                    <input
+                                                        id="store_{{key}}"
+                                                        data-id="{{key}}"
+                                                        {{#if accept}}
+                                                            accept="{{accept}}"
+                                                        {{/if}}
+                                                        onchange="readFileData(event)"
+                                                        hidden
+                                                        type="{{type}}"
+                                                    >
+                                                    <div class="uploaded-file"><i>No file</i></div>
+                                                </div>
+                                            </div>
+                                        {{else}}
+                                            <crowdin-input
+                                                    id="{{key}}"
+                                                    label="{{label}}"
+                                                {{#if helpText}}
+                                                    help-text="{{helpText}}"
+                                                {{/if}}
+                                                {{#if helpTextHtml}}
+                                                    help-text-html="{{helpTextHtml}}"
+                                                {{/if}}
+                                                {{#if type}}
+                                                    type="{{type}}"
+                                                {{/if}}
+                                                    value="{{#if defaultValue}}{{defaultValue}}{{/if}}">
+                                            </crowdin-input>
+                                        {{/ifeq}}
+                                    {{/ifeq}}
                                 {{/ifeq}}
                             {{/ifeq}}
                         {{else}}
@@ -75,6 +111,7 @@
                     {{/each}}
                     </div>
                 <crowdin-button
+                    id="login-button"
                     outlined icon-after="arrow_forward"
                     {{#if oauthLogin}}
                     onclick="oauthLogin()"
@@ -90,7 +127,7 @@
     <crowdin-toasts></crowdin-toasts>
 </body>
 <script type="text/javascript">
-    const loginButton = document.querySelector('crowdin-button');
+    const loginButton = document.querySelector('#login-button');
 
     function oauthLogin() {
         {{#if oauthUrl}}
@@ -147,6 +184,7 @@
                 })
             )
             .then(checkResponse)
+            .then(localStorage.removeItem('revised_{{name}}'))
             .then(reloadLocation)
             .catch(e => {
                 loginButton.setAttribute('disabled', false);
@@ -162,12 +200,42 @@
                     {{#ifeq type "checkbox"}}
                         '{{key}}': !!document.querySelector('#{{key}}').checked,
                     {{else}}
-                        '{{key}}': document.querySelector('#{{key}}').getAttribute('value'),
+                        '{{key}}': document.querySelector('#{{key}}').getAttribute('value') || document.querySelector('#{{key}}').value,
                     {{/ifeq}}
                 {{/if}}
             {{/each}}
         };
     }
+
+    function uploadFiles(id) {
+        const input = document.querySelector(`#store_${id}`);
+        input.value = '';
+        input.click();
+    }
+
+    function readFileData(event) {
+        const reader = new FileReader();
+        const identifier = event.target.getAttribute('data-id');
+        const fileName = document.querySelector('.uploaded-file');
+        const input = document.querySelector(`#${identifier}`);
+        const file = event.target.files[0];
+        fileName.innerText = file.name;
+
+        reader.onloadstart = function() {
+            loginButton.setAttribute('disabled', true);
+            loginButton.setAttribute('is-loading', true);
+        };
+        reader.onloadend = function() {
+            loginButton.setAttribute('disabled', false);
+            loginButton.setAttribute('is-loading', false);
+        };
+
+        reader.onload = () => {
+            input.value = reader.result;
+        };
+        reader.readAsText(file);
+    }
+
 </script>
 
 </html>

package/out/views/main.handlebars

@@ -20,20 +20,26 @@
             <crowdin-button icon-before="settings" onclick="settingsModal.open();fillSettingsForm();">Settings</crowdin-button>
             {{/if}}
             <crowdin-button icon-before="account_circle" onclick="integrationLogout()">Log out</crowdin-button>
+            {{#if uploadTranslations}}
+                <crowdin-alert id="translation-info" no-icon="true" style="display: none;">
+                    <div class="box-center">
+                        <p class="info-text">
+                            We recommend importing existing translations into your Crowdin project for newly uploaded source content.
+                            Please note that translations imported for non-key-value formats may require additional review.
+                            Read more about <crowdin-a href="https://support.crowdin.com/uploading-translations/" target="_blank">Uploading Translations</crowdin-a>.
+                        </p>
+                    </div>
+                    <crowdin-button onclick="closeAlert(this)" class="dismiss-alert" icon>close</crowdin-button>
+                </crowdin-alert>
+            {{/if}}
         </div>
         <crowdin-simple-integration
-                {{#if withWebhookSync.crowdin}}
-                    crowdin-sync="true"
-                {{/if}}
-                {{#if withWebhookSync.integration}}
-                    integration-sync="true"
-                {{/if}}
-                {{#if withCronSync.crowdin}}
+                {{#or withCronSync.crowdin webhooks.crowdin}}
                     crowdin-schedule="true"
-                {{/if}}
-                {{#if withCronSync.integration}}
+                {{/or}}
+                {{#or withCronSync.integration webhooks.integration}}
                     integration-schedule="true"
-                {{/if}}
+                {{/or}}
                 {{#if integrationOneLevelFetching}}
                     integration-one-level-fetching="true"
                 {{/if}}
@@ -45,6 +51,9 @@
                 {{/if}}
                 integration-name="{{name}}"
                 integration-logo="logo.png"
+                {{#if uploadTranslations}}
+                    integration-button-menu-items='[{"label":"Upload Translations", "action":"uploadTranslations"}]'
+                {{/if}}
         >
         </crowdin-simple-integration>
     </div>
@@ -74,67 +83,85 @@
                 modal-title="Settings"
                 close-button-title="Close"
         >
+            <div class="loader hidden">
+                <crowdin-progress-indicator></crowdin-progress-indicator>
+            </div>
             <div id="modal-content">
                 {{#each configurationFields}}
                     {{#if key}}
                         {{#ifeq type "checkbox"}}
-                                <crowdin-checkbox
+                            <crowdin-checkbox
+                                id="{{key}}-settings"
+                                key="{{key}}"
+                                label="{{label}}"
+                                value="false"
+                                use-switch
+                                {{#if helpText}}
+                                    help-text="{{helpText}}"
+                                {{/if}}
+                                {{#if helpTextHtml}}
+                                    help-text-html="{{helpTextHtml}}"
+                                {{/if}}
+                                {{#ifeq defaultValue true}}
+                                    checked="{{defaultValue}}"
+                                {{/ifeq}}
+                                {{#if dependencySettings}}
+                                    data-dependency="{{dependencySettings}}"
+                                {{/if}}
+                            >
+                            </crowdin-checkbox>
+                        {{/ifeq}}
+                        {{#ifeq type "select"}}
+                            <crowdin-select
+                                {{#if isMulti}}
+                                    is-multi
+                                    close-on-select="false"
+                                {{/if}}
+                                {{#if isSearchable}}
+                                    is-searchable
+                                {{/if}}
                                     id="{{key}}-settings"
                                     key="{{key}}"
                                     label="{{label}}"
-                                    value="false"
-                                    use-switch
-                                    {{#if helpText}}
-                                        help-text="{{helpText}}"
-                                    {{/if}}
-                                    {{#if helpTextHtml}}
-                                        help-text-html="{{helpTextHtml}}"
-                                    {{/if}}
-                                    {{#ifeq defaultValue true}}
-                                        checked="{{defaultValue}}"
-                                    {{/ifeq}}
-                                >
-                                </crowdin-checkbox>
+                                {{#if helpText}}
+                                    help-text="{{helpText}}"
+                                {{/if}}
+                                {{#if helpTextHtml}}
+                                    help-text-html="{{helpTextHtml}}"
+                                {{/if}}
+                                {{#if dependencySettings}}
+                                    data-dependency="{{dependencySettings}}"
+                                {{/if}}
+                            >
+                                {{#each options}}
+                                    <option
+                                        {{#if ../defaultValue}}
+                                            {{#ifeq ../defaultValue value}} selected {{/ifeq}}
+                                            {{#in ../defaultValue value}} selected {{/in}}
+                                        {{/if}}
+                                        value="{{value}}">{{label}}
+                                    </option>
+                                {{/each}}
+                            </crowdin-select>
                         {{/ifeq}}
-                        {{#ifeq type "select"}}
-                                <crowdin-select
-                                    {{#if isMulti}}
-                                        is-multi
-                                        close-on-select="false"
-                                    {{/if}}
-                                    {{#if isSearchable}}
-                                        is-searchable
-                                    {{/if}}
-                                        id="{{key}}-settings"
-                                        key="{{key}}"
-                                        label="{{label}}"
+                        {{#ifeq type "text"}}
+                            <crowdin-input
+                                    id="{{key}}-settings"
+                                    label="{{label}}"
+                                    key="{{key}}"
+                                    with-fixed-height
                                     {{#if helpText}}
                                         help-text="{{helpText}}"
                                     {{/if}}
                                     {{#if helpTextHtml}}
                                         help-text-html="{{helpTextHtml}}"
                                     {{/if}}
-                                >
-                                    {{#each options}}
-                                        <option {{#ifeq ../defaultValue value}} selected {{/ifeq}} value="{{value}}">{{label}}</option>
-                                    {{/each}}
-                                </crowdin-select>
-                        {{/ifeq}}
-                        {{#ifeq type "text"}}
-                                <crowdin-input
-                                        id="{{key}}-settings"
-                                        label="{{label}}"
-                                        key="{{key}}"
-                                        with-fixed-height
-                                        {{#if helpText}}
-                                            help-text="{{helpText}}"
-                                        {{/if}}
-                                        {{#if helpTextHtml}}
-                                            help-text-html="{{helpTextHtml}}"
-                                        {{/if}}
-                                        value="{{#if defaultValue}}{{defaultValue}}{{/if}}"
-                                >
-                                </crowdin-input>
+                                    {{#if dependencySettings}}
+                                        data-dependency="{{dependencySettings}}"
+                                    {{/if}}
+                                    value="{{#if defaultValue}}{{defaultValue}}{{/if}}"
+                            >
+                            </crowdin-input>
                         {{/ifeq}}
                     {{else}}
                         <crowdin-p>{{label}}</crowdin-p>
@@ -191,6 +218,7 @@
             .then(queryParams => fetch(`api/logout${queryParams}`, { method: 'POST' }))
             .then(checkResponse)
             .then(reloadLocation)
+            .then(localStorage.removeItem('revised_{{name}}'))
             .catch(e => catchRejection(e, 'Looks like you are not logged in'));
     }
 
@@ -225,9 +253,9 @@
                 project = res;
                 appComponent.setCrowdinLanguagesData(project.targetLanguages)
             })
-            {{#if withCronSync}}
+            {{#or withCronSync webhooks}}
                 .then(() => getSyncSettings('crowdin'))
-            {{/if}}
+            {{/or}}
             .catch(e => catchRejection(e, 'Can\'t fetch Crowdin data'))
             .finally(() => (appComponent.setAttribute('is-crowdin-loading', false)));
     }
@@ -272,9 +300,9 @@
                     appComponent.setIntegrationOpenedFolders(openIds);
                 }
             })
-            {{#if withCronSync}}
+            {{#or withCronSync webhooks}}
                 .then(() => getSyncSettings('integration'))
-            {{/if}}
+            {{/or}}
             .catch(e => catchRejection(e, 'Can\'t fetch {{name}} templates'))
             .finally(() => (appComponent.setAttribute('is-integration-loading', false)));
     }
@@ -301,26 +329,46 @@
             .catch(e => catchRejection(e, 'Can\'t fetch file progress'));
     }
 
-    function uploadFilesToCrowdin(e) {
-        if (e.detail.length === 0) {
+    function uploadFilesToCrowdin(event) {
+        let files = [];
+        let uploadTranslations = false;
+        if (event.detail.action === 'uploadTranslations') {
+            files = event.detail.files;
+            uploadTranslations = true;
+        } else {
+            files = event.detail;
+        }
+
+        if (event.detail.length === 0) {
             showToast('Select templates which will be pushed to Crowdin');
             return;
         }
         appComponent.setAttribute('is-to-crowdin-process', true);
-        const req = e.detail.filter(f => f.node_type !== folderType).map(f => ({
-            name: f.name,
-            id: f.id,
-            type: f.type,
-            parentId: f.parent_id
-        }));
+        let req;
+        {{#if integrationOneLevelFetching}}
+            req = files.map(f => ({
+                name: f.name,
+                id: f.id,
+                type: f.type,
+                parentId: f.parent_id,
+                nodeType: f.node_type
+            }));
+        {{else}}
+            req = files.filter(f => f.node_type !== folderType).map(f => ({
+                name: f.name,
+                id: f.id,
+                type: f.type,
+                parentId: f.parent_id
+            }));
+        {{/if}}
         checkOrigin()
-            .then(restParams => fetch('api/crowdin/update' + restParams, {
+            .then(restParams => fetch(`api/crowdin/update${restParams}&uploadTranslations=${uploadTranslations}`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(req)
             }))
             .then(checkResponse)
-            .then(() => showToast(`File${e.detail.length > 1 ? 's' : ''} imported successfully`))
+            .then(() => showToast(`File${event.detail.length > 1 ? 's' : ''} imported successfully`))
             .then(getCrowdinData)
             .catch(e => catchRejection(e, 'Can\'t upload templates to Crowdin'))
             .finally(() => (appComponent.setAttribute('is-to-crowdin-process', false)));
@@ -353,32 +401,37 @@
     const settingsSaveBtn = document.getElementById('settings-save-btn');
     let config = JSON.parse('{{{config}}}');
 
+    function triggerEvent(el, type) {
+        const e = document.createEvent('HTMLEvents');
+        e.initEvent(type, false, true);
+        el.dispatchEvent(e);
+    }
+
     function fillSettingsForm() {
         Object.entries(config).forEach(([key, value]) => {
             if (value) {
                 const el = document.getElementById(`${key}-settings`);
-                if (el.tagName.toLowerCase() === 'crowdin-select') {
-                    if (el.hasAttribute('is-multi')) {
-                        el.value = JSON.stringify(value);
+                if (el) {
+                    if (el.tagName.toLowerCase() === 'crowdin-select') {
+                        if (el.hasAttribute('is-multi')) {
+                            el.value = JSON.stringify(value);
+                        } else {
+                            el.value = JSON.stringify([value]);
+                        }
+                    } else if (el.tagName.toLowerCase() === 'crowdin-checkbox') {
+                        el.checked = !!value;
                     } else {
-                        el.value = JSON.stringify([value]);
+                        el.value = value;
                     }
-                } else if (el.tagName.toLowerCase() === 'crowdin-checkbox') {
-                    el.checked = !!value;
-                } else {
-                    el.value = value;
+
+                    triggerEvent(el, 'change');
                 }
             }
         });
-        {{#if withCronSync}}
-            const sheduleSettings = document.querySelector('#schedule-settings');
-            if (JSON.parse(sheduleSettings.value).length <= 0) {
-                sheduleSettings.value = JSON.stringify(["0"]);
-            }
-        {{/if}}
     }
 
     function saveSettings() {
+        setLoader();
         const settingsElements = Array.from(document.getElementById('modal-content').children);
         const tags = ['crowdin-checkbox', 'crowdin-select', 'crowdin-input'];
         const configReq = {};
@@ -413,6 +466,7 @@
             })
             .catch(e => catchRejection(e, 'Can\'t save settings'))
             .finally(() => {
+                unsetLoader();
                 settingsSaveBtn.removeAttribute('disabled');
                 settingsModal.close();
                 {{#if reloadOnConfigSave}}
@@ -421,6 +475,19 @@
                 {{/if}}
             });
     }
+
+    function setLoader() {
+        const loader = document.querySelector('#settings-modal .loader');
+        loader.classList.remove('hidden');
+    }
+
+    function unsetLoader() {
+        const loader = document.querySelector('#settings-modal .loader');
+        setTimeout(function() {
+            loader.classList.add('hidden');
+        }, 500)
+    }
+
     {{else}}
          const settingsModal = undefined;
     {{/if}}
@@ -449,7 +516,7 @@
         })
     {{/if}}
 
-    {{#if withCronSync}}
+    {{#or withCronSync webhooks}}
         document.body.addEventListener('integrationScheduleSync', setIntegrationScheduleSync);
         document.body.addEventListener('crowdinScheduleSync', setCrowdinScheduleSync);
         document.body.addEventListener('crowdinDisableSync', disableCrowdinSync);
@@ -510,7 +577,7 @@
                 .catch(e => catchRejection(e, 'Can\'t save schedule sync settings'))
                 .finally(() => (appComponent.setAttribute(`is-${provider}-loading`, false)));
         }
-    {{/if}}
+    {{/or}}
 
     {{#if checkSubscription}}
         const subscriptionInfo = document.getElementById('subscription-info');
@@ -530,6 +597,22 @@
 
         getSubscriptionInfo();
     {{/if}}
+
+    {{#if uploadTranslations}}
+        const translationInfo = document.getElementById('translation-info');
+        function checkAlert(alert) {
+            const revised = localStorage.getItem('revised_{{name}}') === '1';
+            if (!revised) {
+                alert.style.display = 'block';
+            }
+        }
+        function closeAlert(el) {
+            const alert = el.closest('crowdin-alert');
+            alert.style.display = 'none';
+            localStorage.setItem('revised_{{name}}', 1);
+        }
+        checkAlert(translationInfo);
+    {{/if}}
 </script>
 
-</html>
+</html>

package/out/views/partials/head.handlebars

@@ -3,15 +3,16 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <title></title>
-        <link rel="stylesheet" href="assets/css/styles.css">
+        <link rel="stylesheet" href="/assets/css/styles.css">
         <script type="module"
             src="https://crowdin-web-components.s3.amazonaws.com/crowdin-web-components/crowdin-web-components.esm.js"></script>
         <script nomodule=""
             src="https://crowdin-web-components.s3.amazonaws.com/crowdin-web-components/crowdin-web-components.js"></script>
         <script type="text/javascript" src="https://cdn.crowdin.com/apps/dist/iframe.js"></script>
-        <script type="text/javascript" src="assets/js/polyfills/promise.js"></script>
-        <script type="text/javascript" src="assets/js/polyfills/fetch.js"></script>
-        <script type="text/javascript" src="assets/js/main.js"></script>
+        <script type="text/javascript" src="/assets/js/polyfills/promise.js"></script>
+        <script type="text/javascript" src="/assets/js/polyfills/fetch.js"></script>
+        <script type="text/javascript" src="/assets/js/main.js"></script>
+        <script type="text/javascript" src="/assets/js/dependent.js"></script>
         <style>
                 .ml-10 {
                         margin-left: 10px;

package/package.json

@@ -1,46 +1,66 @@
 {
   "name": "@crowdin/app-project-module",
-  "version": "0.26.6",
+  "version": "0.28.0-10",
   "description": "Module that generates for you all common endpoints for serving standalone Crowdin App",
   "main": "out/index.js",
   "types": "out/index.d.ts",
   "scripts": {
-    "build": "tsc -p ./ && cp -R views out && cp -R static out && cp logo.png out",
+    "build": "tsc -p ./ && cp -R views out && cp -R static out && cp logo.png out && rollup -c rollup.config.mjs",
     "lint": "eslint --fix \"{src,tests}/**/*.{js,ts}\"",
     "prettier": "prettier --config .prettierrc src/**/*.ts --write",
     "lint-ci": "eslint \"{src,tests}/**/*.{js,ts}\"",
-    "test-coverage": "jest --config jestconfig.json --ci --reporters=jest-junit --reporters=default --coverage --coverageReporters=cobertura --coverageReporters=html",
-    "test": "jest --config jestconfig.json"
+    "test-coverage": "jest --ci --reporters=jest-junit --reporters=default --coverage --coverageReporters=cobertura --coverageReporters=html",
+    "test": "jest"
   },
   "dependencies": {
-    "@crowdin/crowdin-apps-functions": "0.3.1",
-    "@types/pg": "^8.6.5",
+    "@crowdin/crowdin-apps-functions": "0.4.0",
+    "@types/pg": "^8.6.6",
+    "amqplib": "^0.10.3",
     "crypto-js": "^4.0.0",
-    "express": "4.17.1",
+    "express": "4.18.2",
     "express-handlebars": "^5.3.4",
     "mysql2": "^2.3.3",
-    "node-cron": "^3.0.0",
-    "pg": "^8.8.0",
-    "sqlite3": "^5.0.2",
+    "node-cron": "^3.0.2",
+    "pg": "^8.10.0",
+    "sqlite3": "^5.1.6",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
+    "@types/amqplib": "^0.10.1",
+    "@babel/preset-react": "^7.18.6",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.11.12",
+    "@rjsf/core": "^5.2.0",
+    "@rjsf/mui": "^5.2.0",
+    "@rjsf/utils": "^5.2.0",
+    "@rjsf/validator-ajv8": "^5.2.0",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-terser": "^0.4.0",
     "@types/crypto-js": "^4.0.0",
-    "@types/express": "4.17.13",
+    "@types/express": "4.17.17",
     "@types/express-handlebars": "^5.3.1",
-    "@types/jest": "^29.2.5",
-    "@types/node": "^12.0.10",
-    "@types/node-cron": "^3.0.0",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^12.20.55",
+    "@types/node-cron": "^3.0.7",
     "@typescript-eslint/eslint-plugin": "^2.3.1",
     "@typescript-eslint/parser": "^2.3.1",
     "eslint": "^6.4.0",
     "eslint-config-prettier": "^6.3.0",
     "eslint-plugin-prettier": "^3.1.1",
-    "jest": "^29.3.1",
+    "jest": "^29.5.0",
     "jest-junit": "^15.0.0",
     "prettier": "^2.8.1",
-    "ts-jest": "^29.0.3",
-    "typescript": "^4.4.4"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^3.20.2",
+    "ts-jest": "^29.0.5",
+    "typescript": "^4.9.5"
   },
   "repository": {
     "type": "git",
@@ -52,12 +72,6 @@
     "Applications",
     "App"
   ],
-  "jest": {
-    "coverageReporters": [
-      "text",
-      "cobertura"
-    ]
-  },
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/crowdin/app-project-module/issues"