@crowdin/app-project-module 0.71.2 → 0.73.0

package/out/views/main.handlebars

@@ -36,6 +36,7 @@
             <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>
+                <crowdin-button icon-before="manage_accounts" onclick="showPermissionsDialog()">Permissions</crowdin-button>
                 {{#if infoModal}}
                     <crowdin-button icon-before="info" onclick="openModal(infoModal);">{{infoModal.title}}</crowdin-button>
                 {{/if}}
@@ -115,19 +116,113 @@
              <crowdin-button class="ml-10" secondary onclick="integrationLogout()">Log out</crowdin-button>
          </div>
     </crowdin-modal>
-    {{#if infoModal}}
+
     <crowdin-modal
         style="display: none;"
-        id="info-modal"
-        modal-width="50"
-        modal-title="{{infoModal.title}}"
+        id="permissions-modal"
+        modal-title="Permissions"
         close-button-title="Close"
+        close-button
+        body-overflow-unset
     >
-         <div>
-             {{{infoModal.content}}}
-         </div>
+        <div class="loader hidden">
+            <crowdin-progress-indicator></crowdin-progress-indicator>
+        </div>
+        <div class="permissions-modal-content">
+            <div class="select-users-block">
+                <crowdin-users-select
+                    allow-new-options
+                    is-multi
+                    is-searchable
+                    id="users"
+                    key="users"
+                    label="Users"
+                    help-text="Search for members by name, username, email, or invite new ones using their email."
+                    is-position-fixed
+                    onchange="inviteUsers()"
+                    >
+                </crowdin-select>
+            </div>
+            <div class="select-users-info">
+                <div class="confirm-users-block mt-2 hidden">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th style="width: 40%;">Permission Type (Upcoming changes)</th>
+                                <th style="width: 35%;">Users</th>
+                                <th class="status" style="width: 20%;">Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {{#if hasOrganization}}
+                                <tr class="organization-invite">
+                                    <td>
+                                        <crowdin-p>Registration in Organization</crowdin-p>
+                                    </td>
+                                    <td class="affected-users"></td>
+                                    <td class="status"></td>
+                                </tr>
+                            {{/if}}
+                            <tr class="project-invite">
+                                <td>
+                                    <crowdin-p>Project Manager Access</crowdin-p>
+                                </td>
+                                <td class="affected-users"></td>
+                                <td class="status"></td>
+                            </tr>
+                            <tr class="application-settings-invite">
+                                <td>
+                                    <crowdin-p>Application Access</crowdin-p>
+                                    <div class="permission-description">{{name}} installation settings will be updated.</div>
+                                </td>
+                                <td class="affected-users"></td>
+                                <td class="status"></td>
+                            </tr>
+                            <tr class="application-credentials-invite">
+                                <td>
+                                    <crowdin-p>Access to the Integration</crowdin-p>
+                                    <div class="permission-description">{{name}} settings will be updated.</div>
+                                </td>
+                                <td class="affected-users"></td>
+                                <td class="status"></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                {{#if zenModeUrl}}
+                    <div class="mt-2">
+                        <crowdin-input
+                            with-fixed-height
+                            label="Zen Mode link"
+                            help-text="This focused view allows you to concentrate solely on the Integrations section, eliminating distractions and providing a streamlined experience for managing your project integrations."
+                            value="{{zenModeUrl}}"
+                            name="zenModeLink"
+                            with-copy-button
+                        ></crowdin-input>
+                    </div>
+                {{/if}}
+            </div>
+        </div>
+
+        <div slot="footer">
+            <crowdin-button id="confirm-users-btn" outlined onclick="inviteUsers(false)">Save</crowdin-button>
+        </div>
     </crowdin-modal>
+
+    {{#if infoModal}}
+        <crowdin-modal
+            style="display: none;"
+            id="info-modal"
+            modal-width="50"
+            modal-title="{{infoModal.title}}"
+            close-button-title="Close"
+        >
+             <div>
+                 {{{infoModal.content}}}
+             </div>
+        </crowdin-modal>
     {{/if}}
+
     {{#if configurationFields}}
         <crowdin-modal
             style="display: none;"
@@ -785,7 +880,7 @@
         }
 
         function saveSettings() {
-            setLoader();
+            setLoader('#settings-modal');
             const settingsElements = Array.from(document.getElementById('modal-content').children);
             const tags = ['crowdin-checkbox', 'crowdin-select', 'crowdin-input'];
             const configReq = {};
@@ -820,7 +915,7 @@
                 })
                 .catch(e => catchRejection(e, 'Can\'t save settings'))
                 .finally(() => {
-                    unsetLoader();
+                    unsetLoader('#settings-modal');
                     settingsSaveBtn.removeAttribute('disabled');
                     closeModal(settingsModal);
                     {{#if reloadOnConfigSave}}
@@ -830,13 +925,174 @@
                 });
         }
 
-        function setLoader() {
-            const loader = document.querySelector('#settings-modal .loader');
+        function showConfirmUsersBlock() {
+            const confirmUsersBlock = document.querySelector('.confirm-users-block');
+            confirmUsersBlock.classList.remove('hidden');
+
+            const permissionsModal = document.getElementById('permissions-modal');
+            permissionsModal.removeAttribute('body-overflow-unset')
+        }
+
+        function hideConfirmUsersBlock() {
+            const confirmUsersBlock = document.querySelector('.confirm-users-block');
+            confirmUsersBlock.classList.add('hidden');
+
+            const permissionsModal = document.getElementById('permissions-modal');
+            permissionsModal.setAttribute('body-overflow-unset', true)
+        }
+
+        function showPermissionsDialog() {
+            hideConfirmUsersBlock();
+            openModal(permissions)
+            setLoader('#permissions-modal');
+            const select = document.getElementById('users');
+
+            select.value = '[]';
+
+            checkOrigin()
+                .then(restParams => fetch('api/users' + restParams))
+                .then(checkResponse)
+                .then((res) => {
+                console.log(res)
+                    let userOptions = res.data.users.map(user => `<option value="${user.id}">${user.name}</option>`).join('');
+                    select.innerHTML = userOptions;
+                    select.value = JSON.stringify(res.data.managers);
+                })
+                .catch(e => catchRejection(e, 'Can\'t fetch users'))
+                .finally(() => unsetLoader('#permissions-modal'));
+        }
+
+        async function inviteUsers(onlyCheck = true) {
+            setLoader('#permissions-modal');
+
+            const select = document.getElementById('users');
+
+            if (onlyCheck && select.value === '[]') {
+                hideConfirmUsersBlock();
+                unsetLoader('#permissions-modal');
+                return;
+            }
+
+            const params = {
+                users: JSON.parse(select.value),
+                onlyCheck,
+            };
+
+            checkOrigin()
+                .then(restParams => fetch('api/invite-users' + restParams, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(params)
+                }))
+                .then(checkResponse)
+                .then((response) => {
+                    if (!onlyCheck) {
+                        showToast('Users successfully updated');
+                        hideConfirmUsersBlock();
+                        closeModal(permissions);
+                        return;
+                    }
+
+                    prepareUsersConfirmBlock(response.data);
+                })
+                .catch(e => {
+                    catchRejection(e, e?.error || 'Can\'t invite users')
+                })
+                .finally(() => unsetLoader('#permissions-modal'));
+        }
+
+        function prepareUsersConfirmBlock(usersData) {
+            showConfirmUsersBlock();
+
+            const organizationInvite = document.querySelector('.organization-invite');
+            const projectInvite = document.querySelector('.project-invite');
+            const applicationCredentialsInvite = document.querySelector('.application-credentials-invite');
+
+            const grantedElement = '<span class="badge badge-granted">Available</span>';
+            const willGrantedElement = '<span class="badge badge-will-be-granted">Will Be Granted</span>';
+            const notAvailableElement = '<span class="badge badge-not-available">Manual Action Required</span>';
+
+            // only in enterprise
+            if (organizationInvite) {
+                const organizationWillGrantElement = '<span class="badge badge-will-be-granted">Will be registered</span>';
+
+                processUsersWhoWillBeInvited(organizationInvite, usersData.usersWhoWillBeInvitedToOrganization, organizationWillGrantElement, grantedElement);
+            }
+
+            processUsersWhoWillBeInvited(projectInvite, usersData.usersWhoWillBeInvitedToProject, willGrantedElement, grantedElement);
+            processUsersWhoWillBeInvited(applicationCredentialsInvite, usersData.usersWhoNotIssetInIntegration, willGrantedElement, grantedElement);
+
+            processUsersWhoWillBeInvitedApplicationSettings(usersData, willGrantedElement, grantedElement, notAvailableElement);
+        }
+
+        function processUsersWhoWillBeInvited(element, users, grantMessage, alreadyGrantedMessage) {
+            const tooltip = element.querySelector('.status');
+            const userList = element.querySelector('.affected-users');
+
+            if (users.length) {
+                tooltip.innerHTML = grantMessage;
+
+                let affectedUsers = '<ul>';
+                for (const user of users) {
+                    affectedUsers += `<li><crowdin-p>${user.name}</crowdin-p></li>`;
+                }
+                affectedUsers += '</ul>';
+                userList.innerHTML = affectedUsers;
+            } else {
+                tooltip.innerHTML = alreadyGrantedMessage;
+                userList.innerHTML = '<crowdin-p>&horbar;</crowdin-p>';
+            }
+        }
+
+        function processUsersWhoWillBeInvitedApplicationSettings(usersData, willGrantedElement, grantedElement, notAvailableElement) {
+            const applicationSettingsInvite = document.querySelector('.application-settings-invite');
+
+            const tooltip = applicationSettingsInvite.querySelector('.status');
+            const userList = applicationSettingsInvite.querySelector('.affected-users');
+
+            let affectedUsers = '<ul>';
+
+            if (!usersData.editApplicationAvailable) {
+                tooltip.innerHTML = `<crowdin-tooltip
+                    position="left"
+                    tooltip=">The application doesn't have permission to update this setting.">
+                        ${notAvailableElement}
+                    </crowdin-tooltip>`;
+                for (const user of usersData.usersWhoNotIssetInApplicationInstallation) {
+                    affectedUsers += `<li><crowdin-p>${user.name}</crowdin-p></li>`;
+                }
+                userList.innerHTML = affectedUsers + '</ul>';
+            } else if (!usersData.usersWhoNotIssetInApplicationInstallation.length) {
+                tooltip.innerHTML = grantedElement;
+                userList.innerHTML = '<crowdin-p>&horbar;</crowdin-p>';
+            } else {
+                if (usersData.isAdmin) {
+                    tooltip.innerHTML = willGrantedElement;
+                    for (const user of usersData.usersWhoNotIssetInApplicationInstallation) {
+                        affectedUsers += `<li><crowdin-p>${user.name}</crowdin-p></li>`;
+                    }
+                    userList.innerHTML = affectedUsers + '</ul>';
+                } else {
+                    tooltip.innerHTML = `<crowdin-tooltip
+                        position="left"
+                        tooltip="Only organization admins have permission to update this setting.">
+                            ${notAvailableElement}
+                        </crowdin-tooltip>`;
+                    for (const user of usersData.usersWhoNotIssetInApplicationInstallation) {
+                        affectedUsers += `<li><crowdin-p>${user.name}</crowdin-p></li>`;
+                    }
+                    userList.innerHTML = affectedUsers + '</ul>';
+                }
+            }
+        }
+
+        function setLoader(id) {
+            const loader = document.querySelector(`${id} .loader`);
             loader.classList.remove('hidden');
         }
 
-        function unsetLoader() {
-            const loader = document.querySelector('#settings-modal .loader');
+        function unsetLoader(id) {
+            const loader = document.querySelector(`${id} .loader`);
             setTimeout(function() {
                 loader.classList.add('hidden');
             }, 500)
@@ -845,6 +1101,8 @@
          const settingsModal = undefined;
     {{/if}}
 
+    const permissions = document.getElementById('permissions-modal');
+
     {{#if infoModal}}
          const infoModal = document.getElementById('info-modal');
     {{else}}
@@ -853,7 +1111,9 @@
 
     document.addEventListener('keydown', (event) => {
         if (event.keyCode == 27) {
-
+            if (users) {
+                closeModal(permissions);
+            }
             if (infoModal) {
                 closeModal(infoModal);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdin/app-project-module",
-  "version": "0.71.2",
+  "version": "0.73.0",
   "description": "Module that generates for you all common endpoints for serving standalone Crowdin App",
   "main": "out/index.js",
   "types": "out/index.d.ts",