Mobile drafts #8280

Rajat-Dabade · 2024-10-22T11:58:38Z

Summary

Separate tab for Drafts in mobile.

Ticket Link

https://mattermost.atlassian.net/browse/MM-39356

Checklist

Added or updated unit tests (required for all new features)
Has UI changes
Includes text changes and localization file updates
Have tested against the 5 core themes to ensure consistency between them.
Have run E2E tests by adding label E2E iOS tests for PR.

Device Information

This PR was tested on: iOS version 17.5 (Both on iPhone and ipad)

Screenshots

Release Note

Added a feature for having a separate tab for Drafts in mobile.

Note:
Will cover all the test case for this PR in separate PR.

Rajat-Dabade · 2024-10-22T12:08:13Z

/update-branch

larkox

Great work! Some comments.

app/actions/local/draft.ts

app/components/draft/draft.tsx

app/components/draft/draft_post/draft_files/index.ts

app/components/post_draft/post_input/post_input.tsx

app/queries/servers/drafts.ts

app/screens/global_threads/global_threads.tsx

assets/base/i18n/en.json

Rajat-Dabade · 2024-11-12T14:40:09Z

/update-branch

yasserfaraazkhan

Thank you @Rajat-Dabade

Most flows around

Creating Draft in DM, GM, Channel, Threads, Private Chanel, under deleted thread ✅
Sending Threads, Editing threads work as expected. ✅

There couple of flow I wanted to bring to your notice

On the Draft Screen, if we hit on Android's back button (not the back arrow of MM app) the app closes instead of going back to channels list page
Once all drafts are sent out from the draft page, we have an empty page looking like below. would it be nice to add a 'No drafts at the moment' icon, like in web app. @asaadmahmood thoughts?

Rajat-Dabade · 2024-11-18T09:41:21Z

Thank you @yasserfaraazkhan for reviewing the code.

On the Draft Screen, if we hit on Android's back button (not the back arrow of MM app) the app closes instead of going back to channels list page

Let me check on this.

Once all drafts are sent out from the draft page, we have an empty page looking like below. would it be nice to add a 'No drafts at the moment' icon, like in web app. @asaadmahmood thoughts?

I remember having an empty screen for the draft view, let me add it.

Rajat-Dabade · 2024-11-18T17:28:55Z

@yasserfaraazkhan

On the Draft Screen, if we hit on Android's back button (not the back arrow of MM app) the app closes instead of going back to channels list page ✅
Once all drafts are sent out from the draft page, we have an empty page looking like below. would it be nice to add a 'No drafts at the moment' icon, like in web app. @asaadmahmood thoughts? ✅

Can you please review again? Thanks.

yasserfaraazkhan

Thank you @Rajat-Dabade
just 1 last change, in below flow

Scenarios 1:
Steps:

From Draft page, Edit a draft. Verify you are taken to the Channel/DM/GM
Edit the Draft in the Channel
Click on the < back Icon on the channel

This is taking user to Draft page. should it take user to Channels List page?

Scenarios 2:

With above steps, if we edit draft message (without sending it) and Click back button, the draft message is not updated.

Screen.Recording.2024-11-19.at.12.16.41.AM.mov

Scenario 3:

The User group Name is shown like below

on web app it show as below

asaadmahmood

Overall looks good to me, minor changes though.

https://www.loom.com/share/37c3dde4ec484cd2a61d5afe00bb1657?from_recorder=1&focus_title=1

yasserfaraazkhan · 2025-01-13T09:57:49Z

Thank you @Rajat-Dabade

As expected we can't send in private channel, when User is removed
As expected we can't send in archived channel
As expected we can send in GM/DM when they are closed.
We see error when we send the Draft in a Channel that was changed to Read-only

- Able to create, delete and send Drafts, in different channel, teams multiple servers.

Rajat-Dabade · 2025-01-13T10:24:03Z

@yasserfaraazkhan Thank you for testing.

Regarding the issue you mentioned: I have created a ticket for it: https://mattermost.atlassian.net/browse/MM-62513. It's not a blocker. Will take care of this issue in subsequent PR.

asaadmahmood

