upcoming: [DI-20844] - Using reusable sx and removing styled component

linode · Oct 14, 2024 · 4a936b1 · 4a936b1
1 parent ce6ef6d
commit 4a936b1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts
@@ -24,6 +24,7 @@ import type {
   TimeDuration,
   Widgets,
 } from '@linode/api-v4';
+import type { Theme } from '@mui/material';
 import type { DataSet } from 'src/components/LineGraph/LineGraph';
 import type { CloudPulseResourceTypeMapFlag, FlagSet } from 'src/featureFlags';
 
@@ -336,16 +337,16 @@ export const isDataEmpty = (data: DataSet[]): boolean => {
 };
 
 /**
- * Returns an autocomplete with updated styles according to UX, this will be used at widget level
+ *
+ * @param theme mui theme
+ * @returns The style needed for widget level autocomplete filters
  */
-export const StyledWidgetAutocomplete = styled(Autocomplete, {
-  label: 'StyledAutocomplete',
-})(({ theme }) => ({
+export const getAutocompleteWidgetStyles = (theme: Theme) => ({
   '&& .MuiFormControl-root': {
     minWidth: '90px',
     [theme.breakpoints.down('sm')]: {
       width: '100%', // 100% width for xs and small screens
     },
     width: '90px',
   },
-}));
+});
diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseAggregateFunction.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseAggregateFunction.tsx
@@ -1,8 +1,11 @@
+import { useTheme } from '@mui/material';
 import React from 'react';
 
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+
 import { CloudPulseTooltip } from '../../shared/CloudPulseTooltip';
-import { StyledWidgetAutocomplete } from '../../Utils/CloudPulseWidgetUtils';
 import { convertStringToCamelCasesWithSpaces } from '../../Utils/utils';
+import { getAutocompleteWidgetStyles } from '../../Utils/CloudPulseWidgetUtils';
 
 export interface AggregateFunctionProperties {
   /**
@@ -54,18 +57,18 @@ export const CloudPulseAggregateFunction = React.memo(
       setSelectedAggregateFunction,
     ] = React.useState<AggregateFunction>(defaultValue);
 
+    const theme = useTheme();
+
     return (
       <CloudPulseTooltip title={'Aggregation function'}>
-        <StyledWidgetAutocomplete
+        <Autocomplete
           getOptionLabel={(option) => {
-            return convertStringToCamelCasesWithSpaces(
-              typeof option === 'string' ? option : option.label
-            ); // options needed to be display in Caps first
+            return convertStringToCamelCasesWithSpaces(option.label); // options needed to be display in Caps first
           }}
           isOptionEqualToValue={(option, value) => {
             return option.label === value.label;
           }}
-          onChange={(e, selectedAggregateFunc: AggregateFunction) => {
+          onChange={(e, selectedAggregateFunc) => {
             setSelectedAggregateFunction(selectedAggregateFunc);
             onAggregateFuncChange(selectedAggregateFunc.label);
           }}
@@ -78,7 +81,7 @@ export const CloudPulseAggregateFunction = React.memo(
           label="Select an Aggregate Function"
           noMarginTop={true}
           options={availableAggregateFunc}
-          sx={{ width: '100%' }}
+          sx={getAutocompleteWidgetStyles(theme)}
           value={selectedAggregateFunction}
         />
       </CloudPulseTooltip>

diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 
 import { CloudPulseTooltip } from '../../shared/CloudPulseTooltip';
-import { StyledWidgetAutocomplete } from '../../Utils/CloudPulseWidgetUtils';
 
 import type { TimeGranularity } from '@linode/api-v4';
+import { useTheme } from '@mui/material';
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { getAutocompleteWidgetStyles } from '../../Utils/CloudPulseWidgetUtils';
 
 interface IntervalOptions {
   label: string;
@@ -119,9 +121,11 @@ export const CloudPulseIntervalSelect = React.memo(
       defaultValue
     );
 
+    const theme = useTheme();
+
     return (
       <CloudPulseTooltip title={'Data aggregation interval'}>
-        <StyledWidgetAutocomplete
+        <Autocomplete
           isOptionEqualToValue={(
             option: IntervalOptions,
             value: IntervalOptions
@@ -149,7 +153,7 @@ export const CloudPulseIntervalSelect = React.memo(
           label="Select an Interval"
           noMarginTop={true}
           options={[autoIntervalOption, ...availableIntervalOptions]}
-          sx={{ width: { xs: '100%' } }}
+          sx={getAutocompleteWidgetStyles(theme)}
           value={selectedInterval}
         />
       </CloudPulseTooltip>