Merge branch 'main' into anishprasad01/ngrok-v3-fix

microsoft · Jun 20, 2023 · 3489b62 · 3489b62
2 parents 9b6830f + d144dd2
commit 3489b62
Show file tree

Hide file tree

Showing 26 changed files with 160 additions and 85 deletions.
diff --git a/.config/tsaoptions.json b/.config/tsaoptions.json
@@ -0,0 +1,6 @@
+{
+  "azurePath": "Emulator/Compliance",
+  "notificationAliases": "botframework-composer-eng@service.microsoft.com",
+  "codebaseName": "TSABotFrameworkEmulator",
+  "ignoreBranchName": true
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/app/client/package.json b/packages/app/client/package.json
@@ -90,7 +90,7 @@
     "sass-loader": "^10.4.1",
     "style-loader": "^0.21.0",
     "terser-webpack-plugin": "2.3.3",
-    "typescript": "^4.1.3",
+    "typescript": "^4.2.0",
     "@teamsupercell/typings-for-css-modules-loader": "^2.5.2",
     "url-loader": "^1.0.1",
     "webpack": "^4.32.2",

diff --git a/packages/app/client/src/index.html b/packages/app/client/src/index.html
@@ -46,7 +46,7 @@
     <link rel="stylesheet" data-theme-component="true" id="themeVars" href="./themes/light.css"/>
     <link rel="stylesheet" data-theme-component="true" href="./css/fonts.css"/>
     <link rel="stylesheet" data-theme-component="true" href="./css/redline.css"/>
-    <title></title>
+    <title>Bot Framework Emulator</title>
   </head>
   <body>
     <noscript>

diff --git a/packages/app/client/src/splash.html b/packages/app/client/src/splash.html
@@ -15,6 +15,7 @@
         width: 100%;
       }
     </style>
+    <title>Bot Framework Emulator splash screen</title>
   </head>
   <body>
     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

diff --git a/packages/app/client/src/ui/editor/emulator/parts/log/log.scss b/packages/app/client/src/ui/editor/emulator/parts/log/log.scss
@@ -75,4 +75,16 @@
   &::-webkit-scrollbar-thumb {
     background-color: var(--scrollbar-color);
   }
+  & .sr-only {
+    border: 0;
+    clip-path: inset(50%);
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
 }
diff --git a/packages/app/client/src/ui/editor/emulator/parts/log/log.scss.d.ts b/packages/app/client/src/ui/editor/emulator/parts/log/log.scss.d.ts
@@ -11,6 +11,8 @@ declare namespace LogScssNamespace {
     log: string;
     source: string;
     spaced: string;
+    'sr-only': string;
+    srOnly: string;
     srcDst: string;
     timestamp: string;
   }

diff --git a/packages/app/client/src/ui/editor/emulator/parts/log/log.tsx b/packages/app/client/src/ui/editor/emulator/parts/log/log.tsx
@@ -96,6 +96,7 @@ export class Log extends React.Component<LogProps, LogState> {
             currentlyInspectedActivity={this.state.currentlyInspectedActivity}
             document={this.props.document}
             entry={entry}
+            entryIndex={key + 1}
             key={`entry-${key++}`}
           />
         ))}

