chore: Moved styles inline for components in client package. (microso…

…ft#3598)

* Renamed components, hooks, Onboarding only

* Reverting changed from yar build

* Renamed components, hooks, Onboarding only

* Reverting changed from yar build

* Fixing lint issues

* test import fixes

* Have to rename to fix case of file name

* Fixing case with another commit.

* Renamed components, hooks, Onboarding only

* Renamed components, hooks, Onboarding only

* Fixing lint issues

* test import fixes

* Have to rename to fix case of file name

* Fixing case with another commit.

* Fixing imports

* Index file renames Part 2

* Inlined styles in ts

* Fixed test mocks

Composer/packages/client/__tests__/components/CreationFlow/CreateOptions/index.test.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { fireEvent } from '@bfc/test-utils';
 
 import { renderWithStore } from '../../../testUtils';
-import { CreateOptions } from '../../../../src/components/CreationFlow/CreateOptions/CreateOptions';
+import { CreateOptions } from '../../../../src/components/CreationFlow/CreateOptions';
 
 describe('<CreateOptions/>', () => {
   const handleDismissMock = jest.fn();

Composer/packages/client/__tests__/components/CreationFlow/DefineConversation/index.test.tsx

@@ -6,7 +6,7 @@ import { fireEvent } from '@bfc/test-utils';
 
 import { renderWithStore } from '../../../testUtils';
 import { StorageFolder } from '../../../../src/store/types';
-import DefineConversation from '../../../../src/components/CreationFlow/DefineConversation/DefineConversation';
+import DefineConversation from '../../../../src/components/CreationFlow/DefineConversation';
 
 describe('<DefineConversation/>', () => {
   const onCurrentPathUpdateMock = jest.fn();

Composer/packages/client/__tests__/components/CreationFlow/LocationBrowser/FileSelector.test.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { render, fireEvent } from '@bfc/test-utils';
 
 import { StorageFolder } from '../../../../src/store/types';
-import { FileSelector } from '../../../../src/components/CreationFlow/LocationBrowser/FileSelector';
+import { FileSelector } from '../../../../src/components/CreationFlow/FileSelector';
 
 describe('<FileSelector/>', () => {
   const onFileChosen = jest.fn();

Composer/packages/client/__tests__/components/CreationFlow/LocationBrowser/LocationSelectContent.test.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { fireEvent } from '@bfc/test-utils';
 
 import { StorageFolder } from '../../../../src/store/types';
-import { LocationSelectContent } from '../../../../src/components/CreationFlow/LocationBrowser/LocationSelectContent';
+import { LocationSelectContent } from '../../../../src/components/CreationFlow/LocationSelectContent';
 import { renderWithStore } from '../../../testUtils';
 import { CreationFlowStatus } from '../../../../src/constants';
 

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

@@ -7,15 +7,10 @@ import { createHistory, createMemorySource, LocationProvider } from '@reach/rout
 
 import { StoreContext } from '../../../src/store';
 import CreationFlow from '../../../src/components/CreationFlow/CreationFlow';
+import { DialogWrapper } from '../../../src/components/DialogWrapper';
 import { CreationFlowStatus } from '../../../src/constants';
 
-jest.mock('../../../src/components/DialogWrapper/DialogWrapper', () => {
-  return {
-    DialogWrapper: jest.fn((props) => {
-      return props.children;
-    }),
-  };
-});
+jest.mock('../../../src/components/DialogWrapper');
 
 describe('<CreationFlow/>', () => {
   let storeContext, saveTemplateMock, locationMock, createProjectMock;
@@ -36,6 +31,10 @@ describe('<CreationFlow/>', () => {
   }
 
   beforeEach(() => {
+    (DialogWrapper as jest.Mock).mockImplementation((props) => {
+      return props.children;
+    });
+
     saveTemplateMock = jest.fn();
     locationMock = {};
     storeContext = {

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

@@ -4,8 +4,7 @@
 import React from 'react';
 import { render } from '@bfc/test-utils';
 
-import { DialogWrapper } from '../../../src/components/DialogWrapper/DialogWrapper';
-import { DialogTypes } from '../../../src/components/DialogWrapper/styles';
+import { DialogWrapper, DialogTypes } from '../../../src/components/DialogWrapper';
 
 describe('<DialogWrapper />', () => {
   const props = {

Composer/packages/client/__tests__/components/appUpdater.test.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { AppUpdater } from '../../src/components/AppUpdater/AppUpdater';
+import { AppUpdater } from '../../src/components/AppUpdater';
 import { AppUpdaterStatus } from '../../src/constants';
 import { renderWithStore } from '../testUtils';
 

Composer/packages/client/__tests__/components/conversation.test.jsx

@@ -4,7 +4,7 @@
 import * as React from 'react';
 import { render } from '@bfc/test-utils';
 
-import '../../src/components/Conversation/Conversation';
+import '../../src/components/Conversation';
 
 describe('<Conversation/>', () => {
   it('should render the conversation', async () => {

Composer/packages/client/__tests__/components/errorBoundary.test.jsx

@@ -4,7 +4,7 @@
 import * as React from 'react';
 import { render } from '@bfc/test-utils';
 
-import { ErrorBoundary } from '../../src/components/ErrorBoundary/ErrorBoundary';
+import { ErrorBoundary } from '../../src/components/ErrorBoundary';
 
 const Store = React.createContext({
   actions: {

Composer/packages/client/__tests__/components/header.test.jsx

@@ -4,7 +4,7 @@
 import * as React from 'react';
 import { render } from '@bfc/test-utils';
 
-import { Header } from '../../src/components/Header/Header';
+import { Header } from '../../src/components/Header';
 
 describe('<Header />', () => {
   it('should render the header', () => {

Composer/packages/client/__tests__/components/home.test.jsx

@@ -6,7 +6,7 @@ import { fireEvent, render } from '@bfc/test-utils';
 
 import { RecentBotList } from '../../src/pages/home/RecentBotList';
 import { ExampleList } from '../../src/pages/home/ExampleList';
-import { ToolBar } from '../../src/components/ToolBar/ToolBar';
+import { ToolBar } from '../../src/components/ToolBar';
 describe('<Home/>', () => {
   it('should dispatch onSelectionChanged event when clicked on a link on <RecentBotList>', () => {
     const recentProjects = [

Composer/packages/client/__tests__/components/skill.test.tsx

@@ -5,14 +5,13 @@ import * as React from 'react';
 import { render, fireEvent, getByLabelText, getByTestId } from '@bfc/test-utils';
 import { Skill } from '@bfc/shared';
 
+import httpClient from '../../src//utils/httpUtil';
 import Skills from '../../src/pages/skills';
 import SkillList from '../../src/pages/skills/skill-list';
-import CreateSkillModal from '../../src/components/SkillForm/CreateSkillModal/CreateSkillModal';
+import CreateSkillModal from '../../src/components/CreateSkillModal';
 import { renderWithStore } from '../testUtils';
 
-jest.mock('../../src/components/SkillForm/CreateSkillModal/validateManifestUrl', () => ({
-  validateManifestUrl: () => {},
-}));
+jest.mock('../../src//utils/httpUtil');
 
 const items: Skill[] = [
   {
@@ -81,6 +80,9 @@ describe('<SkillForm />', () => {
     const onSubmit = jest.fn((formData) => {
       expect(formData.manifestUrl).toBe('http://AwesomeSkill');
     });
+
+    (httpClient.post as jest.Mock).mockResolvedValue(undefined);
+
     const onDismiss = jest.fn(() => {});
     const { getByLabelText, getByText } = render(
       <CreateSkillModal

Composer/packages/client/__tests__/components/toolbar.test.jsx

@@ -4,7 +4,7 @@
 import * as React from 'react';
 import { fireEvent, render } from '@bfc/test-utils';
 
-import { ToolBar } from '../../src/components/ToolBar/ToolBar';
+import { ToolBar } from '../../src/components/ToolBar';
 
 const toolbarItems = (onClick) => [
   {

Composer/packages/client/__tests__/navItem.test.jsx

@@ -4,7 +4,7 @@
 import * as React from 'react';
 import { render } from '@bfc/test-utils';
 
-import { NavItem } from '../src/components/NavItem/NavItem';
+import { NavItem } from '../src/components/NavItem';
 import { StoreProvider } from '../src/store';
 
 describe('<Header />', () => {

Composer/packages/client/__tests__/notFound.test.jsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { render } from '@bfc/test-utils';
 
 import { BASEPATH } from '../src/constants';
-import { NotFound } from '../src/components/NotFound/NotFound';
+import { NotFound } from '../src/components/NotFound';
 
 describe('<NotFound />', () => {
   it('should render a not found page', async () => {

Composer/packages/client/src/App.tsx

@@ -10,15 +10,15 @@ import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
 import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
 import formatMessage from 'format-message';
 
-import { Header } from './components/Header/Header';
-import { NavItem } from './components/NavItem/NavItem';
+import { Header } from './components/Header';
+import { NavItem } from './components/NavItem';
 import { BASEPATH } from './constants';
 import Routes from './router';
 import { StoreContext } from './store';
 import { main, sideBar, content, divider, globalNav, leftNavBottom, rightPanel, dividerTop } from './styles';
 import { resolveToBasePath } from './utils/fileUtil';
-import { ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';
-import { RequireAuth } from './components/RequireAuth/RequireAuth';
+import { ErrorBoundary } from './components/ErrorBoundary';
+import { RequireAuth } from './components/RequireAuth';
 import onboardingState from './utils/onboardingStorage';
 import { isElectron } from './utils/electronUtil';
 import { useLinks } from './utils/hooks';
@@ -27,7 +27,7 @@ initializeIcons(undefined, { disableWarnings: true });
 
 const Onboarding = React.lazy(() => import('./Onboarding/Onboarding'));
 const AppUpdater = React.lazy(() =>
-  import('./components/AppUpdater/AppUpdater').then((module) => ({ default: module.AppUpdater }))
+  import('./components/AppUpdater').then((module) => ({ default: module.AppUpdater }))
 );
 
 // eslint-disable-next-line react/display-name

Composer/packages/client/src/components/AppUpdater/AppUpdater.tsx → Composer/packages/client/src/components/AppUpdater.tsx

@@ -2,19 +2,57 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx, css } from '@emotion/core';
 import React, { useContext, useEffect, useMemo, useState, useCallback } from 'react';
 import { Dialog, DialogFooter, DialogType } from 'office-ui-fabric-react/lib/Dialog';
-import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
+import { DefaultButton, PrimaryButton, IButtonStyles } from 'office-ui-fabric-react/lib/Button';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { ProgressIndicator } from 'office-ui-fabric-react/lib/ProgressIndicator';
 import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
 import formatMessage from 'format-message';
+import { IDialogContentStyles, IDialogFooterStyles } from 'office-ui-fabric-react/lib/Dialog';
+import { NeutralColors, SharedColors } from '@uifabric/fluent-theme';
+
+import { AppUpdaterStatus } from '../constants';
+import { StoreContext } from '../store';
+
+// -------------------- Styles -------------------- //
+
+const optionIcon = (checked) => css`
+  vertical-align: text-bottom;
+  font-size: 18px;
+  margin-right: 10px;
+  color: ${checked ? SharedColors.cyanBlue10 : NeutralColors.black};
+`;
+
+const optionRoot = css`
+  width: 100%;
+  height: 100%;
+`;
+
+const dialogCopy = css`
+  margin: 0px;
+  color: #000;
+`;
+
+const dialogContent: Partial<IDialogContentStyles> = {
+  subText: { color: NeutralColors.black },
+  header: { paddingBottom: '6px' },
+};
 
-import { StoreContext } from '../../store';
-import { AppUpdaterStatus } from '../../constants';
+const dialogFooter: Partial<IDialogFooterStyles> = {
+  actions: {
+    marginTop: '46px',
+  },
+};
 
-import { dialogContent, dialogCopy, dialogFooter, optionRoot, optionIcon, updateAvailableDismissBtn } from './styles';
+const updateAvailableDismissBtn: Partial<IButtonStyles> = {
+  root: {
+    marginRight: '6px;',
+  },
+};
+
+// -------------------- Helpers -------------------- //
 
 const { ipcRenderer } = window;
 
@@ -33,6 +71,8 @@ const downloadOptions = {
   installAndUpdate: 'installAndUpdate',
 };
 
+// -------------------- AppUpdater -------------------- //
+
 export const AppUpdater: React.FC<{}> = () => {
   const {
     actions: { setAppUpdateError, setAppUpdateProgress, setAppUpdateShowing, setAppUpdateStatus },

Composer/packages/client/src/components/Conversation.jsx

@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+
+// -------------------- Styles -------------------- //
+
+const container = css`
+  width: 100%;
+  background-color: #ffffff;
+  height: 100%;
+  overflow: auto;
+  position: relative;
+`;
+
+const top = css`
+  width: 100%;
+  height: 10px;
+  background-color: #efeaf5;
+`;
+
+// -------------------- Conversation -------------------- //
+
+const Conversation = (props) => {
+  return (
+    <div css={container} {...props}>
+      {props.children}
+    </div>
+  );
+};
+
+export { Conversation };