Redirect not respecting { newContext: true } when using the Redirect.Action.APP action

[ctrlaltdylan]

Unable to open a new tab with the { newContext: true } option passed to Redirect.Action.App

To Reproduce

Below is a simple component that should open the link in a new tab, but it does not:

import { Context } from '@shopify/app-bridge-react'
import { Redirect } from '@shopify/app-bridge/actions';

function ExampleLink() {
  const app = useContext(Context);
  const redirect = Redirect.create(app);

  return (
    <Link
      redirect.dispatch(Redirect.Action.APP, {
        path: "/settings",
        newContext: true,
      });
    />
      Clicking this button should open a new tab, but it does not
    </Link>
  )
}

If applicable, add screenshots to help explain your problem.

Expected behaviour

I expect to be able to use the Redirect.Action.APP with a passed { newContext: true } flag to open a new tab with an internal app page.

Contextual information

Packages and versions

"@shopify/app-bridge-react": "^1.19.0",
"@shopify/app-bridge-utils": "^1.28.0",
"@shopify/polaris": "^4.16.1",

List the relevant packages you’re using, and their versions. For example:

Platform

• OS: Mac
• OS Version: 10.15.7
• App: Chrome

Additional context

Next.js v10

[gching]

Might be related - I also encountered this issue for redirecting and it wasn't opening a new tab for a relative Shopify Admin path Redirect.Action.ADMIN_SECTION, not a relative path in the app Redirect.Action.APP.

This was the faulty code:

redirect.dispatch(Redirect.Action.ADMIN_SECTION, {
  newContext: true,
  name: Redirect.ResourceType.Order,
  resource: {
    id,
  },
})

Then I realized in the documentation there is a slight deviation in expected parameters if newContext is true, which is the sections parameter. This isn't clearly outlined in the documentation for this type of redirect here.

I got it to open in a new tab with the following:

redirect.dispatch(Redirect.Action.ADMIN_SECTION, {
  newContext: true,
  section: {
    name: Redirect.ResourceType.Order,
    resource: {
      id,
    },
  }
})

Don't know if this solves your issue, but it seems like by setting newContext to be true, the expected input parameters are different.

[mckrava]

Solution from @gching works like a charm for me! Thanks!

redirect.dispatch(Redirect.Action.ADMIN_SECTION, {
  newContext: true,
  section: {
    name: Redirect.ResourceType.Product,
    resource: {
      id,
    },
  }
})

But sometime for some random products redirect doesn't work at all. Does this method have any restrictions in product type or something else?

[galmis]

    redirect.dispatch(Redirect.Action.ADMIN_SECTION, {
      section: {
        name: Redirect.ResourceType.Customer,
        resource: {
          id
        }
      },
      newContext: true
    });

The above snippet works everywhere except the iOS POS app.

[iwoodruff]

glad yall found workarounds. i'm closing this issue given that the last activity was 3 years ago