fix: [DI-29172] - Dependent API error handling in Edit Alert (#13379)

* fix: [DI-29172] - Dependent API error handling in Edit Alert

* add changeset

* fix assertion

* revert assertion to visibility

* replace queryByText with getByText

Author: santoshp210-akamai

packages/manager/.changeset/pr-13379-fixed-1770618987460.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Error handling for dependent API failures in the ACLP - Edit Alert feature ([#13379](https://github.com/linode/manager/pull/13379))

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

@@ -43,6 +43,10 @@ interface AlertRegionsProps {
    * The service type for which the regions are being selected.
    */
   serviceType: CloudPulseServiceType | null;
+  /**
+   * Callback to set error flag on API failure
+   */
+  setError?: (hasError: boolean) => void;
   /**
    * The selected regions.
    */
@@ -57,12 +61,17 @@ export const AlertRegions = React.memo((props: AlertRegionsProps) => {
     errorText,
     mode,
     scrollElement,
+    setError,
   } = props;
   const [searchText, setSearchText] = React.useState<string>('');
-  const { data: regions, isLoading: isRegionsLoading } = useRegionsQuery();
+  const {
+    data: regions,
+    isLoading: isRegionsLoading,
+    isError: isRegionsError,
+  } = useRegionsQuery();
   const [selectedRegions, setSelectedRegions] = React.useState<string[]>(value);
   const [showSelected, setShowSelected] = React.useState<boolean>(false);
-  const { data: resources, isLoading: isResourcesLoading } = useResourcesQuery(
+  const { data: resources, isLoading: isResourcesLoading, isError } = useResourcesQuery(
     Boolean(serviceType && regions?.length),
     serviceType === null ? undefined : serviceType,
     {},
@@ -71,6 +80,13 @@ export const AlertRegions = React.memo((props: AlertRegionsProps) => {
     getFilterFn(serviceType)
   );
 
+  React.useEffect(() => {
+    const hasError = isError || isRegionsError;
+    if (setError) {
+      setError(hasError);
+    }
+  }, [setError, isError, isRegionsError]);
+
   const titleRef = React.useRef<HTMLDivElement>(null); // Reference to the component title, used for scrolling to the title when the table's page size or page number changes.
 
   const handleSelectionChange = React.useCallback(

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

@@ -79,16 +79,16 @@ describe('AlertResources component tests', () => {
   });
   it('should render circle progress if api calls are in fetching state', () => {
     queryMocks.useResourcesQuery.mockReturnValue({
-      data: linodes,
+      data: undefined,
       isError: false,
       isLoading: true,
     });
-    const { getByTestId, queryByText } = renderWithTheme(
+    const { getByTestId, getByText } = renderWithTheme(
       <AlertResources {...alertResourcesProp} />
     );
     expect(getByTestId('circle-progress')).toBeInTheDocument();
-    expect(queryByText(searchPlaceholder)).not.toBeInTheDocument();
-    expect(queryByText(regionPlaceholder)).not.toBeInTheDocument();
+    expect(getByText(searchPlaceholder)).not.toBeVisible();
+    expect(getByText(regionPlaceholder)).not.toBeVisible();
   });
 
   it('should render error state if api call fails', () => {

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

@@ -104,6 +104,10 @@ export interface AlertResourcesProp {
    * The service type associated with the alerts like DBaaS, Linode etc.,
    */
   serviceType?: CloudPulseServiceType;
+  /**
+   * Callback to set the error on API Failure
+   */
+  setError?: (hasError: boolean) => void;
 }
 
 export const AlertResources = React.memo((props: AlertResourcesProp) => {
@@ -120,6 +124,7 @@ export const AlertResources = React.memo((props: AlertResourcesProp) => {
     maxSelectionCount,
     scrollElement,
     serviceType,
+    setError,
   } = props;
   const [searchText, setSearchText] = React.useState<string>();
   const [filteredRegions, setFilteredRegions] = React.useState<string[]>();
@@ -174,8 +179,8 @@ export const AlertResources = React.memo((props: AlertResourcesProp) => {
     const filteredTypes =
       alertClass === 'shared'
         ? Object.keys(databaseTypeClassMap).filter(
-            (type) => type !== 'dedicated'
-          )
+          (type) => type !== 'dedicated'
+        )
         : [alertClass];
 
     // Apply type filter only for DBaaS user alerts with a valid alertClass based on above filtered types
@@ -209,6 +214,13 @@ export const AlertResources = React.memo((props: AlertResourcesProp) => {
     filterFn
   );
 
+  React.useEffect(() => {
+    const hasError = isResourcesError || isRegionsError;
+    if (setError) {
+      setError(hasError);
+    }
+  }, [setError, isResourcesError, isRegionsError]);
+
   const regionFilteredResources = React.useMemo(() => {
     if (
       (serviceType === 'objectstorage' || serviceType === 'blockstorage') &&
@@ -354,10 +366,6 @@ export const AlertResources = React.memo((props: AlertResourcesProp) => {
     !isDataLoadingError && !isSelectionsNeeded && alertResourceIds.length === 0;
   const showEditInformation = isSelectionsNeeded && alertType === 'system';
 
-  if (isResourcesLoading || isRegionsLoading) {
-    return <CircleProgress />;
-  }
-
   if (isNoResources) {
     return (
       <Stack gap={2}>
@@ -385,7 +393,6 @@ export const AlertResources = React.memo((props: AlertResourcesProp) => {
     serviceToFiltersMap[serviceType ?? ''] ?? serviceToFiltersMap[''];
   const noticeStyles: React.CSSProperties = {
     alignItems: 'center',
-    backgroundColor: theme.tokens.alias.Background.Normal,
     borderRadius: 1,
     display: 'flex',
     flexWrap: 'nowrap',
@@ -396,22 +403,33 @@ export const AlertResources = React.memo((props: AlertResourcesProp) => {
     maxSelectionCount && selectedResources
       ? Math.max(0, maxSelectionCount - selectedResources.length)
       : undefined;
+
+  const isLoading = isRegionsLoading || isResourcesLoading;
   return (
     <Stack gap={2}>
+      {isLoading && <CircleProgress />}
       {!hideLabel && (
-        <Typography ref={titleRef} variant="h2">
+        <Typography
+          display={isLoading ? 'none' : 'block'}
+          ref={titleRef}
+          variant="h2"
+        >
           {alertLabel || 'Entities'}
           {/* It can be either the passed alert label or just Resources */}
         </Typography>
       )}
       {showEditInformation && (
-        <Typography ref={titleRef} variant="body1">
+        <Typography
+          display={isLoading ? 'none' : 'block'}
+          ref={titleRef}
+          variant="body1"
+        >
           You can enable or disable this system alert for each entities you have
           access to. Select the entities listed below you want to enable the
           alert for.
         </Typography>
       )}
-      <GridLegacy container spacing={2}>
+      <GridLegacy container display={isLoading ? 'none' : 'block'} spacing={2}>
         <GridLegacy
           columnSpacing={2}
           container
@@ -450,8 +468,8 @@ export const AlertResources = React.memo((props: AlertResourcesProp) => {
                     new Set(
                       regionFilteredResources
                         ? regionFilteredResources.flatMap(
-                            ({ tags }) => tags ?? []
-                          )
+                          ({ tags }) => tags ?? []
+                        )
                         : []
                     )
                   ),

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

@@ -226,7 +226,7 @@ export const DisplayAlertResources = React.memo(
                           }}
                           title={
                             maxSelectionCount !== undefined &&
-                            isRootCheckBoxDisabled ? (
+                              isRootCheckBoxDisabled ? (
                               <AlertMaxSelectionText
                                 maxSelectionCount={maxSelectionCount}
                               />
@@ -301,7 +301,7 @@ export const DisplayAlertResources = React.memo(
                                 }}
                                 title={
                                   isItemCheckboxDisabled &&
-                                  maxSelectionCount !== undefined ? (
+                                    maxSelectionCount !== undefined ? (
                                     <AlertMaxSelectionText
                                       maxSelectionCount={maxSelectionCount}
                                     />
@@ -339,7 +339,7 @@ export const DisplayAlertResources = React.memo(
                       message="Table data is unavailable. Please try again later."
                     />
                   )}
-                  {paginatedData.length === 0 && (
+                  {!isDataLoadingError && paginatedData.length === 0 && (
                     <TableRow>
                       <TableCell
                         align="center"

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

@@ -34,7 +34,8 @@ interface DimensionFilterFieldProps {
 export const DimensionFilterField = (props: DimensionFilterFieldProps) => {
   const { dataFieldDisabled, dimensionOptions, name, onFilterDelete } = props;
 
-  const { control, resetField } = useFormContext<CreateAlertDefinitionForm>();
+  const { control, resetField, setValue } =
+    useFormContext<CreateAlertDefinitionForm>();
 
   const dataFieldOptions =
     dimensionOptions.map((dimension) => ({
@@ -90,10 +91,17 @@ export const DimensionFilterField = (props: DimensionFilterFieldProps) => {
   const selectedDimension =
     dimensionOptions && dimensionFieldWatcher
       ? (dimensionOptions.find(
-          (dim) => dim.dimension_label === dimensionFieldWatcher
-        ) ?? null)
+        (dim) => dim.dimension_label === dimensionFieldWatcher
+      ) ?? null)
       : null;
 
+  const handleError = React.useCallback(
+    (hasError: boolean) => {
+      setValue('hasAPIError', hasError);
+    },
+    [setValue]
+  );
+
   return (
     <GridLegacy
       container
@@ -175,6 +183,7 @@ export const DimensionFilterField = (props: DimensionFilterFieldProps) => {
               entities={entities}
               entityType={entityType ?? undefined}
               errorText={fieldState.error?.message}
+              handleError={handleError}
               name={name}
               onBlur={field.onBlur}
               onChange={field.onChange}

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/BlockStorageDimensionFilterAutocomplete.test.tsx

@@ -41,6 +41,7 @@ describe('<BlockStorageDimensionFilterAutocomplete />', () => {
     serviceType: 'blockstorage',
     type: 'alerts',
     values: [],
+    handleError: vi.fn(),
   };
 
   beforeEach(() => {

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/BlockStorageDimensionFilterAutocomplete.tsx

@@ -31,10 +31,11 @@ export const BlockStorageDimensionFilterAutocomplete = (
     selectedRegions,
     serviceType,
     type,
+    handleError,
     maxSelections,
   } = props;
 
-  const { data: regions } = useRegionsQuery();
+  const { data: regions, isError: isRegionsError } = useRegionsQuery();
   const { values, isLoading, isError } = useBlockStorageFetchOptions({
     entities,
     dimensionLabel,
@@ -45,12 +46,20 @@ export const BlockStorageDimensionFilterAutocomplete = (
     serviceType,
   });
 
+  React.useEffect(() => {
+    const hasError = isError || isRegionsError;
+    if (handleError) {
+      handleError(hasError);
+    }
+  }, [isError, isRegionsError, handleError]);
+
   useCleanupStaleValues({
     options: values,
     fieldValue,
     multiple,
     onChange: fieldOnChange,
     isLoading,
+    isError,
   });
 
   const maxReached = React.useMemo(() => {

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/DimensionFilterAutocomplete.test.tsx

@@ -31,6 +31,7 @@ describe('<DimensionFilterAutocomplete />', () => {
     selectedRegions: [],
     serviceType: 'nodebalancer',
     values: mockOptions.map((o) => o.value),
+    handleError: vi.fn(),
     type: 'alerts',
   };
 

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/FirewallDimensionFilterAutocomplete.test.tsx

@@ -39,6 +39,7 @@ describe('<FirewallDimensionFilterAutocomplete />', () => {
     serviceType: 'firewall',
     type: 'alerts',
     entityType: 'linode',
+    handleError: vi.fn(),
   };
 
   beforeEach(() => {