Phone as a Device support for QR code

package.json

@@ -1,6 +1,6 @@
 {
   "name": "azure-iot-explorer",
-  "version": "0.14.7",
+  "version": "0.14.8",
   "description": "This project welcomes contributions and suggestions. Most contributions require you to agree to a\r Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us\r the rights to use your contribution. For details, visit https://cla.microsoft.com.",
   "main": "host/electron.js",
   "build": {
@@ -88,6 +88,7 @@
     "react-dom": "16.13.1",
     "react-i18next": "11.11.1",
     "react-jsonschema-form": "1.7.0",
+    "react-qr-code": "^2.0.1",
     "react-router-dom": "5.2.0",
     "react-smooth-dnd": "0.11.0",
     "react-toastify": "4.4.0",

src/app/api/models/modelDefinition.ts

@@ -15,6 +15,7 @@ export interface ModelDefinition {
     '@context': string;
     '@id': string;
     '@type': string;
+    extends?: string | string[];
     comment?: string | object;
     contents?: ContentTypeUnion[];
     description?: string | object;

src/app/api/models/modelDefinitionWithSource.ts

@@ -7,6 +7,7 @@ import { REPOSITORY_LOCATION_TYPE } from '../../constants/repositoryLocationType
 
 export interface ModelDefinitionWithSource {
     modelDefinition: ModelDefinition;
+    extendedModel?: ModelDefinition;
     source: REPOSITORY_LOCATION_TYPE;
     isModelValid: boolean;
 }

src/app/css/_deviceContent.scss

@@ -40,17 +40,28 @@ $nav-width: 20%;
 
         .device-content-detail {
             transition: margin-left 0.5s;
-            margin-left: $nav-width;
+            margin: 0;
+            margin-left: 300px;
         }
 
         .device-content-detail.collapsed {
             margin-left: $nav-collapsed-width;
         }
     }
 }
+@media screen and (min-width: $screenSize) and (max-width: 1500px) {
+    .device-content{
+        .device-content-detail{
+            margin-left: $nav-width;
+        }
+    }
+}
 
 @media screen and (max-width: $screenSize) {
     .device-content {
+        .device-content-detail{
+            margin:0;
+        }
         .device-content-nav-bar.collapsed {
             .nav-links {
                 display: none;

src/app/css/_qrGeneration.scss

@@ -0,0 +1,15 @@
+.qrCodeGeneration {
+    text-align: center;
+    .storeLinks {
+        padding-top: 20px;
+    }
+    .qrCode {
+        padding:5px;
+        background-color: white;
+        width: 200px;
+        height: 200px;
+        border-radius: 8px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}

src/app/devices/deviceEvents/components/deviceEvents.tsx

@@ -69,8 +69,9 @@ export const DeviceEvents: React.FC = () => {
     const { pnpState, } = usePnpStateContext();
     const modelDefinitionWithSource = pnpState.modelDefinitionWithSource.payload;
     const modelDefinition = modelDefinitionWithSource && modelDefinitionWithSource.modelDefinition;
+    const extendedModelDefinition = modelDefinitionWithSource && modelDefinitionWithSource.extendedModel;
     const isLoading = pnpState.modelDefinitionWithSource.synchronizationStatus === SynchronizationStatus.working;
-    const telemetrySchema = React.useMemo(() => getDeviceTelemetry(modelDefinition), [modelDefinition]);
+    const telemetrySchema = React.useMemo(() => getDeviceTelemetry(extendedModelDefinition || modelDefinition), [extendedModelDefinition, modelDefinition]);
     const [showPnpModeledEvents, setShowPnpModeledEvents] = React.useState(false);
 
     // simulation specific

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

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DeviceModules matches snapshot 1`] = `
+<Component
+  expanded={false}
+  label="deviceIdentity.qrCode.label"
+  tooltipText="deviceIdentity.qrCode.toolTip"
+>
+  <div
+    className="qrCodeGeneration"
+  >
+    <h1>
+      deviceIdentity.qrCode.headerText
+    </h1>
+    <p>
+      deviceIdentity.qrCode.callToAction
+    </p>
+    <section
+      className="storeLinks"
+    >
+      <StyledLinkBase
+        href="https://play.google.com/store/apps/details?id=com.iot_pnp"
+        target="_blank"
+      >
+        <img
+          src="images/qrCodes/playstore.png"
+        />
+      </StyledLinkBase>
+      <StyledLinkBase
+        href="https://apps.apple.com/app/iot-plug-and-play/id1563783687"
+        target="_blank"
+      >
+        <img
+          src="images/qrCodes/appstore.png"
+        />
+      </StyledLinkBase>
+    </section>
+    <section>
+      <div
+        className="qrCode"
+      >
+        <Memo(QRCode)
+          size={200}
+          value="eyJkZXZpY2VJZCI6InNvbWVfZGV2aWNlIiwiZGV2aWNlS2V5IjoiaW52YWxpZF9kZXZpY2Vfa2V5IiwiaG9zdE5hbWUiOiJpbnZhbGlkX2hvc3QifQ=="
+        />
+      </div>
+    </section>
+  </div>
+</Component>
+`;

src/app/devices/deviceIdentity/components/deviceIdentity.tsx

@@ -18,6 +18,7 @@ import { MultiLineShimmer } from '../../../shared/components/multiLineShimmer';
 import { HeaderView } from '../../../shared/components/headerView';
 import { SasTokenGenerationView } from '../../shared/components/sasTokenGenerationView';
 import { useIotHubContext } from '../../../iotHub/hooks/useIotHubContext';
+import { QrGenerationView } from './qrGenerationView';
 import '../../../css/_deviceDetail.scss';
 
 export interface DeviceIdentityDispatchProps {
@@ -34,7 +35,7 @@ export const DeviceIdentityInformation: React.FC<DeviceIdentityDataProps & Devic
     const { hostName } = useIotHubContext();
 
     const { deviceIdentity, synchronizationStatus } = props;
-    const [ state, setState ] = React.useState({
+    const [state, setState] = React.useState({
         identity: props.deviceIdentity,
         isDirty: false,
     });
@@ -56,9 +57,9 @@ export const DeviceIdentityInformation: React.FC<DeviceIdentityDataProps & Devic
 
         if (props.deviceIdentity &&
             props.deviceIdentity.authentication.type === DeviceAuthenticationType.SymmetricKey) {
-                onSwapKeys = swapKeys;
-                onGeneratePrimaryKey = generatePrimaryKey;
-                onGenerateSecondaryKey = generateSecondaryKey;
+            onSwapKeys = swapKeys;
+            onGeneratePrimaryKey = generatePrimaryKey;
+            onGenerateSecondaryKey = generateSecondaryKey;
         }
 
         return (
@@ -82,7 +83,7 @@ export const DeviceIdentityInformation: React.FC<DeviceIdentityDataProps & Devic
         return (
             <>
                 {props.synchronizationStatus === SynchronizationStatus.working || props.synchronizationStatus === SynchronizationStatus.updating ?
-                    <MultiLineShimmer/> :
+                    <MultiLineShimmer /> :
                     <>
                         <MaskedCopyableTextField
                             ariaLabel={t(ResourceKeys.deviceIdentity.deviceID)}
@@ -93,7 +94,7 @@ export const DeviceIdentityInformation: React.FC<DeviceIdentityDataProps & Devic
                             labelCallout={t(ResourceKeys.deviceIdentity.deviceIDTooltip)}
                         />
                         {renderDeviceAuthProperties()}
-                        <br/>
+                        <br />
                         {authType === DeviceAuthenticationType.SymmetricKey && renderSasTokenSection()}
                         {renderHubRelatedInformation()}
                     </>
@@ -104,10 +105,18 @@ export const DeviceIdentityInformation: React.FC<DeviceIdentityDataProps & Devic
 
     const renderSasTokenSection = () => {
         return (
-            <SasTokenGenerationView
-                activeAzureResourceHostName={hostName}
-                deviceIdentity={state.identity}
-            />
+            <>
+                <SasTokenGenerationView
+                    activeAzureResourceHostName={hostName}
+                    deviceIdentity={state.identity}
+                />
+                <br />
+                <QrGenerationView
+                    hostName={hostName}
+                    deviceId={state.identity.deviceId}
+                    deviceKey={state.identity.authentication.symmetricKey.primaryKey}
+                />
+            </>
         );
     };
 
@@ -261,8 +270,8 @@ export const DeviceIdentityInformation: React.FC<DeviceIdentityDataProps & Devic
 
     const swapKeys = () => {
         const identityDeepCopy: DeviceIdentity = JSON.parse(JSON.stringify(state.identity));
-        const originalPrimaryKey  = identityDeepCopy.authentication.symmetricKey.primaryKey;
-        const originalSecondaryKey  = identityDeepCopy.authentication.symmetricKey.secondaryKey;
+        const originalPrimaryKey = identityDeepCopy.authentication.symmetricKey.primaryKey;
+        const originalSecondaryKey = identityDeepCopy.authentication.symmetricKey.secondaryKey;
 
         identityDeepCopy.authentication.symmetricKey.primaryKey = originalSecondaryKey;
         identityDeepCopy.authentication.symmetricKey.secondaryKey = originalPrimaryKey;
@@ -277,7 +286,8 @@ export const DeviceIdentityInformation: React.FC<DeviceIdentityDataProps & Devic
     const changeToggle = (event: React.MouseEvent<HTMLElement>, checked?: boolean) => {
         const identity = {
             ...state.identity,
-            status: checked ? DeviceStatus.Enabled.toString() : DeviceStatus.Disabled.toString()};
+            status: checked ? DeviceStatus.Enabled.toString() : DeviceStatus.Disabled.toString()
+        };
         setState({
             ...state,
             identity,

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

@@ -0,0 +1,19 @@
+/***********************************************************
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License
+ **********************************************************/
+ import * as React from 'react';
+ import { shallow } from 'enzyme';
+ import { QrGenerationView } from './qrGenerationView';
+
+ describe('DeviceModules', () => {
+     it('matches snapshot', () => {
+         expect(shallow(
+             <QrGenerationView
+                deviceId="some_device"
+                deviceKey="invalid_device_key"
+                hostName="invalid_host"
+             />
+         )).toMatchSnapshot();
+     });
+ });