Bug 1587690: Implement simple issue list UI. r=rcaliman,ladybenko

Depends on D48948

Differential Revision: https://phabricator.services.mozilla.com/D48949

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/compatibility/CompatibilityView.js

@@ -32,6 +32,7 @@ class CompatibilityView {
       Provider,
       {
         id: "compatibilityview",
+        store: this.inspector.store,
       },
       compatibilityApp
     );

devtools/client/inspector/compatibility/components/CompatibilityApp.js

@@ -4,18 +4,43 @@
 
 "use strict";
 
-const { PureComponent } = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+const {
+  createFactory,
+  PureComponent,
+} = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const Types = require("../types");
+
+const IssueList = createFactory(require("./IssueList"));
 
 class CompatibilityApp extends PureComponent {
+  static get propTypes() {
+    return {
+      selectedNodeIssues: PropTypes.arrayOf(PropTypes.shape(Types.issue))
+        .isRequired,
+    };
+  }
+
   render() {
+    const { selectedNodeIssues } = this.props;
+
     return dom.div(
       {
         className: "theme-sidebar inspector-tabpanel",
       },
-      "Compatibility View"
+      selectedNodeIssues.length
+        ? IssueList({ issues: selectedNodeIssues })
+        : null
     );
   }
 }
 
-module.exports = CompatibilityApp;
+const mapStateToProps = state => {
+  return {
+    selectedNodeIssues: state.compatibility.selectedNodeIssues,
+  };
+};
+module.exports = connect(mapStateToProps)(CompatibilityApp);

devtools/client/inspector/compatibility/components/IssueItem.js

@@ -0,0 +1,29 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+const Types = require("../types");
+
+class IssueItem extends PureComponent {
+  static get propTypes() {
+    return {
+      ...Types.issue,
+    };
+  }
+
+  render() {
+    return dom.li(
+      { key: `${this.props.property}:${this.props.type}` },
+      Object.entries(this.props).map(([key, value]) =>
+        dom.div({ key }, `${key}:${value}`)
+      )
+    );
+  }
+}
+
+module.exports = IssueItem;

devtools/client/inspector/compatibility/components/IssueList.js

@@ -0,0 +1,32 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  PureComponent,
+} = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const Types = require("../types");
+
+const IssueItem = createFactory(require("./IssueItem"));
+
+class IssueList extends PureComponent {
+  static get propTypes() {
+    return {
+      issues: PropTypes.arrayOf(PropTypes.shape(Types.issue)).isRequired,
+    };
+  }
+
+  render() {
+    const { issues } = this.props;
+
+    return dom.ul({}, issues.map(issue => IssueItem({ ...issue })));
+  }
+}
+
+module.exports = IssueList;

devtools/client/inspector/compatibility/components/moz.build

@@ -6,4 +6,6 @@
 
 DevToolsModules(
     "CompatibilityApp.js",
+    "IssueItem.js",
+    "IssueList.js",
 )

devtools/client/inspector/compatibility/moz.build

@@ -16,6 +16,7 @@ XPCSHELL_TESTS_MANIFESTS += ['test/unit/xpcshell.ini']
 
 DevToolsModules(
     'CompatibilityView.js',
+    'types.js',
 )
 
 with Files('**'):

devtools/client/inspector/compatibility/types.js

@@ -0,0 +1,34 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const browser = {
+  // The id of the browser which is defined in MDN compatibility dataset.
+  // e.g. "firefox"
+  // https://github.com/mdn/browser-compat-data/tree/master/browsers
+  id: PropTypes.string.isRequired,
+  // The version of this browser.
+  // e.g. "70.0"
+  version: PropTypes.string.isRequired,
+};
+
+const issue = {
+  // Type of this issue. The type should be one of MDNCompatibility.ISSUE_TYPE.
+  type: PropTypes.string.isRequired,
+  // The CSS property which caused this issue.
+  property: PropTypes.string.isRequired,
+  // The url of MDN documentation for the CSS property.
+  url: PropTypes.string.isRequired,
+  // Whether the CSS property is deprecated or not.
+  deprecated: PropTypes.bool.isRequired,
+  // Whether the CSS property is experimental or not.
+  experimental: PropTypes.bool.isRequired,
+  // The browsers which do not support the CSS property.
+  unsupportedBrowsers: PropTypes.arrayOf(PropTypes.shape(browser)).isRequired,
+};
+
+exports.issue = issue;