LGTM, we just need to update the drafts icon to:
icon-send-outline.

https://mattermost.github.io/compass-icons/

Rajat-Dabade · 2025-01-13T11:32:55Z

Done @asaadmahmood Updated the Icon.

Elias is OOO, his feedback has been addressed and Rahim was included for additional review

mattermost-build · 2025-01-13T13:10:06Z

Cherry pick is scheduled.

* refactor: started with draft, done until new tabs for draft * refactor: change the query and added the screen for draft * added condition for fetching draft for channel delete or not * refactor: added draft screen * linter fixes * Added draft post component * added avatar and header display name for the draft post list * added channel info component * channel info completed * proper naming * added image file markdown acknowledgement support * draft actions * Fix the draft receiver in drafts * separated send message handler * Done with send drafts * done with delete drafts * change save to send draft * handle lengthy message with show more button * done with persistent message edit, send and delete drafts * added alert for sending message * added update at time for the drafts * en.json extract fix * Updated dependencies for useCallback * refactor: added drafts list to animated list * added swipeable component and delete conformation for drafts * done with rendering of images in markdown for drafts * en.json issue fixed * fix en.json issue * refactor: en.json fix * addressed review comments * updated image metadata handling code * linter fixes * added the empty draft screen * linter fix * style fix * back button an android takes to the channel list page * en.json fix * draft actions theme compatible * CSS fix for draft channel_info and avatar component * removed the badge icon and change font style drafts * fix send alert sender name for GMs * updated snapshot * added testId to the drafts components * updated send draft test id * clicking on draft takes to the channel * Added toptip for draft tours * intl extract * Rebase to main and reverted local testing changes * Added tooltip for drafts * addressed review comments * reset navigation when click on a draft in draft tabs * fix the theme issue and navigation issue * reverted back the draft click navigation changes * observing draft when hitting back button * removed the unwanted animiation * updated regex for parsing markdown * removed unnecessary checks and change folder name * removed react memo and merge unwanted observes function * removed unnecessary comments * changed the name for observing and querying draft function * removed memo from component level * Text to FormattedText component * Text to formatted text, change image name * added confirmation modal for deleting draft from bottomsheet * using common send_handler for both draft and post * removed magic number for tooltip and bottomsheet * renamed channel_info to draft_post_header * text to formattedText for Edit drafts * removed unnecessary changes * minor fixes * mounting draft only when there is draft * map to reduce * renamed SwipeableDraft to DraftSwipeAction * name fixes * isValidUrl to isParsableUrl and added test * added test and addressed minor review comments * added inline component for the duplicate code * inlt fixes * clearDraft is not optional * optimised categories_list.tsx component * Swipeable to ReanimatedSwipeable, TouchableWithoutFeedback to Pressable and folder name changes * Added comment and disabled eslint rule for showing warning * fixed component file name * minor' * Removed deprecated Animated createAnimatedComponent flatlist * added test for missing protocol check * import change for SwipeableMethod * active tab for tablet view * Updated the drafts icons * Updated compass-icon version to v0.1.48 --------- Co-authored-by: Mattermost Build <[email protected]> (cherry picked from commit 84eded1)

