[BUG] Issues in the UI above 200 destinations paging issue #195

public/pages/CreateTrigger/components/Action/Action.js

@@ -78,7 +78,7 @@ const Action = ({
                   // Just a swap correct fields.
                   arrayHelpers.replace(index, {
                     ...action,
-                    destination_id: options[0].value,
+                    destination_id: options[0]?.value,
                   });
                 },
                 onBlur: (e, field, form) => {
@@ -96,7 +96,6 @@ const Action = ({
                   </React.Fragment>
                 ),
                 rowHeight: 45,
-                async: true,
                 isLoading: loadingDestinations,
               }}
             />

public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js

@@ -17,6 +17,7 @@ import {
 import { getAllowList } from '../../../Destinations/utils/helpers';
 import {
   MAX_QUERY_RESULT_SIZE,
+  MAX_CHANNELS_RESULT_SIZE,
   MONITOR_TYPE,
   OS_NOTIFICATION_PLUGIN,
 } from '../../../../utils/constants';
@@ -84,10 +85,54 @@ class ConfigureActions extends React.Component {
     }
   }
 
+  /**
+   * Returns all channels in consecutive requests until all channels are returned
+   * @returns {Promise<*[]>}
+   */
+  getChannels = async () => {
+    const { plugins } = this.props;
+    const hasNotificationPlugin = plugins.indexOf(OS_NOTIFICATION_PLUGIN) !== -1;
+
+    let channels = [];
+    let index = 0;
+    const getChannels = async () => {
+      const getChannelsQuery = {
+        from_index: index,
+        max_items: MAX_CHANNELS_RESULT_SIZE,
+        config_type: CHANNEL_TYPES,
+        sort_field: 'name',
+        sort_order: 'asc',
+      };
+
+      const channelsResponse = await this.props.notificationService.getChannels(getChannelsQuery);
+
+      // TODO: Might still need to filter the allowed channel types here if the backend doesn't
+      //   since Notifications uses its own setting
+      channels = channels.concat(
+        channelsResponse.items.map((channel) => ({
+          label: `[Channel] ${channel.name}`,
+          value: channel.config_id,
+          type: channel.config_type,
+          description: channel.description,
+        }))
+      );
+
+      if (channelsResponse.total && channels.length < channelsResponse.total) {
+        index += MAX_CHANNELS_RESULT_SIZE;
+        await getChannels();
+      }
+    };
+
+    if (hasNotificationPlugin) {
+      await getChannels();
+    }
+
+    return channels;
+  };
+
   loadDestinations = async (searchText = '') => {
-    const { httpClient, values, arrayHelpers, notifications, fieldPath, plugins } = this.props;
+    const { httpClient, values, arrayHelpers, notifications, fieldPath } = this.props;
     const { allowList, actionDeleted } = this.state;
-    const hasNotificationPlugin = plugins.indexOf(OS_NOTIFICATION_PLUGIN) !== -1;
 
     this.setState({ loadingDestinations: true });
     try {
@@ -109,27 +154,7 @@ class ConfigureActions extends React.Component {
         backendErrorNotification(notifications, 'load', 'destinations', response.err);
       }
 
-      let channels = [];
-      if (hasNotificationPlugin) {
-        // Fetch Notification Channels
-        const getChannelsQuery = {
-          from_index: 0,
-          max_items: MAX_QUERY_RESULT_SIZE,
-          query: searchText,
-          config_type: CHANNEL_TYPES,
-          sort_field: 'name',
-          sort_order: 'asc',
-        };
-        const channelsResponse = await this.props.notificationService.getChannels(getChannelsQuery);
-        // TODO: Might still need to filter the allowed channel types here if the backend doesn't
-        //   since Notifications uses its own setting
-        channels = channelsResponse.items.map((channel) => ({
-          label: `[Channel] ${channel.name}`,
-          value: channel.config_id,
-          type: channel.config_type,
-          description: channel.description,
-        }));
-      }
+      let channels = await this.getChannels();
 
       const destinationsAndChannels = destinations.concat(channels);
       const channelOptionsByType = getChannelOptions(destinationsAndChannels, CHANNEL_TYPES);

public/pages/Destinations/containers/DestinationsList/DestinationsList.js

@@ -15,7 +15,7 @@ import {
   DestinationsControls,
   DeleteConfirmation,
 } from '../../components/DestinationsList';
-import { staticColumns, MAX_DESTINATIONS } from './utils/constants';
+import { staticColumns } from './utils/constants';
 import { getURLQueryParams } from './utils/helpers';
 import { isDeleteAllowedQuery } from './utils/deleteHelpers';
 import { INDEX } from '../../../../../utils/constants';
@@ -292,7 +292,7 @@ class DestinationsList extends React.Component {
     const pagination = {
       pageIndex: page,
       pageSize: size,
-      totalItemCount: Math.min(MAX_DESTINATIONS, totalDestinations),
+      totalItemCount: totalDestinations,
       pageSizeOptions: [5, 10, 20, 50],
     };
     const sorting = {

public/utils/constants.js

@@ -63,6 +63,7 @@ export const MONITOR_INPUT_DETECTOR_ID = `inputs.${INPUTS_DETECTOR_ID}`;
 export const AD_PREVIEW_DAYS = 7;
 
 export const MAX_QUERY_RESULT_SIZE = 200;
+export const MAX_CHANNELS_RESULT_SIZE = 5000;
 
 export const MONITOR_GROUP_BY = 'ui_metadata.search.groupBy';