Merge pull request #1057 from techmatters/CHI-1287-upgrade_cli

CHI-1287: Upgrade CLI & deps

.github/workflows/plugin-hrm-form-ci.yml

@@ -19,7 +19,7 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - name: Install the Twilio CLI and plugins
-      run: npm install [email protected].0 -g && twilio plugins:install @twilio-labs/[email protected].2
+      run: npm install [email protected].2 -g && twilio plugins:install @twilio-labs/[email protected].3
     - name: Create Temp Files
       run: |
         touch ./public/appConfig.js

.github/workflows/plugin-hrm-form-e2e-test.yml

@@ -50,7 +50,7 @@ jobs:
 
       # Build Flex-plugins
       - name: Install the Twilio CLI and plugins
-        run: npm install [email protected].0 -g && twilio plugins:install @twilio-labs/[email protected].2
+        run: npm install [email protected].2 -g && twilio plugins:install @twilio-labs/[email protected].3
       - name: Install hrm-form-definitions Packages
         run: npm ci
         working-directory: ./hrm-form-definitions

e2e-tests/workerStatus.ts

@@ -12,7 +12,7 @@ export function statusIndicator(page: Page) {
     userActivityDropdownButton: page.locator("//button[@data-test='activity-dropdown-button']"),
     userActivityDropdownOption: (status: WorkerStatus) =>
       page.locator(
-        `//div[@aria-label='Actions']//button[@data-paste-element='MENU_ITEM']//span[text()='${status}']`,
+        `//div[@aria-label='Activity selection']//button[@data-paste-element='MENU_ITEM']//span[text()='${status}']`,
       ),
   };
 

plugin-hrm-form/package.json

@@ -31,8 +31,8 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@datadog/browser-rum": "^1.20.0",
-    "@emotion/react": "^11.9.3",
     "@emotion/css": "^11.9.3",
+    "@emotion/react": "^11.9.3",
     "@fullstory/browser": "^1.4.9",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
@@ -64,9 +64,9 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^14.1.1",
-    "@twilio/flex-plugin": "^6.0.2",
-    "@twilio/flex-plugin-scripts": "^6.0.2",
-    "@twilio/flex-ui": "^2.0.0-beta.1",
+    "@twilio/flex-plugin": "^6.0.3",
+    "@twilio/flex-plugin-scripts": "^6.0.3",
+    "@twilio/flex-ui": "^2.0.0-beta.3",
     "@twilio/flex-ui-dev-proxy": "^1.1.2",
     "@types/jest": "^27.5.2",
     "@types/react": "^17.0.47",
@@ -98,7 +98,7 @@
     "rxjs-compat": "6.6.3",
     "timezoned-date": "^3.0.2",
     "ts-jest": "^26.5.6",
-    "twilio-cli": "^5.2.0",
-    "typescript": "^3.9.7"
+    "twilio-cli": "^5.2.2",
+    "typescript": "4.7.4"
   }
 }

plugin-hrm-form/src/___tests__/channels/setUpChannels.test.ts

@@ -34,7 +34,7 @@ jest.mock('../../HrmFormPlugin', () => ({
   getConfig: jest.fn(),
 }));
 
