Improve extension type indication

c33649753b7ab730712fac522b432c0749fbb728

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: abe51682c8010443ea9e92b31b25c29c8cee52cb

public/css/extensions-panel.css+1 -1 Viewed

     border-radius: 10px;
     align-items: center;
     justify-content: space-between;
     gap: 10px5px;
+}
 .extensions_info .extension_name {

public/scripts/extensions.js+100 -32 Viewed

 /** @type {string[]} */
 export let extensionNames = [];
 -/** @type {Record<string, string>} */
 +/**
 + * Holds the type of each extension.
 + * Don't use this directly, use getExtensionType instead!
 + * @type {Record<string, string>}
 + */
 export let extensionTypes = {};
 let manifests = {};

 // Periodically check for new extensions
 const menuInterval = setInterval(showHideExtensionsMenu, 1000);
 +/**
 + * Gets the type of an extension based on its external ID.
 + * @param {string} externalId External ID of the extension (excluding or including the leading 'third-party/')
 + * @returns {string} Type of the extension (global, local, system, or empty string if not found)
 + */
 +function getExtensionType(externalId) {
 +    const id = Object.keys(extensionTypes).find(id => id === externalId || (id.startsWith('third-party') && id.endsWith(externalId)));
 +    return id ? extensionTypes[id] : '';
 +}
++
 async function doExtrasFetch(endpoint, args) {
     if (!args) {
         args = {};

     $('#extensions_status').attr('class', _class);
+}
 +/**
 + * Adds a CSS file for an extension.
 + * @param {string} name Extension name
 + * @param {object} manifest Extension manifest
 + * @returns {Promise<void>} When the CSS is loaded
 + */
 function addExtensionStyle(name, manifest) {
     if (!manifest.css) {
 +        return Promise.resolve();
 +    }
++
     return new Promise((resolve, reject) => {
         const url = `/scripts/extensions/${name}/${manifest.css}`;

     });
+}
 +/**
 + * Loads a JS file for an extension.
 + * @param {string} name Extension name
 + * @param {object} manifest Extension manifest
 + * @returns {Promise<void>} When the script is loaded
 + */
 +function addExtensionScript(name, manifest) {
 +    if (!manifest.js) {
         return Promise.resolve();
+    }
 -function addExtensionScript(name, manifest) {
 -    if (manifest.js) {
     return new Promise((resolve, reject) => {
         const url = `/scripts/extensions/${name}/${manifest.js}`;
         let ready = false;

             script.src = url;
             script.async = true;
             script.onerror = function (err) {
                                     reject(err, script);
             };
                             script.onload = script.onreadystatechange = function () {
 -                    // console.log(this.readyState); // uncomment this line to see which ready states are called.
 +                if (!ready) {
 -                    if (!ready && (!this.readyState || this.readyState == 'complete')) {
                     ready = true;
                     resolve();
+                }

     });
+}
 -    return Promise.resolve();
 -}
+-
+-
+-
 /**
  * Generates HTML string for displaying an extension in the UI.
+ *

  * @return {string} - The HTML string that represents the extension.
  */
 function generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal, checkboxClass) {
 +    function getExtensionIcon() {
 +        const type = getExtensionType(name);
 +        switch (type) {
 +            case 'global':
 +                return '<i class="fa-fw fa-solid fa-server" data-i18n="[title]ext_type_global" title="This is a global extension, available for all users."></i>';
 +            case 'local':
 +                return '<i class="fa-fw fa-solid fa-user" data-i18n="[title]ext_type_local" title="This is a local extension, available only for you."></i>';
 +            case 'system':
 +                return '<i class="fa-fw fa-solid fa-cog" data-i18n="[title]ext_type_system" title="This is a built-in extension. It cannot be deleted and updates with the app."></i>';
 +            default:
 +                return '<i class="fa-fw fa-solid fa-question" title="Unknown extension type."></i>';
 +        }
 +    }
++
 +    const isUserAdmin = isAdmin();
 +    const extensionIcon = getExtensionIcon();
     const displayName = manifest.display_name;
     let displayVersion = manifest.version ? ` v${manifest.version}` : '';
     const externalId = name.replace('third-party', '');

     let deleteButton = isExternal ? `<button class="btn_delete menu_button" data-name="${externalId}" title="Delete"><i class="fa-fw fa-solid fa-trash-can"></i></button>` : '';
     let updateButton = isExternal ? `<button class="btn_update menu_button displayNone" data-name="${externalId}" title="Update available"><i class="fa-solid fa-download fa-fw"></i></button>` : '';
 +    let moveButton = isExternal && isUserAdmin ? `<button class="btn_move menu_button" data-name="${externalId}" title="Move"><i class="fa-solid fa-folder-tree fa-fw"></i></button>` : '';
     let modulesInfo = '';
     if (isActive && Array.isArray(manifest.optional)) {

             <div class="extension_toggle">
                 ${toggleElement}
             </div>
 +            <div class="extension_icon">
 +                ${extensionIcon}
 +            </div>
             <div class="flexGrow">
                 ${originHtml}
                 <span class="${isActive ? 'extension_enabled' : isDisabled ? 'extension_disabled' : 'extension_missing'}">

             <div class="extension_actions flex-container alignItemsCenter">
                 ${updateButton}
 +                ${moveButton}
                 ${deleteButton}
             </div>
         </div>`;

  * Generates the HTML strings for all extensions and displays them in a popup.
  */
 async function showExtensionsDetails() {
 +    const abortController = new AbortController();
     let popupPromise;
     try {
         const htmlDefault = $('<div class="marginBot10"><h3 class="textAlignCenter">Built-in Extensions:</h3></div>');

             },
         });
         popupPromise = popup.show();
         checkForUpdatesManual(abortController.signal).finally(() => htmlLoading.remove());
     } catch (error) {
         toastr.error('Error loading extensions. See browser console for details.');
         console.error(error);
+    }
     if (popupPromise) {
         await popupPromise;
 +        abortController.abort();
+    }
     if (requiresReload) {
         showLoader();

@@ -702,7 +748,6 @@ async function showExtensionsDetails() {
702	748	}
703	749	}
704	750
705		-
706	751	/**
707	752	* Handles the click event for the update button of an extension.
708	753	* This function makes a POST request to '/update_extension' with the extension's name.

 async function onUpdateClick() {
     const isCurrentUserAdmin = isAdmin();
     const extensionName = $(this).data('name');
     const isGlobal = extensionTypes[getExtensionType(extensionName]) === 'global';
     if (isGlobal && !isCurrentUserAdmin) {
         toastr.error(t`You don't have permission to update global extensions.`);
         return;

             headers: getRequestHeaders(),
             body: JSON.stringify({
                 extensionName,
                 global: extensionTypes[getExtensionType(extensionName]) === 'global',
             }),
         });

 async function onDeleteClick() {
     const extensionName = $(this).data('name');
     const isCurrentUserAdmin = isAdmin();
     const isGlobal = extensionTypes[getExtensionType(extensionName]) === 'global';
     if (isGlobal && !isCurrentUserAdmin) {
         toastr.error(t`You don't have permission to delete global extensions.`);
         return;

+    }
+}
 +async function onMoveClick() {
 +    const extensionName = $(this).data('name');
 +    const isCurrentUserAdmin = isAdmin();
 +    const isGlobal = getExtensionType(extensionName) === 'global';
 +    if (isGlobal && !isCurrentUserAdmin) {
 +        toastr.error(t`You don't have permission to move extensions.`);
 +        return;
 +    }
++
 +    toastr.info('Not implemented yet');
 +}
++
 /**
  * Deletes an extension via the API.
  * @param {string} extensionName Extension name to delete

             headers: getRequestHeaders(),
             body: JSON.stringify({
                 extensionName,
                 global: extensionTypes[getExtensionType(extensionName]) === 'global',
             }),
         });
     } catch (error) {

  * Fetches the version details of a specific extension.
+ *
  * @param {string} extensionName - The name of the extension.
 + * @param {AbortSignal} [abortSignal] - The signal to abort the operation.
  * @return {Promise<object>} - An object containing the extension's version details.
  * This object includes the currentBranchName, currentCommitHash, isUpToDate, and remoteUrl.
  * @throws {error} - If there is an error during the fetch operation, it logs the error to the console.
  */
 async function getExtensionVersion(extensionName, abortSignal) {
     try {
         const response = await fetch('/api/extensions/version', {
             method: 'POST',
             headers: getRequestHeaders(),
             body: JSON.stringify({ extensionName }),
 +                extensionName,
 +                global: getExtensionType(extensionName) === 'global',
 +            }),
 +            signal: abortSignal,
         });
         const data = await response.json();

     }, 1);
+}
 -async function checkForUpdatesManual() {
 +/**
 + * Performs a manual check for updates on all 3rd-party extensions.
 + * @param {AbortSignal} abortSignal Signal to abort the operation
 + * @returns {Promise<any[]>}
 + */
 +async function checkForUpdatesManual(abortSignal) {
     const promises = [];
     for (const id of Object.keys(manifests).filter(x => x.startsWith('third-party'))) {
         const externalId = id.replace('third-party', '');
         const promise = new Promise(async (resolve, reject) => {
             try {
                 const data = await getExtensionVersion(externalId, abortSignal);
                 const extensionBlock = document.querySelector(`.extension_block[data-name="${externalId}"]`);
                 if (extensionBlock) {
                     if (data.isUpToDate === false) {

     const promises = [];
     for (const [id, manifest] of Object.entries(manifests)) {
         const isGlobal = extensionTypes[getExtensionType(id]) === 'global';
         if (isGlobal && !isCurrentUserAdmin) {
             console.debug(`Skipping global extension: ${manifest.display_name} (${id}) for non-admin user`);
             continue;

     const isCurrentUserAdmin = isAdmin();
     const promises = [];
     for (const [id, manifest] of Object.entries(manifests)) {
         const isGlobal = extensionTypes[getExtensionType(id]) === 'global';
         if (isGlobal && !isCurrentUserAdmin) {
             console.debug(`Skipping global extension: ${manifest.display_name} (${id}) for non-admin user`);
             continue;

     for (const manifest of Object.values(manifests).sort((a, b) => a.loading_order - b.loading_order)) {
         const interceptorKey = manifest.generate_interceptor;
         if (typeof windowglobalThis[interceptorKey] === 'function') {
             try {
                 await windowglobalThis[interceptorKey](chat, contextSize, abort);
             } catch (e) {
                 console.error(`Failed running interceptor for ${manifest.display_name}`, e);
+            }

     let global = false;
     const installForAllButton = {
         text: t`Install for all users`,
         appendAtEnd: false,
         action: async () => {
             global = true;

     $('#extensions_autoconnect').on('input', autoConnectInputHandler);
     $('#extensions_details').on('click', showExtensionsDetails);
     $('#extensions_notify_updates').on('input', notifyUpdatesInputHandler);
     $(document).on('click', '.extensions_info .extension_block .toggle_disable', onDisableExtensionClick);
     $(document).on('click', '.extensions_info .extension_block .toggle_enable', onEnableExtensionClick);
     $(document).on('click', '.extensions_info .extension_block .btn_update', onUpdateClick);
     $(document).on('click', '.extensions_info .extension_block .btn_delete', onDeleteClick);
 +    $(document).on('click', '.extensions_info .extension_block .btn_move', onMoveClick);
     /**
      * Handles the click event for the third-party extension import button.

src/endpoints/extensions.js+10 -8 Viewed

+    }
     // Get all folders in system extensions folder, excluding third-party
     const buildInExtensionsbuiltInExtensions = fs
         .readdirSync(PUBLIC_DIRECTORIES.extensions)
         .filter(f => fs.statSync(path.join(PUBLIC_DIRECTORIES.extensions, f)).isDirectory())
         .filter(f => f !== 'third-party')
         .map(f => ({ type: 'system', name: f }));
 -    // Get all folders in global extensions folder
 -    const globalExtensions = fs
 -        .readdirSync(PUBLIC_DIRECTORIES.globalExtensions)
 -        .filter(f => fs.statSync(path.join(PUBLIC_DIRECTORIES.globalExtensions, f)).isDirectory())
 -        .map(f => ({ type: 'global', name: `third-party/${f}` }));
+-
     // Get all folders in local extensions folder
     const userExtensions = fs
         .readdirSync(path.join(request.user.directories.extensions))
         .filter(f => fs.statSync(path.join(request.user.directories.extensions, f)).isDirectory())
         .map(f => ({ type: 'local', name: `third-party/${f}` }));
 +    // Get all folders in global extensions folder
 +    // In case of a conflict, the extension will be loaded from the user folder
 +    const globalExtensions = fs
 +        .readdirSync(PUBLIC_DIRECTORIES.globalExtensions)
 +        .filter(f => fs.statSync(path.join(PUBLIC_DIRECTORIES.globalExtensions, f)).isDirectory())
 +        .map(f => ({ type: 'global', name: `third-party/${f}` }))
 +        .filter(f => !userExtensions.some(e => e.name === f.name));
++
     // Combine all extensions
     const allExtensions = Array.from(new Set([...buildInExtensionsbuiltInExtensions, ...globalExtensionsuserExtensions, ...userExtensionsglobalExtensions]));
     console.log(allExtensions);
     return response.send(allExtensions);