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

DEV: convert chat components to .gjs #24260

Merged
merged 2 commits into from
Nov 14, 2023

Conversation

chancancode
Copy link
Contributor

@chancancode chancancode commented Nov 7, 2023

image

Discourse.mov

This converts most of the components in chat to use .gjs with proper imports. This is designed to be reviewable commit-by-commit.

  • The first commit pulls in Fix co-located components regressions embroider-build/embroider#1632 because without it the server crashes a lot during these renames
  • The second commit renames all of the refactored .js files into .gjs without changing their content. Some of these files are quite small – if we do the rename and inlining of the template in the same commit, Git may not recognize that as a rename as the resulting files are too different. This forces Git to track that as a move/rename, thus preserving the lineage/history.
  • The subsequent commits convert one file at a time. It write the changes to both .gjs and the .hbs file. This is so that you can easily tell what actually changed in the template's content.
  • The final commit removes the leftover .hbs files.

After review, we can probably squash the individual commits + the final cleanup commit if we want, but to keep the Git history in tact we will want to at least keep the rename commit separate.

This is converted by a custom codemod built off of what @IgnaceMaes started in #24162. See: IgnaceMaes/ember-codemod-template-tag#8 This can be further tweaked to convert components in the rest of the app.

It should be possible to convert most of the skipped files with some light refactoring in a forthcoming PR. This first batch is just those that can be converted mechanically without intervention.

Successfully converted 68 files:

- discourse/components/chat-channel-archive-status.hbs
- discourse/components/chat-channel-card.hbs
- discourse/components/chat-channel-leave-btn.hbs
- discourse/components/chat-channel-metadata.hbs
- discourse/components/chat-channel-preview-card.hbs
- discourse/components/chat-channel-status.hbs
- discourse/components/chat-channel-title.hbs
- discourse/components/chat-channel-unread-indicator.hbs
- discourse/components/chat-composer-dropdown.hbs
- discourse/components/chat-composer-message-details.hbs
- discourse/components/chat-composer-upload.hbs
- discourse/components/chat-drawer/channel.hbs
- discourse/components/chat-drawer/header.hbs
- discourse/components/chat-drawer/header/back-link.hbs
- discourse/components/chat-drawer/header/channel-title.hbs
- discourse/components/chat-drawer/header/close-button.hbs
- discourse/components/chat-drawer/header/full-page-button.hbs
- discourse/components/chat-drawer/header/left-actions.hbs
- discourse/components/chat-drawer/header/right-actions.hbs
- discourse/components/chat-drawer/header/toggle-expand-button.hbs
- discourse/components/chat-drawer/index.hbs
- discourse/components/chat-emoji-avatar.hbs
- discourse/components/chat-full-page-header.hbs
- discourse/components/chat-mention-warnings.hbs
- discourse/components/chat-message-in-reply-to-indicator.hbs
- discourse/components/chat-message-separator-date.hbs
- discourse/components/chat-message-separator-new.hbs
- discourse/components/chat-message-text.hbs
- discourse/components/chat-message-thread-indicator.hbs
- discourse/components/chat-notice.hbs
- discourse/components/chat-notices.hbs
- discourse/components/chat-replying-indicator.hbs
- discourse/components/chat-side-panel-resizer.hbs
- discourse/components/chat-side-panel.hbs
- discourse/components/chat-skeleton.hbs
- discourse/components/chat-upload-drop-zone.hbs
- discourse/components/chat-upload.hbs
- discourse/components/chat-user-display-name.hbs
- discourse/components/chat/admin/export-messages.hbs
- discourse/components/chat/composer/button.hbs
- discourse/components/chat/composer/separator.hbs
- discourse/components/chat/message-creator.hbs
- discourse/components/chat/message-creator/channel-row.hbs
- discourse/components/chat/message-creator/user-row.hbs
- discourse/components/chat/message-creator/user-selection.hbs
- discourse/components/chat/message/avatar.hbs
- discourse/components/chat/message/error.hbs
- discourse/components/chat/message/info.hbs
- discourse/components/chat/message/left-gutter.hbs
- discourse/components/chat/modal/archive-channel.hbs
- discourse/components/chat/modal/channel-summary.hbs
- discourse/components/chat/modal/delete-channel.hbs
- discourse/components/chat/modal/move-message-to-channel.hbs
- discourse/components/chat/modal/new-message.hbs
- discourse/components/chat/modal/thread-settings.hbs
- discourse/components/chat/modal/toggle-channel-status.hbs
- discourse/components/chat/notices/mention_without_membership.hbs
- discourse/components/chat/scroll-to-bottom-arrow.hbs
- discourse/components/chat/thread-list/item.hbs
- discourse/components/chat/thread-list/item/unread-indicator.hbs
- discourse/components/chat/thread/header-unread-indicator.hbs
- discourse/components/chat/thread/threads-list-button.hbs
- discourse/components/chat/user-card-button.hbs
- discourse/components/full-page-chat.hbs
- discourse/components/reviewable-chat-message.hbs
- discourse/components/styleguide/organisms/chat.hbs
- discourse/components/toggle-channel-membership-button.hbs
- discourse/connectors/user-preferences-nav/chat-preferences.hbs


