Please confirm that you have:

• [X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• [X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Theme

Expected behavior

theme dev should only stop if requested.

Actual behavior

theme dev seems to randomly stop itself at random times.

Stack trace

No response

Reproduction steps

1. run theme dev
2. open dev theme editor and make some changes
3. after a random amount of time, cli will have stopped itself in terminal

Operating System

Mac OS Ventura 13.0

Shopify CLI version (check your project's package.json if you're not sure)

3.21.0

Shell

$bash

Node version (run node -v if you're not sure)

v18.11.0

What language and version are you using in your application?

Shopify liquid template language

https://github.com/Shopify/cli/issues/728#tasklist-block-18d54d4f-3bb8-43e0-9890-c02ea94ebf71

Please confirm that you have:

• [X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• [X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Extension

Expected behavior

CLI not working for Post-purchase UI

I tried creating a new Shopify app. After that, I added Post-purchase UI extension. In the console I see:

To view this extension:
 1. Install Shopify’s post-purchase Chrome extension...
 2. Open the Chrome extension and paste this URL into it...
 3. Run a test purchase on your store to view your extension...

I create a test product, and create a test checkout: https://help.shopify.com/en/manual/checkout-settings/test-orders

Again. It's a simple app, with a simple extension, without any changes, only a fresh project, created from CLI.

App working and I can see it in the admin dashboard. But this extension is not.

Issue number one: I don't see anything after checkout, and before thank you page.

Issue number two: I tried to deploy this extension. And I see this:

Actual behavior

Errors in the console. hieroglyphs

Stack trace

No response

Reproduction steps

1. Install cli v3
2. create a Shopify react node app
3. add a post purchase ui extension
4. use chrome extension/use npm deploy

Operating System

Windows 10 x64

Shopify CLI version (check your project's package.json if you're not sure)

3

Shell

No response

Node version (run node -v if you're not sure)

No response

What language and version are you using in your application?

No response

Please confirm that you have:

• [X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• [X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App

Expected behavior

Navigate to the static ngrok urls I've been using for dev in the past and everything tunnel correctly

Actual behavior

Overrides tunneling. Even though by default it uses ngrok, it suggests cloudflared as the approved method. Conflicting documentation and implementation.

Stack trace

No response

Reproduction steps

1. ngrok start configname
2. npm run dev
3. or npm run dev -- --tunnel-url ngrokURL
4. overrides and fails

Operating System

MAC OS

Shopify CLI version (check your project's package.json if you're not sure)

3

Shell

No response

Node version (run node -v if you're not sure)

No response

What language and version are you using in your application?

No response

Please confirm that you have:

• [X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• [X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App

Expected behavior

I have reason to believe v3 of the cli is not killing old processes. Please see this issue for a complete breakdown, putting this here because initially I thought it was an issue with the express boiler, but after further testing revealed it is a bug in the cli.

Actual behavior

See video demonstrating bug

Stack trace

No response

Reproduction steps

See reproduction steps

Operating System

Windows 10

Shopify CLI version (check your project's package.json if you're not sure)

3.17.0

Shell

No response

Node version (run node -v if you're not sure)

No response

What language and version are you using in your application?

No response

Please confirm that you have:

• [X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• [X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App, Extension

Expected behavior

After I run yarn scaffold extension and go trough all the steps, I expect when I run yarn dev and configure the chrome extension to view my post purchase extension.

Actual behavior

For versions prior to 3.8.0 I do not see my extension. What I notice is that upon arriving at the Shipping page, just before I complete my order, a call is made to the tunnel. The request loads fine, however this error is thrown in the console: Refused to execute script from 'https://a88e-95-43-129-67.eu.ngrok.io/extensions/dev-c97057cd-ea1e-4a36-bb8f-254b0efe2ea3/assets/main.js' because its MIME type ('text/plain') is not executable. I tried setting an application/javascript header, but this changed nothing.

Version 3.8.0 just throws an error at yarn dev:

Stack trace

3.8.0 Problem:
extensions | basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
extensions |           ^^^^^^^
extensions |
extensions | SyntaxError: missing ) after argument list
extensions |     at Object.compileFunction (node:vm:352:18)
extensions |     at wrapSafe (node:internal/modules/cjs/loader:1033:15)
extensions |     at Module._compile (node:internal/modules/cjs/loader:1069:27)
extensions |     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
extensions |     at Module.load (node:internal/modules/cjs/loader:981:32)
extensions |     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
extensions |     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
extensions |     at node:internal/main/run_main_module:17:47)

Reproduction steps

For 3.8.0 prior

1. Scaffold new application by running yarn create @shopify/app. Choose the node template
2. Scaffold a post-purchase-extension by running yarn scaffold extension
3. Run yarn dev.
4. After configuring tunnels, copy the relevant link in the shopify chrome post purchase extension
5. Try creating a new order at a test store
6. At the Shipping observe the error in the console.

For 3.8.0:

1. Scaffold new application by running yarn create @shopify/app. Choose the node template
2. Scaffold a post-purchase-extension by running yarn scaffold extension
3. Run yarn dev.
4. Observe the error in the console.

Operating System

Windows 10

Shopify CLI version (check your project's package.json if you're not sure)

First bug: 3.71. Second bug: 3.8.0

Shell

Powershell and Windows CMD

Node version (run node -v if you're not sure)

16.15.1

What language and version are you using in your application?

Default node template

Please confirm that you have:

• [X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• [X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Theme

Expected behavior

Following through the Shopify documentation for CLI installation for macOS, the final step for verification should yield the version number of Shopify-cli as the result.

The installation verification is to be done using the below command shopify version

Actual behavior

Running the command does not yield any output. Any Shopify command results in nothing being printed on console or anything action being performed. I have replicated the same on two separate MacBooks, both have been setup from scratch post macOS 13 Ventura installation after formatting the drives.

Stack trace

No response

Reproduction steps

1. brew install shopify-cli
2. shopify version

Operating System

Mac OS Ventura

Shopify CLI version (check your project's package.json if you're not sure)

3.21.0

Shell

zsh

Node version (run node -v if you're not sure)

v14.15.5

What language and version are you using in your application?

3.1.2

Please confirm that you have:

• [X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• [X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Extension

Expected behavior

Extension should run (also true for app)

Actual behavior

Extension or app should run

Stack trace

error ──────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  (intermediate value).doOnOk(...).mapError(...).valueOrThrow is not a        │
│  function                                                                    │
│                                                                              │
│  To investigate the issue, examine this stack trace:                         │
│  at generateURL (.pnpm/@[email protected][email protected]/node_modules/  │
│  @shopify/app/src/cli/services/dev/urls.ts:97)                               │
│   .valueOrThrow()                                                            │
│  at processTicksAndRejections (node:internal/process/task_queues:95)         │
│  at async generateFrontendURL (.pnpm/@[email protected][email protected]  │
│  /node_modules/@shopify/app/src/cli/services/dev/urls.ts:80)                 │
│   frontendUrl = await generateURL(options.commandConfig, frontendPort)       │
│  at async dev (.pnpm/@[email protected][email protected]/node_modules/@s  │
│  hopify/app/src/cli/services/dev.ts:66)                                      │
│   const {frontendUrl, frontendPort, usingLocalhost} = await                  │
│   generateFrontendURL({                                                      │
│  at run (.pnpm/@[email protected][email protected]/node_modules/@shopify  │
│  /app/src/cli/commands/app/dev.ts:100)                                       │
│   await dev({                                                                │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯
 ELIFECYCLE  Command failed with exit code 1.

Reproduction steps

1. Created app extension
2. cs into extension directory
3. run pnp run dev
4. same error if trying to run app

The app was running as of yesterday but stopped working after running the extension creation script.

Not sure what to do now. Thanks!

Operating System

macOS Ventura 13.0.1

Shopify CLI version (check your project's package.json if you're not sure)

3.23.0

Shell

zsh

Node version (run node -v if you're not sure)

v19.1.0

What language and version are you using in your application?

Node 19.1.0

WHY are these changes introduced?

@isaacroldan reported that he saw an error that broke the borders of the banner component.

WHAT is this pull request doing?

I've introduced a new type of error called ExternalError. This is used when rescuing errors from execa and allows us to print these kind of errors differently, like so:

Measuring impact

How do we know this change was effective? Please choose one:

• [x] n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
• [ ] Existing analytics will cater for this addition
• [ ] PR includes analytics changes to measure impact

Checklist

• [x] I've considered possible cross-platform impacts (Mac, Linux, Windows)
• [x] I've considered possible documentation changes
• [x] I've made sure that any changes to dev or deploy have been reflected in the internal flowchart.

WHY are these changes introduced?

Fixes https://github.com/Shopify/shopify-cli-planning/issues/406

We want to provide CLI and plugin developers a set of components that can be used to improve the UI of what they output to the terminal. These components should be easy to use and also easy to create.

WHAT is this pull request doing?

• Introduce a new set of components that CLI and plugin developers can use to improve theirs UIs. To do so we've introduced ink as a rendering engine that allows us to build components with the expressiveness and power of React.
• Reimplement the current dev output with ink and introduce one line of space among the various process outputs to keep things more readable, especially considering color accessibility. The output on the right hand side is now also colored like the left hand side.
• Add a new shopify kitchen-sink hidden command that can be used to showcase all the available UI components.

Summay of private (for now) components introduced as part of cli-kit:

Banner

Banner can have four different types (info, warning, error, success) and takes headline and body as params. Maximum width is set to 60. If the terminal is narrower than that, the banner will take the whole width. These are some example outputs:

ConcurrentOutput

ConcurrentOutput renders output from concurrent processes to the terminal. Output will be divided in a two column layout, with the left column containing the process prefix and the right column containing the output. Every process will be rendered with a different color, up to 4 colors.

Example with dev:

FullScreen

FullScreen renders all output in a new buffer and makes it full screen. This is useful when:

• You want to preserve terminal history. ink normally clears the terminal history if the rendered output is taller than the terminal window. By rendering in a separate buffer history will be preserved and will be visible after pressing Ctrl+C.
• You want to respond to the resize event of the terminal. Whenever the user resizes their terminal window the output's height and width will be recalculated and re-rendered properly.

TextAnimation

TextAnimation applies animations from chalk-animation to Text children

List

List displays an unordered or ordered list with text aligned with the bullet point and wrapped to the container width. The type definition for a list item is:

type Token = string | CommandToken | LinkToken
export type ListItem = Token | Token[]

This means that developers can pass an array of items that can be composed by different tokens, which will be rendered by their corresponding component and separated by a space.

Link

Link displays a clickable link when supported by the terminal.

Command

Command displays a command as non-dimmed text.

Summary of public APIs:

renderConcurrent

Renders output from concurrent processes to the terminal with ConcurrentOutput. This function instantiates an AbortController so that the various processes can subscribe to the same abort signal.

renderInfo, renderSuccess, renderWarning, renderError

These are convenience methods that render a Banner component with the corresponding type.

renderFatalError

This can be used to render an error of type Fatal. I'm going to work on replacing fatal errors with this new API in a follow up PR.

Testing

I've added tests for all the public methods. In order to test everything except renderConcurrent you can use the usual mockOutput we've been using for all the output tests. To test renderConcurrent and commands that use similar more interactive experiences in the future, I've added a new run helper function which accepts the name of a fixture file to run. It will then spawn a child process with execa and return the output of stdout. I've done this for a few reasons:

• Because of https://github.com/vadimdemedes/ink/pull/266 we need to make sure that CI is set to false just for tests that call ink's render function. This is because ink behaves differently in CI environments by writing only the non static output to stdout on unmount, and the ConcurrentOutput component uses only Static lines.
• With this setup we'll also be able to add more integration level tests of components that react on user input. So if we have a future component that waits for a key to be pressed we can test it by using run and sending signals to it.
• Testing of thrown errors and their output becomes really simple as we can simply throw in the fixture as we would in the real environment.

How to test your changes?

• Run yarn --cwd fixtures/app shopify app dev to see the new concurrent output
• Run yarn shopify kitchen-sink to see all the new banner outputs. Feel free to play with the data in the kitchen-sink.ts file and see how it would get displayed.

Measuring impact

How do we know this change was effective? Please choose one:

• [x] n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
• [ ] Existing analytics will cater for this addition
• [ ] PR includes analytics changes to measure impact

Checklist

• [x] I've considered possible cross-platform impacts (Mac, Linux, Windows)
• [x] I've considered possible documentation changes

Please confirm that you have:

• [X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• [X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App, Extension

Expected behavior

Again, errors and mistakes. Shopify it's ridiculous.

I can't run a simple shopify app with a theme extension.

Actual behavior

does not work, but it's shopify

Stack trace

━━━━━━ Error ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    Bundler version 2.3.7 is not supported

    What to try:
    To update to the latest version of Bundler, run gem install bundler

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


AND

━━━━━━ Error ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    Command failed with exit code 1: bundle install
    Your lockfile was created by an old Bundler that left some things out.
    Because of the missing DEPENDENCIES, we can only install gems one at a time, instead of installing 16 at a time.
    You can fix this by adding the missing gems to your Gemfile, running bundle install, and then removing the gems from your Gemfile.
    The missing gems are:
    * mini_portile2 depended upon by nokogiri
    --- ERROR REPORT TEMPLATE -------------------------------------------------------

    
    NoMethodError: undefined method `full_name' for nil:NilClass

Reproduction steps

1. Open shopify docs https://shopify.dev/apps/getting-started/create
2. Install shopify cli
3. Create an app - npm init @shopify/app@latest
4. npm run dev - all good. You can see this app
5. Open shopify docs https://shopify.dev/apps/online-store/theme-app-extensions/getting-started
6. Create an extension - npm run shopify app generate extension
7. npm run dev - see the error Bundler version 2.3.7 is not supported
8. gem install bundler
9. npm run dev - see the error about missing dependencies - mini_portile2 depended upon by nokogiri

Operating System

Windows 10 x64

Shopify CLI version (check your project's package.json if you're not sure)

3.0.24

Shell

No response

Node version (run node -v if you're not sure)

v18.7.0

What language and version are you using in your application?

Node

WHY are these changes introduced?

Fixes #176

Along the authorization process the CLI opens an http server to listen to the browser response with the identity token. If for any reason the fixed port used for the server '3456' is already in use, the CLI gets stuck waiting for the response so the process never finishes.

WHAT is this pull request doing?

• Adds a validation before opening the browser to get the identity token. In case the port is in use the CLI, it prompts the user to terminate the process that is blocking it. In case, the user confirm the action, the process is killed and the authorization goes on opening the browser. On the other hand, if the user rejects finishing the process, the CLI closes gracefully without any error message

• Added dependency kill-port-process
• Added dependency find-process

How to test your changes?

1. Logout to ensure the needing of executing the authorization process yarn shopify auth logout
2. Run the dev command yarn shopify app dev
3. Suspend the process (CTRL + Z) when the CLI is waiting for the browser response
4. Execute again the dev command yarn shopify app dev

In MacOS to kill the process that listen to a specific port use follow these steps:

1. lsof -i -P | grep LISTEN | grep 3456
2. kill -9 <pid_from_lsof>

WHY are these changes introduced?

Provide nightly snapshots to avoid anyone being held up in development waiting for a release.

Based on docs and local testing, this should create a package of the form 0.0.0-nightly-20230108195058 where 20230108... is a continuously incrementing datetime representing the moment of release.

Since the release is tagged, users can point to e.g. @shopify/app@nightly

WHAT is this pull request doing?

Adds a new shipit stack that will deploy continuously once in 24 hours.

How to test your changes?

Enable it, hope it works!

Post-release steps

Maybe announce it, maybe not...

Measuring impact

How do we know this change was effective? Please choose one:

• [ ] n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
• [x] Existing analytics will cater for this addition
• [ ] PR includes analytics changes to measure impact

We will see in our analytics which version was used; nightly snapshots use very distinctive versions.

Checklist

• [x] I've considered possible cross-platform impacts (Mac, Linux, Windows)
• [x] I've considered possible documentation changes
• [x] I've made sure that any changes to dev or deploy have been reflected in the internal flowchart.

Please confirm that you have:

• [X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• [X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Extension

Expected behavior

Generate a new Theme App Extension under the extensions/ folder!

Actual behavior

CLI exists with a weird error, not sure if is related to the project or a bug itself on the CLI... My folder structure follows exactly the one generated with CLI 3!

Stack trace

2023-01-08T10:58:13.915Z: Request to https://partners.shopify.com/api/cli/graphql completed in 616 ms

╭─ error ────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                            │
│  Unknown file extension ".ts" for                                                                          │
│  C:\Users\35193\Desktop\playkit-ruby\node_modules\.pnpm\@[email protected][email protected]\node_modul  │
│  es\@shopify\app\dist\cli\models\extensions\ui-specifications\checkout_ui_extension.d.ts                   │
│                                                                                                            │
│  To investigate the issue, examine this stack trace:                                                       │
│    at 6\node_modules\                                                                                      │
│    at new NodeError (node:internal/errors:372)                                                             │
│    at getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76)                     │
│    at defaultGetFormat (node:internal/modules/esm/get_format:118)                                          │
│    at defaultLoad (node:internal/modules/esm/load:21)                                                      │
│    at load (node:internal/modules/esm/loader:407)                                                          │
│    at moduleProvider (node:internal/modules/esm/loader:326)                                                │
│    at new ModuleJob (node:internal/modules/esm/module_job:66)                                              │
│    at #createModuleJob (node:internal/modules/esm/loader:345)                                              │
│    at getModuleJob (node:internal/modules/esm/loader:304)                                                  │
│    at processTicksAndRejections (node:internal/process/task_queues:96)                                     │
│                                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

2023-01-08T10:58:14.235Z: Obtaining the dependency manager in directory C:\Users\35193\Desktop\playkit-ruby...
2023-01-08T10:58:14.238Z: Reading the content of file at node_modules/.pnpm/@[email protected]/node_modules/@shopify/cli-kit/package.json...
2023-01-08T10:58:14.272Z: 
Running system process:
  · Command: ruby -v
  · Working directory: C:\Users\35193\Desktop\playkit-ruby

2023-01-08T10:58:14.553Z: Analytics event sent: {
  "command": "app scaffold extension",
  "time_start": 1673175490052,
  "time_end": 1673175494195,
  "total_time": 4143,
  "success": false,
  "cli_version": "3.31.1",
  "ruby_version": "",
  "node_version": "16.16.0",
  "is_employee": false,
  "uname": "windows amd64",
  "env_ci": false,
  "env_plugin_installed_any_custom": false,
  "env_plugin_installed_shopify": "[\"@shopify/app\",\"@shopify/cli\",\"@shopify/plugin-ngrok\"]",
  "env_shell": "cmd.exe",
  "env_device_id": "9395ef81f605001e5fe5df3bd9bc035bd242c284",
  "env_cloud": "localhost",
  "env_package_manager": "pnpm",
  "cmd_scaffold_type_owner": "@shopify/app",
  "cmd_all_launcher": "pnpm",
  "cmd_all_topic": "app generate",
  "cmd_all_plugin": "@shopify/app",
  "cmd_all_verbose": true,
  "cmd_all_path_override": false,
  "args": "--name playdock --type theme_app_extension --verbose",
  "error_message": "Unknown file extension \".ts\" for C:\\Users\\35193\\Desktop\\playkit-ruby\\node_modules\\.pnpm\\@[email protected][email protected]\\node_modules\\@shopify\\app\\dist\\cli\\models\\extensions\\ui-specifications\\checkout_ui_extension.d.ts",
  "env_plugin_installed_all": "[\"@shopify/app\",\"@shopify/cli\",\"@shopify/plugin-ngrok\"]",
  "metadata": "{\"extraPublic\":{},\"extraSensitive\":{}}"
}
2023-01-08T10:58:14.611Z: Obtaining the dependency manager in directory C:\Users\35193\Desktop\playkit-ruby...
 ELIFECYCLE  Command failed with exit code 1.

Reproduction steps

1. pnpm shopify app generate extension --name playdock --type theme_app_extension --verbose

Operating System

Windows 11

Shopify CLI version (check your project's package.json if you're not sure)

3.31.1

Shell

PowerShell

Node version (run node -v if you're not sure)

v16.16.0

What language and version are you using in your application?

Ruby 3.1.2

WHY are these changes introduced?

Continuation of https://github.com/Shopify/internal-cli-foundations/issues/491

WHAT is this pull request doing?

Tightening up return types and documentation. Also pushed the exported modules to the top for easier reference.

How to test your changes?

The CLI still works...

Measuring impact

How do we know this change was effective? Please choose one:

• [x] n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
• [ ] Existing analytics will cater for this addition
• [ ] PR includes analytics changes to measure impact

Checklist

• [x] I've considered possible cross-platform impacts (Mac, Linux, Windows)
• [x] I've considered possible documentation changes
• [x] I've made sure that any changes to dev or deploy have been reflected in the internal flowchart.

WHY are these changes introduced?

These docs look to be from a different command. Let's change them to a version based on the docs live on shopify.dev

WHAT is this pull request doing?

Fixes docs for:

• shopify theme open -d
• shopify theme open -l

Measuring impact

How do we know this change was effective? Please choose one:

• [x] n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
• [ ] Existing analytics will cater for this addition
• [ ] PR includes analytics changes to measure impact

Checklist

• [x] I've considered possible cross-platform impacts (Mac, Linux, Windows)
• [x] I've considered possible documentation changes
• [x] I've made sure that any changes to dev or deploy have been reflected in the internal flowchart.

WHY are these changes introduced?

Post purchase has it's own preview instructions. Previously these were shown to the user via this file, but soon this will be shown via a modal in the dev console instead.

In this PR we introduce that modal.

WHAT is this pull request doing?

1. Introduce a new Row component for the Post Purchase Row. This way it can have it's custom behaviour
2. Introduce new Status & View components. These take functionality from ExtensionRow and abstract it so it can be reused in ExtensionRow and PostPurchaseRow.
3. Make some styling improvements to the QR Code Modal
4. Add a new Post Purchase Modal with instructions for how to test the post purchase extension.
5. Improve the styling of the Icon Button. This was needed because the styling broke inside a modal

Note I haven't removed the Polaris Modal as part of this PR as it's quite involved and I want to wait untill all the functionality is wrapped up.

How to test your changes?

1. pnpm install && pnpm build
2. cd fixtures/app
3. Make sure you have a post purchase extension, if not generate one using pnpm shopify app generate extension
4. Does the Post Purchase Row work as expected?
5. Does the QR Code Modal work as expected?
6. Does the View Column work as expected?

Post-release steps

None

Measuring impact

How do we know this change was effective? Please choose one:

• [x] n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
• [ ] Existing analytics will cater for this addition
• [ ] PR includes analytics changes to measure impact

Checklist

• [x] I've considered possible cross-platform impacts (Mac, Linux, Windows)
• [x] I've considered possible documentation changes
• [x] I've made sure that any changes to dev or deploy have been reflected in the internal flowchart.

Please confirm that you have:

• [X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• [X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Theme

Expected behavior

shopify theme dev should have served my theme successfully and create localhost + editor linkgs

Actual behavior

Got error for nokogiri failure of gem file.

Stack trace

An error occurred while installing nokogiri (1.13.10), and Bundler cannot
continue.

In Gemfile:
  shopify-cli was resolved to 2.33.0, which depends on
    theme-check was resolved to 1.12.1, which depends on
      nokogiri
Fetching gem metadata from https://rubygems.org/.............
Resolving dependencies...
Using ast 2.4.2
Using concurrent-ruby 1.1.10
Using bundler 2.4.2
Using ffi 1.15.5
Using liquid 5.4.0
Using rb-fsevent 0.11.2
Using mini_portile2 2.8.1
Using racc 1.6.2
Using parser 3.2.0.0
Using bugsnag 6.25.1
Using rb-inotify 0.10.1
Using listen 3.7.1
Installing nokogiri 1.13.10 with native extensions
    at makeError (file:///home/linuxbrew/.linuxbrew/lib/node_modules/@shopify/theme/node_modules/execa/lib/error.js:59:11)
    at handlePromise (file:///home/linuxbrew/.linuxbrew/lib/node_modules/@shopify/theme/node_modules/execa/index.js:119:26)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Module.exec (file:///home/linuxbrew/.linuxbrew/lib/node_modules/@shopify/theme/node_modules/@shopify/cli-kit/dist/system.js:41:9)
    at async bundleInstallShopifyCLI (file:///home/linuxbrew/.linuxbrew/lib/node_modules/@shopify/theme/node_modules/@shopify/cli-kit/dist/public/node/ruby.js:197:5)
    at async Task.task (file:///home/linuxbrew/.linuxbrew/lib/node_modules/@shopify/theme/node_modules/@shopify/cli-kit/dist/public/node/ruby.js:131:21)
    at async Task.run (file:///home/linuxbrew/.linuxbrew/lib/node_modules/@shopify/theme/node_modules/listr2/dist/index.js:960:11)
    at async /home/linuxbrew/.linuxbrew/lib/node_modules/@shopify/theme/node_modules/p-map/index.js:57:22 {
  tryMessage: null,
  type: 0,
  nextSteps: undefined,
  command: 'bundle',
  args: [ 'install' ]

Reproduction steps

1. npm install -g @shopify/cli @shopify/theme in ubuntu 20 on windows machines WSL2
2. shopify theme dev
3. failure

Operating System

Windows, WSL 2, Ubuntu

Shopify CLI version (check your project's package.json if you're not sure)

3.31.1

Shell

Terminal

Node version (run node -v if you're not sure)

v16.19.0

What language and version are you using in your application?

ruby 3.2