refactor: upgrade rxjs (argoproj#105)

Signed-off-by: Alexander Matyushentsev <[email protected]>

package.json

@@ -30,7 +30,7 @@
         "react-helmet": "^6.1.0",
         "react-router-dom": "^4.2.2",
         "react-toastify": "^5.0.1",
-        "rxjs": "^5.5.11",
+        "rxjs": "^6.6.6",
         "typescript": "^4.0.3",
         "xterm": "2.4.0"
     },

src/components/dropdown/dropdown.tsx

@@ -1,7 +1,8 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, fromEvent, merge, Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
 
 export interface DropDownProps {
     isMenu?: boolean;
@@ -58,14 +59,14 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     }
 
     public componentWillMount() {
-        this.subscriptions = [Observable.merge(
-            dropDownOpened.filter((dropdown) => dropdown !== this),
-            Observable.fromEvent(document, 'click').filter((event: Event) => {
+        this.subscriptions = [merge(
+            dropDownOpened.pipe(filter((dropdown) => dropdown !== this)),
+            fromEvent(document, 'click').pipe(filter((event: Event) => {
                 return this.content && this.state.opened && !this.content.contains(event.target as Node) && !this.el.contains(event.target as Node);
-            }),
+            })),
         ).subscribe(() => {
             this.close();
-        }), Observable.fromEvent(document, 'scroll', true).subscribe(() => {
+        }), fromEvent(document, 'scroll', {passive: true}).subscribe(() => {
             if (this.state.opened && this.content && this.el) {
                 this.setState(this.refreshState());
             }

src/components/popup/popup-manager.spec.tsx

@@ -1,5 +1,6 @@
 import { mount } from 'enzyme';
-import {Observable, TestScheduler} from 'rxjs';
+import {from} from 'rxjs';
+import {TestScheduler} from 'rxjs/testing';
 import { Popup, PopupProps } from './popup';
 import {PopupManager} from './popup-manager';
 
@@ -18,7 +19,7 @@ describe('PopupManager', () => {
             const fn = jest.fn<void, [null | PopupProps]>();
             const manager = new PopupManager();
 
-            Observable.from(manager.popupProps, scheduler).subscribe(fn);
+            from(manager.popupProps, scheduler).subscribe(fn);
             scheduler.flush();
 
             expect(fn).toHaveBeenCalledTimes(1);

src/components/select/select.tsx

@@ -1,6 +1,7 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
-import { Observable, Subscription } from 'rxjs';
+import { fromEvent, Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
 
 import { Checkbox } from '../checkbox';
 
@@ -59,9 +60,9 @@ export class Select extends React.Component<SelectProps, State> {
     }
 
     public componentDidMount() {
-        this.subscription = Observable.fromEvent<MouseEvent>(document, 'click')
-            .filter((event) => !!this.el && !this.el.contains(event.target as Node) && this.state.opened)
-            .subscribe(() => this.setState({ opened: false }));
+        this.subscription = fromEvent<MouseEvent>(document, 'click').pipe(
+                filter((event) => !!this.el && !this.el.contains(event.target as Node) && this.state.opened),
+            ).subscribe(() => this.setState({ opened: false }));
     }
 
     public componentWillUnmount() {

src/components/ticker.tsx

@@ -1,6 +1,6 @@
 import * as moment from 'moment';
 import * as React from 'react';
-import {Observable, Subscription} from 'rxjs';
+import {interval, Subscription} from 'rxjs';
 
 export class Ticker extends React.Component<{intervalMs?: number, disabled?: boolean, children?: ((time: moment.Moment) => React.ReactNode)}, {time: moment.Moment}> {
 
@@ -28,7 +28,7 @@ export class Ticker extends React.Component<{intervalMs?: number, disabled?: boo
         if (this.props.disabled) {
             this.ensureUnsubscribed();
         } else if (!this.subscription) {
-            this.subscription = Observable.interval(this.props.intervalMs || 1000).subscribe(() => this.setState({ time: moment() }));
+            this.subscription = interval(this.props.intervalMs || 1000).subscribe(() => this.setState({ time: moment() }));
         }
     }
 

src/components/utils.ts

@@ -1,4 +1,4 @@
-import { Observable } from 'rxjs';
+import { from, Observable } from 'rxjs';
 
 export function isPromise<T>(obj: any): obj is PromiseLike<T> {
     return !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';
@@ -46,9 +46,9 @@ export const Utils = {
 
     toObservable<T>(val: T | Observable<T> | Promise<T>): Observable<T> {
         const observable = val as Observable<T>;
-        if (observable && observable.subscribe && observable.catch) {
+        if (observable && observable.subscribe && observable.forEach) {
             return observable as Observable<T>;
         }
-        return Observable.from([val as T]);
+        return from([val as T]);
     },
 };

src/tsconfig.json

@@ -12,6 +12,9 @@
         "lib": [
             "es2017",
             "dom"
+        ],
+        "typeRoots": [
+            "../node_modules/@types"
         ]
     },
     "include": [

stories/page.tsx

@@ -3,7 +3,8 @@ import { storiesOf } from '@storybook/react';
 import createHistory from 'history/createBrowserHistory';
 import * as React from 'react';
 import { Route, Router } from 'react-router';
-import { Observable } from 'rxjs';
+import { timer } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 import { Layout, Page } from '../src/components';
 
@@ -93,7 +94,7 @@ storiesOf('Page', module)
         <Router history={history}>
             <Route path={location.pathname}>
                 <Layout navItems={navItems}>
-                    <Page title='Hello world!' toolbar={Observable.timer(0, 1000).map(() => ({ breadcrumbs: [{title: 'hello ' + new Date().toLocaleTimeString()}] }))}>
+                    <Page title='Hello world!' toolbar={timer(0, 1000).pipe(map(() => ({ breadcrumbs: [{title: 'hello ' + new Date().toLocaleTimeString()}] })))}>
                         <div style={{padding: '1em'}}>
                             <div className='white-box'>
                                 Hello world!

yarn.lock

@@ -12106,20 +12106,20 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
-rxjs@^5.5.11:
-  version "5.5.12"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.12.tgz#6fa61b8a77c3d793dbaf270bee2f43f652d741cc"
-  integrity sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==
-  dependencies:
-    symbol-observable "1.0.1"
-
 rxjs@^6.5.3, rxjs@^6.6.0:
   version "6.6.3"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.3.tgz#8ca84635c4daa900c0d3967a6ee7ac60271ee552"
   integrity sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==
   dependencies:
     tslib "^1.9.0"
 
+rxjs@^6.6.6:
+  version "6.6.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
+  dependencies:
+    tslib "^1.9.0"
+
 [email protected]:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
@@ -13096,10 +13096,6 @@ svgpath@^2.1.5:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/svgpath/-/svgpath-2.2.1.tgz#0834bb67c89a76472b2bd06cc101fa7b517b222c"
 
-[email protected]:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
-
 symbol-observable@^1.0.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"