@crowdin/app-project-module 0.37.0 → 0.39.0

package/out/views/main.handlebars

@@ -33,7 +33,9 @@
                     </div>
                 </crowdin-alert>
             {{/if}}
-            <div>
+            <div id="buttons">
+                <crowdin-button id="show-integration-btn" class="hidden" icon-before="arrow_back" onclick="showIntegration();">Integration</crowdin-button>
+                <crowdin-button id="show-error-logs-btn" icon-before="list" onclick="showErrorLogs();">Error logs</crowdin-button>
                 {{#if infoModal}}
                     <crowdin-button icon-before="info" onclick="infoModal.open();">{{infoModal.title}}</crowdin-button>
                 {{/if}}
@@ -87,6 +89,16 @@
                 {{/if}}
         >
         </crowdin-simple-integration>
+        <div id="user-errors" class="hidden">
+            <crowdin-alert title="Error Logs">This table displays the most recent error logs from the past month. Logs older than one month will be automatically deleted.</crowdin-alert>
+            <crowdin-show-as-table
+                    is-loading
+                    id="user-errors-table"
+                    is-searchable
+                    total-records="25"
+                    search-placeholder="Search something"
+            ></crowdin-show-as-table>
+        </div>
     </div>
     <crowdin-toasts></crowdin-toasts>
     <crowdin-modal id="subscription-modal" modal-width="50" close-button="false">
@@ -256,6 +268,13 @@
             </div>
         </crowdin-modal>
     {{/or}}
+
+    <crowdin-modal
+            id="user-error-detail"
+            close-button-title="Close"
+            close-button="true"
+    >
+    </crowdin-modal>
 </body>
 <script type="text/javascript">
     document.body.addEventListener('refreshFilesList', (e) => {
@@ -491,95 +510,94 @@
     }
 
     {{#if configurationFields}}
-    const settingsModal = document.getElementById('settings-modal');
-    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);
-    }
+        const settingsModal = document.getElementById('settings-modal');
+        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]) => {
-            const el = document.getElementById(`${key}-settings`);
-            if (el && (value || el.tagName.toLowerCase() === 'crowdin-checkbox')) {
-                if (el.tagName.toLowerCase() === 'crowdin-select') {
-                    if (el.hasAttribute('is-multi')) {
-                        el.value = JSON.stringify(value);
+        function fillSettingsForm() {
+            Object.entries(config).forEach(([key, value]) => {
+                const el = document.getElementById(`${key}-settings`);
+                if (el && (value || el.tagName.toLowerCase() === 'crowdin-checkbox')) {
+                    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');
-            }
-        });
-    }
-
-    function saveSettings() {
-        setLoader();
-        const settingsElements = Array.from(document.getElementById('modal-content').children);
-        const tags = ['crowdin-checkbox', 'crowdin-select', 'crowdin-input'];
-        const configReq = {};
-        settingsElements
-            .filter(e => tags.includes(e.tagName.toLowerCase()))
-            .forEach(e => {
-                const key = e.getAttribute('key');
-                let value;
-                if (e.tagName.toLowerCase() === 'crowdin-select') {
-                    value = JSON.parse(e.value);
-                    if (!e.hasAttribute('is-multi')) {
-                        value = value.length > 0 ? value[0] : undefined;
-                    }
-                } else if (e.tagName.toLowerCase() === 'crowdin-checkbox') {
-                    value = !!e.checked;
-                } else {
-                    value = e.value;
+                    triggerEvent(el, 'change');
                 }
-                configReq[key] = value;
             });
-        settingsSaveBtn.setAttribute('disabled', true);
-        checkOrigin()
-            .then(restParams => fetch('api/settings' + restParams, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ config: configReq })
-            }))
-            .then(checkResponse)
-            .then(() => {
-                showToast('Settings successfully saved');
-                config = configReq;
-            })
-            .catch(e => catchRejection(e, 'Can\'t save settings'))
-            .finally(() => {
-                unsetLoader();
-                settingsSaveBtn.removeAttribute('disabled');
-                settingsModal.close();
-                {{#if reloadOnConfigSave}}
-                    getIntegrationData(true);
-                    getCrowdinData();
-                {{/if}}
-            });
-    }
+        }
 
-    function setLoader() {
-        const loader = document.querySelector('#settings-modal .loader');
-        loader.classList.remove('hidden');
-    }
+        function saveSettings() {
+            setLoader();
+            const settingsElements = Array.from(document.getElementById('modal-content').children);
+            const tags = ['crowdin-checkbox', 'crowdin-select', 'crowdin-input'];
+            const configReq = {};
+            settingsElements
+                .filter(e => tags.includes(e.tagName.toLowerCase()))
+                .forEach(e => {
+                    const key = e.getAttribute('key');
+                    let value;
+                    if (e.tagName.toLowerCase() === 'crowdin-select') {
+                        value = JSON.parse(e.value);
+                        if (!e.hasAttribute('is-multi')) {
+                            value = value.length > 0 ? value[0] : undefined;
+                        }
+                    } else if (e.tagName.toLowerCase() === 'crowdin-checkbox') {
+                        value = !!e.checked;
+                    } else {
+                        value = e.value;
+                    }
+                    configReq[key] = value;
+                });
+            settingsSaveBtn.setAttribute('disabled', true);
+            checkOrigin()
+                .then(restParams => fetch('api/settings' + restParams, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ config: configReq })
+                }))
+                .then(checkResponse)
+                .then(() => {
+                    showToast('Settings successfully saved');
+                    config = configReq;
+                })
+                .catch(e => catchRejection(e, 'Can\'t save settings'))
+                .finally(() => {
+                    unsetLoader();
+                    settingsSaveBtn.removeAttribute('disabled');
+                    settingsModal.close();
+                    {{#if reloadOnConfigSave}}
+                        getIntegrationData(true);
+                        getCrowdinData();
+                    {{/if}}
+                });
+        }
 
-    function unsetLoader() {
-        const loader = document.querySelector('#settings-modal .loader');
-        setTimeout(function() {
-            loader.classList.add('hidden');
-        }, 500)
-    }
+        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}}
@@ -807,6 +825,95 @@
         const notice = document.getElementById('notice');
         checkAlert(notice, 'notice');
     {{/if}}
