Fix/security vulnerabilities

.eslintrc

@@ -1,9 +1,14 @@
 {
   "extends": [
-    "twilio-ts",
-    "twilio-react",
+    "twilio-ts", 
+    "twilio",
+    "plugin:jsx-a11y/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:no-unsanitized/recommended-legacy",
     "prettier"
   ],
+  "plugins": ["jsx-a11y", "react", "react-hooks"],
   "env": {
     "browser": true,
     "commonjs": true,
@@ -35,7 +40,24 @@
     "@typescript-eslint/no-shadow": ["error"],
     "@typescript-eslint/no-unused-vars": "error",
     "import/no-duplicates": ["error"],
+    "@typescript-eslint/no-empty-function": "off",
     "spaced-comment": "warn",
     "prefer-named-capture-group": "off"
-  }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "overrides": [
+    {
+      "files": ["**/__tests__/**/*", "**/__mocks__/**/*", "**/*.test.*", "**/*.spec.*"],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": "off",
+        "import/no-unused-modules": "off",
+        "sonarjs/no-identical-functions": "off",
+        "sonarjs/no-duplicate-string": "off"
+      }
+    }
+  ]
 }

package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "@emotion/core": "^10.0.28",
     "@sendgrid/mail": "7.7.0",
-    "@twilio-paste/core": "^10.20.0",
+    "@twilio-paste/core": "^20.9.0",
     "@twilio-paste/icons": "^6.1.0",
     "@twilio-paste/theme": "^5.3.3",
     "@twilio/conversations": "2.1.0-rc.0",
@@ -47,11 +47,11 @@
     "cypress": "^9.3.1",
     "cypress-file-upload": "^5.0.8",
     "dotenv": "^16.0.0",
-    "eslint": "^7.11.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-config-twilio-react": "^1.35.1",
-    "eslint-config-twilio-ts": "^1.35.1",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-twilio-react": "^2.0.0",
+    "eslint-config-twilio-ts": "^2.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "express": "4.17.2",
     "fetch-mock-jest": "^1.5.1",
     "jsonwebtoken": "^8.5.1",
@@ -72,7 +72,8 @@
     "bootstrap": "node scripts/bootstrap",
     "e2eCleanupExistingTasks": "node scripts/e2eCleanupExistingTasks",
     "deploy": "yarn build && node scripts/deploy",
