Dynamically Open a Modal - Polaris App Bridge React

[HunkyBill]

I am importing the Modal from Polaris and App Bridge React Component.

import { Context, Modal } from '@shopify/app-bridge-react';

In my function I get the App Bridge context and setup a basic Modal with options, where the src is an image.

export default function ResourceListing() {
  // appBridge is super important here!
  const appBridge = useContext(Context)

So in a callback handler that has the image I am trying to open an Modal... but the Typescript tells me I cannot. The Modal.create is not a known function. So how does one open an App Bridge Model dynamically like this?

const handleClick = useCallback((imageSrc) => {
    console.log("The image to popup into a modal is ", imageSrc);
    // so can we popup a modal here? 
    const modalOptions = {
      title: 'My Modal',
      message: 'Hello world!',
      src: imageSrc
    };

    const myModal = Modal.create(appBridge, modalOptions);
    myModal.dispatch(Modal.Action.OPEN);
  })

TypeError: _shopify_app_bridge_react__WEBPACK_IMPORTED_MODULE_3__.Modal.create is not a function2 resourceListing.js:122

OK.. so I switched to the Modal from '@shopify/app-bridge/actions'  which did open, and apparently the Modal worked to cover the entire screen... so that is good!

But now I cannot use the src property as only an URL is supported. So I provided the URL to the image, but the App refuses to show it as it is not whitelisted?

What is that?

I guess my main question is. I have a Resource List with 100 items, and each item has an image from the CDN. So I have 100 originalSrc URLS pointing at the CDN. When the merchant clicks on any one Thumbnail image, I just want to popup a Modal with the large image. How do I do that with this component?

[HunkyBill]

A question to Shopify Polaris React team. If I embed a component Modal in a ResourceItem, with the open prop set to false, and the src set to the image I want as content, and render a list of 100 items say, what happens if I set the open prop to true? I know I could experiment with that, but my thoughts are that chaos would ensue? Would 100 Modals all try and render, or would only 1?

If I render only one Modal in the ResourceList itself (or the HOC Page or Layout), and I set the src to be a specific ResourceItem image, and then I set the open prop to true, would that do the trick? 

Ok. So I chose to use Modal in App Bridge React this time, the wrapped one from App Bridge Actions, and got the same problem. I provide the src prop to the CDN image I want to display, and BOOM, App Bridge blows out as the underlying prop is actually still just URL and therefore the CDN is not whitelisted, and therefore, Houston, we have a problem.

Was it intentional for Shopify to deny Shopify Apps to show Shopify assets to Shopify merchants as a convenience like this? What is the recommended pattern here please. !!!

uncaught exception: AppBridgeError: APP::ERROR::INVALID_OPTIONS: `unsafe_origin` thrown for path: ['url'] and value: `https://cdn.shopify.com/s/files/1/2056/9273/products/sw-1354b_02.jpg?v=1581741971` with message: Provided value is not whitelisted  

My BEST GUESS is this. You are forcing me to now build out a <Router> in which I dish out some relative page like /media, which would safely be rendering in the Modal component, as have that component in the /media route be smart enough to accept the image from the CDN as data, and thus render a standard HTML img element with the source provided to it. Wow. Nothing like adding another zillion LOC to show off an image. JS is so PHAT.

[HunkyBill · Accepted solution]

never mind. It was simple. just passed the params in the query. OOPSIE>