Switch ingredient update response from Javascript to Turob Stream

app/javascript/alchemy_admin.js

@@ -8,7 +8,6 @@ import { translate } from "alchemy_admin/i18n"
 import Dirty from "alchemy_admin/dirty"
 import * as FixedElements from "alchemy_admin/fixed_elements"
 import { growl } from "alchemy_admin/growler"
-import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
 import ImageLoader from "alchemy_admin/image_loader"
 import ImageCropper from "alchemy_admin/image_cropper"
 import Initializer from "alchemy_admin/initializer"
@@ -44,7 +43,6 @@ Object.assign(Alchemy, {
   growl,
   ImageLoader: ImageLoader.init,
   ImageCropper,
-  IngredientAnchorLink,
   LinkDialog,
   pictureSelector,
   pleaseWaitOverlay,

app/javascript/alchemy_admin/components/action.js

@@ -0,0 +1,41 @@
+import { reloadPreview } from "alchemy_admin/components/preview_window"
+import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
+
+class Action extends HTMLElement {
+  constructor() {
+    super()
+
+    // map action names with Javascript functions
+    this.actions = {
+      // add a intermediate closeCurrentDialog - action
+      // this will be gone, if all dialogs are working with a promise and
+      // we don't have to implicitly close the dialog
+      closeCurrentDialog: Alchemy.closeCurrentDialog,
+      reloadPreview,
+      updateAnchorIcon: IngredientAnchorLink.updateIcon
+    }
+  }
+
+  connectedCallback() {
+    const func = this.actions[this.name]
+
+    if (func) {
+      func(...this.params)
+    } else {
+      console.error(`Unknown Alchemy action: ${this.name}`)
+    }
+  }
+
+  get name() {
+    return this.getAttribute("name")
+  }
+
+  get params() {
+    if (this.hasAttribute("params")) {
+      return JSON.parse(this.getAttribute("params"))
+    }
+    return []
+  }
+}
+
+customElements.define("alchemy-action", Action)

app/javascript/alchemy_admin/components/index.js

@@ -1,3 +1,4 @@
+import "alchemy_admin/components/action"
 import "alchemy_admin/components/attachment_select"
 import "alchemy_admin/components/button"
 import "alchemy_admin/components/char_counter"

app/views/alchemy/admin/ingredients/update.turbo_stream.erb

@@ -0,0 +1,5 @@
+<alchemy-action name="closeCurrentDialog"></alchemy-action>
+<alchemy-action name="reloadPreview"></alchemy-action>
+<% if @ingredient.settings[:anchor] %>
+<alchemy-action name="updateAnchorIcon" params="<%= [@ingredient.id, @ingredient.dom_id.present?].to_json %>"></alchemy-action>
+<% end %>

spec/javascript/alchemy_admin/components/action.spec.js

@@ -0,0 +1,49 @@
+import "alchemy_admin/components/action"
+import { renderComponent } from "./component.helper"
+import * as PreviewWindow from "alchemy_admin/components/preview_window"
+import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
+
+jest.mock("alchemy_admin/components/preview_window", () => {
+  return {
+    __esModule: true,
+    reloadPreview: jest.fn()
+  }
+})
+
+jest.mock("alchemy_admin/ingredient_anchor_link", () => {
+  return {
+    __esModule: true,
+    default: {
+      updateIcon: jest.fn()
+    }
+  }
+})
+
+describe("alchemy-action", () => {
+  beforeEach(jest.clearAllMocks)
+
+  it("call reloadPreview function", () => {
+    renderComponent(
+      "alchemy-action",
+      `<alchemy-action name="reloadPreview"></alchemy-action>`
+    )
+    expect(PreviewWindow.reloadPreview).toBeCalled()
+  })
+
+  it("call updateAnchorIcon function with parameter", () => {
+    renderComponent(
+      "alchemy-action",
+      `<alchemy-action name="updateAnchorIcon" params="[123, true]"></alchemy-action>`
+    )
+    expect(IngredientAnchorLink.updateIcon).toBeCalledWith(123, true)
+  })
+
+  it("call closeCurrentDialog function ", () => {
+    window.Alchemy.closeCurrentDialog = jest.fn()
+    renderComponent(
+      "alchemy-action",
+      `<alchemy-action name="closeCurrentDialog"></alchemy-action>`
+    )
+    expect(window.Alchemy.closeCurrentDialog).toBeCalled()
+  })
+})