add widget fallback

webpack/__tests__/fallback_widget_test.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { mount, shallow } from "enzyme";
+import { FallbackWidget } from "../fallback_widget";
+
+describe("<FallbackWidget/>", function () {
+
+  it("renders widget fallback", function () {
+    const wrapper = mount(<FallbackWidget title="FakeWidget" />);
+    const widget = wrapper.find(".widget-wrapper");
+    const header = widget.find(".widget-header");
+    expect(header.text()).toContain("FakeWidget");
+    const body = widget.find(".widget-body");
+    expect(body.text()).toContain("Widget load failed.");
+  });
+
+  it("renders widget fallback with help text", function () {
+    const helpText = "This is a fake widget.";
+    const wrapper = shallow(<FallbackWidget
+      title="FakeWidget" helpText={helpText} />);
+    expect(wrapper.html()).toContain(
+      "<i class=\"fa fa-question-circle help-icon\">" +
+      "<div class=\"help-text\">This is a fake widget.</div></i>");
+  });
+
+});

webpack/fallback_widget.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { t } from "i18next";
+import { Widget, WidgetHeader } from "./ui";
+
+/*
+ * Widget to display if the desired widget fails to load.
+ *
+ * Example usage where `this.props.feed` is required, but may be undefined:
+ *   {this.props.feed
+ *     ? <WebcamPanel
+ *         bot={this.props.bot}
+ *         feed={this.props.feed}
+ *         dispatch={this.props.dispatch} />
+ *     : <FallbackWidget
+ *         title="Webcam"
+ *         helpText={ToolTips.WEBCAM} />}
+ */
+
+export interface FallbackWidgetProps {
+  title: string;
+  helpText?: string;
+}
+
+export class FallbackWidget extends
+  React.Component<FallbackWidgetProps, {}> {
+
+  render() {
+    return (
+      <Widget>
+        <WidgetHeader
+          title={t(this.props.title)}
+          helpText={this.props.helpText} />
+        <div className="widget-body">
+          {t("Widget load failed.")}
+        </div>
+      </Widget>
+    );
+  }
+}