Closed adamgrzybowski closed 3 months ago
:test_tube::test_tube: Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! :test_tube::test_tube: | Android :robot: | iOS :apple: |
---|---|---|
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/33280/index.html | https://ad-hoc-expensify-cash.s3.amazonaws.com/ios/33280/index.html | |
Desktop :computer: | Web :spider_web: | |
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/33280/NewExpensify.dmg | https://33280.pr-testing.expensify.com | |
Hey @mountiny! When would be possible to start testing the changes? 😄
@adamgrzybowski Can you please merge main / resolve conflicts? I see some changes related the LHP that should not be a part of this PR
Conflicts have been resolved :)
How is this supposed to look on Web? Not seeing much currently
https://github.com/Expensify/App/assets/16493223/3b19eea1-2131-42c4-bc8e-c88f0bda7e11
Question: What is the role of the Expensify top-left logo button?
https://github.com/Expensify/App/assets/16493223/e7e50849-4df4-49ed-adc0-f54bd2eb865c
:test_tube::test_tube: Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! :test_tube::test_tube: | Android :robot: | iOS :apple: |
---|---|---|
❌ FAILED ❌ | https://ad-hoc-expensify-cash.s3.amazonaws.com/ios/33280/index.html | |
The QR code can't be generated, because the android build failed | ||
Desktop :computer: | Web :spider_web: | |
❌ FAILED ❌ | https://33280.pr-testing.expensify.com | |
The QR code can't be generated, because the Desktop build failed |
:eyes: View the workflow run that generated this build :eyes:
Help and Go Expensify Classing missing the external link icon
Help and Go Expensify Classing missing the external link icon
The designs don't include this icon. Do you think the icons should be visible here? cc @shawnborton
How is this supposed to look on Web? Not seeing much currently <img alt="Screenshot 2024-01-04 at 11 37 54 AM"
Oh, we forgot to mention. To got everything working you have to do the following:
rm -rf node_modules
npm i
We made some changes in a patch file and simple npm i
doesn't re-apply patches.
Question: What is the role of the Expensify top-left logo button?
We haven't implemented this part yet - the workspace switcher. We are currently working on it.
Question: What is the role of the Expensify top-left logo button?
This will be workspace switcher, where you can filter the app functionality on workspace basis
I love the new web design <3
https://github.com/Expensify/App/assets/16493223/34ae90c0-e61e-417e-832c-da0b053fd8d1
Delete popover is misplaced
Same with workspace avatar change button
Bug / By design? The settings in the workspace do not take full width
Starting VBBA process messes with the flow: the central screen have a chat while the sidebar is on workspace settings. Also browser back button do not work
https://github.com/Expensify/App/assets/16493223/5ab90a13-1f2a-4556-aa6b-6829ac5b1f72
Not a bug: Now that the workspace name field is pushed on it's own page we should auto focus the input
Crash when trying to view a workspace avatar
https://github.com/Expensify/App/assets/16493223/59b55792-3174-414f-835a-5f8500b41386
(similar to https://github.com/Expensify/App/pull/33280#issuecomment-1876967788) If you refresh the page while RHP is open the highlighted item in Settings list is lost
https://github.com/Expensify/App/assets/16493223/695b289f-408b-4f0b-9296-1a44bec5a776
Workspace links all redirects to the overview and you can't refresh a page that you are currently in
https://github.com/Expensify/App/assets/16493223/bb6c8baa-8dbc-437a-986d-593ca286f89a
URL naming inconsistency:
workspace/0680EF3C70411F57/name
workspace/0680EF3C70411F57/overview/currency
Bug / By design? The settings in the workspace do not take full width
That is by design, but we need some modifications here. @adamgrzybowski can you please do the following:
cc @dannymcclain @dubielzyk-expensify for extra eyes on this PR too.
Starting VBBA process messes with the flow: the central screen have a chat while the sidebar is on workspace settings. Also browser back button do not work
Yeah, ideally this flow should start on the same page (in this case the travel page) but just launched in the RHP.
https://github.com/Expensify/App/assets/16493223/1947b7c6-4396-4a72-80e7-b3a432656ab5
Also I wanted to clarify, the Workspace name and page name should not be in a scrollable view. I think just the content below it (the subnav items) would be scrollable. I saw that from the video above, here is a screenshot:
So how it should behave: basically everything in this top outlined rectangle is fixed, but the content in the rectangle below (the sub nav options) can scroll vertically:
@shawnborton Can you provide figma link here if possible to check the styling layout in detail (spacing, color, etc.)?
@shubham1206agra I put a couple references for you here: https://www.figma.com/file/Xv3yHJooZcxRGkXbAcTZD5/%23ideal-nav-(Ideal-Nav)?type=design&node-id=2684%3A72517&mode=design&t=larByJRbckmqvl1c-1
Requested access
As an anonymous user:
https://github.com/Expensify/App/assets/16493223/5537ae48-1fea-4e63-9457-f240ae9043c9
Animation inconsistency iOS / Android
https://github.com/Expensify/App/assets/16493223/f419ed05-8f1e-4f75-afc0-a5bcdae46f9f
https://github.com/Expensify/App/assets/16493223/1cac26f8-dd68-43dd-ace4-db3ca4b046d9
https://github.com/Expensify/App/assets/16493223/123f03fc-6a4b-433b-a582-7d78e807a07e
(Similar to https://github.com/Expensify/App/pull/33280#issuecomment-1877440041 Clicking the get assistance button changes the central pan screen
https://github.com/Expensify/App/assets/16493223/af397fcd-a2fe-4694-bf32-13e1415b0467
One thing I want to mention here, the bottom FAB button should be at our large button size of 52x52, with the icon inside of it at 20x20:
I'll update those two mocks I shared in Figma as well.
@MaciejSWM @WojtekBoman @kosmydel Whenever you think this is ready for a new build once some bugs are fixed feel free to let me know I will kick it off
Low priority bug: Go to Settings -> Preferences -> Go back to Settings and increase screen width. The central pan is empty
https://github.com/Expensify/App/assets/16493223/bf8299af-43d9-474f-89d3-469e8ee09f6a
Avatars misalignment
On App open no bottom tab item is highlighted (native only)
Missing border bottom in some pages e.g. Profile, Workspaces, etc.
The back behavior in "App download links" is wrong
https://github.com/Expensify/App/assets/16493223/a9f8c5d5-18ab-452d-bd05-e0e119ca5703
(Could be related to https://github.com/Expensify/App/pull/33280#issuecomment-1876993340) Once you start VBBA process you get stuck and can't go back
https://github.com/Expensify/App/assets/16493223/074f019d-5389-4d74-b587-230eabf489c0
Go to Workspace Settings and go though the settings (3+) in wide layout, then resize to small window. Pressing go back should take you directly to WorkspaceInitialPage. Instead you'd be going to the previous pages and weirdly end up passing by the Report screen. (reduceReportRoutes probably have some relation here)
https://github.com/Expensify/App/assets/16493223/fba078e1-fdbc-492a-b31b-075e5b30ffce
Brick road indicator not implemented correctly (still in progress?)
https://github.com/Expensify/App/assets/16493223/e01fb75e-5df6-41f6-bcff-58faea0b6cc7
Missing border bottom in some pages e.g. Profile, Workspaces, etc.
It was discussed here.
Attaching screenshot, as the channel probably is private:
It will be done as a follow-up.
@MaciejSWM Can you fix merge conflicts and start an adhoc build?
@MaciejSWM Can you fix merge conflicts and start an adhoc build?
It's not ready yet for another build. We will have more information tomorrow as @adamgrzybowski will be back from OOO.
Details
Introduces the new navigation style to the App, mainly the new bottom tabs, the workspace switcher and moves several pages to the main pane navigator. For more details about the navigation patterns and design, refer to the design doc.
Fixed Issues
$ https://github.com/Expensify/App/issues/32941
Tests
There is obviously lots to cover in testing, we have let QA Applause team know about this big change and gave them a document with testing steps to follow.
Offline tests
Similar to the Test when it comes to the navigation patterns.
QA Steps
There is obviously lots to cover in testing, we have let QA Applause team know about this big change and gave them a document with testing steps to follow.
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodWaiting for Copy
label for a copy review on the original GH to get the correct copy.STYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Design
label so the design team can review the changes.ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
We are not adding specific test screenshots or videos into this sections. The PR has been tested thoroughly over the course of weeks on various platforms. You can see that progress in the comment history here, rest assured we tried our best to catch any regressions.
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop