search

Shopify / shopify-cli-extensions

MIT License
24 stars 9 forks source link

Fix issue where partial extension updates was forcing boolean values to be false #344

Closed vividviolet closed 2 years ago

vividviolet commented 2 years ago

Fixes https://github.com/Shopify/shopify-cli-extensions/issues/203

There is a quirk in Go where a boolean that has not been initialized is equivalent to false. When an extension update event comes in with partial data as all boolean values that have not been initialized is defaulted to false. This cause a strange bug where true boolean values are overwritten by non-initialized boolean as false.

This is fixed by using a pointer to a boolean to distinguish between a boolean that has been set to false vs. one that has not been set.

Before

https://user-images.githubusercontent.com/29458473/173366406-ffd9bbdf-d25e-4e17-a498-1578cec0c12a.mov

After

https://user-images.githubusercontent.com/29458473/173366466-2a0c439d-c9e9-42ce-8ef9-62c2eae4289d.mov

Tophat

  1. Modify testdata/extension.config.yml so that Checkout UI Extension to add the following:

    extensions:
- uuid: 00000000-0000-0000-0000-000000000000
type: checkout_ui_extension
title: Checkout UI Test Extension
metafields:
  - namespace: my-namespace
    key: my-key
development:
      root_dir: 'tmp/checkout_ui_extension'
      build_dir: 'build'
      template: 'typescript-react'
      renderer:
        name: '@shopify/checkout-ui-extensions'
        version: '^0.14.0'
      entries:
        main: 'src/index.tsx'
      resource:
        url: 'cart/1234'
+        capabilities:
+          network_access: true

  2. Run make build; make run serve testdata/extension.config.yml

  3. Open Chrome and the Dev Tools Network inspector, filter by WS and click on /extensions

  4. Go to http://localhost:8000

  5. Verify that the "connected" message from the websocket shows capabilities.accessNetwork: true for the Checkout UI Extension

    image

  6. Open tmp/checkout_ui_extension/src/index.tsx and make some changes to the code and save the file

  7. Verify that the "update" message shows capabilities.accessNetwork: true for the Checkout UI Extension

    image

  8. In the Dev Console to the "hide" icon to hide Checkout UI Extension

  9. Open tmp/checkout_ui_extension/src/index.tsx and make some changes to the code and save the file

  10. Verify that the the Dev Console still shows the Checkout UI Extension as hidden