[TS migration] Migrate '[Remaining Group 2]' lib to TypeScript #32164

VickyStash · 2023-11-29T08:35:18Z

Details

This PR migrates next lib files to TS:

TransactionEdit.js
TeachersUnite.js
OnyxUpdateManager.js
DemoActions.js
Card.js
CanvasSize.js
MemoryOnlyKeys folder

Fixed Issues

$ #31922
PROPOSAL: N/A

Tests

Verify that no errors appear in the JS console

TransactionEdit

Create a distance request.
Navigate to the workspace chat which you created the distance request in. Click on the distance request preview to open the distance request.
Select the "Distance" menu item => Close it / Go Back => Open it again => Input new waypoints.
Select the "Distance" menu item again => Input new waypoints.
Click "Save". Verify that a loading spinner appears on the Save button and the modal closes after the transaction is saved.
After a bit (this could take a few seconds) verify the distance request amount and the title in the "Distance" menu item are updated to reflect your new waypoints.
Try to update the description/date fields, and make sure it works.

TeachersUnite

Click on FAB
Click on Save the World
There should be 2 options (I know a teacher and I am a teacher)
Click on "I know a teacher"
Provide information for the user you're referring and confirm.
Make sure you're redirected to a public room with a whisper message indicating you referred them.
Click on "I am a teacher" and sign providing the principal's information.
Verify a policy expense chat has been created.

OnyxUpdateManager

Confirm that the app continues to work as expected on normal flows:

sending messages
receiving messages
creating workspaces

Besides that, you can use Onyx.set('onyxUpdatesFromServer', {INVALID_FORMAT_FROM_LIST_BELOW}); in the console to set that property to an invalid format and confirm it will log [OnyxUpdateManager] Invalid format found for updates, cleaning and unpausing the queue
you can test the following wrong formats:

Onyx.set('onyxUpdatesFromServer', {'type': ''});
Onyx.set('onyxUpdatesFromServer', {'type': 'https'});
Onyx.set('onyxUpdatesFromServer', {'type': 'https', 'request': {}});
Onyx.set('onyxUpdatesFromServer', {'type': 'pusher', 'request': {}, 'response': {}});

DemoActions

Open the app and sign out
Manually navigate to /money2020
Sign in with a brand new account
Verify you're automatically navigated to a new chat report, between your account & money2020@expensify.com

Card

add useEffect with test data to the WalletPage.js

useEffect(() => {
        if (cardList[1] || cardList[2]) {
            return;
        }
        // eslint-disable-next-line rulesdir/prefer-actions-set-data
        Onyx.merge('cardList', {
            1: {
                availableSpend: 1000000,
                bank: 'Expensify Card',
                cardID: 1,
                cardholderFirstName: 'FirstName',
                cardholderLastName: 'LastName',
                domainName: 'expensify.com',
                fraud: 'none',
                isVirtual: false,
                lastFourPAN: '1234',
                state: 3,
            },
            2: {
                availableSpend: 1000000,
                bank: 'Expensify Card',
                cardID: 2,
                cardholderFirstName: 'FirstName',
                cardholderLastName: 'LastName',
                domainName: 'expensify.com',
                fraud: 'none',
                isVirtual: true,
                lastFourPAN: '9876',
                state: 3,
            },
        });
    }, [cardList]);

Go to the Settings/Wallet -> you will see the Expensify card in the assigned cards
Click on it, look through the card page, make sure it looks ok.
Click on Reveal Details
An error should appear under this menu item, as the card is fake

CanvasSize

Go to any report
Click on add attachment and select a pdf with big pages, for example this one
Verify that the pdf is displayed correctly in the preview (it can take some time for it to preload).

On Mobile Web it gives next error (same on the main branch):

MemoryOnlyKeys

Sign the app
Run enableMemoryOnlyKeys() from the JS console
Verify the logs say [MemoryOnlyKeys] enabled
Run disableMemoryOnlyKeys() from the JS console
Verify the logs say [MemoryOnlyKeys] disabled

Offline tests

N/A

QA Steps

Verify that no errors appear in the JS console

Same as in Tests section

PR Author Checklist

Screenshots/Videos

Android: Native

- TransactionEdit.js

android_transaction1.mp4

android_transaction2.mp4

- TeachersUnite.js

android_teacher2.mp4

android_teacher1.mp4

- OnyxUpdateManager.js

android_onyxUpdateManager.mp4

- Card.js

android_card.mp4

- CanvasSize.js

android_canvas.mp4

Android: mWeb Chrome

- TransactionEdit.js

android_web_transaction.mp4

- TeachersUnite.js

android_web_teacher2.mp4

android_web_teacher1.mp4

- OnyxUpdateManager.js

android_web_onyx.mp4

- DemoActions.js

- Card.js

android_web_card.mp4

iOS: Native

- TransactionEdit.js

ios_transaction.mp4

- TeachersUnite.js

ios_teacher2.mp4

ios_teacher1.mp4

- OnyxUpdateManager.js

ios_OnyxManager.mp4

- Card.js

ios_card.mp4

- CanvasSize.js

ios_canvas.mp4

iOS: mWeb Safari

- TransactionEdit.js

ios_web_transaction.mp4

- TeachersUnite.js

ios_web_teacher2.mp4

ios_web_teacher1.mp4

- OnyxUpdateManager.js

ios_onyxManager.mp4

- DemoActions.js

- Card.js

ios_web_card.mp4

MacOS: Chrome / Safari

- TransactionEdit.js

web_transaction_edit.mp4

- TeachersUnite.js

web_teacher2.mp4

web_teacher1.mp4

- OnyxUpdateManager.js

web_onyxManager.mp4

- DemoActions.js

- Card.js

web_card.mp4

- CanvasSize.js

web_Canvas.mp4

- MemoryOnlyKeys folder

MacOS: Desktop

- TransactionEdit.js

desktop_transactionEdit.mp4

- TeachersUnite.js

desktop_teacher2.mp4

desktop_teacher1.mp4

- OnyxUpdateManager.js

desktop_onyxManager1.mp4

- Card.js

desktop_card.mp4

- CanvasSize.js

desktop_canvas.mp4

- MemoryOnlyKeys folder

# Conflicts: # src/libs/actions/Card.js

src/libs/actions/Card.ts

src/libs/actions/OnyxUpdateManager.ts

src/types/modules/canvas-size.d.ts

src/types/onyx/PersonalDetails.ts

src/libs/actions/DemoActions.ts

src/libs/actions/OnyxUpdateManager.ts

kubabutkiewicz · 2023-11-30T08:05:17Z

src/libs/actions/TeachersUnite.ts

+    const loggedInEmail = OptionsListUtils.addSMSDomainIfPhoneNumber(sessionEmail);
+    const reportCreationData: ReportCreationData = {};
+
+    const expenseChatData = ReportUtils.buildOptimisticChatReport([sessionAccountID], '', CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT, policyID, sessionAccountID, true, policyName);


maybe you can add type to this const?

@kubabutkiewicz it's typed automatically, do you think it makes sense to type it additionally?

kubabutkiewicz · 2023-11-30T08:05:38Z

src/libs/actions/TeachersUnite.ts

+
+    const expenseChatData = ReportUtils.buildOptimisticChatReport([sessionAccountID], '', CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT, policyID, sessionAccountID, true, policyName);
+    const expenseChatReportID = expenseChatData.reportID;
+    const expenseReportCreatedAction = ReportUtils.buildOptimisticCreatedReportAction(sessionEmail);


@kubabutkiewicz it's typed automatically, see my comment

src/libs/actions/Card.ts

src/libs/actions/TeachersUnite.ts

# Conflicts: # src/libs/ReportUtils.ts

# Conflicts: # src/types/onyx/ReportAction.ts

src/libs/actions/Card.ts

src/libs/actions/TeachersUnite.ts

VickyStash · 2023-12-04T16:32:33Z

@BartoszGrajdek Thank you, updated 🙂

# Conflicts: # src/libs/ReportUtils.ts

VickyStash · 2023-12-07T16:02:22Z

@BartoszGrajdek kind bump 🙂

src/types/modules/window.d.ts

# Conflicts: # src/types/global.d.ts

