Phone as a Device support for QR code (#480)

* Squashed commit of the following: commit f982a59 Author: Paul Montgomery <pamontg@microsoft.com> Date: Wed Oct 20 12:18:31 2021 -0700 When no desiredValue, pre load with any reported Value commit bfe43b6 Author: Paul Montgomery <pamontg@microsoft.com> Date: Fri Sep 24 17:12:21 2021 -0700 QR supporting tesxt and fix falsey reported ack values commit 6a8dc92 Author: Paul Montgomery <pamontg@microsoft.com> Date: Tue Aug 31 14:47:52 2021 -0700 Fix some tests commit 43da209 Author: Paul Montgomery <pamontg@microsoft.com> Date: Tue Aug 31 09:14:07 2021 -0700 Begin implementing extends commit 2dac2d2 Author: Paul Montgomery <pamontg@microsoft.com> Date: Fri Aug 20 09:47:47 2021 -0700 Update electron-builder and handle enums better commit b9ef12f Author: Paul Montgomery <pamontg@microsoft.com> Date: Mon Aug 2 10:02:33 2021 -0700 Add the QR code generating bits for mobile app * Bump version number * update a test
Azure · Nov 9, 2021 · cab6604 · cab6604
1 parent 54e351b
commit cab6604
Show file tree

Hide file tree

Showing 26 changed files with 320 additions and 55 deletions.
diff --git a/images/qrCodes/appstore.png b/images/qrCodes/appstore.png
diff --git a/images/qrCodes/playstore.png b/images/qrCodes/playstore.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/app/api/models/modelDefinition.ts b/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;

diff --git a/src/app/api/models/modelDefinitionWithSource.ts b/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;
 }
diff --git a/src/app/css/_deviceContent.scss b/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;

diff --git a/src/app/css/_qrGeneration.scss b/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;
+    }
+}
diff --git a/src/app/devices/deviceEvents/components/deviceEvents.tsx b/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

diff --git a/src/app/devices/deviceIdentity/components/__snapshots__/qrGenerationView.spec.tsx.snap b/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>
+`;
diff --git a/src/app/devices/deviceIdentity/components/deviceIdentity.tsx b/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,

diff --git a/src/app/devices/deviceIdentity/components/qrGenerationView.spec.tsx b/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();
+     });
+ });