diff --git a/packages/app/client/src/ui/editor/emulator/parts/log/logEntry.tsx b/packages/app/client/src/ui/editor/emulator/parts/log/logEntry.tsx
@@ -55,6 +55,7 @@ import * as styles from './log.scss';
 export interface LogEntryProps {
   document: any;
   entry: ILogEntry;
+  entryIndex: number;
   currentlyInspectedActivity?: any;
   launchLuisEditor?: () => void;
   setInspectorObjects?: (documentId: string, objs: any) => void;
@@ -96,6 +97,7 @@ export class LogEntry extends React.Component<LogEntryProps> {
     // any rendered inspectable items will add themselves to this.inspectableObjects
     const innerJsx = (
       <>
+        <span className={styles.srOnly}>Log entry {this.props.entryIndex} </span>
         {this.renderTimestamp(this.props.entry.timestamp)}
         {this.props.entry.items.map((item, key) => this.renderItem(item, '' + key))}
       </>
@@ -188,7 +190,11 @@ export class LogEntry extends React.Component<LogEntryProps> {
   renderExternalLinkItem(text: string, hyperlink: string, key: string) {
     return (
       <span key={key} className={styles.spaced}>
-        <button className={styles.link} onClick={() => window.open(hyperlink, '_blank')}>
+        <button
+          aria-label={`${text}. Log entry ${this.props.entryIndex}`}
+          className={styles.link}
+          onClick={() => window.open(hyperlink, '_blank')}
+        >
           {text}
         </button>
       </span>
@@ -198,7 +204,11 @@ export class LogEntry extends React.Component<LogEntryProps> {
   renderAppSettingsItem(text: string, key: string) {
     return (
       <span key={key} className={styles.spaced}>
-        <button className={styles.link} onClick={() => this.props.showAppSettings()}>
+        <button
+          aria-label={`${text}. Log entry ${this.props.entryIndex}`}
+          className={styles.link}
+          onClick={() => this.props.showAppSettings()}
+        >
           {text}
         </button>
       </span>
@@ -207,7 +217,7 @@ export class LogEntry extends React.Component<LogEntryProps> {
 
   renderExceptionItem(err: Error, key: string) {
     return (
-      <span key={key} className={`${styles.spaced} ${styles.level3}`}>
+      <span role="alert" key={key} className={`${styles.spaced} ${styles.level3}`}>
         {err && err.message ? err.message : ''}
       </span>
     );
@@ -227,7 +237,11 @@ export class LogEntry extends React.Component<LogEntryProps> {
     return (
       <span key={key} onMouseOver={() => this.highlight(obj)} onMouseLeave={() => this.highlight({})}>
         <span className={`inspectable-item ${styles.spaced} ${styles.level0}`}>
-          <button className={styles.link} onClick={() => this.inspectAndHighlightInWebchat(obj)}>
+          <button
+            aria-label={`${title}. Log entry ${this.props.entryIndex}`}
+            className={styles.link}
+            onClick={() => this.inspectAndHighlightInWebchat(obj)}
+          >
             {title}
           </button>
         </span>
@@ -250,7 +264,11 @@ export class LogEntry extends React.Component<LogEntryProps> {
     if (obj) {
       return (
         <span key={key} className={`network-req-item ${styles.spaced} ${styles.level0}`}>
-          <button className={styles.link} onClick={() => this.inspect(obj)}>
+          <button
+            aria-label={`${method} request. Log entry ${this.props.entryIndex}`}
+            className={styles.link}
+            onClick={() => this.inspect(obj)}
+          >
             {method}
           </button>
         </span>
@@ -292,7 +310,11 @@ export class LogEntry extends React.Component<LogEntryProps> {
     if (obj) {
       return (
         <span key={key} className={`network-res-item ${styles.spaced} ${styles.level0}`}>
-          <button className={styles.link} onClick={() => this.inspect(obj)}>
+          <button
+            aria-label={`${statusCode} response. Log entry ${this.props.entryIndex}`}
+            className={styles.link}
+            onClick={() => this.inspect(obj)}
+          >
             {statusCode}
           </button>
         </span>
@@ -310,7 +332,11 @@ export class LogEntry extends React.Component<LogEntryProps> {
     return (
       <span key={key} className={`${styles.spaced} ${styles.level3}`}>
         {text + ' '}
-        <button className={styles.link} onClick={() => this.props.reconnectNgrok()}>
+        <button
+          aria-label={`Please recoonect, Ngrok connection expired. Log entry ${this.props.entryIndex}`}
+          className={styles.link}
+          onClick={() => this.props.reconnectNgrok()}
+        >
           Please reconnect.
         </button>
       </span>
@@ -321,7 +347,11 @@ export class LogEntry extends React.Component<LogEntryProps> {
     return (
       <span key={key} className={`text-item ${styles.spaced} ${styles.level3}`}>
         {`${text} Please `}
-        <a className={styles.link} onClick={() => this.props.launchLuisEditor()}>
+        <a
+          aria-label={`Connect your bot to LUIS. Log entry ${this.props.entryIndex}`}
+          className={styles.link}
+          onClick={() => this.props.launchLuisEditor()}
+        >
           connect your bot to LUIS
         </a>
         {` using the services pane.`}

diff --git a/packages/app/client/src/ui/shell/explorer/servicePane/servicePane.tsx b/packages/app/client/src/ui/shell/explorer/servicePane/servicePane.tsx
@@ -125,12 +125,7 @@ export abstract class ServicePane<
     }
     return (
       <ExpandCollapseContent>
-        <ul
-          className={styles.servicePaneList}
-          ref={ul => (this.listRef = ul)}
-          tabIndex={0}
-          aria-label={`${ariaLabel} list`}
-        >
+        <ul className={styles.servicePaneList} ref={ul => (this.listRef = ul)} tabIndex={0} aria-label={ariaLabel}>
           {links}
         </ul>
         {additionalContent}

diff --git a/packages/app/client/src/ui/shell/mdi/tab/ngrokTab.tsx b/packages/app/client/src/ui/shell/mdi/tab/ngrokTab.tsx
@@ -87,6 +87,7 @@ export const NgrokTab = (props: NgrokTabProps) => {
         active={props.active}
         dirty={props.dirty}
         documentId={props.documentId}
+        index={props.index}
         label={props.label}
         onCloseClick={props.onCloseClick}
         hideIcon={true}

diff --git a/packages/app/client/src/ui/shell/mdi/tab/tab.tsx b/packages/app/client/src/ui/shell/mdi/tab/tab.tsx
@@ -42,6 +42,7 @@ import { DOCUMENT_ID_APP_SETTINGS, DOCUMENT_ID_MARKDOWN_PAGE, DOCUMENT_ID_WELCOM
 import * as styles from './tab.scss';
 
 export interface TabProps {
+  index: number;
   active?: boolean;
   dirty?: boolean;
   documentId?: string;
@@ -75,7 +76,7 @@ export class Tab extends React.Component<TabProps, TabState> {
   }
 
   public render() {
-    const { active, label } = this.props;
+    const { active, label, index } = this.props;
     const activeClassName = active ? styles.activeEditorTab : '';
     const draggedOverClassName = this.state.draggedOver ? styles.draggedOverEditorTab : '';
     const iconClass = this.iconClass;
@@ -101,7 +102,7 @@ export class Tab extends React.Component<TabProps, TabState> {
           className={styles.tabFocusTarget}
           role="tab"
           tabIndex={0}
-          aria-label={`${label}`}
+          aria-label={`${label}. Tab ${index}`}
           aria-selected={active}
           aria-description={isLinux() && active ? 'selected' : undefined}
           ref={this.setTabRef}
@@ -110,7 +111,7 @@ export class Tab extends React.Component<TabProps, TabState> {
         </div>
         <button
           type="button"
-          title={`Close ${label} tab`}
+          title={`Close ${label} tab. Tab ${index}`}
           className={styles.editorTabClose}
           onKeyPress={this.onCloseButtonKeyPress}
           onClick={this.onCloseClick}

diff --git a/packages/app/client/src/ui/shell/mdi/tab/tabContainer.ts b/packages/app/client/src/ui/shell/mdi/tab/tabContainer.ts
@@ -36,7 +36,7 @@ import { swapTabs, toggleDraggingTab } from '@bfemulator/app-shared';
 
 import { Tab, TabProps } from './tab';
 
-const mapDispatchToProps = (dispatch, ownProps: TabProps): TabProps => ({
+const mapDispatchToProps = (dispatch, ownProps: TabProps): Partial<TabProps> => ({
   toggleDraggingTab: (toggle: boolean) => dispatch(toggleDraggingTab(toggle)),
   swapTabs: (editorKey: string, owningEditor: string, tabId: string) =>
     dispatch(swapTabs(editorKey, owningEditor, tabId, ownProps.documentId)),

diff --git a/packages/app/client/src/ui/shell/mdi/tabBar/tabBar.tsx b/packages/app/client/src/ui/shell/mdi/tabBar/tabBar.tsx
@@ -181,6 +181,7 @@ export class TabBar extends React.Component<TabBarProps, TabBarState> {
         active: isActive,
         dirty: document.dirty,
         documentId: documentId,
+        index: index + 1,
         label: this.getTabLabel(document),
         onCloseClick: this.props.closeTab,
       };

diff --git a/packages/app/client/src/ui/shell/mdi/tabbedDocument/contentWrapper/contentWrapper.tsx b/packages/app/client/src/ui/shell/mdi/tabbedDocument/contentWrapper/contentWrapper.tsx
@@ -74,7 +74,12 @@ class TabbedDocumentContentWrapperComponent extends Component<TabbedDocumentCont
       Object.keys(this.props.primaryEditor.documents).length > 1;
 
     return (
-      <div className={styles.contentWrapper} hidden={this.props.hidden} onClickCapture={this.onClick}>
+      <div
+        className={styles.contentWrapper}
+        hidden={this.props.hidden}
+        aria-hidden={this.props.hidden}
+        onClickCapture={this.onClick}
+      >
         {this.props.children}
         <ContentOverlay documentId={this.props.documentId} />
         {splittingEnabled ? (

diff --git a/packages/app/main/package.json b/packages/app/main/package.json
@@ -90,6 +90,7 @@
     "@types/formidable": "^1.0.30",
     "@types/fs-extra": "^5.0.4",
     "@types/jest": "24.0.13",
+    "@types/jsonwebtoken": "ts4.2",
     "@types/keytar": "^4.4.0",
     "@types/mkdirp": "^0.5.2",
     "@types/node": "8.9.3",
@@ -123,7 +124,7 @@
     "npm-run-all": "^4.1.5",
     "spectron": "^15.0.0",
     "through2": "^2.0.3",
-    "typescript": "^4.1.3",
+    "typescript": "^4.2.0",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0"
   },

diff --git a/packages/app/main/src/server/routes/handlers/botFrameworkAuthentication.ts b/packages/app/main/src/server/routes/handlers/botFrameworkAuthentication.ts
@@ -31,7 +31,7 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 //
 
-import * as jwt from 'jsonwebtoken';
+import { verify, decode } from 'jsonwebtoken';
 import * as Restify from 'restify';
 
 import {
@@ -58,7 +58,7 @@ export function createBotFrameworkAuthenticationMiddleware(fetch: any) {
     const [authMethod, token] = authorization.trim().split(' ');
 
     // Verify token
-    const decoded: any = /^bearer$/i.test(authMethod) && token && jwt.decode(token, { complete: true });
+    const decoded: any = /^bearer$/i.test(authMethod) && token && decode(token, { complete: true });
 
     if (!decoded) {
       // Token not provided so
@@ -87,7 +87,7 @@ export function createBotFrameworkAuthenticationMiddleware(fetch: any) {
       }
 
       try {
-        (req as any).jwt = jwt.verify(token, key, {
+        (req as any).jwt = verify(token, key, {
           allowInvalidAsymmetricKeyTypes: true,
           audience: usGovernmentAuthentication.botTokenAudience,
           clockTolerance: 300,
@@ -135,7 +135,7 @@ export function createBotFrameworkAuthenticationMiddleware(fetch: any) {
       try {
         // TODO: Turn jwt.verify into async call for better performance
         // first try 3.2 token characteristics
-        (req as any).jwt = jwt.verify(token, key, {
+        (req as any).jwt = verify(token, key, {
           allowInvalidAsymmetricKeyTypes: true,
           audience: authentication.botTokenAudience,
           clockTolerance: 300,
@@ -151,7 +151,7 @@ export function createBotFrameworkAuthenticationMiddleware(fetch: any) {
       } catch (err) {
         try {
           // then try v3.1 token characteristics
-          (req as any).jwt = jwt.verify(token, key, {
+          (req as any).jwt = verify(token, key, {
             allowInvalidAsymmetricKeyTypes: true,
             audience: authentication.botTokenAudience,
             clockTolerance: 300,