Skipped 37 files:

- discourse/components/channels-list.hbs
  The template contains usage of the {{action}} keyword, but the JS side imports { action } from @ember/object. It would have shadowed the template keyword.
- discourse/components/chat-browse-view.hbs
  The template contains usage of the {{action}} keyword, but the JS side imports { action } from @ember/object. It would have shadowed the template keyword.
- discourse/components/chat-channel-chooser-header.hbs
  It appears to be a classic class, convert it to native class first!
- discourse/components/chat-channel-chooser-row.hbs
  It appears to be a classic class, convert it to native class first!
- discourse/components/chat-channel.hbs
  Identifier 'ChatMessage' has already been declared. (50:7)
- discourse/components/chat-composer-uploads.hbs
  It appears to be a classic class, convert it to native class first!
- discourse/components/chat-composer.hbs
  Command failed: yarn eslint --fix "/Users/godfrey/code/discourse/plugins/chat/assets/javascripts/discourse/components/chat-composer.gjs"
error Command failed with exit code 1.
- discourse/components/chat-drawer.hbs
  It appears to be a classic class, convert it to native class first!
- discourse/components/chat-emoji-picker.hbs
  The template contains usage of the {{action}} keyword, but the JS side imports { action } from @ember/object. It would have shadowed the template keyword.
- discourse/components/chat-message-collapser.hbs
  Failed to resolve lazy-video (Component)
- discourse/components/chat-thread.hbs
  Identifier 'ChatMessage' has already been declared. (41:7)
- discourse/components/chat-to-topic-selector.hbs
  It appears to be a classic class, convert it to native class first!
- discourse/components/chat/modal/create-channel.hbs
  The template contains usage of the {{action}} keyword, but the JS side imports { action } from @ember/object. It would have shadowed the template keyword.
- discourse/components/chat/modal/edit-channel-description.hbs
  The template contains usage of the {{action}} keyword, but the JS side imports { action } from @ember/object. It would have shadowed the template keyword.
- discourse/components/chat/modal/edit-channel-name.hbs
  The template contains usage of the {{action}} keyword, but the JS side imports { action } from @ember/object. It would have shadowed the template keyword.
- discourse/components/collapser.hbs
  It appears to be a classic class, convert it to native class first!
- discourse/components/styleguide/chat-composer-message-details.hbs
  Failed to resolve styleguide-example (Component)
- discourse/components/styleguide/chat-composer.hbs
  Failed to resolve styleguide-example (Component)
- discourse/components/styleguide/chat-header-icon.hbs
  Failed to resolve styleguide-example (Component)
- discourse/components/styleguide/chat-message.hbs
  Failed to resolve styleguide-example (Component)
- discourse/components/styleguide/chat-modal-archive-channel.hbs
  Failed to resolve styleguide-example (Component)
- discourse/components/styleguide/chat-modal-channel-summary.hbs
  Failed to resolve styleguide-example (Component)
- discourse/components/styleguide/chat-modal-create-channel.hbs
  Failed to resolve styleguide-example (Component)
- discourse/components/styleguide/chat-modal-delete-channel.hbs
  Failed to resolve styleguide-example (Component)
- discourse/components/styleguide/chat-modal-edit-channel-description.hbs
  Failed to resolve styleguide-example (Component)
- discourse/components/styleguide/chat-modal-edit-channel-name.hbs
  Failed to resolve styleguide-example (Component)
- discourse/components/styleguide/chat-modal-move-message-to-channel.hbs
  Failed to resolve styleguide-example (Component)
- discourse/components/styleguide/chat-modal-new-message.hbs
  Failed to resolve styleguide-example (Component)
- discourse/components/styleguide/chat-modal-thread-settings.hbs
  Failed to resolve styleguide-example (Component)
- discourse/components/styleguide/chat-modal-toggle-channel-status.hbs
  Failed to resolve styleguide-example (Component)
- discourse/components/styleguide/chat-thread-list-item.hbs
  Failed to resolve styleguide-example (Component)
- discourse/components/user-menu/chat-notifications-list-empty-state.hbs
  cannot find class
- discourse/connectors/below-footer/chat-channel-message-emoji-picker-connector.hbs
  It does not appear to be a component!
- discourse/connectors/below-footer/chat-drawer-outlet.hbs
  It does not appear to be a component!
- discourse/connectors/below-footer/chat-message-actions-desktop-outlet.hbs
  It does not appear to be a component!
- discourse/connectors/below-footer/chat-message-actions-mobile-outlet.hbs
  It does not appear to be a component!
- discourse/connectors/user-card-below-message-button/chat-button.hbs
  It does not appear to be a component!

@github-actions github-actions bot added the chat PRs which include a change to Chat plugin label Nov 7, 2023
chancancode added a commit to chancancode/ember-codemod-template-tag that referenced this pull request Nov 7, 2023
Hardcoded a bunch of thins to make it work with Discourse – the
chat plugin to be specific.

We have a bunch of custom resolver rules that needs to be ported
over to make this work.

The overall strategry should be generalizable. We have a bunch of
custom resolver logic that needs to be ported over, the average app
can probably try to share code with the Embroider resolver – or use
the Resolver from `@embroider/core` directly with `.resolver.json`.

See discourse/discourse#24260 for how this
code was used in context.
chancancode added a commit to chancancode/ember-codemod-template-tag that referenced this pull request Nov 7, 2023
Hardcoded a bunch of thins to make it work with Discourse – the
chat plugin to be specific.

We have a bunch of custom resolver rules that needs to be ported
over to make this work.

The overall strategry should be generalizable. We have a bunch of
custom resolver logic that needs to be ported over, the average app
can probably try to share code with the Embroider resolver – or use
the Resolver from `@embroider/core` directly with `.resolver.json`.

See discourse/discourse#24260 for how this
code was used in context.
@chancancode
Copy link
Contributor Author

Updated and rebased for #24189

@jjaffeux
Copy link
Contributor

jjaffeux commented Nov 7, 2023

I would prefer to merge this next week, and you might have other conflicts tomorrow or friday.

That's awesome though 🚀

chancancode added a commit to chancancode/ember-codemod-template-tag that referenced this pull request Nov 7, 2023
Hardcoded a bunch of thins to make it work with Discourse – the
chat plugin to be specific.

We have a bunch of custom resolver rules that needs to be ported
over to make this work.

The overall strategry should be generalizable. We have a bunch of
custom resolver logic that needs to be ported over, the average app
can probably try to share code with the Embroider resolver – or use
the Resolver from `@embroider/core` directly with `.resolver.json`.

See discourse/discourse#24260 for how this
code was used in context.
@chancancode
Copy link
Contributor Author

