Bug 1566007 - Part 2 : Add ManifestLoader component r=Ola,fluent-reviewers,flod

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

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

devtools/client/application/src/components/manifest/ManifestLoader.js

@@ -0,0 +1,88 @@
+/* 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 PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const {
+  aside,
+  p,
+} = require("devtools/client/shared/vendor/react-dom-factories");
+
+const FluentReact = require("devtools/client/shared/vendor/fluent-react");
+const Localized = createFactory(FluentReact.Localized);
+
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+
+const { services } = require("../../modules/services");
+const { updateManifest } = require("../../actions/manifest");
+
+class ManifestLoader extends PureComponent {
+  static get propTypes() {
+    return {
+      // these props get automatically injected via `connect`
+      dispatch: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = { error: "", hasLoaded: false, hasManifest: false };
+  }
+
+  componentDidMount() {
+    services.fetchManifest().then(({ manifest, errorMessage }) => {
+      this.props.dispatch(updateManifest(manifest, errorMessage));
+      this.setState({
+        error: errorMessage,
+        hasLoaded: true,
+        hasManifest: !!manifest,
+      });
+    });
+  }
+
+  renderResult() {
+    return this.state.hasManifest
+      ? Localized({ id: "manifest-loaded-ok" }, p({}))
+      : Localized({ id: "manifest-non-existing" }, p({}));
+  }
+
+  renderError() {
+    const { error } = this.state;
+
+    return [
+      Localized(
+        {
+          id: "manifest-loaded-error",
+          key: "manifest-error-label",
+        },
+        p({})
+      ),
+      p({ className: "technical-text", key: "manifest-error-message" }, error),
+    ];
+  }
+
+  render() {
+    const { error, hasLoaded } = this.state;
+
+    const loadingDOM = hasLoaded
+      ? null
+      : Localized({ id: "manifest-loading" }, p({}));
+
+    const errorDOM = error ? this.renderError() : null;
+    const resultDOM =
+      this.state.hasLoaded && !error ? this.renderResult() : null;
+
+    return aside({}, loadingDOM, errorDOM, resultDOM);
+  }
+}
+
+const mapDispatchToProps = dispatch => ({ dispatch });
+
+module.exports = connect(mapDispatchToProps)(ManifestLoader);

devtools/client/application/src/components/manifest/ManifestPage.js

@@ -12,17 +12,11 @@ const {
   section,
 } = require("devtools/client/shared/vendor/react-dom-factories");
 
-const FluentReact = require("devtools/client/shared/vendor/fluent-react");
-const Localized = createFactory(FluentReact.Localized);
+const ManifestLoader = createFactory(require("../manifest/ManifestLoader"));
 
 class ManifestPage extends PureComponent {
   render() {
-    return Localized(
-      {
-        id: "manifest-empty-intro",
-      },
-      section({ className: `manifest-page` })
-    );
+    return section({ className: `manifest-page` }, ManifestLoader({}));
   }
 }
 

devtools/client/application/src/components/manifest/moz.build

@@ -3,6 +3,7 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
+    'ManifestLoader.js',
     'ManifestPage.css',
     'ManifestPage.js'
 )

devtools/client/application/src/modules/services.js

@@ -10,10 +10,23 @@ class Services {
   }
 
   selectTool(toolId) {
+    this._assertInit();
+    return this._toolbox.selectTool(toolId);
+  }
+
+  async fetchManifest() {
+    this._assertInit();
+
+    const manifestFront = await this._toolbox.target.getFront("manifest");
+    const response = await manifestFront.fetchCanonicalManifest();
+
+    return response;
+  }
+
+  _assertInit() {
     if (!this._toolbox) {
       throw new Error("Services singleton has not been initialized");
     }
-    return this._toolbox.selectTool(toolId);
   }
 }
 

devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestPage.test.js.snap

@@ -1,11 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ManifestPage renders the expected snapshot 1`] = `
-<Localized
-  id="manifest-empty-intro"
+<section
+  className="manifest-page"
 >
-  <section
-    className="manifest-page"
-  />
-</Localized>
+  <Connect(ManifestLoader) />
+</section>
 `;

devtools/client/locales/en-US/application.ftl

@@ -80,5 +80,14 @@ serviceworker-empty-suggestions-debugger = Step through your Service Worker regi
 # Clicking on the link will open about:debugging in a new tab.
 serviceworker-empty-suggestions-aboutdebugging = Inspect Service Workers from other domains. <a>Open about:debugging</a>
 
-# Text displayed when no manifest was found for the current page.
-manifest-empty-intro = No manifest found to inspect.
+# Text displayed while we are loading the manifest file
+manifest-loading = Loading manifest…
+
+# Text displayed when the manifest has been successfully loaded
+manifest-loaded-ok = Manifest loaded.
+
+# Text displayed when there has been an error while trying to load the manifest
+manifest-loaded-error = There was an error while loading the manifest:
+
+# Text displayed when the page has no manifest available
+manifest-non-existing = No manifest found to inspect.