From 2fe9bc66c9f373ab57360457af2293b522bb1cac Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Fri, 7 Mar 2025 15:35:56 +0530 Subject: [PATCH 1/6] upcoming: [DI-23773] - Added the tooltip icon in disabled state to the add buttons for metric, dimension filter, notification channel limits --- .../Alerts/CreateAlert/Criteria/DimensionFilter.tsx | 4 +--- .../CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx | 1 - .../CreateAlert/NotificationChannels/AddChannelListing.tsx | 1 - 3 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.tsx index 0992d13374b..1bff87ecbe2 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.tsx @@ -33,7 +33,6 @@ export const DimensionFilters = (props: DimensionFilterProps) => { }); const dimensionFilterWatcher = useWatch({ control, name }); - return ( @@ -66,8 +65,7 @@ export const DimensionFilters = (props: DimensionFilterProps) => { data-qa-buttons="true" disabled={dimensionFilterWatcher && dimensionFilterWatcher.length === 5} size="small" - sx={{ justifyContent: 'start', width: '150px' }} - sxEndIcon={{ display: 'none' }} + sx={{ justifyContent: 'start', width: '160px' }} tooltipText="You can add up to 5 dimension filters." > Add dimension filter diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx index 20b5ae9bdcb..97573f66783 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx @@ -106,7 +106,6 @@ export const MetricCriteriaField = (props: MetricCriteriaProps) => { disabled={metricCriteriaWatcher.length === 5} size="medium" sx={(theme) => ({ marginTop: theme.spacing(2) })} - sxEndIcon={{ display: 'none' }} tooltipText="You can add up to 5 metrics." > Add metric diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/NotificationChannels/AddChannelListing.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/NotificationChannels/AddChannelListing.tsx index 7112c065ff6..aba3b85dfa5 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/NotificationChannels/AddChannelListing.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/NotificationChannels/AddChannelListing.tsx @@ -166,7 +166,6 @@ export const AddChannelListing = (props: AddChannelListingProps) => { onClick={handleOpenDrawer} size="medium" sx={(theme) => ({ marginTop: theme.spacing(2) })} - sxEndIcon={{ display: 'none' }} tooltipText="You can add up to 5 notification channels." type="button" > From 2febab32dbced2bc8efcdd927a202f5de3fe38fc Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Fri, 7 Mar 2025 19:07:36 +0530 Subject: [PATCH 2/6] upcoming: [DI-23773] - Addressed Review comments --- .../CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.tsx | 1 - .../CreateAlert/NotificationChannels/AddChannelListing.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.tsx index 1bff87ecbe2..75a0343caf6 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.tsx @@ -60,7 +60,6 @@ export const DimensionFilters = (props: DimensionFilterProps) => { value: null, }) } - buttonType="secondary" compactX data-qa-buttons="true" disabled={dimensionFilterWatcher && dimensionFilterWatcher.length === 5} diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/NotificationChannels/AddChannelListing.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/NotificationChannels/AddChannelListing.tsx index aba3b85dfa5..16569bd8243 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/NotificationChannels/AddChannelListing.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/NotificationChannels/AddChannelListing.tsx @@ -167,7 +167,6 @@ export const AddChannelListing = (props: AddChannelListingProps) => { size="medium" sx={(theme) => ({ marginTop: theme.spacing(2) })} tooltipText="You can add up to 5 notification channels." - type="button" > Add notification channel From fbed61e3a189db93bff6ad4d4bbcf156a81eb883 Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Tue, 11 Mar 2025 10:44:19 +0530 Subject: [PATCH 3/6] upcoming: [DI-23773] - Review comments --- .../CreateAlert/Criteria/MetricCriteria.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx index 97573f66783..b502d7ef34b 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx @@ -1,4 +1,5 @@ import { Box, Button, Stack, Typography } from '@linode/ui'; +import Grid2 from '@mui/material/Grid2/Grid2'; import * as React from 'react'; import { useFieldArray, useFormContext, useWatch } from 'react-hook-form'; @@ -66,7 +67,13 @@ export const MetricCriteriaField = (props: MetricCriteriaProps) => { }); return ( - ({ marginTop: theme.spacing(3) })}> + ({ marginTop: theme.spacing(3) })} + > { > 3. Criteria - ({ marginTop: theme.spacing(3) })}> + {fields !== null && fields.length !== 0 && fields.map((field, index) => { @@ -102,14 +109,16 @@ export const MetricCriteriaField = (props: MetricCriteriaProps) => { threshold: 0, }) } + sx={{ + width: '130px', // added a nice width for the button + }} buttonType="outlined" disabled={metricCriteriaWatcher.length === 5} size="medium" - sx={(theme) => ({ marginTop: theme.spacing(2) })} tooltipText="You can add up to 5 metrics." > Add metric - + ); }; From cc576f611a6607b9ffbb51fa6b04cc06cb617f31 Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Tue, 11 Mar 2025 23:02:54 +0530 Subject: [PATCH 4/6] Added changeset: Removed `sxEndIcon` prop from Add Metric, Dimension Filter and Notification Channel buttons. --- .../.changeset/pr-11825-upcoming-features-1741714373810.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-11825-upcoming-features-1741714373810.md diff --git a/packages/manager/.changeset/pr-11825-upcoming-features-1741714373810.md b/packages/manager/.changeset/pr-11825-upcoming-features-1741714373810.md new file mode 100644 index 00000000000..debf42e091d --- /dev/null +++ b/packages/manager/.changeset/pr-11825-upcoming-features-1741714373810.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Removed `sxEndIcon` prop from Add Metric, Dimension Filter and Notification Channel buttons. ([#11825](https://github.com/linode/manager/pull/11825)) From c96ff4f413cf566987409a51af0e42e2ee836ce8 Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Wed, 12 Mar 2025 16:06:23 +0530 Subject: [PATCH 5/6] upcoming: [DI-23773] - Review changes: removed unused Box and replaced Grid with Stack in MetricCriteria.tsx --- .../CreateAlert/Criteria/MetricCriteria.tsx | 22 ++++--------------- 1 file changed, 4 insertions(+), 18 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx index b502d7ef34b..b0caea8a1eb 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx @@ -1,5 +1,4 @@ -import { Box, Button, Stack, Typography } from '@linode/ui'; -import Grid2 from '@mui/material/Grid2/Grid2'; +import { Button, Stack, Typography } from '@linode/ui'; import * as React from 'react'; import { useFieldArray, useFormContext, useWatch } from 'react-hook-form'; @@ -67,21 +66,8 @@ export const MetricCriteriaField = (props: MetricCriteriaProps) => { }); return ( - ({ marginTop: theme.spacing(3) })} - > - - 3. Criteria - + ({ marginTop: theme.spacing(3) })}> + 3. Criteria {fields !== null && fields.length !== 0 && @@ -119,6 +105,6 @@ export const MetricCriteriaField = (props: MetricCriteriaProps) => { > Add metric - + ); }; From bae57881605aaa5a7f87404e6482e24740251d8f Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Thu, 13 Mar 2025 15:36:44 +0530 Subject: [PATCH 6/6] upcoming: [DI-23773] - Replaced sx and used mt for marginTop in Stack component --- .../CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx index b0caea8a1eb..db0e92292ed 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx @@ -66,7 +66,7 @@ export const MetricCriteriaField = (props: MetricCriteriaProps) => { }); return ( - ({ marginTop: theme.spacing(3) })}> + 3. Criteria {fields !== null &&