[MM-22239] Downloads dropdown (#2227)

* WIP: show/hide temp downloads dropdown

* WIP: Position downloads dropdown correctly under the button

* WIP: Use correct width for dropdown so that right radius and shadows are displayed

* WIP: Add items to download list after finished downloading

* WIP: Add download item base components

* Add "clear all" functionality

* Use type Record<> for downloads saved in config

* Add styling to files in the downloads dropdown

* Open file in folder when clicking it from downloads dropdown. Center svg in parent element

* Update scrollbar styling

* Update scrollbar styling

* Update state of downloaded items if deleted from folder

* Add progress bar in downloads

* Use "x-uncompressed-content-length" in file downloads.

* Keep downloads open when clicking outside their browserview

* Use correct color for downloads dropdown button

* Add better styling to downloads dropdown button

* Allow only 50 download files maximum. Oldest file is being removed if reached

* Autoclose downloads dropdown after 4s of download finish

* Add file thumbnails

* Dont show second dialog if first dismissed

* Add red badge when downloads running and dropdown closed

* Add menu item for Downloads

* Add support for more code file extensions

* Open downloads dropdown instead of folder from the menu

* Run lint:js and fix problems

* Add tests for utils

* Fix issue with dropdown not displaying

* Remove unecessary comment

* Move downloads to separate json file, outside Config

* Add downloads dropdown menu for the 3-dot button

* Dont show dev tools for downloads

* Add cancel download functionality

* Add dark mode styling

* Use View state for downloadsMenu open state

* Fix some style issues

* Add image preview for downloaded images

* Remove extra devTool in weback config

* Fix issue with paths on windows

* Align items left in downloads menu

* Use pretty-bytes for file sizes

* Show download remaining time

* Close downloads dropdown when clicking outside

* Show different units in received bytes when they are different from the total units (kb/mb)

* Dont hide downloads when mattermost view is clicked

* Keep downloads open if download button is clicked

* Use closest() to check for download clicks

* Fix unit tests.
Add tests for new Views and downloadManager
Add @types/jest as devDependency for intellisense

* Remove unecessary tsconfig for jest

* Fix types error

* Add all critical tests for downloadsManager

* WIP: add e2e tests for downloads

* WIP: add e2e tests for downloads

* Rename downloads spec file

* WIP: make vscode debugger work for e2e tests

* Remove unused mock

* Remove defaults for v4 config

* Use electron-mocha for e2e debugger

* Fix e2e tests spawning JsonFileManager twice

* Add async fs functions and add tests for download item UI

* Add async fs functions and add tests for download item UI

* Improve tests with "waitForSelector" to wait for visible elements

* Wait for page load before assertions

* Add tests for file uploads/downloads

* Dont show native notification for completed downloads if dropdown is open

* Increment filenames if file already exists

* Fix antializing in downloads dropdown

* Fix styling of downloads header

* Increase dimensions of green/red icons in downloads

* Fix styling of 3-dot button

* Fix unit tests

* Show 3-dot button only on hover or click

* PR review fixes

* Revert vscode debug fixes

* Mock fs.constants

* Mock fs instead of JsonFileManager in downlaods tests

* Mock fs instead of JsonFileManager in downlaods tests

* Add necessary mocks for downloads manager

* Mark file as deleted if user deleted it

* Fix min-height of downloads dropdown and 3-dot icon position

* Add more tests

* Make size of downloads dropdown dynamic based on content

* Combine log statements

* Close 3-dot menu if user clicks elsewhere

* Move application updates inside downloads dropdown

* Fix update issues

* Fix ipc event payload

* Add missing prop

* Remove unused translations

* Fix failing test

* Fix version unknown

* Remove commented out component

src/main/app/initialize.test.js

@@ -8,7 +8,6 @@ import {app, session} from 'electron';
 import Config from 'common/config';
 import urlUtils from 'common/utils/url';
 
-import {displayDownloadCompleted} from 'main/notifications';
 import parseArgs from 'main/ParseArgs';
 import WindowManager from 'main/windows/windowManager';
 
@@ -17,6 +16,10 @@ import {clearAppCache, getDeeplinkingURL, wasUpdated} from './utils';
 
 jest.mock('fs', () => ({
     unlinkSync: jest.fn(),
+    existsSync: jest.fn().mockReturnValue(false),
+    readFileSync: jest.fn().mockImplementation((text) => text),
+    writeFile: jest.fn(),
+
 }));
 
 jest.mock('path', () => {
@@ -143,9 +146,9 @@ jest.mock('main/windows/windowManager', () => ({
     getMainWindow: jest.fn(),
     showMainWindow: jest.fn(),
     sendToMattermostViews: jest.fn(),
+    sendToRenderer: jest.fn(),
     getServerNameByWebContentsId: jest.fn(),
 }));
-
 describe('main/app/initialize', () => {
     beforeEach(() => {
         parseArgs.mockReturnValue({});
@@ -228,52 +231,6 @@ describe('main/app/initialize', () => {
             expect(WindowManager.showMainWindow).toHaveBeenCalledWith('mattermost://server-1.com');
         });
 
-        it('should setup save dialog correctly', async () => {
-            const item = {
-                getFilename: () => 'filename.txt',
-                on: jest.fn(),
-                setSaveDialogOptions: jest.fn(),
-            };
-            Config.downloadLocation = '/some/dir';
-            path.resolve.mockImplementation((base, p) => `${base}/${p}`);
-            session.defaultSession.on.mockImplementation((event, cb) => {
-                if (event === 'will-download') {
-                    cb(null, item, {id: 0, getURL: jest.fn()});
-                }
-            });
-
-            await initialize();
-            expect(item.setSaveDialogOptions).toHaveBeenCalledWith(expect.objectContaining({
-                title: 'filename.txt',
-                defaultPath: '/some/dir/filename.txt',
-            }));
-        });
-
-        it('should use name of saved file instead of original file name', async () => {
-            const item = {
-                getFilename: () => 'filename.txt',
-                on: jest.fn(),
-                setSaveDialogOptions: jest.fn(),
-                savePath: '/some/dir/new_filename.txt',
-            };
-            Config.downloadLocation = '/some/dir';
-            path.resolve.mockImplementation((base, p) => `${base}/${p}`);
-            session.defaultSession.on.mockImplementation((event, cb) => {
-                if (event === 'will-download') {
-                    cb(null, item, {id: 0, getURL: jest.fn()});
-                }
-            });
-
-            item.on.mockImplementation((event, cb) => {
-                if (event === 'done') {
-                    cb(null, 'completed');
-                }
-            });
-
-            await initialize();
-            expect(displayDownloadCompleted).toHaveBeenCalledWith('new_filename.txt', '/some/dir/new_filename.txt', expect.anything());
-        });
-
         it('should allow permission requests for supported types from trusted URLs', async () => {
             let callback = jest.fn();
             session.defaultSession.setPermissionRequestHandler.mockImplementation((cb) => {

src/main/app/initialize.ts

@@ -32,7 +32,7 @@ import {
     GET_AVAILABLE_SPELL_CHECKER_LANGUAGES,
     USER_ACTIVITY_UPDATE,
     START_UPGRADE,
-    START_DOWNLOAD,
+    START_UPDATE_DOWNLOAD,
     PING_DOMAIN,
     MAIN_WINDOW_SHOWN,
 } from 'common/communication';
@@ -48,8 +48,8 @@ import {setupBadge} from 'main/badge';
 import CertificateManager from 'main/certificateManager';
 import {updatePaths} from 'main/constants';
 import CriticalErrorHandler from 'main/CriticalErrorHandler';
-import i18nManager, {localizeMessage} from 'main/i18nManager';
-import {displayDownloadCompleted} from 'main/notifications';
+import downloadsManager from 'main/downloadsManager';
+import i18nManager from 'main/i18nManager';
 import parseArgs from 'main/ParseArgs';
 import TrustedOriginsStore from 'main/trustedOrigins';
 import {refreshTrayImages, setupTray} from 'main/tray/tray';
@@ -259,7 +259,7 @@ function initializeInterCommunicationEventListeners() {
     ipcMain.on(SHOW_SETTINGS_WINDOW, WindowManager.showSettingsWindow);
     ipcMain.handle(GET_AVAILABLE_SPELL_CHECKER_LANGUAGES, () => session.defaultSession.availableSpellCheckerLanguages);
     ipcMain.handle(GET_DOWNLOAD_LOCATION, handleSelectDownload);
-    ipcMain.on(START_DOWNLOAD, handleStartDownload);
+    ipcMain.on(START_UPDATE_DOWNLOAD, handleStartDownload);
     ipcMain.on(START_UPGRADE, handleStartUpgrade);
     ipcMain.handle(PING_DOMAIN, handlePingDomain);
 }
@@ -272,7 +272,7 @@ function initializeAfterAppReady() {
     if (process.platform !== 'darwin') {
         defaultSession.on('spellcheck-dictionary-download-failure', (event, lang) => {
             if (Config.spellCheckerURL) {
-                log.error(`There was an error while trying to load the dictionary definitions for ${lang} fromfully the specified url. Please review you have access to the needed files. Url used was ${Config.spellCheckerURL}`);
+                log.error(`There was an error while trying to load the dictionary definitions for ${lang} from fully the specified url. Please review you have access to the needed files. Url used was ${Config.spellCheckerURL}`);
             } else {
                 log.warn(`There was an error while trying to download the dictionary definitions for ${lang}, spellchecking might not work properly.`);
             }
@@ -358,29 +358,7 @@ function initializeAfterAppReady() {
     }
     setupBadge();
 
-    defaultSession.on('will-download', (event, item, webContents) => {
-        log.debug('Initialize.will-download', {item, sourceURL: webContents.getURL()});
-        const filename = item.getFilename();
-        const fileElements = filename.split('.');
-        const filters = [];
-        if (fileElements.length > 1) {
-            filters.push({
-                name: localizeMessage('main.app.initialize.downloadBox.allFiles', 'All files'),
-                extensions: ['*'],
-            });
-        }
-        item.setSaveDialogOptions({
-            title: filename,
-            defaultPath: Config.downloadLocation ? path.resolve(Config.downloadLocation, filename) : undefined,
-            filters,
-        });
-
-        item.on('done', (doneEvent, state) => {
-            if (state === 'completed') {
-                displayDownloadCompleted(path.basename(item.savePath), item.savePath, WindowManager.getServerNameByWebContentsId(webContents.id) || '');
-            }
-        });
-    });
+    defaultSession.on('will-download', downloadsManager.handleNewDownload);
 
     // needs to be done after app ready
     // must be done before update menu