[issue] let edit feature fit figma design & UX smooth

[sync-by-unito]

Updated: order to fit figma design for asset page edit feature (see comment or sub-task)

1. Temporarily remove "edit" on options list now.
2. add back this edit totally fit figma design, like this flow → could add them on future sprint
3. when Bump protractor from 5.4.4 to 7.0.0 #2 finish, remove current edit feature on iframe

Reproduce steps

1. choose an asset, press upper right button
2. press edit
3. type content, press "ok"
4. the caption doesn't display the new content, need re-enter could display it.

User story

As a capture app user, I want the edited content could be display immediately so that I can confirm the caption is.

┆Issue is synchronized with this Asana task by Unito
┆Created By: Kenny Hung
┆Link To Task: https://app.asana.com/0/1201016280880500/1203292734517486

[sync-by-unito]

➤ Sam commented:

Here is PR ( #2278 ) (claap included)

[sync-by-unito]

➤ Sam commented:

Kenny Hung, when I was doing this task I also realized that I can improve explore tab reload.

Here is the reload explore tab UX before ( https://i.imgur.com/gafQtkI.mp4 ) and after ( https://i.imgur.com/ER1yXWD.mp4 ).

If you want I can

• create a ticket something like (better UX for reload explore tab)
• add as a dependency for v221108
• and submit the PR code

Or we can do it next sprint let me know what you think

[sync-by-unito]

➤ Kenny Hung commented:

Sam (cc Tammy Yang )You mean you could improve the explore tab reload performance further?

[sync-by-unito]

➤ Tammy Yang commented:

Sam yes, please do. Performance is the biggest priority in general, so let's always try to include the fix in the latest confident sprint

[sync-by-unito]

➤ Kenny Hung commented:

SamTammy Yang I have opened this card improve explore tab reload ( https://app.asana.com/0/1201016280880500/1203324312350000/f )and add as depoendency for v221108. Thanks.

[sync-by-unito]

➤ Bofu Chen commented:

Sam Can you remind me that why do we need this PR: #2278 (review) ( #2278 (review) )

Currently, to update the caption, I can

1. Click an asset in the profile tab
2. Click the asset's caption directly (not click the settings button on the top-right corner)
3. Edit the caption

SamTammy Yang Is it better if we

1. remove the "Edit" option, or
2. make it have the same behavior as clicking the caption

[sync-by-unito]

➤ Sam commented:

Bofu Chen without this commit if you update caption the changes will not be reflected so you need to go back and open details page to see updated caption

So that pr reloads iframe in details page when caption is updated.

[sync-by-unito]

➤ Bofu Chen commented:

If I updated the caption by clicking it directly, I can update the caption smoothly.

If I updated the caption by clicking the "Edit" option, I can reproduce this issue. That's why I suggest to remove the "Edit" option or leverage the existing mechanism.

[sync-by-unito]

➤ Sam commented:

Kenny Hung, did you know that we can update the caption from the iframe?
Here is the demo ( https://i.imgur.com/uLkMtKd.mp4 ), I think updating the caption from the iframe is better because it works well with the iframe.

[sync-by-unito]

➤ Kenny Hung commented:

I know that, but from figma design, it should edit on options button. It's my proposal.

1. Temporarily remove "edit" on options list now.
2. add back this edit totally fit figma design, like this flow ( https://app.claap.io/numbers-protocol/edit-feature-on-figma-design-c-O35CsUM4Uy-Mv2bQgEt4GjX ) → could add them on future sprint
3. when Bump protractor from 5.4.4 to 7.0.0 #2 finish, remove current edit feature on iframe

It could have the close UX in a short term & fit the figma design in the future.
How about you? Tammy YangSamEthan Wu

[sync-by-unito]

➤ Tammy Yang commented:

Kenny Hung agreed, let's do that.
Make sure edit in iframe match the Figma design.

[sync-by-unito]

➤ Ethan Wu commented:

so i think the challenge here is that for the asset page in profile tab we leverage both ionic and iframe elements

asset page (iframe)

top tool bar (ionic)

[sync-by-unito]

➤ Kenny Hung commented:

rename this asana card.
Sam because the 0.69.1 is release to QA, I will add the sub-task to track and add it ( https://app.asana.com/0/0/1203342620207712/f ) to next Tuesday release.
Ethan Wu yes, so I think we need more time to figure it out.

[sync-by-unito]

➤ Sam commented:

Kenny Hung, can I get the flow URL, please. from this [claap ( https://app.claap.io/numbers-protocol/edit-feature-on-figma-design-c-O35CsUM4Uy-Mv2bQgEt4GjX )]

[sync-by-unito]

➤ Kenny Hung commented:

Sam could refer this one ( https://www.figma.com/proto/uJY6VfDPXTxoF3qQz9Nv5P/Capture-App?node-id=467%3A3654&scaling=scale-down&page-id=467%3A2960&starting-point-node-id=467%3A4167 )

[sync-by-unito]

➤ Sam commented:

Ethan Wu here is the proposal ( https://app.claap.io/numbers-protocol/ethan-proposal-on-how-to-implement-edit-caption-c-O35CsUM4Uy-jwV7mbmEbft_ ) on how to implement edit caption and fit UX design.

From the bubble side, you need to send events like "cancel" or "save".

• For cancel button, you can use this script

  • window.parent.postMessage('edit-caption-cancel', '*');

• For save caption button you can use this script

  • window.parent.postMessage('edit-caption-save', '*');

And from the capture app, I receive those events and do some logic such as

• navigate back.
• navigate back and reload the iframe on the details page to reflect caption changes.

[sync-by-unito]

➤ Ethan Wu commented:

Sam for the save event will ionic do the capture edit or will we call it from the bubble side.

[sync-by-unito]

➤ Sam commented:

Bubble side will do edit and saving.
Ionic side just receives events indicating that caption was saved or canceled

[sync-by-unito]

➤ Ethan Wu commented:

Sam do we need to change the page layout?

according to the flow that kenny provided the "save" button is in the top bar and i believe that is an ionic component

[sync-by-unito]

➤ Sam commented:

Ethan Wu yes all ui components are implemented in bubble side

[sync-by-unito]

➤ Ethan Wu commented:

Sam so when we enter the edit page the back button and save buttons will all be bubble?

[sync-by-unito]

➤ Sam commented:

All will be bubble side. From ionic side I only provide a screen that will host iframe

[sync-by-unito]

➤ Ethan Wu commented:

Sam so there will be no ionic components in the screen view?

[sync-by-unito]

➤ Sam commented:

Ethan Wu correct. No ionic components. All in bubble: back button, save button and form inputs.

[sync-by-unito]

➤ Ethan Wu commented:

ok so which iframe url are you going to pass on this screen?

[sync-by-unito]

➤ Sam commented:

Edit caption screen will only host iframe and pass capture id to iframe url

And listen for postMessages() from bubble side:
Edit-caption-save edit-caption-cancel

[sync-by-unito]

➤ Ethan Wu commented:

Sam ok got it. i will work on it

[sync-by-unito]

➤ Sam commented:

Ethan Wu i assume ../edit-caption/?cid=xxxx

[sync-by-unito]

➤ Ethan Wu commented:

Sam yeah something like that. i just need to understand whether or not i needed to create another bubble page and it looks like i need to.

before everything was done in the asset page

[sync-by-unito]

➤ Sam commented:

Ethan Wu, I thought you will copy the existing edit caption in a new page😅.

[sync-by-unito]

➤ Ethan Wu commented:

Sam yeah it won't be difficult to do. i will just copy over the asset page and strip out the elements that aren't related to edit capture and fix up the top bar. no worries haha

[sync-by-unito]

➤ Sam commented:

Ethan Wu, okay thank you 🙏. Please let me know if I can assist.

Once bubble UI implementation is done I need one more thing

• When back button is clicked on the bubble side please run this JS

  • window.parent.postMessage('edit-caption-cancel', '*');

• When save button is clicked please run this js

  • window.parent.postMessage('edit-caption-save', '*');

And from ionic side I will do the rest. So if its edit-caption-cancel I just navigate back. But if it's edit-caption-save I will navigate back and reload iframe in details page.

P.S: just to clarify caption save still happens on bubble side.

[sync-by-unito]

➤ Ethan Wu commented:

Sam the page is ready. you can test with this iframe url link:

https://captureappiframe.numbersprotocol.io/version-v221115/edit/?from=mycapture ( https://captureappiframe.numbersprotocol.io/version-v221115/edit/?from=mycapture )&nid=&token=&refresh_token=

[sync-by-unito]

➤ Ethan Wu commented:

iframe miro flow: https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764538497206342&cot=14 ( https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764538497206342&cot=14 )

[sync-by-unito]

➤ Sam commented:

here is the PR ( #2310 )

[sync-by-unito]

➤ Bofu Chen commented:

Reference: Edit button UX in Figma ( https://www.figma.com/proto/uJY6VfDPXTxoF3qQz9Nv5P/Capture-App?node-id=199%3A4990&scaling=scale-down&page-id=50%3A158&starting-point-node-id=289%3A4752 )

[sync-by-unito]

➤ Ethan Wu commented:

the above is the current flow implemented

[sync-by-unito]

➤ Kenny Hung commented:

Sam (cc Ethan Wu) There are some questions about edit feature on asset page options.

1. When I use iframe qa version, it could display, but I tried on live version, it will display as this attachment. Does this feature needs iframe deploy iframe-v221115?
2. When I modified through edit(options), after I press save & back to asset page, the option still doesn't change. It still needs to leave & come back this page, then could see the caption changed.
3. iframe edit still exists.

[sync-by-unito]

➤ Sam commented:

Kenny Hung let me check

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung it needs to be deployed before it can be used

the edit page only exists in qa-release branch

[sync-by-unito]

➤ Kenny Hung commented:

Thanks Ethan Wu clarify.
Sam I tried it on 0.69.2 x iframe qa, found #2.
Remind: only when #2 fixed, we could implement #3.

[sync-by-unito]

➤ Sam commented:

Ethan Wu, I'm testing 0.69.2 edit caption URL is https://captureappiframe.numbersprotocol.io/edit?nid=bafy... (full link ( https://captureappiframe.numbersprotocol.io/edit?nid=bafybeiho7yluaerld5y45tbjvk7gzwrahot2sp53zhj745kgq6rdqxyi5m&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjY5MDk1MTk5LCJqdGkiOiI0MTRhY2RiMTQyZTY0ZTc0YmJkOTNjMzZhY2ZlMzAxYSIsInVzZXJfaWQiOjQxMTczM30.JRxEvTusUa3F8e5WUWJ6ot2XAbZIZ51Xs6eWZvVP4pg&refresh_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTY2OTE4MTI5OSwianRpIjoiNGRkZTg2NmUzMTExNGVkYmE4YzZlZDY0MTExZjA0YmEiLCJ1c2VyX2lkIjo0MTE3MzN9.kSks_LbjiiNK9RFlB99kT0YfC4D-hTyrXprfDg7OJRw&from=mycapture )) if you open full open full link it's 404.

I can confirm Kenny's issue.

Ethan Wu, can you please check /edit url?

Maybe it's not deployed yet?

[sync-by-unito]

➤ Ethan Wu commented:

Sam its not deployed yet

[sync-by-unito]

➤ Kenny Hung commented:

Ethan WuSam
Just confirm, when v221115 deployed, #2 could be fixed?

[sync-by-unito]

➤ Sam commented:

Kenny Hung, I believe #2 can be fixed when captureirame is deployed (Ethan Wu mentioned it's not deployed yet).

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung yes you should not test the edit page until the v221115 is deployed

[sync-by-unito]

➤ Sam commented:

I believe there are no extra actions needed from the ionic side because it's working when iframe is qa-branch. Just need to wait when iframe prod branch is deployed and test again.