[HOLD for payment 2023-12-29] [HOLD for payment 2023-12-28] [Ideal Nav] Create components for the ideal nav

[mountiny]

Part of the Ideal Nav project https://github.com/Expensify/Expensify/issues/331721

You can find more detailed specifications and implantation ideas in the "Detailed implementation of the solution" section of the design doc.

As we work on the detailed section of the design doc, we already can work on the UI components and new parts of the App based on the agreed upon designs. @MaciejSWM is tackling these as we speak. The components/ pages we can already work on now are:

• Search Component
  

• Workspace Switcher Avatar with a Chevron
  

• Left Top Bar (LTB) which aligns and puts together the two components mentioned above and the user avatar
  

• The LHN header with Expensify woodmark / Chats (or Settings) and also option where there is filtered Workspace name instead
  
  
  Here is how it looks like with settings
  

• The updated LHN style where the hover is rounded and it has 12px padding from the left and right, you can see the radius and paddings and height in the Figma

- [ ] The Create workspace Card with button and the small plus button

• Created updated Account Settings option page with the same style of option rows as LHN (smaller), different order of items than currently (workspace related stuff is moved to workspace settings) and 2 subsections, Account and General

• Similarly, create the general Expensify Workspace settings page has three menu items. Subscriptions and Cards & Domains menu items link to the corresponding OldDot pages when clicked. There is a separate GH issue for implementing this linking behavior. Thus, you don't have to handle the callback behavior in this issue.

• (Doc) Workspace list in the Expensify settings, where user can choose what workspace to switch to and see settings off, here its the header of the columns (Workspace Name, Owner, Workspace Type) aligned with the styled rows below

• Create the Workspace Option Row component which is responsive so it changes based on the designs for appropriate layout on mobile

desktop:

mobile:

• Make the Create Workspace empty state page work in the wide view with the animation header. This already works in NewDot but its only in the RHP

cc @trjExpensify @JmillsExpensify @hayata-suenaga @MaciejSWM

[MaciejSWM]

Roger that @mountiny

[hayata-suenaga]

@MaciejSWM please feel free to break the issue to multiple PRs as the scope of this issue is huge. It will be much easier to review and track progress.

[mountiny]

Yeah definitely multiple PRs please

[aimane-chnaif]

@hayata-suenaga can you please assign me here so that new PR pulls up correct C+? Thanks

[hayata-suenaga]

@MaciejSWM we can only start merging PRs that contain new components that can be implemented without being used.

As you already implemented the new Search component, I think we can move to the new placeholder component now.

[melvin-bot]

Current assignee @mountiny is eligible for the Engineering assigner, not assigning anyone new.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.14-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [Wave8] Search Input component #32439
• [NoQA] [Wave8] Breadcrumbs #32221

If no regressions arise, payment will be issued on 2023-12-28. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @MaciejSWM does not require payment (Contractor)
• @aimane-chnaif requires payment (Needs manual offer from BZ)

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.15-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [Wave8] Create a Workspace Card #32339

If no regressions arise, payment will be issued on 2023-12-29. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @MaciejSWM does not require payment (Contractor)
• @aimane-chnaif requires payment (Needs manual offer from BZ)

[mountiny]

The regression was coming from a different PR, @WojtekBoman is creating the Ideal nav PR again

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[aimane-chnaif]

Above deploy blocker comments are false alarm. No regressions from the PRs linked to this GH.

[aimane-chnaif]

@trjExpensify I think this is ready for payment.
PRs I reviewed:
#32221
#32339
#32425
#32439
#32588 (this was ready to merge but closed as per #32588 (comment))

[trjExpensify]

Ah cool, got it. Looking through the list, I think these are all standard $500 with the exception of the +3 line change here. With that, I calculate the contract price needed at $2,250. Does that work?

[aimane-chnaif]

yes, works for me. Thanks

[trjExpensify]

Cool, sent an offer for this.

[trjExpensify]

Paid!