Had to back out chat/message-creator for {{component}} usage, and updated the codemod to detect and reject that. Let's see if tests pass now 👀

@chancancode
Copy link
Contributor Author

I would prefer to merge this next week, and you might have other conflicts tomorrow or friday.

Pretty sure I can keep the pile of hacks working for at least one week :D

I can probably make it work with most of the code by then, maybe we just pick a day on the calendar to watch the codemod run and land a single giant commit across the codebase o_0

@chancancode
Copy link
Contributor Author

Tests are passing now, so pretty sure I have fixed the problem in the codemod, should be good to run it again whenever

@jjaffeux
Copy link
Contributor

jjaffeux commented Nov 7, 2023

I would prefer to merge this next week, and you might have other conflicts tomorrow or friday.

Pretty sure I can keep the pile of hacks working for at least one week :D

I can probably make it work with most of the code by then, maybe we just pick a day on the calendar to watch the codemod run and land a single giant commit across the codebase o_0

Yes Im fine with that, chat has a lot of tests too, so I'm not too afraid of breaking everything. And I will manually test your PR too. Let's try to aim for next tuesday if that's ok for you, I will warn you if there's some delay.

@jjaffeux
Copy link
Contributor

This is good to rebase and review. Ping me when you are ready, and I will review/test it 👍

Some of these files are quite small, and if we rename them in the same
commit where we inlined the template, Git may choose to see them as
different files. This commit forces Git to recognize the rename, which
will preserve the lineage of the refactored files.
@chancancode
Copy link
Contributor Author

chancancode commented Nov 13, 2023

@jjaffeux just re-ran the codemod against the latest main branch!

Successfully converted 61 files:

- discourse/components/channels-list.hbs
- discourse/components/chat-channel-archive-status.hbs
- discourse/components/chat-channel-card.hbs
- discourse/components/chat-channel-leave-btn.hbs
- discourse/components/chat-channel-metadata.hbs
- discourse/components/chat-channel-preview-card.hbs
- discourse/components/chat-channel-status.hbs
- discourse/components/chat-channel-unread-indicator.hbs
- discourse/components/chat-composer-dropdown.hbs
- discourse/components/chat-composer-message-details.hbs
- discourse/components/chat-composer-upload.hbs
- discourse/components/chat-drawer/channel.hbs
- discourse/components/chat-drawer/header.hbs
- discourse/components/chat-drawer/header/back-link.hbs
- discourse/components/chat-drawer/header/channel-title.hbs
- discourse/components/chat-drawer/header/close-button.hbs
- discourse/components/chat-drawer/header/full-page-button.hbs
- discourse/components/chat-drawer/header/left-actions.hbs
- discourse/components/chat-drawer/header/right-actions.hbs
- discourse/components/chat-drawer/header/toggle-expand-button.hbs
- discourse/components/chat-drawer/index.hbs
- discourse/components/chat-emoji-avatar.hbs
- discourse/components/chat-mention-warnings.hbs
- discourse/components/chat-message-in-reply-to-indicator.hbs
- discourse/components/chat-message-separator-date.hbs
- discourse/components/chat-message-separator-new.hbs
- discourse/components/chat-message-text.hbs
- discourse/components/chat-message-thread-indicator.hbs
- discourse/components/chat-notice.hbs
- discourse/components/chat-notices.hbs
- discourse/components/chat-replying-indicator.hbs
- discourse/components/chat-side-panel-resizer.hbs
- discourse/components/chat-side-panel.hbs
- discourse/components/chat-skeleton.hbs
- discourse/components/chat-upload-drop-zone.hbs
- discourse/components/chat-upload.hbs
- discourse/components/chat-user-display-name.hbs
- discourse/components/chat/admin/export-messages.hbs
- discourse/components/chat/composer/button.hbs
- discourse/components/chat/composer/separator.hbs
- discourse/components/chat/message/avatar.hbs
- discourse/components/chat/message/error.hbs
- discourse/components/chat/message/info.hbs
- discourse/components/chat/message/left-gutter.hbs
- discourse/components/chat/modal/archive-channel.hbs
- discourse/components/chat/modal/channel-summary.hbs
- discourse/components/chat/modal/delete-channel.hbs
- discourse/components/chat/modal/edit-channel-name.hbs
- discourse/components/chat/modal/move-message-to-channel.hbs
- discourse/components/chat/modal/thread-settings.hbs
- discourse/components/chat/modal/toggle-channel-status.hbs
- discourse/components/chat/notices/mention_without_membership.hbs
- discourse/components/chat/scroll-to-bottom-arrow.hbs
- discourse/components/chat/thread-list/item.hbs
- discourse/components/chat/thread-list/item/unread-indicator.hbs
- discourse/components/chat/user-card-button.hbs
- discourse/components/full-page-chat.hbs
- discourse/components/reviewable-chat-message.hbs
- discourse/components/styleguide/organisms/chat.hbs
- discourse/components/toggle-channel-membership-button.hbs
- discourse/connectors/user-preferences-nav/chat-preferences.hbs

