Webpack, Electron update and vulnerability fixes (#499)

* Updated webpack and plugins for webpack 5
* Test and packaging updates
* Electron updates

.github/workflows/nodejs.yml

@@ -13,12 +13,12 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [10.x, 12.x]
+                node-version: [14.x]
-                os: [ubuntu-latest, windows-2016, macOS-latest]
+                os: [ubuntu-latest, windows-latest, macOS-latest]
 
         steps:
         - uses: actions/checkout@v2
-        - name: Use Node.jsn ${{ matrix.node-version }}
+        - name: Use Node ${{ matrix.node-version }}
           uses: actions/setup-node@v1
           with:
               node-version: ${{ matrix.node-version }}

package.json

@@ -5,7 +5,7 @@
   "main": "host/electron.js",
   "build": {
     "appId": "com.microsoft.azure.iot.pnp.ui",
-    "productName": "Azure IoT Explorer (preview)",
+    "productName": "Azure IoT Explorer Preview",
     "files": [
       "dist/**/*",
       "package.json",
@@ -76,6 +76,7 @@
     "body-parser": "1.18.3",
     "brace": "0.11.1",
     "cors": "2.8.5",
+    "crypto-browserify": "^3.12.0",
     "date-fns": "2.14.0",
     "electron-window-state": "5.0.3",
     "express": "4.16.4",
@@ -110,7 +111,7 @@
     "@types/i18next": "8.4.4",
     "@types/jest": "24.0.15",
     "@types/jest-plugin-context": "2.9.0",
-    "@types/node": "14.0.27",
+    "@types/node": "16.11.26",
     "@types/react": "16.9.35",
     "@types/react-dom": "16.9.8",
     "@types/react-jsonschema-form": "1.0.10",
@@ -118,45 +119,42 @@
     "@types/request": "2.48.1",
     "@types/semver": "6.0.2",
     "@types/uuid": "3.4.5",
-    "@types/webpack": "4.41.27",
-    "@types/webpack-dev-server": "3.11.3",
-    "@types/webpack-merge": "4.1.5",
-    "awesome-typescript-loader": "5.2.1",
     "concurrently": "5.3.0",
-    "copy-webpack-plugin": "6.1.0",
+    "copy-webpack-plugin": "6.4.1",
-    "css-loader": "1.0.0",
+    "css-loader": "6.7.1",
-    "electron": "11.5.0",
+    "css-minimizer-webpack-plugin": "3.4.1",
-    "electron-builder": "22.8.0",
+    "electron": "18.0.0",
+    "electron-builder": "22.14.13",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.1",
     "enzyme-to-json": "3.3.5",
     "file-loader": "2.0.0",
-    "html-webpack-plugin": "3.2.0",
+    "html-webpack-plugin": "5.5.0",
-    "is-svg": "^4.3.1",
+    "is-svg": "4.3.2",
     "jest": "26.4.2",
     "jest-plugin-context": "2.9.0",
     "jest-trx-results-processor": "0.0.7",
     "lodash": "4.17.21",
-    "mini-css-extract-plugin": "0.8.0",
+    "mini-css-extract-plugin": "2.6.0",
+    "node-polyfill-webpack-plugin": "1.1.4",
     "nodemon": "2.0.4",
-    "optimize-css-assets-webpack-plugin": "5.0.3",
     "sass": "1.35.2",
     "sass-loader": "7.2.0",
     "source-map-loader": "0.2.4",
-    "ssri": "^8.0.1",
+    "ssri": "8.0.1",
     "style-loader": "0.23.1",
-    "terser-webpack-plugin": "1.4.5",
     "ts-jest": "26.2.0",
+    "ts-loader": "9.2.8",
     "tslint": "5.11.0",
     "tslint-loader": "3.5.4",
     "tslint-origin-ordered-imports-rule": "1.1.2",
     "tslint-react": "3.6.0",
-    "typescript": "3.8.3",
+    "typescript": "4.6.3",
-    "webpack": "4.41.6",
+    "webpack": "5.70.0",
     "webpack-bundle-analyzer": "3.3.2",
-    "webpack-cli": "3.3.12",
+    "webpack-cli": "4.9.2",
-    "webpack-dev-server": "3.11.0",
+    "webpack-dev-server": "4.7.4",
-    "webpack-merge": "4.2.1",
+    "webpack-merge": "5.8.0",
     "webpack-shell-plugin": "0.5.0"
   },
   "jest": {

pipelines/build-and-test-template.yml

@@ -1,8 +1,5 @@
 steps:
-- task: NodeTool@0
+- template: '.\common\install-node.yml'
-  inputs:
-    versionSpec: '12.x'
-
 - script: 'npm install'
   displayName: Install dependencies
 - script: 'npm run build'

pipelines/common/install-node.yml

@@ -0,0 +1,4 @@
+steps:
+- task: NodeTool@0
+  inputs:
+    versionSpec: '14.x'

pipelines/release-pipeline.yml

@@ -5,14 +5,12 @@ parameters:
   type: string
   default: 'ubuntu-18.04'
   values:
-  - 'ubuntu-16.04'
   - 'ubuntu-18.04'
   - 'ubuntu-latest'
 - name: windowsImage
   type: string
-  default: 'vs2017-win2016'
+  default: 'windows-2019'
   values:
-  - 'vs2017-win2016'
   - 'windows-2019'
   - 'windows-latest'
 - name: macImage
@@ -52,9 +50,7 @@ stages:
         vmImage: ${{ parameters.windowsImage }}
 
       steps:
-      - task: NodeTool@0
+      - template: '.\common\install-node.yml'
-        inputs:
-          versionSpec: '12.x'
           
       - template: '.\build-windows.yml'
 
@@ -76,9 +72,7 @@ stages:
         vmImage: ${{ parameters.macImage }}
       
       steps:
-      - task: NodeTool@0
+      - template: '.\common\install-node.yml'
-        inputs:
-          versionSpec: '12.x'
           
       - template: '.\build-mac.yml'
 
@@ -99,22 +93,20 @@ stages:
           vmImage: ${{ parameters.linuxImage }}
 
       steps:
-        - task: NodeTool@0
+      - template: '.\common\install-node.yml'
-          inputs:
-            versionSpec: '12.x'
           
-        - template: '.\build-linux.yml'
+      - template: '.\build-linux.yml'
 
-        - task: CopyFiles@2
+      - task: CopyFiles@2
-          displayName: 'ArtifactIgnore'
+        displayName: 'ArtifactIgnore'
-          inputs:
+        inputs:
-            SourceFolder: '$(Build.SourcesDirectory)/'
+          SourceFolder: '$(Build.SourcesDirectory)/'
-            Contents: '.artifactignore'
+          Contents: '.artifactignore'
-            TargetFolder: '$(Build.SourcesDirectory)/dist/'
+          TargetFolder: '$(Build.SourcesDirectory)/dist/'
 
-        - publish: $(Build.SourcesDirectory)/dist/
+      - publish: $(Build.SourcesDirectory)/dist/
-          displayName: 'Staging artifact for signing'
+        displayName: 'Staging artifact for signing'
-          artifact: Linux
+        artifact: Linux
 
   - stage: 'codeSign'
     displayName: 'CodeSign and Release'

public/electron.ts

@@ -98,7 +98,6 @@ class Main {
             width: mainWindowState.width,
             webPreferences: { // tslint:disable-line:object-literal-sort-keys
                 contextIsolation: true, // protect against prototype pollution
-                enableRemoteModule: false, // turn off remote
                 nodeIntegration: false,
                 preload: __dirname + '/contextBridge.js' // use a preload script
             },

src/app/api/services/devicesService.spec.ts

@@ -20,7 +20,6 @@ const headers = new Headers({
     'Content-Type': 'application/json'
 });
 // tslint:disable
-const emptyPromise = new Promise(() => {});
 const twin: Twin = {
     deviceId,
     deviceEtag: '',
@@ -63,7 +62,7 @@ describe('deviceTwinService', () => {
 
     context('fetchDeviceTwin', () => {
         it ('returns if deviceId is not specified', () => {
-            expect(DevicesService.fetchDeviceTwin({deviceId: undefined})).toEqual(emptyPromise);
+            expect(DevicesService.fetchDeviceTwin({deviceId: undefined})).resolves.toBe(undefined);
         });
 
         it('calls fetch with specified parameters and returns deviceTwin when response is 200', async () => {
@@ -172,7 +171,7 @@ describe('deviceTwinService', () => {
             responseTimeoutInSeconds : 10,
         };
         it ('returns if deviceId is not specified', () => {
-            expect(DevicesService.invokeDirectMethod(parameters)).toEqual(emptyPromise);
+            expect(DevicesService.invokeDirectMethod(parameters)).resolves.toBe(undefined);
         });
 
         it('calls fetch with specified parameters and invokes invokeDirectMethod when response is 200', async () => {
@@ -264,7 +263,7 @@ describe('deviceTwinService', () => {
             deviceIdentity: undefined
         };
         it ('returns if deviceIdentity is not specified', () => {
-            expect(DevicesService.addDevice(parameters)).toEqual(emptyPromise);
+            expect(DevicesService.addDevice(parameters)).resolves.toBe(undefined);
         });
 
         it('calls fetch with specified parameters and invokes addDevice when response is 200', async () => {
@@ -327,7 +326,7 @@ describe('deviceTwinService', () => {
             deviceIdentity: undefined
         };
         it ('returns if deviceIdentity is not specified', () => {
-            expect(DevicesService.updateDevice(parameters)).toEqual(emptyPromise);
+            expect(DevicesService.updateDevice(parameters)).resolves.toBe(undefined);
         });
 
         it('calls fetch with specified parameters and invokes updateDevice when response is 200', async () => {
@@ -390,7 +389,7 @@ describe('deviceTwinService', () => {
             deviceId: undefined
         };
         it ('returns if deviceId is not specified', () => {
-            expect(DevicesService.fetchDevice(parameters)).toEqual(emptyPromise);
+            expect(DevicesService.fetchDevice(parameters)).resolves.toBe(undefined);
         });
 
         it('calls fetch with specified parameters and invokes fetchDevice when response is 200', async () => {
@@ -516,7 +515,7 @@ describe('deviceTwinService', () => {
             deviceIds: undefined
         };
         it ('returns if deviceId is not specified', () => {
-            expect(DevicesService.deleteDevices(parameters)).toEqual(emptyPromise);
+            expect(DevicesService.deleteDevices(parameters)).resolves.toBe(undefined);
         });
 
         it('calls fetch with specified parameters and invokes deleteDevices when response is 200', async () => {

src/app/api/services/moduleService.spec.ts

@@ -320,7 +320,7 @@ describe('moduleService', () => {
             responseTimeoutInSeconds : 10,
         };
         it ('returns if deviceId is not specified', () => {
-            expect(ModuleService.invokeModuleDirectMethod(parameters)).toEqual(new Promise(() => {}));
+            expect(ModuleService.invokeModuleDirectMethod(parameters)).resolves.toBe(undefined);
         });
 
         it('calls fetch with specified parameters and invokes invokeDirectMethod when response is 200', async () => {

src/app/api/shared/utils.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { createHmac } from 'crypto';
+import { Buffer } from 'buffer';
 import { IoTHubConnectionSettings } from '../services/devicesService';
 import { LIST_IOT_DEVICES, SAS_EXPIRES_MINUTES } from '../../constants/devices';
 import { DeviceQuery, QueryClause, ParameterType, OperationType } from '../models/deviceQuery';
@@ -39,11 +40,9 @@ export const generateSasToken = (parameters: GenerateSasTokenParameters) => {
     let token = null;
     if (!!parameters.resourceUri && !!parameters.key) {
         const encodedUri = encodeURIComponent(parameters.resourceUri);
-
         const expires = Math.ceil((Date.now() / MILLISECONDS_PER_SECOND) + (parameters.expiration || SAS_EXPIRES_MINUTES) * SECONDS_PER_MINUTE);
         const toSign = encodedUri + '\n' + expires;
-
+        const hmac = createHmac('sha256', Buffer.from(parameters.key, 'base64'));
-        const hmac = createHmac('sha256', new Buffer(parameters.key, 'base64'));
         hmac.update(toSign);
         const base64UriEncoded = encodeURIComponent(hmac.digest('base64'));
 

src/app/connectionStrings/components/__snapshots__/connectionString.spec.tsx.snap

@@ -46,13 +46,13 @@ exports[`connectionString matches snapshot 1`] = `
   <div
     className="properties"
   >
-    <Component
+    <ConnectionStringProperties
       connectionString="HostName=test.azure-devices-int.net;SharedAccessKeyName=iothubowner;SharedAccessKey=key"
       hostName="test.azure-devices-int.net"
       sharedAccessKey="key"
       sharedAccessKeyName="iothubowner"
     />
-    <Component
+    <MaskedCopyableTextField
       allowMask={true}
       ariaLabel="connectionStrings.properties.connectionString.ariaLabel"
       label="connectionStrings.properties.connectionString.label"
@@ -75,7 +75,7 @@ exports[`connectionString matches snapshot 1`] = `
       connectionStrings.visitConnectionCommand.label
     </CustomizedActionButton>
   </div>
-  <Component
+  <ConnectionStringDelete
     connectionString="HostName=test.azure-devices-int.net;SharedAccessKeyName=iothubowner;SharedAccessKey=key"
     hidden={true}
     onDeleteCancel={[Function]}

src/app/connectionStrings/components/__snapshots__/connectionStringProperties.spec.tsx.snap

@@ -2,21 +2,21 @@
 
 exports[`ConnectionSTringProperties matches snapshot 1`] = `
 <Fragment>
-  <Component
+  <MaskedCopyableTextField
     allowMask={false}
     ariaLabel="connectionStrings.properties.hostName.ariaLabel"
     label="connectionStrings.properties.hostName.label"
     readOnly={true}
     value="hostName"
   />
-  <Component
+  <MaskedCopyableTextField
     allowMask={false}
     ariaLabel="connectionStrings.properties.sharedAccessPolicyName.ariaLabel"
     label="connectionStrings.properties.sharedAccessPolicyName.label"
     readOnly={true}
     value="sharedAccessKeyName"
   />
-  <Component
+  <MaskedCopyableTextField
     allowMask={true}
     ariaLabel="connectionStrings.properties.sharedAccessPolicyKey.ariaLabel"
     label="connectionStrings.properties.sharedAccessPolicyKey.label"

src/app/connectionStrings/components/__snapshots__/connectionStringsView.spec.tsx.snap

@@ -30,7 +30,7 @@ exports[`ConnectionStringsView matches snapshot when connection strings present
     <div
       className="connection-strings"
     >
-      <Component
+      <ConnectionString
         connectionStringWithExpiry={
           Object {
             "connectionString": "connectionString1",
@@ -77,7 +77,7 @@ exports[`ConnectionStringsView matches snapshot when no connection strings 1`] =
     <div
       className="connection-strings"
     />
-    <Component />
+    <ConnectionStringsEmpty />
   </div>
 </div>
 `;

src/app/connectionStrings/sagas/getConnectionStringsSaga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { NotificationType } from '../../api/models/notification';
 import { raiseNotificationToast } from '../../notifications/components/notificationToast';
 import { CONNECTION_STRING_NAME_LIST } from '../../constants/browserStorage';
@@ -11,13 +12,13 @@ import { ResourceKeys } from '../../../localization/resourceKeys';
 import { ConnectionStringWithExpiry } from '../state';
 import { setConnectionStrings } from './setConnectionStringsSaga';
 
-export function* getConnectionStringsSaga() {
+export function* getConnectionStringsSaga(): SagaIterator {
     const connectionStrings = yield call(getConnectionStrings);
     yield put(getConnectionStringsAction.done({result: connectionStrings}));
 }
 
 // tslint:disable-next-line: cyclomatic-complexity
-export function* getConnectionStrings() {
+export function* getConnectionStrings(): SagaIterator {
     const connectionStrings = localStorage.getItem(CONNECTION_STRING_NAME_LIST);
     if (connectionStrings) {
         try {

src/app/connectionStrings/sagas/upsertConnectionStringSaga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { CONNECTION_STRING_LIST_MAX_LENGTH } from '../../constants/browserStorage';
 import { upsertConnectionStringAction } from '../actions';
@@ -10,7 +11,7 @@ import { setConnectionStrings } from './setConnectionStringsSaga';
 import { getConnectionStrings } from './getConnectionStringsSaga';
 import { ConnectionStringWithExpiry } from '../state';
 
-export function* upsertConnectionStringSaga(action: Action<ConnectionStringWithExpiry>) {
+export function* upsertConnectionStringSaga(action: Action<ConnectionStringWithExpiry>): SagaIterator {
     const savedStrings: ConnectionStringWithExpiry[] = yield call(getConnectionStrings);
     let updatedValues: ConnectionStringWithExpiry[];
 

src/app/devices/addDevice/components/__snapshots__/addDevice.spec.tsx.snap

@@ -41,7 +41,7 @@ exports[`addDevice matches snapshot 1`] = `
     <div
       className="form"
     >
-      <Component
+      <MaskedCopyableTextField
         allowMask={false}
         ariaLabel="deviceIdentity.deviceID"
         error=""
@@ -88,11 +88,11 @@ exports[`addDevice matches snapshot 1`] = `
       <div
         className="connectivity"
       >
-        <Component
+        <LabelWithTooltip
           tooltipText="deviceIdentity.hubConnectivity.tooltip"
         >
           deviceIdentity.hubConnectivity.label
-        </Component>
+        </LabelWithTooltip>
         <StyledToggleBase
           ariaLabel="deviceIdentity.hubConnectivity.label"
           checked={true}

src/app/devices/addDevice/saga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put, takeEvery } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { NotificationType } from '../../api/models/notification';
 import { ResourceKeys } from '../../../localization/resourceKeys';
@@ -11,7 +12,7 @@ import { addDevice } from '../../api/services/devicesService';
 import { DeviceIdentity } from '../../api/models/deviceIdentity';
 import { raiseNotificationToast } from '../../notifications/components/notificationToast';
 
-export function* addDeviceSagaWorker(action: Action<DeviceIdentity>) {
+export function* addDeviceSagaWorker(action: Action<DeviceIdentity>): SagaIterator {
     try {
         const parameters = {
             deviceIdentity: action.payload

src/app/devices/cloudToDeviceMessage/components/__snapshots__/cloudToDeviceMessage.spec.tsx.snap

@@ -19,18 +19,18 @@ exports[`cloudToDeviceMessage matches snapshot 1`] = `
       ]
     }
   />
-  <Component
+  <HeaderView
     headerText="cloudToDeviceMessage.headerText"
     tooltip="cloudToDeviceMessage.tooltip"
   />
   <div
     className="device-detail"
   >
-    <Component
+    <LabelWithTooltip
       tooltipText="cloudToDeviceMessage.bodyTooltip"
     >
       cloudToDeviceMessage.body
-    </Component>
+    </LabelWithTooltip>
     <StyledTextFieldBase
       className="cloud-to-device-message-text-field"
       multiline={true}
@@ -49,7 +49,7 @@ exports[`cloudToDeviceMessage matches snapshot 1`] = `
         }
       }
     />
-    <Component
+    <CollapsibleSection
       expanded={true}
       label="cloudToDeviceMessage.properties.label"
       tooltipText="cloudToDeviceMessage.properties.tooltip"
@@ -174,6 +174,7 @@ exports[`cloudToDeviceMessage matches snapshot 1`] = `
             "_isModal": false,
             "_items": Array [],
             "_keyToIndexMap": Object {},
+            "_onItemsChanged": undefined,
             "_onSelectionChanged": [Function],
             "_selectedItems": null,
             "_unselectableCount": 0,
@@ -226,6 +227,7 @@ exports[`cloudToDeviceMessage matches snapshot 1`] = `
               "_isModal": false,
               "_items": Array [],
               "_keyToIndexMap": Object {},
+              "_onItemsChanged": undefined,
               "_onSelectionChanged": [Function],
               "_selectedItems": null,
               "_unselectableCount": 0,
@@ -236,7 +238,7 @@ exports[`cloudToDeviceMessage matches snapshot 1`] = `
           }
         />
       </StyledMarqueeSelectionBase>
-    </Component>
+    </CollapsibleSection>
   </div>
 </Fragment>
 `;

src/app/devices/cloudToDeviceMessage/saga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put, takeEvery } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { cloudToDeviceMessageAction, CloudToDeviceMessageActionParameters } from './actions';
 import { cloudToDeviceMessage } from '../../api/services/devicesService';
@@ -11,7 +12,7 @@ import { NotificationType } from '../../api/models/notification';
 import { ResourceKeys } from '../../../localization/resourceKeys';
 import { CloudToDeviceMessageParameters } from '../../api/parameters/deviceParameters';
 
-export function* cloudToDeviceMessageSagaWorker(action: Action<CloudToDeviceMessageActionParameters>) {
+export function* cloudToDeviceMessageSagaWorker(action: Action<CloudToDeviceMessageActionParameters>): SagaIterator {
     const toastId: number = Math.random();
 
     try {
@@ -63,6 +64,6 @@ export function* cloudToDeviceMessageSagaWorker(action: Action<CloudToDeviceMess
     }
 }
 
-export function* cloudToDeviceMessageSaga() {
+export function* cloudToDeviceMessageSaga(): SagaIterator {
     yield takeEvery(cloudToDeviceMessageAction.started.type, cloudToDeviceMessageSagaWorker);
 }

src/app/devices/deviceEvents/components/__snapshots__/deviceEvents.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`deviceEvents deviceEvents in non-pnp context matches snapshot 1`] = `
   className="device-events"
   key="device-events"
 >
-  <Component
+  <Commands
     dispatch={[MockFunction]}
     fetchData={[Function]}
     monitoringData={false}
@@ -19,20 +19,20 @@ exports[`deviceEvents deviceEvents in non-pnp context matches snapshot 1`] = `
     startDisabled={false}
     synchronizationStatus={1}
   />
-  <Component
+  <HeaderView
     headerText="deviceEvents.headerText"
     tooltip="deviceEvents.tooltip"
   />
   <div
     className="horizontal-item"
   >
-    <Component
+    <ConsumerGroup
       consumerGroup="$Default"
       monitoringData={false}
       setConsumerGroup={[Function]}
     />
   </div>
-  <Component
+  <StartTime
     monitoringData={false}
     setHasError={[Function]}
     setSpecifyStartTime={[Function]}
@@ -42,7 +42,7 @@ exports[`deviceEvents deviceEvents in non-pnp context matches snapshot 1`] = `
   <div
     className="horizontal-item"
   >
-    <Component
+    <CustomEventHub
       monitoringData={false}
       setCustomEventHubConnectionString={[Function]}
       setHasError={[Function]}
@@ -50,7 +50,7 @@ exports[`deviceEvents deviceEvents in non-pnp context matches snapshot 1`] = `
       useBuiltInEventHub={false}
     />
   </div>
-  <Component
+  <DeviceSimulationPanel
     onToggleSimulationPanel={[Function]}
     showSimulationPanel={false}
   />
@@ -90,7 +90,7 @@ exports[`deviceEvents deviceEvents in pnp context matches snapshot while interfa
   className="device-events"
   key="device-events"
 >
-  <Component
+  <Commands
     dispatch={[Function]}
     fetchData={[Function]}
     monitoringData={false}
@@ -104,20 +104,20 @@ exports[`deviceEvents deviceEvents in pnp context matches snapshot while interfa
     startDisabled={false}
     synchronizationStatus={2}
   />
-  <Component
+  <HeaderView
     headerText="deviceEvents.headerText"
     tooltip="deviceEvents.tooltip"
   />
   <div
     className="horizontal-item"
   >
-    <Component
+    <ConsumerGroup
       consumerGroup="$Default"
       monitoringData={false}
       setConsumerGroup={[Function]}
     />
   </div>
-  <Component
+  <StartTime
     monitoringData={false}
     setHasError={[Function]}
     setSpecifyStartTime={[Function]}
@@ -127,7 +127,7 @@ exports[`deviceEvents deviceEvents in pnp context matches snapshot while interfa
   <div
     className="horizontal-item"
   >
-    <Component
+    <CustomEventHub
       monitoringData={false}
       setCustomEventHubConnectionString={[Function]}
       setHasError={[Function]}
@@ -135,7 +135,7 @@ exports[`deviceEvents deviceEvents in pnp context matches snapshot while interfa
       useBuiltInEventHub={false}
     />
   </div>
-  <Component
+  <DeviceSimulationPanel
     onToggleSimulationPanel={[Function]}
     showSimulationPanel={false}
   />
@@ -154,7 +154,7 @@ exports[`deviceEvents deviceEvents in pnp context matches snapshot while interfa
   className="device-events"
   key="device-events"
 >
-  <Component
+  <Commands
     dispatch={[Function]}
     fetchData={[Function]}
     monitoringData={false}
@@ -168,20 +168,20 @@ exports[`deviceEvents deviceEvents in pnp context matches snapshot while interfa
     startDisabled={false}
     synchronizationStatus={2}
   />
-  <Component
+  <HeaderView
     headerText="deviceEvents.headerText"
     tooltip="deviceEvents.tooltip"
   />
   <div
     className="horizontal-item"
   >
-    <Component
+    <ConsumerGroup
       consumerGroup="$Default"
       monitoringData={false}
       setConsumerGroup={[Function]}
     />
   </div>
-  <Component
+  <StartTime
     monitoringData={false}
     setHasError={[Function]}
     setSpecifyStartTime={[Function]}
@@ -191,7 +191,7 @@ exports[`deviceEvents deviceEvents in pnp context matches snapshot while interfa
   <div
     className="horizontal-item"
   >
-    <Component
+    <CustomEventHub
       monitoringData={false}
       setCustomEventHubConnectionString={[Function]}
       setHasError={[Function]}
@@ -199,7 +199,7 @@ exports[`deviceEvents deviceEvents in pnp context matches snapshot while interfa
       useBuiltInEventHub={false}
     />
   </div>
-  <Component
+  <DeviceSimulationPanel
     onToggleSimulationPanel={[Function]}
     showSimulationPanel={false}
   />

src/app/devices/deviceEvents/components/__snapshots__/deviceSimulationPanel.spec.tsx.snap

@@ -22,7 +22,7 @@ exports[`deviceSimulationPanel matches snapshot  1`] = `
   <StyledLabelBase>
     deviceEvents.simulation.cloudShell.textDescription
   </StyledLabelBase>
-  <Component
+  <CollapsibleSection
     expanded={true}
     label="deviceEvents.simulation.prerequisite.label"
     tooltipText="deviceEvents.simulation.prerequisite.tooltiop"
@@ -30,8 +30,8 @@ exports[`deviceSimulationPanel matches snapshot  1`] = `
     <span>
       deviceEvents.simulation.prerequisite.instruction
     </span>
-  </Component>
+  </CollapsibleSection>
-  <Component
+  <CollapsibleSection
     expanded={true}
     label="deviceEvents.simulation.basic.label"
     tooltipText="deviceEvents.simulation.basic.tooltiop"
@@ -39,15 +39,15 @@ exports[`deviceSimulationPanel matches snapshot  1`] = `
     <span>
       deviceEvents.simulation.basic.instruction
     </span>
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="deviceEvents.simulation.basic.copyLabel"
       label="deviceEvents.simulation.basic.copyLabel"
       readOnly={true}
       value="az iot device simulate --device-id device1 --login \\"\\""
     />
-  </Component>
+  </CollapsibleSection>
-  <Component
+  <CollapsibleSection
     expanded={false}
     label="deviceEvents.simulation.advanced.label"
     tooltipText="deviceEvents.simulation.advanced.tooltiop"
@@ -55,11 +55,11 @@ exports[`deviceSimulationPanel matches snapshot  1`] = `
     <span>
       deviceEvents.simulation.advanced.instruction
     </span>
-    <Component
+    <LabelWithTooltip
       tooltipText="deviceEvents.simulation.advanced.body.tooltip"
     >
       deviceEvents.simulation.advanced.body.label
-    </Component>
+    </LabelWithTooltip>
     <StyledTextFieldBase
       multiline={true}
       onChange={[Function]}
@@ -103,6 +103,7 @@ exports[`deviceSimulationPanel matches snapshot  1`] = `
           "_isModal": false,
           "_items": Array [],
           "_keyToIndexMap": Object {},
+          "_onItemsChanged": undefined,
           "_onSelectionChanged": [Function],
           "_selectedItems": null,
           "_unselectableCount": 0,
@@ -154,6 +155,7 @@ exports[`deviceSimulationPanel matches snapshot  1`] = `
             "_isModal": false,
             "_items": Array [],
             "_keyToIndexMap": Object {},
+            "_onItemsChanged": undefined,
             "_onSelectionChanged": [Function],
             "_selectedItems": null,
             "_unselectableCount": 0,
@@ -164,13 +166,13 @@ exports[`deviceSimulationPanel matches snapshot  1`] = `
         }
       />
     </StyledMarqueeSelectionBase>
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="deviceEvents.simulation.advanced.copyLabel"
       label="deviceEvents.simulation.advanced.copyLabel"
       readOnly={true}
       value="az iot device simulate --device-id device1 --login \\"\\""
     />
-  </Component>
+  </CollapsibleSection>
 </StyledPanelBase>
 `;

src/app/devices/deviceEvents/components/__snapshots__/startTime.spec.tsx.snap

@@ -11,12 +11,12 @@ exports[`startTime matches snapshot 1`] = `
     className="stack-first-column"
     disabled={true}
     label={
-      <Unknown
+      <LabelWithTooltip
         className="consumer-group-label"
         tooltipText="deviceEvents.startTime.tooltip"
       >
         deviceEvents.toggleSpecifyStartingTime.label
-      </Unknown>
+      </LabelWithTooltip>
     }
     offText="deviceEvents.toggleSpecifyStartingTime.off"
     onChange={[Function]}

src/app/devices/deviceEvents/saga.ts

@@ -2,7 +2,8 @@
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License
  **********************************************************/
-import { call, put, all, takeLatest, takeEvery } from 'redux-saga/effects';
+import { call, put, all, takeEvery } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { monitorEvents } from '../../api/services/devicesService';
 import { NotificationType } from '../../api/models/notification';
@@ -11,7 +12,7 @@ import { startEventsMonitoringAction } from './actions';
 import { raiseNotificationToast } from '../../notifications/components/notificationToast';
 import { MonitorEventsParameters } from '../../api/parameters/deviceParameters';
 
-export function* startEventsMonitoringSagaWorker(action: Action<MonitorEventsParameters>) {
+export function* startEventsMonitoringSagaWorker(action: Action<MonitorEventsParameters>): SagaIterator {
     try {
         const messages = yield call(monitorEvents, action.payload);
         yield put(startEventsMonitoringAction.done({params: action.payload, result: messages}));

src/app/devices/deviceIdentity/components/__snapshots__/deviceIdentity.spec.tsx.snap

@@ -2,17 +2,17 @@
 
 exports[`deviceIdentity snapshot matches snapshot 1`] = `
 <Fragment>
-  <Component
+  <DeviceIdentityCommandBar
     disableSave={true}
     handleSave={[Function]}
   />
-  <Component
+  <HeaderView
     headerText="deviceIdentity.headerText"
   />
   <div
     className="device-detail"
   >
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="deviceIdentity.deviceID"
       label="deviceIdentity.deviceID"
@@ -35,17 +35,17 @@ exports[`deviceIdentity snapshot matches snapshot 1`] = `
 
 exports[`deviceIdentity snapshot matches snapshot with CA auth type 1`] = `
 <Fragment>
-  <Component
+  <DeviceIdentityCommandBar
     disableSave={true}
     handleSave={[Function]}
   />
-  <Component
+  <HeaderView
     headerText="deviceIdentity.headerText"
   />
   <div
     className="device-detail"
   >
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="deviceIdentity.deviceID"
       label="deviceIdentity.deviceID"
@@ -68,17 +68,17 @@ exports[`deviceIdentity snapshot matches snapshot with CA auth type 1`] = `
 
 exports[`deviceIdentity snapshot matches snapshot with SelfSigned auth type 1`] = `
 <Fragment>
-  <Component
+  <DeviceIdentityCommandBar
     disableSave={true}
     handleSave={[Function]}
   />
-  <Component
+  <HeaderView
     headerText="deviceIdentity.headerText"
   />
   <div
     className="device-detail"
   >
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="deviceIdentity.deviceID"
       label="deviceIdentity.deviceID"
@@ -101,17 +101,17 @@ exports[`deviceIdentity snapshot matches snapshot with SelfSigned auth type 1`]
 
 exports[`deviceIdentity snapshot matches snapshot with SymmetricKey auth type 1`] = `
 <Fragment>
-  <Component
+  <DeviceIdentityCommandBar
     disableSave={true}
     handleSave={[Function]}
   />
-  <Component
+  <HeaderView
     headerText="deviceIdentity.headerText"
   />
   <div
     className="device-detail"
   >
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="deviceIdentity.deviceID"
       label="deviceIdentity.deviceID"
@@ -134,17 +134,17 @@ exports[`deviceIdentity snapshot matches snapshot with SymmetricKey auth type 1`
 
 exports[`deviceIdentity snapshot matches snapshot with Synchronization Status of updating 1`] = `
 <Fragment>
-  <Component
+  <DeviceIdentityCommandBar
     disableSave={true}
     handleSave={[Function]}
   />
-  <Component
+  <HeaderView
     headerText="deviceIdentity.headerText"
   />
   <div
     className="device-detail"
   >
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="deviceIdentity.deviceID"
       label="deviceIdentity.deviceID"
@@ -167,17 +167,17 @@ exports[`deviceIdentity snapshot matches snapshot with Synchronization Status of
 
 exports[`deviceIdentity snapshot matches snapshot with Synchronization Status of working 1`] = `
 <Fragment>
-  <Component
+  <DeviceIdentityCommandBar
     disableSave={true}
     handleSave={[Function]}
   />
-  <Component
+  <HeaderView
     headerText="deviceIdentity.headerText"
   />
   <div
     className="device-detail"
   >
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="deviceIdentity.deviceID"
       label="deviceIdentity.deviceID"
@@ -200,17 +200,17 @@ exports[`deviceIdentity snapshot matches snapshot with Synchronization Status of
 
 exports[`deviceIdentity snapshot matches snapshot with auth type of None 1`] = `
 <Fragment>
-  <Component
+  <DeviceIdentityCommandBar
     disableSave={true}
     handleSave={[Function]}
   />
-  <Component
+  <HeaderView
     headerText="deviceIdentity.headerText"
   />
   <div
     className="device-detail"
   >
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="deviceIdentity.deviceID"
       label="deviceIdentity.deviceID"
@@ -233,17 +233,17 @@ exports[`deviceIdentity snapshot matches snapshot with auth type of None 1`] = `
 
 exports[`deviceIdentity snapshot matches snapshot with identity wrapper 1`] = `
 <Fragment>
-  <Component
+  <DeviceIdentityCommandBar
     disableSave={true}
     handleSave={[Function]}
   />
-  <Component
+  <HeaderView
     headerText="deviceIdentity.headerText"
   />
   <div
     className="device-detail"
   >
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="deviceIdentity.deviceID"
       label="deviceIdentity.deviceID"

src/app/devices/deviceIdentity/components/__snapshots__/deviceModules.spec.tsx.snap

@@ -7,7 +7,7 @@ exports[`DeviceModules matches snapshot 1`] = `
     exact={true}
     path=""
   />
-  <Component
+  <BreadcrumbRoute
     breadcrumb={
       Object {
         "name": "breadcrumb.addModuleIdentity",
@@ -16,9 +16,9 @@ exports[`DeviceModules matches snapshot 1`] = `
     exact={true}
     path="/add"
   >
-    <Component />
+    <AddModuleIdentity />
-  </Component>
+  </BreadcrumbRoute>
-  <Component
+  <BreadcrumbRoute
     breadcrumb={
       Object {
         "name": "mod1",
@@ -28,9 +28,9 @@ exports[`DeviceModules matches snapshot 1`] = `
     exact={true}
     path="/moduleDetail"
   >
-    <Component />
+    <ModuleIdentityDetail />
-  </Component>
+  </BreadcrumbRoute>
-  <Component
+  <BreadcrumbRoute
     breadcrumb={
       Object {
         "name": "mod1",
@@ -40,9 +40,9 @@ exports[`DeviceModules matches snapshot 1`] = `
     exact={true}
     path="/moduleTwin"
   >
-    <Component />
+    <ModuleIdentityTwin />
-  </Component>
+  </BreadcrumbRoute>
-  <Component
+  <BreadcrumbRoute
     breadcrumb={
       Object {
         "name": "mod1",
@@ -52,9 +52,9 @@ exports[`DeviceModules matches snapshot 1`] = `
     exact={true}
     path="/moduleMethod"
   >
-    <Component />
+    <ModuleDirectMethod />
-  </Component>
+  </BreadcrumbRoute>
-  <Component
+  <BreadcrumbRoute
     breadcrumb={
       Object {
         "name": "mod1",
@@ -63,9 +63,9 @@ exports[`DeviceModules matches snapshot 1`] = `
     }
     path="/moduleEvents"
   >
-    <Component />
+    <DeviceEvents />
-  </Component>
+  </BreadcrumbRoute>
-  <Component
+  <BreadcrumbRoute
     breadcrumb={
       Object {
         "disableLink": true,
@@ -75,7 +75,7 @@ exports[`DeviceModules matches snapshot 1`] = `
     }
     path="/modulePnp"
   >
-    <Component />
+    <Pnp />
-  </Component>
+  </BreadcrumbRoute>
 </Fragment>
 `;

src/app/devices/deviceIdentity/components/__snapshots__/qrGenerationView.spec.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DeviceModules matches snapshot 1`] = `
-<Component
+<CollapsibleSection
   expanded={false}
   label="deviceIdentity.qrCode.label"
   tooltipText="deviceIdentity.qrCode.toolTip"
@@ -46,5 +46,5 @@ exports[`DeviceModules matches snapshot 1`] = `
       </div>
     </section>
   </div>
-</Component>
+</CollapsibleSection>
 `;

src/app/devices/deviceIdentity/saga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put, all, takeLatest, takeEvery } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { fetchDevice, updateDevice } from '../../api/services/devicesService';
 import { NotificationType } from '../../api/models/notification';
@@ -11,7 +12,7 @@ import { getDeviceIdentityAction, updateDeviceIdentityAction } from './actions';
 import { DeviceIdentity } from '../../api/models/deviceIdentity';
 import { raiseNotificationToast } from '../../notifications/components/notificationToast';
 
-export function* getDeviceIdentitySagaWorker(action: Action<string>) {
+export function* getDeviceIdentitySagaWorker(action: Action<string>): SagaIterator {
     try {
         const parameters = {
             deviceId: action.payload,
@@ -35,7 +36,7 @@ export function* getDeviceIdentitySagaWorker(action: Action<string>) {
     }
 }
 
-export function* updateDeviceIdentitySagaWorker(action: Action<DeviceIdentity>) {
+export function* updateDeviceIdentitySagaWorker(action: Action<DeviceIdentity>): SagaIterator {
     try {
         const parameters = {
             deviceIdentity: action.payload,
@@ -69,7 +70,7 @@ export function* updateDeviceIdentitySagaWorker(action: Action<DeviceIdentity>)
     }
 }
 
-export function* DeviceIdentitySaga() {
+export function* DeviceIdentitySaga(): SagaIterator {
     yield all([
         takeLatest(getDeviceIdentityAction.started.type, getDeviceIdentitySagaWorker),
         takeEvery(updateDeviceIdentityAction.started.type, updateDeviceIdentitySagaWorker),

src/app/devices/deviceList/components/__snapshots__/deviceList.spec.tsx.snap

@@ -7,7 +7,7 @@ exports[`DeviceList matches snapshot 1`] = `
   <div
     className="view-command"
   >
-    <Component
+    <DeviceListCommandBar
       disableAdd={false}
       disableDelete={true}
       disableRefresh={false}
@@ -19,11 +19,11 @@ exports[`DeviceList matches snapshot 1`] = `
   <div
     className="view-content view-scroll-vertical"
   >
-    <Component
+    <DeviceListQuery
       refresh={0}
       setQueryAndExecute={[Function]}
     />
-    <Component
+    <ListPaging
       fetchPage={[Function]}
     />
     <div
@@ -41,6 +41,7 @@ exports[`DeviceList matches snapshot 1`] = `
             "_isModal": false,
             "_items": Array [],
             "_keyToIndexMap": Object {},
+            "_onItemsChanged": undefined,
             "_onSelectionChanged": [Function],
             "_selectedItems": null,
             "_unselectableCount": 0,
@@ -147,6 +148,7 @@ exports[`DeviceList matches snapshot 1`] = `
               "_isModal": false,
               "_items": Array [],
               "_keyToIndexMap": Object {},
+              "_onItemsChanged": undefined,
               "_onSelectionChanged": [Function],
               "_selectedItems": null,
               "_unselectableCount": 0,

src/app/devices/deviceList/sagas/deleteDeviceSaga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { raiseNotificationToast } from '../../../notifications/components/notificationToast';
 import { NotificationType } from '../../../api/models/notification';
@@ -10,7 +11,7 @@ import { ResourceKeys } from '../../../../localization/resourceKeys';
 import { deleteDevicesAction } from '../actions';
 import { deleteDevices } from '../../../api/services/devicesService';
 
-export function* deleteDevicesSaga(action: Action<string[]>) {
+export function* deleteDevicesSaga(action: Action<string[]>): SagaIterator {
     try {
         const parameters = {
             deviceIds: action.payload,

src/app/devices/deviceList/sagas/listDeviceSaga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { Action } from 'typescript-fsa';
+import { SagaIterator } from 'redux-saga';
 import { call, put } from 'redux-saga/effects';
 import { raiseNotificationToast } from '../../../notifications/components/notificationToast';
 import { NotificationType } from '../../../api/models/notification';
@@ -14,7 +15,7 @@ import { ERROR_TYPES } from './../../../constants/apiConstants';
 import { appConfig } from '../../../../appConfig/appConfig';
 import { CUSTOM_CONTROLLER_PORT } from './../../../constants/browserStorage';
 
-export function* listDevicesSaga(action: Action<DeviceQuery>) {
+export function* listDevicesSaga(action: Action<DeviceQuery>): SagaIterator {
     try {
         const parameters = {
             query: action.payload

src/app/devices/deviceTwin/components/__snapshots__/deviceTwin.spec.tsx.snap

@@ -28,14 +28,14 @@ exports[`devices/components/deviceTwin snapshot matches snapshot 1`] = `
       ]
     }
   />
-  <Component
+  <HeaderView
     headerText="deviceTwin.headerText"
     tooltip="deviceTwin.tooltip"
   />
   <article
     className="device-twin device-detail"
   >
-    <Component
+    <JSONEditor
       className="json-editor"
       content="{
 	\\"deviceEtag\\": \\"\\",

src/app/devices/deviceTwin/sagas/getDeviceTwinSaga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { fetchDeviceTwin } from '../../../api/services/devicesService';
 import { NotificationType } from '../../../api/models/notification';
@@ -10,7 +11,7 @@ import { ResourceKeys } from '../../../../localization/resourceKeys';
 import { getDeviceTwinAction } from '../actions';
 import { raiseNotificationToast } from '../../../notifications/components/notificationToast';
 
-export function* getDeviceTwinSaga(action: Action<string>) {
+export function* getDeviceTwinSaga(action: Action<string>): SagaIterator {
     try {
         const parameters = {
             deviceId: action.payload,

src/app/devices/deviceTwin/sagas/updateDeviceTwinSaga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { updateDeviceTwin } from '../../../api/services/devicesService';
 import { NotificationType } from '../../../api/models/notification';
@@ -11,7 +12,7 @@ import { updateDeviceTwinAction } from '../actions';
 import { raiseNotificationToast } from '../../../notifications/components/notificationToast';
 import { Twin } from '../../../api/models/device';
 
-export function* updateDeviceTwinSaga(action: Action<Twin>) {
+export function* updateDeviceTwinSaga(action: Action<Twin>): SagaIterator {
     try {
         const twin = yield call(updateDeviceTwin, action.payload);
 

src/app/devices/directMethod/components/__snapshots__/directMethod.spec.tsx.snap

@@ -19,11 +19,11 @@ exports[`directMethod matches snapshot 1`] = `
       ]
     }
   />
-  <Component
+  <HeaderView
     headerText="directMethod.headerText"
     tooltip="directMethod.tooltip"
   />
-  <Component
+  <DirectMethodForm
     connectionTimeOut={10}
     methodName=""
     responseTimeOut={10}

src/app/devices/directMethod/saga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put, takeEvery } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { invokeDirectMethodAction, InvokeMethodActionParameters } from './actions';
 import { invokeDirectMethod } from '../../api/services/devicesService';
@@ -11,7 +12,7 @@ import { NotificationType } from '../../api/models/notification';
 import { ResourceKeys } from '../../../localization/resourceKeys';
 import { InvokeMethodParameters } from '../../api/parameters/deviceParameters';
 
-export function* invokeDirectMethodSagaWorker(action: Action<InvokeMethodActionParameters>) {
+export function* invokeDirectMethodSagaWorker(action: Action<InvokeMethodActionParameters>): SagaIterator {
     const toastId: number = Math.random();
 
     try {

src/app/devices/module/addModuleIdentity/components/__snapshots__/addModuleIdentity.spec.tsx.snap

@@ -28,13 +28,13 @@ exports[`devices/components/addModuleIdentity snapshot matches snapshot while lo
       ]
     }
   />
-  <Component
+  <HeaderView
     headerText="moduleIdentity.headerText"
   />
   <div
     className="device-detail"
   >
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="moduleIdentity.moduleId"
       error=""

src/app/devices/module/addModuleIdentity/saga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put, takeEvery } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { addModuleIdentity } from '../../../api/services/moduleService';
 import { raiseNotificationToast } from '../../../notifications/components/notificationToast';
@@ -11,7 +12,7 @@ import { ResourceKeys } from '../../../../localization/resourceKeys';
 import { addModuleIdentityAction } from './actions';
 import { ModuleIdentity } from './../../../api/models/moduleIdentity';
 
-export function* addModuleIdentitySagaWorker(action: Action<ModuleIdentity>) {
+export function* addModuleIdentitySagaWorker(action: Action<ModuleIdentity>): SagaIterator {
     try {
         const parameters = {
             moduleIdentity: action.payload,

src/app/devices/module/moduleDirectMethod/components/__snapshots__/moduleDirectMethod.spec.tsx.snap

@@ -19,7 +19,7 @@ exports[`moduleDirectMethod matches snapshot 1`] = `
       ]
     }
   />
-  <Component
+  <DirectMethodForm
     connectionTimeOut={10}
     methodName=""
     responseTimeOut={10}

src/app/devices/module/moduleDirectMethod/saga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put, takeEvery } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { invokeModuleDirectMethodAction, InvokeModuleMethodActionParameters } from './actions';
 import { invokeModuleDirectMethod } from '../../../api/services/moduleService';
@@ -11,7 +12,7 @@ import { NotificationType } from '../../../api/models/notification';
 import { ResourceKeys } from '../../../../localization/resourceKeys';
 import { InvokeModuleMethodParameters } from '../../../api/parameters/moduleParameters';
 
-export function* invokeModuleDirectMethodSagaWorker(action: Action<InvokeModuleMethodActionParameters>) {
+export function* invokeModuleDirectMethodSagaWorker(action: Action<InvokeModuleMethodActionParameters>): SagaIterator {
     const toastId: number = Math.random();
 
     try {

src/app/devices/module/moduleIdentityList/components/__snapshots__/moduleIdentityList.spec.tsx.snap

@@ -28,7 +28,7 @@ exports[`ModuleIdentityList snapshot matches snapshot when fetch failed 1`] = `
       ]
     }
   />
-  <Component
+  <HeaderView
     headerText="moduleIdentity.headerText"
     link="moduleIdentity.link"
     tooltip="moduleIdentity.tooltip"
@@ -128,7 +128,7 @@ exports[`ModuleIdentityList snapshot matches snapshot while loading 1`] = `
       ]
     }
   />
-  <Component
+  <HeaderView
     headerText="moduleIdentity.headerText"
     link="moduleIdentity.link"
     tooltip="moduleIdentity.tooltip"
@@ -195,7 +195,7 @@ exports[`ModuleIdentityList snapshot matches snapshot while loading 1`] = `
         selectionMode={0}
       />
     </div>
-    <Component />
+    <MultiLineShimmer />
   </div>
 </Fragment>
 `;
@@ -228,7 +228,7 @@ exports[`ModuleIdentityList snapshot matches snapshot with moduleIdentityList 1`
       ]
     }
   />
-  <Component
+  <HeaderView
     headerText="moduleIdentity.headerText"
     link="moduleIdentity.link"
     tooltip="moduleIdentity.tooltip"
@@ -303,7 +303,7 @@ exports[`ModuleIdentityList snapshot matches snapshot with moduleIdentityList 1`
         selectionMode={0}
       />
     </div>
-    <Component />
+    <MultiLineShimmer />
   </div>
 </Fragment>
 `;

src/app/devices/module/moduleIdentityList/saga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put, takeLatest } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { fetchModuleIdentities } from '../../../api/services/moduleService';
 import { raiseNotificationToast } from '../../../notifications/components/notificationToast';
@@ -10,7 +11,7 @@ import { NotificationType } from '../../../api/models/notification';
 import { ResourceKeys } from '../../../../localization/resourceKeys';
 import { getModuleIdentitiesAction } from './actions';
 
-export function* getModuleIdentitiesSagaWorker(action: Action<string>) {
+export function* getModuleIdentitiesSagaWorker(action: Action<string>): SagaIterator {
     try {
         const parameters = {
             deviceId: action.payload

src/app/devices/module/moduleIdentityTwin/components/__snapshots__/moduleIdentityTwin.spec.tsx.snap

@@ -32,7 +32,7 @@ exports[`moduleIdentityTwin snapshot matches snapshot after module twin is fetch
   <div
     className="module-identity-detail"
   >
-    <Component
+    <JSONEditor
       className="json-editor"
       content="{
 	\\"authenticationType\\": \\"sas\\",
@@ -90,7 +90,7 @@ exports[`moduleIdentityTwin snapshot matches snapshot while loading 1`] = `
   <div
     className="module-identity-detail"
   >
-    <Component />
+    <MultiLineShimmer />
   </div>
 </Fragment>
 `;

src/app/devices/module/moduleIdentityTwin/sagas/getModuleIdentityTwinSaga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { fetchModuleIdentityTwin } from '../../../../api/services/moduleService';
 import { raiseNotificationToast } from '../../../../notifications/components/notificationToast';
@@ -10,7 +11,7 @@ import { NotificationType } from '../../../../api/models/notification';
 import { ResourceKeys } from '../../../../../localization/resourceKeys';
 import { GetModuleIdentityTwinActionParameters, getModuleIdentityTwinAction } from '../actions';
 
-export function* getModuleIdentityTwinSaga(action: Action<GetModuleIdentityTwinActionParameters>) {
+export function* getModuleIdentityTwinSaga(action: Action<GetModuleIdentityTwinActionParameters>): SagaIterator {
     try {
         const parameters = {
             deviceId: action.payload.deviceId,

src/app/devices/module/moduleIdentityTwin/sagas/updateModuleIdentityTwinSaga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { updateModuleIdentityTwin } from '../../../../api/services/moduleService';
 import { raiseNotificationToast } from '../../../../notifications/components/notificationToast';
@@ -11,7 +12,7 @@ import { ResourceKeys } from '../../../../../localization/resourceKeys';
 import { updateModuleIdentityTwinAction } from '../actions';
 import { ModuleTwin } from '../../../../api/models/moduleTwin';
 
-export function* updateModuleIdentityTwinSaga(action: Action<ModuleTwin>) {
+export function* updateModuleIdentityTwinSaga(action: Action<ModuleTwin>): SagaIterator {
     try {
         const moduleIdentityTwin = yield call(updateModuleIdentityTwin, action.payload);
 

src/app/devices/module/moduleIndentityDetail/components/__snapshots__/moduleIdentityDetail.spec.tsx.snap

@@ -32,7 +32,7 @@ exports[`ModuleIdentityDetail snapshot matches snapshot after certificateAuthori
   <div
     className="module-identity-detail"
   >
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="moduleIdentity.moduleId"
       label="moduleIdentity.moduleId"
@@ -79,7 +79,7 @@ exports[`ModuleIdentityDetail snapshot matches snapshot after module identity is
   <div
     className="module-identity-detail"
   >
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="moduleIdentity.moduleId"
       label="moduleIdentity.moduleId"
@@ -123,7 +123,7 @@ exports[`ModuleIdentityDetail snapshot matches snapshot after sas module identit
   <div
     className="module-identity-detail"
   >
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="moduleIdentity.moduleId"
       label="moduleIdentity.moduleId"
@@ -131,7 +131,7 @@ exports[`ModuleIdentityDetail snapshot matches snapshot after sas module identit
       readOnly={true}
       value="moduleId"
     />
-    <Component
+    <MaskedCopyableTextField
       allowMask={true}
       ariaLabel="moduleIdentity.authenticationType.symmetricKey.primaryKey"
       label="moduleIdentity.authenticationType.symmetricKey.primaryKey"
@@ -139,7 +139,7 @@ exports[`ModuleIdentityDetail snapshot matches snapshot after sas module identit
       readOnly={true}
       value="key1"
     />
-    <Component
+    <MaskedCopyableTextField
       allowMask={true}
       ariaLabel="moduleIdentity.authenticationType.symmetricKey.secondaryKey"
       label="moduleIdentity.authenticationType.symmetricKey.secondaryKey"
@@ -147,21 +147,21 @@ exports[`ModuleIdentityDetail snapshot matches snapshot after sas module identit
       readOnly={true}
       value="key2"
     />
-    <Component
+    <MaskedCopyableTextField
       allowMask={true}
       ariaLabel="moduleIdentity.authenticationType.symmetricKey.primaryConnectionString"
       label="moduleIdentity.authenticationType.symmetricKey.primaryConnectionString"
       readOnly={true}
       value="HostName=hostName;DeviceId=newdevice;ModuleId=moduleId;SharedAccessKey=key1"
     />
-    <Component
+    <MaskedCopyableTextField
       allowMask={true}
       ariaLabel="moduleIdentity.authenticationType.symmetricKey.secondaryConnectionString"
       label="moduleIdentity.authenticationType.symmetricKey.secondaryConnectionString"
       readOnly={true}
       value="HostName=hostName;DeviceId=newdevice;ModuleId=moduleId;SharedAccessKey=key2"
     />
-    <Component
+    <SasTokenGenerationView
       activeAzureResourceHostName="hostName"
       moduleIdentity={
         Object {
@@ -214,7 +214,7 @@ exports[`ModuleIdentityDetail snapshot matches snapshot after self signed module
   <div
     className="module-identity-detail"
   >
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="moduleIdentity.moduleId"
       label="moduleIdentity.moduleId"
@@ -225,7 +225,7 @@ exports[`ModuleIdentityDetail snapshot matches snapshot after self signed module
     <StyledLabelBase>
       moduleIdentity.authenticationType.selfSigned.text
     </StyledLabelBase>
-    <Component
+    <MaskedCopyableTextField
       allowMask={true}
       ariaLabel="moduleIdentity.authenticationType.selfSigned.primaryThumbprint"
       label="moduleIdentity.authenticationType.selfSigned.primaryThumbprint"
@@ -233,7 +233,7 @@ exports[`ModuleIdentityDetail snapshot matches snapshot after self signed module
       readOnly={true}
       value="thumbprint1"
     />
-    <Component
+    <MaskedCopyableTextField
       allowMask={true}
       ariaLabel="moduleIdentity.authenticationType.selfSigned.secondaryThumbprint"
       label="moduleIdentity.authenticationType.selfSigned.secondaryThumbprint"
@@ -277,7 +277,7 @@ exports[`ModuleIdentityDetail snapshot matches snapshot showing delete confirmat
   <div
     className="module-identity-detail"
   >
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="moduleIdentity.moduleId"
       label="moduleIdentity.moduleId"
@@ -354,7 +354,7 @@ exports[`ModuleIdentityDetail snapshot matches snapshot while loading 1`] = `
   <div
     className="module-identity-detail"
   >
-    <Component
+    <MaskedCopyableTextField
       allowMask={false}
       ariaLabel="moduleIdentity.moduleId"
       label="moduleIdentity.moduleId"
@@ -362,7 +362,7 @@ exports[`ModuleIdentityDetail snapshot matches snapshot while loading 1`] = `
       readOnly={true}
       value="moduleId"
     />
-    <Component />
+    <MultiLineShimmer />
   </div>
 </Fragment>
 `;

src/app/devices/module/moduleIndentityDetail/sagas/getModuleIdentitySaga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { fetchModuleIdentity } from '../../../../api/services/moduleService';
 import { raiseNotificationToast } from '../../../../notifications/components/notificationToast';
@@ -10,7 +11,7 @@ import { NotificationType } from '../../../../api/models/notification';
 import { ResourceKeys } from '../../../../../localization/resourceKeys';
 import { GetModuleIdentityActionParameters, getModuleIdentityAction } from '../actions';
 
-export function* getModuleIdentitySaga(action: Action<GetModuleIdentityActionParameters>) {
+export function* getModuleIdentitySaga(action: Action<GetModuleIdentityActionParameters>): SagaIterator {
     try {
         const parameters = {
             deviceId: action.payload.deviceId,

src/app/devices/pnp/components/__snapshots__/digitalTwinDetail.spec.tsx.snap

@@ -12,35 +12,35 @@ exports[`DigitalTwinDetail matches snapshot 1`] = `
     itemKey="interfaces"
     key="interfaces"
   >
-    <Component />
+    <DeviceInterfaces />
   </PivotItem>
   <PivotItem
     headerText="breadcrumb.properties"
     itemKey="properties"
     key="properties"
   >
-    <Component />
+    <DeviceProperties />
   </PivotItem>
   <PivotItem
     headerText="breadcrumb.settings"
     itemKey="settings"
     key="settings"
   >
-    <Component />
+    <DeviceSettings />
   </PivotItem>
   <PivotItem
     headerText="breadcrumb.commands"
     itemKey="commands"
     key="commands"
   >
-    <Component />
+    <DeviceCommands />
   </PivotItem>
   <PivotItem
     headerText="breadcrumb.events"
     itemKey="events"
     key="events"
   >
-    <Component />
+    <DeviceEvents />
   </PivotItem>
 </StyledPivot>
 `;

src/app/devices/pnp/components/__snapshots__/digitalTwinInterfacesList.spec.tsx.snap

@@ -19,7 +19,7 @@ exports[`DigitalTwinInterfacesList matches snapshot when empty model id is retri
       ]
     }
   />
-  <Component
+  <HeaderView
     headerText="digitalTwin.headerText"
     link="settings.questions.questions.documentation.link"
     tooltip="settings.questions.questions.documentation.text"

src/app/devices/pnp/components/__snapshots__/pnp.spec.tsx.snap

@@ -24,7 +24,7 @@ exports[`pnp matches snapshot 1`] = `
     exact={true}
     path="/#/devices/deviceDetail/ioTPlugAndPlay/?id=device1&componentName=foo&interfaceId=urn:iotInterfaces:com:interface1;1"
   />
-  <Component
+  <BreadcrumbRoute
     breadcrumb={
       Object {
         "name": "foo",
@@ -32,7 +32,7 @@ exports[`pnp matches snapshot 1`] = `
     }
     path="/#/devices/deviceDetail/ioTPlugAndPlay/?id=device1&componentName=foo&interfaceId=urn:iotInterfaces:com:interface1;1/ioTPlugAndPlayDetail"
   >
-    <Component />
+    <DigitalTwinDetail />
-  </Component>
+  </BreadcrumbRoute>
 </ContextProvider>
 `;

src/app/devices/pnp/components/deviceCommands/__snapshots__/deviceCommands.spec.tsx.snap

@@ -70,7 +70,7 @@ exports[`components/devices/deviceCommands matches snapshot with a commandSchema
       ]
     }
   />
-  <Component
+  <DeviceCommandsPerInterface
     commandSchemas={
       Array [
         Object {

src/app/devices/pnp/components/deviceCommands/__snapshots__/deviceCommandsPerInterface.spec.tsx.snap

@@ -46,7 +46,7 @@ exports[`components/devices/deviceCommandsPerInterface matches snapshot 1`] = `
     className="list-content"
     role="list"
   >
-    <Component
+    <DeviceCommandsPerInterfacePerCommand
       collapsed={false}
       commandModelDefinition={
         Object {

src/app/devices/pnp/components/deviceInterfaces/__snapshots__/deviceInterfaces.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`deviceInterfaces shows Shimmer when status is working 1`] = `<Component />`;
+exports[`deviceInterfaces shows Shimmer when status is working 1`] = `<MultiLineShimmer />`;
 
 exports[`deviceInterfaces shows interface information when status is fetched 1`] = `
 <Fragment>
@@ -39,31 +39,31 @@ exports[`deviceInterfaces shows interface information when status is fetched 1`]
     <section
       className="pnp-interface-info scrollable-lg"
     >
-      <Component
+      <ModelDefinitionSourceView
         source="PUBLIC"
       />
-      <Component
+      <MaskedCopyableTextField
         allowMask={false}
         ariaLabel="deviceInterfaces.columns.id"
         label="deviceInterfaces.columns.id"
         readOnly={true}
         value={null}
       />
-      <Component
+      <MaskedCopyableTextField
         allowMask={false}
         ariaLabel="deviceInterfaces.columns.displayName"
         label="deviceInterfaces.columns.displayName"
         readOnly={true}
         value="--"
       />
-      <Component
+      <MaskedCopyableTextField
         allowMask={false}
         ariaLabel="deviceInterfaces.columns.description"
         label="deviceInterfaces.columns.description"
         readOnly={true}
         value="--"
       />
-      <Component
+      <JSONEditor
         className="interface-definition-json-editor"
         content="{
 	\\"@id\\": \\"urn:azureiot:ModelDiscovery:DigitalTwin:1\\",

src/app/devices/pnp/components/deviceProperties/__snapshots__/deviceProperties.spec.tsx.snap

@@ -70,7 +70,7 @@ exports[`components/devices/deviceProperties matches snapshot with one twinWithS
       ]
     }
   />
-  <Component
+  <DevicePropertiesPerInterface
     twinAndSchema={
       Array [
         Object {

src/app/devices/pnp/components/deviceSettings/__snapshots__/deviceSettings.spec.tsx.snap

@@ -31,7 +31,7 @@ exports[`deviceSettings matches snapshot with one twinWithSchema 1`] = `
       ]
     }
   />
-  <Component
+  <DeviceSettingsPerInterface
     componentName="foo"
     deviceId={null}
     interfaceId="urn:contoso:com:EnvironmentalSensor;1"

src/app/devices/pnp/components/deviceSettings/__snapshots__/deviceSettingsPerInterface.spec.tsx.snap

@@ -25,11 +25,11 @@ exports[`components/devices/deviceSettingsPerInterface matches snapshot 1`] = `
     <span
       className="col-sm4 reported-value"
     >
-      <Component
+      <LabelWithTooltip
         tooltipText="deviceSettings.columns.reportedValueTooltip"
       >
         deviceSettings.columns.reportedValue
-      </Component>
+      </LabelWithTooltip>
     </span>
     <div
       className="col-sm1 collapse-button"
@@ -50,7 +50,7 @@ exports[`components/devices/deviceSettingsPerInterface matches snapshot 1`] = `
     className="list-content"
     role="list"
   >
-    <Component
+    <DeviceSettingsPerInterfacePerSetting
       collapsed={false}
       componentName="environmentalSensor"
       desiredValue={456}
@@ -149,7 +149,7 @@ exports[`components/devices/deviceSettingsPerInterface matches snapshot 1`] = `
         ]
       }
     />
-    <Component
+    <DeviceSettingsPerInterfacePerSetting
       collapsed={false}
       componentName="environmentalSensor"
       desiredValue={456}

src/app/devices/pnp/sagas/getModelDefinitionSaga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, CallEffect, put } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { fetchModelDefinition } from '../../../api/services/publicDigitalTwinsModelRepoService';
 import { raiseNotificationToast } from '../../../notifications/components/notificationToast';
@@ -17,7 +18,7 @@ import { ModelDefinitionNotValidJsonError } from '../../../api/models/modelDefin
 import { GetModelDefinitionActionParameters, getModelDefinitionAction } from '../actions';
 import { ModelIdCasingNotMatchingException } from '../../../shared/utils/exceptions/modelIdCasingNotMatchingException';
 
-export function* getModelDefinitionSaga(action: Action<GetModelDefinitionActionParameters>) {
+export function* getModelDefinitionSaga(action: Action<GetModelDefinitionActionParameters>): SagaIterator {
     const { locations, interfaceId } = action.payload;
     let errorCount = 0;
     for (const location of locations) { // try to get model definition in order according to user's location settings
@@ -64,7 +65,7 @@ export function* getModelDefinitionSaga(action: Action<GetModelDefinitionActionP
     }
 }
 
-export function* validateModelDefinitionHelper(modelDefinition: ModelDefinition, location: RepositoryLocationSettings) {
+export function* validateModelDefinitionHelper(modelDefinition: ModelDefinition, location: RepositoryLocationSettings): SagaIterator {
     return true; // commenting out validating model until it aligns with local parser
 }
 
@@ -91,7 +92,7 @@ export const checkModelIdCasing = (model: ModelDefinition, id: string) => {
     }
 };
 
-export function* getModelDefinitionFromPublicRepo(action: Action<GetModelDefinitionActionParameters>) {
+export function* getModelDefinitionFromPublicRepo(action: Action<GetModelDefinitionActionParameters>): SagaIterator {
     const splitInterfaceId = getSplitInterfaceId(action.payload.interfaceId);
     const parameters: FetchModelParameters = {
         id: splitInterfaceId[0],
@@ -102,7 +103,7 @@ export function* getModelDefinitionFromPublicRepo(action: Action<GetModelDefinit
     return getFlattenedModel(model, splitInterfaceId);
 }
 
-export function* getModelDefinitionFromConfigurableRepo(action: Action<GetModelDefinitionActionParameters>) {
+export function* getModelDefinitionFromConfigurableRepo(action: Action<GetModelDefinitionActionParameters>): SagaIterator {
     const configurableRepoUrls = action.payload.locations.filter(location => location.repositoryLocationType === REPOSITORY_LOCATION_TYPE.Configurable);
     const configurableRepoUrl = configurableRepoUrls && configurableRepoUrls[0] && configurableRepoUrls[0].value || '';
     const url = configurableRepoUrl.replace(/\/$/, ''); // remove trailing slash
@@ -117,7 +118,7 @@ export function* getModelDefinitionFromConfigurableRepo(action: Action<GetModelD
     return getFlattenedModel(model, splitInterfaceId);
 }
 
-export function* getModelDefinitionFromLocalFile(action: Action<GetModelDefinitionActionParameters>) {
+export function* getModelDefinitionFromLocalFile(action: Action<GetModelDefinitionActionParameters>): SagaIterator {
     const localFolderPaths = action.payload.locations.filter(location => location.repositoryLocationType === REPOSITORY_LOCATION_TYPE.Local);
     const localFolderPath = localFolderPaths && localFolderPaths[0] && localFolderPaths[0].value || '';
     const path = localFolderPath.replace(/\/$/, ''); // remove trailing slash
@@ -126,7 +127,7 @@ export function* getModelDefinitionFromLocalFile(action: Action<GetModelDefiniti
     return getFlattenedModel(model, splitInterfaceId);
 }
 
-export function* getModelDefinition(action: Action<GetModelDefinitionActionParameters>, location: RepositoryLocationSettings) {
+export function* getModelDefinition(action: Action<GetModelDefinitionActionParameters>, location: RepositoryLocationSettings): SagaIterator {
     switch (location.repositoryLocationType) {
         case REPOSITORY_LOCATION_TYPE.Local:
             return yield call(getModelDefinitionFromLocalFile, action);

src/app/devices/pnp/sagas/invokeCommandSaga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call, put } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { invokeCommandAction, InvokeCommandActionParameters } from '../actions';
 import { invokeDirectMethod } from '../../../api/services/devicesService';
@@ -13,7 +14,7 @@ import { ResourceKeys } from '../../../../localization/resourceKeys';
 import { ParsedJsonSchema } from '../../../api/models/interfaceJsonParserOutput';
 import { getSchemaValidationErrors } from '../../../shared/utils/jsonSchemaAdaptor';
 
-export function* invokeCommandSaga(action: Action<InvokeCommandActionParameters>) {
+export function* invokeCommandSaga(action: Action<InvokeCommandActionParameters>): SagaIterator {
     const toastId: number = Math.random();
 
     try {

src/app/devices/shared/components/__snapshots__/dataForm.spec.tsx.snap

@@ -69,12 +69,12 @@ exports[`dataForm matches snapshot with unsupported type 1`] = `
   <form
     className="json-editor"
   >
-    <Component
+    <LabelWithTooltip
       tooltipText="notifications.interfaceSchemaNotSupported"
     >
       deviceContent.value
-    </Component>
+    </LabelWithTooltip>
-    <Component
+    <JSONEditor
       className="json-editor"
       content="123"
       onChange={[Function]}

src/app/devices/shared/components/__snapshots__/sasTokenGenerationView.spec.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`devices/components/moduleIdentityTwin snapshot matches snapshot when no device identity is provided 1`] = `
-<Component
+<CollapsibleSection
   expanded={false}
   label="deviceIdentity.authenticationType.sasToken.label"
   tooltipText="deviceIdentity.authenticationType.sasToken.toolTip"
@@ -38,7 +38,7 @@ exports[`devices/components/moduleIdentityTwin snapshot matches snapshot when no
       onIncrement={[Function]}
       value="5"
     />
-    <Component
+    <MaskedCopyableTextField
       allowMask={true}
       ariaLabel="deviceIdentity.authenticationType.sasToken.textField.ariaLabel"
       label="deviceIdentity.authenticationType.sasToken.textField.label"
@@ -53,11 +53,11 @@ exports[`devices/components/moduleIdentityTwin snapshot matches snapshot when no
       title="deviceIdentity.authenticationType.sasToken.generateButton.title"
     />
   </div>
-</Component>
+</CollapsibleSection>
 `;
 
 exports[`devices/components/moduleIdentityTwin snapshot matches snapshot when no device identity is provided 2`] = `
-<Component
+<CollapsibleSection
   expanded={false}
   label="deviceIdentity.authenticationType.sasToken.label"
   tooltipText="deviceIdentity.authenticationType.sasToken.toolTip"
@@ -94,7 +94,7 @@ exports[`devices/components/moduleIdentityTwin snapshot matches snapshot when no
       onIncrement={[Function]}
       value="5"
     />
-    <Component
+    <MaskedCopyableTextField
       allowMask={true}
       ariaLabel="deviceIdentity.authenticationType.sasToken.textField.ariaLabel"
       label="deviceIdentity.authenticationType.sasToken.textField.label"
@@ -109,5 +109,5 @@ exports[`devices/components/moduleIdentityTwin snapshot matches snapshot when no
       title="deviceIdentity.authenticationType.sasToken.generateButton.title"
     />
   </div>
-</Component>
+</CollapsibleSection>
 `;

src/app/home/components/__snapshots__/homeView.spec.tsx.snap

@@ -2,14 +2,14 @@
 
 exports[`HomeView matches snapshot 1`] = `
 <Fragment>
-  <Component />
+  <AppVersionMessageBar />
   <div
     className="view-content home-view"
   >
     <div
       className="nav"
     >
-      <Component
+      <HomeViewNavigation
         appMenuVisible={true}
         setAppMenuVisible={[Function]}
       />

src/app/iotHub/components/__snapshots__/iotHubDevices.spec.tsx.snap

@@ -7,7 +7,7 @@ exports[`IotHubDevices matches snapshot 1`] = `
     exact={true}
     path=""
   />
-  <Component
+  <BreadcrumbRoute
     breadcrumb={
       Object {
         "name": "breadcrumb.add",
@@ -16,8 +16,8 @@ exports[`IotHubDevices matches snapshot 1`] = `
     exact={true}
     path="/add"
   >
-    <Component />
+    <AddDevice />
-  </Component>
+  </BreadcrumbRoute>
   <Component
     component={[Function]}
     path="/deviceDetail"

src/app/iotHub/components/__snapshots__/iotHubHost.spec.tsx.snap

@@ -9,7 +9,7 @@ exports[`IotHubHost matches snapshot 1`] = `
   }
 >
   <Component>
-    <Component
+    <BreadcrumbRoute
       breadcrumb={
         Object {
           "name": "breadcrumb.devices",
@@ -17,8 +17,8 @@ exports[`IotHubHost matches snapshot 1`] = `
       }
       path="/devices"
     >
-      <Component />
+      <IotHubDevices />
-    </Component>
+    </BreadcrumbRoute>
     <Component
       from=""
       to="/devices"

src/app/iotHub/components/__snapshots__/iotHubResource.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`IotHubResource matches snapshot 1`] = `
 <Component>
-  <Component
+  <BreadcrumbRoute
     breadcrumb={
       Object {
         "name": "breadcrumb.devices",
@@ -10,8 +10,8 @@ exports[`IotHubResource matches snapshot 1`] = `
     }
     path="/devices"
   >
-    <Component />
+    <IotHubDevices />
-  </Component>
+  </BreadcrumbRoute>
   <Component
     from=""
     to="/devices"

src/app/jsonSchemaFormFabricPlugin/widgets/text.tsx

@@ -22,5 +22,5 @@ const FabricTextHighOrder = (highOrderProps?: ITextFieldProps) => (props: ITextF
     );
 };
 
-export const FabricText: Widget = FabricTextHighOrder();
+export const FabricText = FabricTextHighOrder();
-export const FabricTextArea: Widget = FabricTextHighOrder({ multiline: true });
+export const FabricTextArea = FabricTextHighOrder({ multiline: true });

src/app/modelRepository/components/__snapshots__/modelRepositoryLocationList.spec.tsx.snap

@@ -12,7 +12,7 @@ exports[`components/settings/modelRepositoryLocationList matches snapshot with e
     <n
       key="PUBLIC"
     >
-      <Component
+      <ModelRepositoryLocationListItem
         index={0}
         item={
           Object {
@@ -26,7 +26,7 @@ exports[`components/settings/modelRepositoryLocationList matches snapshot with e
     <n
       key="LOCAL"
     >
-      <Component
+      <ModelRepositoryLocationListItem
         index={1}
         item={
           Object {
@@ -65,7 +65,7 @@ exports[`components/settings/modelRepositoryLocationList matches snapshot with p
     <n
       key="PUBLIC"
     >
-      <Component
+      <ModelRepositoryLocationListItem
         index={0}
         item={
           Object {

src/app/modelRepository/components/__snapshots__/modelRepositoryLocationView.spec.tsx.snap

@@ -93,10 +93,10 @@ exports[`modelRepositoryLocationView matches snapshot when locations greater tha
   <div
     className="view-scroll-vertical"
   >
-    <Component
+    <ModelRepositoryInstruction
       empty={false}
     />
-    <Component
+    <ModelRepositoryLocationList
       onChangeRepositoryLocationSettings={[Function]}
       repositoryLocationSettings={
         Array [
@@ -205,10 +205,10 @@ exports[`modelRepositoryLocationView matches snapshot when no locations 1`] = `
   <div
     className="view-scroll-vertical"
   >
-    <Component
+    <ModelRepositoryInstruction
       empty={true}
     />
-    <Component
+    <ModelRepositoryLocationList
       onChangeRepositoryLocationSettings={[Function]}
       repositoryLocationSettings={Array []}
       repositoryLocationSettingsErrors={Object {}}

src/app/navigation/components/__snapshots__/breadcrumbRoute.spec.tsx.snap

@@ -10,7 +10,7 @@ exports[`BreadcrumbRoute matches snapshot 1`] = `
   exact={true}
   path="path"
 >
-  <Component
+  <BreadcrumbWrapper
     name="name"
   />
 </Route>

src/app/navigation/components/__snapshots__/breadcrumbs.spec.tsx.snap

@@ -4,7 +4,7 @@ exports[`Breadcrumbs matches snapshot 1`] = `
 <ul
   className="breadcrumb"
 >
-  <Component
+  <Breadcrumb
     disableLink={true}
     key="path1"
     name="name1"
@@ -12,7 +12,7 @@ exports[`Breadcrumbs matches snapshot 1`] = `
     suffix=""
     url="url1"
   />
-  <Component
+  <Breadcrumb
     disableLink={false}
     key="path2"
     name="name2"
@@ -20,7 +20,7 @@ exports[`Breadcrumbs matches snapshot 1`] = `
     suffix=""
     url="url2"
   />
-  <Component
+  <Breadcrumb
     disableLink={true}
     key="path3"
     name="name3"

src/app/notifications/components/__snapshots__/notificationList.spec.tsx.snap

@@ -50,7 +50,7 @@ exports[`notificationList matches snapshot where there is no notifications 2`] =
     <div
       key="0"
     >
-      <Component
+      <NotificationListEntry
         notification={
           Object {
             "text": Object {

src/app/shared/components/__snapshots__/collapsibleSection.spec.tsx.snap

@@ -15,11 +15,11 @@ exports[`collapsibleSection matches snapshot 1`] = `
     onClick={[Function]}
     title="collapsibleSection.open"
   />
-  <Component
+  <LabelWithTooltip
     tooltipText="tooltip"
   >
     Label
-  </Component>
+  </LabelWithTooltip>
   <div
     className="collapsible-section-children"
   />

src/app/shared/components/__snapshots__/header.spec.tsx.snap

@@ -10,10 +10,10 @@ exports[`Header matches snapshot 1`] = `
     header.applicationName
   </div>
   <div>
-    <Component />
+    <NotificationPane />
   </div>
   <div>
-    <Component />
+    <SettingsPane />
   </div>
 </header>
 `;

src/app/shared/components/__snapshots__/labelWithRichCallout.spec.tsx.snap

@@ -288,7 +288,7 @@ exports[`components/shared/labelWithRichCallout matches snapshot when tooltip sp
         }
       >
         <label
-          className="ms-Label root-53"
+          className="ms-Label root-109"
         >
           labelText
         </label>
@@ -1327,7 +1327,7 @@ exports[`components/shared/labelWithRichCallout matches snapshot when tooltip sp
           variantClassName="ms-Button--icon"
         >
           <button
-            className="ms-Button ms-Button--icon root-54"
+            className="ms-Button ms-Button--icon root-110"
             data-is-focusable={true}
             id="iconbutton0"
             onClick={[Function]}
@@ -1339,16 +1339,16 @@ exports[`components/shared/labelWithRichCallout matches snapshot when tooltip sp
             type="button"
           >
             <span
-              className="ms-Button-flexContainer flexContainer-55"
+              className="ms-Button-flexContainer flexContainer-111"
               data-automationid="splitbuttonprimary"
             >
               <FontIcon
-                className="ms-Button-icon icon-57"
+                className="ms-Button-icon icon-113"
                 iconName="Info"
               >
                 <i
                   aria-hidden={true}
-                  className="ms-Icon root-37 ms-Button-icon icon-57"
+                  className="ms-Icon root-105 ms-Button-icon icon-113"
                   data-icon-name="Info"
                   style={
                     Object {

src/app/shared/components/__snapshots__/maskedCopyableTextField.spec.tsx.snap

@@ -7,11 +7,11 @@ exports[`MaskedCopyableTextField snapshots it matches snapshot when allowMask =
   <div
     className="labelSection"
   >
-    <Component
+    <LabelWithTooltip
       htmlFor="maskedCopyableTextField0"
     >
       label1
-    </Component>
+    </LabelWithTooltip>
   </div>
   <div
     className="controlSection"
@@ -78,11 +78,11 @@ exports[`MaskedCopyableTextField snapshots it matches snapshot when allowMask =
   <div
     className="labelSection"
   >
-    <Component
+    <LabelWithTooltip
       htmlFor="maskedCopyableTextField3"
     >
       label1
-    </Component>
+    </LabelWithTooltip>
   </div>
   <div
     className="controlSection"
@@ -163,11 +163,11 @@ exports[`MaskedCopyableTextField snapshots it matches snapshot when allowMask =
   <div
     className="labelSection"
   >
-    <Component
+    <LabelWithTooltip
       htmlFor="maskedCopyableTextField6"
     >
       label1
-    </Component>
+    </LabelWithTooltip>
   </div>
   <div
     className="controlSection"
@@ -248,11 +248,11 @@ exports[`MaskedCopyableTextField snapshots it matches snapshot when error messag
   <div
     className="labelSection"
   >
-    <Component
+    <LabelWithTooltip
       htmlFor="maskedCopyableTextField9"
     >
       label1
-    </Component>
+    </LabelWithTooltip>
   </div>
   <div
     className="controlSection"

src/app/shared/global/sagas/setRepositoryLocationsSaga.ts

@@ -3,6 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 import { call } from 'redux-saga/effects';
+import { SagaIterator } from 'redux-saga';
 import { Action } from 'typescript-fsa';
 import { setConfigurableRepositoryPath, setLocalFolderPath, setRepositoryLocations } from '../../../api/services/modelRepositoryService';
 import { RepositoryLocationSettings } from '../state';
@@ -11,7 +12,7 @@ import { NotificationType } from '../../../api/models/notification';
 import { ResourceKeys } from '../../../../localization/resourceKeys';
 import { raiseNotificationToast } from '../../../notifications/components/notificationToast';
 
-export function* setRepositoryLocationsSaga(action: Action<RepositoryLocationSettings[]>) {
+export function* setRepositoryLocationsSaga(action: Action<RepositoryLocationSettings[]>): SagaIterator {
     const localFolderPath = yield call(getLocalFolderPath, action.payload);
     yield call(setLocalFolderPath, localFolderPath);
 

tsconfig.json

@@ -26,10 +26,5 @@
         "webpack.*",
         "**/*.spec.ts",
         "**/*.spec.tsx"
-    ],
+    ]
-    "awesomeTypescriptLoaderOptions": {
-        "reportFiles": [
-          "./src/**/*"
-        ]
-      }
 }

webpack.common.ts

@@ -1,55 +1,43 @@
 import * as webpack from 'webpack';
 import * as path from 'path';
 const HtmlWebpackPlugin = require('html-webpack-plugin'); // tslint:disable-line: no-var-requires
-const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // tslint:disable-line: no-var-requires
 const CopyPlugin = require('copy-webpack-plugin'); // tslint:disable-line: no-var-requires
-
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin'); // tslint:disable-line: no-var-requires
 const config: webpack.Configuration = {
     entry: {
         main: ['./src/index.tsx']
     },
+    output: {
+        filename: '[name].[contenthash].js',
+        path: path.resolve(__dirname, '.', 'dist'),
+    },
     module: {
         rules: [
+            { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/ },
             {
-                enforce: 'pre',
                 exclude: /node_modules/,
                 loader: 'tslint-loader',
-                options: {
-                    emitErrors: true,
-                    failOnHint: true
-                },
                 test: /\.tsx?$/
 
             },
             {
-                loader: 'file-loader?name=images/[name].[ext]',
+                loader:'file-loader',
+                options: {
+                    name: '?name=images/[name].[ext]',
+                },
                 test: /\.(jpe?g|png|gif|svg)$/i
             }
         ]
     },
     optimization: {
         splitChunks: {
-            cacheGroups: {
-                vendor: {
-                    test: /[\\/]node_modules[\\/]((?!(monaco-editor)|(@fluentui)).*)[\\/]/,
-                    name(module: any) { // tslint:disable-line:no-any
-                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
-                        // npm package names are URL-safe, but some servers don't like @ symbols
-                        return `npm.${packageName.replace('@', '')}`;
-                    },
-                },
-            },
             chunks: 'all',
             maxInitialRequests: Infinity,
             minSize: 0,
         },
     },
-    output: {
-        filename: '[name].[hash].js',
-        path: path.resolve(__dirname, '.', 'dist'),
-        publicPath: ''
-    },
     plugins: [
+        new NodePolyfillPlugin(),
         new HtmlWebpackPlugin({
                 template: path.resolve(__dirname, '.', 'src', 'index.html')
         }),
@@ -66,7 +54,7 @@ const config: webpack.Configuration = {
     resolve: {
         // Add '.ts' and '.tsx' as resolvable extensions.
         extensions: ['.ts', '.tsx', '.js', '.json']
-    },
+    }
 };
 
 export default config;

webpack.dev.ts

@@ -2,12 +2,17 @@
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License
  **********************************************************/
-import * as webpack from 'webpack';
+import { Configuration as WebpackConfig, NormalModuleReplacementPlugin } from 'webpack';
-import * as merge from 'webpack-merge';
+import { Configuration as WebpackDevServerConfig } from "webpack-dev-server";
+import { merge } from 'webpack-merge';
 import common from './webpack.common';
 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // tslint:disable-line: no-var-requires
 
-const config: webpack.Configuration = merge(common, {
+interface Config extends WebpackConfig {
+    devServer?: WebpackDevServerConfig
+}
+
+const config: Config = merge(common, {
 
     mode: 'development',
 
@@ -16,9 +21,6 @@ const config: webpack.Configuration = merge(common, {
 
     module: {
         rules: [
-            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
-            { test: /\.tsx?$/, loader: 'awesome-typescript-loader', exclude: /node_modules/ },
-
             // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
             { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader', exclude: /node_modules/ },
             {
@@ -40,7 +42,7 @@ const config: webpack.Configuration = merge(common, {
             filename: '[name].css',
             ignoreOrder: false, // Enable to remove warnings about conflicting order
         }),
-        new webpack.NormalModuleReplacementPlugin(
+        new NormalModuleReplacementPlugin(
             /(.*)appConfig.ENV(\.*)/,
             resource => resource.request = resource.request.replace(/ENV/, 'dev')
         )

webpack.electron.ts

@@ -4,11 +4,10 @@
  **********************************************************/
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // tslint:disable-line: no-var-requires
 import * as webpack from 'webpack';
-import * as merge from 'webpack-merge';
+import { merge } from 'webpack-merge';
 import common from './webpack.common';
 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // tslint:disable-line: no-var-requires
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // tslint:disable-line: no-var-requires
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); // tslint:disable-line: no-var-requires
-const TerserPlugin = require('terser-webpack-plugin'); // tslint:disable-line: no-var-requires
 
 const config: webpack.Configuration = merge(common, {
 
@@ -16,39 +15,25 @@ const config: webpack.Configuration = merge(common, {
 
     module: {
         rules: [
-            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
-            { test: /\.tsx?$/, loader: 'awesome-typescript-loader' },
             {
-                test: /\.(scss|css)$/,
+                test: /.s?css$/,
-                use: [
+                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
-                    { loader: 'style-loader'},
-                    MiniCssExtractPlugin.loader,
-                    { loader: 'css-loader', options: { sourceMap: false}},
-                    { loader: 'sass-loader', options: {sourceMap: false, implementation: require('sass')}}]
             }
         ]
     },
 
     optimization: {
-        minimizer: [new TerserPlugin(), new OptimizeCSSAssetsPlugin({})]
+        minimizer: [new CssMinimizerPlugin({})]
     },
 
     plugins: [
         // new BundleAnalyzerPlugin(),
         new MiniCssExtractPlugin({
-            // Options similar to the same options in webpackOptions.output
+            // // Options similar to the same options in webpackOptions.output
-            // all options are optional
+            // // all options are optional
-            chunkFilename: '[id].[hash].optimize.css',
+            // chunkFilename: '[id].[hash].optimize.css',
-            filename: '[name].[hash].optimize.css',
+            // filename: '[name].[hash].optimize.css',
-            ignoreOrder: false, // Enable to remove warnings about conflicting order
+            // ignoreOrder: false, // Enable to remove warnings about conflicting order
-        }),
-        new OptimizeCSSAssetsPlugin({
-            assetNameRegExp: /\.optimize\.css$/g,
-            canPrint: true,
-            cssProcessor: require('cssnano'), // tslint:disable-line
-            cssProcessorPluginOptions: {
-              preset: ['default', { discardComments: { removeAll: true } }],
-            },
         }),
         new webpack.NormalModuleReplacementPlugin(
             /(.*)appConfig.ENV(\.*)/,