+
+    function showErrorLogs() {
+        document.getElementById('show-error-logs-btn').classList.add('hidden');
+        document.getElementById('show-integration-btn').classList.remove('hidden');
+
+        appComponent.classList.add('hidden');
+        document.getElementById('user-errors').classList.remove('hidden');
+
+        checkOrigin()
+            .then(restParams => fetch('api/user-errors' + restParams))
+            .then(checkResponse)
+            .then((res) => {
+                const table = document.getElementById('user-errors-table');
+
+                const clickRow = (field, index, item) => {
+                    const modal = document.getElementById('user-error-detail');
+                    modal.open();
+                    modal.innerHTML = getUserErrorDetail(item);
+                };
+
+                table.setTableConfig && table.setTableConfig({
+                    defaultSortingColumn: "createdAt",
+                    defaultSortingDir: "desc",
+                    headerFields: [
+                        {
+                            field: "createdAt",
+                            name: "Date",
+                            isSortable: true,
+                            clickFn: clickRow,
+                        },
+                        {
+                            field: "action",
+                            name: "Action",
+                            clickFn: clickRow,
+                        },
+                        {
+                            field: "message",
+                            name: "Message",
+                            clickFn: clickRow,
+                        }
+                    ],
+                });
+
+                table.setTableData(JSON.stringify(res));
+                table.setAttribute(`is-loading`, false);
+            })
+            .catch(e => catchRejection(e, 'Can\'t fetch error logs'));
+    }
+
+    function showIntegration() {
+        document.getElementById('show-error-logs-btn').classList.remove('hidden');
+        document.getElementById('show-integration-btn').classList.add('hidden');
+
+        appComponent.classList.remove('hidden');
+        document.getElementById('user-errors').classList.add('hidden');
+    }
+
+    function getUserErrorDetail(error) {
+        const data = JSON.parse(error.data);
+
+        let html = '<div class="error-detail-table"><table>';
+        html += `<tr><td>Action</td><td>${error.action}</td></tr>`;
+        html += `<tr><td>Message</td><td>${error.message}</td></tr>`;
+        html += `<tr><td>Date/time</td><td>${error.createdAt}</td></tr>`;
+
+        if (data.requestParams) {
+            html += `<tr><td>Method</td><td>${data.requestParams.method}</td></tr>`;
+        }
+
+        if (data.responseData) {
+            html += `<tr><td>Response Data</td><td><pre>${JSON.stringify(data.responseData, null, 2)}</pre></td></tr>`;
+        }
+
+        if (data.appData) {
+            if (Array.isArray(data.appData)) {
+                html += `<tr><td>App Data</td><td><pre>${JSON.stringify(data.appData, null, 2)}</pre></td></tr>`;
+            } else if (typeof data.appData === 'object') {
+                for (const key in data.appData) {
+                    html += `<tr><td>${key.charAt(0).toUpperCase() + key.slice(1)}</td><td><pre>${JSON.stringify(data.appData[key], null, 2)}</pre></td></tr>`;
+                }
+            } else {
+                html += `<tr><td>App Data</td><td>${data.appData}</td></tr>`;
+            }
+        }
+
+        html += '</table></div>';
+
+        return html;
+    }
 </script>
 
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdin/app-project-module",
-  "version": "0.37.0",
+  "version": "0.39.0",
   "description": "Module that generates for you all common endpoints for serving standalone Crowdin App",
   "main": "out/index.js",
   "types": "out/index.d.ts",
@@ -16,8 +16,8 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.423.0",
     "@aws-sdk/s3-request-presigner": "^3.423.0",
-    "@crowdin/crowdin-apps-functions": "0.5.1",
-    "@crowdin/logs-formatter": "^2.0.4",
+    "@crowdin/crowdin-apps-functions": "0.6.0",
+    "@crowdin/logs-formatter": "^2.0.6",
     "@godaddy/terminus": "^4.12.1",
     "@types/pg": "^8.10.3",
     "amqplib": "^0.10.3",