[MM-10586] Desktop App Window/Tabs Update (#1056)

* [MM-19054] Added new server tab look and feel, still missing proper hover states and session expired icon

* [MM-19055] Added window controls and removed border for macOS

* [MM-19055] Add dark mode for macOS

* [MM-19054] Added session expired icon

* Test windows titlebar

* Fixed the menu issue and added non-macOS dark mode

* Blank commit

* Fixed a lint issue

* Fixed more lint issues

* Fixed more issues

* New tray icons

* [MM-19603] Drag and drop tabs

* Fixed some assets and fixed build output to include missing assets

* Fixed a couple small issues

* Only show tabs for only 1 server on Mac

* Fixed some more tests

* Fixed another test

* Revert "Fixed another test"

This reverts commit 36040294a71a68663d06996d71eecc5ed23d7014.

* Fixed another test

* Trial and error!

* A bunch of additional fixes

* Fixed a lint issue

* Fixed restore focus on add server tab causing bad UX

* Trial and error on flaky test again

* Fixed some bugs based on PR feedback.

* blank commit to push tests

* Revert "Test windows titlebar"

This reverts commit 9cd46b71b1427b75942434ac49185870d2437b85.

* Remove the rest of the old new titlebar and fixes

* Added three-dot link

* New menu

* Rest of new windows menu and other fixes

* Fixed lint errors

* Added windows 10 style title bar buttons for non mac OS

* Lint fixes and enabled the tab bar regardless of number of servers

* Missed one

* Fixed unicode characters

* Commenting out test that should no longer be applicable

* Removed Windows 10 style titlebar icons and used material design instead

* Fixed a lint issue

* Some small UX fixes

* blank commit

* Fixed an issue where dropping the first tab moves it too far over before snapping into place

* Additional style fixes

* Another small issue fix

* Back to Windows 10 style

* Lint fixes

* Accessible three dot menu

* Lint fixes

* Shrinking tabs when window is too small

* Gradient between tabs and title bar buttons when window is too small

* Add drag to gradient

* Replaced icons, drag and drop cursor sticking fix, slight tab change

* Lint and some mac fixes

* Light theme fix to three dot menu

* Hack for tab sticking to cursor on macOS

* Fixes for the find utility

* Fix for Catalina dark mode

* Revert "Fix for Catalina dark mode"

This reverts commit 45da05dd0f17f46efd1c53fafb92e9c1fd9dd8d9.

* Fixed a couple issues Dean found

* More fixes

* Three dot hover effect to circle

* PR feedback

* Test fixes

* Test and config fixes

* Disable dragging when there are GPO servers

* [MM-20757] Fixed dark mode on debug when running macOS Catalina

* Allow future config versions to use v2 config if launching this version of the app

* Oops

* New titlebar icons, blur for titlebar on inactive

* Lint fix

* Set unfocused opacity to 0.4

* Final FINAL icons

* Fixed closing menu not returning focus to the app

* Lint fix

* Update src/browser/components/TabBar.jsx

Co-Authored-By: Guillermo Vayá <guivaya@gmail.com>

* Update src/main/Validator.js

Co-Authored-By: Guillermo Vayá <guivaya@gmail.com>

* Lint fixes

* Moved react-smooth-dnd fork to MM org and fixed another merge issue

Co-authored-by: mattermod <mattermod@users.noreply.github.com>
Co-authored-by: Guillermo Vayá <guivaya@gmail.com>

test/specs/app_test.js

@@ -72,13 +72,15 @@ describe('application', function desc() {
 
   it('should show index.html when there is config file', async () => {
     const config = {
-      version: 1,
+      version: 2,
       teams: [{
         name: 'example',
         url: env.mattermostURL,
+        order: 0,
       }, {
         name: 'github',
         url: 'https://github.com/',
+        order: 1,
       }],
       showTrayIcon: false,
       trayIconTheme: 'light',
@@ -92,6 +94,7 @@ describe('application', function desc() {
       useSpellChecker: true,
       enableHardwareAcceleration: true,
       autostart: true,
+      darkMode: false,
     };
     fs.writeFileSync(env.configFilePath, JSON.stringify(config));
     await this.app.restart();

test/specs/browser/index_test.js

@@ -14,13 +14,15 @@ describe('browser/index.html', function desc() {
   this.timeout(30000);
 
   const config = {
-    version: 1,
+    version: 2,
     teams: [{
       name: 'example',
       url: env.mattermostURL,
+      order: 0,
     }, {
       name: 'github',
       url: 'https://github.com/',
+      order: 1,
     }],
     showTrayIcon: false,
     trayIconTheme: 'light',
@@ -34,6 +36,7 @@ describe('browser/index.html', function desc() {
     useSpellChecker: true,
     enableHardwareAcceleration: true,
     autostart: true,
+    darkMode: false,
   };
 
   const serverPort = 8181;
@@ -65,16 +68,6 @@ describe('browser/index.html', function desc() {
     this.server.close(done);
   });
 
-  it('should NOT show tabs when there is one team', async () => {
-    fs.writeFileSync(env.configFilePath, JSON.stringify({
-      url: env.mattermostURL,
-    }));
-    await this.app.restart();
-
-    const existing = await this.app.client.isExisting('#tabBar');
-    existing.should.be.false;
-  });
-
   it('should set src of webview from config file', async () => {
     const src0 = await this.app.client.getAttribute('#mattermostView0', 'src');
     src0.should.equal(config.teams[0].url);
@@ -107,10 +100,11 @@ describe('browser/index.html', function desc() {
   it.skip('should show error when using incorrect URL', async () => {
     this.timeout(30000);
     fs.writeFileSync(env.configFilePath, JSON.stringify({
-      version: 1,
+      version: 2,
       teams: [{
         name: 'error_1',
         url: 'http://false',
+        order: 0,
       }],
     }));
     await this.app.restart();
@@ -120,10 +114,11 @@ describe('browser/index.html', function desc() {
 
   it('should set window title by using webview\'s one', async () => {
     fs.writeFileSync(env.configFilePath, JSON.stringify({
-      version: 1,
+      version: 2,
       teams: [{
         name: 'title_test',
         url: `http://localhost:${serverPort}`,
+        order: 0,
       }],
     }));
     await this.app.restart();
@@ -135,13 +130,15 @@ describe('browser/index.html', function desc() {
   // Skip because it's very unstable in CI
   it.skip('should update window title when the activated tab\'s title is updated', async () => {
     fs.writeFileSync(env.configFilePath, JSON.stringify({
-      version: 1,
+      version: 2,
       teams: [{
         name: 'title_test_0',
         url: `http://localhost:${serverPort}`,
+        order: 0,
       }, {
         name: 'title_test_1',
         url: `http://localhost:${serverPort}`,
+        order: 1,
       }],
     }));
     await this.app.restart();
@@ -171,13 +168,15 @@ describe('browser/index.html', function desc() {
   // Skip because it's very unstable in CI
   it.skip('should update window title when a tab is selected', async () => {
     fs.writeFileSync(env.configFilePath, JSON.stringify({
-      version: 1,
+      version: 2,
       teams: [{
         name: 'title_test_0',
         url: `http://localhost:${serverPort}`,
+        order: 0,
       }, {
         name: 'title_test_1',
         url: `http://localhost:${serverPort}`,
+        order: 1,
       }],
     }));
     await this.app.restart();

test/specs/browser/settings_test.js

@@ -12,13 +12,15 @@ describe('browser/settings.html', function desc() {
   this.timeout(30000);
 
   const config = {
-    version: 1,
+    version: 2,
     teams: [{
       name: 'example',
       url: env.mattermostURL,
+      order: 0,
     }, {
       name: 'github',
       url: 'https://github.com/',
+      order: 1,
     }],
     showTrayIcon: false,
     trayIconTheme: 'light',
@@ -32,6 +34,7 @@ describe('browser/settings.html', function desc() {
     useSpellChecker: true,
     enableHardwareAcceleration: true,
     autostart: true,
+    darkMode: false,
   };
 
   beforeEach(async () => {
@@ -357,8 +360,13 @@ describe('browser/settings.html', function desc() {
 
       await this.app.client.waitForVisible('#serversSaveIndicator', 10000, true);
 
+      const expectedConfig = JSON.parse(JSON.stringify(config.teams.slice(1)));
+      expectedConfig.forEach((value) => {
+        value.order--;
+      });
+
       const savedConfig = JSON.parse(fs.readFileSync(env.configFilePath, 'utf8'));
-      savedConfig.teams.should.deep.equal(config.teams.slice(1));
+      savedConfig.teams.should.deep.equal(expectedConfig);
     });
 
     it('should NOT remove existing team on click Cancel', async () => {
@@ -512,6 +520,7 @@ describe('browser/settings.html', function desc() {
         savedConfig.teams.should.deep.contain({
           name: 'TestTeam',
           url: 'http://example.org',
+          order: 2,
         });
       });
     });

test/specs/security_test.js

@@ -16,13 +16,15 @@ describe.skip('security', function desc() {
   const testURL = `http://localhost:${serverPort}`;
 
   const config = {
-    version: 1,
+    version: 2,
     teams: [{
       name: 'example_1',
       url: testURL,
+      order: 0,
     }, {
       name: 'example_2',
       url: testURL,
+      order: 1,
     }],
   };