[Admin Actions Extension] Cannot navigate programmatically by using the custom protocols

Jolsty commented 10 months ago

Please list the package(s) involved in the issue, and include the version you are using

Shopify Remix App dependencies

 "dependencies": {
    "@prisma/client": "^4.13.0",
    "@remix-run/dev": "^2.0.0",
    "@remix-run/node": "^2.0.0",
    "@remix-run/react": "^2.0.0",
    "@remix-run/serve": "^2.0.0",
    "@shopify/app": "3.51.1",
    "@shopify/cli": "3.51.1",
    "@shopify/polaris": "^12.0.0",
    "@shopify/shopify-api": "^8.0.2",
    "@shopify/shopify-app-remix": "^2.1.0",
    "@shopify/shopify-app-session-storage-prisma": "^2.0.0",
    "isbot": "latest",
    "prisma": "^4.13.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/eslint-config": "^2.0.0",
    "@shopify/app-bridge-types": "^0.0.3",
    "@types/eslint": "^8.40.0",
    "@types/node": "^20.6.3",
    "@types/react": "^18.2.31",
    "@types/react-dom": "^18.2.14",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^8.8.0",
    "prettier": "^2.8.8",
    "typescript": "^5.2.2"
  },

Extension dependencies

{
  "dependencies": {
    "react": "^18.0.0",
    "@shopify/ui-extensions": "2023.10.x",
    "@shopify/ui-extensions-react": "2023.10.x"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "react-reconciler": "0.29.0"
  }
}

Extension TOML configuration

api_version = "2023-10"

[[extensions]]
# Change the merchant-facing name of the extension in locales/en.default.json
name = "t:name"
handle = "plp-admin-action"
type = "ui_extension"
[[extensions.targeting]]
module = "./src/ActionExtension.tsx"
# The target used here must match the target used in the module file (./src/ActionExtension.tsx)
target = "admin.product-index.action.render"

Describe the bug

I am trying to implement a very basic prototype of an admin extension in product-index where I would create a product. My problem lies after I run the mutation to create the product: the response result gives me the productId which I would like to use for navigating programmatically towards the new product by using

navigation.navigate(`shopify:admin/products/${data.product.id}`);

but this does not work. I don't see any console errors and I am not redirected to the product details page.

Note that the navigation object, as per the documentation, comes from this hook:

const TARGET = "admin.product-index.action.render";
const { navigation } = useApi(TARGET);

Note that navigating in the same way by using this piece of code actually works, so I would expect the same behaviour from the navigation API.

  <Link to={`shopify:admin/products/${productId}`}>
      Go to product
   </Link>

I would like to know if there is something wrong I am doing or I am missing something.

Steps to reproduce the behavior:

Create an admin action extension by following the tutorial
Try to navigate to the product details by using the protocol as described here
See that the navigation doesn't work.

Expected behavior

I expected to be redirected to the product details page.

Jolsty commented 10 months ago

Hi, did anyone manage to take a look at this problem? Do you need more information to replicate it?

Jolsty commented 9 months ago

Bump

AaronSpringut commented 8 months ago

This is the intended behavior. Navigation from modals should only happen after a user interacts with a link. We do not recommend or support navigation programmatically, or on button presses from the primary or secondary buttons from the modal.

We removed the navigate API from action extension to clarify this, it is only intended for use in block extensions to launch the accompanying action extension.

friendscottn commented 2 months ago

Hey @AaronSpringut , I think programatic navigation would be good to allow.

The scenario I can't seem to work around is saving the main resource and seeing the data update on the main resource page. Using navigation.navigate() would allow you to force a reload of the page and get new data after you save from your admin action. The only option I have right now (as far as I can tell) is to add a <Link> inside of the modal content area that displays after the data gets persisted to reload the page. The issue is made more difficult by the fact that the primaryAction and secondaryAction buttons do not allow href navigation either on AdminAction component. It all feels very clunky to accomplish this basic use case.

My Wishlist:

Allow navigation navigation.navigate() on Admin Actions
Support href attributes on buttons(not just links) and specifically the primary and secondary actions buttons. This would allow working around the missing functionality Otherwise if not navigation. Please allow some way to reload the main resource page

Thanks

jameshalsall commented 6 days ago

@AaronSpringut what about the following use case in an admin extension?

modal appears prompting for user action
if the user clicks on the affirmative action, an API call is made to fetch the URL of a document (or some errors if something went wrong)
based on the outcome of the API call, either an error is displayed or the file is opened in a new tab

You can't achieve the opening of the file in a new tab, even though it all happens as a result of a user action (the button click).

The only way around that I can think of is then to render another button, prompting the user to open the file.

jameshalsall commented 6 days ago

Actually, we could work around the above by leaving the Button component in a loading state until the document URL is fetched and then activating the button after setting the href and target. This adds complexity for us elsewhere but should achieve what we want.

Shopify / ui-extensions