Flex UI v2.x - Custom TeamsView Filters Fix

This is a fork of the official Twilio repo to workaround a bug on custom filters present on UI v2.3.2

Disclaimer and Notice

⚠️ A bug is present on Flex UI v2.3.2 in filter definitions where options should have the same value both on label and value or else they won't work (even when the actual query is formed with the value property). Keep this in mind when looking through the code to know why it's programmed that way, it's on purpose. I've left comments in-code for every weird thing done to make this work explaining exactly why.

Keep an eye on the Flex UI update notes to know when this is fixed, this has already been reported.

Flex Plugins

Twilio Flex Plugins allow you to customize the appearance and behavior of Twilio Flex. If you want to learn more about the capabilities and how to use the API, check out our Flex documentation.

Overview

The Twilio Flex Team View allows for real-time monitoring of Flex agents and supports filtering those agents based on Twilio TaskRouter worker attributes. This plugin allows the usage of checkboxes with different label names while internally using a workaround to make multiValue filters like the one seen in the official docs work.

If you wish to see examples of implementing other types of filters, use the one set here as an example to modify yours and adapt accordingly.

Requirements

Team View Filters

To use this plugin, you should enable the Team View Filters feature on your Flex instance, and you can do that on the pre-release features page. On the Feature Settings page, go to the Pilot tab, and enable the Advanced Teams Views Filters.

Setup

Make sure you have Node.js as well as npm installed.

Afterwards, install the dependencies by running npm install:

$ cd plugin-team-view-filters
$ npm i

# In case you get dependency errors when installing `@twilio-paste/core` and `@twilio-paste/icons`
$ npm i --legacy-peer-deps

Development

In order to develop locally, you can use the Twilio CLI to deploy a local Flex UI server:

$ twilio flex plugins start -l debug

This will automatically start up Flex UI and open the browser for you. Your app will run on http://localhost:3000. If you want to change that you can do this by setting the PORT environment variable:

When you make changes to your code, the browser window will be automatically refreshed.

Deploy

When you are ready to deploy your plugin, in your terminal run:

twilio flex:plugins:deploy --major --changelog "Notes for this version"

If the deployment succeeds, you will get a success message like the example below. Make sure to run the "Next Steps" section to enable the newly published version of your plugin:

Using profile acme-inc (ACXXXXXXXXXXXXXXXXXXXXXXXXXXXX)

✔ Validating deployment of plugin plugin-team-view-filters
✔ Compiling a production build of plugin-team-view-filters
   ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
   │                                                                                                                                   │
   │   ⚠ Plugins API is currently offered as a Pilot; it is very likely to change before the product reaches general availability. ⚠   │
   │                                                                                                                                   │
   └───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘

✔ Uploading plugin-team-view-filters
✔ Registering plugin plugin-team-view-filters with Plugins API
✔ Registering version v1.0.0 with Plugins API

🚀 Plugin (private) plugin-team-view-filters@1.0.0 was successfully deployed using Plugins API

Next Steps:
Run $ twilio flex:plugins:release --plugin plugin-team-view-filters@1.0.0 --name "Autogenerated Release 1627069953647" --description "The description of this Flex Plugin Configuration." to enable this plugin on your Flex application

For more details on deploying your plugin, refer to the deploying your plugin guide.

Note: Common packages like React, ReactDOM, Redux and ReactRedux are not bundled with the build because they are treated as external dependencies so the plugin will depend on Flex to provide them globally.