[Frame] Refactor to use createContext API

UNRELEASED-V4.md

@@ -23,5 +23,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Code quality
 
 - Upgraded the `Banner`, `Card`, and `Modal` components from legacy context API to use createContext ([#786](https://github.com/Shopify/polaris-react/pull/786))
+- Refactored `Frame` and its subcomponents to use the `createContext` API instead of legacy context ([#803](https://github.com/Shopify/polaris-react/pull/803))
 
 ### Deprecations

src/components/ContextualSaveBar/ContextualSaveBar.tsx

@@ -1,32 +1,38 @@
 import * as React from 'react';
+import compose from '@shopify/react-compose';
 import isEqual from 'lodash/isEqual';
-import {
-  ContextualSaveBarProps,
-  FrameContext,
-  frameContextTypes,
-} from '../Frame';
+import {ContextualSaveBarProps, FrameContext, Consumer} from '../Frame';
+import withContext from '../WithContext';
+import {WithContextTypes} from '../../types';
+import {withAppProvider, WithAppProviderProps} from '../AppProvider';
 
 // The script in the styleguide that generates the Props Explorer data expects
 // a component's props to be found in the Props interface. This silly workaround
 // ensures that the Props Explorer table is generated correctly, instead of
 // crashing if we write `ContextualSaveBar extends React.Component<ContextualSaveBarProps>`
 interface Props extends ContextualSaveBarProps {}
+export type ComposedProps = Props &
+  WithAppProviderProps &
+  WithContextTypes<FrameContext>;
 
-class ContextualSaveBar extends React.PureComponent<Props, never> {
-  static contextTypes = frameContextTypes;
-  context: FrameContext;
-
+class ContextualSaveBar extends React.PureComponent<ComposedProps, never> {
   componentDidMount() {
-    this.context.frame.setContextualSaveBar(this.props);
+    const {
+      props: {polaris, context, ...rest},
+    } = this;
+    context.frame.setContextualSaveBar(rest);
   }
 
   componentWillUnmount() {
-    this.context.frame.removeContextualSaveBar();
+    this.props.context.frame.removeContextualSaveBar();
   }
 
-  componentDidUpdate(oldProps: Props) {
-    if (contextualSaveBarHasChanged(this.props, oldProps)) {
-      this.context.frame.setContextualSaveBar(this.props);
+  componentDidUpdate(oldProps: ComposedProps) {
+    const {
+      props: {polaris, context, ...rest},
+    } = this;
+    if (contextualSaveBarHasChanged(rest, oldProps)) {
+      context.frame.setContextualSaveBar(rest);
     }
   }
 
@@ -50,4 +56,7 @@ function contextualSaveBarHasChanged(
   );
 }
 
-export default ContextualSaveBar;
+export default compose<Props>(
+  withContext<Props, WithAppProviderProps, FrameContext>(Consumer),
+  withAppProvider(),
+)(ContextualSaveBar);

src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import {mountWithAppProvider} from 'test-utilities';
 import {noop} from '../../../utilities/other';
 import ContextualSaveBar from '../ContextualSaveBar';
+import {Provider, createFrameContext} from '../../Frame';
 
 describe('<ContextualSaveBar />', () => {
   const props = {
@@ -12,58 +12,87 @@ describe('<ContextualSaveBar />', () => {
   };
 
   it('calls the contextual save bar on mount with correct values', () => {
-    const {frame} = mountWithContext(<ContextualSaveBar {...props} />);
-    expect(frame.setContextualSaveBar).toHaveBeenCalledWith({
+    const mockFrameContext = createFrameContext({
+      setContextualSaveBar: jest.fn(),
+      removeContextualSaveBar: jest.fn(),
+    });
+
+    mountWithAppProvider(
+      <Provider value={mockFrameContext}>
+        <ContextualSaveBar {...props} />
+      </Provider>,
+    );
+    expect(mockFrameContext.frame.setContextualSaveBar).toHaveBeenCalledWith({
       ...props,
     });
   });
 
   it('removes the contextual save bar on unmount', () => {
-    const {contextualSaveBar, frame} = mountWithContext(
-      <ContextualSaveBar {...props} />,
+    const mockFrameContext = createFrameContext({
+      setContextualSaveBar: jest.fn(),
+      removeContextualSaveBar: jest.fn(),
+    });
+
+    const frame = mountWithAppProvider(
+      <Provider value={mockFrameContext}>
+        <ContextualSaveBar {...props} />
+      </Provider>,
     );
-    expect(frame.removeContextualSaveBar).not.toHaveBeenCalled();
-    contextualSaveBar.unmount();
-    expect(frame.removeContextualSaveBar).toHaveBeenCalled();
+    expect(
+      mockFrameContext.frame.removeContextualSaveBar,
+    ).not.toHaveBeenCalled();
+    frame.unmount();
+    expect(mockFrameContext.frame.removeContextualSaveBar).toHaveBeenCalled();
   });
 
   it('calls the contextual save bar with correct values if its props change after it mounted', () => {
-    const {frame, contextualSaveBar} = mountWithContext(
-      <ContextualSaveBar {...props} />,
+    const mockFrameContext = createFrameContext({
+      setContextualSaveBar: jest.fn(),
+      removeContextualSaveBar: jest.fn(),
+    });
+
+    const frame = mountWithAppProvider(
+      <Provider value={mockFrameContext}>
+        <ContextualSaveBar {...props} />
+      </Provider>,
     );
-    expect(frame.setContextualSaveBar).toHaveBeenCalledTimes(1);
     const newProps = {
       saveAction: {content: 'Save', onAction: noop, loading: true},
       discardAction: {content: 'Discard', onAction: noop},
       message: 'Unsaved changes',
     };
-    contextualSaveBar.setProps({...newProps});
-    expect(frame.setContextualSaveBar).toHaveBeenCalledWith({
+    frame.setProps({
+      children: <ContextualSaveBar {...newProps} />,
+    });
+    expect(mockFrameContext.frame.setContextualSaveBar).toHaveBeenCalledWith({
       ...newProps,
     });
-    expect(frame.setContextualSaveBar).toHaveBeenCalledTimes(2);
+    expect(mockFrameContext.frame.setContextualSaveBar).toHaveBeenCalledTimes(
+      2,
+    );
   });
 
   it('doesnt call the contextual save bar if its props remain unchanged after it mounted', () => {
-    const {frame, contextualSaveBar} = mountWithContext(
-      <ContextualSaveBar {...props} />,
+    const mockFrameContext = createFrameContext({
+      setContextualSaveBar: jest.fn(),
+      removeContextualSaveBar: jest.fn(),
+    });
+
+    const frame = mountWithAppProvider(
+      <Provider value={mockFrameContext}>
+        <ContextualSaveBar {...props} />
+      </Provider>,
+    );
+
+    expect(mockFrameContext.frame.setContextualSaveBar).toHaveBeenCalledTimes(
+      1,
     );
-    expect(frame.setContextualSaveBar).toHaveBeenCalledTimes(1);
     const newProps = {...props};
-    contextualSaveBar.setProps({...newProps});
-    expect(frame.setContextualSaveBar).toHaveBeenCalledTimes(1);
+    frame.setProps({
+      children: <ContextualSaveBar {...newProps} />,
+    });
+    expect(mockFrameContext.frame.setContextualSaveBar).toHaveBeenCalledTimes(
+      1,
+    );
   });
 });
-
-function mountWithContext(element: React.ReactElement<any>) {
-  const frame = {
-    setContextualSaveBar: jest.fn(),
-    removeContextualSaveBar: jest.fn(),
-  };
-  const contextualSaveBar = mountWithAppProvider(element, {
-    context: {frame},
-    childContextTypes: {frame: PropTypes.any},
-  });
-
-  return {contextualSaveBar, frame};
-}

src/components/Frame/Frame.tsx

@@ -14,10 +14,10 @@ import {setRootProperty} from '../../utilities/setRootProperty';
 import {
   ContextualSaveBarProps,
   FrameContext,
-  frameContextTypes,
-  ToastProps,
+  ToastID,
+  ToastPropsWithID,
 } from './types';
-import {ToastManager, Loading, ContextualSaveBar} from './components';
+import {Provider, ToastManager, Loading, ContextualSaveBar} from './components';
 
 import * as styles from './Frame.scss';
 
@@ -41,7 +41,7 @@ export interface State {
   skipFocused?: boolean;
   globalRibbonHeight: number;
   loadingStack: number;
-  toastMessages: (ToastProps & {id: string})[];
+  toastMessages: (ToastPropsWithID)[];
   showContextualSaveBar: boolean;
 }
 
@@ -54,8 +54,6 @@ const APP_FRAME_LOADING_BAR = 'AppFrameLoadingBar';
 export type CombinedProps = Props & WithAppProviderProps;
 
 export class Frame extends React.PureComponent<CombinedProps, State> {
-  static childContextTypes = frameContextTypes;
-
   state: State = {
     skipFocused: false,
     globalRibbonHeight: 0,
@@ -69,19 +67,6 @@ export class Frame extends React.PureComponent<CombinedProps, State> {
 
   private globalRibbonContainer: HTMLDivElement | null = null;
 
-  getChildContext(): FrameContext {
-    return {
-      frame: {
-        showToast: this.showToast,
-        hideToast: this.hideToast,
-        startLoading: this.startLoading,
-        stopLoading: this.stopLoading,
-        setContextualSaveBar: this.setContextualSaveBar,
-        removeContextualSaveBar: this.removeContextualSaveBar,
-      },
-    };
-  }
-
   componentDidMount() {
     this.handleResize();
     if (this.props.globalRibbon) {
@@ -240,28 +225,30 @@ export class Frame extends React.PureComponent<CombinedProps, State> {
       ) : null;
 
     return (
-      <div
-        className={frameClassName}
-        {...layer.props}
-        {...navigationAttributes}
-      >
-        {skipMarkup}
-        {topBarMarkup}
-        {contextualSaveBarMarkup}
-        {loadingMarkup}
-        {navigationOverlayMarkup}
-        {navigationMarkup}
-        <main
-          className={styles.Main}
-          id={APP_FRAME_MAIN}
-          data-has-global-ribbon={Boolean(globalRibbon)}
+      <Provider value={this.getContext}>
+        <div
+          className={frameClassName}
+          {...layer.props}
+          {...navigationAttributes}
         >
-          <div className={styles.Content}>{children}</div>
-        </main>
-        <ToastManager toastMessages={toastMessages} />
-        {globalRibbonMarkup}
-        <EventListener event="resize" handler={this.handleResize} />
-      </div>
+          {skipMarkup}
+          {topBarMarkup}
+          {contextualSaveBarMarkup}
+          {loadingMarkup}
+          {navigationOverlayMarkup}
+          {navigationMarkup}
+          <main
+            className={styles.Main}
+            id={APP_FRAME_MAIN}
+            data-has-global-ribbon={Boolean(globalRibbon)}
+          >
+            <div className={styles.Content}>{children}</div>
+          </main>
+          <ToastManager toastMessages={toastMessages} />
+          {globalRibbonMarkup}
+          <EventListener event="resize" handler={this.handleResize} />
+        </div>
+      </Provider>
     );
   }
 
@@ -289,7 +276,7 @@ export class Frame extends React.PureComponent<CombinedProps, State> {
   }
 
   @autobind
-  private showToast(toast: {id: string} & ToastProps) {
+  private showToast(toast: ToastPropsWithID) {
     this.setState(({toastMessages}: State) => {
       const hasToastById =
         toastMessages.find(({id}) => id === toast.id) != null;
@@ -300,7 +287,7 @@ export class Frame extends React.PureComponent<CombinedProps, State> {
   }
 
   @autobind
-  private hideToast({id}: {id: string}) {
+  private hideToast({id}: ToastID) {
     this.setState(({toastMessages}: State) => {
       return {
         toastMessages: toastMessages.filter(({id: toastId}) => id !== toastId),
@@ -390,6 +377,20 @@ export class Frame extends React.PureComponent<CombinedProps, State> {
       this.handleNavigationDismiss();
     }
   }
+
+  @autobind
+  get getContext(): FrameContext {
+    return {
+      frame: {
+        showToast: this.showToast,
+        hideToast: this.hideToast,
+        startLoading: this.startLoading,
+        stopLoading: this.stopLoading,
+        setContextualSaveBar: this.setContextualSaveBar,
+        removeContextualSaveBar: this.removeContextualSaveBar,
+      },
+    };
+  }
 }
 
 const navTransitionClasses = {

src/components/Frame/components/Context/Context.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import {noop} from '@shopify/javascript-utilities/other';
+import {FrameContext} from '../../types';
+
+const defaultContext: FrameContext = {
+  frame: {
+    showToast: noop,
+    hideToast: noop,
+    setContextualSaveBar: noop,
+    removeContextualSaveBar: noop,
+    startLoading: noop,
+    stopLoading: noop,
+  },
+};
+
+const {Provider, Consumer} = React.createContext<FrameContext>(defaultContext);
+
+export {Provider, Consumer};

src/components/Frame/components/Context/index.ts

@@ -0,0 +1 @@
+export {Provider, Consumer} from './Context';

src/components/Frame/components/ToastManager/ToastManager.tsx

@@ -4,13 +4,13 @@ import {autobind} from '@shopify/javascript-utilities/decorators';
 import {classNames} from '@shopify/react-utilities/styles';
 import EventListener from '../../../EventListener';
 import Portal from '../../../Portal';
-import {ToastProps} from '../../types';
+import {ToastPropsWithID} from '../../types';
 import Toast from '../Toast';
 
 import * as styles from './ToastManager.scss';
 
 export interface Props {
-  toastMessages: (ToastProps & {id: string})[];
+  toastMessages: (ToastPropsWithID)[];
 }
 
 export default class ToastManager extends React.PureComponent<Props, never> {

src/components/Frame/components/index.ts

@@ -5,3 +5,4 @@ export {
 } from './ToastManager';
 export {default as Loading, Props as LoadingProps} from './Loading';
 export {default as ContextualSaveBar} from './ContextualSaveBar';
+export {Provider, Consumer} from './Context';