Fix theme download unifying the usage (exelearning#1219)

Author: erseco

public/app/rest/apiCallManager.js

@@ -675,14 +675,12 @@ export default class ApiCallManager {
     /**
      * Get installed theme zip
      *
-     * @param {*} odeSessionId
-     * @param {*} $themeDirName
-     * @returns
+     * @param {string} themeId - The theme directory name
+     * @returns {Promise<{zipFileName: string, zipBase64: string}>}
      */
-    async getThemeZip(odeSessionId, themeDirName) {
+    async getThemeZip(themeId) {
         let url = this.endpoints.api_themes_download.path;
-        url = url.replace('{odeSessionId}', odeSessionId);
-        url = url.replace('{themeDirName}', themeDirName);
+        url = url.replace('{themeId}', themeId);
         return await this.func.get(url);
     }
 

public/app/rest/apiCallManager.test.js

@@ -268,13 +268,13 @@ describe('ApiCallManager', () => {
 
     it('should replace params in theme zip download', async () => {
       apiManager.endpoints.api_themes_download = {
-        path: 'http://localhost/themes/{odeSessionId}/{themeDirName}',
+        path: 'http://localhost/api/themes/{themeId}/download',
       };
 
-      await apiManager.getThemeZip('session-1', 'theme-1');
+      await apiManager.getThemeZip('theme-1');
 
       expect(mockFunc.get).toHaveBeenCalledWith(
-        'http://localhost/themes/session-1/theme-1'
+        'http://localhost/api/themes/theme-1/download'
       );
     });
 

public/app/workarea/menus/navbar/items/navbarStyles.js

@@ -939,19 +939,37 @@ export default class NavbarFile {
             return;
         }
 
-        // Server themes: use existing API
-        eXeLearning.app.api
-            .getThemeZip(eXeLearning.app.project.odeSession, theme.dirName)
-            .then((response) => {
-                if (response && response.zipFileName && response.zipBase64) {
-                    let link = document.createElement('a');
-                    link.setAttribute('type', 'hidden');
-                    link.href = 'data:text/plain;base64,' + response.zipBase64;
-                    link.download = response.zipFileName;
-                    link.click();
-                    link.remove();
-                }
-            });
+        // Download from bundled theme ZIPs (works in both online and static mode)
+        this.downloadThemeFromBundle(theme);
+    }
+
+    /**
+     * Download a theme from the bundled ZIP files
+     * Works in both online and static mode since bundles are pre-built
+     * @param {Object} theme - Theme object with dirName and name properties
+     */
+    async downloadThemeFromBundle(theme) {
+        try {
+            const basePath = eXeLearning.config?.basePath || '';
+            const bundleUrl = `${basePath}/bundles/themes/${theme.dirName}.zip`;
+
+            const response = await fetch(bundleUrl);
+            if (!response.ok) {
+                throw new Error(`Theme bundle not found: ${response.status}`);
+            }
+
+            const blob = await response.blob();
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `${theme.name || theme.dirName}.zip`;
+            link.click();
+            URL.revokeObjectURL(url);
+            Logger.log(`[NavbarStyles] Theme '${theme.name}' downloaded from bundle`);
+        } catch (error) {
+            console.error('[NavbarStyles] Bundle download failed:', error);
+            this.showElementAlert(_('Failed to download the style'), { error: error.message });
+        }
     }
 
     toggleSidenav() {

public/app/workarea/menus/navbar/items/navbarStyles.test.js

@@ -22,6 +22,9 @@ global.eXeLearning = {
                 themeInfoFieldsConfig: {},
                 themeEditionFieldsConfig: {},
             },
+            endpoints: {
+                api_themes_download: { path: '/api/themes/{themeId}/download', methods: ['GET'] },
+            },
             postNewTheme: vi.fn(),
             putEditTheme: vi.fn(),
             deleteTheme: vi.fn(),
@@ -431,14 +434,26 @@ describe('NavbarStyles', () => {
         uploadToIndexedDBSpy.mockRestore();
     });
 
-    it('downloads theme zip when data is available (server theme)', async () => {
-        eXeLearning.app.api.getThemeZip.mockResolvedValue({
-            zipFileName: 'theme.zip',
-            zipBase64: 'dGVzdA==',
-        });
+    it('downloads theme zip from bundle (server theme)', async () => {
+        const mockBlob = new Blob(['test'], { type: 'application/zip' });
+        const mockResponse = {
+            ok: true,
+            blob: vi.fn().mockResolvedValue(mockBlob),
+        };
+        global.fetch = vi.fn().mockResolvedValue(mockResponse);
+
+        const createObjectURLSpy = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:test');
+        const revokeObjectURLSpy = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {});
         const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {});
-        await navbarStyles.downloadThemeZip({ dirName: 'base-1', downloadable: '1' });
+
+        navbarStyles.downloadThemeZip({ dirName: 'base-1', name: 'Base Theme', downloadable: '1' });
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(fetch).toHaveBeenCalledWith('/bundles/themes/base-1.zip');
         expect(clickSpy).toHaveBeenCalled();
+
+        createObjectURLSpy.mockRestore();
+        revokeObjectURLSpy.mockRestore();
         clickSpy.mockRestore();
     });
 
@@ -497,6 +512,30 @@ describe('NavbarStyles', () => {
         expect(alertSpy).toHaveBeenCalledWith(expect.stringContaining('not found'), expect.any(Object));
     });
 
+    it('shows error when bundle download fails', async () => {
+        const mockResponse = {
+            ok: false,
+            status: 404,
+        };
+        global.fetch = vi.fn().mockResolvedValue(mockResponse);
+
+        const alertSpy = vi.spyOn(navbarStyles, 'showElementAlert');
+
+        navbarStyles.downloadThemeZip({
+            dirName: 'nonexistent',
+            name: 'Nonexistent Theme',
+            downloadable: '1',
+        });
+
+        // Wait for async operations
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(alertSpy).toHaveBeenCalledWith(
+            expect.stringContaining('Failed to download'),
+            expect.objectContaining({ error: expect.stringContaining('not found') })
+        );
+    });
+
     describe('makeMenuThemeDownload', () => {
         it('shows enabled download button when downloadable is 1', () => {
             const theme = { downloadable: '1' };

public/app/workarea/modals/modals/pages/modalStyleManager.js

@@ -1279,21 +1279,39 @@ export default class ModalStyleManager extends Modal {
 
     /**
      * Download/Export theme
+     * Downloads from bundled theme ZIPs (works in both online and static mode)
      *
      * @param {*} theme
      */
     downloadThemeZip(theme) {
-        eXeLearning.app.api
-            .getThemeZip(eXeLearning.app.project.odeSession, theme.dirName)
-            .then((response) => {
-                if (response && response.zipFileName && response.zipBase64) {
-                    let link = document.createElement('a');
-                    link.setAttribute('type', 'hidden');
-                    link.href = 'data:text/plain;base64,' + response.zipBase64;
-                    link.download = response.zipFileName;
-                    link.click();
-                    link.remove();
-                }
-            });
+        this.downloadThemeFromBundle(theme);
+    }
+
+    /**
+     * Download a theme from the bundled ZIP files
+     * Works in both online and static mode since bundles are pre-built
+     * @param {Object} theme - Theme object with dirName and name properties
+     */
+    async downloadThemeFromBundle(theme) {
+        try {
+            const basePath = eXeLearning.config?.basePath || '';
+            const bundleUrl = `${basePath}/bundles/themes/${theme.dirName}.zip`;
+
+            const response = await fetch(bundleUrl);
+            if (!response.ok) {
+                throw new Error(`Theme bundle not found: ${response.status}`);
+            }
+
+            const blob = await response.blob();
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `${theme.name || theme.dirName}.zip`;
+            link.click();
+            URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error('[ModalStyleManager] Bundle download failed:', error);
+            this.showElementAlert(_('Failed to download the style'), { error: error?.message });
+        }
     }
 }

public/app/workarea/modals/modals/pages/modalStyleManager.test.js

@@ -59,6 +59,9 @@ describe('ModalStyleManager', () => {
                             },
                         },
                     },
+                    endpoints: {
+                        api_themes_download: { path: '/api/themes/{themeId}/download', methods: ['GET'] },
+                    },
                     postUploadTheme: vi.fn().mockResolvedValue({ responseMessage: 'ERROR' }),
                     postNewTheme: vi.fn(),
                     putEditTheme: vi.fn(),
@@ -952,47 +955,53 @@ describe('ModalStyleManager', () => {
         });
 
         describe('downloadThemeZip', () => {
-            it('should download theme as zip file', async () => {
-                const response = {
-                    zipFileName: 'theme.zip',
-                    zipBase64: 'base64data',
+            it('should download theme as zip file from bundle', async () => {
+                const mockBlob = new Blob(['test'], { type: 'application/zip' });
+                const mockResponse = {
+                    ok: true,
+                    blob: vi.fn().mockResolvedValue(mockBlob),
                 };
+                global.fetch = vi.fn().mockResolvedValue(mockResponse);
 
-                window.eXeLearning.app.api.getThemeZip.mockResolvedValue(response);
+                const createObjectURLSpy = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:test');
+                const revokeObjectURLSpy = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {});
+                const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {});
 
-                const theme = { dirName: 'test-theme' };
+                const theme = { dirName: 'test-theme', name: 'Test Theme' };
+                modal.downloadThemeZip(theme);
 
-                const mockLink = {
-                    setAttribute: vi.fn(),
-                    click: vi.fn(),
-                    remove: vi.fn(),
-                };
-                vi.spyOn(document, 'createElement').mockReturnValue(mockLink);
+                // Wait for async operations to complete
+                await new Promise(resolve => setTimeout(resolve, 50));
 
-                await modal.downloadThemeZip(theme);
+                expect(fetch).toHaveBeenCalledWith('/base/bundles/themes/test-theme.zip');
+                expect(createObjectURLSpy).toHaveBeenCalled();
+                expect(clickSpy).toHaveBeenCalled();
+                expect(revokeObjectURLSpy).toHaveBeenCalled();
 
-                expect(window.eXeLearning.app.api.getThemeZip).toHaveBeenCalledWith(
-                    'test-session-123',
-                    'test-theme'
-                );
-                expect(mockLink.setAttribute).toHaveBeenCalledWith('type', 'hidden');
-                expect(mockLink.download).toBe('theme.zip');
-                expect(mockLink.click).toHaveBeenCalled();
-                expect(mockLink.remove).toHaveBeenCalled();
+                createObjectURLSpy.mockRestore();
+                revokeObjectURLSpy.mockRestore();
+                clickSpy.mockRestore();
             });
 
-            it('should not download if response is invalid', async () => {
-                const response = {};
-
-                window.eXeLearning.app.api.getThemeZip.mockResolvedValue(response);
+            it('should show error when bundle not found', async () => {
+                const mockResponse = {
+                    ok: false,
+                    status: 404,
+                };
+                global.fetch = vi.fn().mockResolvedValue(mockResponse);
 
-                const theme = { dirName: 'test-theme' };
+                const alertSpy = vi.spyOn(modal, 'showElementAlert');
 
-                const createElementSpy = vi.spyOn(document, 'createElement');
+                const theme = { dirName: 'nonexistent', name: 'Nonexistent Theme' };
+                modal.downloadThemeZip(theme);
 
-                await modal.downloadThemeZip(theme);
+                // Wait for async operations to complete
+                await new Promise(resolve => setTimeout(resolve, 50));
 
-                expect(createElementSpy).not.toHaveBeenCalled();
+                expect(alertSpy).toHaveBeenCalledWith(
+                    expect.stringContaining('Failed to download'),
+                    expect.objectContaining({ error: expect.stringContaining('not found') })
+                );
             });
         });
     });