New product editor issues

[willopez]

Prerequisites

• Are you running the latest version?
• Are you able to consistently reproduce the issue?
• Did you search the issue queue for existing issue? Search issues

Issue Description

More issues that arise from the new product editor (#188) these are non-blocking issues that should be resolved in a new PR.

• When editing a variant, it's not immediately clear which variant is being edited.
  There should be an indicator that shows which variant is currently being edited. A highlight of the variant in the variant tree should suffice

• Inconsistent notification, when I click on make product visible on the parent product(by clicking on the three dots), an old-style notification is shown.
  Examples of old alerts:

Alerts.toast(i18next.t("productDetailEdit.archiveProductsSuccess"), "success");
Alerts.toast(i18next.t("productDetailEdit.archiveProductsFail", { err: error }), "error");
Alerts.toast(i18next.t("productDetailEdit.updateProductFieldSuccess"), "success");
Alerts.toast(i18next.t("productDetailEdit.updateProductFieldFail", { err: error }), "error");

• When an option is archived, the editor breaks. See the recording for details. https://recordit.co/iwtTcogt9j

• When creating a variant, if the first section(details) is filled out and also the price section, the UI correctly shows that both sections can be saved. If the save button on the price section is clicked, it looks like both sections are saving, however, upon refresh, the data in the detail section is lost and only the price data is saved.

• Use fragments for the following queries/mutations to remove repetition of common GraphQL fields, where possible:

  • product-admin/client/hooks/CreateProductVariantMutation.js
  • product-admin/client/hooks/ProductQuery.js
  • product-admin/client/hooks/UpdateProductMutation.js
  • product-admin/client/hooks/UpdateProductVariantMutation.js

• In the useProduct hook the first query for a product's information fails, due to the shopId not yet being available when the query executes. Use a lazyQuery as seen here to avoid this issue:

const [fetchProduct, { called, loading, data: productQueryResult, refetch: refetchProductQuery }] = useLazyQuery(productQuery);

  if (shopId && !called) {
    fetchShop({
      variables: {
        id: shopId
      }
    });
  }

The above also applies to the inventory query below, it should also be a lazyQUery to avaid a failed request.

useQuery(getInventoryInfo, {
    variables: getInventoryInfoVariables
  });