Page MenuHomePhabricator

[web] Use new `Tabs.Container` instead of existing `Tabs` component
ClosedPublic

Authored by atul on Apr 25 2022, 4:59 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Nov 9, 10:48 PM
Unknown Object (File)
Sat, Nov 9, 7:26 AM
Unknown Object (File)
Fri, Nov 8, 12:34 AM
Unknown Object (File)
Thu, Nov 7, 11:30 PM
Unknown Object (File)
Thu, Nov 7, 9:44 PM
Unknown Object (File)
Tue, Nov 5, 4:45 AM
Unknown Object (File)
Sat, Nov 2, 12:41 PM
Unknown Object (File)
Oct 23 2024, 12:11 AM

Details

Summary

Use the new Tabs.Container component in ThreadSettingsModal to get things closer visually.

There's still a good amount of styling to do here... this is just the first step


Depends on D3844

Test Plan

Here's what it looks like (for now.. will re-style momentarily):

Diff Detail

Repository
rCOMM Comm
Branch
arcpatch-D3845 (branched from master)
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

atul requested review of this revision.Apr 25 2022, 5:04 PM
tomek added inline comments.
web/modals/threads/thread-settings-modal.react.js
164 ↗(On Diff #11892)

Do we need to use form? If yes, do we need to wrap whole tab container, or use it inside each tab?

This revision is now accepted and ready to land.Apr 26 2022, 9:28 AM
web/modals/threads/thread-settings-modal.react.js
112 ↗(On Diff #11892)

Should we memoize this?

web/modals/threads/thread-settings-modal.react.js
112 ↗(On Diff #11892)

It was a little tricky to do in this diff, but I think we should.

The issue is that the hooks all need to "live" above the !threadInfo early return, which means we'd need to add a bunch of invariants and whatnot that assert threadInfo exists.


From D3823:

I was planning on doing three "passes" after the refactor to make sure everything is good since a lot of things changed/got moved around.

  1. Optimizing (avoiding unnecessary renders, memoizing things, etc.)
  2. Styling (making sure that things look consistent, styles aren't broken, etc)
  3. Testing (go through all of the ThreadSettingsModal functionality thoroughly to ensure that there aren't any regressions)

Will take a look at memoizing the tabs in the first pass.

164 ↗(On Diff #11892)

Will push the form tag down to child Tab components in a subsequent diff