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

larkox

Great work! Many comments, but mostly nitpicks.

app/components/channel_info/channel_info.tsx

app/components/channel_info/avatar/index.tsx

app/components/post_draft/post_input/post_input.tsx

app/queries/servers/drafts.ts

app/screens/global_drafts/components/global_drafts_list/global_drafts_list.tsx

app/screens/global_drafts/index.tsx

app/components/drafts_buttton/index.tsx

Rajat-Dabade · 2024-12-05T12:58:52Z

@larkox I’ve addressed all the review comments. Thank you for highlighting the changes. They all make perfect sense. Could you please re-review it whenever you have some time? Much appreciated! 🙌

larkox

Great work! LGTM

Rajat-Dabade · 2024-12-10T09:42:25Z

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?

@yasserfaraazkhan, I have fixed this can you please retest it? Thank you.

yasserfaraazkhan · 2024-12-11T09:33:22Z

/update-branch

yasserfaraazkhan

Verified on android and iOS device

Drafts created in Channel/DM/GM
send/edit/delete actions on drafts
swipe left on draft to delete
drafts on public channel and then convert
Remove server that has drafts and add it back to see no drafts are present
Theme applied on the page.
Drafts on multiple teams
Draft count updated when we leave channel, archive channel

Few observations,

On android where we can see channels list page for fraction of a second, when we click on a particular Draft

az_recorder_20241211_150748.mp4

Theme issues when Device is in Dark mode.

Steps:

select Onxy (dark theme)
create Draft in channel ,
change to Denim theme
go to channel and see the theme is applied
go to Draft, long press draft, Click on Edit

Actual: we see Dark theme section

enahum

Overall looks good, great job!

I have added a few comments

enahum · 2024-12-13T22:16:40Z

app/actions/local/draft.ts

+
+export async function parseMarkdownImages(markdown: string, imageMetadata: Dictionary<PostImage | undefined>) {
+    let match;
+    const imageRegex = /!\[.*?\]\((https:\/\/[^\s)]+)\)/g;


If the url is only with http this will not match. Is that what we want?

enahum · 2024-12-13T22:17:38Z

app/actions/local/draft.ts

+    while ((match = imageRegex.exec(markdown)) !== null) {
+        const imageUrl = match[1];
+        // eslint-disable-next-line no-await-in-loop
+        imageMetadata[imageUrl] = await getImageMetadata(imageUrl);


This looks prone to race

enahum · 2024-12-13T22:23:11Z

app/components/channel_info/avatar/index.tsx

+    const serverUrl = useServerUrl();
+
+    let uri = '';
+    if (author) {


Based on the prop, author should always be defined, something I'm missing?

enahum · 2024-12-13T22:24:38Z

app/components/channel_info/channel_info.tsx

+import {typography} from '@utils/typography';
+import {getUserTimezone} from '@utils/user';
+
+import CompassIcon from '../compass_icon';


Suggested change

import CompassIcon from '../compass_icon';

import CompassIcon from '@components/compass_icon';

enahum · 2024-12-13T22:30:27Z

app/components/channel_info/avatar/index.tsx

The name of the folder does not make a lot of sense to me

enahum · 2024-12-13T23:37:49Z

app/screens/global_drafts/components/global_drafts_list/global_drafts_list.tsx

+
+    return (
+        <View
+            style={{flex: 1}}


Set this in the stylesheet

enahum · 2024-12-13T23:50:31Z

app/screens/draft_options/send_draft/send_draft.tsx

+                size={ICON_SIZE}
+                color={changeOpacity(theme.centerChannelColor, 0.56)}
+            />
+            <Text style={style.title}>{intl.formatMessage({id: 'draft.options.send.title', defaultMessage: 'Edit draft'})}</Text>


Use FormattedText

enahum · 2024-12-13T23:51:17Z

app/screens/global_drafts/components/draft_empty_component/index.tsx

+
+import React from 'react';
+import {useIntl} from 'react-intl';
+import {Image, Text, View} from 'react-native';


Somewhere else you are using Image from expo-image for the same purpose, which makes sense, change it here

enahum · 2024-12-13T23:51:49Z

app/screens/global_drafts/components/global_drafts_list/tooltip.tsx

+    onClose: () => void;
+}
+
+const logo = require('@assets/images/emojis/swipe.png');


Perhaps change the name of the variable so that it makes sense instead of logo

enahum · 2024-12-13T23:53:31Z

app/screens/global_drafts/index.tsx

+
+import type {AvailableScreens} from '@typings/screens/navigation';
+
+const edges: Edge[] = ['left', 'right'];


Why not include bottom? Is it added elsewhere? I see top in the styles but not bottom. Or is it that we don't want it at all?

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

Rajat-Dabade added 3 commits December 5, 2024 09:05

Added toptip for draft tours

b26aa59

intl extract

3d16827

Rebase to main and reverted local testing changes

5d7bc78

Rajat-Dabade force-pushed the mobile-drafts branch from 13ff4ec to 5d7bc78 Compare December 5, 2024 03:50

Added tooltip for drafts

e667dd7

larkox requested changes Dec 5, 2024

View reviewed changes

addressed review comments

f152788

Rajat-Dabade requested a review from larkox December 5, 2024 12:58

larkox approved these changes Dec 5, 2024

View reviewed changes

reset navigation when click on a draft in draft tabs

aa1ad72

Rajat-Dabade requested a review from yasserfaraazkhan December 10, 2024 09:42

yasserfaraazkhan 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 E2E iOS tests for PR Run iOS E2E Detox tests labels Dec 10, 2024

Merge branch 'main' into mobile-drafts

f2e2e47

yasserfaraazkhan approved these changes Dec 11, 2024

View reviewed changes

fix the theme issue and navigation issue

cd93248

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 Dec 11, 2024

Rajat-Dabade added 2 commits December 11, 2024 16:56

reverted back the draft click navigation changes

8965394

observing draft when hitting back button

8c8e6f6

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 Dec 11, 2024

removed the unwanted animiation

be07659

enahum requested changes Dec 13, 2024

View reviewed changes

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

larkox left a comment

Rajat-Dabade commented Dec 5, 2024

larkox left a comment

Rajat-Dabade commented Dec 10, 2024

yasserfaraazkhan commented Dec 11, 2024

yasserfaraazkhan left a comment •

edited

Loading

enahum left a comment

enahum Dec 13, 2024

enahum Dec 13, 2024

enahum Dec 13, 2024

enahum Dec 13, 2024

enahum Dec 13, 2024

enahum Dec 13, 2024

enahum Dec 13, 2024

enahum Dec 13, 2024

enahum Dec 13, 2024

enahum Dec 13, 2024

	import CompassIcon from '../compass_icon';
	import CompassIcon from '@components/compass_icon';


		import type {AvailableScreens} from '@typings/screens/navigation';

		const edges: Edge[] = ['left', 'right'];

Mobile drafts #8280

Are you sure you want to change the base?

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

larkox left a comment

Choose a reason for hiding this comment

Rajat-Dabade commented Dec 5, 2024

larkox left a comment

Choose a reason for hiding this comment

Rajat-Dabade commented Dec 10, 2024

yasserfaraazkhan commented Dec 11, 2024

yasserfaraazkhan left a comment • edited Loading

Choose a reason for hiding this comment

enahum left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Rajat-Dabade commented Oct 22, 2024 •

edited

Loading

asaadmahmood left a comment •

edited

Loading

yasserfaraazkhan left a comment •

edited

Loading