Enabling nodeIntegration + Electron 27

.npmrc

@@ -1,3 +1,3 @@
 runtime = electron
 disturl = https://electronjs.org/headers
-target = 25.9.8
+target = 27.3.11

packages/app/manifests/definitions/611.json

@@ -1,7 +1,7 @@
 {
   "name": "MySMS",
   "category": "Communication & Collaboration",
-  "start_url": "https://app.mysms.com/",
+  "start_url": "https://app.mysms.com/#login",
   "icons": [
     {
       "src": "https://cdn.filestackcontent.com/EcHpPyxyQseAdE7M2fws"

packages/app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "station-desktop-app",
   "productName": "Station",
-  "version": "2.7.0-b2",
+  "version": "3.0.0-b2",
   "description": "Station",
   "homepage": "https://getstation.com",
   "author": {
@@ -20,7 +20,7 @@
     "sass": "sass src/theme/scss/app.global.scss src/theme/css/app.global.css",
     "clean-gql-gen": "rm -f src/**/*.generated.ts ||: && rm -f src/**/*.generated.tsx ||:",
     "gql-gen": "yarn run clean-gql-gen && graphql-codegen --config codegen-local.yml",
-    "build-webpack:webui:dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=development webpack --config webpack.config.webui.js --colors --progress --mode=development",
+    "build-webpack:webui:dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=development webpack --config webpack.config.webui.js --colors --no-progress --mode=development",
     "build-webpack:webui:prod": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production webpack --config webpack.config.webui.js --colors --mode=production --no-progress",
     "build-webpack:prod": "yarn run gql-gen && yarn run sass && rimraf dist && cross-env NODE_OPTIONS=--openssl-legacy-provider electron-webpack --no-progress && yarn run build-webpack:webui:prod",
     "clean": "yarn run clean-gql-gen && rimraf dist",
@@ -286,7 +286,7 @@
     "copy-webpack-plugin": "^4.6.0",
     "cross-env": "^6.0.3",
     "css-loader": "^3.2.1",
-    "electron": "25.9.8",
+    "electron": "27.3.11",
     "electron-builder": "^24.9.1",
     "electron-mocha": "^8.1.0",
     "electron-webpack": "^2.8.2",

packages/app/src/app-store/sagas.ts

@@ -183,6 +183,11 @@ export function* getApplicationsByCategory(): SagaIterator {
   return appsByCategory;
 }
 
+export function* getManifestByURL(manifestURL: string): SagaIterator {
+  return listAllApplications()
+    .find(app => getBxAppManifestURL(app.id) === manifestURL);
+}
+
 /**
  * Creates a manifest in data folder
  */

packages/app/src/applications/Application.tsx

@@ -4,7 +4,7 @@
 */
 import * as slack from 'slack';
 import { GradientType, withGradient } from '@getstation/theme';
-import ElectronWebview from 'app/common/components/ElectronWebview';
+import ElectronWebview from '../common/components/ElectronWebview';
 import * as classNames from 'classnames';
 import { clipboard } from 'electron';
 import * as remote from '@electron/remote';
@@ -346,6 +346,8 @@ class ApplicationImpl extends React.PureComponent {
 
     if (js && this.webView && this.webView.view) {
       this.webView.view.executeJavaScript(js);
+      // const webContents = remote.webContents.fromId(this.webView.view.getWebContentsId());
+      // webContents?.executeJavaScriptInIsolatedWorld(999, [{ code: js }]);
     }
     this.setState({ ready: true });
   }
@@ -400,8 +402,6 @@ class ApplicationImpl extends React.PureComponent {
     const tab = this.props.tab;
     const useNativeWindowOpen = !this.props.notUseNativeWindowOpen;
     const tabUrl = tab.get('url', '');
-    const nodeIntegrationEnabled = tabUrl.startsWith('station://')
-
     const {
       applicationId, applicationName, applicationIcon, themeColor, manifestURL,
       askResetApplication, onChooseAccount,
@@ -464,7 +464,7 @@ class ApplicationImpl extends React.PureComponent {
           onDidFailLoad={this.handleDidFailLoad}
           onDomReady={this.handleDomReady}
           onCrashed={this.handleWebcontentsCrashed}
-          webpreferences={`allowRunningInsecureContent=true,nativeWindowOpen=${useNativeWindowOpen},contextIsolation=false,nodeIntegration=${nodeIntegrationEnabled}`}
+          webpreferences={`allowRunningInsecureContent=true,nativeWindowOpen=${useNativeWindowOpen},contextIsolation=true,nodeIntegration=true`}
         />
 
       </div>

packages/app/src/applications/manifest-provider/const/dev.ts

@@ -57,23 +57,3 @@ export const APPLICATIONS_WITH_CUSTOM_SUBDOCK_TITLE: Record<string, { regex: Reg
     },
   ],
 };
-
-// JavaScript Injection
-export const JAVASCRIPT_INJECTIONS = {
-  asana: ['asanaInjectedScript'],
-  gmail: ['gmailInjectedScript'],
-  slack: ['slackInjectedScript'],
-  'station-support': ['slackInjectedScript'],
-  'gdrive-mu': ['gdriveInjectedScript'],
-  'gcalendar-mu': ['gcalendarInjectedScript'],
-  outlook: ['office365InjectedScript'],
-  'office-365': ['office365InjectedScript'],
-  'outlook-pro': ['office365InjectedScript'],
-  'google-keep': ['removeGoogleAccountInjectedScript'],
-  'facebook-messenger': ['messengerInjectedScript'],
-};
-
-// Internal Applications
-export const INTERNAL_APPLICATIONS = [
-  process.env.APP_STORE_MANIFEST_URL!,
-];

packages/app/src/applications/manifest-provider/const/index.ts

@@ -27,7 +27,22 @@ export const SALESFORCE_MANIFEST_URL = consts.SALESFORCE_MANIFEST_URL;
 export const APPLICATIONS_WITH_CUSTOM_SUBDOCK_TITLE = consts.APPLICATIONS_WITH_CUSTOM_SUBDOCK_TITLE;
 
 // JavaScript Injection
-export const JAVASCRIPT_INJECTIONS = consts.JAVASCRIPT_INJECTIONS;
+export const JAVASCRIPT_INJECTIONS = {
+  asana: ['asanaInjectedScript'],
+  gmail: ['gmailInjectedScript'],
+  slack: ['slackInjectedScript'],
+  'station-support': ['slackInjectedScript'],
+  'gdrive-mu': ['removeGoogleAccountInjectedScript'],
+  'gcalendar-mu': ['removeGoogleAccountInjectedScript'],
+  outlook: ['office365InjectedScript'],
+  'office-365': ['office365InjectedScript'],
+  'outlook-pro': ['office365InjectedScript'],
+  'google-keep': ['removeGoogleAccountInjectedScript'],
+  'facebook-messenger': ['messengerInjectedScript'],
+  'whatsapp': ['whatsappInjectedScript'],
+};
 
 // Internal Applications
-export const INTERNAL_APPLICATIONS = consts.INTERNAL_APPLICATIONS;
+export const INTERNAL_APPLICATIONS = [
+  process.env.APP_STORE_MANIFEST_URL!,
+];

packages/app/src/applications/manifest-provider/const/prod.ts

@@ -55,23 +55,3 @@ export const APPLICATIONS_WITH_CUSTOM_SUBDOCK_TITLE: Record<string, { regex: Reg
     },
   ],
 };
-
-// JavaScript Injection
-export const JAVASCRIPT_INJECTIONS = {
-  asana: ['asanaInjectedScript'],
-  gmail: ['gmailInjectedScript'],
-  slack: ['slackInjectedScript'],
-  'station-support': ['slackInjectedScript'],
-  'gdrive-mu': ['gdriveInjectedScript'],
-  'gcalendar-mu': ['gcalendarInjectedScript'],
-  outlook: ['office365InjectedScript'],
-  'office-365': ['office365InjectedScript'],
-  'outlook-pro': ['office365InjectedScript'],
-  'google-keep': ['removeGoogleAccountInjectedScript'],
-  'facebook-messenger': ['messengerInjectedScript'],
-};
-
-// Internal Applications
-export const INTERNAL_APPLICATIONS = [
-  process.env.APP_STORE_MANIFEST_URL!,
-];

packages/app/src/applications/multi-instance-configuration/webui/MultiInstanceConfigurator.tsx

@@ -100,7 +100,8 @@ export default class MultiInstanceConfigurator extends React.Component<Props, St
 
   componentDidMount() {
     const { manifestURL } = this.props;
-    window.bx.manifest.getManifest(manifestURL).then((manifest: BxAppManifest) => {
+    window.bx.manifest.getManifest(manifestURL).then(({ body }) => {
+      const manifest = body;
       const presets = this.getPresets(manifest);
       const selectedPreset = isOnlyOnPremise(presets) ? UndefinedPreset : presets[0];
       this.setState({

packages/app/src/applications/multi-instance-configuration/webui/components/ChooseIdentityForm.tsx

@@ -2,7 +2,6 @@ import { Button, Size, Style } from '@getstation/theme';
 import * as React from 'react';
 // @ts-ignore: no declaration file
 import injectSheet from 'react-jss';
-import { Subscription } from 'rxjs';
 import { identitiesStyle, IdentitiesStylesType } from './styles';
 
 export interface Props {
@@ -29,8 +28,6 @@ export default class ChooseIdentityForm extends React.PureComponent<Props, State
     help: 'Choose an account',
   };
 
-  private subscription: Subscription;
-
   constructor(props: Props) {
     super(props);
     this.state = {
@@ -47,19 +44,18 @@ export default class ChooseIdentityForm extends React.PureComponent<Props, State
     this.props.onRequestSignin();
   }
 
-  // tslint:disable-next-line:function-name
-  UNSAFE_componentWillMount() {
-    this.subscription = window.bx.identities.$get.subscribe(identities => {
-      this.setState({
-        identities,
-      });
+  onIdentitiesChanged = (_: any, identities: any) => {
+    this.setState({
+      identities,
     });
   }
 
+  UNSAFE_componentWillMount() {
+    window.bx.identities.addIdentitiesChangeListener(this.onIdentitiesChanged);
+  }
+
   componentWillUnmount() {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-    }
+    window.bx.identities.removeIdentitiesChangeListener(this.onIdentitiesChanged);
   }
 
   render() {

packages/app/src/applications/multi-instance-configuration/webui/index.tsx

@@ -1,6 +1,8 @@
 import { BrowserXThemeProvider } from '@getstation/theme';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { Subject } from 'rxjs';
+
 // tslint:disable-next-line:no-import-side-effect
 import '../../../theme/css/app.global.css';
 import { getSearchParams } from '../../../webui/helpers';
@@ -11,9 +13,14 @@ const params = getSearchParams();
 const manifestURL = params.get('manifestURL')!;
 const applicationId = params.get('applicationId')!;
 
+const themeColorsObservable = new Subject<any>();
+window.bx.theme.addThemeColorsChangeListener(
+  (_: any, result: any) => themeColorsObservable.next(result)
+);
+
 ReactDOM.render(
   <BrowserXThemeProvider>
-    <WebUIGradientProvider themeColorsObservable={window.bx.theme.themeColors}>
+    <WebUIGradientProvider themeColorsObservable={themeColorsObservable}>
       <MultiInstanceConfigurator
         applicationId={applicationId}
         manifestURL={manifestURL}

packages/app/src/notification-center/webview-preload.ts

@@ -1,5 +1,4 @@
 /* tslint:disable:function-name */
-import { ipcRenderer } from 'electron';
 import * as shortid from 'shortid';
 import { EventTarget } from 'event-target-shim';
 
@@ -67,12 +66,18 @@ export class BxNotification extends EventTarget('click', 'error', 'close', 'show
     });
 
     this._registerIPC();
-    ipcRenderer.send('new-notification', this.id, {
+    window.bx.notificationCenter.sendNotification(this.id, {
       timestamp: this.timestamp,
       title: this.title,
       body: this.body,
       icon: this.icon,
     });
+    // ipcRenderer.send('new-notification', this.id, {
+    //   timestamp: this.timestamp,
+    //   title: this.title,
+    //   body: this.body,
+    //   icon: this.icon,
+    // });
   }
 
   static requestPermission(deprecatedCallback?: NotificationPermissionCallback): Promise<NotificationPermission> {
@@ -82,15 +87,18 @@ export class BxNotification extends EventTarget('click', 'error', 'close', 'show
   }
 
   close() {
-    ipcRenderer.send('notification-close', this.id);
+    window.bx.notificationCenter.closeNotification(this.id);
+    // ipcRenderer.send('notification-close', this.id);
   }
 
   _registerIPC() {
-    ipcRenderer.on('trigger-notification-click', this._handleNotificationClickIPC);
+    window.bx.notificationCenter.addNotificationClickListener(this._handleNotificationClickIPC);
+    // ipcRenderer.on('trigger-notification-click', this._handleNotificationClickIPC);
   }
 
   _unregisterIPC() {
-    ipcRenderer.removeListener('trigger-notification-click', this._handleNotificationClickIPC);
+    window.bx.notificationCenter.removeNotificationClickListener(this._handleNotificationClickIPC);
+    // ipcRenderer.removeListener('trigger-notification-click', this._handleNotificationClickIPC);
   }
 
   _handleNotificationClickIPC = (_e: Event, notificationId: string) => {

packages/app/src/plugins/bxapi.d.ts

@@ -1,3 +1,4 @@
+import { IpcRendererEvent } from 'electron';
 import { Observable } from 'rxjs';
 import { ApplicationConfigData } from '../applications/duck';
 import { MinimalApplication } from '../applications/graphql/withApplications';
@@ -87,23 +88,21 @@ declare module BxAPI {
    * @since 1.11.0
    */
   interface Theme {
-    /**
-     * themeColors
-     * @since 1.11.0
-     */
-    themeColors: ObservableResponse<string[]>,
+    addThemeColorsChangeListener(listener: (event: IpcRendererEvent, themeColors: string[]) => void): void;
   }
 
   /**
    * NotificationCenter
    * @since 1.12.0
    */
   interface NotificationCenter {
-    /**
-     * snoozeDurationInMs
-     * @since 1.12.0
-     */
-    snoozeDurationInMs: ObservableResponse<string | undefined>,
+    addSnoozeDurationInMsChangeListener(listener: (event: IpcRendererEvent, duration: string | undefined) => void): void;
+
+    sendNotification(id: string, notification: any);
+    closeNotification(id: string);
+
+    addNotificationClickListener(listener: (event: IpcRendererEvent, notificationId: string) => void): void;
+    removeNotificationClickListener(listener: (event: IpcRendererEvent, notificationId: string) => void): void;
   }
 
   /**
@@ -134,7 +133,7 @@ declare module BxAPI {
   }
 
   interface Manifest {
-    getManifest(manifestURL: string): Promise<BxAppManifest>,
+    getManifest(manifestURL: string): Promise<{ body: BxAppManifest }>,
   }
 
   interface Applications {
@@ -151,7 +150,9 @@ declare module BxAPI {
   }
 
   interface Identities {
-    $get: ObservableResponse<any>,
+    addIdentitiesChangeListener(listener: (event: IpcRendererEvent, identities: any[]) => void): void;
+    removeIdentitiesChangeListener(listener: (event: IpcRendererEvent, identities: any[]) => void): void;
+
     requestLogin(provider: AuthProviders): Promise<any>,
   }
 }
@@ -172,5 +173,7 @@ interface Bx {
 }
 
 declare global {
-  interface Window { bx: Bx; }
+  interface Window { 
+    bx: Bx;
+  }
 }