-const channelsAndStrings = ['Call', 'Chat', 'ChatLine', 'ChatMessenger', 'ChatSms', 'ChatWhatsApp'].map(channel => ({
+const channelsAndStrings = ['Call', 'Chat', 'ChatMessenger', 'ChatSms', 'ChatWhatsApp'].map(channel => ({
   channel,
   string: `Transfer-TaskLine${channel}Reserved`,
 }));

plugin-hrm-form/src/channels/setUpChannels.tsx

@@ -48,7 +48,6 @@ export const setUpIncomingTransferMessage = () => {
   const chatChannels = [
     { channel: 'Call', string: 'Transfer-TaskLineCallReserved' },
     { channel: 'Chat', string: 'Transfer-TaskLineChatReserved' },
-    { channel: 'ChatLine', string: 'Transfer-TaskLineChatLineReserved' },
     { channel: 'ChatMessenger', string: 'Transfer-TaskLineChatMessengerReserved' },
     { channel: 'ChatSms', string: 'Transfer-TaskLineChatSmsReserved' },
     { channel: 'ChatWhatsApp', string: 'Transfer-TaskLineChatWhatsAppReserved' },
@@ -136,9 +135,17 @@ export const setupLineChatChannel = maskIdentifiers => {
   const icon = <LineIcon width="24px" height="24px" color={colors.line} />;
 
   const LineChatChannel = Flex.DefaultTaskChannels.createChatTaskChannel('line', task => task.channelType === 'line');
+  if (maskIdentifiers) maskIdentifiersByChannel(LineChatChannel);
 
-  LineChatChannel.colors = Flex.DefaultTaskChannels.ChatLine.colors;
-  LineChatChannel.templates = Flex.DefaultTaskChannels.ChatLine.templates;
+  LineChatChannel.colors.main = {
+    Accepted: colors.line,
+    Assigned: colors.line,
+    Pending: colors.line,
+    Reserved: colors.line,
+    Wrapping: mainChannelColor(Flex.DefaultTaskChannels.Chat, ReservationStatuses.Wrapping),
+    Completed: mainChannelColor(Flex.DefaultTaskChannels.Chat, ReservationStatuses.Completed),
+    Canceled: mainChannelColor(Flex.DefaultTaskChannels.Chat, ReservationStatuses.Canceled),
+  };
 
   LineChatChannel.icons = {
     active: icon,

plugin-hrm-form/src/components/case/caseDetails/CaseDetailsHeader.tsx

@@ -61,8 +61,8 @@ const CaseDetailsHeader: React.FC<OwnProps> = ({
             <StyledPrintButton
               onClick={handlePrintCase}
               aria-label="Print"
-              icon={<PrintIcon />}
               data-testid="CasePrint-Button"
+              icon={<PrintIcon />}
             />
           )}
         </Box>

plugin-hrm-form/src/components/twilioComponentWorkaround.ts

@@ -0,0 +1,15 @@
+import { Button as TwilioButton, IconButton as TwilioIconButton } from '@twilio/flex-ui';
+
+/**
+ * This is a workaround for an issue seen starting in @twilio/flex-ui v2.0.0-beta.3
+ * Twilio Buttons were failing on type checks because it thought their props has a mandatory 'css' property, which it doesn't
+ * This workaround does some TS back flips to create the same type with the 'css' property explicitly omitted, which shuts the TS compiler up
+ * Just use this instead of the Twilio UI button as long as the issue persists
+ */
+
+type extractGeneric<Type> = Type extends React.FC<infer X> ? X : never;
+type ButtonProps = extractGeneric<typeof TwilioButton>;
+export const Button: React.FC<Omit<ButtonProps, 'css'>> = TwilioButton;
+
+type IconButtonProps = extractGeneric<typeof TwilioIconButton>;
+export const IconButton: React.FC<Omit<IconButtonProps, 'css'>> = TwilioIconButton;

plugin-hrm-form/src/styles/HrmStyles.tsx

@@ -3,9 +3,10 @@ import React from 'react';
 import { ButtonBase, Input, Select, MenuItem, Tabs, Tab, withStyles, TabProps } from '@material-ui/core';
 import type { ButtonBaseProps } from '@material-ui/core/ButtonBase';
 import AssignmentInd from '@material-ui/icons/AssignmentIndOutlined';
-import { Button, Icon, styled, CheckboxGroup } from '@twilio/flex-ui';
+import { Icon, styled } from '@twilio/flex-ui';
 import { getBackgroundWithHoverCSS } from '@twilio/flex-ui-core';
 
+import { Button } from '../components/twilioComponentWorkaround';
 import HrmTheme from './HrmTheme';
 
 export const BottomButtonBarHeight = 55;

plugin-hrm-form/src/styles/callTypeButtons/index.tsx

@@ -3,9 +3,10 @@ import '@emotion/react';
 import Dialog from '@material-ui/core/Dialog';
 import ClearIcon from '@material-ui/icons/Clear';
 import { IconButton } from '@material-ui/core';
-import { Button, styled } from '@twilio/flex-ui';
+import { styled } from '@twilio/flex-ui';
 import { getBackgroundWithHoverCSS } from '@twilio/flex-ui-core';
 
+import { Button } from '../../components/twilioComponentWorkaround';
 import HrmTheme from '../HrmTheme';
 
 export const Container = styled('div')`

plugin-hrm-form/src/styles/case/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Button, IconButton, styled } from '@twilio/flex-ui';
+import { styled } from '@twilio/flex-ui';
 import { ButtonBase } from '@material-ui/core';
 
+import { Button, IconButton } from '../../components/twilioComponentWorkaround';
 import { FontOpenSans, FormInput, Row, Column } from '../HrmStyles';
 import HrmTheme from '../HrmTheme';