chore: do not render extensions in iframe

Composer/cypress/integration/NotificationPage.spec.ts

@@ -60,7 +60,7 @@ context('Notification Page', () => {
       cy.findByText('WelcomeUser').should('exist');
     });
 
-    cy.withinEditor('FormEditor', () => {
+    cy.withinEditor('PropertyEditor', () => {
       cy.findByText('Condition').should('exist');
       cy.findByTestId('expression-type-dropdown-Condition')
         .focus()

Composer/cypress/integration/ToDoBot.spec.ts

@@ -13,7 +13,7 @@ context('ToDo Bot', () => {
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('__TestTodoSample.Main').click();
     });
-    cy.withinEditor('FormEditor', () => {
+    cy.withinEditor('PropertyEditor', () => {
       cy.findByDisplayValue('__TestTodoSample').should('exist');
     });
   });
@@ -23,7 +23,7 @@ context('ToDo Bot', () => {
       cy.findByText('addtodo').click();
     });
 
-    cy.withinEditor('FormEditor', () => {
+    cy.withinEditor('PropertyEditor', () => {
       cy.findByDisplayValue('addtodo').should('exist');
     });
   });
@@ -33,7 +33,7 @@ context('ToDo Bot', () => {
       cy.findByText('cleartodos').click();
     });
 
-    cy.withinEditor('FormEditor', () => {
+    cy.withinEditor('PropertyEditor', () => {
       cy.findByDisplayValue('cleartodos').should('exist');
     });
   });
@@ -43,7 +43,7 @@ context('ToDo Bot', () => {
       cy.findByText('deletetodo').click();
     });
 
-    cy.withinEditor('FormEditor', () => {
+    cy.withinEditor('PropertyEditor', () => {
       cy.findByDisplayValue('deletetodo').should('exist');
     });
   });
@@ -53,7 +53,7 @@ context('ToDo Bot', () => {
       cy.findByText('showtodos').click();
     });
 
-    cy.withinEditor('FormEditor', () => {
+    cy.withinEditor('PropertyEditor', () => {
       cy.findByDisplayValue('showtodos').should('exist');
     });
   });

Composer/cypress/support/commands.ts

@@ -12,21 +12,22 @@ Cypress.Commands.add('createBot', (bobotId: string, botName?: string) => {
   cy.findByTestId(`${bobotId}`).click();
   cy.findByTestId('NextStepButton').click();
   cy.findByTestId('NewDialogName').type(`{selectall}__Test${botName || bobotId}{enter}`);
+  // eslint-disable-next-line cypress/no-unnecessary-waiting
   cy.wait(1000);
 });
 
 Cypress.Commands.add('withinEditor', (editorName, cb) => {
-  cy.get(`iframe[name="${editorName}"]`).then(editor => {
-    cy.wrap<HTMLElement>(editor.contents().find('body') as JQuery<HTMLElement>).within(cb);
-  });
+  cy.findByTestId(editorName).within(cb);
 });
 
 Cypress.Commands.add('visitPage', page => {
   cy.findByTestId(`LeftNav-CommandBarButton${page}`).click();
+  // eslint-disable-next-line cypress/no-unnecessary-waiting
   cy.wait(3000);
 });
 
-Cypress.on('uncaught:exception', (err, runnable) => {
+Cypress.on('uncaught:exception', err => {
+  // eslint-disable-next-line no-console
   console.log('uncaught exception', err);
   return false;
 });

Composer/packages/client/__tests__/components/DialogWrapper/index.test.tsx

@@ -3,7 +3,8 @@
 
 import React from 'react';
 import { render } from 'react-testing-library';
-import { DialogWrapper } from '@src/components/DialogWrapper';
+
+import { DialogWrapper } from '../../../src/components/DialogWrapper';
 
 describe('<DialogWrapper />', () => {
   const props = {

Composer/packages/client/__tests__/jest.d.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { ActionTypes } from '@src/constants';
+import { ActionTypes } from '../src/constants';
 
 declare global {
   namespace jest {

Composer/packages/client/__tests__/store/actions/storage.test.ts

@@ -1,12 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import httpClient from '@src/utils/httpUtil';
-import { ActionTypes } from '@src/constants';
-import { fetchFolderItemsByPath } from '@src/store/action/storage';
-import { Store } from '@src/store/types';
+import httpClient from '../../../src/utils/httpUtil';
+import { ActionTypes } from '../../../src/constants';
+import { fetchFolderItemsByPath } from '../../../src/store/action/storage';
+import { Store } from '../../../src/store/types';
 
-jest.mock('@src/utils/httpUtil');
+jest.mock('../../../src/utils/httpUtil');
 
 const dispatch = jest.fn();
 

Composer/packages/client/config/paths.js

@@ -68,9 +68,7 @@ module.exports = {
   appBuild: resolveApp('../server/build/public'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  extensionContainerHtml: resolveApp('public/extensionContainer.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
-  extensionIndexJs: resolveModule(resolveApp, 'src/extension-container/index'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),

Composer/packages/client/config/webpack.config.js

@@ -120,7 +120,6 @@ module.exports = function(webpackEnv) {
         // initialization, it doesn't blow up the WebpackDevServer client, and
         // changing JS code would still trigger a refresh.
       ].filter(Boolean),
-      extension: paths.extensionIndexJs,
     },
     output: {
       // The build folder.
@@ -423,26 +422,6 @@ module.exports = function(webpackEnv) {
             : undefined
         )
       ),
-      // Generates an `extension.html` file with the <script> injected.
-      new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-            inject: true,
-            // only emit ejs in production because the dev server cannot render ejs templates
-            filename: isEnvProduction ? 'extensionContainer.ejs' : 'extensionContainer.html',
-            template: paths.extensionContainerHtml,
-            chunks: ['extension'],
-          },
-          isEnvProduction
-            ? {
-                minify: {
-                  removeComments: true,
-                },
-              }
-            : undefined
-        )
-      ),
       // Makes some environment variables available in index.html.
       // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
       // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

Composer/packages/client/jest.config.js

@@ -17,8 +17,6 @@ module.exports = {
     // use commonjs modules for test so they do not need to be compiled
     'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1',
     '@uifabric/fluent-theme/lib/(.*)$': '@uifabric/fluent-theme/lib-commonjs/$1',
-
-    '^@src/(.*)$': '<rootDir>/src/$1',
   },
   testPathIgnorePatterns: [
     '/node_modules/',

Composer/packages/client/src/App.tsx

@@ -20,11 +20,11 @@ import { CreationFlow } from './CreationFlow';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import { RequireAuth } from './components/RequireAuth';
 import { CreationFlowStatus } from './constants';
-import { LoadingSpinner } from './components/LoadingSpinner';
 
 initializeIcons(undefined, { disableWarnings: true });
 
 const Onboarding = React.lazy(() => import('./Onboarding'));
+
 // eslint-disable-next-line react/display-name
 const Content = forwardRef<HTMLDivElement>((props, ref) => <div css={content} {...props} ref={ref} />);
 
@@ -180,7 +180,7 @@ export const App: React.FC = () => {
             </RequireAuth>
           </ErrorBoundary>
         </div>
-        <Suspense fallback={<LoadingSpinner />}>{!state.onboarding.complete && <Onboarding />}</Suspense>
+        <Suspense fallback={<div />}>{!state.onboarding.complete && <Onboarding />}</Suspense>
       </div>
     </Fragment>
   );

Composer/packages/client/src/Onboarding/TeachingBubbles/styles.ts

@@ -42,6 +42,9 @@ export const teachingBubbleStyles: Partial<ITeachingBubbleStyles> = {
       ':hover': {
         background: '#f4f4f4',
       },
+      ':focus': {
+        background: '#f4f4f4',
+      },
     },
   },
 };

Composer/packages/client/src/Onboarding/WelcomeModal/Collapsed/index.js → Composer/packages/client/src/Onboarding/WelcomeModal/Collapsed/index.tsx

@@ -20,18 +20,20 @@ const CollapsedWelcomeModal = () => {
   return (
     <div css={content}>
       <div>{formatMessage('Welcome')}</div>
-      <IconButton
-        iconProps={{ iconName: 'FullScreen' }}
-        onClick={toggleMinimized}
-        styles={buttonStyles}
-        title="Expand"
-      />
-      <IconButton
-        iconProps={{ iconName: 'ChromeClose' }}
-        onClick={exit}
-        styles={{ ...buttonStyles, icon: { color: palette.white, fontSize: '12px' } }}
-        title="Close"
-      />
+      <div>
+        <IconButton
+          iconProps={{ iconName: 'FullScreen' }}
+          onClick={toggleMinimized}
+          styles={buttonStyles}
+          title="Expand"
+        />
+        <IconButton
+          iconProps={{ iconName: 'ChromeClose' }}
+          onClick={exit}
+          styles={{ ...buttonStyles, icon: { color: palette.white, fontSize: '12px' } }}
+          title="Close"
+        />
+      </div>
     </div>
   );
 };