Merge pull request #294 from Azure-Samples/montgomp/dtdlV3stopgap

Montgomp/dtdl v3stopgap

client/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@azure/digital-twins-core": "^1.0.3",
     "@azure/identity": "^1.2.4",
-    "@microsoft/iot-cardboard-js": "^1.0.0-beta.301",
+    "@microsoft/iot-cardboard-js": "^1.0.0-beta.342",
     "@microsoft/signalr": "^3.1.11",
     "@types/react": "^16.14.2",
     "@types/react-dom": "^16.9.10",

client/public/locales/en/translation.json

@@ -25,7 +25,9 @@
     },
     "errorMessages": {
         "error": "Error",
-        "chinaSupport": "The Azure Digital Twins Explorer is not fully supported in China yet."
+        "chinaSupport": "The Azure Digital Twins Explorer is not fully supported in China yet.",
+        "incompatibleLanguageVersion": "This ADT Instance contains DTDL v3 models, which the ADT Explorer does not yet fully support.",
+        "closeButton": "Close alert"
     },
     "errorBoundary": {
         "modalHeader": "Something went wrong...",

client/src/App.js

@@ -27,7 +27,8 @@ import { ImportComponent } from "./components/ImportComponent/ImportComponent";
 import TabularViewComponent from "./components/TabularViewComponent/TabularViewComponent";
 import { ConsoleComponent } from "./components/ConsoleComponent/ConsoleComponent";
 import AppCommandBar from "./components/AppCommandBar/AppCommandBar";
-import ErrorMessageComponent from "./components/ErrorMessageComponent/ErrorMessage";
+import ErrorMessageModal from "./components/ErrorMessageComponent/ErrorMessageModal";
+import ErrorMessageBar from "./components/ErrorMessageComponent/ErrorMessageBar";
 import LoaderComponent from "./components/LoaderComponent/LoaderComponent";
 
 import { eventService } from "./services/EventService";
@@ -447,6 +448,7 @@ class App extends Component {
               </Stack>
             </div>
             <Stack className="work-area">
+              <ErrorMessageBar />
               <ModelUploadMessageBar
                 modelUploadResults={this.state.modelUploadResults}
                 onDismiss={() => this.setState({ modelUploadResults: null })}
@@ -535,7 +537,7 @@ class App extends Component {
             </Stack>
           </div>
         </ErrorBoundary>
-        <ErrorMessageComponent />
+        <ErrorMessageModal />
         { isLoading && <LoaderComponent /> }
       </>
     );

client/src/components/ErrorMessageComponent/ErrorMessage.scss

@@ -88,4 +88,4 @@
   pre {
     user-select: text;
   }
-}
+}

client/src/components/ErrorMessageComponent/ErrorMessageBar.js

@@ -0,0 +1,58 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { MessageBar, MessageBarType } from "office-ui-fabric-react";
+import React, { Component } from "react";
+import { withTranslation } from "react-i18next";
+import { eventService } from "../../services/EventService";
+
+import "./ErrorMessage.scss";
+import { isDtdlVersion3 } from "./ErrorMessageHelper";
+
+class ErrorMessageBar extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      incomatibleLangauageVersion: false,
+      showBar: true
+    };
+  }
+
+  componentDidMount() {
+    eventService.subscribeError(exc => {
+      if (isDtdlVersion3(exc)) {
+        this.setState({
+          incomatibleLangauageVersion: true
+        });
+      }
+    });
+  }
+
+  close = () => {
+    eventService.publishHideWarningMessage();
+    this.setState({
+      showBar: false
+    });
+  }
+
+  render() {
+    const { incomatibleLangauageVersion, showBar } = this.state;
+    if (incomatibleLangauageVersion && showBar) {
+      // Just show a warning that v3 isn't fully supported at this time.
+      return (
+        <MessageBar
+          messageBarType={MessageBarType.warning}
+          isMultiline={false}
+          onDismiss={this.close}
+          dismissButtonAriaLabel={this.props.t("errorMessages.closeButton")}>
+          {this.props.t("errorMessages.incompatibleLanguageVersion")}
+        </MessageBar>
+      );
+    }
+    return (<div />);
+  }
+
+}
+
+export default withTranslation("translation", { withRef: true })(ErrorMessageBar);

client/src/components/ErrorMessageComponent/ErrorMessageHelper.js

@@ -0,0 +1,6 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+export const isDtdlVersion3 = exc =>
+  (exc?.name === "DocumentParseError" && exc?.innerError?.details?.url === "dtmi:dtdl:context;3")
+  || exc?.message === "Invalid context. context is undefined";

