build: update typescript, eslint, prettier and more

.github/actions/conventional-pr/action.yml

@@ -6,3 +6,7 @@ runs:
 branding:
   icon: "briefcase"
   color: "purple"
+inputs:
+  repo-token:
+    description: "Token used to interact with the Github API."
+    required: true

.github/actions/conventional-pr/package.json

@@ -14,6 +14,6 @@
     "@actions/github": "^1.1.0"
   },
   "devDependencies": {
-    "typescript": "^3.7.2"
+    "typescript": "3.9.2"
   }
 }

Composer/.eslintrc.js

@@ -1,3 +1,6 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
 module.exports = {
   extends: [
     'eslint:recommended',

Composer/.eslintrc.react.js

@@ -1,6 +1,9 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
 module.exports = {
   extends: ['./.eslintrc.js', 'plugin:react/recommended'],
-  plugins: ['react-hooks', 'format-message', 'emotion'],
+  plugins: ['react-hooks', 'format-message', 'emotion', 'jsx-a11y'],
   settings: {
     react: {
       version: '16.9.16',
@@ -28,9 +31,114 @@ module.exports = {
     'react/no-danger': 'error',
     'react/no-deprecated': 'warn',
     'react/prop-types': 'warn',
+    'react/no-unknown-property': 'error',
+    'react/jsx-boolean-value': ['error', 'never'],
+    'react/jsx-filename-extension': ['error', { extensions: ['.jsx', '.tsx'] }],
+    // https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/docs/rules/jsx-sort-props.md
+    'react/jsx-sort-props': [
+      'error',
+      { callbacksLast: true, ignoreCase: true, shorthandFirst: true, reservedFirst: true },
+    ],
 
     // emotion
     'emotion/jsx-import': 'error',
+
+    // jsx-a11y
+    // taken from https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/src/index.js
+    'jsx-a11y/accessible-emoji': 'warn',
+    'jsx-a11y/alt-text': 'warn',
+    'jsx-a11y/anchor-has-content': 'warn',
+    'jsx-a11y/anchor-is-valid': 'warn',
+    'jsx-a11y/aria-activedescendant-has-tabindex': 'warn',
+    'jsx-a11y/aria-props': 'warn',
+    'jsx-a11y/aria-proptypes': 'warn',
+    'jsx-a11y/aria-role': 'warn',
+    'jsx-a11y/aria-unsupported-elements': 'warn',
+    'jsx-a11y/click-events-have-key-events': 'warn',
+    'jsx-a11y/control-has-associated-label': [
+      'off',
+      {
+        ignoreElements: ['audio', 'canvas', 'embed', 'input', 'textarea', 'tr', 'video'],
+        ignoreRoles: [
+          'grid',
+          'listbox',
+          'menu',
+          'menubar',
+          'radiogroup',
+          'row',
+          'tablist',
+          'toolbar',
+          'tree',
+          'treegrid',
+        ],
+        includeRoles: ['alert', 'dialog'],
+      },
+    ],
+    'jsx-a11y/heading-has-content': 'warn',
+    'jsx-a11y/html-has-lang': 'warn',
+    'jsx-a11y/iframe-has-title': 'warn',
+    'jsx-a11y/img-redundant-alt': 'warn',
+    'jsx-a11y/interactive-supports-focus': [
+      'warn',
+      {
+        tabbable: ['button', 'checkbox', 'link', 'searchbox', 'spinbutton', 'switch', 'textbox'],
+      },
+    ],
+    'jsx-a11y/label-has-associated-control': 'warn',
+    'jsx-a11y/label-has-for': 'off',
+    'jsx-a11y/media-has-caption': 'warn',
+    'jsx-a11y/mouse-events-have-key-events': 'warn',
+    'jsx-a11y/no-access-key': 'warn',
+    'jsx-a11y/no-autofocus': 'warn',
+    'jsx-a11y/no-distracting-elements': 'warn',
+    'jsx-a11y/no-interactive-element-to-noninteractive-role': [
+      'warn',
+      {
+        tr: ['none', 'presentation'],
+      },
+    ],
+    'jsx-a11y/no-noninteractive-element-interactions': [
+      'warn',
+      {
+        handlers: ['onClick', 'onError', 'onLoad', 'onMouseDown', 'onMouseUp', 'onKeyPress', 'onKeyDown', 'onKeyUp'],
+        alert: ['onKeyUp', 'onKeyDown', 'onKeyPress'],
+        body: ['onError', 'onLoad'],
+        dialog: ['onKeyUp', 'onKeyDown', 'onKeyPress'],
+        iframe: ['onError', 'onLoad'],
+        img: ['onError', 'onLoad'],
+      },
+    ],
+    'jsx-a11y/no-noninteractive-element-to-interactive-role': [
+      'warn',
+      {
+        ul: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
+        ol: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
+        li: ['menuitem', 'option', 'row', 'tab', 'treeitem'],
+        table: ['grid'],
+        td: ['gridcell'],
+      },
+    ],
+    'jsx-a11y/no-noninteractive-tabindex': [
+      'warn',
+      {
+        tags: [],
+        roles: ['tabpanel'],
+        allowExpressionValues: true,
+      },
+    ],
+    'jsx-a11y/no-onchange': 'warn',
+    'jsx-a11y/no-redundant-roles': 'warn',
+    'jsx-a11y/no-static-element-interactions': [
+      'warn',
+      {
+        allowExpressionValues: true,
+        handlers: ['onClick', 'onMouseDown', 'onMouseUp', 'onKeyPress', 'onKeyDown', 'onKeyUp'],
+      },
+    ],
+    'jsx-a11y/role-has-required-aria-props': 'warn',
+    'jsx-a11y/role-supports-aria-props': 'warn',
+    'jsx-a11y/scope': 'warn',
+    'jsx-a11y/tabindex-no-positive': 'warn',
   },
   overrides: [
     {

Composer/.prettierrc

@@ -1,7 +1,6 @@
 {
   "printWidth": 120,
   "parser": "typescript",
-  "trailingComma": "es5",
   "singleQuote": true,
-  "tabWidth": 2,
-}
+  "tabWidth": 2
+}

Composer/cypress/integration/Breadcrumb.spec.ts

@@ -16,7 +16,7 @@ context('breadcrumb', () => {
     cy.get('[data-testid="Breadcrumb"]')
       .last()
       .get('li')
-      .should($li => {
+      .should(($li) => {
         items.forEach((item, idx) => {
           expect($li.eq(idx)).to.contain(item);
         });

Composer/cypress/integration/LGPage.spec.ts

@@ -16,14 +16,10 @@ context('LG Page', () => {
     cy.get('.toggleEditMode button').as('switchButton');
 
     // by default is table view
-    cy.findByTestId('LGPage')
-      .findByTestId('table-view')
-      .should('exist');
+    cy.findByTestId('LGPage').findByTestId('table-view').should('exist');
     // goto edit-mode
     cy.get('@switchButton').click();
-    cy.findByTestId('LGPage')
-      .get('.monaco-editor')
-      .should('exist');
+    cy.findByTestId('LGPage').get('.monaco-editor').should('exist');
 
     // back to table view
     cy.get('@switchButton').click();

Composer/cypress/integration/LUPage.spec.ts

@@ -16,9 +16,7 @@ context('LU Page', () => {
     cy.get('.toggleEditMode button').should('not.exist');
 
     // by default is table view
-    cy.findByTestId('LUPage')
-      .findByTestId('table-view')
-      .should('exist');
+    cy.findByTestId('LUPage').findByTestId('table-view').should('exist');
 
     // nav to ToDoBotWithLuisSample.main dialog
     cy.findByTestId('ProjectTree').within(() => {
@@ -27,16 +25,12 @@ context('LU Page', () => {
     cy.get('.toggleEditMode button').as('switchButton');
     // goto edit-mode
     cy.get('@switchButton').click();
-    cy.findByTestId('LUPage')
-      .get('.monaco-editor')
-      .should('exist');
+    cy.findByTestId('LUPage').get('.monaco-editor').should('exist');
 
     // back to all table view
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('All').click();
     });
-    cy.findByTestId('LUPage')
-      .findByTestId('table-view')
-      .should('exist');
+    cy.findByTestId('LUPage').findByTestId('table-view').should('exist');
   });
 });

Composer/cypress/integration/NotificationPage.spec.ts

@@ -3,25 +3,20 @@
 
 context('Notification Page', () => {
   beforeEach(() => {
-    cy.visit('/home');
     cy.createBot('ToDoBotWithLuisSample');
-    cy.visitPage('Notifications');
   });
 
   it('can show lg syntax error ', () => {
     cy.visitPage('Bot Responses');
 
     cy.get('.toggleEditMode button').as('switchButton');
     cy.get('@switchButton').click();
-    cy.get('textarea').type('#');
+    cy.get('textarea').type('#', { delay: 200 });
 
     cy.findByTestId('LeftNav-CommandBarButtonNotifications').click();
 
     cy.findByTestId('notifications-table-view').within(() => {
-      cy.findAllByText('common.en-us.lg')
-        .should('exist')
-        .first()
-        .click();
+      cy.findAllByText('common.en-us.lg').should('exist').first().click();
     });
 
     cy.findAllByText('Bot Responses').should('exist');
@@ -35,15 +30,12 @@ context('Notification Page', () => {
     });
 
     cy.get('.toggleEditMode button').click();
-    cy.get('textarea').type('t');
+    cy.get('textarea').type('t', { delay: 200 });
 
     cy.findByTestId('LeftNav-CommandBarButtonNotifications').click();
 
     cy.findByTestId('notifications-table-view').within(() => {
-      cy.findAllByText('__testtodobotwithluissample.en-us.lu')
-        .should('exist')
-        .first()
-        .dblclick();
+      cy.findAllByText('__testtodobotwithluissample.en-us.lu').should('exist').first().dblclick();
     });
 
     cy.findAllByText('__TestToDoBotWithLuisSample').should('exist');
@@ -62,22 +54,15 @@ context('Notification Page', () => {
 
     cy.withinEditor('PropertyEditor', () => {
       cy.findByText('Condition').should('exist');
-      cy.findByTestId('expression-type-dropdown-Condition')
-        .focus()
-        .should('contain.text', 'expression');
-      cy.get('#root\\.condition')
-        .click()
-        .type('foo = bar');
+      cy.findByTestId('expression-type-dropdown-Condition').focus().should('contain.text', 'expression');
+      cy.get('#root\\.condition').click().type('foo = bar', { delay: 200 });
       cy.findByTestId('FieldErrorMessage').should('exist');
     });
 
     cy.findByTestId('LeftNav-CommandBarButtonNotifications').click();
 
     cy.findByTestId('notifications-table-view').within(() => {
-      cy.findAllByText('__testtodobotwithluissample.dialog')
-        .should('exist')
-        .first()
-        .dblclick();
+      cy.findAllByText('__testtodobotwithluissample.dialog').should('exist').first().dblclick();
     });
 
     cy.findAllByText('WelcomeUser').should('exist');

Composer/cypress/integration/RemoveDialog.spec.ts

@@ -10,10 +10,7 @@ context('RemoveDialog', () => {
   it('can remove dialog', () => {
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByTestId('DialogTreeItemtriggers[4]').within(() => {
-        cy.findByTestId('dialogMoreButton')
-          .first()
-          .invoke('attr', 'style', 'visibility: visible')
-          .click();
+        cy.findByTestId('dialogMoreButton').first().invoke('attr', 'style', 'visibility: visible').click();
       });
     });
 

Composer/cypress/support/commands.ts

@@ -13,7 +13,7 @@ Cypress.Commands.add('createBot', (botId: string, botName?: string) => {
     templateId: botId,
   };
 
-  cy.request('post', '/api/projects', params).then(res => {
+  cy.request('post', '/api/projects', params).then((res) => {
     const { id: projectId } = res.body;
     cy.visit(`/bot/${projectId}/dialogs/${name.toLowerCase()}`);
   });
@@ -23,21 +23,19 @@ Cypress.Commands.add('withinEditor', (editorName, cb) => {
   cy.findByTestId(editorName).within(cb);
 });
 
-Cypress.Commands.add('visitPage', page => {
+Cypress.Commands.add('visitPage', (page) => {
   cy.findByTestId(`LeftNav-CommandBarButton${page}`).click();
   cy.findByTestId('ActiveLeftNavItem').should('contain', page);
 });
 
 Cypress.Commands.add('enterTextAndSubmit', (textElement: string, text: string, submitBtn?: string) => {
-  cy.findByTestId(textElement)
-    .clear()
-    .type(text);
+  cy.findByTestId(textElement).clear().type(text);
   if (submitBtn) {
     cy.findByTestId(submitBtn).click();
   }
 });
 
-Cypress.on('uncaught:exception', err => {
+Cypress.on('uncaught:exception', (err) => {
   // eslint-disable-next-line no-console
   console.log('uncaught exception', err);
   return false;