* refactor: started with draft, done until new tabs for draft * refactor: change the query and added the screen for draft * added condition for fetching draft for channel delete or not * refactor: added draft screen * linter fixes * Added draft post component * added avatar and header display name for the draft post list * added channel info component * channel info completed * proper naming * added image file markdown acknowledgement support * draft actions * Fix the draft receiver in drafts * separated send message handler * Done with send drafts * done with delete drafts * change save to send draft * handle lengthy message with show more button * done with persistent message edit, send and delete drafts * added alert for sending message * added update at time for the drafts * en.json extract fix * Updated dependencies for useCallback * refactor: added drafts list to animated list * added swipeable component and delete conformation for drafts * done with rendering of images in markdown for drafts * en.json issue fixed * fix en.json issue * refactor: en.json fix * addressed review comments * updated image metadata handling code * linter fixes * added the empty draft screen * linter fix * style fix * back button an android takes to the channel list page * en.json fix * draft actions theme compatible * CSS fix for draft channel_info and avatar component * removed the badge icon and change font style drafts * fix send alert sender name for GMs * updated snapshot * added testId to the drafts components * updated send draft test id * clicking on draft takes to the channel * Added toptip for draft tours * intl extract * Rebase to main and reverted local testing changes * Added tooltip for drafts * addressed review comments * reset navigation when click on a draft in draft tabs * fix the theme issue and navigation issue * reverted back the draft click navigation changes * observing draft when hitting back button * removed the unwanted animiation * updated regex for parsing markdown * removed unnecessary checks and change folder name * removed react memo and merge unwanted observes function * removed unnecessary comments * changed the name for observing and querying draft function * removed memo from component level * Text to FormattedText component * Text to formatted text, change image name * added confirmation modal for deleting draft from bottomsheet * using common send_handler for both draft and post * removed magic number for tooltip and bottomsheet * renamed channel_info to draft_post_header * text to formattedText for Edit drafts * removed unnecessary changes * minor fixes * mounting draft only when there is draft * map to reduce * renamed SwipeableDraft to DraftSwipeAction * name fixes * isValidUrl to isParsableUrl and added test * added test and addressed minor review comments * added inline component for the duplicate code * inlt fixes * clearDraft is not optional * optimised categories_list.tsx component * Swipeable to ReanimatedSwipeable, TouchableWithoutFeedback to Pressable and folder name changes * Added comment and disabled eslint rule for showing warning * fixed component file name * minor' * Removed deprecated Animated createAnimatedComponent flatlist * added test for missing protocol check * import change for SwipeableMethod * active tab for tablet view * Updated the drafts icons * Updated compass-icon version to v0.1.48 --------- Co-authored-by: Mattermost Build <[email protected]> (cherry picked from commit 84eded1) Co-authored-by: Rajat Dabade <[email protected]>

