From bddb5b9f79273e6f1bd089933439661c9e624bb3 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Thu, 10 Oct 2024 15:30:16 +0530 Subject: [PATCH 01/34] upcoming: [DI-20928] - Filter titles initial changes --- .../src/components/RegionSelect/RegionSelect.tsx | 2 ++ .../src/features/CloudPulse/Utils/FilterBuilder.ts | 8 ++++++-- .../src/features/CloudPulse/Utils/FilterConfig.ts | 4 ++-- .../CloudPulse/shared/CloudPulseCustomSelect.tsx | 8 ++++++-- .../shared/CloudPulseDashboardFilterBuilder.tsx | 4 ++-- .../CloudPulse/shared/CloudPulseRegionSelect.tsx | 13 +++++++++---- .../CloudPulse/shared/CloudPulseResourcesSelect.tsx | 6 ++++-- 7 files changed, 31 insertions(+), 14 deletions(-) diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.tsx index 5d67de51d21..1a107f1aa3f 100644 --- a/packages/manager/src/components/RegionSelect/RegionSelect.tsx +++ b/packages/manager/src/components/RegionSelect/RegionSelect.tsx @@ -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} noOptionsText="No results" onChange={onChange} options={regionOptions} diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts index dc9ec47fe01..1d02f88cd3f 100644 --- a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts +++ b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts @@ -56,11 +56,12 @@ export const getRegionProperties = ( props: CloudPulseFilterProperties, handleRegionChange: (region: string | undefined, savePref?: boolean) => void ): CloudPulseRegionSelectProps => { - const { placeholder } = props.config.configuration; + const { name, placeholder } = props.config.configuration; const { dashboard, isServiceAnalyticsIntegration, preferences } = props; return { defaultValue: preferences?.[REGION], handleRegionChange, + label: name, placeholder, savePreferences: !isServiceAnalyticsIntegration, selectedDashboard: dashboard, @@ -84,7 +85,7 @@ export const getResourcesProperties = ( savePref?: boolean ) => void ): CloudPulseResourcesSelectProps => { - const { filterKey, placeholder } = props.config.configuration; + const { filterKey, name, placeholder } = props.config.configuration; const { config, dashboard, @@ -100,6 +101,7 @@ export const getResourcesProperties = ( dashboard ), handleResourcesSelection: handleResourceChange, + label: name, placeholder, resourceType: dashboard.service_type, savePreferences: !isServiceAnalyticsIntegration, @@ -129,6 +131,7 @@ export const getCustomSelectProperties = ( filterType, isMultiSelect, maxSelections, + name, options, placeholder, } = props.config.configuration; @@ -156,6 +159,7 @@ export const getCustomSelectProperties = ( filterType, handleSelectionChange: handleCustomSelectChange, isMultiSelect, + label: name, maxSelections, options, placeholder, diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts index 9034ab46ca8..1d64e308fb9 100644 --- a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts +++ b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts @@ -26,7 +26,7 @@ export const LINODE_CONFIG: Readonly = { isFilterable: true, isMetricsFilter: true, isMultiSelect: true, - name: 'Resource', + name: 'Resources', neededInServicePage: false, placeholder: 'Select a Resource', priority: 2, @@ -98,7 +98,7 @@ export const DBAAS_CONFIG: Readonly = { isFilterable: true, isMetricsFilter: true, isMultiSelect: true, - name: 'Resource', + name: 'Resources', neededInServicePage: false, placeholder: 'Select a DB Cluster', priority: 3, diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx index 4d25327a3ea..055733f4af8 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx @@ -81,6 +81,8 @@ export interface CloudPulseCustomSelectProps { */ isMultiSelect?: boolean; + label: string; + /** * The maximum selections that the user can make incase of multiselect */ @@ -126,6 +128,7 @@ export const CloudPulseCustomSelect = React.memo( filterKey, handleSelectionChange, isMultiSelect, + label, maxSelections, options, placeholder, @@ -228,16 +231,17 @@ export const CloudPulseCustomSelect = React.memo( : placeholder || 'Select a Value' } textFieldProps={{ - hideLabel: true, + // hideLabel: true, }} autoHighlight disabled={isAutoCompleteDisabled} errorText={staticErrorText} isOptionEqualToValue={(option, value) => option.label === value.label} - label={placeholder || 'Select a Value'} + label={label || 'Select a Value'} multiple={isMultiSelect} onChange={handleChange} value={selectedResource ?? (isMultiSelect ? [] : null)} + noMarginTop /> ); }, diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index 73bb56016ad..5671839c754 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -310,9 +310,9 @@ export const CloudPulseDashboardFilterBuilder = React.memo( container display={showFilter ? 'flex' : 'none'} item - maxHeight={'120px'} + maxHeight={theme.spacing(20)} overflow={'auto'} - rowGap={2} + rowGap={1} xs={12} > diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx index 7f775d3eb87..6fa3a6622bc 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx @@ -8,6 +8,7 @@ import type { Dashboard, FilterValue } from '@linode/api-v4'; export interface CloudPulseRegionSelectProps { defaultValue?: FilterValue; handleRegionChange: (region: string | undefined, savePref?: boolean) => void; + label: string; placeholder?: string; savePreferences?: boolean; selectedDashboard: Dashboard | undefined; @@ -20,6 +21,7 @@ export const CloudPulseRegionSelect = React.memo( const { defaultValue, handleRegionChange, + label, placeholder, savePreferences, selectedDashboard, @@ -44,18 +46,21 @@ export const CloudPulseRegionSelect = React.memo( setSelectedRegion(region?.id); handleRegionChange(region?.id, savePreferences); }} - textFieldProps={{ - hideLabel: true, - }} + textFieldProps={ + { + // hideLabel: true, + } + } currentCapability={undefined} data-testid="region-select" disableClearable={false} disabled={!selectedDashboard || !regions} fullWidth - label="Select a Region" + label={label ?? 'Select a Region'} placeholder={placeholder ?? 'Select a Region'} regions={regions ? regions : []} value={selectedRegion} + noMarginTop /> ); }, diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx index 4b43d137019..99be72fef8e 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx @@ -21,6 +21,7 @@ export interface CloudPulseResourcesSelectProps { resources: CloudPulseResources[], savePref?: boolean ) => void; + label: string; placeholder?: string; region?: string; resourceType: string | undefined; @@ -34,6 +35,7 @@ export const CloudPulseResourcesSelect = React.memo( defaultValue, disabled, handleResourcesSelection, + label, placeholder, region, resourceType, @@ -115,18 +117,18 @@ export const CloudPulseResourcesSelect = React.memo( }, }, }, - hideLabel: true, }} autoHighlight clearOnBlur data-testid="resource-select" disabled={disabled || isLoading} isOptionEqualToValue={(option, value) => option.id === value.id} - label="Select a Resource" + label={label ?? 'Resources'} limitTags={2} multiple options={getResourcesList} value={selectedResources ?? []} + noMarginTop /> ); }, From 1e7ad15d4a2aff154ce3de85c2fe353b5168b7be Mon Sep 17 00:00:00 2001 From: vmangalr Date: Sat, 12 Oct 2024 10:11:10 +0530 Subject: [PATCH 02/34] upcoming: [DI-20928] - ESLint issue fix --- .../features/CloudPulse/shared/CloudPulseCustomSelect.tsx | 5 +---- .../features/CloudPulse/shared/CloudPulseRegionSelect.tsx | 7 +------ .../CloudPulse/shared/CloudPulseResourcesSelect.tsx | 2 +- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx index 055733f4af8..bd527a5c470 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx @@ -230,18 +230,15 @@ export const CloudPulseCustomSelect = React.memo( ? '' : placeholder || 'Select a Value' } - textFieldProps={{ - // hideLabel: true, - }} autoHighlight disabled={isAutoCompleteDisabled} errorText={staticErrorText} isOptionEqualToValue={(option, value) => option.label === value.label} label={label || 'Select a Value'} multiple={isMultiSelect} + noMarginTop onChange={handleChange} value={selectedResource ?? (isMultiSelect ? [] : null)} - noMarginTop /> ); }, diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx index 6fa3a6622bc..4627215564c 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx @@ -46,21 +46,16 @@ export const CloudPulseRegionSelect = React.memo( setSelectedRegion(region?.id); handleRegionChange(region?.id, savePreferences); }} - textFieldProps={ - { - // hideLabel: true, - } - } currentCapability={undefined} data-testid="region-select" disableClearable={false} disabled={!selectedDashboard || !regions} fullWidth label={label ?? 'Select a Region'} + noMarginTop placeholder={placeholder ?? 'Select a Region'} regions={regions ? regions : []} value={selectedRegion} - noMarginTop /> ); }, diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx index 99be72fef8e..3d660b358c2 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx @@ -126,9 +126,9 @@ export const CloudPulseResourcesSelect = React.memo( label={label ?? 'Resources'} limitTags={2} multiple + noMarginTop options={getResourcesList} value={selectedResources ?? []} - noMarginTop /> ); }, From 414109949bc6daaa54fb99e7d96a31a8f5458ea6 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Sat, 12 Oct 2024 10:21:19 +0530 Subject: [PATCH 03/34] upcoming: [DI-20928] - Name to label alias change --- .../src/features/CloudPulse/Utils/FilterBuilder.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts index 1d02f88cd3f..7e8cad885ba 100644 --- a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts +++ b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts @@ -56,12 +56,12 @@ export const getRegionProperties = ( props: CloudPulseFilterProperties, handleRegionChange: (region: string | undefined, savePref?: boolean) => void ): CloudPulseRegionSelectProps => { - const { name, placeholder } = props.config.configuration; + const { name: label, placeholder } = props.config.configuration; const { dashboard, isServiceAnalyticsIntegration, preferences } = props; return { defaultValue: preferences?.[REGION], handleRegionChange, - label: name, + label, placeholder, savePreferences: !isServiceAnalyticsIntegration, selectedDashboard: dashboard, @@ -85,7 +85,7 @@ export const getResourcesProperties = ( savePref?: boolean ) => void ): CloudPulseResourcesSelectProps => { - const { filterKey, name, placeholder } = props.config.configuration; + const { filterKey, name: label, placeholder } = props.config.configuration; const { config, dashboard, @@ -101,7 +101,7 @@ export const getResourcesProperties = ( dashboard ), handleResourcesSelection: handleResourceChange, - label: name, + label, placeholder, resourceType: dashboard.service_type, savePreferences: !isServiceAnalyticsIntegration, @@ -131,7 +131,7 @@ export const getCustomSelectProperties = ( filterType, isMultiSelect, maxSelections, - name, + name: label, options, placeholder, } = props.config.configuration; @@ -159,7 +159,7 @@ export const getCustomSelectProperties = ( filterType, handleSelectionChange: handleCustomSelectChange, isMultiSelect, - label: name, + label, maxSelections, options, placeholder, From bd61ad46b8ee0c7ca4882fb58984520fcd1023c5 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Sat, 12 Oct 2024 10:46:03 +0530 Subject: [PATCH 04/34] upcoming: [DI-20928] - Add a margin below filter button to look neat while showing filter --- .../CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index 5671839c754..9727fb62579 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -293,6 +293,7 @@ export const CloudPulseDashboardFilterBuilder = React.memo( sx={{ justifyContent: 'start', m: 0, + marginBottom: showFilter ? 1 : 0, minHeight: 'auto', minWidth: 'auto', p: 0, From c76b1466c6960e4c67fa6c5d072b6aa6747bb2d0 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Sat, 12 Oct 2024 10:50:38 +0530 Subject: [PATCH 05/34] upcoming: [DI-20928] - Fix UT issues --- .../CloudPulse/shared/CloudPulseCustomSelect.test.tsx | 4 ++++ .../CloudPulse/shared/CloudPulseRegionSelect.test.tsx | 1 + .../CloudPulse/shared/CloudPulseResourcesSelect.test.tsx | 6 ++++++ 3 files changed, 11 insertions(+) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.test.tsx index 78ae7c77efe..e07b83138eb 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.test.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.test.tsx @@ -56,6 +56,7 @@ describe('CloudPulseCustomSelect component tests', () => { filterKey="testfilter" filterType="number" handleSelectionChange={vi.fn()} + label="Test" options={mockOptions} placeholder={testFilter} type={CloudPulseSelectTypes.static} @@ -76,6 +77,7 @@ describe('CloudPulseCustomSelect component tests', () => { filterType="number" handleSelectionChange={vi.fn()} isMultiSelect={true} + label="Test" options={[...mockOptions]} placeholder={testFilter} type={CloudPulseSelectTypes.static} @@ -105,6 +107,7 @@ describe('CloudPulseCustomSelect component tests', () => { filterKey="testfilter" filterType="number" handleSelectionChange={selectionChnage} + label="Test" placeholder={testFilter} type={CloudPulseSelectTypes.dynamic} /> @@ -131,6 +134,7 @@ describe('CloudPulseCustomSelect component tests', () => { filterType="number" handleSelectionChange={selectionChnage} isMultiSelect={true} + label="Test" placeholder={testFilter} type={CloudPulseSelectTypes.dynamic} /> diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx index fc49edf0f0a..be4f31edf36 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx @@ -10,6 +10,7 @@ import type { Region } from '@linode/api-v4'; const props: CloudPulseRegionSelectProps = { handleRegionChange: vi.fn(), + label: 'Region', selectedDashboard: undefined, }; diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx index 019d038369b..d2210f8ddc8 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx @@ -33,6 +33,7 @@ describe('CloudPulseResourcesSelect component tests', () => { const { getByPlaceholderText, getByTestId } = renderWithTheme( @@ -50,6 +51,7 @@ describe('CloudPulseResourcesSelect component tests', () => { renderWithTheme( @@ -77,6 +79,7 @@ describe('CloudPulseResourcesSelect component tests', () => { renderWithTheme( @@ -105,6 +108,7 @@ describe('CloudPulseResourcesSelect component tests', () => { renderWithTheme( @@ -134,6 +138,7 @@ describe('CloudPulseResourcesSelect component tests', () => { renderWithTheme( @@ -175,6 +180,7 @@ describe('CloudPulseResourcesSelect component tests', () => { Date: Sat, 12 Oct 2024 10:51:02 +0530 Subject: [PATCH 06/34] upcoming: [DI-20928] - Remove unused import --- packages/manager/src/MainContent.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx index c328b9bb2a4..304c192cf1a 100644 --- a/packages/manager/src/MainContent.tsx +++ b/packages/manager/src/MainContent.tsx @@ -28,7 +28,6 @@ import { ENABLE_MAINTENANCE_MODE } from './constants'; import { complianceUpdateContext } from './context/complianceUpdateContext'; import { sessionExpirationContext } from './context/sessionExpirationContext'; import { switchAccountSessionContext } from './context/switchAccountSessionContext'; -import { useIsACLPEnabled } from './features/CloudPulse/Utils/utils'; import { useIsDatabasesEnabled } from './features/Databases/utilities'; import { useIsPlacementGroupsEnabled } from './features/PlacementGroups/utils'; import { useGlobalErrors } from './hooks/useGlobalErrors'; From c31def0b10244acfcda7c0da4f23eb651a37829d Mon Sep 17 00:00:00 2001 From: vmangalr Date: Mon, 14 Oct 2024 12:14:13 +0530 Subject: [PATCH 07/34] upcoming: [DI-20928] - PR comments --- .../src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx | 2 +- .../src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx | 2 +- .../features/CloudPulse/shared/CloudPulseResourcesSelect.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx index bd527a5c470..03adc97c684 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx @@ -234,7 +234,7 @@ export const CloudPulseCustomSelect = React.memo( disabled={isAutoCompleteDisabled} errorText={staticErrorText} isOptionEqualToValue={(option, value) => option.label === value.label} - label={label || 'Select a Value'} + label={Boolean(label && label.length) ? label : 'Select a Value'} multiple={isMultiSelect} noMarginTop onChange={handleChange} diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx index 4627215564c..37a84cfef62 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx @@ -51,7 +51,7 @@ export const CloudPulseRegionSelect = React.memo( disableClearable={false} disabled={!selectedDashboard || !regions} fullWidth - label={label ?? 'Select a Region'} + label={Boolean(label && label.length) ? label : 'Region'} noMarginTop placeholder={placeholder ?? 'Select a Region'} regions={regions ? regions : []} diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx index 3d660b358c2..07ad4758641 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx @@ -123,7 +123,7 @@ export const CloudPulseResourcesSelect = React.memo( data-testid="resource-select" disabled={disabled || isLoading} isOptionEqualToValue={(option, value) => option.id === value.id} - label={label ?? 'Resources'} + label={Boolean(label && label.length) ? label : 'Resources'} limitTags={2} multiple noMarginTop From 9f8ddcffd2e35437a5a42ec56c64f05c2ab259e4 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Mon, 14 Oct 2024 12:29:14 +0530 Subject: [PATCH 08/34] upcoming: [DI-20928] - PR comments --- .../src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx | 2 +- .../src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx | 2 +- .../features/CloudPulse/shared/CloudPulseResourcesSelect.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx index 03adc97c684..ec2b043294e 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx @@ -234,7 +234,7 @@ export const CloudPulseCustomSelect = React.memo( disabled={isAutoCompleteDisabled} errorText={staticErrorText} isOptionEqualToValue={(option, value) => option.label === value.label} - label={Boolean(label && label.length) ? label : 'Select a Value'} + label={Boolean(label?.length) ? label : 'Select a Value'} multiple={isMultiSelect} noMarginTop onChange={handleChange} diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx index 37a84cfef62..e7b121585cc 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx @@ -51,7 +51,7 @@ export const CloudPulseRegionSelect = React.memo( disableClearable={false} disabled={!selectedDashboard || !regions} fullWidth - label={Boolean(label && label.length) ? label : 'Region'} + label={Boolean(label?.length) ? label : 'Region'} noMarginTop placeholder={placeholder ?? 'Select a Region'} regions={regions ? regions : []} diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx index 07ad4758641..4d30810b93c 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx @@ -123,7 +123,7 @@ export const CloudPulseResourcesSelect = React.memo( data-testid="resource-select" disabled={disabled || isLoading} isOptionEqualToValue={(option, value) => option.id === value.id} - label={Boolean(label && label.length) ? label : 'Resources'} + label={Boolean(label?.length) ? label : 'Resources'} limitTags={2} multiple noMarginTop From b7a9c783aa0b73234d28aa91a21c51e14648c26e Mon Sep 17 00:00:00 2001 From: vmangalr Date: Tue, 15 Oct 2024 10:24:55 +0530 Subject: [PATCH 09/34] upcoming: [DI-20928] - Title name updates --- .../manager/src/features/CloudPulse/Utils/FilterConfig.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts index 1d64e308fb9..af7e0f8d91b 100644 --- a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts +++ b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts @@ -60,7 +60,7 @@ export const DBAAS_CONFIG: Readonly = { isFilterable: false, // isFilterable -- this determines whethere you need to pass it metrics api isMetricsFilter: false, // if it is false, it will go as a part of filter params, else global filter isMultiSelect: false, - name: 'DB Engine', + name: 'Engine', neededInServicePage: false, options: [ { @@ -98,7 +98,7 @@ export const DBAAS_CONFIG: Readonly = { isFilterable: true, isMetricsFilter: true, isMultiSelect: true, - name: 'Resources', + name: 'DB Cluster', neededInServicePage: false, placeholder: 'Select a DB Cluster', priority: 3, From 8fb44c34e98b90c9871b7a3a7b3172cd46810f9e Mon Sep 17 00:00:00 2001 From: vmangalr Date: Wed, 16 Oct 2024 17:49:37 +0530 Subject: [PATCH 10/34] upcoming: [DI-20928] - Title name for dashboard and time range selection too --- .../src/features/CloudPulse/Overview/GlobalFilters.tsx | 1 + .../CloudPulse/shared/CloudPulseDashboardSelect.tsx | 6 ++---- .../CloudPulse/shared/CloudPulseTimeRangeSelect.tsx | 6 ++---- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx index 320e8e1280d..793d424a974 100644 --- a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx +++ b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx @@ -114,6 +114,7 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => { )} - textFieldProps={{ - hideLabel: true, - }} autoHighlight clearOnBlur data-testid="cloudpulse-dashboard-select" @@ -113,8 +110,9 @@ export const CloudPulseDashboardSelect = React.memo( fullWidth groupBy={(option: Dashboard) => option.service_type} isOptionEqualToValue={(option, value) => option.id === value.id} - label="Select a Dashboard" + label="Dashboard" loading={dashboardsLoading || serviceTypesLoading} + noMarginTop options={getSortedDashboardsList(dashboardsList ?? [])} placeholder={placeHolder} value={selectedDashboard ?? null} // Undefined is not allowed for uncontrolled component diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx index 6a37d417c1a..323141e3bd2 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx @@ -80,15 +80,13 @@ export const CloudPulseTimeRangeSelect = React.memo( onChange={(e, value: Item) => { handleChange(value); }} - textFieldProps={{ - hideLabel: true, - }} autoHighlight data-testid="cloudpulse-time-duration" disableClearable fullWidth isOptionEqualToValue={(option, value) => option.value === value.value} - label="Select a Time Duration" + label="Time Range" + noMarginTop options={options} value={selectedTimeRange} /> From 6657e92b290b2db1b404852b13ee445510ee4991 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Wed, 16 Oct 2024 17:50:47 +0530 Subject: [PATCH 11/34] upcoming: [DI-20928] - Title name for dashboard and time range selection too --- .../manager/src/features/CloudPulse/Overview/GlobalFilters.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx index 793d424a974..06b1a0a348d 100644 --- a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx +++ b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx @@ -114,7 +114,7 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => { Date: Wed, 16 Oct 2024 18:41:36 +0530 Subject: [PATCH 12/34] upcoming: [DI-20928] - Test fixes --- .../src/features/CloudPulse/Overview/GlobalFilters.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.test.tsx b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.test.tsx index bdb9bc34884..286c95377e1 100644 --- a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.test.tsx +++ b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.test.tsx @@ -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'); }); }); From 4660ad857f9fbb09b61d9aabb56a712e6697f34a Mon Sep 17 00:00:00 2001 From: vmangalr Date: Thu, 17 Oct 2024 12:07:24 +0530 Subject: [PATCH 13/34] upcoming: [DI-20928] - CSS changes --- packages/manager/src/MainContent.tsx | 1 + .../CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx index 304c192cf1a..c328b9bb2a4 100644 --- a/packages/manager/src/MainContent.tsx +++ b/packages/manager/src/MainContent.tsx @@ -28,6 +28,7 @@ import { ENABLE_MAINTENANCE_MODE } from './constants'; import { complianceUpdateContext } from './context/complianceUpdateContext'; import { sessionExpirationContext } from './context/sessionExpirationContext'; import { switchAccountSessionContext } from './context/switchAccountSessionContext'; +import { useIsACLPEnabled } from './features/CloudPulse/Utils/utils'; import { useIsDatabasesEnabled } from './features/Databases/utilities'; import { useIsPlacementGroupsEnabled } from './features/PlacementGroups/utils'; import { useGlobalErrors } from './hooks/useGlobalErrors'; diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index 9727fb62579..06ad1437093 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -313,7 +313,7 @@ export const CloudPulseDashboardFilterBuilder = React.memo( item maxHeight={theme.spacing(20)} overflow={'auto'} - rowGap={1} + rowGap={2} xs={12} > From 6492a3d98c6c14db3332f8919fa93289294cbfd5 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Thu, 17 Oct 2024 12:46:28 +0530 Subject: [PATCH 14/34] upcoming: [DI-20928] - Code refactoring and UT additions --- .../components/RegionSelect/RegionSelect.tsx | 2 +- .../CloudPulse/Utils/FilterBuilder.test.ts | 100 ++++++++++++------ .../CloudPulse/Utils/FilterBuilder.ts | 3 +- .../features/CloudPulse/Utils/FilterConfig.ts | 2 +- .../shared/CloudPulseCustomSelect.test.tsx | 6 +- .../shared/CloudPulseCustomSelect.tsx | 2 +- .../shared/CloudPulseRegionSelect.tsx | 2 +- .../shared/CloudPulseResourcesSelect.test.tsx | 5 + .../shared/CloudPulseResourcesSelect.tsx | 2 +- .../shared/CloudPulseTimeRangeSelect.tsx | 4 +- 10 files changed, 87 insertions(+), 41 deletions(-) diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.tsx index 1a107f1aa3f..2a76106b6f8 100644 --- a/packages/manager/src/components/RegionSelect/RegionSelect.tsx +++ b/packages/manager/src/components/RegionSelect/RegionSelect.tsx @@ -173,7 +173,7 @@ export const RegionSelect = < label={label ?? 'Region'} loading={accountAvailabilityLoading} loadingText="Loading regions..." - noMarginTop={noMarginTop} + noMarginTop={noMarginTop || false} noOptionsText="No results" onChange={onChange} options={regionOptions} diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts index 6687ebbb561..8b95abb53de 100644 --- a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts +++ b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts @@ -31,7 +31,11 @@ it('test getRegionProperties method', () => { expect(regionConfig).toBeDefined(); if (regionConfig) { - const result = getRegionProperties( + const { + handleRegionChange, + label, + selectedDashboard, + } = getRegionProperties( { config: regionConfig, dashboard: mockDashboard, @@ -39,20 +43,25 @@ it('test getRegionProperties method', () => { }, vi.fn() ); - expect(result['handleRegionChange']).toBeDefined(); - expect(result['selectedDashboard']).toEqual(mockDashboard); + expect(handleRegionChange).toBeDefined(); + expect(selectedDashboard).toEqual(mockDashboard); + expect(label).toEqual(regionConfig.configuration.name); } }); it('test getTimeDuratonProperties method', () => { const timeDurationConfig = linodeConfig?.filters.find( - (filterObj) => filterObj.name === 'Time Duration' + (filterObj) => filterObj.name === 'Time Range' ); expect(timeDurationConfig).toBeDefined(); if (timeDurationConfig) { - const result = getTimeDurationProperties( + const { + handleStatsChange, + label, + savePreferences, + } = getTimeDurationProperties( { config: timeDurationConfig, dashboard: mockDashboard, @@ -60,8 +69,9 @@ it('test getTimeDuratonProperties method', () => { }, vi.fn() ); - expect(result['handleStatsChange']).toBeDefined(); - expect(result['savePreferences']).toEqual(true); + expect(handleStatsChange).toBeDefined(); + expect(savePreferences).toEqual(true); + expect(label).toEqual(timeDurationConfig.configuration.name); } }); @@ -73,7 +83,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 +98,11 @@ 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"}]}' - ); + expect(handleResourcesSelection).toBeDefined(); + expect(savePreferences).toEqual(false); + expect(disabled).toEqual(false); + expect(JSON.stringify(xFilter)).toEqual('{"+and":[{"region":"us-east"}]}'); + expect(label).toEqual(resourceSelectionConfig.configuration.name); } }); @@ -99,7 +114,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 +129,11 @@ 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":[]}'); + expect(handleResourcesSelection).toBeDefined(); + expect(savePreferences).toEqual(false); + expect(disabled).toEqual(true); + expect(JSON.stringify(xFilter)).toEqual('{"+and":[]}'); + expect(label).toEqual(resourceSelectionConfig.configuration.name); } }); @@ -201,7 +223,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,13 +239,14 @@ 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 = @@ -224,7 +254,12 @@ it('test getCustomSelectProperties method', () => { customSelectEngineConfig.configuration.isMultiSelect = true; customSelectEngineConfig.configuration.options = undefined; - result = getCustomSelectProperties( + const { + apiV4QueryKey, + isMultiSelect: isMultiSelectApi, + savePreferences: savePreferencesApi, + type, + } = getCustomSelectProperties( { config: customSelectEngineConfig, dashboard: mockDashboard, @@ -233,10 +268,11 @@ 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); + expect(apiV4QueryKey).toEqual(databaseQueries.engines); + expect(type).toEqual(CloudPulseSelectTypes.dynamic); + expect(savePreferencesApi).toEqual(false); + expect(isMultiSelectApi).toEqual(true); + expect(label).toEqual(customSelectEngineConfig.configuration.name); } }); diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts index 7e8cad885ba..e058b2e3d03 100644 --- a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts +++ b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts @@ -187,13 +187,14 @@ export const getTimeDurationProperties = ( savePref?: boolean ) => void ): CloudPulseTimeRangeSelectProps => { - const { placeholder } = props.config.configuration; + const { name: label, placeholder } = props.config.configuration; const { isServiceAnalyticsIntegration, preferences } = props; const timeDuration = preferences?.timeDuration; return { defaultValue: timeDuration, handleStatsChange: handleTimeRangeChange, + label, placeholder, savePreferences: !isServiceAnalyticsIntegration, }; diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts index af7e0f8d91b..c44e25256d5 100644 --- a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts +++ b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts @@ -2,7 +2,7 @@ import { CloudPulseSelectTypes } from './models'; import type { CloudPulseServiceTypeFilterMap } from './models'; -const TIME_DURATION = 'Time Duration'; +const TIME_DURATION = 'Time Range'; export const LINODE_CONFIG: Readonly = { filters: [ diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.test.tsx index e07b83138eb..59f92338cf9 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.test.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.test.tsx @@ -63,6 +63,7 @@ describe('CloudPulseCustomSelect component tests', () => { /> ); expect(screen.queryByPlaceholderText(testFilter)).toBeNull(); + expect(screen.getByLabelText('Test')).toBeInTheDocument(); const keyDown = screen.getByTestId(keyboardArrowDownIcon); fireEvent.click(keyDown); fireEvent.click(screen.getByText('Test1')); @@ -77,13 +78,14 @@ describe('CloudPulseCustomSelect component tests', () => { filterType="number" handleSelectionChange={vi.fn()} isMultiSelect={true} - label="Test" + label="CustomTest" options={[...mockOptions]} placeholder={testFilter} type={CloudPulseSelectTypes.static} /> ); expect(screen.queryByPlaceholderText(testFilter)).toBeNull(); + expect(screen.getByLabelText('CustomTest')).toBeInTheDocument(); const keyDown = screen.getByTestId(keyboardArrowDownIcon); fireEvent.click(keyDown); expect(screen.getAllByText('Test1').length).toEqual(2); // here it should be 2 @@ -113,6 +115,7 @@ describe('CloudPulseCustomSelect component tests', () => { /> ); expect(screen.queryByPlaceholderText(testFilter)).toBeNull(); + expect(screen.getByLabelText('Test')).toBeInTheDocument(); const keyDown = screen.getByTestId(keyboardArrowDownIcon); fireEvent.click(keyDown); fireEvent.click(screen.getByText('Test1')); @@ -140,6 +143,7 @@ describe('CloudPulseCustomSelect component tests', () => { /> ); expect(screen.queryByPlaceholderText(testFilter)).toBeNull(); + expect(screen.getByLabelText('Test')).toBeInTheDocument(); const keyDown = screen.getByTestId(keyboardArrowDownIcon); fireEvent.click(keyDown); expect(screen.getAllByText('Test1').length).toEqual(2); // here it should be 2 diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx index ec2b043294e..bd527a5c470 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx @@ -234,7 +234,7 @@ export const CloudPulseCustomSelect = React.memo( disabled={isAutoCompleteDisabled} errorText={staticErrorText} isOptionEqualToValue={(option, value) => option.label === value.label} - label={Boolean(label?.length) ? label : 'Select a Value'} + label={label || 'Select a Value'} multiple={isMultiSelect} noMarginTop onChange={handleChange} diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx index e7b121585cc..6a6b7bc388c 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx @@ -51,7 +51,7 @@ export const CloudPulseRegionSelect = React.memo( disableClearable={false} disabled={!selectedDashboard || !regions} fullWidth - label={Boolean(label?.length) ? label : 'Region'} + label={label || 'Region'} noMarginTop placeholder={placeholder ?? 'Select a Region'} regions={regions ? regions : []} diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx index d2210f8ddc8..ec2f6c04ef8 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx @@ -39,6 +39,7 @@ describe('CloudPulseResourcesSelect component tests', () => { /> ); expect(getByTestId('resource-select')).toBeInTheDocument(); + expect(screen.getByLabelText('Resources')).toBeInTheDocument(); expect(getByPlaceholderText('Select a Resource')).toBeInTheDocument(); }), it('should render resources happy path', () => { @@ -57,6 +58,7 @@ describe('CloudPulseResourcesSelect component tests', () => { /> ); fireEvent.click(screen.getByRole('button', { name: 'Open' })); + expect(screen.getByLabelText('Resources')).toBeInTheDocument(); expect( screen.getByRole('option', { name: 'linode-3', @@ -86,6 +88,7 @@ describe('CloudPulseResourcesSelect component tests', () => { ); fireEvent.click(screen.getByRole('button', { name: 'Open' })); fireEvent.click(screen.getByRole('option', { name: SELECT_ALL })); + expect(screen.getByLabelText('Resources')).toBeInTheDocument(); expect( screen.getByRole('option', { name: 'linode-5', @@ -116,6 +119,7 @@ describe('CloudPulseResourcesSelect component tests', () => { fireEvent.click(screen.getByRole('button', { name: 'Open' })); fireEvent.click(screen.getByRole('option', { name: SELECT_ALL })); fireEvent.click(screen.getByRole('option', { name: 'Deselect All' })); + expect(screen.getByLabelText('Resources')).toBeInTheDocument(); expect( screen.getByRole('option', { name: 'linode-7', @@ -146,6 +150,7 @@ describe('CloudPulseResourcesSelect component tests', () => { fireEvent.click(screen.getByRole('button', { name: 'Open' })); fireEvent.click(screen.getByRole('option', { name: 'linode-9' })); fireEvent.click(screen.getByRole('option', { name: 'linode-10' })); + expect(screen.getByLabelText('Resources')).toBeInTheDocument(); expect( screen.getByRole('option', { diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx index 4d30810b93c..635bc2a4e76 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx @@ -123,7 +123,7 @@ export const CloudPulseResourcesSelect = React.memo( data-testid="resource-select" disabled={disabled || isLoading} isOptionEqualToValue={(option, value) => option.id === value.id} - label={Boolean(label?.length) ? label : 'Resources'} + label={label || 'Resources'} limitTags={2} multiple noMarginTop diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx index 323141e3bd2..c0e74b2d2b6 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx @@ -36,7 +36,7 @@ export type Labels = export const CloudPulseTimeRangeSelect = React.memo( (props: CloudPulseTimeRangeSelectProps) => { - const { defaultValue, handleStatsChange, savePreferences } = props; + const { defaultValue, handleStatsChange, label, savePreferences } = props; const options = generateSelectOptions(); const getDefaultValue = React.useCallback((): Item => { if (!savePreferences) { @@ -85,7 +85,7 @@ export const CloudPulseTimeRangeSelect = React.memo( disableClearable fullWidth isOptionEqualToValue={(option, value) => option.value === value.value} - label="Time Range" + label={label || 'Time Range'} noMarginTop options={options} value={selectedTimeRange} From c431f17913943cced79e2f559363830d7e401120 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Thu, 17 Oct 2024 13:05:53 +0530 Subject: [PATCH 15/34] upcoming: [DI-20928] - Code refactoring and edits --- .../manager/src/features/CloudPulse/Overview/GlobalFilters.tsx | 2 +- .../features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx index 06b1a0a348d..5da22919834 100644 --- a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx +++ b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx @@ -107,7 +107,7 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => { defaultValue={preferences?.timeDuration} handleStatsChange={handleTimeRangeChange} hideLabel - label="Select Time Range" + label="Time Range" savePreferences /> diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx index be4f31edf36..5d85ad3156c 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx @@ -20,9 +20,10 @@ describe('CloudPulseRegionSelect', () => { } as ReturnType); it('should render a Region Select component', () => { - const { getByTestId } = renderWithTheme( + const { getByLabelText, getByTestId } = renderWithTheme( ); + expect(getByLabelText(props.label)).toBeInTheDocument(); expect(getByTestId('region-select')).toBeInTheDocument(); }); }); From 03326713923a80474b6d80bcd6d505878f404d6a Mon Sep 17 00:00:00 2001 From: vmangalr Date: Thu, 17 Oct 2024 13:13:15 +0530 Subject: [PATCH 16/34] upcoming: [DI-20928] - Destructure properties from objects and use --- .../CloudPulse/Utils/FilterBuilder.test.ts | 16 +++++++++++----- .../shared/CloudPulseRegionSelect.test.tsx | 3 ++- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts index 8b95abb53de..963d804147c 100644 --- a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts +++ b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts @@ -43,9 +43,10 @@ it('test getRegionProperties method', () => { }, vi.fn() ); + const { name } = regionConfig.configuration; expect(handleRegionChange).toBeDefined(); expect(selectedDashboard).toEqual(mockDashboard); - expect(label).toEqual(regionConfig.configuration.name); + expect(label).toEqual(name); } }); @@ -69,9 +70,10 @@ it('test getTimeDuratonProperties method', () => { }, vi.fn() ); + const { name } = timeDurationConfig.configuration; expect(handleStatsChange).toBeDefined(); expect(savePreferences).toEqual(true); - expect(label).toEqual(timeDurationConfig.configuration.name); + expect(label).toEqual(name); } }); @@ -98,11 +100,12 @@ it('test getResourceSelectionProperties method', () => { }, vi.fn() ); + 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(resourceSelectionConfig.configuration.name); + expect(label).toEqual(name); } }); @@ -129,11 +132,12 @@ it('test getResourceSelectionProperties method with disabled true', () => { }, vi.fn() ); + const { name } = resourceSelectionConfig.configuration; expect(handleResourcesSelection).toBeDefined(); expect(savePreferences).toEqual(false); expect(disabled).toEqual(true); expect(JSON.stringify(xFilter)).toEqual('{"+and":[]}'); - expect(label).toEqual(resourceSelectionConfig.configuration.name); + expect(label).toEqual(name); } }); @@ -268,11 +272,13 @@ it('test getCustomSelectProperties method', () => { vi.fn() ); + 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(customSelectEngineConfig.configuration.name); + expect(label).toEqual(name); } }); diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx index 5d85ad3156c..3b571880994 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.test.tsx @@ -23,7 +23,8 @@ describe('CloudPulseRegionSelect', () => { const { getByLabelText, getByTestId } = renderWithTheme( ); - expect(getByLabelText(props.label)).toBeInTheDocument(); + const { label } = props; + expect(getByLabelText(label)).toBeInTheDocument(); expect(getByTestId('region-select')).toBeInTheDocument(); }); }); From c3ea8311514879079d285dacd34148120cde8528 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Thu, 17 Oct 2024 15:29:45 +0530 Subject: [PATCH 17/34] upcoming: [DI-20928] - Resource to Resources --- .../manager/src/features/CloudPulse/Utils/FilterConfig.ts | 6 +++--- .../CloudPulse/shared/CloudPulseComponentRenderer.test.tsx | 2 +- .../CloudPulse/shared/CloudPulseResourcesSelect.test.tsx | 2 +- .../CloudPulse/shared/CloudPulseResourcesSelect.tsx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts index c44e25256d5..43838df9efc 100644 --- a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts +++ b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts @@ -28,7 +28,7 @@ export const LINODE_CONFIG: Readonly = { isMultiSelect: true, name: 'Resources', neededInServicePage: false, - placeholder: 'Select a Resource', + placeholder: 'Select Resources', priority: 2, }, name: 'Resources', @@ -98,9 +98,9 @@ export const DBAAS_CONFIG: Readonly = { isFilterable: true, isMetricsFilter: true, isMultiSelect: true, - name: 'DB Cluster', + name: 'DB Clusters', neededInServicePage: false, - placeholder: 'Select a DB Cluster', + placeholder: 'Select DB Clusters', priority: 3, }, name: 'Resources', diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseComponentRenderer.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseComponentRenderer.test.tsx index 1b907419a46..dd74c70a1ef 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseComponentRenderer.test.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseComponentRenderer.test.tsx @@ -81,6 +81,6 @@ describe('ComponentRenderer component tests', () => { })} ); - expect(getByPlaceholderText('Select a Resource')).toBeDefined(); + expect(getByPlaceholderText('Select Resources')).toBeDefined(); }); }); diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx index ec2f6c04ef8..23aaecb35ac 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx @@ -40,7 +40,7 @@ describe('CloudPulseResourcesSelect component tests', () => { ); expect(getByTestId('resource-select')).toBeInTheDocument(); expect(screen.getByLabelText('Resources')).toBeInTheDocument(); - expect(getByPlaceholderText('Select a Resource')).toBeInTheDocument(); + expect(getByPlaceholderText('Select Resources')).toBeInTheDocument(); }), it('should render resources happy path', () => { queryMocks.useResourcesQuery.mockReturnValue({ diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx index 635bc2a4e76..9ee85d4cd6e 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx @@ -105,7 +105,7 @@ export const CloudPulseResourcesSelect = React.memo( isAutocompleteOpen.current = true; }} placeholder={ - selectedResources?.length ? '' : placeholder || 'Select a Resource' + selectedResources?.length ? '' : placeholder || 'Select Resources' } textFieldProps={{ InputProps: { From 69138786ebcf16a418acd1c53f989298063e33c7 Mon Sep 17 00:00:00 2001 From: agorthi Date: Thu, 17 Oct 2024 17:39:58 +0530 Subject: [PATCH 18/34] label changes --- .../cloudpulse/dbaas-widgets-verification.spec.ts | 10 +++++----- .../cloudpulse/linode-widget-verification.spec.ts | 6 +++--- packages/manager/cypress/support/util/cloudpulse.ts | 11 ++++------- 3 files changed, 12 insertions(+), 15 deletions(-) diff --git a/packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts b/packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts index b5b479ced6d..9603f9f980c 100644 --- a/packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts +++ b/packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts @@ -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('Engine') .should('be.visible') .type(`${engine}{enter}`) .should('be.visible'); @@ -191,7 +191,7 @@ describe('Integration Tests for DBaaS Dashboard ', () => { // Select a resource from the autocomplete input. ui.autocomplete - .findByLabel('Select a Resource') + .findByLabel('DB Clusters') .should('be.visible') .type(`${clusterName}{enter}`) .click(); @@ -199,7 +199,7 @@ describe('Integration Tests for DBaaS Dashboard ', () => { //Select a Node from the autocomplete input. ui.autocomplete - .findByLabel('Select a Node Type') + .findByLabel('Node Type') .should('be.visible') .type(`${nodeType}{enter}`); diff --git a/packages/manager/cypress/e2e/core/cloudpulse/linode-widget-verification.spec.ts b/packages/manager/cypress/e2e/core/cloudpulse/linode-widget-verification.spec.ts index dd95d49c7f2..11106e45858 100644 --- a/packages/manager/cypress/e2e/core/cloudpulse/linode-widget-verification.spec.ts +++ b/packages/manager/cypress/e2e/core/cloudpulse/linode-widget-verification.spec.ts @@ -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(); diff --git a/packages/manager/cypress/support/util/cloudpulse.ts b/packages/manager/cypress/support/util/cloudpulse.ts index 78c36f4b8d4..0bc4225c710 100644 --- a/packages/manager/cypress/support/util/cloudpulse.ts +++ b/packages/manager/cypress/support/util/cloudpulse.ts @@ -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); @@ -51,4 +48,4 @@ export const generateRandomMetricsData = ( result: [{ metric: {}, values }], result_type: 'matrix', }; -}; +}; \ No newline at end of file From dd1b95969970df87370da142ae0cc4d0e1efab1e Mon Sep 17 00:00:00 2001 From: vmangalr Date: Thu, 17 Oct 2024 18:26:13 +0530 Subject: [PATCH 19/34] upcoming: [DI-20928] - Popper placement changes --- .../src/components/Autocomplete/Autocomplete.styles.tsx | 8 ++++++-- .../features/CloudPulse/shared/CloudPulseCustomSelect.tsx | 5 +++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx index 9f31b39af99..d36c2be8fc9 100644 --- a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx +++ b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx @@ -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 ( ); diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx index bd527a5c470..16cddc35741 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; +import { CustomPopper } from 'src/components/Autocomplete/Autocomplete.styles'; import { useGetCustomFiltersQuery } from 'src/queries/cloudpulse/customfilters'; import { @@ -14,6 +15,7 @@ import type { QueryFunctionAndKey, } from '../Utils/models'; import type { AclpConfig, FilterValue } from '@linode/api-v4'; +import type { PopperProps } from '@mui/material'; /** * These are the properties requires for CloudPulseCustomSelect Components @@ -219,6 +221,9 @@ export const CloudPulseCustomSelect = React.memo( return ( ( + + )} options={ type === CloudPulseSelectTypes.static ? options ?? [] From b0956b8ccc0c841be9be989c87f3b151fbe6b3ab Mon Sep 17 00:00:00 2001 From: vmangalr Date: Thu, 17 Oct 2024 20:58:39 +0530 Subject: [PATCH 20/34] upcoming: [DI-20928] - PR comments --- .../manager/src/components/Autocomplete/Autocomplete.styles.tsx | 2 +- packages/manager/src/components/RegionSelect/RegionSelect.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx index d36c2be8fc9..5e4c9989e51 100644 --- a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx +++ b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx @@ -64,7 +64,7 @@ export const CustomPopper = (props: PopperProps) => { ]} data-qa-autocomplete-popper data-testid="autocomplete-popper" - placement={placement || undefined} + placement={placement} style={updatedStyle} /> ); diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.tsx index 2a76106b6f8..3cd42b3dc33 100644 --- a/packages/manager/src/components/RegionSelect/RegionSelect.tsx +++ b/packages/manager/src/components/RegionSelect/RegionSelect.tsx @@ -173,7 +173,7 @@ export const RegionSelect = < label={label ?? 'Region'} loading={accountAvailabilityLoading} loadingText="Loading regions..." - noMarginTop={noMarginTop || false} + noMarginTop={noMarginTop ?? false} noOptionsText="No results" onChange={onChange} options={regionOptions} From b03c799cc40e60c6ceb88e6f6e19862a3adee07d Mon Sep 17 00:00:00 2001 From: vmangalr Date: Sun, 20 Oct 2024 08:36:22 +0530 Subject: [PATCH 21/34] upcoming: [DI-20928] - ESLint issue fix --- packages/manager/cypress/support/util/cloudpulse.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/cypress/support/util/cloudpulse.ts b/packages/manager/cypress/support/util/cloudpulse.ts index 0bc4225c710..a760bc84f39 100644 --- a/packages/manager/cypress/support/util/cloudpulse.ts +++ b/packages/manager/cypress/support/util/cloudpulse.ts @@ -48,4 +48,4 @@ export const generateRandomMetricsData = ( result: [{ metric: {}, values }], result_type: 'matrix', }; -}; \ No newline at end of file +}; From 7ded56ef254a67e658229ca3d6db992f46a38c2e Mon Sep 17 00:00:00 2001 From: vmangalr Date: Sun, 20 Oct 2024 09:28:02 +0530 Subject: [PATCH 22/34] upcoming: [DI-20928] - Added comments --- package.json | 3 ++- .../src/components/Autocomplete/Autocomplete.styles.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index e84e1d54952..72152417c21 100644 --- a/package.json +++ b/package.json @@ -56,5 +56,6 @@ "volta": { "node": "20.17.0" }, - "dependencies": {} + "dependencies": {}, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx index 5e4c9989e51..e85cb6ad10f 100644 --- a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx +++ b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx @@ -60,7 +60,7 @@ export const CustomPopper = (props: PopperProps) => { {...rest} modifiers={[ { enabled: false, name: 'preventOverflow' }, - { enabled: !placement, name: 'flip' }, + { enabled: !placement, name: 'flip' }, // if the placement is explicitly passed, no need to flip ]} data-qa-autocomplete-popper data-testid="autocomplete-popper" From 63f5a7a049478d208f39263e8b943e925cfeba72 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Sun, 20 Oct 2024 10:45:29 +0530 Subject: [PATCH 23/34] upcoming: [DI-20928] - remove unwanted changes in package.json --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 72152417c21..e84e1d54952 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,5 @@ "volta": { "node": "20.17.0" }, - "dependencies": {}, - "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" + "dependencies": {} } From 7c5971260f544bbbebf6f2808e881ec129b8d778 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Mon, 21 Oct 2024 10:18:55 +0530 Subject: [PATCH 24/34] upcoming: [DI-20928] - use theme and add changeset --- .../pr-11118-upcoming-features-1729486113842.md | 5 +++++ .../shared/CloudPulseDashboardFilterBuilder.tsx | 10 +++++----- 2 files changed, 10 insertions(+), 5 deletions(-) create mode 100644 packages/manager/.changeset/pr-11118-upcoming-features-1729486113842.md diff --git a/packages/manager/.changeset/pr-11118-upcoming-features-1729486113842.md b/packages/manager/.changeset/pr-11118-upcoming-features-1729486113842.md new file mode 100644 index 00000000000..dba2806a662 --- /dev/null +++ b/packages/manager/.changeset/pr-11118-upcoming-features-1729486113842.md @@ -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)) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index 06ad1437093..6ca02466bce 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -292,11 +292,11 @@ export const CloudPulseDashboardFilterBuilder = React.memo( } sx={{ justifyContent: 'start', - m: 0, - marginBottom: showFilter ? 1 : 0, + m: theme.spacing(0), + marginBottom: showFilter ? theme.spacing(1) : theme.spacing(0), minHeight: 'auto', minWidth: 'auto', - p: 0, + p: theme.spacing(0), svg: { color: theme.color.grey4, }, @@ -307,13 +307,13 @@ export const CloudPulseDashboardFilterBuilder = React.memo( From bd64ca2d23608f2d56a3540c843204febda4aae7 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Mon, 21 Oct 2024 10:20:25 +0530 Subject: [PATCH 25/34] upcoming: [DI-20928] - more simplification --- .../CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index 6ca02466bce..c38a4fa15b1 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -293,7 +293,7 @@ export const CloudPulseDashboardFilterBuilder = React.memo( sx={{ justifyContent: 'start', m: theme.spacing(0), - marginBottom: showFilter ? theme.spacing(1) : theme.spacing(0), + marginBottom: theme.spacing(showFilter ? 1 : 0), minHeight: 'auto', minWidth: 'auto', p: theme.spacing(0), From df14b701cfc9d6e0e3fc48df27a668157b8fe215 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Mon, 21 Oct 2024 10:37:42 +0530 Subject: [PATCH 26/34] upcoming: [DI-20928] - more space for filters max height --- .../CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index c38a4fa15b1..4444f942a57 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -311,7 +311,7 @@ export const CloudPulseDashboardFilterBuilder = React.memo( container display={showFilter ? 'flex' : 'none'} item - maxHeight={theme.spacing(20)} + maxHeight={theme.spacing(22)} overflow={'auto'} rowGap={theme.spacing(2)} xs={12} From 2486f4520e0c109559d4f22f949f4b54a449170d Mon Sep 17 00:00:00 2001 From: vmangalr Date: Mon, 21 Oct 2024 14:44:14 +0530 Subject: [PATCH 27/34] upcoming: [DI-20928] - remove comment --- .../manager/src/components/Autocomplete/Autocomplete.styles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx index e85cb6ad10f..5e4c9989e51 100644 --- a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx +++ b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx @@ -60,7 +60,7 @@ export const CustomPopper = (props: PopperProps) => { {...rest} modifiers={[ { enabled: false, name: 'preventOverflow' }, - { enabled: !placement, name: 'flip' }, // if the placement is explicitly passed, no need to flip + { enabled: !placement, name: 'flip' }, ]} data-qa-autocomplete-popper data-testid="autocomplete-popper" From a39ca7628412ea67b4f800ba6bd8e68053eec1f3 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Mon, 21 Oct 2024 15:52:27 +0530 Subject: [PATCH 28/34] upcoming: [DI-20928] - destructure props --- .../manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts index 963d804147c..1dbbb4cab1d 100644 --- a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts +++ b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts @@ -52,7 +52,7 @@ it('test getRegionProperties method', () => { it('test getTimeDuratonProperties method', () => { const timeDurationConfig = linodeConfig?.filters.find( - (filterObj) => filterObj.name === 'Time Range' + ({ name }) => name === 'Time Range' ); expect(timeDurationConfig).toBeDefined(); From f3f16646447267aea9c3b6b1e9ef8d64caf5b63e Mon Sep 17 00:00:00 2001 From: vmangalr Date: Tue, 22 Oct 2024 18:13:43 +0530 Subject: [PATCH 29/34] upcoming: [DI-20928] - DB to Databases --- .../e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts | 2 +- .../manager/src/features/CloudPulse/Utils/FilterConfig.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts b/packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts index 9603f9f980c..8ff44b962bc 100644 --- a/packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts +++ b/packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts @@ -191,7 +191,7 @@ describe('Integration Tests for DBaaS Dashboard ', () => { // Select a resource from the autocomplete input. ui.autocomplete - .findByLabel('DB Clusters') + .findByLabel('Database Clusters') .should('be.visible') .type(`${clusterName}{enter}`) .click(); diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts index 43838df9efc..19fa9e8a35f 100644 --- a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts +++ b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts @@ -98,9 +98,9 @@ export const DBAAS_CONFIG: Readonly = { isFilterable: true, isMetricsFilter: true, isMultiSelect: true, - name: 'DB Clusters', + name: 'Database Clusters', neededInServicePage: false, - placeholder: 'Select DB Clusters', + placeholder: 'Select Database Clusters', priority: 3, }, name: 'Resources', From e84fb40509d9e2e4f45ff7a88647a73d606be2ea Mon Sep 17 00:00:00 2001 From: vmangalr Date: Tue, 22 Oct 2024 18:34:03 +0530 Subject: [PATCH 30/34] upcoming: [DI-20928] - DB to Databases for engine --- .../e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts | 2 +- .../manager/src/features/CloudPulse/Utils/FilterConfig.ts | 4 ++-- .../shared/CloudPulseDashboardFilterBuilder.test.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts b/packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts index 8ff44b962bc..d1f1181337d 100644 --- a/packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts +++ b/packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts @@ -181,7 +181,7 @@ describe('Integration Tests for DBaaS Dashboard ', () => { //Select a Engine from the autocomplete input. ui.autocomplete - .findByLabel('Engine') + .findByLabel('Database Engine') .should('be.visible') .type(`${engine}{enter}`) .should('be.visible'); diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts index 19fa9e8a35f..55c96678749 100644 --- a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts +++ b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts @@ -60,7 +60,7 @@ export const DBAAS_CONFIG: Readonly = { isFilterable: false, // isFilterable -- this determines whethere you need to pass it metrics api isMetricsFilter: false, // if it is false, it will go as a part of filter params, else global filter isMultiSelect: false, - name: 'Engine', + name: 'Database Engine', neededInServicePage: false, options: [ { @@ -72,7 +72,7 @@ export const DBAAS_CONFIG: Readonly = { label: 'PostgreSQL', }, ], - placeholder: 'Select an Engine', + placeholder: 'Select a Database Engine', priority: 2, type: CloudPulseSelectTypes.static, }, diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.test.tsx index 006dc05afb6..ec2c10bacc5 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.test.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.test.tsx @@ -32,7 +32,7 @@ describe('CloudPulseDashboardFilterBuilder component tests', () => { /> ); - expect(getByPlaceholderText('Select an Engine')).toBeDefined(); + expect(getByPlaceholderText('Select a Database Engine')).toBeDefined(); expect(getByPlaceholderText('Select a Region')).toBeDefined(); }); }); From 04343c5835886d8b867323a0fd1c8b665c093369 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Tue, 22 Oct 2024 21:02:10 +0530 Subject: [PATCH 31/34] upcoming: [DI-20928] - Minor PR comments --- .../src/components/Autocomplete/Autocomplete.styles.tsx | 8 ++------ .../manager/src/components/RegionSelect/RegionSelect.tsx | 2 +- .../features/CloudPulse/shared/CloudPulseCustomSelect.tsx | 8 +++++--- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx index 5e4c9989e51..9f31b39af99 100644 --- a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx +++ b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx @@ -44,7 +44,7 @@ export const SelectedIcon = styled(DoneIcon, { })); export const CustomPopper = (props: PopperProps) => { - const { placement, style, ...rest } = props; + const { style, ...rest } = props; const updatedStyle = { ...style, @@ -58,13 +58,9 @@ export const CustomPopper = (props: PopperProps) => { return ( ); diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.tsx index 3cd42b3dc33..1a107f1aa3f 100644 --- a/packages/manager/src/components/RegionSelect/RegionSelect.tsx +++ b/packages/manager/src/components/RegionSelect/RegionSelect.tsx @@ -173,7 +173,7 @@ export const RegionSelect = < label={label ?? 'Region'} loading={accountAvailabilityLoading} loadingText="Loading regions..." - noMarginTop={noMarginTop ?? false} + noMarginTop={noMarginTop} noOptionsText="No results" onChange={onChange} options={regionOptions} diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx index 16cddc35741..0b90438036e 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx @@ -221,9 +221,6 @@ export const CloudPulseCustomSelect = React.memo( return ( ( - - )} options={ type === CloudPulseSelectTypes.static ? options ?? [] @@ -235,6 +232,11 @@ export const CloudPulseCustomSelect = React.memo( ? '' : placeholder || 'Select a Value' } + slotProps={{ + popper: { + placement: 'bottom', + }, + }} autoHighlight disabled={isAutoCompleteDisabled} errorText={staticErrorText} From 3c70079751de36bf175bb1b105c3011962054065 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Tue, 22 Oct 2024 21:05:09 +0530 Subject: [PATCH 32/34] upcoming: [DI-20928] - Minor PR comments --- .../src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx index 0b90438036e..95c413c4adc 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; -import { CustomPopper } from 'src/components/Autocomplete/Autocomplete.styles'; import { useGetCustomFiltersQuery } from 'src/queries/cloudpulse/customfilters'; import { @@ -15,7 +14,6 @@ import type { QueryFunctionAndKey, } from '../Utils/models'; import type { AclpConfig, FilterValue } from '@linode/api-v4'; -import type { PopperProps } from '@mui/material'; /** * These are the properties requires for CloudPulseCustomSelect Components From adb72de30ca810e88b6ba3affab98ab6bacbfeb2 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Tue, 22 Oct 2024 21:15:18 +0530 Subject: [PATCH 33/34] upcoming: [DI-20928] - Minor PR comments --- .../src/components/Autocomplete/Autocomplete.styles.tsx | 8 ++++++-- .../features/CloudPulse/shared/CloudPulseCustomSelect.tsx | 2 ++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx index 9f31b39af99..5e4c9989e51 100644 --- a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx +++ b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx @@ -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 ( ); diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx index 95c413c4adc..0b90438036e 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; +import { CustomPopper } from 'src/components/Autocomplete/Autocomplete.styles'; import { useGetCustomFiltersQuery } from 'src/queries/cloudpulse/customfilters'; import { @@ -14,6 +15,7 @@ import type { QueryFunctionAndKey, } from '../Utils/models'; import type { AclpConfig, FilterValue } from '@linode/api-v4'; +import type { PopperProps } from '@mui/material'; /** * These are the properties requires for CloudPulseCustomSelect Components From 127dc208be5c0acc408df62730040050911a23b7 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Tue, 22 Oct 2024 21:17:02 +0530 Subject: [PATCH 34/34] upcoming: [DI-20928] - Delete unused imports --- .../src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx index 0b90438036e..95c413c4adc 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; -import { CustomPopper } from 'src/components/Autocomplete/Autocomplete.styles'; import { useGetCustomFiltersQuery } from 'src/queries/cloudpulse/customfilters'; import { @@ -15,7 +14,6 @@ import type { QueryFunctionAndKey, } from '../Utils/models'; import type { AclpConfig, FilterValue } from '@linode/api-v4'; -import type { PopperProps } from '@mui/material'; /** * These are the properties requires for CloudPulseCustomSelect Components