VickyStash · 2024-01-04T10:32:50Z

@grgia kind bump 🙂

grgia · 2024-01-05T00:09:29Z

package-lock.json

Should we push these in this PR?

Yes, because @types/canvas-size was added in this PR 😄

# Conflicts: # src/libs/actions/TeachersUnite.js

cubuspl42 · 2024-01-09T08:55:12Z

What's the "Updates from main branch" commit? I don't want to be picky, but messed-up merges have been a source of regressions in the past. Shouldn't this be just a single merge commit?

VickyStash · 2024-01-09T08:59:20Z

@cubuspl42 The original JS file, which had updates in the main branch, was removed in favor of TS one during migration. So another commit applies updates from the JS file to the TS file so as not to miss updated functionality

# Conflicts: # src/libs/PolicyUtils.ts # src/types/onyx/Policy.ts

VickyStash · 2024-01-09T12:01:24Z

@grgia kind bump 🙂

cubuspl42 · 2024-01-09T13:24:03Z

@cubuspl42 The original JS file, which had updates in the main branch, was removed in favor of TS one during migration. So another commit applies updates from the JS file to the TS file so as not to miss updated functionality

Oh, I get it. Great that you caught those changes.

grgia · 2024-01-09T20:39:15Z

Merging with license tests failing which is expected with package-lock changes: https://github.com/Expensify/App/pull/32164/files/4de7a5ed23c231251f1bee824c46bac35892efa1#r1442385933

OSBotify · 2024-01-09T20:44:01Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2024-01-10T06:20:35Z

🚀 Deployed to staging by https://github.com/grgia in version: 1.4.24-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

kavimuru · 2024-01-10T06:57:58Z

@VickyStash We need some help in validating this PR:

Should we test TeachersUnite section since it deals with real users?
Need help to test the following section.

Besides that, you can use Onyx.set('onyxUpdatesFromServer', {INVALID_FORMAT_FROM_LIST_BELOW}); in the console to set that property to an invalid format and confirm it will log [OnyxUpdateManager] Invalid format found for updates, cleaning and unpausing the queue
you can test the following wrong formats:

Onyx.set('onyxUpdatesFromServer', {'type': ''});
Onyx.set('onyxUpdatesFromServer', {'type': 'https'});
Onyx.set('onyxUpdatesFromServer', {'type': 'https', 'request': {}});
Onyx.set('onyxUpdatesFromServer', {'type': 'pusher', 'request': {}, 'response': {}});

MemoryOnlyKeys:
How do we verify the logs in this section?

VickyStash · 2024-01-10T07:58:50Z

@kavimuru Small note: in screenshots/recordings section, you can find material for every feature per platform (if it's possible to test it on the platform) split by feature name. It looks like
- TransactionEdit.js
material for it
- TeachersUnite.js
material for it

I think so since this PR was implemented a couple of days ago
I think this screenshot should help with it.
You can pass to the console onyxUpdatesFromServer event with invalid format data, and you should see the error

Event which you can try to pass to the console:

Onyx.set('onyxUpdatesFromServer', {'type': ''});
Onyx.set('onyxUpdatesFromServer', {'type': 'https'});
Onyx.set('onyxUpdatesFromServer', {'type': 'https', 'request': {}});
Onyx.set('onyxUpdatesFromServer', {'type': 'pusher', 'request': {}, 'response': {}});

The logs should be displayed in the console

Please, let me know if something is still not clear, I'll try to help!

kavimuru · 2024-01-10T16:15:54Z

@VickyStash Thanks for the explanation. We will try with your instructions. But still I want to make sure if we can use dummy data for "teachers unite" section.

VickyStash · 2024-01-10T16:28:31Z

@kavimuru I think you can use dummy data on non production environments, since after this PR was merged it shouldn't affect real users.
See how TU chat looks for me right now on dev, a lot of test messages

Since @marcochavezf is the author of the PR I mention, maybe he can also confirm

kavimuru · 2024-01-10T16:50:01Z

@VickyStash Thanks for confirming.

thienlnam · 2024-01-11T05:26:08Z

This appears to be causing type errors on main

Error: src/libs/actions/TeachersUnite.ts(93,9): error TS2322: Type '{ onyxMethod: "set"; key: `policy_${string}`; value: { id: string; isPolicyExpenseChatEnabled: true; type: "corporate"; name: "Expensify.org / Teachers Unite!"; role: "user"; owner: string; outputCurrency: string; pendingAction: "add"; }; }' is not assignable to type 'OnyxUpdate'.
  Types of property 'value' are incompatible.
    Property 'areChatRoomsEnabled' is missing in type '{ id: string; isPolicyExpenseChatEnabled: true; type: "corporate"; name: "Expensify.org / Teachers Unite!"; role: "user"; owner: string; outputCurrency: string; pendingAction: "add"; }' but required in type 'Policy'.
Error: Process completed with exit code 2.

EDIT: This may actually be because of a change I am reverting nvm

OSBotify · 2024-01-11T08:52:14Z

🚀 Deployed to production by https://github.com/thienlnam in version: 1.4.24-3 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

VickyStash added 12 commits November 28, 2023 17:24

[TS migration] Migrate 'TransactionEdit.js' lib

e951bb7

[TS migration] Migrate 'MemoryOnlyKeys' lib

76c1781

[TS migration] Migrate 'CanvasSize.js' lib

cf2d8e6

Add window.d.ts file

819b77a

[TS migration] Migrate 'Card.js' lib

2b59ded

Merge branch 'main' into ts-migration/remaining-group-2

e4c6b3f

# Conflicts: # src/libs/actions/Card.js

TS update after main merging

3e15c67

[TS migration] Migrate 'OnyxUpdateManager.ts' lib

ad02a8c

[TS migration] Migrate 'DemoActions.js' lib

21eac29

[TS migration] Migrate 'TeacherUnite.js' lib

02d646d

Code improvements

2857187

Fix crash

00cad5e

fabioh8010 reviewed Nov 30, 2023

View reviewed changes

src/libs/actions/Card.ts Outdated Show resolved Hide resolved

src/libs/actions/OnyxUpdateManager.ts Outdated Show resolved Hide resolved

src/types/modules/canvas-size.d.ts Outdated Show resolved Hide resolved

src/types/onyx/PersonalDetails.ts Outdated Show resolved Hide resolved

kubabutkiewicz reviewed Nov 30, 2023

View reviewed changes

TMisiukiewicz reviewed Nov 30, 2023

View reviewed changes

src/libs/actions/Card.ts Show resolved Hide resolved

src/libs/actions/TeachersUnite.ts Show resolved Hide resolved

VickyStash added 4 commits November 30, 2023 09:49

Add @types/canvas-size lib

f205afe

Update code to use PersonalDetailsList type

27c9dde

Update invalid format check

2dfbe5d

Merge branch 'main' into ts-migration/remaining-group-2

32095a3

# Conflicts: # src/libs/ReportUtils.ts

fabioh8010 approved these changes Nov 30, 2023

View reviewed changes

Merge branch 'main' into ts-migration/remaining-group-2

6591d04

# Conflicts: # src/types/onyx/ReportAction.ts

BartoszGrajdek reviewed Dec 4, 2023

View reviewed changes

src/libs/actions/Card.ts Outdated Show resolved Hide resolved

src/libs/actions/Card.ts Outdated Show resolved Hide resolved

src/libs/actions/Card.ts Outdated Show resolved Hide resolved

src/libs/actions/TeachersUnite.ts Outdated Show resolved Hide resolved

VickyStash added 2 commits December 4, 2023 16:15

Put onyx update data into separate variables

815f45c

Merge branch 'main' into ts-migration/remaining-group-2

290bb98

VickyStash added 3 commits December 6, 2023 16:18

Merge branch 'main' into ts-migration/remaining-group-2

52d1bb8

# Conflicts: # src/libs/ReportUtils.ts

Fix TS issue

e51ee0b

Merge branch 'main' into ts-migration/remaining-group-2

b3bdb27

# Conflicts: # src/libs/ReportUtils.ts

blazejkustra approved these changes Dec 8, 2023

View reviewed changes

src/types/modules/window.d.ts Outdated Show resolved Hide resolved

VickyStash added 2 commits January 4, 2024 09:45

Merge branch 'main' into ts-migration/remaining-group-2

25264a1

# Conflicts: # src/types/global.d.ts

Fix lint errors

4de7a5e

grgia previously approved these changes Jan 5, 2024

View reviewed changes

grgia reviewed Jan 5, 2024

View reviewed changes

VickyStash added 2 commits January 9, 2024 09:32

Merge branch 'main' into ts-migration/remaining-group-2

cdc8118

# Conflicts: # src/libs/actions/TeachersUnite.js

Updates from main branch

733b3b1

VickyStash dismissed grgia’s stale review via 733b3b1 January 9, 2024 08:50

Merge branch 'main' into ts-migration/remaining-group-2

d53f4f2

# Conflicts: # src/libs/PolicyUtils.ts # src/types/onyx/Policy.ts

grgia approved these changes Jan 9, 2024

View reviewed changes

grgia merged commit e372de1 into Expensify:main Jan 9, 2024
15 of 17 checks passed

github-actions bot mentioned this pull request Jan 10, 2024

Deploy Checklist: New Expensify 2024-01-10 #34203

Closed

54 tasks

melvin-bot bot mentioned this pull request Jan 11, 2024

[HOLD for payment 2024-01-18] [TS migration] Migrate '[Remaining Group 2]' lib to TypeScript #31922

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TS migration] Migrate '[Remaining Group 2]' lib to TypeScript #32164

[TS migration] Migrate '[Remaining Group 2]' lib to TypeScript #32164

VickyStash commented Nov 29, 2023 •

edited

Loading

kubabutkiewicz Nov 30, 2023

VickyStash Nov 30, 2023

kubabutkiewicz Nov 30, 2023

VickyStash Nov 30, 2023

VickyStash commented Dec 4, 2023

VickyStash commented Dec 7, 2023

VickyStash commented Jan 4, 2024

grgia Jan 5, 2024

blazejkustra Jan 5, 2024

cubuspl42 commented Jan 9, 2024

VickyStash commented Jan 9, 2024

VickyStash commented Jan 9, 2024

cubuspl42 commented Jan 9, 2024

grgia commented Jan 9, 2024

OSBotify commented Jan 9, 2024

OSBotify commented Jan 10, 2024

kavimuru commented Jan 10, 2024

VickyStash commented Jan 10, 2024

kavimuru commented Jan 10, 2024

VickyStash commented Jan 10, 2024

kavimuru commented Jan 10, 2024

thienlnam commented Jan 11, 2024 •

edited

Loading

OSBotify commented Jan 11, 2024

[TS migration] Migrate '[Remaining Group 2]' lib to TypeScript #32164

[TS migration] Migrate '[Remaining Group 2]' lib to TypeScript #32164

Conversation

VickyStash commented Nov 29, 2023 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

kubabutkiewicz Nov 30, 2023

Choose a reason for hiding this comment

VickyStash Nov 30, 2023

Choose a reason for hiding this comment

kubabutkiewicz Nov 30, 2023

Choose a reason for hiding this comment

VickyStash Nov 30, 2023

Choose a reason for hiding this comment

VickyStash commented Dec 4, 2023

VickyStash commented Dec 7, 2023

VickyStash commented Jan 4, 2024

grgia Jan 5, 2024

Choose a reason for hiding this comment

blazejkustra Jan 5, 2024

Choose a reason for hiding this comment

cubuspl42 commented Jan 9, 2024

VickyStash commented Jan 9, 2024

VickyStash commented Jan 9, 2024

cubuspl42 commented Jan 9, 2024

grgia commented Jan 9, 2024

OSBotify commented Jan 9, 2024

OSBotify commented Jan 10, 2024

kavimuru commented Jan 10, 2024

VickyStash commented Jan 10, 2024

kavimuru commented Jan 10, 2024

VickyStash commented Jan 10, 2024

kavimuru commented Jan 10, 2024

thienlnam commented Jan 11, 2024 • edited Loading

OSBotify commented Jan 11, 2024

VickyStash commented Nov 29, 2023 •

edited

Loading

thienlnam commented Jan 11, 2024 •

edited

Loading