{"action":"created","issue":{"url":"https://api.github.com/repos/reactioncommerce/reaction/issues/3853","repository_url":"https://api.github.com/repos/reactioncommerce/reaction","labels_url":"https://api.github.com/repos/reactioncommerce/reaction/issues/3853/labels{/name}","comments_url":"https://api.github.com/repos/reactioncommerce/reaction/issues/3853/comments","events_url":"https://api.github.com/repos/reactioncommerce/reaction/issues/3853/events","html_url":"https://github.com/reactioncommerce/reaction/pull/3853","id":300811564,"number":3853,"title":"Convert search modal wrapper to React","user":{"login":"mikemurray","id":42217,"avatar_url":"https://avatars3.githubusercontent.com/u/42217?v=4","gravatar_id":"","url":"https://api.github.com/users/mikemurray","html_url":"https://github.com/mikemurray","followers_url":"https://api.github.com/users/mikemurray/followers","following_url":"https://api.github.com/users/mikemurray/following{/other_user}","gists_url":"https://api.github.com/users/mikemurray/gists{/gist_id}","starred_url":"https://api.github.com/users/mikemurray/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mikemurray/subscriptions","organizations_url":"https://api.github.com/users/mikemurray/orgs","repos_url":"https://api.github.com/users/mikemurray/repos","events_url":"https://api.github.com/users/mikemurray/events{/privacy}","received_events_url":"https://api.github.com/users/mikemurray/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-02-27T22:07:01Z","updated_at":"2018-02-28T01:37:15Z","closed_at":null,"author_association":"MEMBER","pull_request":{"url":"https://api.github.com/repos/reactioncommerce/reaction/pulls/3853","html_url":"https://github.com/reactioncommerce/reaction/pull/3853","diff_url":"https://github.com/reactioncommerce/reaction/pull/3853.diff","patch_url":"https://github.com/reactioncommerce/reaction/pull/3853.patch"},"body":"Resolves #3424  \r\nImpact: **breaking**  \r\nType: **refactor**\r\n\r\n## Important Note\r\n\r\nThis was branched off of `refactor-3495-mikemurray-react16` which has the update to React `16.2.0` See PR https://github.com/reactioncommerce/reaction/pull/3801 for more details.\r\n\r\nThis PR should be merged after or in place of https://github.com/reactioncommerce/reaction/pull/3801\r\n\r\n## Issue\r\n\r\nThe search modal, while being all react, was being injected into the dom tree using Blaze and jQuery. This PR removes the dependency on Blaze and the search modal Blaze wrappers in favor of a React only solution.\r\n\r\n## Solution\r\n\r\nUsed Portals in React 16 to inject the search modal in the DOM container `search-modal-root` outside of `react-root` to ensure the modal is not restricted by other containers. \r\n\r\nPortals allow for React components to live anywhere in the DOM tree while still being part of the _React tree_. This is especially useful for modals where a parent component may have an `overflow:hidden` that would make the modal not visible if rendered in that container.\r\n\r\nMore info on portals: https://reactjs.org/docs/portals.html\r\n\r\njQuery was removed as a dependency. It was used to auto select the search input on the modal show, as well as highlighting the active tab between \"Products\" and \"Accounts\" for admins. This has been refactored to the React way.\r\n\r\n## Breaking changes\r\n\r\n**Marked as breaking mainly because files were removed.**\r\n\r\nRemoved search modal Blaze wrapper component and imports.\r\n\r\nThe implementation of `core/ui-navbar` and `core/ui-search` is now using Portals in React 16 to add the search modal to the DOM tree.\r\n\r\n## Testing\r\n\r\nThe search modal should be able to be opened, used, and closed by both admin and customers. Admins should additionally be able to search for accounts in the search modal.\r\n\r\nAdd as many products and users as needed to ensure the search modal works as expected.\r\n\r\n**Test 1**\r\n1. As a customer\r\n2. Open search modal, and type in \"basic\" to see the basic reaction product\r\n3. Close the modal\r\n\r\n**Test 2**\r\n1. As an admin\r\n1. Open search modal, and type in \"basic\" to see the basic reaction product\r\n1. Switch to the accounts tab and search for an account, or the admin account\r\n1. Close the modal\r\n"},"comment":{"url":"https://api.github.com/repos/reactioncommerce/reaction/issues/comments/369090298","html_url":"https://github.com/reactioncommerce/reaction/pull/3853#issuecomment-369090298","issue_url":"https://api.github.com/repos/reactioncommerce/reaction/issues/3853","id":369090298,"user":{"login":"mikemurray","id":42217,"avatar_url":"https://avatars3.githubusercontent.com/u/42217?v=4","gravatar_id":"","url":"https://api.github.com/users/mikemurray","html_url":"https://github.com/mikemurray","followers_url":"https://api.github.com/users/mikemurray/followers","following_url":"https://api.github.com/users/mikemurray/following{/other_user}","gists_url":"https://api.github.com/users/mikemurray/gists{/gist_id}","starred_url":"https://api.github.com/users/mikemurray/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mikemurray/subscriptions","organizations_url":"https://api.github.com/users/mikemurray/orgs","repos_url":"https://api.github.com/users/mikemurray/repos","events_url":"https://api.github.com/users/mikemurray/events{/privacy}","received_events_url":"https://api.github.com/users/mikemurray/received_events","type":"User","site_admin":false},"created_at":"2018-02-28T01:37:14Z","updated_at":"2018-02-28T01:37:14Z","author_association":"MEMBER","body":"@aaronjudd 👍 "}}
{"actor":{"display_login":"mikemurray"}}