chore: refactor app.tsx. Fixes argoproj#9810 (argoproj#10867)

Signed-off-by: Tianchu Zhao <[email protected]>

ui/src/app/app.tsx

@@ -1,51 +1,27 @@
 import {NavigationManager, NotificationsManager, PopupManager} from 'argo-ui';
 
 import {createBrowserHistory} from 'history';
-import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import {AppRouter} from './app-router';
 import {ContextApis, Provider} from './shared/context';
 
 const history = createBrowserHistory();
 
-export class App extends React.Component<{}> {
-    public static childContextTypes = {
-        history: PropTypes.object,
-        apis: PropTypes.object
-    };
-
-    private readonly popupManager: PopupManager;
-    private readonly notificationsManager: NotificationsManager;
-    private readonly navigationManager: NavigationManager;
+export const App = () => {
+    const popupManager: PopupManager = new PopupManager();
+    const notificationsManager: NotificationsManager = new NotificationsManager();
+    const navigationManager: NavigationManager = new NavigationManager(history);
 
-    constructor(props: {}) {
-        super(props);
-        this.popupManager = new PopupManager();
-        this.notificationsManager = new NotificationsManager();
-        this.navigationManager = new NavigationManager(history);
-    }
-
-    public render() {
-        const providerContext: ContextApis = {
-            notifications: this.notificationsManager,
-            popup: this.popupManager,
-            navigation: this.navigationManager,
-            history
-        };
-        return (
-            <Provider value={providerContext}>
-                <AppRouter history={history} notificationsManager={this.notificationsManager} popupManager={this.popupManager} />
-            </Provider>
-        );
-    }
+    const providerContext: ContextApis = {
+        notifications: notificationsManager,
+        popup: popupManager,
+        navigation: navigationManager,
+        history
+    };
 
-    public getChildContext() {
-        return {
-            history,
-            apis: {
-                popup: this.popupManager,
-                notifications: this.notificationsManager
-            }
-        };
-    }
-}
+    return (
+        <Provider value={providerContext}>
+            <AppRouter history={history} notificationsManager={notificationsManager} popupManager={popupManager} />
+        </Provider>
+    );
+};

ui/src/app/workflows/components/workflows-toolbar/workflows-toolbar.tsx

@@ -1,8 +1,7 @@
 import {NotificationType} from 'argo-ui';
-import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import {Workflow} from '../../../../models';
-import {AppContext, Consumer} from '../../../shared/context';
+import {Consumer} from '../../../shared/context';
 import * as Actions from '../../../shared/workflow-operations-map';
 import {WorkflowOperation, WorkflowOperationAction} from '../../../shared/workflow-operations-map';
 
@@ -22,11 +21,6 @@ interface WorkflowGroupAction extends WorkflowOperation {
 }
 
 export class WorkflowsToolbar extends React.Component<WorkflowsToolbarProps, {}> {
-    public static contextTypes = {
-        router: PropTypes.object,
-        apis: PropTypes.object
-    };
-
     constructor(props: WorkflowsToolbarProps) {
         super(props);
     }
@@ -60,7 +54,7 @@ export class WorkflowsToolbar extends React.Component<WorkflowsToolbarProps, {}>
             promises.push(
                 action(wf).catch(() => {
                     this.props.loadWorkflows();
-                    this.appContext.apis.notifications.show({
+                    ctx.notifications.show({
                         content: `Unable to ${title} workflow`,
                         type: NotificationType.Error
                     });
@@ -85,7 +79,7 @@ export class WorkflowsToolbar extends React.Component<WorkflowsToolbarProps, {}>
                     return this.performActionOnSelectedWorkflows(ctx, action.title, action.action).then(confirmed => {
                         if (confirmed) {
                             this.props.clearSelection();
-                            this.appContext.apis.notifications.show({
+                            ctx.notifications.show({
                                 content: `Performed '${action.title}' on selected workflows.`,
                                 type: NotificationType.Success
                             });
@@ -113,8 +107,4 @@ export class WorkflowsToolbar extends React.Component<WorkflowsToolbarProps, {}>
         }
         return actionButtons;
     }
-
-    private get appContext(): AppContext {
-        return this.context as AppContext;
-    }
 }