3253ba2c7a
Prior to this commit, we were somewhat naively rendering Hash style data attributes in our ERB templates. By rendering each hash attribute separately, we were rendering characters that could break the javascript (e.g. double hack or backslash `"` or `\`). By moving to this view_object rendering, we leverage Rails's `to_json` behavior to ensure properly escaped values. As part of this exercise, I generalized the method to allow for other places to benefit from this behavior. This generalization also helps ensure that we have a more conformant rendering (e.g. we should always have an :id, :className, and :name value in our data-info hash). _Note: I've updated the user's names for Cypress tests as they are more likely to catch the particular issue than anything else. I assume that I'm going to break some cypress tests and will need some help fixing them._ Closes #15916, #14704 Supersedes #15983 How to test locally: Assuming you have seeded database (e.g. `rails db:seed`), checkout the "main" branch. Then in `rails console` find a user that's written articles: ```ruby user = Article.last.user user.update(name: "\\: #{user.name}") user.articles.each(&:save) ``` Now, again on the "main" branch, start your application (e.g., `bin/startup`). Then get a logged in and a logged out browser session going. Open your web inspector and open console. Then go to the local instances homepage (e.g., http://localhost:3000) and look for JS errors. On the main branch, you should see an exception around `JSON.parse(button.data.info)` (assuming that the `user`'s article is rendered on the homepage). Then go to the user's page (e.g. https://localhost:3000/:user-slug) and look for JS parse errors. On this PR's branch (e.g., `jeremyf/take-two-at-resolving-gh-15916`) you shouldn't see those console errors. More importantly, the Follow buttons should work.
36 lines
1.5 KiB
Ruby
36 lines
1.5 KiB
Ruby
# Throughout Forem, we encode JSON information in our Ruby templates.
|
|
# By convention, we often have a data-info attribute that is a Hash.
|
|
#
|
|
# This module provides some much needed character escaping to ensure
|
|
# that our JS that parses the data-info attribute doesn't choke.
|
|
#
|
|
# @see ./app/javascript/packs/followButtons.js for parsing
|
|
module DataInfo
|
|
# A convenience method to ensure properly escape JSON data attributes.
|
|
#
|
|
# @param object [#class, #id, #name] responds to `#class`, `#id`,
|
|
# and `#name`, though you can "cheat" and pass the specific
|
|
# values to allow for over-riding (or when you have not quite
|
|
# well formed objects; looking at ArticleDecorator's
|
|
# cached_user. It's not quite a valid object.)
|
|
# @param id [String, Integer]
|
|
# @param class_name [String]
|
|
# @param name [String]
|
|
# @param kwargs [Hash] any additional attributes to include in the
|
|
# JSON object. In some cases we include a "style" attribute.
|
|
#
|
|
# @return [String] JSON formatted string.
|
|
#
|
|
# @example
|
|
# > DataInfo.to_json(object: User.first, name: "Duane \"The Rock\" Johnson", id: 1, style: "full")
|
|
# => "{\"user_id\":1,\"className\":\"User\",\"style\":\"full\",\"name\":\"Duane \\\"The Rock\\\" Johnson\"}"
|
|
def self.to_json(object:, id: object.id, class_name: object.class_name, name: object.name, **kwargs)
|
|
kwargs.merge(
|
|
{
|
|
id: id,
|
|
className: class_name,
|
|
name: name
|
|
},
|
|
).to_json
|
|
end
|
|
end
|