client/src/components/ErrorMessageComponent/ErrorMessage.js → client/src/components/ErrorMessageComponent/ErrorMessageModal.js

@@ -13,8 +13,9 @@ import { rbacService} from "../../services/RBACService";
 import { configService } from "../../services/ConfigService";
 
 import "./ErrorMessage.scss";
+import { isDtdlVersion3 } from "./ErrorMessageHelper";
 
-export class ErrorMessageComponent extends Component {
+export class ErrorMessageModal extends Component {
 
   constructor(props) {
     super(props);
@@ -35,8 +36,11 @@ export class ErrorMessageComponent extends Component {
       let message = "";
       let errorMessage = "";
       let auth = false;
+      let v3 = false;
 
-      if (exc && exc.name === "RestError" && exc.statusCode === 403) {
+      if (isDtdlVersion3(exc)) {
+        v3 = true;
+      } else if (exc && exc.name === "RestError" && exc.statusCode === 403) {
         errorMessage = CUSTOM_AUTH_ERROR_MESSAGE;
         message = CUSTOM_AUTH_ERROR_MESSAGE;
         auth = true;
@@ -54,7 +58,8 @@ export class ErrorMessageComponent extends Component {
       this.setState({
         errorMessage,
         stackErrorMessage: exc.stack ? exc.stack.replace(/\n/g, "<br>").replace(/ /gi, "&nbsp") : null,
-        showModal: true,
+        // Don't show modal for v3 dtdl issue
+        showModal: !v3,
         showFixAuth: auth
       });
     });
@@ -93,6 +98,7 @@ export class ErrorMessageComponent extends Component {
 
   render() {
     const { showModal, errorMessage, stackErrorMessage, showFixAuth, showAuthSpinner, showAuthStatus, showAuthResponse, showAdtChinaWarningMessage } = this.state;
+
     let authComponent = "";
     if (showFixAuth) {
       authComponent = <DefaultButton className="modal-button close-button" onClick={this.fixPermissions} style={{width: 150}}>Assign yourself data reader access</DefaultButton>;
@@ -147,4 +153,4 @@ export class ErrorMessageComponent extends Component {
 
 }
 
-export default withTranslation("translation", { withRef: true })(ErrorMessageComponent);
+export default withTranslation("translation", { withRef: true })(ErrorMessageModal);

client/src/components/GraphViewerComponent/GraphViewerComponent.scss

@@ -127,6 +127,11 @@
     top: -174px;
     left: 20px;
   }
+  .gc-controls-with-error {
+    position: absolute;
+    left: 20px;
+    top: -187px;
+  }
 
   .gc-filter-contents {
     height: 8px;

client/src/components/GraphViewerComponent/GraphViewerFilteringComponent/GraphViewerFilteringComponent.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { withTranslation } from "react-i18next";
 
 import {
@@ -8,6 +8,8 @@ import {
   PivotItem
 } from "office-ui-fabric-react";
 import GraphViewerTermManagementComponent from "../GraphViewerTermManagementComponent/GraphViewerTermManagementComponent";
+import { eventService } from "../../../services/EventService";
+import { isDtdlVersion3 } from "../../ErrorMessageComponent/ErrorMessageHelper";
 
 const GraphViewerFilteringComponent = ({
   toggleFilter,
@@ -36,9 +38,22 @@ const GraphViewerFilteringComponent = ({
 }) => {
   const filterButtonText = canSelectAllFilter ? selectAllFilteredText : t("graphViewerFilteringComponent.deselectAll");
   const highlightButtonText = canSelectAllHighlight ? selectAllHighlightedText : t("graphViewerFilteringComponent.deselectAll");
+
+  const [ state, setState ] = useState({containerClass: "gc-controls"});
+
+  useEffect(() => {
+    eventService.subscribeError(exc => {
+      if (isDtdlVersion3(exc)) {
+        setState({containerClass: "gc-controls-with-error"});
+      }
+    });
+    eventService.subscribeHideWarningMessage(() => {
+      setState({containerClass: "gc-controls"});
+    });
+  });
   return (
     <>
-      <div className="gc-controls">
+      <div className={state.containerClass}>
         <Stack horizontal={false}>
           <div className="controls_buttonGroup">
             <IconButton

client/src/components/ModelGraphViewerComponent/ModelGraphViewerComponent.scss

@@ -77,6 +77,11 @@
       top: -136px;
       left: 20px;
     }
+    .gc-controls-with-error {
+      position: absolute;
+      left: 20px;
+      top: -150px;
+    }
     .gc-filter-contents {
       height: 8px;
       transition: height 0.2s ease-out;