Skipped 35 files:

- It does not appear to be a component!
  - discourse/connectors/below-footer/chat-channel-message-emoji-picker-connector.hbs
  - discourse/connectors/below-footer/chat-drawer-outlet.hbs
  - discourse/connectors/below-footer/chat-message-actions-desktop-outlet.hbs
  - discourse/connectors/below-footer/chat-message-actions-mobile-outlet.hbs
  - discourse/connectors/user-card-below-message-button/chat-button.hbs
- It appears to be a classic class, convert it to native class first!
  - discourse/components/chat-channel-chooser-header.hbs
  - discourse/components/chat-channel-chooser-row.hbs
  - discourse/components/chat-composer-uploads.hbs
  - discourse/components/chat-drawer.hbs
  - discourse/components/chat-to-topic-selector.hbs
  - discourse/components/collapser.hbs
- Cannot find class
  - discourse/components/user-menu/chat-notifications-list-empty-state.hbs
- The template contains usage of the {{action}} keyword, but the JS side imports { action } from @ember/object. It would have shadowed the template keyword.
  - discourse/components/chat-browse-view.hbs
  - discourse/components/chat-emoji-picker.hbs
  - discourse/components/chat/modal/create-channel.hbs
  - discourse/components/chat/modal/edit-channel-description.hbs
- Failed to resolve styleguide-example (Component)
  - discourse/components/styleguide/chat-composer-message-details.hbs
  - discourse/components/styleguide/chat-composer.hbs
  - discourse/components/styleguide/chat-header-icon.hbs
  - discourse/components/styleguide/chat-message.hbs
  - discourse/components/styleguide/chat-modal-archive-channel.hbs
  - discourse/components/styleguide/chat-modal-channel-summary.hbs
  - discourse/components/styleguide/chat-modal-create-channel.hbs
  - discourse/components/styleguide/chat-modal-delete-channel.hbs
  - discourse/components/styleguide/chat-modal-edit-channel-description.hbs
  - discourse/components/styleguide/chat-modal-edit-channel-name.hbs
  - discourse/components/styleguide/chat-modal-move-message-to-channel.hbs
  - discourse/components/styleguide/chat-modal-new-message.hbs
  - discourse/components/styleguide/chat-modal-thread-settings.hbs
  - discourse/components/styleguide/chat-modal-toggle-channel-status.hbs
  - discourse/components/styleguide/chat-thread-list-item.hbs
- Failed to resolve lazy-video (Component)
  - discourse/components/chat-message-collapser.hbs
- Identifier 'ChatMessage' has already been declared. (51:7)
  - discourse/components/chat-channel.hbs
- Identifier 'ChatMessage' has already been declared. (41:7)
  - discourse/components/chat-thread.hbs
- Command failed: yarn eslint --fix "/Users/godfrey/code/discourse/plugins/chat/assets/javascripts/discourse/components/chat-composer.gjs"
error Command failed with exit code 1.
  - discourse/components/chat-composer.hbs

