upcoming: [DI-21119] - Handle jwe token limit in ACLP UI and Bug fix for resources component

packages/manager/.changeset/pr-11309-upcoming-features-1732282296647.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Handled JWE token limit of 250 in ACLP UI ([#11309](https://github.com/linode/manager/pull/11309))

packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx

@@ -67,7 +67,7 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
 
   const getJweTokenPayload = (): JWETokenPayLoad => {
     return {
-      resource_ids: resourceList?.map((resource) => Number(resource.id)) ?? [],
+      resource_ids: resources?.map((resource) => Number(resource)) ?? [],
     };
   };
 
@@ -100,11 +100,11 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
   const {
     data: jweToken,
     isError: isJweTokenError,
-    isLoading: isJweTokenLoading,
+    isFetching: isJweTokenFetching,
   } = useCloudPulseJWEtokenQuery(
     dashboard?.service_type,
     getJweTokenPayload(),
-    Boolean(resourceList)
+    Boolean(resources) && !isDashboardLoading && !isDashboardApiError
   );
 
   if (isDashboardApiError) {
@@ -123,12 +123,7 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
     return renderErrorState('Error loading the definitions of metrics.');
   }
 
-  if (
-    isMetricDefinitionLoading ||
-    isDashboardLoading ||
-    isResourcesLoading ||
-    isJweTokenLoading
-  ) {
+  if (isMetricDefinitionLoading || isDashboardLoading || isResourcesLoading) {
     return <CircleProgress />;
   }
 
@@ -137,6 +132,7 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
       additionalFilters={additionalFilters}
       dashboard={dashboard}
       duration={duration}
+      isJweTokenFetching={isJweTokenFetching}
       jweToken={jweToken}
       manualRefreshTimeStamp={manualRefreshTimeStamp}
       metricDefinitions={metricDefinitions}

packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx

@@ -51,7 +51,7 @@ export interface CloudPulseWidgetProperties {
   /**
    * token to fetch metrics data
    */
-  authToken: string;
+  authToken?: string;
 
   /**
    * metrics defined of this widget
@@ -68,6 +68,11 @@ export interface CloudPulseWidgetProperties {
    */
   errorLabel?: string;
 
+  /**
+   * Jwe token fetching status check
+   */
+  isJweTokenFetching: boolean;
+
   /**
    * resources ids selected by user to show metrics for
    */
@@ -136,6 +141,7 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
     authToken,
     availableMetrics,
     duration,
+    isJweTokenFetching,
     resourceIds,
     resources,
     savePref,
@@ -232,7 +238,7 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
     },
     {
       authToken,
-      isFlags: Boolean(flags),
+      isFlags: Boolean(flags && !isJweTokenFetching),
       label: widget.label,
       timeStamp,
       url: flags.aclpReadEndpoint!,
@@ -326,13 +332,17 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
                 ? metricsApiCallError ?? 'Error while rendering graph'
                 : undefined
             }
+            loading={
+              isLoading ||
+              metricsApiCallError === jweTokenExpiryError ||
+              isJweTokenFetching
+            } // keep loading until we are trying to fetch the refresh token
             areas={areas}
             ariaLabel={ariaLabel ? ariaLabel : ''}
             data={data}
             dotRadius={1.5}
             height={424}
             legendRows={legendRows}
-            loading={isLoading || metricsApiCallError === jweTokenExpiryError} // keep loading until we fetch the refresh token
             showDot
             showLegend={data.length !== 0}
             timezone={timezone}

packages/manager/src/features/CloudPulse/Widget/CloudPulseWidgetRenderer.tsx

@@ -30,6 +30,7 @@ interface WidgetProps {
   additionalFilters?: CloudPulseMetricsAdditionalFilters[];
   dashboard?: Dashboard | undefined;
   duration: TimeDuration;
+  isJweTokenFetching: boolean;
   jweToken?: JWEToken | undefined;
   manualRefreshTimeStamp?: number;
   metricDefinitions: MetricDefinitions | undefined;
@@ -55,6 +56,7 @@ export const RenderWidgets = React.memo(
       additionalFilters,
       dashboard,
       duration,
+      isJweTokenFetching,
       jweToken,
       manualRefreshTimeStamp,
       metricDefinitions,
@@ -74,6 +76,7 @@ export const RenderWidgets = React.memo(
         availableMetrics: undefined,
         duration,
         errorLabel: 'Error occurred while loading data.',
+        isJweTokenFetching: false,
         resourceIds: resources,
         resources: [],
         serviceType: dashboard?.service_type ?? '',
@@ -123,7 +126,7 @@ export const RenderWidgets = React.memo(
     if (
       !dashboard.service_type ||
       !Boolean(resources.length > 0) ||
-      !jweToken?.token ||
+      (!isJweTokenFetching && !jweToken?.token) ||
       !Boolean(resourceList?.length)
     ) {
       return renderPlaceHolder(
@@ -162,6 +165,7 @@ export const RenderWidgets = React.memo(
                 {...cloudPulseWidgetProperties}
                 authToken={jweToken?.token}
                 availableMetrics={availMetrics}
+                isJweTokenFetching={isJweTokenFetching}
                 resources={resourceList!}
                 savePref={savePref}
               />

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(22)}
+          maxHeight={theme.spacing(23)}
           overflow={'auto'}
           rowGap={theme.spacing(2)}
           xs={12}

packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx

@@ -254,7 +254,7 @@ describe('CloudPulseResourcesSelect component tests', () => {
     expect(screen.getByText('Failed to fetch Resources.')).toBeInTheDocument();
   });
 
-  it('should be able to select limited resources', async () => {
+  it('should be able to select limited resources and select/deselect all will not be available if resource are more than max resource selection limit', async () => {
     const user = userEvent.setup();
 
     queryMocks.useResourcesQuery.mockReturnValue({
@@ -298,4 +298,36 @@ describe('CloudPulseResourcesSelect component tests', () => {
 
     expect(queryByRole('option', { name: SELECT_ALL })).not.toBeInTheDocument();
   });
+
+  it('should be able to select all and deselect all the resources when number of resources are equal to resource limit', async () => {
+    const user = userEvent.setup();
+
+    queryMocks.useResourcesQuery.mockReturnValue({
+      data: linodeFactory.buildList(10),
+      isError: false,
+      isLoading: false,
+      status: 'success',
+    });
+
+    renderWithTheme(
+      <CloudPulseResourcesSelect
+        handleResourcesSelection={mockResourceHandler}
+        label="Resources"
+        region={'us-east'}
+        resourceType={'linode'}
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Open' }));
+    await user.click(screen.getByRole('option', { name: SELECT_ALL }));
+    await user.click(screen.getByRole('option', { name: 'Deselect All' }));
+
+    expect(screen.getByLabelText('Resources')).toBeInTheDocument();
+
+    for (let i = 26; i <= 35; i++) {
+      expect(
+        screen.getByRole('option', { name: `linode-${i}` })
+      ).toHaveAttribute(ARIA_SELECTED, 'false');
+    }
+  });
 });

packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx

@@ -1,8 +1,11 @@
-import { Box, ListItem } from '@mui/material';
+import { Box } from '@mui/material';
 import React from 'react';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
-import { SelectedIcon } from 'src/components/Autocomplete/Autocomplete.styles';
+import {
+  SelectedIcon,
+  StyledListItem,
+} from 'src/components/Autocomplete/Autocomplete.styles';
 import { useFlags } from 'src/hooks/useFlags';
 import { useResourcesQuery } from 'src/queries/cloudpulse/resources';
 import { themes } from 'src/utilities/theme';
@@ -146,10 +149,20 @@ export const CloudPulseResourcesSelect = React.memo(
           const isResourceSelected = selectedResources?.some(
             (item) => item.label === option.label
           );
+
+          const isSelectAllORDeslectAllOption =
+            option.label === 'Select All ' || option.label === 'Deselect All ';
+
           const isMaxSelectionsReached =
             selectedResources &&
             selectedResources.length >= maxResourceSelectionLimit &&
-            !isResourceSelected;
+            !isResourceSelected &&
+            !isSelectAllORDeslectAllOption;
+
+          const ListItem = isSelectAllORDeslectAllOption
+            ? StyledListItem
+            : 'li';
+
           return (
             <ListItem
               {...rest}

packages/manager/src/queries/cloudpulse/metrics.ts

@@ -18,7 +18,7 @@ export const useCloudPulseMetricsQuery = (
   serviceType: string,
   request: CloudPulseMetricsRequest,
   obj: {
-    authToken: string;
+    authToken?: string;
     isFlags: boolean;
     label: string;
     timeStamp: number | undefined;
@@ -29,7 +29,7 @@ export const useCloudPulseMetricsQuery = (
 
   const query = useQuery<CloudPulseMetricsResponse, APIError[]>({
     ...queryFactory.metrics(
-      obj.authToken,
+      obj.authToken ?? '',
       obj.url,
       serviceType,
       request,

packages/manager/src/queries/cloudpulse/queries.ts

@@ -84,6 +84,6 @@ export const queryFactory = createQueryKeys(key, {
 
   token: (serviceType: string | undefined, request: JWETokenPayLoad) => ({
     queryFn: () => getJWEToken(request, serviceType!),
-    queryKey: [serviceType],
+    queryKey: [serviceType, { resource_ids: request.resource_ids.sort() }],
   }),
 });