Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor link dialog into ES module #2796

Merged
merged 8 commits into from
Apr 2, 2024

Conversation

sascha-karnatz
Copy link
Contributor

@sascha-karnatz sascha-karnatz commented Mar 19, 2024

What is this pull request for?

  • Use our default page select web component also in the link dialog. This simplifies the link dialog (a bit) and removes an Handlebar template, which isn't necessary anymore.
  • move the anchor select into an own web component
  • move the logic which is generating the link outside of the link dialog
  • migrate the LinkDialog CoffeeScript file into a Javascript file
  • replace jQuery with vanilla Javascript

Checklist

  • I have followed Pull Request guidelines
  • I have added a detailed description into each commit message
  • I have added tests to cover this change

Copy link

codecov bot commented Mar 19, 2024

Codecov Report

Attention: Patch coverage is 98.11321% with 1 lines in your changes are missing coverage. Please review.

Project coverage is 95.92%. Comparing base (8175627) to head (4dc39a2).

Files Patch % Lines
...p/components/alchemy/admin/link_dialog/base_tab.rb 93.33% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2796      +/-   ##
==========================================
+ Coverage   95.90%   95.92%   +0.01%     
==========================================
  Files         225      225              
  Lines        6103     6129      +26     
==========================================
+ Hits         5853     5879      +26     
  Misses        250      250              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@sascha-karnatz sascha-karnatz force-pushed the link-dailog-improvements branch 3 times, most recently from 9315da2 to dbfe1a7 Compare March 21, 2024 16:50
@sascha-karnatz sascha-karnatz marked this pull request as ready for review March 21, 2024 17:42
@sascha-karnatz sascha-karnatz requested a review from a team as a code owner March 21, 2024 17:42
@tvdeyen tvdeyen changed the title Update link dialog mechnics Refactor link dialog into Web Components Mar 22, 2024
@tvdeyen tvdeyen changed the title Refactor link dialog into Web Components Refactor link dialog into ES module Mar 22, 2024
@tvdeyen tvdeyen added this to the 7.2 milestone Mar 22, 2024
Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great work. some minor naming nits :)

app/components/alchemy/admin/link_dialog/tabs.rb Outdated Show resolved Hide resolved
app/components/alchemy/admin/link_dialog/base_tab.rb Outdated Show resolved Hide resolved
app/components/alchemy/admin/link_dialog/base_tab.rb Outdated Show resolved Hide resolved
app/components/alchemy/admin/link_dialog/external_tab.rb Outdated Show resolved Hide resolved
app/controllers/alchemy/admin/pages_controller.rb Fixed Show resolved Hide resolved
app/javascript/alchemy_admin/link_dialog.js Outdated Show resolved Hide resolved
app/javascript/alchemy_admin/link_dialog.js Outdated Show resolved Hide resolved
app/javascript/alchemy_admin/link_dialog.js Outdated Show resolved Hide resolved
app/components/alchemy/admin/link_dialog/internal_tab.rb Outdated Show resolved Hide resolved
app/components/alchemy/admin/link_dialog/internal_tab.rb Outdated Show resolved Hide resolved
Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Linking an anchor does not work unfortunately

@sascha-karnatz
Copy link
Contributor Author

Linking an anchor does not work unfortunately

Should work now

@sascha-karnatz sascha-karnatz force-pushed the link-dailog-improvements branch 2 times, most recently from 4edaf72 to 955708d Compare March 25, 2024 10:16
@sascha-karnatz sascha-karnatz force-pushed the link-dailog-improvements branch 2 times, most recently from 81ad9d5 to 875ba7f Compare March 28, 2024 09:38
Use our default page select web component also in the link dialog. This simplifies the link dialog (a bit) and removes an Handlebar template, which isn't necessary anymore.
Remove the Javascript code which selected the tab in link dialog and moved it into the view components. Also prefilled the forms to remove these part as well from the Coffeescript.
Moved the dom id - logic into a separate web component. This reduce the amount of necessary Javascript in link dialog and moves that into a isolated web component.
The link dialog was handling the link button and the TinyMCE implementation. Now the dialog is working with a promise and will respond to the caller with the link configuration. The calling method can make the decision to insert the link into her environment.
Migrate the Link Dialog from CoffeeScript to Javascript. This will also trim the internal class structure a bit to be better readable.
remove the usage of jQuery in LinkDialog and replace it with vanilla Javascript. Also restructure smaller parts of the class to improve the overview.
Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works like charm now

Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shit, the issue with the empty and undefined target on anchors still exists

Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue on the anchor tag already exists in current main and is not related to this change.

#createLink(linkOptions) {
const invalidInput =
linkOptions.type === "external" &&
!linkOptions.url.match(Alchemy.link_url_regexp)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should validate earlier in the submit form event

It was previously a dom id - select and technically it is search for dom nodes with ids. It also adds an enabled and disabled state on the dom id - select. Also separate both dom id selects into slightly different components and add an enable and disable mechanic to alchemy-select.
@sascha-karnatz sascha-karnatz force-pushed the link-dailog-improvements branch 3 times, most recently from 653cf26 to 9db3ab8 Compare March 28, 2024 13:55
Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 very last (promise 🙏🏻) change that would simplify this even more.

This is amazing work and I cannot wait to merge this 😁

app/components/alchemy/ingredients/text_view.rb Outdated Show resolved Hide resolved
Remove unnecessary data-link-target - attribute. It is not necessary anymore and can be removed. Also the support for different kinds of targets was added like _top, _self, etc. Also remove a lot of unnecessary transformation and store target with the default HTML syntax.
@tvdeyen tvdeyen merged commit 623b6f6 into AlchemyCMS:main Apr 2, 2024
35 checks passed
@sascha-karnatz sascha-karnatz deleted the link-dailog-improvements branch May 2, 2024 09:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants