From 36903fea89da4ea6ef542d1c329a4a6041f82c06 Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Wed, 22 May 2024 15:37:09 +0200 Subject: [PATCH 1/2] Add alchemy-action - component Allows to call functions that are registered as action from a `turbo_stream` response. It supports closeCurrentDialog, reloadPreview, and updateAnchorIcon. The closeCurrentDialog is an intermediate solution until all dialogs will respond with a promise. --- .../alchemy_admin/components/action.js | 41 ++++++++++++++++ .../alchemy_admin/components/index.js | 1 + .../alchemy_admin/components/action.spec.js | 49 +++++++++++++++++++ 3 files changed, 91 insertions(+) create mode 100644 app/javascript/alchemy_admin/components/action.js create mode 100644 spec/javascript/alchemy_admin/components/action.spec.js diff --git a/app/javascript/alchemy_admin/components/action.js b/app/javascript/alchemy_admin/components/action.js new file mode 100644 index 0000000000..71c05f2f85 --- /dev/null +++ b/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) diff --git a/app/javascript/alchemy_admin/components/index.js b/app/javascript/alchemy_admin/components/index.js index eff07702e2..384da76f82 100644 --- a/app/javascript/alchemy_admin/components/index.js +++ b/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" diff --git a/spec/javascript/alchemy_admin/components/action.spec.js b/spec/javascript/alchemy_admin/components/action.spec.js new file mode 100644 index 0000000000..865fe6c9a0 --- /dev/null +++ b/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", + `` + ) + expect(PreviewWindow.reloadPreview).toBeCalled() + }) + + it("call updateAnchorIcon function with parameter", () => { + renderComponent( + "alchemy-action", + `` + ) + expect(IngredientAnchorLink.updateIcon).toBeCalledWith(123, true) + }) + + it("call closeCurrentDialog function ", () => { + window.Alchemy.closeCurrentDialog = jest.fn() + renderComponent( + "alchemy-action", + `` + ) + expect(window.Alchemy.closeCurrentDialog).toBeCalled() + }) +}) From 32f6e24d50d6689490b916038226ddf5575b7ae6 Mon Sep 17 00:00:00 2001 From: Sascha Karnatz <122262394+sascha-karnatz@users.noreply.github.com> Date: Thu, 23 May 2024 14:41:25 +0200 Subject: [PATCH 2/2] Replace ingredient update - js.erb with turbo stream As a preparation to replace the Rails Javascript responses, the ingredient update response was replaced with turbo stream. It now uses the alchemy-action - component to trigger action in our frontend. As an addition the response also triggers a previewReload action to reflect the changes in the settings of an ingredient. --- app/javascript/alchemy_admin.js | 2 -- app/views/alchemy/admin/ingredients/update.js.erb | 7 ------- .../alchemy/admin/ingredients/update.turbo_stream.erb | 5 +++++ 3 files changed, 5 insertions(+), 9 deletions(-) delete mode 100644 app/views/alchemy/admin/ingredients/update.js.erb create mode 100644 app/views/alchemy/admin/ingredients/update.turbo_stream.erb diff --git a/app/javascript/alchemy_admin.js b/app/javascript/alchemy_admin.js index 593812c7a0..002021ff9e 100644 --- a/app/javascript/alchemy_admin.js +++ b/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, diff --git a/app/views/alchemy/admin/ingredients/update.js.erb b/app/views/alchemy/admin/ingredients/update.js.erb deleted file mode 100644 index ef60ede109..0000000000 --- a/app/views/alchemy/admin/ingredients/update.js.erb +++ /dev/null @@ -1,7 +0,0 @@ -Alchemy.closeCurrentDialog( -<% if @ingredient.settings[:anchor] %> - function() { - Alchemy.IngredientAnchorLink.updateIcon(<%= @ingredient.id %>, <%= @ingredient.dom_id.present? %>); - } -<% end %> -); diff --git a/app/views/alchemy/admin/ingredients/update.turbo_stream.erb b/app/views/alchemy/admin/ingredients/update.turbo_stream.erb new file mode 100644 index 0000000000..8d12ba2571 --- /dev/null +++ b/app/views/alchemy/admin/ingredients/update.turbo_stream.erb @@ -0,0 +1,5 @@ + + +<% if @ingredient.settings[:anchor] %> + +<% end %>