linode · mjac0bs · Oct 22, 2024 · Oct 10, 2024 · Oct 12, 2024 · Oct 12, 2024
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add title / label for all global filters in ACLP ([#11118](https://github.com/linode/manager/pull/11118))
@@ -167,21 +167,21 @@ describe('Integration Tests for DBaaS Dashboard ', () => {
 
     // Selecting a dashboard from the autocomplete input.
     ui.autocomplete
-      .findByLabel('Select a Dashboard')
+      .findByLabel('Dashboard')
       .should('be.visible')
       .type(`${dashboardName}{enter}`)
       .should('be.visible');
 
     // Select a time duration from the autocomplete input.
     ui.autocomplete
-      .findByLabel('Select a Time Duration')
+      .findByLabel('Time Range')
       .should('be.visible')
       .type(`${timeDurationToSelect}{enter}`)
       .should('be.visible');
 
     //Select a Engine from the autocomplete input.
     ui.autocomplete
-      .findByLabel('Select an Engine')
+      .findByLabel('Database Engine')
       .should('be.visible')
       .type(`${engine}{enter}`)
       .should('be.visible');
@@ -191,15 +191,15 @@ describe('Integration Tests for DBaaS Dashboard ', () => {
 
     // Select a resource from the autocomplete input.
     ui.autocomplete
-      .findByLabel('Select a Resource')
+      .findByLabel('Database Clusters')
       .should('be.visible')
       .type(`${clusterName}{enter}`)
       .click();
     cy.findByText(clusterName).should('be.visible');
 
     //Select a Node from the autocomplete input.
     ui.autocomplete
-      .findByLabel('Select a Node Type')
+      .findByLabel('Node Type')
       .should('be.visible')
       .type(`${nodeType}{enter}`);
 

@@ -139,14 +139,14 @@ describe('Integration Tests for Linode Dashboard ', () => {
 
     // Selecting a dashboard from the autocomplete input.
     ui.autocomplete
-      .findByLabel('Select a Dashboard')
+      .findByLabel('Dashboard')
       .should('be.visible')
       .type(`${dashboardName}{enter}`)
       .should('be.visible');
 
     // Select a time duration from the autocomplete input.
     ui.autocomplete
-      .findByLabel('Select a Time Duration')
+      .findByLabel('Time Range')
       .should('be.visible')
       .type(`${timeDurationToSelect}{enter}`)
       .should('be.visible');
@@ -156,7 +156,7 @@ describe('Integration Tests for Linode Dashboard ', () => {
 
     // Select a resource from the autocomplete input.
     ui.autocomplete
-      .findByLabel('Select a Resource')
+      .findByLabel('Resources')
       .should('be.visible')
       .type(`${resource}{enter}`)
       .click();

@@ -1,13 +1,10 @@
 // Function to generate random values based on the number of points
 
 import type { CloudPulseMetricsResponseData } from '@linode/api-v4';
+import type { Labels } from 'src/features/CloudPulse/shared/CloudPulseTimeRangeSelect';
+
 export const generateRandomMetricsData = (
-  time:
-    | 'Last 7 Days'
-    | 'Last 12 Hours'
-    | 'Last 24 Hours'
-    | 'Last 30 Days'
-    | 'Last 30 Minutes',
+  time: Labels,
   granularityData: '1 day' | '1 hr' | '5 min' | 'Auto'
 ): CloudPulseMetricsResponseData => {
   const currentTime = Math.floor(Date.now() / 1000);

@@ -44,7 +44,7 @@ export const SelectedIcon = styled(DoneIcon, {
 }));
 
 export const CustomPopper = (props: PopperProps) => {
-  const { style, ...rest } = props;
+  const { placement, style, ...rest } = props;
 
   const updatedStyle = {
     ...style,
@@ -58,9 +58,13 @@ export const CustomPopper = (props: PopperProps) => {
   return (
     <Popper
       {...rest}
+      modifiers={[
+        { enabled: false, name: 'preventOverflow' },
+        { enabled: !placement, name: 'flip' },
+      ]}
       data-qa-autocomplete-popper
       data-testid="autocomplete-popper"
-      modifiers={[{ enabled: false, name: 'preventOverflow' }]}
+      placement={placement}
       style={updatedStyle}
     />
   );

@@ -51,6 +51,7 @@ export const RegionSelect = <
     helperText,
     ignoreAccountAvailability,
     label,
+    noMarginTop,
     onChange,
     placeholder,
     regionFilter,
@@ -172,6 +173,7 @@ export const RegionSelect = <
         label={label ?? 'Region'}
         loading={accountAvailabilityLoading}
         loadingText="Loading regions..."
+        noMarginTop={noMarginTop ?? false}
-        noMarginTop={noMarginTop ?? false}
+        noMarginTop={noMarginTop}
-        noMarginTop={noMarginTop ?? false}
+        noMarginTop={noMarginTop}
         noOptionsText="No results"
         onChange={onChange}
         options={regionOptions}

@@ -35,7 +35,7 @@ describe('Global filters component test', () => {
       expect(timeRangeSelect).toBeInTheDocument();
 
       expect(
-        screen.getByRole('combobox', { name: 'Select a Time Duration' })
+        screen.getByRole('combobox', { name: 'Time Range' })
       ).toHaveAttribute('value', 'Last 30 Minutes');
     });
 });
@@ -107,13 +107,14 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => {
               defaultValue={preferences?.timeDuration}
               handleStatsChange={handleTimeRangeChange}
               hideLabel
-              label="Select Time Range"
+              label="Time Range"
               savePreferences
             />
             <CloudPulseTooltip placement="bottom-end" title="Refresh">
               <IconButton
                 sx={{
                   marginBlockEnd: 'auto',
+                  marginTop: theme.spacing(3.5),
                 }}
                 aria-label="Refresh Dashboard Metrics"
                 data-testid="global-refresh"

@@ -31,37 +31,49 @@ it('test getRegionProperties method', () => {
   expect(regionConfig).toBeDefined();
 
   if (regionConfig) {
-    const result = getRegionProperties(
+    const {
+      handleRegionChange,
+      label,
+      selectedDashboard,
+    } = getRegionProperties(
       {
         config: regionConfig,
         dashboard: mockDashboard,
         isServiceAnalyticsIntegration: false,
       },
       vi.fn()
     );
-    expect(result['handleRegionChange']).toBeDefined();
-    expect(result['selectedDashboard']).toEqual(mockDashboard);
+    const { name } = regionConfig.configuration;
+    expect(handleRegionChange).toBeDefined();
+    expect(selectedDashboard).toEqual(mockDashboard);
+    expect(label).toEqual(name);
   }
 });
 
 it('test getTimeDuratonProperties method', () => {
   const timeDurationConfig = linodeConfig?.filters.find(
-    (filterObj) => filterObj.name === 'Time Duration'
+    ({ name }) => name === 'Time Range'
   );
 
   expect(timeDurationConfig).toBeDefined();
 
   if (timeDurationConfig) {
-    const result = getTimeDurationProperties(
+    const {
+      handleStatsChange,
+      label,
+      savePreferences,
+    } = getTimeDurationProperties(
       {
         config: timeDurationConfig,
         dashboard: mockDashboard,
         isServiceAnalyticsIntegration: false,
       },
       vi.fn()
     );
-    expect(result['handleStatsChange']).toBeDefined();
-    expect(result['savePreferences']).toEqual(true);
+    const { name } = timeDurationConfig.configuration;
+    expect(handleStatsChange).toBeDefined();
+    expect(savePreferences).toEqual(true);
+    expect(label).toEqual(name);
   }
 });
 
@@ -73,7 +85,13 @@ it('test getResourceSelectionProperties method', () => {
   expect(resourceSelectionConfig).toBeDefined();
 
   if (resourceSelectionConfig) {
-    const result = getResourcesProperties(
+    const {
+      disabled,
+      handleResourcesSelection,
+      label,
+      savePreferences,
+      xFilter,
+    } = getResourcesProperties(
       {
         config: resourceSelectionConfig,
         dashboard: mockDashboard,
@@ -82,12 +100,12 @@ it('test getResourceSelectionProperties method', () => {
       },
       vi.fn()
     );
-    expect(result['handleResourcesSelection']).toBeDefined();
-    expect(result['savePreferences']).toEqual(false);
-    expect(result['disabled']).toEqual(false);
-    expect(JSON.stringify(result['xFilter'])).toEqual(
-      '{"+and":[{"region":"us-east"}]}'
-    );
+    const { name } = resourceSelectionConfig.configuration;
+    expect(handleResourcesSelection).toBeDefined();
+    expect(savePreferences).toEqual(false);
+    expect(disabled).toEqual(false);
+    expect(JSON.stringify(xFilter)).toEqual('{"+and":[{"region":"us-east"}]}');
+    expect(label).toEqual(name);
   }
 });
 
@@ -99,7 +117,13 @@ it('test getResourceSelectionProperties method with disabled true', () => {
   expect(resourceSelectionConfig).toBeDefined();
 
   if (resourceSelectionConfig) {
-    const result = getResourcesProperties(
+    const {
+      disabled,
+      handleResourcesSelection,
+      label,
+      savePreferences,
+      xFilter,
+    } = getResourcesProperties(
       {
         config: resourceSelectionConfig,
         dashboard: mockDashboard,
@@ -108,10 +132,12 @@ it('test getResourceSelectionProperties method with disabled true', () => {
       },
       vi.fn()
     );
-    expect(result['handleResourcesSelection']).toBeDefined();
-    expect(result['savePreferences']).toEqual(false);
-    expect(result['disabled']).toEqual(true);
-    expect(JSON.stringify(result['xFilter'])).toEqual('{"+and":[]}');
+    const { name } = resourceSelectionConfig.configuration;
+    expect(handleResourcesSelection).toBeDefined();
+    expect(savePreferences).toEqual(false);
+    expect(disabled).toEqual(true);
+    expect(JSON.stringify(xFilter)).toEqual('{"+and":[]}');
+    expect(label).toEqual(name);
   }
 });
 
@@ -201,7 +227,14 @@ it('test getCustomSelectProperties method', () => {
   expect(customSelectEngineConfig).toBeDefined();
 
   if (customSelectEngineConfig) {
-    let result = getCustomSelectProperties(
+    const {
+      clearDependentSelections,
+      disabled,
+      isMultiSelect,
+      label,
+      options,
+      savePreferences,
+    } = getCustomSelectProperties(
       {
         config: customSelectEngineConfig,
         dashboard: { ...mockDashboard, service_type: 'dbaas' },
@@ -210,21 +243,27 @@ it('test getCustomSelectProperties method', () => {
       vi.fn()
     );
 
-    expect(result.options).toBeDefined();
-    expect(result.options?.length).toEqual(2);
-    expect(result.savePreferences).toEqual(false);
-    expect(result.isMultiSelect).toEqual(false);
-    expect(result.disabled).toEqual(false);
-    expect(result.clearDependentSelections).toBeDefined();
-    expect(result.clearDependentSelections?.includes(RESOURCES)).toBe(true);
+    expect(options).toBeDefined();
+    expect(options?.length).toEqual(2);
+    expect(savePreferences).toEqual(false);
+    expect(isMultiSelect).toEqual(false);
+    expect(label).toEqual(customSelectEngineConfig.configuration.name);
+    expect(disabled).toEqual(false);
+    expect(clearDependentSelections).toBeDefined();
+    expect(clearDependentSelections?.includes(RESOURCES)).toBe(true);
 
     customSelectEngineConfig.configuration.type = CloudPulseSelectTypes.dynamic;
     customSelectEngineConfig.configuration.apiV4QueryKey =
       databaseQueries.engines;
     customSelectEngineConfig.configuration.isMultiSelect = true;
     customSelectEngineConfig.configuration.options = undefined;
 
-    result = getCustomSelectProperties(
+    const {
+      apiV4QueryKey,
+      isMultiSelect: isMultiSelectApi,
+      savePreferences: savePreferencesApi,
+      type,
+    } = getCustomSelectProperties(
       {
         config: customSelectEngineConfig,
         dashboard: mockDashboard,
@@ -233,10 +272,13 @@ it('test getCustomSelectProperties method', () => {
       vi.fn()
     );
 
-    expect(result.apiV4QueryKey).toEqual(databaseQueries.engines);
-    expect(result.type).toEqual(CloudPulseSelectTypes.dynamic);
-    expect(result.savePreferences).toEqual(false);
-    expect(result.isMultiSelect).toEqual(true);
+    const { name } = customSelectEngineConfig.configuration;
+
+    expect(apiV4QueryKey).toEqual(databaseQueries.engines);
+    expect(type).toEqual(CloudPulseSelectTypes.dynamic);
+    expect(savePreferencesApi).toEqual(false);
+    expect(isMultiSelectApi).toEqual(true);
+    expect(label).toEqual(name);
   }
 });