Upcoming:[DI-23319] - CloudPulse Alerting minor UX improvements

packages/manager/.changeset/pr-11748-upcoming-features-1740653230064.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+CloudPulse alerting UX improvements in `create flow` and `resources section` ([#11748](https://github.com/linode/manager/pull/11748))

packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx

@@ -4,6 +4,7 @@ import { useHistory, useRouteMatch } from 'react-router-dom';
 
 import AlertsIcon from 'src/assets/icons/entityIcons/alerts.svg';
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
+import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import { useAllAlertDefinitionsQuery } from 'src/queries/cloudpulse/alerts';
 import { useCloudPulseServiceTypes } from 'src/queries/cloudpulse/services';
 
@@ -12,7 +13,6 @@ import { AlertsListTable } from './AlertListTable';
 
 import type { Item } from '../constants';
 import type { Alert, AlertServiceType, AlertStatusType } from '@linode/api-v4';
-import { Placeholder } from 'src/components/Placeholder/Placeholder';
 
 const searchAndSelectSx = {
   md: '300px',
@@ -143,6 +143,7 @@ export const AlertListing = () => {
         alignItems={{ lg: 'flex-end', md: 'flex-start' }}
         display="flex"
         flexDirection={{ lg: 'row', md: 'column', sm: 'column', xs: 'column' }}
+        flexWrap="wrap"
         gap={3}
         justifyContent="space-between"
       >

packages/manager/src/features/CloudPulse/Alerts/AlertsResources/AlertsResources.tsx

@@ -2,7 +2,7 @@ import { Checkbox, CircleProgress, Stack, Typography } from '@linode/ui';
 import { Grid } from '@mui/material';
 import React from 'react';
 
-import EntityIcon from 'src/assets/icons/entityIcons/alerts.svg';
+import EntityIcon from 'src/assets/icons/entityIcons/alertsresources.svg';
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
 import { useFlags } from 'src/hooks/useFlags';
 import { useResourcesQuery } from 'src/queries/cloudpulse/resources';
@@ -310,8 +310,13 @@ export const AlertResources = React.memo((props: AlertResourcesProp) => {
         )}
         <StyledPlaceholder
           icon={EntityIcon}
-          subtitle="You can assign alerts during the resource creation process."
-          title="No resources are currently assigned to this alert definition."
+          subtitle="Once you assign the resources, they will show up here."
+          title="No resources associated with this alert definition."
+          sx={{
+            h2: {
+              fontSize: '16px',
+            },
+          }}
         />
       </Stack>
     );
@@ -334,7 +339,7 @@ export const AlertResources = React.memo((props: AlertResourcesProp) => {
           alert for.
         </Typography>
       )}
-      <Grid container spacing={3}>
+      <Grid container spacing={2}>
         <Grid
           columnSpacing={2}
           container

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.tsx

@@ -62,7 +62,7 @@ export const DimensionFilters = (props: DimensionFilterProps) => {
         compactX
         data-qa-buttons="true"
         size="small"
-        sx={{ justifyContent: 'start' }}
+        sx={{ justifyContent: 'start', width: '150px' }}
       >
         Add dimension filter
       </Button>

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/TriggerConditions.tsx

@@ -58,11 +58,11 @@ export const TriggerConditions = (props: TriggerConditionProps) => {
     >
       <Typography variant="h3"> Trigger Conditions</Typography>
       <Grid
-        container
-        spacing={2}
         sx={{
           alignItems: 'flex-start',
         }}
+        container
+        spacing={2}
       >
         <Grid item md={3} sm={6} xs={12}>
           <Controller
@@ -135,42 +135,44 @@ export const TriggerConditions = (props: TriggerConditionProps) => {
           />
         </Grid>
         <Grid
-          item
-          md="auto"
-          sm={12}
-          xs={12}
           sx={{
             alignItems: 'center',
             display: 'flex',
             gap: 1,
             mt: { lg: 3.5, xs: 0 },
           }}
+          item
+          md="auto"
+          sm={12}
+          xs={12}
         >
           <Typography mt={3} variant="body1">
             Trigger alert when all criteria are met for
           </Typography>
 
           <Controller
             render={({ field, fieldState }) => (
-              <TextField
-                onWheel={(event) =>
-                  event.target instanceof HTMLElement && event.target.blur()
-                }
-                sx={{
-                  height: '30px',
-                  width: '30px',
-                }}
-                data-qa-trigger-occurrences
-                data-testid="trigger-occurences"
-                errorText={fieldState.error?.message}
-                label=""
-                min={0}
-                name={`${name}.trigger_occurrences`}
-                onBlur={field.onBlur}
-                onChange={(e) => field.onChange(e.target.value)}
-                type="number"
-                value={field.value ?? 0}
-              />
+              <Box sx={{ maxHeight: '54px' }}>
+                <TextField
+                  onWheel={(event) =>
+                    event.target instanceof HTMLElement && event.target.blur()
+                  }
+                  sx={{
+                    height: '30px',
+                    width: '30px',
+                  }}
+                  data-qa-trigger-occurrences
+                  data-testid="trigger-occurences"
+                  errorText={fieldState.error?.message}
+                  label=""
+                  min={0}
+                  name={`${name}.trigger_occurrences`}
+                  onBlur={field.onBlur}
+                  onChange={(e) => field.onChange(e.target.value)}
+                  type="number"
+                  value={field.value ?? 0}
+                />
+              </Box>
             )}
             control={control}
             name={`${name}.trigger_occurrences`}

packages/manager/src/features/CloudPulse/Alerts/EditAlert/EditAlertResources.tsx

@@ -23,7 +23,7 @@ export const EditAlertResources = (props: EditAlertProps) => {
 
   const { alertDetails, serviceType } = props;
   const alertId = alertDetails.id;
-  const { mutateAsync: editAlert } = useEditAlertDefinition();
+  const { isPending, mutateAsync: editAlert } = useEditAlertDefinition();
   const [selectedResources, setSelectedResources] = React.useState<string[]>(
     []
   );
@@ -55,18 +55,19 @@ export const EditAlertResources = (props: EditAlertProps) => {
   }, [serviceType, alertId]);
 
   const saveResources = () => {
-    setShowConfirmation(false);
     editAlert({
       alertId,
       entity_ids: selectedResources,
       serviceType,
     })
       .then(() => {
+        setShowConfirmation(false);
         // on success land on the alert definition list page and show a success snackbar
         history.push(definitionLanding);
         showSnackbar('Alert resources successfully updated.', 'success');
       })
       .catch(() => {
+        setShowConfirmation(false);
         showSnackbar(
           'Error while updating the resources. Try again later.',
           'error'
@@ -136,6 +137,7 @@ export const EditAlertResources = (props: EditAlertProps) => {
           </Button>
         </Box>
         <EditAlertResourcesConfirmDialog
+          isApiResponsePending={isPending}
           onClose={() => setShowConfirmation((prev) => !prev)}
           onConfirm={saveResources}
           openConfirmationDialog={showConfirmation}
@@ -149,12 +151,9 @@ const showSnackbar = (message: string, variant: 'error' | 'success') => {
   enqueueSnackbar(message, {
     anchorOrigin: {
       horizontal: 'right',
-      vertical: 'top', // Show snackbar at the top
+      vertical: 'bottom', // Show snackbar at the bottom
     },
     autoHideDuration: 2000,
-    style: {
-      marginTop: '150px',
-    },
     variant,
   });
 };

packages/manager/src/features/CloudPulse/Alerts/EditAlert/EditAlertResourcesConfirmationDialog.tsx

@@ -7,6 +7,11 @@ import { ConfirmationDialog } from 'src/components/ConfirmationDialog/Confirmati
 import type { ActionPanelProps } from 'src/components/ActionsPanel/ActionsPanel';
 
 interface AlertResourcesConfirmDialogProps {
+  /**
+   * Boolean flag to control the loading state of the confirm button based on api call pending for result state
+   */
+  isApiResponsePending: boolean;
+
   /**
    * Callback function to handle closing the confirmation dialog.
    */
@@ -25,15 +30,22 @@ interface AlertResourcesConfirmDialogProps {
 
 export const EditAlertResourcesConfirmDialog = React.memo(
   (props: AlertResourcesConfirmDialogProps) => {
-    const { onClose, onConfirm, openConfirmationDialog } = props;
+    const {
+      isApiResponsePending,
+      onClose,
+      onConfirm,
+      openConfirmationDialog,
+    } = props;
 
     const actionProps: ActionPanelProps = {
       primaryButtonProps: {
         'data-testid': 'edit-confirmation',
         label: 'Confirm',
+        loading: isApiResponsePending,
         onClick: onConfirm,
       },
       secondaryButtonProps: {
+        disabled: isApiResponsePending,
         label: 'Cancel',
         onClick: onClose,
       },