0

I am developing a Twilio Flex plugin using Flex Ui version 2 (beta.1 and beta.2). I wanted to add multiple tabs to TaskCanvasTabs and tried to write the following code.

import React from 'react';
import { Tab } from '@twilio/flex-ui';
import { FlexPlugin } from '@twilio/flex-plugin';

import SmsPanel from './components/SmsPanel/SmsPanel';
import IncomingVideo from './components/IncomingVideo/IncomingVideo';

const PLUGIN_NAME = 'SendSmsV2Plugin';

export default class SendSmsV2Plugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
  }

  /**
   * This code is run when your plugin is being started
   * Use this to modify any UI components or attach to the actions framework
   *
   * @param flex { typeof import('@twilio/flex-ui') }
   */
  async init(flex, manager) {
    const options = {
      align: 'end',
    };
    flex.TaskCanvasTabs.Content.add(
      <Tab label='SMS' key='sms-panel-tab-key'>
        <SmsPanel key='sms-panel-component' />
      </Tab>,
      options,
    );
    flex.TaskCanvasTabs.Content.add(
      <Tab label='Video' key='video-panel-tab-key'>
        <IncomingVideo key='incoming-video-component' />
      </Tab>,
      options,
    );
  }
}

When executed, the first Tab (SMS) added will be duplicated as shown below. Thereafter, each time I select the first Tab, Call tab, etc., the first Tab added will be increased.

enter image description here

Can someone please tell me if the specification does not allow adding multiple tabs to TaskCanvasTabs or how to solve this problem?

Katsumi Takahashi
  • 23
  • 3

2 Answers2

0

I also tried with Flex Ui version 2 (beta.3) but the behavior is the same.

It seems that this issue only happens when you try to add multiple tabs on TaskCanvasTabs

To resolve this issue you could add a Tab Group which contains Tabs

flex.TaskCanvasTabs.Content.add(
 <Flex.Tabs key="custom-tabs-group">
  <Flex.Tab key="conversation-note-tab" label="Conversation Notes">
    <ConversationNote key="conversation-note" />
  </Flex.Tab>
  <Flex.Tab key="label-to-conversation" label="Conversation Label">
    <AttachLabelToConversation key="add-label-to-conversation" />
  </Flex.Tab>
 </Flex.Tabs>,
{}
);

Use this css to adjust the tab group text

/* Added CSS for merged TaskCanvasTabs into Tabs group start */
.Twilio-TaskCanvas .Twilio-TaskCanvas-default .Twilio-TaskCanvasTabs div[data-test="customer-tab-header"]:has(> div > button) button {
  width: 100%;
  height: 100%;
}
.Twilio-TaskCanvas .Twilio-TaskCanvas-default .Twilio-TaskCanvasTabs div[data-test="customer-tab-header"]:has(> div > button) button:hover {
  background-color: unset;
}
.Twilio-TaskCanvas .Twilio-TaskCanvas-default .Twilio-TaskCanvasTabs div[data-test="customer-tab-header"]:has(> div > button) button div svg {
  display: none;
}
.Twilio-TaskCanvas .Twilio-TaskCanvas-default .Twilio-TaskCanvasTabs div[data-test="customer-tab-header"]:has(> div > button) button div:after {
  content: "Conversation Actions";
  font-size: 14px;
  font-weight: 600;
  color: rgb(96, 107, 133);
  padding-bottom: 6px;
}
/* Added CSS for merged TaskCanvasTabs into Tabs group end */
Bhayani
  • 1
  • 1
0

I heard the best solution.
TabPros is using the optional uniqueName prop instead of the key for identifying the selected tab.
So, I changed my code below. It was fixed.

    flex.TaskCanvasTabs.Content.add(
      <Tab label='SMS' key='sms-panel-tab-key' uniqueName='sms-panel-tab'>
        <SmsPanel key='sms-panel-component' />
      </Tab>,
      options,
    );
    flex.TaskCanvasTabs.Content.add(
      <Tab label='Video' key='video-panel-tab-key' uniqueName='video-panel-tab'>
        <IncomingVideo key='incoming-video-component' />
      </Tab>,
      options,
    );

The link referenced is below.

https://github.com/twilio/flex-plugin-builder/issues/327

Katsumi Takahashi
  • 23
  • 3