Refactor: Migrate one-off Bootstrap Components Table, DropdownButton, NavItem, ListGroup to Material UI

[jayeclark]

Description

There are a handful of Bootstrap components that are used only once in the code base and need to be migrated to Material UI or semantic html as part of the migration away from React Bootstrap.

If you'd like to help, please respond to this issue and let me know which files you'd like to tackle, and I will mark those as claimed!

Claimed
Table - claimed by @annovo MenuItem & DropdownButton - claimed by @annovo NavItem @annovo ListGroup @annovo

Available. None at this time

Table

Used in: components/Board Replace with: Material UI DataGrid + sorting, pagination & customization options Relevant docs: Material UI Table

MenuItem & DropdownButton

Used in: components/LeftNav Replace with: Material UI menu components Relevant docs: Material UI menu, particularly Selected Menu and Positioned Menu

NavItem

Used in: components/RouteNavItem Replace with: Unclear if it actually needs to be replaced with anything... the navigation items are styled with inline styling that overrides the behavior of NavItem. Needs some research but at first glance there doesn't seem to be an equivalent component in Material UI and this component doesn't seem to be doing much.

ListGroup

Used in: learn/ExperienceModule Replace with: Unclear if this is actually doing anything - ListGroup is used but not the corresponding ListGroup.Item. Needs some investigation to see if just removing the component or replacing with semantic HTML has any effect on layout. Relevant docs: Stack is probably the closest component in Material UI to what ListGroup is being used for in this file.

[jeremydthomas]

Id like to try one of these, just trying to learn this stuff if thats ok.

[jayeclark]

Sure! Is there any one in particular that you're interested in? I can mark it off as claimed so no one else picks it up.

[jeremydthomas]

Hello, the table one works for me.

[jayeclark]

Awesome, I’ve marked it off so no one else claims it!

[annovo]

Hello, I'd like to try and help with MenuItem & DropdownButton!

I also checked the RouteNavItem and didn't find any references, so I'm not sure if it's used somewhere.

Also replacing the ListGroup with div didn't seem to change anything. If this implementation is okay, I can also change it.

[jayeclark]

Awesome! Claiming those for you now.

Re ListGroup not doing anything, that’s entirely possible and what I hypothesized. 😁 Just needed someone to confirm to be sure, & remove.

Re RouteNavItem I’m still seeing it in there. Are we looking in the same place? (Sorry for weird screenshot format - I’m on my phone.)

[annovo]

Re RouteNavItem I’m still seeing it in there. Are we looking in the same place? (Sorry for weird screenshot format - I’m on my phone.)

Yes, NavItem is used in the component, it's just the component RouteNavItem isn't used anywhere as I see it 🙂 I still can look into it, I'm just not sure how to test it after modifications if it doesn't appear anywhere

[jayeclark]

Oh, hah I understand now. You’re totally right - good catch. It’s not used anywhere anymore.

It should be fine to just delete the whole component in that case! There are definitely some legacy files here & there from the super early days that are no longer used and no longer intended to be used.

[annovo]

Okay, I will delete it then!

[jeremydthomas]

@jayeclark I'm not going to lie, I'm struggling a bit with this. If this is a big rush, and someone more experienced than I wants to do it, that's fine by me.

[jayeclark]

@jeremydthomas Take your time! This is a code cleanup issue - we’d like to get react-bootstrap out as a dependency, but nothing is broken and this isn’t a blocker on any other issue.

(I took like 3 months on one PR here. 😂)

Let me know if there’s anything I can help with. I’m pretty new to Material UI myself, but I’ve contributed to the library and I’m pretty good at helping with troubleshooting.

[mikhael28]

It's totally okay to struggle through something, keep in mind that your struggles are most likely not related to your understanding of something but likely a function of fatigue. At the end of the day (its 8:30pm PST my time), I have trouble doing the type of deep work I do during the day. Something that takes me 30 minutes at 8:30am might literally take me 2-3 hours. Sometimes, it's best to pick something up in the morning/when you are fresh!

[mikhael28]

Great work @annovo on migrating your items!

[jeremydthomas]

@mikhael28 @jayeclark thanks for the support and pep talk

[mikhael28]

@jeremydthomas are you still planning on continuing on migrating the Table component? Let us know in the next few days :) Or should we assign it to someone else? Sorry if I seem like I'm in a hurry, but we would LOVE to be able to remove the react-bootstrap library from our build 😭

[jeremydthomas]

@mikhael28 Its ok if you do, I might have bit off more than I can chew. I havent had time to work on this as I got snowed in with 36 inches of snow at work and was stuck there from Tuesday morning to Friday night. Brain was too fried from lack of sleep to even think about working on it.

[mikhael28]

Whoah @jeremydthomas that sounds pretty intense, nothing to blame there! If you feel like you've bitten off a bit more than you can chew, how about you try a more simple issue? https://github.com/mikhael28/paretOS/issues/179

Finish replacing all the Glyphicons from react-bootstrap in the repository, there are only one or two left! https://github.com/mikhael28/paretOS/issues/179

[mikhael28]

In the meantime, I'm going to take you off this issue @jeremydthomas - @annovo would you like to pick this up? You've finished every other part of this ticket 😆

[annovo]

Sure, I'll do it :)

[jeremydthomas]

@mikhael28 sure I'll try it, and @annovo can't wait to see how you do this

[mikhael28]

w00t!

[jayeclark]

Woo hoo! These have all been completed!