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
F3376726: D3845.id11957.diff
Wed, Nov 27, 1:50 AM
F3376718: D3845.id12092.diff
Wed, Nov 27, 1:49 AM
F3376277: D3845.diff
Tue, Nov 26, 11:04 PM
Unknown Object (File)
Sat, Nov 23, 9:42 AM
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

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
Lint
Lint Not Applicable
Unit
Tests Not Applicable

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