Some of these can be fixed easily with some modification to the pre-conversion code (or some improvements to the codemod), but since this PR is big enough as it as, I think we should leave those for another time and just focus on the mechanically convertible ones here.

For the merging logistics, if we want to preserve the Git history lineage, we would want to ensure the first commit makes it into the main branch on its own, and everything else after that can be squashed. Otherwise, squashing the whole PR is fine too, I think on some smaller files Git would recognize it as a delete and add, rather than rename, so when, etc, git blame-ing or history diving in the future, that creates a bit of an inconvenience.

@jjaffeux
Copy link
Contributor

Agreed on just getting the big PR out of the way ASAP, and we can look at remaining files after. Having this around for too long will just cause merging issues. Im looking at it right now

@jjaffeux
Copy link
Contributor

I confirmed the spec failure is a flakey and not related, green locally. Also tried the full PR locally and couldn't find any issue.

Let's go 🚀 Thanks!

- convert chat/channels-list -> gjs
- convert chat/chat-channel-archive-status -> gjs
- convert chat/chat-channel-card -> gjs
- convert chat/chat-channel-leave-btn -> gjs
- convert chat/chat-channel-metadata -> gjs
- convert chat/chat-channel-preview-card -> gjs
- convert chat/chat-channel-status -> gjs
- convert chat/chat-channel-unread-indicator -> gjs
- convert chat/chat-composer-dropdown -> gjs
- convert chat/chat-composer-message-details -> gjs
- convert chat/chat-composer-upload -> gjs
- convert chat/channel -> gjs
- convert chat/header -> gjs
- convert chat/back-link -> gjs
- convert chat/channel-title -> gjs
- convert chat/close-button -> gjs
- convert chat/full-page-button -> gjs
- convert chat/left-actions -> gjs
- convert chat/right-actions -> gjs
- convert chat/toggle-expand-button -> gjs
- convert chat/index -> gjs
- convert chat/chat-emoji-avatar -> gjs
- convert chat/chat-mention-warnings -> gjs
- convert chat/chat-message-in-reply-to-indicator -> gjs
- convert chat/chat-message-separator-date -> gjs
- convert chat/chat-message-separator-new -> gjs
- convert chat/chat-message-text -> gjs
- convert chat/chat-message-thread-indicator -> gjs
- convert chat/chat-notice -> gjs
- convert chat/chat-notices -> gjs
- convert chat/chat-replying-indicator -> gjs
- convert chat/chat-side-panel-resizer -> gjs
- convert chat/chat-side-panel -> gjs
- convert chat/chat-skeleton -> gjs
- convert chat/chat-upload-drop-zone -> gjs
- convert chat/chat-upload -> gjs
- convert chat/chat-user-display-name -> gjs
- convert chat/export-messages -> gjs
- convert chat/button -> gjs
- convert chat/separator -> gjs
- convert chat/avatar -> gjs
- convert chat/error -> gjs
- convert chat/info -> gjs
- convert chat/left-gutter -> gjs
- convert chat/archive-channel -> gjs
- convert chat/channel-summary -> gjs
- convert chat/delete-channel -> gjs
- convert chat/edit-channel-name -> gjs
- convert chat/move-message-to-channel -> gjs
- convert chat/thread-settings -> gjs
- convert chat/toggle-channel-status -> gjs
- convert chat/mention_without_membership -> gjs
- convert chat/scroll-to-bottom-arrow -> gjs
- convert chat/item -> gjs
- convert chat/unread-indicator -> gjs
- convert chat/user-card-button -> gjs
- convert chat/full-page-chat -> gjs
- convert chat/reviewable-chat-message -> gjs
- convert chat/chat -> gjs
- convert chat/toggle-channel-membership-button -> gjs
- convert chat/chat-preferences -> gjs
@davidtaylorhq davidtaylorhq merged commit 3a0cdd2 into discourse:main Nov 14, 2023
14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
chat PRs which include a change to Chat plugin
Development

Successfully merging this pull request may close these issues.

3 participants