Fix queues data tiles breaking on Flex UI 2.7 (#694)

twilio-professional-services · Dec 12, 2024 · c6b6eb9 · c6b6eb9
1 parent e8a6c4c
commit c6b6eb9
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/docs/docs/feature-library/metrics-data-tiles.md b/docs/docs/feature-library/metrics-data-tiles.md
@@ -61,8 +61,8 @@ This feature can be enabled via the `flex-config` attributes. Just set the `metr
 
 * To enable specific data tiles on the Real-time Queues View set the appropriate tile to `true`
 * You can change the Channel colors as needed.
-* The Enhanced Agent Activity tile replaces the native Bar Chart so if you enable it you can disable the Bar Chart by setting `"agents_by_activity_bar_chart": false`
-* The native All Channels tile may be redundant with the other tiles enabled, so you may disable this if you'd like by setting `"all_channels_data_tile": false`
+* The Enhanced Agent Activity tile replaces the native Bar Chart so if you enable it you can disable the Bar Chart on Flex UI 2.8 or later by setting `"agents_by_activity_bar_chart": false`.
+* The native All Channels tile may be redundant with the other tiles enabled, so you may disable this on Flex UI 2.8 or later by setting `"all_channels_data_tile": false`.
 * Configure activities to match the names of the Activities as defined in TaskRouter. The Flex UI includes a [set of icons](https://www.twilio.com/docs/flex/developer/ui/v1/icons#default-icons)
  that are used to enhance the display of the individual activities.
 

diff --git a/...e-v2/src/feature-library/metrics-data-tiles/flex-hooks/components/QueuesViewDataTiles.tsx b/...e-v2/src/feature-library/metrics-data-tiles/flex-hooks/components/QueuesViewDataTiles.tsx
@@ -6,6 +6,7 @@ import ChannelTaskCountTile from '../../custom-components/ChannelTaskCountTile/C
 import ChannelSLATile from '../../custom-components/ChannelSLATile/ChannelSLATile';
 import AllChannelsSLATile from '../../custom-components/AllChannelsSLATile/AllChannelsSLATile';
 import AgentActivityTile from '../../custom-components/AgentActivityTile/AgentActivityTile';
+import { validateUiVersion } from '../../../../utils/configuration';
 import {
   isAllChannelsEnabled,
   isAgentsByActivityEnabled,
@@ -58,7 +59,7 @@ export const componentHook = function addDataTiles(flex: typeof Flex) {
     );
   }
 
-  if (!isAllChannelsEnabled() || !isAgentsByActivityEnabled()) {
+  if ((!isAllChannelsEnabled() || !isAgentsByActivityEnabled()) && validateUiVersion('>= 2.8.0')) {
     flex.QueuesStats.AggregatedQueuesDataTiles.defaultProps.dataTileFilter = (id) => {
       if (id === 'agents-by-activity-chart-tile' && !isAgentsByActivityEnabled()) {
         return false;