{"action":"created","issue":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/24659","repository_url":"https://api.github.com/repos/Automattic/wp-calypso","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/24659/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/24659/comments","events_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/24659/events","html_url":"https://github.com/Automattic/wp-calypso/pull/24659","id":320002618,"number":24659,"title":"Simple Payments: replace image uploader with media library","user":{"login":"vindl","id":1182160,"avatar_url":"https://avatars1.githubusercontent.com/u/1182160?v=4","gravatar_id":"","url":"https://api.github.com/users/vindl","html_url":"https://github.com/vindl","followers_url":"https://api.github.com/users/vindl/followers","following_url":"https://api.github.com/users/vindl/following{/other_user}","gists_url":"https://api.github.com/users/vindl/gists{/gist_id}","starred_url":"https://api.github.com/users/vindl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vindl/subscriptions","organizations_url":"https://api.github.com/users/vindl/orgs","repos_url":"https://api.github.com/users/vindl/repos","events_url":"https://api.github.com/users/vindl/events{/privacy}","received_events_url":"https://api.github.com/users/vindl/received_events","type":"User","site_admin":false},"labels":[{"id":285010029,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/Accessibility","name":"Accessibility","color":"006b75","default":false},{"id":285010038,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/Media","name":"Media","color":"006b75","default":false},{"id":780071208,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/Simple%20Payments","name":"Simple Payments","color":"006b75","default":false},{"id":285010023,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Status]%20Needs%20Design%20Review","name":"[Status] Needs Design Review","color":"13CDF7","default":false},{"id":285010018,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Status]%20Needs%20Review","name":"[Status] Needs Review","color":"fbca04","default":false},{"id":285009976,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Type]%20Enhancement","name":"[Type] Enhancement","color":"c7def8","default":false}],"state":"open","locked":false,"assignee":{"login":"vindl","id":1182160,"avatar_url":"https://avatars1.githubusercontent.com/u/1182160?v=4","gravatar_id":"","url":"https://api.github.com/users/vindl","html_url":"https://github.com/vindl","followers_url":"https://api.github.com/users/vindl/followers","following_url":"https://api.github.com/users/vindl/following{/other_user}","gists_url":"https://api.github.com/users/vindl/gists{/gist_id}","starred_url":"https://api.github.com/users/vindl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vindl/subscriptions","organizations_url":"https://api.github.com/users/vindl/orgs","repos_url":"https://api.github.com/users/vindl/repos","events_url":"https://api.github.com/users/vindl/events{/privacy}","received_events_url":"https://api.github.com/users/vindl/received_events","type":"User","site_admin":false},"assignees":[{"login":"vindl","id":1182160,"avatar_url":"https://avatars1.githubusercontent.com/u/1182160?v=4","gravatar_id":"","url":"https://api.github.com/users/vindl","html_url":"https://github.com/vindl","followers_url":"https://api.github.com/users/vindl/followers","following_url":"https://api.github.com/users/vindl/following{/other_user}","gists_url":"https://api.github.com/users/vindl/gists{/gist_id}","starred_url":"https://api.github.com/users/vindl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vindl/subscriptions","organizations_url":"https://api.github.com/users/vindl/orgs","repos_url":"https://api.github.com/users/vindl/repos","events_url":"https://api.github.com/users/vindl/events{/privacy}","received_events_url":"https://api.github.com/users/vindl/received_events","type":"User","site_admin":false}],"milestone":null,"comments":15,"created_at":"2018-05-03T16:59:31Z","updated_at":"2018-05-09T16:37:09Z","closed_at":null,"author_association":"MEMBER","pull_request":{"url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/24659","html_url":"https://github.com/Automattic/wp-calypso/pull/24659","diff_url":"https://github.com/Automattic/wp-calypso/pull/24659.diff","patch_url":"https://github.com/Automattic/wp-calypso/pull/24659.patch"},"body":"Resolves https://github.com/Automattic/wp-calypso/issues/24588\r\n\r\nDesign post: p9Jlb4-7j-p2\r\nMaster thread: p3fqKv-6vq-p2\r\n\r\nSo far we've been using the image uploder which prevented users from easily reusing images from their media library or free photo library.\r\n\r\n### Testing instructions\r\n\r\n1. Navigate to `/post/{site}`.\r\n2. Click on `+Add` > `Simple Payment Button`.\r\n3. Verify that Media Library opens and that you can save the image with it.\r\n4. Try removing the existing image and saving.\r\n5. Try various operations and attempt to break it. :)\r\n6. Make sure that Simple Payments form fields are now accessible.\r\n7. Make sure that performance issue documented [here](https://github.com/Automattic/wp-calypso/pull/24659#issuecomment-386874337) is no longer present.\r\n\r\n### Proposed changes\r\n\r\n1. Replaces the file upload prompt with Media Library in Simple Payments dialog.\r\n2. Adds focus styles and keyboard events in order to improve the accessibility of Simple Payments dialog."},"comment":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/comments/387799766","html_url":"https://github.com/Automattic/wp-calypso/pull/24659#issuecomment-387799766","issue_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/24659","id":387799766,"user":{"login":"vindl","id":1182160,"avatar_url":"https://avatars1.githubusercontent.com/u/1182160?v=4","gravatar_id":"","url":"https://api.github.com/users/vindl","html_url":"https://github.com/vindl","followers_url":"https://api.github.com/users/vindl/followers","following_url":"https://api.github.com/users/vindl/following{/other_user}","gists_url":"https://api.github.com/users/vindl/gists{/gist_id}","starred_url":"https://api.github.com/users/vindl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vindl/subscriptions","organizations_url":"https://api.github.com/users/vindl/orgs","repos_url":"https://api.github.com/users/vindl/repos","events_url":"https://api.github.com/users/vindl/events{/privacy}","received_events_url":"https://api.github.com/users/vindl/received_events","type":"User","site_admin":false},"created_at":"2018-05-09T16:37:08Z","updated_at":"2018-05-09T16:37:08Z","author_association":"MEMBER","body":"> @vindl as @dmsnell suggested earlier, it'd probably be easiest to write our own isEquals function to further debug (with cycle detection/debug statements).\r\n\r\n@gwwar I tried this too and managed to get to a point of detecting cycles and kicking in the debug and logging statements when the issue occurs. One weird thing that I noticed is that `ProductForm` and its descendants are being checked in the above mentioned `[componentWillReceiveProps](https://github.com/Automattic/wp-calypso/blob/master/client/components/section-nav/index.jsx#L48)` ad infinitum. I tried to get to the root cause of it but couldn't find the pattern (it takes a lot of steps for the cycle to repeat itself, and the objects that are passed to equality checks are quite complex). It's also not obvious from SectionNav and MediaLibrary code how are product form fields ending up there.\r\n\r\nHopefully the steps provided in https://github.com/Automattic/wp-calypso/pull/24659#issuecomment-387793897 are convincing enough, even though they don't provide a definitive answer to the _why_ question. If not, I could really use some help with investigating this, since I've been staring at this code for quite a while and might be missing something obvious at this point."}}
{"actor":{"display_login":"vindl"}}