Improve custom-transfer-directory performance with many items

docs/docs/feature-library/custom-transfer-directory.md

@@ -40,6 +40,7 @@ Enable the feature in the flex-config asset for your environment.
 ```javascript
 "custom_transfer_directory": {
   "enabled": true, // globally enable or disable the feature
+  "max_items": 200, // max number of items to show (search field allows accessing the remaining items)
   "worker" : {
     "enabled": true, // enable the custom worker tab
     "show_only_available_workers": false

flex-config/ui_attributes.common.json

@@ -205,6 +205,7 @@
       },
       "custom_transfer_directory": {
         "enabled": true,
+        "max_items": 200,
         "worker": {
           "enabled": true,
           "show_only_available_workers": false

plugin-flex-ts-template-v2/src/feature-library/custom-transfer-directory/config.ts

@@ -4,6 +4,7 @@ import CustomTransferDirectoryConfig from './types/ServiceConfiguration';
 
 const {
   enabled = false,
+  max_items = 200,
   queue: queue_config,
   worker: worker_config,
   external_directory: external_directory_config,
@@ -37,6 +38,10 @@ export const isFeatureEnabled = (): boolean => {
   return enabled;
 };
 
+export const getMaxItems = (): number => {
+  return max_items;
+};
+
 export const isCustomQueueTransferEnabled = (): boolean => {
   return isFeatureEnabled() && queueEnabled;
 };

plugin-flex-ts-template-v2/src/feature-library/custom-transfer-directory/custom-components/DirectoryItem.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
-import { TaskHelper, ITask, templates } from '@twilio/flex-ui';
+import React, { useState } from 'react';
+import { TaskHelper, ITask, styled, templates } from '@twilio/flex-ui';
 import { Box } from '@twilio-paste/core/box';
 import { ButtonGroup } from '@twilio-paste/core/button-group';
 import { Button } from '@twilio-paste/core/button';
-import { Flex } from '@twilio-paste/core/flex';
 import { Tooltip } from '@twilio-paste/core/tooltip';
 import { Text } from '@twilio-paste/core/text';
 import { AgentIcon } from '@twilio-paste/icons/esm/AgentIcon';
@@ -23,8 +22,17 @@ export interface DirectoryItemProps {
   onTransferClick: (options: any) => void;
 }
 
+const DirectoryItemContainer = styled('div')`
+  padding-inline: 0.5rem;
+  min-height: 40px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
 const DirectoryItem = (props: DirectoryItemProps) => {
   const { entry, task, onTransferClick } = props;
+  const [isHovered, setIsHovered] = useState(false);
 
   const onWarmTransferClick = () => {
     onTransferClick({ mode: 'WARM' });
@@ -36,7 +44,7 @@ const DirectoryItem = (props: DirectoryItemProps) => {
 
   const renderIcon = (): React.JSX.Element => {
     if (entry.icon) {
-      return entry.icon;
+      return entry.icon();
     }
 
     switch (entry.type) {
@@ -51,7 +59,9 @@ const DirectoryItem = (props: DirectoryItemProps) => {
 
   const renderLabel = (): React.JSX.Element => (
     <Box key={`directory-item-label-${entry.type}-${entry.key}`} element="TRANSFER_DIR_COMMON_ROW_LABEL">
-      {entry.labelComponent || (
+      {entry.labelComponent ? (
+        entry.labelComponent()
+      ) : (
         <Text as="div" className="Twilio" element="TRANSFER_DIR_COMMON_ROW_NAME">
           {entry.label}
         </Text>
@@ -60,16 +70,15 @@ const DirectoryItem = (props: DirectoryItemProps) => {
   );
 
   return (
-    <Flex
-      element="TRANSFER_DIR_COMMON_HORIZONTAL_ROW_CONTAINER"
-      vertical={false}
-      vAlignContent="center"
+    <DirectoryItemContainer
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       key={`directory-item-container-${entry.type}-${entry.key}`}
     >
       <Box key={`directory-item-icon-${entry.type}-${entry.key}`} element="TRANSFER_DIR_COMMON_ROW_ICON">
         {renderIcon()}
       </Box>
-      {entry.tooltip ? (
+      {isHovered && entry.tooltip ? (
         <Tooltip
           key={`directory-item-label-tooltip-${entry.type}-${entry.key}`}
           element="TRANSFER_DIR_COMMON_TOOLTIP"
@@ -81,75 +90,73 @@ const DirectoryItem = (props: DirectoryItemProps) => {
         renderLabel()
       )}
 
-      <ButtonGroup
-        element="TRANSFER_DIR_COMMON_ROW_BUTTONGROUP"
-        key={`directory-item-buttongroup-${entry.type}-${entry.key}`}
-        attached
-      >
-        {entry.warm_transfer_enabled ? (
-          <Tooltip
-            key={`directory-item-buttons-warm-transfer-tooltip-${entry.type}-${entry.key}`}
-            element="TRANSFER_DIR_COMMON_TOOLTIP"
-            text={templates[StringTemplates.WarmTransfer]()}
-          >
-            <Button
-              element="TRANSFER_DIR_COMMON_ROW_BUTTON"
-              key={`directory-item-warm-transfer-button-${entry.type}-${entry.key}`}
-              variant="secondary_icon"
-              size="circle"
-              onClick={onWarmTransferClick}
+      {isHovered && (
+        <ButtonGroup key={`directory-item-buttongroup-${entry.type}-${entry.key}`} attached>
+          {entry.warm_transfer_enabled ? (
+            <Tooltip
+              key={`directory-item-buttons-warm-transfer-tooltip-${entry.type}-${entry.key}`}
+              element="TRANSFER_DIR_COMMON_TOOLTIP"
+              text={templates[StringTemplates.WarmTransfer]()}
             >
-              {task && TaskHelper.isChatBasedTask(task) ? (
-                <ChatIcon
-                  key={`directory-item-warm-transfer-icon-${entry.type}-${entry.key}`}
-                  decorative={false}
-                  title=""
-                />
-              ) : (
-                <CallTransferIcon
-                  key={`directory-item-warm-transfer-icon-${entry.type}-${entry.key}`}
-                  decorative={false}
-                  title=""
-                />
-              )}
-            </Button>
-          </Tooltip>
-        ) : (
-          <div></div>
-        )}
-        {entry.cold_transfer_enabled ? (
-          <Tooltip
-            key={`directory-item-buttons-cold-transfer-tooltip-${entry.type}-${entry.key}`}
-            element="TRANSFER_DIR_COMMON_TOOLTIP"
-            text={templates[StringTemplates.ColdTransfer]()}
-          >
-            <Button
-              element="TRANSFER_DIR_COMMON_ROW_BUTTON"
-              key={`directory-item-warm-transfer-button-${entry.type}-${entry.key}`}
-              variant="secondary_icon"
-              size="circle"
-              onClick={onColdTransferClick}
+              <Button
+                element="TRANSFER_DIR_COMMON_ROW_BUTTON"
+                key={`directory-item-warm-transfer-button-${entry.type}-${entry.key}`}
+                variant="secondary_icon"
+                size="circle"
+                onClick={onWarmTransferClick}
+              >
+                {task && TaskHelper.isChatBasedTask(task) ? (
+                  <ChatIcon
+                    key={`directory-item-warm-transfer-icon-${entry.type}-${entry.key}`}
+                    decorative={false}
+                    title=""
+                  />
+                ) : (
+                  <CallTransferIcon
+                    key={`directory-item-warm-transfer-icon-${entry.type}-${entry.key}`}
+                    decorative={false}
+                    title=""
+                  />
+                )}
+              </Button>
+            </Tooltip>
+          ) : (
+            <div></div>
+          )}
+          {entry.cold_transfer_enabled ? (
+            <Tooltip
+              key={`directory-item-buttons-cold-transfer-tooltip-${entry.type}-${entry.key}`}
+              element="TRANSFER_DIR_COMMON_TOOLTIP"
+              text={templates[StringTemplates.ColdTransfer]()}
             >
-              {task && TaskHelper.isChatBasedTask(task) ? (
-                <SendIcon
-                  key={`directory-item-cold-transfer-icon-${entry.type}-${entry.key}`}
-                  decorative={false}
-                  title=""
-                />
-              ) : (
-                <CallOutgoingIcon
-                  key={`directory-item-cold-transfer-icon-${entry.type}-${entry.key}`}
-                  decorative={false}
-                  title=""
-                />
-              )}
-            </Button>
-          </Tooltip>
-        ) : (
-          <div></div>
-        )}
-      </ButtonGroup>
-    </Flex>
+              <Button
+                element="TRANSFER_DIR_COMMON_ROW_BUTTON"
+                key={`directory-item-warm-transfer-button-${entry.type}-${entry.key}`}
+                variant="secondary_icon"
+                size="circle"
+                onClick={onColdTransferClick}
+              >
+                {task && TaskHelper.isChatBasedTask(task) ? (
+                  <SendIcon
+                    key={`directory-item-cold-transfer-icon-${entry.type}-${entry.key}`}
+                    decorative={false}
+                    title=""
+                  />
+                ) : (
+                  <CallOutgoingIcon
+                    key={`directory-item-cold-transfer-icon-${entry.type}-${entry.key}`}
+                    decorative={false}
+                    title=""
+                  />
+                )}
+              </Button>
+            </Tooltip>
+          ) : (
+            <div></div>
+          )}
+        </ButtonGroup>
+      )}
+    </DirectoryItemContainer>
   );
 };
 

plugin-flex-ts-template-v2/src/feature-library/custom-transfer-directory/custom-components/DirectoryTab.tsx

@@ -1,14 +1,17 @@
 import { Alert } from '@twilio-paste/core/alert';
+import { Button } from '@twilio-paste/core/button';
 import { Flex } from '@twilio-paste/core/flex';
 import { Spinner } from '@twilio-paste/core/spinner';
-import { withTaskContext, ITask, Actions, Template, templates } from '@twilio/flex-ui';
+import { LoadingIcon } from '@twilio-paste/icons/esm/LoadingIcon';
+import { withTaskContext, ITask, Actions, styled, Template, templates } from '@twilio/flex-ui';
 import { useState, useRef, useEffect } from 'react';
 import debounce from 'lodash/debounce';
 
 import DirectoryItem from './DirectoryItem';
 import SearchBox from './SearchBox';
 import { StringTemplates } from '../flex-hooks/strings/CustomTransferDirectory';
 import { DirectoryEntry } from '../types/DirectoryEntry';
+import { getMaxItems } from '../config';
 
 export interface TransferClickPayload {
   mode: 'WARM' | 'COLD';
@@ -20,8 +23,18 @@ export interface OwnProps {
   isLoading: boolean;
   noEntriesMessage?: string;
   onTransferClick: (entry: DirectoryEntry, transferOptions: TransferClickPayload) => void;
+  onReloadClick?: () => void;
 }
 
+const SearchRow = styled('div')`
+  display: flex;
+  align-items: center;
+  column-gap: 1rem;
+  padding: 1rem;
+  padding-top: 1.25rem;
+  width: 100%;
+`;
+
 const DirectoryTab = (props: OwnProps) => {
   const [filteredDirectory, setFilteredDirectory] = useState([] as Array<DirectoryEntry>);
 
@@ -58,7 +71,14 @@ const DirectoryTab = (props: OwnProps) => {
 
   return (
     <Flex key="external-directory-tab-list" vertical wrap={false} grow={1} shrink={1}>
-      <SearchBox key="key-tab-search-box" onInputChange={onQueueSearchInputChange} inputRef={searchInputRef} />
+      <SearchRow key="search-row">
+        <SearchBox key="key-tab-search-box" onInputChange={onQueueSearchInputChange} inputRef={searchInputRef} />
+        {props.onReloadClick && (
+          <Button variant="secondary" onClick={props.onReloadClick}>
+            <LoadingIcon decorative={false} title={templates[StringTemplates.UpdateList]()} />
+          </Button>
+        )}
+      </SearchRow>
       <Flex key="external-tab-results" vertical element="TRANSFER_DIR_COMMON_ROWS_CONTAINER">
         {props.isLoading && (
           <Flex hAlignContent="center">
@@ -76,7 +96,9 @@ const DirectoryTab = (props: OwnProps) => {
             />
           </Alert>
         ) : (
-          Array.from(filteredDirectory).map((entry: DirectoryEntry) => {
+          !props.isLoading &&
+          Array.from(filteredDirectory).map((entry, index) => {
+            if (index >= getMaxItems()) return null;
             return (
               <DirectoryItem
                 task={props.task}
@@ -87,6 +109,11 @@ const DirectoryTab = (props: OwnProps) => {
             );
           })
         )}
+        {filteredDirectory.length > getMaxItems() && (
+          <Alert variant="neutral">
+            <Template source={templates[StringTemplates.MoreItems]} />
+          </Alert>
+        )}
       </Flex>
     </Flex>
   );

plugin-flex-ts-template-v2/src/feature-library/custom-transfer-directory/custom-components/QueueDirectoryTab.tsx

@@ -136,30 +136,6 @@ const QueueDirectoryTab = (props: OwnProps) => {
     // make sure all queues are loaded
     const insightQueues = await getAllSyncMapItems(queueMap.current);
 
-    // update the queue item
-    queueMap.current.on('itemUpdated', (updatedItem) => {
-      const {
-        item: { key, data },
-      } = updatedItem;
-
-      const queue = transferQueues.current.find((transferQueue) => transferQueue.sid === key);
-      if (queue && data) {
-        mapRealTimeDataToTransferQueueItem(queue, data as IRealTimeQueueData);
-      }
-
-      filterQueues();
-    });
-
-    // if a queue is added trigger a reload
-    queueMap.current.on('itemAdded', () => {
-      fetchSDKTaskQueues();
-    });
-
-    // if a queue is removed trigger a reload
-    queueMap.current.on('itemRemoved', () => {
-      fetchSDKTaskQueues();
-    });
-
     setInsightsQueues(insightQueues);
   };
 
@@ -243,13 +219,22 @@ const QueueDirectoryTab = (props: OwnProps) => {
     });
   };
 
-  // initial render
-  useEffect(() => {
-    // fetch the queues from the taskrouter sdk on initial render
+  const onReloadClick = () => {
+    setIsLoading(true);
+    fetchQueues();
+  };
+
+  const fetchQueues = () => {
+    // fetch the queues from the taskrouter sdk
     fetchSDKTaskQueues().catch(logger.error);
 
-    // fetch the queues from the insights client on initial render
+    // fetch the queues from the insights client
     fetchInsightsQueueData().catch(logger.error);
+  };
+
+  // initial render
+  useEffect(() => {
+    fetchQueues();
 
     return () => {
       if (queueMap.current) {
@@ -274,6 +259,7 @@ const QueueDirectoryTab = (props: OwnProps) => {
       entries={filteredQueues}
       isLoading={isLoading}
       onTransferClick={onTransferQueueClick}
+      onReloadClick={onReloadClick}
       noEntriesMessage={templates[StringTemplates.NoQueuesAvailable]}
     />
   );