diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx index f402ad54f98..238f81c6189 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx @@ -74,8 +74,8 @@ export const CloudPulseDashboardLanding = () => { return ( - - + + ({ + const [filterData, setFilterData] = React.useState({ id: {}, label: {}, }); @@ -58,7 +58,7 @@ export const CloudPulseDashboardWithFilters = React.memo( const onFilterChange = React.useCallback( (filterKey: string, value: FilterValueType, labels: string[]) => { - setFilterValue((prev) => { + setFilterData((prev) => { return { id: { ...prev.id, @@ -112,7 +112,7 @@ export const CloudPulseDashboardWithFilters = React.memo( const isFilterBuilderNeeded = checkIfFilterBuilderNeeded(dashboard); const isMandatoryFiltersSelected = checkMandatoryFiltersSelected({ dashboardObj: dashboard, - filterValue: filterValue.id, + filterValue: filterData.id, resource, timeDuration, }); @@ -170,7 +170,7 @@ export const CloudPulseDashboardWithFilters = React.memo( @@ -38,15 +41,15 @@ export const CloudPulseAppliedFilter = ( {filterValue.map((value, index) => { return ( ({ + backgroundColor: theme.tokens.color.Ultramarine[10], + color: theme.tokens.color.Neutrals.Black, fontSize: '14px', mr: index === filterValue.length - 1 ? 4 : 1, px: 1, py: 0.5, - width: { sm: 'fit-content', xs: '100%' }, - }} + width: { sm: 'fit-content', xs: '98%' }, + })} key={`${label} ${value}`} label={value} /> diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx index 461d224c864..a68af932c17 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx @@ -68,7 +68,7 @@ export interface CloudPulseCustomSelectProps { * The callback function , that will be called on a filter change * @param filterKey - The filterKey of the component * @param value - The selected filter value - * @param labels - Lables of the selected filter value + * @param labels - Labels of the selected filter value */ handleSelectionChange: ( filterKey: string, diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index a59caa17471..4176c81277a 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -229,8 +229,10 @@ export const CloudPulseDashboardFilterBuilder = React.memo( ); const toggleShowFilter = () => { - setShowFilter((showFilterPrev) => !showFilterPrev); - handleToggleAppliedFilter(showFilter); + setShowFilter((showFilterPrev) => { + handleToggleAppliedFilter(showFilterPrev); + return !showFilterPrev; + }); }; const RenderFilters = React.useCallback(() => { @@ -328,6 +330,7 @@ export const CloudPulseDashboardFilterBuilder = React.memo( item maxHeight={theme.spacing(23)} overflow={'auto'} + pr={{ sm: 0, xs: 2 }} rowGap={theme.spacing(2)} xs={12} >