-    "eject": "react-app-rewired eject"
+    "eject": "react-app-rewired eject",
+    "lint": "eslint --fix src --ext js,ts,tsx"
   },
   "browserslist": [
     ">0.2%",

src/__mocks__/@twilio/conversations/client.ts

@@ -3,8 +3,9 @@ import type { ClientOptions, Client as ClientType, ConnectionState, User as User
 import { Conversation } from "./conversation";
 import { MockedPaginator } from "../../../test-utils";
 
-const { Client: ConversationClient, User } =
-    jest.requireActual<{ Client: typeof ClientType; User: typeof UserType }>("@twilio/conversations");
+const { Client: ConversationClient, User } = jest.requireActual<{ Client: typeof ClientType; User: typeof UserType }>(
+    "@twilio/conversations"
+);
 
 export class Client extends ConversationClient {
     /**

src/__mocks__/@twilio/conversations/conversation.ts

@@ -13,8 +13,9 @@ import type {
 
 import { MockedPaginator } from "../../../test-utils";
 
-const { Conversation: OriginalConversation } =
-    jest.requireActual<{ Conversation: typeof ConversationType }>("@twilio/conversations");
+const { Conversation: OriginalConversation } = jest.requireActual<{ Conversation: typeof ConversationType }>(
+    "@twilio/conversations"
+);
 
 export class Conversation extends OriginalConversation {
     /**

src/components/WebchatWidget.tsx

@@ -1,14 +1,14 @@
 import { useDispatch, useSelector } from "react-redux";
 import { CustomizationProvider, CustomizationProviderProps } from "@twilio-paste/core/customization";
-import { CSSProperties, FC, useEffect } from "react";
+import { FC, useEffect } from "react";
 
 import { RootContainer } from "./RootContainer";
 import { AppState, EngagementPhase } from "../store/definitions";
 import { sessionDataHandler } from "../sessionDataHandler";
 import { initSession } from "../store/actions/initActions";
 import { changeEngagementPhase } from "../store/actions/genericActions";
 
-const AnyCustomizationProvider: FC<CustomizationProviderProps & { style: CSSProperties }> = CustomizationProvider;
+const AnyCustomizationProvider: FC<CustomizationProviderProps> = CustomizationProvider;
 
 export function WebchatWidget() {
     const theme = useSelector((state: AppState) => state.config.theme);

src/components/__tests__/AttachFileButton.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, prettyDOM, render, waitFor } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import React from "react";
 

src/components/__tests__/AttachFileDropArea.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, waitFor } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
 import * as genericActions from "../../store/actions/genericActions";

src/components/__tests__/NotificationBarItem.test.tsx

@@ -45,21 +45,21 @@ describe("Notification Bar Item", () => {
 
     it("dismisses notification when dismiss button is clicked", () => {
         const removeNotificationSpy = jest.spyOn(genericActions, "removeNotification");
-        const { getByTitle } = render(<NotificationBarItem {...notification} dismissible={true} />);
+        const { getByText } = render(<NotificationBarItem {...notification} dismissible={true} />);
 
-        const dismissButton = getByTitle(dismissButtonTitle);
+        const dismissButton = getByText(dismissButtonTitle);
         fireEvent.click(dismissButton);
 
         expect(removeNotificationSpy).toHaveBeenCalledWith(notification.id);
     });
 
     it("runs onDismiss function prop when dismiss button is clicked", () => {
         const onDismiss = jest.fn();
-        const { getByTitle } = render(
+        const { getByText } = render(
             <NotificationBarItem {...notification} dismissible={true} onDismiss={onDismiss} />
         );
 
-        const dismissButton = getByTitle(dismissButtonTitle);
+        const dismissButton = getByText(dismissButtonTitle);
         fireEvent.click(dismissButton);
 
         expect(onDismiss).toHaveBeenCalled();

src/index.tsx

@@ -1,4 +1,5 @@
 import merge from "lodash.merge";
+import React from "react";
 import { render } from "react-dom";
 import { Provider } from "react-redux";
 
@@ -44,9 +45,11 @@ const initWebchat = async (config: ConfigState) => {
     const rootElement = document.getElementById("twilio-webchat-widget-root");
 
     render(
-        <Provider store={store}>
-            <WebchatWidget />
-        </Provider>,
+        React.createElement(
+            Provider as unknown as React.ComponentType<{ store: typeof store }>,
+            { store },
+            React.createElement(WebchatWidget)
+        ),
         rootElement
     );
 

src/react-app-env.d.ts

@@ -1 +1 @@
-/// <reference types="react-scripts" />
+// / <reference types="react-scripts" />

src/store/definitions.ts

@@ -1,9 +1,10 @@
 import { Client, Conversation, Participant, Message, User } from "@twilio/conversations";
 import { GenericThemeShape } from "@twilio-paste/theme";
-import { AlertVariants } from "@twilio-paste/core/alert";
 
 import { FileAttachmentConfig, TranscriptConfig } from "../definitions";
 
+type AlertVariants = "error" | "neutral" | "warning";
+
 export enum EngagementPhase {
     PreEngagementForm = "PreEngagementForm",
     MessagingCanvas = "MessagingCanvas",

src/utils/generateDuration.test.ts

@@ -26,7 +26,6 @@ describe("File Preview", () => {
         expect(generateDuration(transcriptData)).toEqual("1 second ");
     });
 
-
     it("calculate the duration of the chat lasting 1 minute and 2 seconds", () => {
         const transcriptData: Transcript[] = [
             { author: "John", body: "hi", timeStamp: new Date("December 17, 2022 04:30:10"), attachedMedia: null },