linode · jaalah-akamai · Sep 17, 2024 · Sep 9, 2024 · Sep 9, 2024 · Sep 9, 2024
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Update CSS for widget level filters and widget heading title for ACLP ([#10903](https://github.com/linode/manager/pull/10903))
@@ -16,7 +16,7 @@ import { getUserPreferenceObject } from '../Utils/UserPreference';
 import { createObjectCopy } from '../Utils/utils';
 import { CloudPulseWidget } from '../Widget/CloudPulseWidget';
 import {
-  all_interval_options,
+  allIntervalOptions,
   getInSeconds,
   getIntervalIndex,
 } from '../Widget/components/CloudPulseIntervalSelect';
@@ -124,7 +124,7 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
   const getTimeGranularity = (scrapeInterval: string) => {
     const scrapeIntervalValue = getInSeconds(scrapeInterval);
     const index = getIntervalIndex(scrapeIntervalValue);
-    return index < 0 ? all_interval_options[0] : all_interval_options[index];
+    return index < 0 ? allIntervalOptions[0] : allIntervalOptions[index];
   };
 
   const {

@@ -13,7 +13,6 @@ const queryMocks = vi.hoisted(() => ({
 const selectTimeDurationPlaceholder = 'Select Time Duration';
 const circleProgress = 'circle-progress';
 const mandatoryFiltersError = 'Mandatory Filters not Selected';
-const customNodeTypePlaceholder = 'Select Node Type';
 
 vi.mock('src/queries/cloudpulse/dashboards', async () => {
   const actual = await vi.importActual('src/queries/cloudpulse/dashboards');
@@ -98,8 +97,7 @@ describe('CloudPulseDashboardWithFilters component tests', () => {
 
     expect(screen.getByTestId('CloseIcon')).toBeDefined();
 
-    const inputBox = screen.getByPlaceholderText(customNodeTypePlaceholder);
-    fireEvent.change(inputBox, { target: { value: '' } }); // clear the value
+    fireEvent.click(screen.getByTitle('Clear')); // clear the value
     expect(screen.getByText(mandatoryFiltersError)).toBeDefined();
   });
 

@@ -1,3 +1,6 @@
+import { styled } from '@mui/material';
+
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { isToday } from 'src/utilities/isToday';
 import { getMetrics } from 'src/utilities/statMetrics';
 
@@ -331,3 +334,18 @@ export const isDataEmpty = (data: DataSet[]): boolean => {
       thisSeries.data.every((thisPoint) => thisPoint[1] === null)
   );
 };
+
+/**
+ * Returns an autocomplete with updated styles according to UX, this will be used at widget level
+ */
+export const StyledWidgetAutocomplete = styled(Autocomplete, {
+  label: 'StyledAutocomplete',
+})(() => ({
+  '&& .MuiFormControl-root': {
+    '@media (max-width: 600px)': {
+      width: '100%', // 100% width for xs and small screens (max-width: 600px)
+    },
+    minWidth: '90px',
+    width: '90px',
+  },
+}));
@@ -2,7 +2,6 @@ import { Box, Grid, Paper, Stack, Typography } from '@mui/material';
 import { DateTime } from 'luxon';
 import React from 'react';
 
-import { Divider } from 'src/components/Divider';
 import { useFlags } from 'src/hooks/useFlags';
 import { useCloudPulseMetricsQuery } from 'src/queries/cloudpulse/metrics';
 import { useProfile } from 'src/queries/profile/profile';
@@ -298,19 +297,15 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
             justifyContent={{ sm: 'space-between' }}
             padding={1}
           >
-            <Typography
-              fontSize={{ sm: '1.5rem', xs: '2rem' }}
-              marginLeft={1}
-              variant="h1"
-            >
+            <Typography marginLeft={1} variant="h2">
               {convertStringToCamelCasesWithSpaces(widget.label)}{' '}
               {!isLoading &&
                 `(${currentUnit}${unit.endsWith('ps') ? '/s' : ''})`}
             </Typography>
             <Stack
               alignItems={'center'}
               direction={{ sm: 'row' }}
-              gap={1}
+              gap={{ md: 2, xs: 1 }}
               width={{ sm: 'inherit', xs: '100%' }}
             >
               {availableMetrics?.scrape_interval && (
@@ -339,7 +334,6 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
               </Box>
             </Stack>
           </Stack>
-          <Divider />
 
           <CloudPulseLineGraph
             error={

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { StyledWidgetAutocomplete } from '../../Utils/CloudPulseWidgetUtils';
 
 export interface AggregateFunctionProperties {
   /**
@@ -37,7 +37,7 @@ export const CloudPulseAggregateFunction = React.memo(
       ) || props.availableAggregateFunctions[0];
 
     return (
-      <Autocomplete
+      <StyledWidgetAutocomplete
         isOptionEqualToValue={(option, value) => {
           return option.label == value.label;
         }}

@@ -1,9 +1,15 @@
 import React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { StyledWidgetAutocomplete } from '../../Utils/CloudPulseWidgetUtils';
 
 import type { TimeGranularity } from '@linode/api-v4';
 
+interface IntervalOptions {
+  label: string;
+  unit: string;
+  value: number;
+}
+
 export interface IntervalSelectProperties {
   /**
    * Default time granularity to be selected
@@ -39,7 +45,7 @@ export const getInSeconds = (interval: string) => {
 };
 
 // Intervals must be in ascending order here
-export const all_interval_options = [
+export const allIntervalOptions: IntervalOptions[] = [
   {
     label: '1 min',
     unit: 'min',
@@ -62,14 +68,14 @@ export const all_interval_options = [
   },
 ];
 
-const autoIntervalOption = {
+const autoIntervalOption: IntervalOptions = {
   label: 'Auto',
   unit: 'Auto',
   value: -1,
 };
 
 export const getIntervalIndex = (scrapeIntervalValue: number) => {
-  return all_interval_options.findIndex(
+  return allIntervalOptions.findIndex(
     (interval) =>
       scrapeIntervalValue <=
       getInSeconds(String(interval.value) + interval.unit.slice(0, 1))
@@ -83,18 +89,18 @@ export const CloudPulseIntervalSelect = React.memo(
     const firstIntervalIndex = getIntervalIndex(scrapeIntervalValue);
 
     // all intervals displayed if srape interval > highest available interval. Error handling done by api
-    const available_interval_options =
+    const availableIntervalOptions =
       firstIntervalIndex < 0
-        ? all_interval_options.slice()
-        : all_interval_options.slice(
+        ? allIntervalOptions.slice()
+        : allIntervalOptions.slice(
             firstIntervalIndex,
-            all_interval_options.length
+            allIntervalOptions.length
           );
 
     let default_interval =
       props.default_interval?.unit === 'Auto'
         ? autoIntervalOption
-        : available_interval_options.find(
+        : availableIntervalOptions.find(
             (obj) =>
               obj.value === props.default_interval?.value &&
               obj.unit === props.default_interval?.unit
@@ -109,11 +115,17 @@ export const CloudPulseIntervalSelect = React.memo(
     }
 
     return (
-      <Autocomplete
-        isOptionEqualToValue={(option, value) => {
+      <StyledWidgetAutocomplete
+        isOptionEqualToValue={(
+          option: IntervalOptions,
+          value: IntervalOptions
+        ) => {
           return option?.value === value?.value && option?.unit === value?.unit;
         }}
-        onChange={(_: any, selectedInterval: any) => {
+        onChange={(
+          _: React.SyntheticEvent,
+          selectedInterval: IntervalOptions
+        ) => {
           props.onIntervalChange({
             unit: selectedInterval?.unit,
             value: selectedInterval?.value,
@@ -127,7 +139,7 @@ export const CloudPulseIntervalSelect = React.memo(
         fullWidth={false}
         label="Select an Interval"
         noMarginTop={true}
-        options={[autoIntervalOption, ...available_interval_options]}
+        options={[autoIntervalOption, ...availableIntervalOptions]}
         sx={{ width: { xs: '100%' } }}
       />
     );

@@ -1,5 +1,6 @@
 import ZoomInMap from '@mui/icons-material/ZoomInMap';
 import ZoomOutMap from '@mui/icons-material/ZoomOutMap';
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 export interface ZoomIconProperties {
@@ -9,6 +10,8 @@ export interface ZoomIconProperties {
 }
 
 export const ZoomIcon = React.memo((props: ZoomIconProperties) => {
+  const theme = useTheme();
+
   const handleClick = (needZoomIn: boolean) => {
     props.handleZoomToggle(needZoomIn);
   };
@@ -17,18 +20,26 @@ export const ZoomIcon = React.memo((props: ZoomIconProperties) => {
     if (props.zoomIn) {
       return (
         <ZoomInMap
+          style={{
+            color: theme.color.grey1,
+            fontSize: 'x-large',
+            height: '34px',
+          }}
           data-testid="zoom-in"
           onClick={() => handleClick(false)}
-          style={{ color: 'grey', fontSize: 'x-large' }}
         />
       );
     }
 
     return (
       <ZoomOutMap
+        style={{
+          color: theme.color.grey1,
+          fontSize: 'x-large',
+          height: '34px',
+        }}
         data-testid="zoom-out"
         onClick={() => handleClick(true)}
-        style={{ color: 'grey', fontSize: 'x-large' }}
       />
     );
   };

@@ -61,8 +61,7 @@ describe('CloudPulseCustomSelect component tests', () => {
         type={CloudPulseSelectTypes.static}
       />
     );
-
-    expect(screen.getByPlaceholderText(testFilter)).toBeDefined();
+    expect(screen.queryByPlaceholderText(testFilter)).toBeNull();
     const keyDown = screen.getByTestId(keyboardArrowDownIcon);
     fireEvent.click(keyDown);
     fireEvent.click(screen.getByText('Test1'));
@@ -82,8 +81,7 @@ describe('CloudPulseCustomSelect component tests', () => {
         type={CloudPulseSelectTypes.static}
       />
     );
-
-    expect(screen.getByPlaceholderText(testFilter)).toBeDefined();
+    expect(screen.queryByPlaceholderText(testFilter)).toBeNull();
     const keyDown = screen.getByTestId(keyboardArrowDownIcon);
     fireEvent.click(keyDown);
     expect(screen.getAllByText('Test1').length).toEqual(2); // here it should be 2
@@ -111,13 +109,17 @@ describe('CloudPulseCustomSelect component tests', () => {
         type={CloudPulseSelectTypes.dynamic}
       />
     );
-    expect(screen.getByPlaceholderText(testFilter)).toBeDefined();
+    expect(screen.queryByPlaceholderText(testFilter)).toBeNull();
     const keyDown = screen.getByTestId(keyboardArrowDownIcon);
     fireEvent.click(keyDown);
     fireEvent.click(screen.getByText('Test1'));
     const textField = screen.getByTestId('textfield-input');
     expect(textField.getAttribute('value')).toEqual('Test1');
     expect(selectionChnage).toHaveBeenCalledTimes(1);
+
+    // if we click on clear icon , placeholder should appear for single select
+    fireEvent.click(screen.getByTitle('Clear'));
+    expect(screen.getByPlaceholderText(testFilter)).toBeDefined();
   });
 
   it('should render a component successfully with required props dynamic multi select', () => {
@@ -133,7 +135,7 @@ describe('CloudPulseCustomSelect component tests', () => {
         type={CloudPulseSelectTypes.dynamic}
       />
     );
-    expect(screen.getByPlaceholderText(testFilter)).toBeDefined();
+    expect(screen.queryByPlaceholderText(testFilter)).toBeNull();
     const keyDown = screen.getByTestId(keyboardArrowDownIcon);
     fireEvent.click(keyDown);
     expect(screen.getAllByText('Test1').length).toEqual(2); // here it should be 2
@@ -148,5 +150,9 @@ describe('CloudPulseCustomSelect component tests', () => {
     expect(screen.getAllByText('Test1').length).toEqual(1);
     expect(screen.getAllByText('Test2').length).toEqual(1);
     expect(selectionChnage).toHaveBeenCalledTimes(2); // check if selection change is called twice as we selected two options
+
+    // if we click on clear icon , placeholder should appear
+    fireEvent.click(screen.getByTitle('Clear'));
+    expect(screen.getByPlaceholderText(testFilter)).toBeDefined();
   });
 });
@@ -175,7 +175,6 @@ export const CloudPulseCustomSelect = React.memo(
     };
 
     let staticErrorText = '';
-
     // check for input prop errors
     if (
       (CloudPulseSelectTypes.static === type &&
@@ -205,6 +204,12 @@ export const CloudPulseCustomSelect = React.memo(
             ? options ?? []
             : queriedResources ?? []
         }
+        placeholder={
+          selectedResource &&
+          (!Array.isArray(selectedResource) || selectedResource.length)
+            ? ''
+            : placeholder || 'Select a Value'
+        }
         textFieldProps={{
           hideLabel: true,
         }}
@@ -214,7 +219,6 @@ export const CloudPulseCustomSelect = React.memo(
         label="Select a Value"
         multiple={isMultiSelect}
         onChange={handleChange}
-        placeholder={placeholder ?? 'Select a Value'}
         value={selectedResource ?? (isMultiSelect ? [] : null)}
       />
     );

@@ -90,6 +90,9 @@ export const CloudPulseResourcesSelect = React.memo(
           setSelectedResources(resourceSelections);
           handleResourcesSelection(resourceSelections);
         }}
+        placeholder={
+          selectedResources?.length ? '' : placeholder || 'Select Resources'
+        }
         textFieldProps={{
           InputProps: {
             sx: {
@@ -111,7 +114,6 @@ export const CloudPulseResourcesSelect = React.memo(
         limitTags={2}
         multiple
         options={getResourcesList()}
-        placeholder={placeholder ? placeholder : 'Select Resources'}
         value={selectedResources}
       />
     );