-
Notifications
You must be signed in to change notification settings - Fork 4
Description
Environment:
Latest chrome
MacOS
Dependencies: package.json
{
...
"version": "1.0.0",
"license": "UNLICENSED",
"scripts": {
"shopify": "shopify",
"build": "shopify app build",
"dev": "shopify app dev",
"info": "shopify app info",
"generate": "shopify app generate",
"deploy": "shopify app deploy"
},
"dependencies": {
"@shopify/cli": "^3.69.4"
},
"trustedDependencies": [
"@shopify/plugin-cloudflare"
],
"author": "admin",
"private": true,
"workspaces": [
"extensions/*"
],
"engines": {
"node": ">=20.10.0"
}
}
Description:
When using "admin.discount-details.action.render" as an extension target, it's impossible to interact with this particular action from the Admin page for a Discount Code, it simply never renders the UI element "More Actions" where to select this particular action.
This works correctly when starting the development store preview through the Command Line, as there it's possible to select this action and the modal opens, allowing it to be interacted with.
I've tried extensions for "admin.discount-index.action.render" and "admin.product-details.action.render" and both of this work correctly in the sense that there's a more action button where this action can be opened/interacted with.
Steps to Reproduce:
- Generate an extension for an Admin Action
- Set the target to "admin.discount-details.action.render"
- Replace the contents of ActionExtension.{tsx|jsx} to the one in the Code Snippet section
- Deploy this extension to the app
- Install the App on a development store
- Create a Discount Code
- Open the detail page for this Discount Code
- "More Actions" button is not rendered or shown in the top right corner of this page
Actual Behavior:
The "More Actions" button shows up and allows for this action to be selected
Code snippet:
import {
reactExtension,
useApi,
AdminAction,
Button,
Text,
} from '@shopify/ui-extensions-react/admin';
// The target used here must match the target used in the extension's toml file (./shopify.extension.toml)
const TARGET = 'admin.discount-details.action.render';
export default reactExtension(TARGET, () => <App />);
function App() {
const api = useApi(TARGET);
return (
<AdminAction
primaryAction={
<Button
onPress={() => {
console.log('saving');
api.close();
}}
>
Done
</Button>
}
secondaryAction={
<Button
onPress={() => {
console.log('closing');
apiclose();
}}
>
Close
</Button>
}
>
<Text fontWeight="bold">Action Content</Text>
</AdminAction>
);
}