[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
This commit is contained in:
Tasos Boulis
2022-10-07 11:40:27 +03:00
committed by GitHub
parent cf6ca93627
commit 131b5fa2ac
74 changed files with 4805 additions and 264 deletions

View File

@@ -15,7 +15,7 @@ const {ipcRenderer} = require('electron');
const {SHOW_SETTINGS_WINDOW} = require('../../src/common/communication');
const {asyncSleep} = require('./utils');
const {asyncSleep, mkDirAsync, rmDirAsync, unlinkAsync} = require('./utils');
chai.should();
const sourceRootDir = path.join(__dirname, '../..');
@@ -28,6 +28,8 @@ const electronBinaryPath = (() => {
})();
const userDataDir = path.join(sourceRootDir, 'e2e/testUserData/');
const configFilePath = path.join(userDataDir, 'config.json');
const downloadsFilePath = path.join(userDataDir, 'downloads.json');
const downloadsLocation = path.join(userDataDir, 'Downloads');
const boundsInfoPath = path.join(userDataDir, 'bounds-info.json');
const appUpdatePath = path.join(userDataDir, 'app-update.yml');
const exampleURL = 'http://example.com/';
@@ -51,12 +53,10 @@ const exampleTeam = {
{
name: 'TAB_FOCALBOARD',
order: 1,
isOpen: true,
},
{
name: 'TAB_PLAYBOOKS',
order: 2,
isOpen: true,
},
],
lastActiveTab: 0,
@@ -100,10 +100,14 @@ const demoConfig = {
useSpellChecker: true,
enableHardwareAcceleration: true,
autostart: true,
hideOnStart: false,
spellCheckerLocales: [],
darkMode: false,
lastActiveTeam: 0,
spellCheckerLocales: [],
startInFullscreen: false,
autoCheckForUpdates: false,
appLanguage: 'en',
logLevel: 'silly',
};
const demoMattermostConfig = {
@@ -119,6 +123,8 @@ const cmdOrCtrl = process.platform === 'darwin' ? 'command' : 'control';
module.exports = {
sourceRootDir,
configFilePath,
downloadsFilePath,
downloadsLocation,
userDataDir,
boundsInfoPath,
appUpdatePath,
@@ -147,7 +153,7 @@ module.exports = {
},
cleanTestConfig() {
[configFilePath, boundsInfoPath].forEach((file) => {
[configFilePath, downloadsFilePath, boundsInfoPath].forEach((file) => {
try {
fs.unlinkSync(file);
} catch (err) {
@@ -158,6 +164,13 @@ module.exports = {
}
});
},
async cleanTestConfigAsync() {
await Promise.all(
[configFilePath, downloadsFilePath, boundsInfoPath].map((file) => {
return unlinkAsync(file);
}),
);
},
cleanDataDir() {
try {
@@ -169,28 +182,35 @@ module.exports = {
}
}
},
cleanDataDirAsync() {
return rmDirAsync(userDataDir);
},
createTestUserDataDir() {
if (!fs.existsSync(userDataDir)) {
fs.mkdirSync(userDataDir);
}
},
async createTestUserDataDirAsync() {
await mkDirAsync(userDataDir);
},
async getApp(args = []) {
const options = {
downloadsPath: downloadsLocation,
env: {
...process.env,
RESOURCES_PATH: userDataDir,
},
executablePath: electronBinaryPath,
args: [`${path.join(sourceRootDir, 'dist')}`, `--data-dir=${userDataDir}`, '--disable-dev-mode', ...args],
args: [`${path.join(sourceRootDir, 'dist')}`, `--user-data-dir=${userDataDir}`, '--disable-dev-mode', ...args],
};
// if (process.env.MM_DEBUG_SETTINGS) {
// options.chromeDriverLogPath = './chromedriverlog.txt';
// }
// if (process.platform === 'darwin' || process.platform === 'linux') {
// // on a mac, debbuging port might conflict with other apps
// // on a mac, debugging port might conflict with other apps
// // this changes the default debugging port so chromedriver can run without issues.
// options.chromeDriverArgs.push('remote-debugging-port=9222');
//}
@@ -242,6 +262,27 @@ module.exports = {
await window.click('#saveSetting');
},
async openDownloadsDropdown(app) {
const mainWindow = app.windows().find((window) => window.url().includes('index'));
await mainWindow.waitForLoadState();
await mainWindow.bringToFront();
const dlButtonLocator = await mainWindow.waitForSelector('.DownloadsDropdownButton');
await dlButtonLocator.click();
await asyncSleep(500);
const downloadsWindow = app.windows().find((window) => window.url().includes('downloadsDropdown'));
await downloadsWindow.waitForLoadState();
await downloadsWindow.bringToFront();
return downloadsWindow;
},
async downloadsDropdownIsOpen(app) {
const downloadsWindow = app.windows().find((window) => window.url().includes('downloadsDropdown'));
const result = await downloadsWindow.isVisible('.DownloadsDropdown');
return result;
},
addClientCommands(client) {
client.addCommand('loadSettingsPage', function async() {
ipcRenderer.send(SHOW_SETTINGS_WINDOW);

View File

@@ -1,6 +1,7 @@
// Copyright (c) 2015-2016 Yuya Ochiai
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
const fs = require('fs');
function asyncSleep(timeout) {
return new Promise((resolve) => {
@@ -10,6 +11,92 @@ function asyncSleep(timeout) {
});
}
function dirExistsAsync(path) {
return new Promise((resolve, reject) => {
fs.stat(path, (error, stats) => {
if (error) {
if (error.code === 'ENOENT') {
resolve(false);
} else {
reject(error);
}
return;
}
resolve(stats.isDirectory());
});
});
}
function mkDirAsync(path) {
return new Promise((resolve, reject) => {
dirExistsAsync(path).then((exists) => {
if (!exists) {
fs.mkdir(path, {recursive: true}, (error) => {
if (error) {
reject(error);
return;
}
resolve();
});
}
}).catch((err) => {
reject(err);
});
});
}
function rmDirAsync(path) {
return new Promise((resolve, reject) => {
dirExistsAsync(path).then((exists) => {
if (exists) {
fs.rm(path, {recursive: true, force: true}, (error) => {
if (error) {
if (error.code === 'ENOENT') {
resolve();
}
reject(error);
}
resolve();
});
}
resolve();
}).catch((err) => {
reject(err);
});
});
}
function unlinkAsync(path) {
return new Promise((resolve, reject) => {
fs.unlink(path, (error) => {
if (error) {
if (error.code === 'ENOENT') {
resolve();
}
reject(error);
}
resolve();
});
});
}
function writeFileAsync(path, data) {
return new Promise((resolve, reject) => {
fs.writeFile(path, data, (err) => {
if (err) {
reject(err);
return;
}
resolve();
});
});
}
module.exports = {
asyncSleep,
dirExistsAsync,
mkDirAsync,
rmDirAsync,
unlinkAsync,
writeFileAsync,
};

View File

@@ -0,0 +1,193 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
'use strict';
const path = require('path');
const env = require('../../modules/environment');
const {asyncSleep, mkDirAsync, rmDirAsync, writeFileAsync} = require('../../modules/utils');
const config = env.demoConfig;
const file1 = {
addedAt: Date.UTC(2022, 8, 8, 10), // Aug 08, 2022 10:00AM UTC
filename: 'file1.txt',
mimeType: 'plain/text',
location: path.join(env.downloadsLocation, 'file1.txt'),
progress: 100,
receivedBytes: 3917388,
state: 'completed',
totalBytes: 3917388,
type: 'file',
};
const file2 = {
addedAt: Date.UTC(2022, 8, 8, 11), // Aug 08, 2022 11:00AM UTC
filename: 'file2.txt',
mimeType: 'plain/text',
location: path.join(env.downloadsLocation, 'file2.txt'),
progress: 100,
receivedBytes: 7917388,
state: 'completed',
totalBytes: 7917388,
type: 'file',
};
describe('downloads/downloads_dropdown_items', function desc() {
this.timeout(30000);
describe('The list has one downloaded file', () => {
const downloads = {
[file1.filename]: file1,
};
beforeEach(async () => {
await env.createTestUserDataDirAsync();
await env.cleanTestConfigAsync();
await writeFileAsync(env.configFilePath, JSON.stringify(config));
await writeFileAsync(env.downloadsFilePath, JSON.stringify(downloads));
await mkDirAsync(env.downloadsLocation);
await writeFileAsync(path.join(env.downloadsLocation, 'file1.txt'), 'file1 content');
await asyncSleep(1000);
this.app = await env.getApp();
this.downloadsWindow = await env.openDownloadsDropdown(this.app);
});
afterEach(async () => {
await rmDirAsync(env.downloadsLocation);
await this.app?.close?.();
await env.clearElectronInstances();
});
it('MM-22239 should display the file correctly (downloaded)', async () => {
const filenameTextLocator = await this.downloadsWindow.waitForSelector('.DownloadsDropdown__File__Body__Details__Filename');
const filenameInnerText = await filenameTextLocator.innerText();
filenameInnerText.should.equal(downloads['file1.txt'].filename);
const fileStateLocator = await this.downloadsWindow.waitForSelector('.DownloadsDropdown__File__Body__Details__FileSizeAndStatus');
const fileStateInnerText = await fileStateLocator.innerText();
fileStateInnerText.should.equal('3.92 MB • Downloaded');
const fileThumbnailLocator = await this.downloadsWindow.waitForSelector('.DownloadsDropdown__File__Body__Thumbnail');
const thumbnailBackgroundImage = await fileThumbnailLocator.evaluate((node) => window.getComputedStyle(node).getPropertyValue('background-image'));
thumbnailBackgroundImage.should.include('text..svg');
});
});
describe('The list has one downloaded file but it is deleted from the folder', () => {
const downloads = {
[file1.filename]: file1,
};
beforeEach(async () => {
await env.createTestUserDataDirAsync();
await env.cleanTestConfigAsync();
await writeFileAsync(env.configFilePath, JSON.stringify(config));
await writeFileAsync(env.downloadsFilePath, JSON.stringify(downloads));
await mkDirAsync(env.downloadsLocation);
await asyncSleep(1000);
this.app = await env.getApp();
this.downloadsWindow = await env.openDownloadsDropdown(this.app);
});
afterEach(async () => {
await rmDirAsync(env.downloadsLocation);
await this.app?.close?.();
await env.clearElectronInstances();
});
it('MM-22239 should display the file correctly (deleted)', async () => {
const filenameTextLocator = await this.downloadsWindow.waitForSelector('.DownloadsDropdown__File__Body__Details__Filename');
const filenameInnerText = await filenameTextLocator.innerText();
filenameInnerText.should.equal(downloads['file1.txt'].filename);
const fileStateLocator = await this.downloadsWindow.waitForSelector('.DownloadsDropdown__File__Body__Details__FileSizeAndStatus');
const fileStateInnerText = await fileStateLocator.innerText();
fileStateInnerText.should.equal('3.92 MB • Deleted');
const fileThumbnailLocator = await this.downloadsWindow.waitForSelector('.DownloadsDropdown__File__Body__Thumbnail');
const thumbnailBackgroundImage = await fileThumbnailLocator.evaluate((node) => window.getComputedStyle(node).getPropertyValue('background-image'));
thumbnailBackgroundImage.should.include('text..svg');
});
});
describe('The list has one cancelled file', () => {
const downloads = {
[file1.filename]: {
...file1,
state: 'progressing',
progress: 50,
receivedBytes: 1958694,
totalBytes: 3917388,
},
};
beforeEach(async () => {
await env.createTestUserDataDirAsync();
await env.cleanTestConfigAsync();
await writeFileAsync(env.configFilePath, JSON.stringify(config));
await writeFileAsync(env.downloadsFilePath, JSON.stringify(downloads));
await mkDirAsync(env.downloadsLocation);
await writeFileAsync(path.join(env.downloadsLocation, 'file1.txt'), 'file1 content');
await asyncSleep(1000);
this.app = await env.getApp();
this.downloadsWindow = await env.openDownloadsDropdown(this.app);
});
afterEach(async () => {
await rmDirAsync(env.downloadsLocation);
await this.app?.close?.();
await env.clearElectronInstances();
});
it('MM-22239 should display the file correctly (cancelled)', async () => {
const filenameTextLocator = await this.downloadsWindow.waitForSelector('.DownloadsDropdown__File__Body__Details__Filename');
const filenameInnerText = await filenameTextLocator.innerText();
filenameInnerText.should.equal(downloads['file1.txt'].filename);
const fileStateLocator = await this.downloadsWindow.waitForSelector('.DownloadsDropdown__File__Body__Details__FileSizeAndStatus');
const fileStateInnerText = await fileStateLocator.innerText();
fileStateInnerText.should.equal('3.92 MB • Cancelled');
const fileThumbnailLocator = await this.downloadsWindow.waitForSelector('.DownloadsDropdown__File__Body__Thumbnail');
const thumbnailBackgroundImage = await fileThumbnailLocator.evaluate((node) => window.getComputedStyle(node).getPropertyValue('background-image'));
thumbnailBackgroundImage.should.include('text..svg');
});
});
describe('The list has two downloaded files', () => {
const downloads = {
'file1.txt': file1,
'file2.txt': file2,
};
beforeEach(async () => {
await env.createTestUserDataDirAsync();
await env.cleanTestConfigAsync();
await writeFileAsync(env.configFilePath, JSON.stringify(config));
await writeFileAsync(env.downloadsFilePath, JSON.stringify(downloads));
await mkDirAsync(env.downloadsLocation);
await writeFileAsync(path.join(env.downloadsLocation, 'file1.txt'), 'file1 content');
await writeFileAsync(path.join(env.downloadsLocation, 'file2.txt'), 'file2 content');
await asyncSleep(1000);
this.app = await env.getApp();
this.downloadsWindow = await env.openDownloadsDropdown(this.app);
});
afterEach(async () => {
await rmDirAsync(env.downloadsLocation);
await this.app?.close?.();
await env.clearElectronInstances();
});
it('MM-22239 should display the files in correct order', async () => {
const filenameTextLocators = this.downloadsWindow.locator('.DownloadsDropdown__File__Body__Details__Filename');
(await filenameTextLocators.count()).should.equal(2);
const firstItemLocator = filenameTextLocators.first();
const file1InnerText = await firstItemLocator.innerText();
file1InnerText.should.equal(downloads['file2.txt'].filename); // newest first
const secondItemLocator = filenameTextLocators.nth(1);
const file2InnerText = await secondItemLocator.innerText();
file2InnerText.should.equal(downloads['file1.txt'].filename);
});
});
});

View File

@@ -0,0 +1,84 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
'use strict';
const robot = require('robotjs');
const env = require('../../modules/environment');
const {asyncSleep, rmDirAsync, writeFileAsync} = require('../../modules/utils');
const config = {
...env.demoMattermostConfig,
teams: [
...env.demoMattermostConfig.teams,
{
url: 'https://community.mattermost.com',
name: 'community',
order: 0,
tabs: [
{
name: 'TAB_MESSAGING',
order: 0,
isOpen: true,
},
{
name: 'TAB_FOCALBOARD',
order: 1,
},
{
name: 'TAB_PLAYBOOKS',
order: 2,
},
],
lastActiveTab: 0,
},
],
};
describe('downloads/downloads_manager', function desc() {
this.timeout(30000);
let firstServer;
const filename = `${Date.now().toString()}.txt`;
beforeEach(async () => {
await env.cleanDataDirAsync();
await env.cleanTestConfigAsync();
await env.createTestUserDataDirAsync();
await writeFileAsync(env.configFilePath, JSON.stringify(config));
await asyncSleep(1000);
this.app = await env.getApp();
this.serverMap = await env.getServerMap(this.app);
const loadingScreen = this.app.windows().find((window) => window.url().includes('loadingScreen'));
await loadingScreen.waitForSelector('.LoadingScreen', {state: 'hidden'});
firstServer = this.serverMap[`${config.teams[0].name}___TAB_MESSAGING`].win;
await env.loginToMattermost(firstServer);
const textbox = await firstServer.waitForSelector('#post_textbox');
const fileInput = await firstServer.waitForSelector('input[type="file"]');
await fileInput.setInputFiles({
name: filename,
mimeType: 'text/plain',
buffer: Buffer.from('this is test file'),
});
await asyncSleep(1000);
await textbox.focus();
robot.keyTap('enter');
});
afterEach(async () => {
await rmDirAsync(env.downloadsLocation);
await this.app?.close?.();
await env.clearElectronInstances();
});
it('MM-22239 should open downloads dropdown when a download starts', async () => {
await firstServer.locator('#file-attachment-link', {hasText: filename}).click();
await asyncSleep(1000);
await Promise.all([
firstServer.waitForEvent('download'), // It is important to call waitForEvent before click to set up waiting.
firstServer.locator(`div[role="dialog"] a[download="${filename}"]`).click(), // Triggers the download.
]);
(await env.downloadsDropdownIsOpen(this.app)).should.equal(true);
});
});

View File

@@ -0,0 +1,126 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
'use strict';
const path = require('path');
const env = require('../../modules/environment');
const {asyncSleep, writeFileAsync} = require('../../modules/utils');
const config = env.demoConfig;
const downloads = {
'file1.txt': {
addedAt: Date.UTC(2022, 8, 8, 10), // Aug 08, 2022 10:00AM UTC
filename: 'file1.txt',
mimeType: 'plain/text',
location: path.join(env.downloadsLocation, 'file1.txt'),
progress: 100,
receivedBytes: 3917388,
state: 'completed',
totalBytes: 3917388,
type: 'file',
},
};
describe('downloads/downloads_menubar', function desc() {
this.timeout(30000);
describe('The download list is empty', () => {
beforeEach(async () => {
await env.createTestUserDataDirAsync();
await env.cleanTestConfigAsync();
await writeFileAsync(env.configFilePath, JSON.stringify(config));
await writeFileAsync(env.downloadsFilePath, JSON.stringify({}));
await asyncSleep(1000);
this.app = await env.getApp();
});
afterEach(async () => {
await this.app?.close?.();
await env.clearElectronInstances();
});
it('MM-22239 should not show the downloads dropdown and the menu item should be disabled', async () => {
const mainWindow = this.app.windows().find((window) => window.url().includes('index'));
await mainWindow.waitForLoadState();
await mainWindow.bringToFront();
const dlButton = mainWindow.locator('.DownloadsDropdownButton');
(await dlButton.isVisible()).should.equal(false);
const saveMenuItem = await this.app.evaluate(async ({app}) => {
const viewMenu = app.applicationMenu.getMenuItemById('view');
const saveItem = viewMenu.submenu.getMenuItemById('app-menu-downloads');
return saveItem;
});
saveMenuItem.should.haveOwnProperty('enabled', false);
});
});
describe('The download list has one file', () => {
beforeEach(async () => {
await env.createTestUserDataDirAsync();
await env.cleanTestConfigAsync();
await writeFileAsync(env.configFilePath, JSON.stringify(config));
await writeFileAsync(env.downloadsFilePath, JSON.stringify(downloads));
await asyncSleep(1000);
this.app = await env.getApp();
});
afterEach(async () => {
await this.app?.close?.();
await env.clearElectronInstances();
});
it('MM-22239 should show the downloads dropdown button and the menu item should be enabled', async () => {
const mainWindow = this.app.windows().find((window) => window.url().includes('index'));
await mainWindow.waitForLoadState();
await mainWindow.bringToFront();
const dlButton = await mainWindow.waitForSelector('.DownloadsDropdownButton', {state: 'attached'});
(await dlButton.isVisible()).should.equal(true);
const saveMenuItem = await this.app.evaluate(async ({app}) => {
const viewMenu = app.applicationMenu.getMenuItemById('view');
const saveItem = viewMenu.submenu.getMenuItemById('app-menu-downloads');
return saveItem;
});
saveMenuItem.should.haveOwnProperty('enabled', true);
});
it('MM-22239 should open the downloads dropdown when clicking the download button in the menubar', async () => {
const mainWindow = this.app.windows().find((window) => window.url().includes('index'));
await mainWindow.waitForLoadState();
await mainWindow.bringToFront();
const dlButton = await mainWindow.waitForSelector('.DownloadsDropdownButton', {state: 'attached'});
(await dlButton.isVisible()).should.equal(true);
await dlButton.click();
await asyncSleep(500);
(await env.downloadsDropdownIsOpen(this.app)).should.equal(true);
});
it('MM-22239 should open the downloads dropdown from the app menu', async () => {
const mainWindow = this.app.windows().find((window) => window.url().includes('index'));
await mainWindow.waitForLoadState();
await mainWindow.bringToFront();
await this.app.evaluate(async ({app}) => {
const viewMenu = app.applicationMenu.getMenuItemById('view');
const downloadsItem = viewMenu.submenu.getMenuItemById('app-menu-downloads');
downloadsItem.click();
});
await asyncSleep(500);
(await env.downloadsDropdownIsOpen(this.app)).should.equal(true);
});
});
});