phlux/mattermostest
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[MM-36432][MM-37072][MM-37073] Logic to support Focalboard and Playbooks tabs (#1680)

Browse Source 
* Tab stuff

* Inter-tab navigation

* Close tab functionality

* [MM-36342][MM-37072] Logic to support Focalboard and Playbooks tabs

* Update to version 5.0

* Update config.yml

* Updated routes

* Update names for products

* [MM-37073] Close unneeded tabs when not using v6.0

* Merge'd

* Update config.yml

* Update config.yml

* Fix menu names

* PR feedback

* blank

* blank

* blank

* PR feedback

* Update config.yml

* PR feedback

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
This commit is contained in:
Devin Binnie
2021-09-01 12:45:37 -04:00
committed by GitHub
parent 58bb16fbb6
commit 37c637efe9
27 changed files with 570 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/communication.ts
View File

@@ -3,6 +3,8 @@
export const SWITCH_SERVER = 'switch-server';
export const SWITCH_TAB = 'switch-tab';
export const CLOSE_TAB = 'close-tab';
export const OPEN_TAB = 'open-tab';
export const SET_ACTIVE_VIEW = 'set-active-view';
export const MARK_READ = 'mark-read';
export const FOCUS_BROWSERVIEW = 'focus-browserview';
@@ -92,3 +94,5 @@ export const UPDATE_DROPDOWN_MENTIONS = 'update-dropdown-mentions';
export const REQUEST_TEAMS_DROPDOWN_INFO = 'request-teams-dropdown-info';
export const RECEIVE_DROPDOWN_MENU_SIZE = 'receive-dropdown-menu-size';
export const SEND_DROPDOWN_MENU_SIZE = 'send-dropdown-menu-size';
export const BROWSER_HISTORY_PUSH = 'browser-history-push';

4
src/common/tabs/FocalboardTabView.ts
View File

@@ -1,12 +1,14 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {getFormattedPathName} from 'common/utils/url';
import BaseTabView from './BaseTabView';
import {TabType, TAB_FOCALBOARD} from './TabView';
export default class FocalboardTabView extends BaseTabView {
get url(): URL {
return this.server.url;
return new URL(`${this.server.url.origin}${getFormattedPathName(this.server.url.pathname)}boards`);
}
get type(): TabType {

4
src/common/tabs/PlaybooksTabView.ts
View File

@@ -1,12 +1,14 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {getFormattedPathName} from 'common/utils/url';
import BaseTabView from './BaseTabView';
import {TabType, TAB_PLAYBOOKS} from './TabView';
export default class PlaybooksTabView extends BaseTabView {
get url(): URL {
return this.server.url;
return new URL(`${this.server.url.origin}${getFormattedPathName(this.server.url.pathname)}playbooks`);
}
get type(): TabType {

21
src/common/tabs/TabView.ts
View File

@@ -29,14 +29,17 @@ export function getDefaultTeamWithTabsFromTeam(team: Team) {
{
name: TAB_MESSAGING,
order: 0,
isClosed: false,
},
{
name: TAB_FOCALBOARD,
order: 1,
isClosed: false,
},
{
name: TAB_PLAYBOOKS,
order: 2,
isClosed: false,
},
],
};
@@ -59,3 +62,21 @@ export function getServerView(srv: MattermostServer, tab: Tab) {
export function getTabViewName(serverName: string, tabType: string) {
return `${serverName}___${tabType}`;
}
export function getTabDisplayName(tabType: TabType) {
switch (tabType) {
case TAB_MESSAGING:
return 'Channels';
case TAB_FOCALBOARD:
return 'Boards';
case TAB_PLAYBOOKS:
return 'Playbooks';
default:
throw new Error('Not implemeneted');
}
}
export function canCloseTab(tabType: TabType) {
// TODO: maybe rework to make the property belong to the class somehow
return tabType !== TAB_MESSAGING;
}

16
src/common/utils/url.ts
View File

@@ -79,10 +79,14 @@ function getServerInfo(serverUrl: URL | string) {
// does the server have a subpath?
const pn = parsedServer.pathname.toLowerCase();
const subpath = pn.endsWith('/') ? pn.toLowerCase() : `${pn}/`;
const subpath = getFormattedPathName(pn);
return {subpath, url: parsedServer};
}
export function getFormattedPathName(pn: string) {
return pn.endsWith('/') ? pn.toLowerCase() : `${pn}/`;
}
function getManagedResources() {
if (!buildConfig) {
return [];
@@ -164,25 +168,24 @@ function getView(inputURL: URL | string, teams: TeamWithTabs[], ignoreScheme = f
if (!parsedURL) {
return undefined;
}
let parsedServerUrl;
let firstOption;
let secondOption;
teams.forEach((team) => {
const srv = new MattermostServer(team.name, team.url);
team.tabs.forEach((tab) => {
const tabView = getServerView(srv, tab);
parsedServerUrl = parseURL(tabView.url);
const parsedServerUrl = parseURL(tabView.url);
if (parsedServerUrl) {
// check server and subpath matches (without subpath pathname is \ so it always matches)
if (equalUrlsWithSubpath(parsedServerUrl, parsedURL, ignoreScheme)) {
firstOption = {name: tabView.name, url: parsedServerUrl};
firstOption = {name: tabView.name, url: parsedServerUrl.toString()};
}
if (equalUrlsIgnoringSubpath(parsedServerUrl, parsedURL, ignoreScheme)) {
// in case the user added something on the path that doesn't really belong to the server
// there might be more than one that matches, but we can't differentiate, so last one
// is as good as any other in case there is no better match (e.g.: two subpath servers with the same origin)
// e.g.: https://community.mattermost.com/core
secondOption = {name: tabView.name, url: parsedServerUrl};
secondOption = {name: tabView.name, url: parsedServerUrl.toString()};
}
}
});
@@ -214,7 +217,8 @@ function isTrustedURL(url: URL | string, teams: TeamWithTabs[]) {
}
function isCustomLoginURL(url: URL | string, server: ServerFromURL, teams: TeamWithTabs[]): boolean {
const subpath = server ? server.url.pathname : '';
const serverURL = parseURL(server.url);
const subpath = server && serverURL ? serverURL.pathname : '';
const parsedURL = parseURL(url);
if (!parsedURL) {
return false;

26
src/common/utils/util.ts
View File

@@ -37,8 +37,34 @@ function shorten(string: string, max?: number) {
return string;
}
export function isServerVersionGreaterThanOrEqualTo(currentVersion: string, compareVersion: string): boolean {
if (currentVersion === compareVersion) {
return true;
}
// We only care about the numbers
const currentVersionNumber = (currentVersion || '').split('.').filter((x) => (/^[0-9]+$/).exec(x) !== null);
const compareVersionNumber = (compareVersion || '').split('.').filter((x) => (/^[0-9]+$/).exec(x) !== null);
for (let i = 0; i < Math.max(currentVersionNumber.length, compareVersionNumber.length); i++) {
const currentVersion = parseInt(currentVersionNumber[i], 10) || 0;
const compareVersion = parseInt(compareVersionNumber[i], 10) || 0;
if (currentVersion > compareVersion) {
return true;
}
if (currentVersion < compareVersion) {
return false;
}
}
// If all components are equal, then return true
return true;
}
export default {
getDisplayBoundaries,
runMode,
shorten,
isServerVersionGreaterThanOrEqualTo,
};

1
src/main/Validator.ts
View File

@@ -103,6 +103,7 @@ const configDataSchemaV3 = Joi.object<ConfigV3>({
tabs: Joi.array().items(Joi.object({
name: Joi.string().required(),
order: Joi.number().integer().min(0),
isClosed: Joi.boolean().default(false),
})).default([]),
})).default([]),
showTrayIcon: Joi.boolean().default(false),

86
src/main/main.ts
View File

@@ -13,10 +13,9 @@ import installExtension, {REACT_DEVELOPER_TOOLS} from 'electron-devtools-install
import log from 'electron-log';
import 'airbnb-js-shims/target/es2015';
import {Team} from 'types/config';
import {Team, TeamWithTabs} from 'types/config';
import {MentionData} from 'types/notification';
import {RemoteInfo} from 'types/server';
import {Boundaries} from 'types/utils';
import {
@@ -37,14 +36,17 @@ import {
USER_ACTIVITY_UPDATE,
EMIT_CONFIGURATION,
SWITCH_TAB,
CLOSE_TAB,
OPEN_TAB,
SHOW_EDIT_SERVER_MODAL,
SHOW_REMOVE_SERVER_MODAL,
UPDATE_SHORTCUT_MENU,
OPEN_TEAMS_DROPDOWN,
} from 'common/communication';
import Config from 'common/config';
import {getDefaultTeamWithTabsFromTeam} from 'common/tabs/TabView';
import Utils from 'common/utils/util';
import {MattermostServer} from 'common/servers/MattermostServer';
import {getDefaultTeamWithTabsFromTeam, TAB_FOCALBOARD, TAB_MESSAGING, TAB_PLAYBOOKS} from 'common/tabs/TabView';
import Utils, {isServerVersionGreaterThanOrEqualTo} from 'common/utils/util';
import urlUtils from 'common/utils/url';
@@ -71,6 +73,7 @@ import {destroyTray, refreshTrayImages, setTrayMenu, setupTray} from './tray/tra
import {AuthManager} from './authManager';
import {CertificateManager} from './certificateManager';
import {setupBadge, setUnreadBadgeSetting} from './badge';
import {ServerInfo} from './server/serverInfo';
if (process.env.NODE_ENV !== 'production' && module.hot) {
module.hot.accept();
@@ -245,6 +248,8 @@ function initializeInterCommunicationEventListeners() {
ipcMain.on(SWITCH_SERVER, handleSwitchServer);
ipcMain.on(SWITCH_TAB, handleSwitchTab);
ipcMain.on(CLOSE_TAB, handleCloseTab);
ipcMain.on(OPEN_TAB, handleOpenTab);
ipcMain.on(QUIT, handleQuit);
@@ -493,6 +498,37 @@ function handleSwitchTab(event: IpcMainEvent, serverName: string, tabName: strin
WindowManager.switchTab(serverName, tabName);
}
function handleCloseTab(event: IpcMainEvent, serverName: string, tabName: string) {
const teams = config.teams;
teams.forEach((team) => {
if (team.name === serverName) {
team.tabs.forEach((tab) => {
if (tab.name === tabName) {
tab.isClosed = true;
}
});
}
});
const nextTab = teams.find((team) => team.name === serverName)!.tabs.filter((tab) => !tab.isClosed)[0].name;
WindowManager.switchTab(serverName, nextTab);
config.set('teams', teams);
}
function handleOpenTab(event: IpcMainEvent, serverName: string, tabName: string) {
const teams = config.teams;
teams.forEach((team) => {
if (team.name === serverName) {
team.tabs.forEach((tab) => {
if (tab.name === tabName) {
tab.isClosed = false;
}
});
}
});
WindowManager.switchTab(serverName, tabName);
config.set('teams', teams);
}
function handleNewServerModal() {
const html = getLocalURLString('newServer.html');
@@ -507,8 +543,10 @@ function handleNewServerModal() {
modalPromise.then((data) => {
const teams = config.teams;
const order = teams.length;
teams.push(getDefaultTeamWithTabsFromTeam({...data, order}));
const newTeam = getDefaultTeamWithTabsFromTeam({...data, order});
teams.push(newTeam);
config.set('teams', teams);
updateServerInfos([newTeam]);
}).catch((e) => {
// e is undefined for user cancellation
if (e) {
@@ -590,6 +628,7 @@ function handleRemoveServerModal(e: IpcMainEvent, name: string) {
}
function initializeAfterAppReady() {
updateServerInfos(config.teams);
app.setAppUserModelId('Mattermost.Desktop'); // Use explicit AppUserModelID
const defaultSession = session.defaultSession;
@@ -751,6 +790,41 @@ function handleMentionNotification(event: IpcMainEvent, title: string, body: str
displayMention(title, body, channel, teamId, url, silent, event.sender, data);
}
function updateServerInfos(teams: TeamWithTabs[]) {
const serverInfos: Array<Promise<RemoteInfo | string | undefined>> = [];
teams.forEach((team) => {
const serverInfo = new ServerInfo(new MattermostServer(team.name, team.url));
serverInfos.push(serverInfo.promise);
});
Promise.all(serverInfos).then((data: Array<RemoteInfo | string | undefined>) => {
const teams = config.teams;
teams.forEach((team) => closeUnneededTabs(data, team));
config.set('teams', teams);
}).catch((reason: any) => {
log.error('Error getting server infos', reason);
});
}
function closeUnneededTabs(data: Array<RemoteInfo | string | undefined>, team: TeamWithTabs) {
const remoteInfo = data.find((info) => info && typeof info !== 'string' && info.name === team.name) as RemoteInfo;
if (remoteInfo) {
team.tabs.forEach((tab) => {
if (tab.name === TAB_PLAYBOOKS && !remoteInfo.hasPlaybooks) {
log.info(`closing ${team.name}___${tab.name} on !hasPlaybooks`);
tab.isClosed = true;
}
if (tab.name === TAB_FOCALBOARD && !remoteInfo.hasFocalboard) {
log.info(`closing ${team.name}___${tab.name} on !hasFocalboard`);
tab.isClosed = true;
}
if (tab.name !== TAB_MESSAGING && remoteInfo.serverVersion && !isServerVersionGreaterThanOrEqualTo(remoteInfo.serverVersion, '6.0.0')) {
log.info(`closing ${team.name}___${tab.name} on !serverVersion`);
tab.isClosed = true;
}
});
}
}
function handleOpenAppMenu() {
const windowMenu = Menu.getApplicationMenu();
if (!windowMenu) {

3
src/main/menus/app.ts
View File

@@ -7,6 +7,7 @@ import {app, ipcMain, Menu, MenuItemConstructorOptions, MenuItem, session, shell
import {SHOW_NEW_SERVER_MODAL} from 'common/communication';
import Config from 'common/config';
import {TabType, getTabDisplayName} from 'common/tabs/TabView';
import * as WindowManager from '../windows/windowManager';
@@ -217,7 +218,7 @@ function createTemplate(config: Config) {
if (WindowManager.getCurrentTeamName() === team.name) {
team.tabs.slice(0, 9).sort((teamA, teamB) => teamA.order - teamB.order).forEach((tab, i) => {
items.push({
label: ` ${tab.name}`, // TODO
label: ` ${getTabDisplayName(tab.name as TabType)}`,
accelerator: `CmdOrCtrl+${i + 1}`,
click() {
WindowManager.switchTab(team.name, tab.name);

29
src/main/preload/mattermost.js
View File

@@ -12,7 +12,17 @@ import {ipcRenderer, webFrame} from 'electron';
// we'll be able to use it again if there is a workaround for the 'os' import
//import log from 'electron-log';
import {NOTIFY_MENTION, IS_UNREAD, UNREAD_RESULT, SESSION_EXPIRED, SET_VIEW_NAME, REACT_APP_INITIALIZED, USER_ACTIVITY_UPDATE, CLOSE_TEAMS_DROPDOWN} from 'common/communication';
import {
NOTIFY_MENTION,
IS_UNREAD,
UNREAD_RESULT,
SESSION_EXPIRED,
SET_VIEW_NAME,
REACT_APP_INITIALIZED,
USER_ACTIVITY_UPDATE,
CLOSE_TEAMS_DROPDOWN,
BROWSER_HISTORY_PUSH,
} from 'common/communication';
const UNREAD_COUNT_INTERVAL = 1000;
const CLEAR_CACHE_INTERVAL = 6 * 60 * 60 * 1000; // 6 hours
@@ -114,6 +124,11 @@ window.addEventListener('message', ({origin, data = {}} = {}) => {
ipcRenderer.send(NOTIFY_MENTION, title, body, channel, teamId, url, silent, messageData);
break;
}
case 'browser-history-push': {
const {path} = message;
ipcRenderer.send(BROWSER_HISTORY_PUSH, viewName, path);
break;
}
default:
if (typeof type === 'undefined') {
console.log('ignoring message of undefined type:');
@@ -211,4 +226,16 @@ window.addEventListener('click', () => {
ipcRenderer.send(CLOSE_TEAMS_DROPDOWN);
});
ipcRenderer.on(BROWSER_HISTORY_PUSH, (event, pathName) => {
window.postMessage(
{
type: 'browser-history-push-return',
message: {
pathName,
},
},
window.location.origin,
);
});
/* eslint-enable no-magic-numbers */

55
src/main/server/serverAPI.ts Normal file
View File

@@ -0,0 +1,55 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {net, session} from 'electron';
import log from 'electron-log';
export async function getServerAPI<T>(url: URL, isAuthenticated: boolean, onSuccess?: (data: T) => void, onAbort?: () => void, onError?: (error: Error) => void) {
if (isAuthenticated) {
const cookies = await session.defaultSession.cookies.get({});
if (!cookies) {
log.error('Cannot authenticate, no cookies present');
return;
}
// Filter out cookies that aren't part of our domain
const filteredCookies = cookies.filter((cookie) => cookie.domain && url.toString().indexOf(cookie.domain) >= 0);
const userId = filteredCookies.find((cookie) => cookie.name === 'MMUSERID');
const csrf = filteredCookies.find((cookie) => cookie.name === 'MMCSRF');
const authToken = filteredCookies.find((cookie) => cookie.name === 'MMAUTHTOKEN');
if (!userId || !csrf || !authToken) {
// Missing cookies needed for req
log.error(`Cannot authenticate, required cookies for ${url.origin} not found`);
return;
}
}
const req = net.request({
url: url.toString(),
session: session.defaultSession,
useSessionCookies: true,
});
if (onSuccess) {
req.on('response', (response: Electron.IncomingMessage) => {
if (response.statusCode === 200) {
response.on('data', (chunk: Buffer) => {
const raw = `${chunk}`;
const data = JSON.parse(raw) as T;
onSuccess(data);
});
} else {
onError?.(new Error(`Bad status code requesting from ${url.toString()}`));
}
});
}
if (onAbort) {
req.on('abort', onAbort);
}
if (onError) {
req.on('error', onError);
}
req.end();
}

68
src/main/server/serverInfo.ts Normal file
View File

@@ -0,0 +1,68 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {RemoteInfo} from 'types/server';
import {MattermostServer} from 'common/servers/MattermostServer';
import {getServerAPI} from './serverAPI';
export class ServerInfo {
server: MattermostServer;
remoteInfo: RemoteInfo;
promise: Promise<RemoteInfo | string | undefined>;
onRetrievedRemoteInfo?: (result?: RemoteInfo | string) => void;
constructor(server: MattermostServer) {
this.server = server;
this.remoteInfo = {name: server.name};
this.promise = new Promise<RemoteInfo | string | undefined>((resolve) => {
this.onRetrievedRemoteInfo = resolve;
});
this.getRemoteInfo();
}
getRemoteInfo = () => {
getServerAPI<{Version: string}>(
new URL(`${this.server.url.toString()}/api/v4/config/client?format=old`),
false,
this.onGetConfig,
this.onRetrievedRemoteInfo,
this.onRetrievedRemoteInfo);
getServerAPI<Array<{id: string; version: string}>>(
new URL(`${this.server.url.toString()}/api/v4/plugins/webapp`),
false,
this.onGetPlugins,
this.onRetrievedRemoteInfo,
this.onRetrievedRemoteInfo);
}
onGetConfig = (data: {Version: string}) => {
this.remoteInfo.serverVersion = data.Version;
this.trySendRemoteInfo();
}
onGetPlugins = (data: Array<{id: string; version: string}>) => {
this.remoteInfo.hasFocalboard = data.some((plugin) => plugin.id === 'focalboard');
this.remoteInfo.hasPlaybooks = data.some((plugin) => plugin.id === 'com.mattermost.plugin-incident-management');
this.trySendRemoteInfo();
}
trySendRemoteInfo = () => {
if (this.isRemoteInfoRetrieved()) {
this.onRetrievedRemoteInfo?.(this.remoteInfo);
}
}
isRemoteInfoRetrieved = () => {
return !(
typeof this.remoteInfo.serverVersion === 'undefined' ||
typeof this.remoteInfo.hasFocalboard === 'undefined' ||
typeof this.remoteInfo.hasPlaybooks === 'undefined'
);
}
}

11
src/main/views/MattermostView.ts
View File

@@ -57,7 +57,6 @@ export class MattermostView extends EventEmitter {
usesAsteriskForUnreads?: boolean;
currentFavicon?: string;
isInitialized: boolean;
hasBeenShown: boolean;
altLastPressed?: boolean;
contextMenu: ContextMenu;
@@ -90,7 +89,6 @@ export class MattermostView extends EventEmitter {
log.info(`BrowserView created for server ${this.tab.name}`);
this.isInitialized = false;
this.hasBeenShown = false;
if (process.platform !== 'darwin') {
@@ -98,6 +96,10 @@ export class MattermostView extends EventEmitter {
this.view.webContents.on('before-input-event', this.handleInputEvents);
}
this.view.webContents.on('did-finish-load', () => {
this.view.webContents.send(SET_VIEW_NAME, this.tab.name);
});
this.contextMenu = new ContextMenu({}, this.view);
this.maxRetries = MAX_SERVER_RETRIES;
}
@@ -179,7 +181,6 @@ export class MattermostView extends EventEmitter {
this.status = Status.WAITING_MM;
this.removeLoading = setTimeout(this.setInitialized, MAX_LOADING_SCREEN_SECONDS, true);
this.emit(LOAD_SUCCESS, this.tab.name, loadURL);
this.view.webContents.send(SET_VIEW_NAME, this.tab.name);
this.setBounds(getWindowBoundaries(this.window, !(urlUtils.isTeamUrl(this.tab.url || '', this.view.webContents.getURL()) || urlUtils.isAdminUrl(this.tab.url || '', this.view.webContents.getURL()))));
};
}
@@ -259,6 +260,10 @@ export class MattermostView extends EventEmitter {
delete this.removeLoading;
}
isInitialized = () => {
return this.status === Status.READY;
}
openDevTools = () => {
this.view.webContents.openDevTools({mode: 'detach'});
}

62
src/main/views/viewManager.ts
View File

@@ -15,6 +15,7 @@ import {
GET_LOADING_SCREEN_DATA,
LOADSCREEN_END,
SET_ACTIVE_VIEW,
OPEN_TAB,
} from 'common/communication';
import urlUtils from 'common/utils/url';
@@ -33,6 +34,7 @@ const URL_VIEW_HEIGHT = 36;
export class ViewManager {
configServers: TeamWithTabs[];
viewOptions: BrowserViewConstructorOptions;
closedViews: Map<string, {srv: MattermostServer; tab: Tab}>;
views: Map<string, MattermostView>;
currentView?: string;
urlView?: BrowserView;
@@ -45,6 +47,7 @@ export class ViewManager {
this.viewOptions = {webPreferences: {spellcheck: config.useSpellChecker}};
this.views = new Map(); // keep in mind that this doesn't need to hold server order, only tabs on the renderer need that.
this.mainWindow = mainWindow;
this.closedViews = new Map();
}
updateMainWindow = (mainWindow: BrowserWindow) => {
@@ -60,15 +63,19 @@ export class ViewManager {
server.tabs.forEach((tab) => this.loadView(srv, tab));
}
loadView = (srv: MattermostServer, tab: Tab) => {
loadView = (srv: MattermostServer, tab: Tab, url?: string) => {
const tabView = getServerView(srv, tab);
if (tab.isClosed) {
this.closedViews.set(tabView.name, {srv, tab});
return;
}
const view = new MattermostView(tabView, this.mainWindow, this.viewOptions);
this.views.set(tabView.name, view);
if (!this.loadingScreen) {
this.createLoadingScreen();
}
view.once(LOAD_SUCCESS, this.activateView);
view.load();
view.load(url);
view.on(UPDATE_TARGET_URL, this.showURLView);
view.on(LOADSCREEN_END, this.finishLoading);
view.once(LOAD_FAILED, this.failLoading);
@@ -92,7 +99,9 @@ export class ViewManager {
if (recycle && recycle.isVisible) {
setFocus = recycle.name;
}
if (recycle && recycle.tab.name === tabView.name && recycle.tab.url.toString() === urlUtils.parseURL(tabView.url)!.toString()) {
if (tab.isClosed) {
this.closedViews.set(tabView.name, {srv, tab});
} else if (recycle && recycle.tab.name === tabView.name && recycle.tab.url.toString() === urlUtils.parseURL(tabView.url)!.toString()) {
oldviews.delete(recycle.name);
this.views.set(recycle.name, recycle);
} else {
@@ -114,7 +123,8 @@ export class ViewManager {
if (this.configServers.length) {
const element = this.configServers.find((e) => e.order === 0);
if (element) {
const tab = element.tabs.find((e) => e.order === 0);
const openTabs = element.tabs.filter((tab) => !tab.isClosed);
const tab = openTabs.find((e) => e.order === 0) || openTabs[0];
if (tab) {
const tabView = getTabViewName(element.name, tab.name);
this.showByName(tabView);
@@ -193,6 +203,24 @@ export class ViewManager {
}
}
openClosedTab = (name: string, url?: string) => {
if (!this.closedViews.has(name)) {
return;
}
const {srv, tab} = this.closedViews.get(name)!;
tab.isClosed = false;
this.closedViews.delete(name);
this.loadView(srv, tab, url);
this.showByName(name);
const view = this.views.get(name)!;
view.isVisible = true;
view.on(LOAD_SUCCESS, () => {
view.isVisible = false;
this.showByName(name);
});
ipcMain.emit(OPEN_TAB, null, srv.name, tab.name);
}
failLoading = () => {
this.fadeLoadingScreen();
}
@@ -360,18 +388,22 @@ export class ViewManager {
const parsedURL = urlUtils.parseURL(url)!;
const tabView = urlUtils.getView(parsedURL, this.configServers, true);
if (tabView) {
const view = this.views.get(tabView.name);
if (!view) {
log.error(`Couldn't find a view matching the name ${tabView.name}`);
return;
}
const urlWithSchema = `${urlUtils.parseURL(tabView.url)?.origin}${parsedURL.pathname}${parsedURL.search}`;
if (this.closedViews.has(tabView.name)) {
this.openClosedTab(tabView.name, urlWithSchema);
} else {
const view = this.views.get(tabView.name);
if (!view) {
log.error(`Couldn't find a view matching the name ${tabView.name}`);
return;
}
// attempting to change parsedURL protocol results in it not being modified.
const urlWithSchema = `${view.tab.url.origin}${parsedURL.pathname}${parsedURL.search}`;
view.resetLoadingStatus();
view.load(urlWithSchema);
view.once(LOAD_SUCCESS, this.deeplinkSuccess);
view.once(LOAD_FAILED, this.deeplinkFailed);
// attempting to change parsedURL protocol results in it not being modified.
view.resetLoadingStatus();
view.load(urlWithSchema);
view.once(LOAD_SUCCESS, this.deeplinkSuccess);
view.once(LOAD_FAILED, this.deeplinkFailed);
}
} else {
dialog.showErrorBox('No matching server', `there is no configured server in the app that matches the requested url: ${parsedURL.toString()}`);
}

4
src/main/views/webContentEvents.ts
View File

@@ -74,9 +74,11 @@ const generateDidStartNavigation = (getServersFunction: () => TeamWithTabs[]) =>
return;
}
const serverURL = urlUtils.parseURL(server?.url || '');
if (server && urlUtils.isCustomLoginURL(parsedURL, server, serverList)) {
customLogins[contentID].inProgress = true;
} else if (server && customLogins[contentID].inProgress && urlUtils.isInternalURL(server.url, parsedURL)) {
} else if (server && customLogins[contentID].inProgress && urlUtils.isInternalURL(serverURL || new URL(''), parsedURL)) {
customLogins[contentID].inProgress = false;
}
};

49
src/main/windows/windowManager.ts
View File

@@ -16,6 +16,7 @@ import {
FOCUS_THREE_DOT_MENU,
GET_DARK_MODE,
UPDATE_SHORTCUT_MENU,
BROWSER_HISTORY_PUSH,
} from 'common/communication';
import urlUtils from 'common/utils/url';
@@ -50,6 +51,7 @@ ipcMain.handle(GET_LOADING_SCREEN_DATA, handleLoadingScreenDataRequest);
ipcMain.handle(GET_DARK_MODE, handleGetDarkMode);
ipcMain.on(REACT_APP_INITIALIZED, handleReactAppInitialized);
ipcMain.on(LOADING_SCREEN_ANIMATION_FINISHED, handleLoadingScreenAnimationFinished);
ipcMain.on(BROWSER_HISTORY_PUSH, handleBrowserHistoryPush);
export function setConfig(data: CombinedConfig) {
if (data) {
@@ -480,15 +482,21 @@ export function selectNextTab() {
}
const currentTeamTabs = status.config?.teams.find((team) => team.name === currentView.tab.server.name)?.tabs;
const filteredTabs = currentTeamTabs?.filter((tab) => !tab.isClosed);
const currentTab = currentTeamTabs?.find((tab) => tab.name === currentView.tab.type);
if (!currentTeamTabs || !currentTab) {
if (!currentTeamTabs || !currentTab || !filteredTabs) {
return;
}
const currentOrder = currentTab.order;
const nextOrder = ((currentOrder + 1) % currentTeamTabs.length);
const nextIndex = currentTeamTabs.findIndex((tab) => tab.order === nextOrder);
const newTab = currentTeamTabs[nextIndex];
let currentOrder = currentTab.order;
let nextIndex = -1;
while (nextIndex === -1) {
const nextOrder = ((currentOrder + 1) % currentTeamTabs.length);
nextIndex = filteredTabs.findIndex((tab) => tab.order === nextOrder);
currentOrder = nextOrder;
}
const newTab = filteredTabs[nextIndex];
switchTab(currentView.tab.server.name, newTab.name);
}
@@ -499,17 +507,22 @@ export function selectPreviousTab() {
}
const currentTeamTabs = status.config?.teams.find((team) => team.name === currentView.tab.server.name)?.tabs;
const filteredTabs = currentTeamTabs?.filter((tab) => !tab.isClosed);
const currentTab = currentTeamTabs?.find((tab) => tab.name === currentView.tab.type);
if (!currentTeamTabs || !currentTab) {
if (!currentTeamTabs || !currentTab || !filteredTabs) {
return;
}
const currentOrder = currentTab.order;
// js modulo operator returns a negative number if result is negative, so we have to ensure it's positive
const nextOrder = ((currentTeamTabs.length + (currentOrder - 1)) % currentTeamTabs.length);
const nextIndex = currentTeamTabs.findIndex((tab) => tab.order === nextOrder);
const newTab = currentTeamTabs[nextIndex];
let currentOrder = currentTab.order;
let nextIndex = -1;
while (nextIndex === -1) {
const nextOrder = ((currentTeamTabs.length + (currentOrder - 1)) % currentTeamTabs.length);
nextIndex = filteredTabs.findIndex((tab) => tab.order === nextOrder);
currentOrder = nextOrder;
}
const newTab = filteredTabs[nextIndex];
switchTab(currentView.tab.server.name, newTab.name);
}
@@ -517,6 +530,20 @@ function handleGetDarkMode() {
return status.config?.darkMode;
}
function handleBrowserHistoryPush(e: IpcMainEvent, viewName: string, pathName: string) {
const currentView = status.viewManager?.views.get(viewName);
const redirectedViewName = urlUtils.getView(`${currentView?.tab.server.url}${pathName}`, status.config!.teams)?.name || viewName;
if (status.viewManager?.closedViews.has(redirectedViewName)) {
status.viewManager.openClosedTab(redirectedViewName, `${currentView?.tab.server.url}${pathName}`);
}
const redirectedView = status.viewManager?.views.get(redirectedViewName) || currentView;
if (redirectedView !== currentView) {
log.info('redirecting to a new view', redirectedView?.name || viewName);
status.viewManager?.showByName(redirectedView?.name || viewName);
}
redirectedView?.view.webContents.send(BROWSER_HISTORY_PUSH, pathName);
}
export function getCurrentTeamName() {
return status.currentServerName;
}

6
src/renderer/components/MainPage.tsx
View File

@@ -36,6 +36,7 @@ import {
CLOSE_TEAMS_DROPDOWN,
OPEN_TEAMS_DROPDOWN,
SWITCH_TAB,
CLOSE_TAB,
} from 'common/communication';
import restoreButton from '../../assets/titlebar/chrome-restore.svg';
@@ -236,6 +237,10 @@ export default class MainPage extends React.PureComponent<Props, State> {
window.ipcRenderer.send(SWITCH_TAB, this.state.activeServerName, name);
}
handleCloseTab = (name: string) => {
window.ipcRenderer.send(CLOSE_TAB, this.state.activeServerName, name);
}
handleDragAndDrop = async (dropResult: DropResult) => {
const removedIndex = dropResult.source.index;
const addedIndex = dropResult.destination?.index;
@@ -314,6 +319,7 @@ export default class MainPage extends React.PureComponent<Props, State> {
activeServerName={this.state.activeServerName}
activeTabName={this.state.activeTabName}
onSelect={this.handleSelectTab}
onCloseTab={this.handleCloseTab}
onDrop={this.handleDragAndDrop}
tabsDisabled={this.state.modalOpen}
/>

98
src/renderer/components/TabBar.tsx
View File

@@ -9,7 +9,7 @@ import classNames from 'classnames';
import {Tab} from 'types/config';
import {getTabViewName} from 'common/tabs/TabView';
import {getTabDisplayName, getTabViewName, TabType, canCloseTab} from 'common/tabs/TabView';
type Props = {
activeTabName: string;
@@ -17,6 +17,7 @@ type Props = {
id: string;
isDarkMode: boolean;
onSelect: (name: string, index: number) => void;
onCloseTab: (name: string) => void;
tabs: Tab[];
sessionsExpired: Record<string, boolean>;
unreadCounts: Record<string, number>;
@@ -37,6 +38,13 @@ function getStyle(style?: DraggingStyle | NotDraggingStyle) {
}
export default class TabBar extends React.PureComponent<Props> {
onCloseTab = (name: string) => {
return (event: React.MouseEvent<HTMLButtonElement>) => {
event.stopPropagation();
this.props.onCloseTab(name);
};
}
render() {
const orderedTabs = this.props.tabs.concat().sort((a, b) => a.order - b.order);
const tabs = orderedTabs.map((tab, orderedIndex) => {
@@ -54,12 +62,14 @@ export default class TabBar extends React.PureComponent<Props> {
let badgeDiv: React.ReactNode;
if (sessionExpired) {
badgeDiv = (
<div className='TabBar-expired'/>
<div className='TabBar-expired'>
<i className='icon-alert-circle-outline'/>
</div>
);
} else if (mentionCount !== 0) {
badgeDiv = (
<div className='TabBar-badge'>
{mentionCount}
<span>{mentionCount}</span>
</div>
);
} else if (hasUnreads) {
@@ -74,39 +84,59 @@ export default class TabBar extends React.PureComponent<Props> {
draggableId={`teamTabItem${index}`}
index={orderedIndex}
>
{(provided, snapshot) => (
<NavItem
ref={provided.innerRef}
as='li'
id={`teamTabItem${index}`}
draggable={false}
title={tab.name}
className={classNames('teamTabItem', {
active: this.props.activeTabName === tab.name,
dragging: snapshot.isDragging,
})}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getStyle(provided.draggableProps.style)}
>
<NavLink
eventKey={index}
{(provided, snapshot) => {
if (tab.isClosed) {
return (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
/>
);
}
return (
<NavItem
ref={provided.innerRef}
as='li'
id={`teamTabItem${index}`}
draggable={false}
active={this.props.activeTabName === tab.name}
disabled={this.props.tabsDisabled}
onSelect={() => {
this.props.onSelect(tab.name, index);
}}
title={tab.name}
className={classNames('teamTabItem', {
active: this.props.activeTabName === tab.name,
dragging: snapshot.isDragging,
})}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getStyle(provided.draggableProps.style)}
>
<div className='TabBar-tabSeperator'>
<span>
{tab.name}
</span>
{ badgeDiv }
</div>
</NavLink>
</NavItem>
)}
<NavLink
eventKey={index}
draggable={false}
active={this.props.activeTabName === tab.name}
disabled={this.props.tabsDisabled}
onSelect={() => {
this.props.onSelect(tab.name, index);
}}
>
<div className='TabBar-tabSeperator'>
<span>
{getTabDisplayName(tab.name as TabType)}
</span>
{ badgeDiv }
{canCloseTab(tab.name as TabType) &&
<button
className='teamTabItem__close'
onClick={this.onCloseTab(tab.name)}
>
<i className='icon-close'/>
</button>
}
</div>
</NavLink>
</NavItem>
);
}}
</Draggable>
);
});

10
src/renderer/components/TeamDropdownButton.tsx
View File

@@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
import classNames from 'classnames';
import React from 'react';
import React, {useEffect} from 'react';
import {CLOSE_TEAMS_DROPDOWN, OPEN_TEAMS_DROPDOWN} from 'common/communication';
@@ -20,6 +20,13 @@ type Props = {
const TeamDropdownButton: React.FC<Props> = (props: Props) => {
const {isDisabled, activeServerName, totalMentionCount, hasUnreads, isMenuOpen, darkMode} = props;
const buttonRef: React.RefObject<HTMLButtonElement> = React.createRef();
useEffect(() => {
if (!isMenuOpen) {
buttonRef.current?.blur();
}
}, [isMenuOpen]);
const handleToggleButton = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
@@ -42,6 +49,7 @@ const TeamDropdownButton: React.FC<Props> = (props: Props) => {
return (
<button
ref={buttonRef}
disabled={isDisabled}
className={classNames('TeamDropdownButton', {
disabled: isDisabled,

218
src/renderer/css/components/TabBar.css
View File

@@ -1,12 +1,12 @@
.TabBar {
border: none;
max-height: 36px;
max-height: 40px;
flex: 1 1 auto;
display: flex !important;
flex-wrap: nowrap;
justify-content: flex-start;
-webkit-app-region: drag;
margin-top: 4px;
padding: 6px 8px;
}
.TabBar .teamTabItem span {
@@ -23,145 +23,94 @@
min-width: 48px;
max-width: 224px;
position: relative;
margin: 0 2px;
}
.TabBar>li>a {
border: none;
border-radius: 0;
height: 32px;
max-height: 32px;
line-height: 16px;
margin-right: -1px;
padding: 6px 0;
color: rgba(61,60,64,0.7);
font-family: Arial;
font-size: 14px;
font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: -0.2px;
transition: 0.3s;
line-height: 18px;
border-radius: 4px;
border: none !important;
padding: 0;
}
.TabBar.darkMode>li>a {
color: rgba(243,243,243,0.7);
color: rgba(221,221,221,0.64);
}
.TabBar>li>a:hover {
background-color: rgba(255,255,255,0.4);
background-color: rgba(255,255,255,0.32);
text-decoration: none;
border-radius: 6px 6px 0 0;
}
.TabBar.darkMode>li>a:hover {
background-color: rgba(50, 54, 57, 0.4);
background-color: rgba(31, 31, 31, 0.32);
}
.TabBar>li>a:focus {
background-color: #fff;
color: rgba(61,60,64,1);
color: #3d3c40;
text-decoration: none;
border-radius: 6px 6px 0 0;
}
.TabBar>li.teamTabItem>a>div.TabBar-tabSeperator>.teamTabItem__close {
background: none;
border: none;
color: rgba(61,60,64,0.32);
margin-left: 6px;
padding: 0;
}
.TabBar>li.teamTabItem>a>div.TabBar-tabSeperator>.teamTabItem__close:hover {
color: #3d3c40;
}
.TabBar.darkMode>li.teamTabItem>a>div.TabBar-tabSeperator>.teamTabItem__close:hover {
color: #ddd;
}
.TabBar>li.teamTabItem>a>div.TabBar-tabSeperator>.teamTabItem__close>i::before {
margin: 0;
}
.TabBar.darkMode>li.teamTabItem>a>div.TabBar-tabSeperator>.teamTabItem__close {
color: rgba(221,221,221,0.32);
}
.TabBar.darkMode>li>a:focus {
background-color: #323639;
color: rgba(243,243,243,1);
}
.TabBar>li:before, .TabBar>li:after {
position: absolute;
bottom: -1px;
width: 6px;
height: 6px;
content: "";
background-color: inherit;
z-index: 9;
flex: 0 0 6px;
}
.TabBar>li.teamTabItem.active:before, .TabBar>li.teamTabItem.dragging:before {
left: -4px;
border-bottom-right-radius: 6px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
z-index: 9;
}
.TabBar.darkMode>li.teamTabItem.active:before, .TabBar.darkMode>li.teamTabItem.dragging:before {
border-right: 2px solid #323639;
border-bottom: 2px solid #323639;
}
.TabBar>li.teamTabItem.active:after, .TabBar>li.teamTabItem.dragging:after {
border-bottom-left-radius: 6px;
right: -5px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
z-index: 9;
}
.TabBar.darkMode>li.teamTabItem.active:after, .TabBar.darkMode>li.teamTabItem.dragging:after {
border-left: 2px solid #323639;
border-bottom: 2px solid #323639;
background-color: #1f1f1f;
color: #ddd;
}
.TabBar>li>a>div.TabBar-tabSeperator {
padding: 2px 16px;
max-height: 20px;
display: flex;
}
.TabBar>li.TabBar-addServerButton{
flex: 0 0 auto;
min-width: 40px;
}
.TabBar>li.TabBar-addServerButton>a{
color: rgba(61,60,64,0.7);
transition: opacity 0.3s ease-in;
}
.TabBar>li.TabBar-addServerButton>a.active{
background-color: transparent;
}
.TabBar>li.TabBar-addServerButton svg{
margin: -2px;
}
.TabBar.darkMode>li.TabBar-addServerButton>a{
color: rgba(243,243,243,0.7);
padding: 5px 12px;
}
.TabBar>li.teamTabItem.active>a, .TabBar>li.teamTabItem.dragging>a {
border: none;
border-radius: 6px 6px 0 0;
color: rgba(61,60,64,1);
background-color: #fff;
color: #3d3c40;
z-index: 9;
}
.TabBar.darkMode>li.teamTabItem.active>a, .TabBar.darkMode>li.teamTabItem.dragging>a {
color: #f3f3f3;
background-color: #323639;
}
.TabBar>li.teamTabItem:not(.active)+.TabBar-addServerButton>a>div.TabBar-tabSeperator {
border-left: 1px solid rgba(61,60,64,0.2);
margin-left: -1px;
background-color: #1f1f1f;
color: #ddd;
}
.TabBar>li.teamTabItem:not(.active)+li.teamTabItem:not(.active)>a>div.TabBar-tabSeperator {
border-left: 1px solid rgba(61,60,64,0.2);
margin-left: -1px;
}
.TabBar.darkMode>li.teamTabItem:not(.active)+.TabBar-addServerButton>a>div.TabBar-tabSeperator {
border-left: 1px solid rgba(243,243,243,0.2);
border-left: 1px solid rgba(61,60,64,0.08);
margin-left: -1px;
}
.TabBar.darkMode>li.teamTabItem:not(.active)+li.teamTabItem:not(.active)>a>div.TabBar-tabSeperator {
border-left: 1px solid rgba(243,243,243,0.2);
border-left: 1px solid rgba(221,221,221,0.08);
margin-left: -1px;
}
@@ -175,74 +124,55 @@
margin-left: 0px;
}
.TabBar>li.teamTabItem:not(.active):not(.disabled)+.TabBar-addServerButton>a:hover>div.TabBar-tabSeperator {
border-left: none;
margin-left: 0px;
}
.TabBar>li.teamTabItem:not(.active):not(.disabled)+li.teamTabItem:not(.active)>a:hover>div.TabBar-tabSeperator {
border-left: none;
margin-left: 0px;
}
.TabBar .TabBar-addServerButton>a {
border: none;
background: transparent;
color: #999;
font-size: 10px;
line-height: 16px;
}
.TabBar.darkMode .TabBar-addServerButton>a {
color: rgba(243,243,243,0.7);
}
.TabBar .TabBar-dot {
background: #579EFF;
background: #196CAF;
float: right;
height: 6px;
width: 6px;
margin-top: 5px;
height: 8px;
width: 8px;
margin-top: 4px;
margin-left: 8px;
border-radius: 4px;
flex: 0 0 6px;
flex: 0 0 8px;
}
.TabBar .TabBar-expired {
float: right;
height: 16px;
width: 16px;
font-size: 18px;
line-height: 12px;
margin-left: 8px;
background-image: url(../../../assets/icon-session-expired.svg);
flex: 0 0 16px;
color: rgba(61,60,64,0.32);
}
.TabBar .TabBar-expired>i::before {
margin: 0;
}
.TabBar.darkMode .TabBar-expired {
filter: invert(100%);
-webkit-filter: invert(100%);
color: rgba(221,221,221,0.32);
}
.TabBar .TabBar-badge {
background: #CB2431;
float: right;
color: white;
font-size: 11px;
text-align: center;
line-height: 18px;
height: 18px;
margin-left: 8px;
border-radius: 100px;
padding: 0 5px;
display: flex;
justify-content: center;
align-items: center;
font-family: "Open Sans", sans-serif;
font-weight: bold;
min-width: 18px;
margin-top: -1px;
letter-spacing: normal;
-webkit-font-smoothing: antialiased;
flex: 1 0 18px;
background: #F74343;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: white;
font-size: 10px;
padding: 0px 5px;
font-family: "Open Sans", sans-serif;
font-weight: bold;
letter-spacing: normal;
-webkit-font-smoothing: antialiased;
margin-left: 6px;
margin-top: 2px;
height: 12px;
}
.TabBar .TabBar-badge.TabBar-badge-nomention:after {

4
src/renderer/css/components/TeamDropdownButton.scss
View File

@@ -56,12 +56,12 @@
top: -4px;
right: -2px;
border: 2px solid #efefef;
height: 16px;
> span {
color: white;
font-size: 10px;
line-height: 11px;
padding: 1px 5px;
padding: 0px 5px;
display: flex;
justify-content: center;
align-items: center;

5
src/types/config.ts
View File

@@ -4,9 +4,12 @@
export type Tab = {
name: string;
order: number;
isClosed?: boolean;
}
export type Team = Tab & {
export type Team = {
name: string;
order: number;
url: string;
lastActiveTab?: number;
}

9
src/types/server.ts Normal file
View File

@@ -0,0 +1,9 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
export type RemoteInfo = {
name: string;
serverVersion?: string;
hasFocalboard?: boolean;
hasPlaybooks?: boolean;
};

2
src/types/utils.ts
View File

@@ -3,7 +3,7 @@
export type ServerFromURL = {
name: string;
url: URL;
url: string;
}
export type Boundaries = {