* Mobile drafts (#8280) * refactor: started with draft, done until new tabs for draft * refactor: change the query and added the screen for draft * added condition for fetching draft for channel delete or not * refactor: added draft screen * linter fixes * Added draft post component * added avatar and header display name for the draft post list * added channel info component * channel info completed * proper naming * added image file markdown acknowledgement support * draft actions * Fix the draft receiver in drafts * separated send message handler * Done with send drafts * done with delete drafts * change save to send draft * handle lengthy message with show more button * done with persistent message edit, send and delete drafts * added alert for sending message * added update at time for the drafts * en.json extract fix * Updated dependencies for useCallback * refactor: added drafts list to animated list * added swipeable component and delete conformation for drafts * done with rendering of images in markdown for drafts * en.json issue fixed * fix en.json issue * refactor: en.json fix * addressed review comments * updated image metadata handling code * linter fixes * added the empty draft screen * linter fix * style fix * back button an android takes to the channel list page * en.json fix * draft actions theme compatible * CSS fix for draft channel_info and avatar component * removed the badge icon and change font style drafts * fix send alert sender name for GMs * updated snapshot * added testId to the drafts components * updated send draft test id * clicking on draft takes to the channel * Added toptip for draft tours * intl extract * Rebase to main and reverted local testing changes * Added tooltip for drafts * addressed review comments * reset navigation when click on a draft in draft tabs * fix the theme issue and navigation issue * reverted back the draft click navigation changes * observing draft when hitting back button * removed the unwanted animiation * updated regex for parsing markdown * removed unnecessary checks and change folder name * removed react memo and merge unwanted observes function * removed unnecessary comments * changed the name for observing and querying draft function * removed memo from component level * Text to FormattedText component * Text to formatted text, change image name * added confirmation modal for deleting draft from bottomsheet * using common send_handler for both draft and post * removed magic number for tooltip and bottomsheet * renamed channel_info to draft_post_header * text to formattedText for Edit drafts * removed unnecessary changes * minor fixes * mounting draft only when there is draft * map to reduce * renamed SwipeableDraft to DraftSwipeAction * name fixes * isValidUrl to isParsableUrl and added test * added test and addressed minor review comments * added inline component for the duplicate code * inlt fixes * clearDraft is not optional * optimised categories_list.tsx component * Swipeable to ReanimatedSwipeable, TouchableWithoutFeedback to Pressable and folder name changes * Added comment and disabled eslint rule for showing warning * fixed component file name * minor' * Removed deprecated Animated createAnimatedComponent flatlist * added test for missing protocol check * import change for SwipeableMethod * active tab for tablet view * Updated the drafts icons * Updated compass-icon version to v0.1.48 --------- Co-authored-by: Mattermost Build <[email protected]> * View custom profile attributes (#8460) * feat: Add custom attributes section to user profile * Add tests for actions/websocket/posts (#8465) * Add tests for actions/websocket/event (#8470) * MM-59585 Add tests for utils/url (#8462) * Add tests for utils/url * Update per review feedback * fix spacing between bookmarks, align + icon (#8476) * Add tests for queries/app/servers (#8477) * Add android detox apk build workflow (#8405) * Add some improvements to thread handling (#8407) * Add some improvements to thread handling * Add missing changes * Android changes * iOS changes * Avoid copys * Refactor getReplyAt * MM-62411 Retrying SSO does not trigger a redirect (#8458) * The server url is being registered as invalid. Even if the URL is valid upon retry, it is still being registered as invalid. * Delete unnecessary import * Delete serverUrl * Delete serverUrl props on test * Update dependencies and upgrade to RN 0.76.5 (#8421) * update dev deps * partial update dependencies * update watermelondb * update rn to 0.76.5, expo to 52.0.18 and others * upgrade android firebase * upgrade detox deps * fix package-lock.json * update emm and paste-input * update turbo-log * update network library * fix tests * review feedback * fix Keyboard blocking signIn button * Fall back to iphone 14 iOS 17.2 simulator as app crashes on iOS 17.4 * changes in deleteCredentialsForServer is causing a crash * withOptions x2 clearly is wrong * re-add cli-platform-apple fix * fix: RN 0.76.5 issue with bottom sheet disappearing (#8478) * experiment, using view vs BottomSheetView * revert previous & try disabling enableDynamicSizing * revert an unintended removal --------- Co-authored-by: yasserfaraazkhan <[email protected]> Co-authored-by: Mattermost Build <[email protected]> Co-authored-by: Rahim Rahman <[email protected]> * Fix package lock identation (#8484) * forgot to push changes --------- Co-authored-by: Rajat Dabade <[email protected]> Co-authored-by: Mattermost Build <[email protected]> Co-authored-by: Guillermo Vayá <[email protected]> Co-authored-by: Joram Wilander <[email protected]> Co-authored-by: yasserfaraazkhan <[email protected]> Co-authored-by: Daniel Espino García <[email protected]> Co-authored-by: kondo <[email protected]> Co-authored-by: Elias Nahum <[email protected]>

mm-cloud-bot added the release-note label Oct 22, 2024

Rajat-Dabade self-assigned this Oct 22, 2024

Rajat-Dabade marked this pull request as ready for review November 5, 2024 12:34

Rajat-Dabade requested review from larkox and enahum November 5, 2024 12:34

larkox requested changes Nov 6, 2024

View reviewed changes

Rajat-Dabade added 2: Dev Review Requires review by a core commiter 3: QA Review Requires review by a QA tester 2: UX Review Requires review by a UX Designer labels Nov 7, 2024

Rajat-Dabade requested review from asaadmahmood and yasserfaraazkhan November 7, 2024 12:32

yasserfaraazkhan added Build Apps for PR Build the mobile app for iOS and Android to test E2E iOS tests for PR Run iOS E2E Detox tests labels Nov 8, 2024

Rajat-Dabade requested a review from larkox November 13, 2024 10:46

yasserfaraazkhan added E2E iOS tests for PR Run iOS E2E Detox tests and removed E2E iOS tests for PR Run iOS E2E Detox tests labels Nov 14, 2024

yasserfaraazkhan requested changes Nov 18, 2024

View reviewed changes

Rajat-Dabade added Build Apps for PR Build the mobile app for iOS and Android to test and removed Build Apps for PR Build the mobile app for iOS and Android to test labels Nov 18, 2024

Rajat-Dabade requested a review from yasserfaraazkhan November 18, 2024 18:51

yasserfaraazkhan requested changes Nov 18, 2024

View reviewed changes

Rajat-Dabade mentioned this pull request Nov 20, 2024

Unit test for mobile draft #8363

Open

5 tasks

asaadmahmood requested changes Nov 25, 2024

View reviewed changes

Rajat-Dabade requested a review from asaadmahmood November 26, 2024 14:45

yasserfaraazkhan removed the E2E iOS tests for PR Run iOS E2E Detox tests label Jan 13, 2025

Rajat-Dabade added the Build Apps for PR Build the mobile app for iOS and Android to test label Jan 13, 2025

yasserfaraazkhan added the E2E iOS tests for PR Run iOS E2E Detox tests label Jan 13, 2025

github-actions bot removed the E2E iOS tests for PR Run iOS E2E Detox tests label Jan 13, 2025

yasserfaraazkhan approved these changes Jan 13, 2025

View reviewed changes

asaadmahmood approved these changes Jan 13, 2025

View reviewed changes

Updated the drafts icons

1e82942

Updated compass-icon version to v0.1.48

9ecca2b

Rajat-Dabade requested review from enahum and removed request for enahum January 13, 2025 12:20

amyblais added the CherryPick/Approved Meant for the quality or patch release tracked in the milestone label Jan 13, 2025

Rajat-Dabade merged commit 84eded1 into main Jan 13, 2025
14 checks passed

Rajat-Dabade deleted the mobile-drafts branch January 13, 2025 13:10

mattermost-build mentioned this pull request Jan 13, 2025

Automated cherry pick of #8280 #8473

Merged

mattermost-build added CherryPick/Done Successfully cherry-picked to the quality or patch release tracked in the milestone and removed CherryPick/Approved Meant for the quality or patch release tracked in the milestone labels Jan 13, 2025

amyblais added the Docs/Needed Requires documentation label Jan 13, 2025

amyblais unassigned Rajat-Dabade Jan 13, 2025

Rajat-Dabade mentioned this pull request Jan 27, 2025

MM-62726 fix the active label color for channel and thread #8523

Merged

5 tasks

cwarnermm mentioned this pull request Feb 7, 2025

Mobile v2.25: Added local drafts note mattermost/docs#7735

Merged

amyblais added Docs/Done Required documentation has been written and removed Docs/Needed Requires documentation labels Feb 11, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mobile drafts #8280

Mobile drafts #8280

Rajat-Dabade commented Oct 22, 2024 •

edited

Loading

Rajat-Dabade commented Oct 22, 2024

larkox left a comment

Rajat-Dabade commented Nov 12, 2024

yasserfaraazkhan left a comment

Rajat-Dabade commented Nov 18, 2024

Rajat-Dabade commented Nov 18, 2024

yasserfaraazkhan left a comment

asaadmahmood left a comment •

edited

Loading

yasserfaraazkhan commented Jan 13, 2025

Rajat-Dabade commented Jan 13, 2025

asaadmahmood left a comment

Rajat-Dabade commented Jan 13, 2025

mattermost-build commented Jan 13, 2025

Mobile drafts #8280

Mobile drafts #8280

Conversation

Rajat-Dabade commented Oct 22, 2024 • edited Loading

Summary

Ticket Link

Checklist

Device Information

Screenshots

Release Note

Rajat-Dabade commented Oct 22, 2024

larkox left a comment

Choose a reason for hiding this comment

Rajat-Dabade commented Nov 12, 2024

yasserfaraazkhan left a comment

Choose a reason for hiding this comment

Rajat-Dabade commented Nov 18, 2024

Rajat-Dabade commented Nov 18, 2024

yasserfaraazkhan left a comment

Choose a reason for hiding this comment

asaadmahmood left a comment • edited Loading

Choose a reason for hiding this comment

yasserfaraazkhan commented Jan 13, 2025

Rajat-Dabade commented Jan 13, 2025

asaadmahmood left a comment

Choose a reason for hiding this comment

Rajat-Dabade commented Jan 13, 2025

mattermost-build commented Jan 13, 2025

Rajat-Dabade commented Oct 22, 2024 •

edited

Loading

asaadmahmood left a comment •

edited

Loading