refactor: [M3-6274] - MUI v5 Migration - SRC > Features > Longview Pt1: Longview Detail

[coliu-akamai]

Description 📝

• migrating styling for src > features >longview > longview detail. Splitting this ticket up into two PRs (this one is still 50 changed files though yikes 😅 ) -- this one, which covers LongviewDetail, and a second one, which will cover LongviewLanding -- so that it's easier to test / catch regressions

Major Changes 🔄

Inside LongivewDetail package,

• remove React.FC
• change to named exports (unless components were being lazily exported, then kept as is)
• remove makeStyles
• some files had a lot of common styling, so moved all this to CommonStyles.styles.ts (similar to this ticket from way back)

How to test 🧪

• navigate to Longview Details and ensure that everything looks as expected, and that all functionality is still the same

[tyler-akamai]

So it seems like there was a styling regression at some point with the longview page:

if you run:
git checkout 6a5d547

you can see the original styling. For some reason though, I am getting a 'clamp' error so I can only see it for a split second.

I am also getting this error in prod as well, not sure what is causing it.

I'm not sure if this would be part of this ticket or another.

[coliu-akamai]

@tyler-akamai I think it's the commit right after that one that changes things on Longview (but it's weird since it doesn't touch any longview files...) just to confirm I'm not going crazy, can you run git checkout 79f16f89f6086814431dd59012eeb0855d67c802?

edit: tried some commits before 6a5d547, and the longview landing page looks like what prod currently is, so I don't think it was 79f15f8

[coliu-akamai]

Commenting here for visibility: I found (at least one of) the issue(s), related to this pr: #9488 -- basically, changing from default to named exports (and removing the /core folder) caused us to change the file we were importing from, which then changed styling.

Using the LongviewClients.tsx file as an example:

• it it used to import a Grid using a default export (import Grid from 'src/components/Grid';) which pointed to the src/components/Grid/Grid.tsx file.
• now the import line is import { Grid } from 'src/components/Grid' which points to src/components/Grid.tsx (this file used to be in a core folder, so previously, if we wanted this file we would have needed to import from src/components/core/Grid)
• the grid from src/components/Grid/Grid.tsx had some additional styling on it (namely spacing={2}) depending on the props passed in, so that's causing a styling difference for the LongviewClients.tsx file. This may also be the problem for the other files in src/features/Longview, haven't really poked around yet
• to see the differences, try git checkout e556e59 (the commit that was pr refactor: Finish organizing components #9488) vs git checkout 84f1083 (the commit right before the pr) and navigate to the Longview landing page

++ will be handling in this ticket and #9612

[coliu-akamai]

nvm, just put up a super quick fix here: #9619 + after that gets merged in, will update this and the p2 pr

[jaalah-akamai]

these changes should fix the gap issue

[coliu-akamai]

Thanks Jaalah! I'd accidentally thought the Listening services/Active connection were supposed to look like that and that it was an interesting UI decision oops, should have double checked 😅

[jaalah-akamai]

🚀 Thanks for great work on this!