Tab Component on TaskCanvasTabs Key always set to AgentTasCanvasTabs [BUG]

[markwinap]

Description

Custom tabs added by not seting key name causing errors on multiple custom tabs

flex.TaskCanvasTabs.Content.add(

);

Versions

package	version
craco-config-flex-plugin	3.14.2
flex-plugin	3.14.2
craco-config-flex-plugin	3.14.2
react	16.13.1
react-dom	16.13.1
react-scripts	3.4.1
node	12.18.3
npm	6.14.8

Steps to Reproduce

Create 2 tabs with different keys

flex.TaskCanvasTabs.Content.add(

); flex.TaskCanvasTabs.Content.add(

);

both tabs are render with the same key

Expected Behavior

Expected task canvas tabs to have unique keys in order to avoid collisions with components with the same key.

Screenshots

Additional Context

Using React 16.13.1 https://www.twilio.com/docs/flex/plugins/react-versions

[markwinap]

Found the solution,

TabProps, is using the optional uniqueName prop instead of key for identifiying the selected tab. probably the best solution here is to update the doc, change the prop to mandatory or use key as unique name (key is already required to render the component)

[ktalebian]

Glad this was fixed.

[DoDSoftware]

@markwinap Can you point me to where the documentation was updated for this?

After adding a second plugin that adds a tab, I found that the tab label was being duplicated many times in the UI. (not the tab itself, but just the label). Eventually, I found this issue and setting uniqueName for each tab solved that problem.

[jagtappranjal]

I have added uniqueName props still my "Tickets " tab is getting duplicated, Could you please help me to get it fix. Thanks

` init(flex, manager) { var clientCTICompatable = true;

    let userSysId;

    Manager.getInstance().workerClient.on("reservationCreated", reservation => {
        console.log(' Task Accepted with userSysId : ', reservation.task.attributes.userDetails.userSysId);
        userSysId = reservation.task.attributes.userDetails.userSysId;
        console.log('This is Task userSysId', userSysId);

        if (clientCTICompatable) {
            const options = {
                align: 'end',
            };
            flex.TaskCanvasTabs.Content.add(
                <Tab label='TICKETS' key='Tickets-panel-tab-key' uniqueName='Ticket-tab' sortOrder='1' >
                    <TicketList key='CtiViewPlugin-component-TicketList' userSysId={userSysId} />
                </Tab>,
                options,
            );
        }
    });

        this.registerReducers(manager);

`