Polaris-react: [Color system] Remove App Bridge

[tmlayton]

Issue summary

The use of Toast, Loading, Modal, Page, and ResourcePicker in an embedded app context is deprecated in favor of @shopify/app-bridge-react. App Bridge usage should be removed entirely in v5.0.0.

[8eecf0d2]

Using Polaris 3.20.0 and the <AppProvider /> component the following deprecation notice appears in the javascript console:

Deprecation: Using `apiKey` and `shopOrigin` on `AppProvider` to initialize the Shopify App Bridge is deprecated.
Support for this will be removed in v5.0. Use `Provider` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/provider

The directions at the provided link do not mention the <AppProvider /> component, which lead me to just replace one with the other.

import { AppProvider } from '@shopify/polaris';

<AppProvider
  apiKey="xxx"
  shopOrigin="yyy"
  theme={...}
/>

import { Provider } from '@shopify/app-bridge-react';

<Provider
  config={{
    apiKey: "xxx",
    shopOrigin: "yyy",
  }}
/>

However this causes Typescript compiler errors:

TS2605: JSX element type 'Provider' is not a constructor function for JSX elements.
TS2607: JSX element class does not support attributes because it does not have a 'props' property.

And the following javascript console errors:

Uncaught Error: The <AppProvider> component is required as of v2.0 of Polaris React.

So the next logical step is to suppress the errors and _wrap_ the <AppProvider /> component within the <Provider /> component.

import { AppProvider } from '@shopify/polaris';
import { Provider } from '@shopify/app-bridge-react';

<Provider
  config={{
    apiKey: "xxx",
    shopOrigin: "yyy",
  }}
>
  <AppProvider
    theme={...}
  />
</Provider>

Which no longer causes javascript console errors ✨so I'm assuming is the intended usage?

Although this didn't take long to figure out, I think it'd be helpful for the original deprecation notice to link to a migration guide / document explaining the wrapping is needed and obviously for the Typescript compile errors to be fixed.

_On the plus side, the Polaris Filters from 3.19.0 work great and look awesome!_

Edit: Actually, based on https://github.com/Shopify/polaris-react/issues/1819 it appears the component wrapping above should be inverted.

[BPScott]

Nice job working that one out @8eecf0d2, you're right that having both providers is the way forward. We'll be writing up some more explicit documentation on how to migrate soon.

Actually, based on #1819 it appears the component wrapping above should be inverted.

It doesn't matter which way around they go - they're independent providers so either way is fine.

[8eecf0d2]

It doesn't matter which way around they go - they're independent providers so either way is fine.

Oh neat!

Additionally, I've started a fresh project and not getting any Typescript compile errors from @shopify/app-bridge-react, pretty safe to assume I'm missing a typescript flag somewhere or need to chuck out my node_modules 😅

[fchienvuhoang]

@tmlayton I have upgrade and using @shopify/app-bridge-react in my project now, but when I using two modal have primaryAction & secondaryActions, modal just get last modal instance, when using without primaryAction & secondaryActions then no problem.

[tmlayton]

@fchienvuhoang Not sure what is happening there. Using primaryAction or secondaryActions should have no impact on the modal instances. Those values are simply transformed and naively passed to app bridge.

[mbaumbach]

@fchienvuhoang @tmlayton It appears to be a bug with the App Bridge React components. I came across that yesterday, see #2009. Is there a better place to submit bugs for @shopify/app-bridge-react?

[tmlayton]

👋 @mbaumbach for now the place is https://community.shopify.com/c/Shopify-APIs-SDKs like you did for #2009. Not great, but that’s it for now.

[tmlayton]

Closed by #2046 and will ship with v5.