refactor: [M3-6359] - MUI v5 Migration - `Components > LongviewLineGr…

…aph` (#9291)

## Description 📝
Update styles and code patterns for the LongviewLineGraph component

## How to test 🧪
So, we don't have an account that has Longview setup and when I tried to run the curl command to set it up, I kept running into errors. I think the changes are minor enough that we can just check the code

packages/manager/.changeset/pr-9291-tech-stories-1687369699291.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+MUI v5 Migration - `Components > LongviewLineGraph` ([#9291](https://github.com/linode/manager/pull/9291))

packages/manager/src/components/LongviewLineGraph/LongviewLineGraph.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { compose } from 'recompose';
 import Divider from 'src/components/core/Divider';
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
@@ -11,7 +10,7 @@ import {
   LineGraphProps,
 } from 'src/components/LineGraph/LineGraph';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   title: {
     color: theme.color.headline,
     fontWeight: 'bold',
@@ -28,18 +27,16 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-export interface Props extends LineGraphProps {
+export interface LongViewLineGraphProps extends LineGraphProps {
   title: string;
   subtitle?: string;
   error?: string;
   loading?: boolean;
   ariaLabel?: string;
 }
 
-type CombinedProps = Props;
-
-const LongviewLineGraph: React.FC<CombinedProps> = (props) => {
-  const classes = useStyles();
+export const LongviewLineGraph = React.memo((props: LongViewLineGraphProps) => {
+  const { classes } = useStyles();
 
   const { error, loading, title, subtitle, ariaLabel, ...rest } = props;
 
@@ -74,7 +71,7 @@ const LongviewLineGraph: React.FC<CombinedProps> = (props) => {
       </div>
     </React.Fragment>
   );
-};
+});
 
 export const isDataEmpty = (data: DataSet[]) => {
   return data.every(
@@ -84,5 +81,3 @@ export const isDataEmpty = (data: DataSet[]) => {
       thisSeries.data.every((thisPoint) => thisPoint[1] === null)
   );
 };
-
-export default compose<CombinedProps, Props>(React.memo)(LongviewLineGraph);

packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Apache/ApacheGraphs.tsx

@@ -3,7 +3,7 @@ import { compose } from 'recompose';
 import Paper from 'src/components/core/Paper';
 import { WithTheme, withTheme } from '@mui/styles';
 import Grid from 'src/components/Grid';
-import LongviewLineGraph from 'src/components/LongviewLineGraph';
+import { LongviewLineGraph } from 'src/components/LongviewLineGraph/LongviewLineGraph';
 import {
   convertNetworkToUnit,
   formatNetworkTooltip,

packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Graphs.tsx

@@ -4,7 +4,7 @@ import { compose } from 'recompose';
 import { makeStyles, withTheme, WithTheme } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
-import LongviewLineGraph from 'src/components/LongviewLineGraph';
+import { LongviewLineGraph } from 'src/components/LongviewLineGraph/LongviewLineGraph';
 import { isToday as _isToday } from 'src/utilities/isToday';
 import { Stat, StatWithDummyPoint } from '../../../request.types';
 import { convertData } from '../../../shared/formatters';

packages/manager/src/features/Longview/LongviewDetail/DetailTabs/MySQL/MySQLGraphs.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Paper from 'src/components/core/Paper';
 import { withTheme, WithTheme } from '@mui/styles';
 import Grid from 'src/components/Grid';
-import LongviewLineGraph from 'src/components/LongviewLineGraph';
+import { LongviewLineGraph } from 'src/components/LongviewLineGraph/LongviewLineGraph';
 import {
   formatNetworkTooltip,
   getMaxUnitAndFormatNetwork,

packages/manager/src/features/Longview/LongviewDetail/DetailTabs/NGINX/NGINXGraphs.tsx

@@ -3,7 +3,7 @@ import { compose } from 'recompose';
 import Paper from 'src/components/core/Paper';
 import { WithTheme, withTheme } from '@mui/styles';
 import Grid from 'src/components/Grid';
-import LongviewLineGraph from 'src/components/LongviewLineGraph';
+import { LongviewLineGraph } from 'src/components/LongviewLineGraph/LongviewLineGraph';
 import { LongviewProcesses, NginxResponse } from '../../../request.types';
 import { convertData } from '../../../shared/formatters';
 import ProcessGraphs, { useStyles } from '../ProcessGraphs';

packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/NetworkGraphs.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { withTheme, WithTheme } from '@mui/styles';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
-import LongviewLineGraph from 'src/components/LongviewLineGraph';
+import { LongviewLineGraph } from 'src/components/LongviewLineGraph/LongviewLineGraph';
 import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import {
   convertNetworkToUnit,

packages/manager/src/features/Longview/LongviewDetail/DetailTabs/OverviewGraphs/CPUGraph.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { withTheme, WithTheme } from '@mui/styles';
-import LongviewLineGraph from 'src/components/LongviewLineGraph';
+import { LongviewLineGraph } from 'src/components/LongviewLineGraph/LongviewLineGraph';
 import { sumCPU } from 'src/features/Longview/shared/utilities';
 import {
   convertData,

packages/manager/src/features/Longview/LongviewDetail/DetailTabs/OverviewGraphs/DiskGraph.tsx

@@ -1,7 +1,7 @@
 import { pathOr } from 'ramda';
 import * as React from 'react';
 import { withTheme, WithTheme } from '@mui/styles';
-import LongviewLineGraph from 'src/components/LongviewLineGraph';
+import { LongviewLineGraph } from 'src/components/LongviewLineGraph/LongviewLineGraph';
 import { appendStats } from 'src/features/Longview/shared/utilities';
 import { Disk, StatWithDummyPoint } from '../../../request.types';
 import { convertData } from '../../../shared/formatters';

packages/manager/src/features/Longview/LongviewDetail/DetailTabs/OverviewGraphs/LoadGraph.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { withTheme, WithTheme } from '@mui/styles';
-import LongviewLineGraph from 'src/components/LongviewLineGraph';
+import { LongviewLineGraph } from 'src/components/LongviewLineGraph/LongviewLineGraph';
 import { convertData } from '../../../shared/formatters';
 import { GraphProps } from './types';
 import { useGraphs } from './useGraphs';

packages/manager/src/features/Longview/LongviewDetail/DetailTabs/OverviewGraphs/MemoryGraph.tsx

@@ -1,7 +1,7 @@
 import { pathOr } from 'ramda';
 import * as React from 'react';
 import { withTheme, WithTheme } from '@mui/styles';
-import LongviewLineGraph from 'src/components/LongviewLineGraph';
+import { LongviewLineGraph } from 'src/components/LongviewLineGraph/LongviewLineGraph';
 import {
   convertBytesToTarget,
   readableBytes,

packages/manager/src/features/Longview/LongviewDetail/DetailTabs/OverviewGraphs/NetworkGraph.tsx

@@ -2,7 +2,7 @@ import { pathOr } from 'ramda';
 import * as React from 'react';
 import { compose } from 'recompose';
 import { withTheme, WithTheme } from '@mui/styles';
-import LongviewLineGraph from 'src/components/LongviewLineGraph';
+import { LongviewLineGraph } from 'src/components/LongviewLineGraph/LongviewLineGraph';
 import {
   formatNetworkTooltip,
   getMaxUnitAndFormatNetwork,

packages/manager/src/features/Longview/LongviewDetail/DetailTabs/ProcessGraphs.tsx

@@ -3,7 +3,7 @@ import { compose } from 'recompose';
 import { makeStyles, WithTheme, withTheme } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Grid from 'src/components/Grid';
-import LongviewLineGraph from 'src/components/LongviewLineGraph';
+import { LongviewLineGraph } from 'src/components/LongviewLineGraph/LongviewLineGraph';
 import {
   convertBytesToTarget,
   readableBytes,

packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Processes/ProcessesGraphs.tsx

@@ -3,7 +3,7 @@ import Paper from 'src/components/core/Paper';
 import { makeStyles, withTheme, WithTheme } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
-import LongviewLineGraph from 'src/components/LongviewLineGraph';
+import { LongviewLineGraph } from 'src/components/LongviewLineGraph/LongviewLineGraph';
 import {
   LongviewProcesses,
   WithStartAndEnd,