resolve alert content upon fetch

frontend/api/api.ts

@@ -154,7 +154,7 @@ export class API {
   }
   /** /api/alerts/:id */
   get alertPath() { return `${this.baseUrl}/api/alerts/`; }
-  /** /api/global_bulletins/ */
+  /** /api/global_bulletins/:id */
   get globalBulletinPath() { return `${this.baseUrl}/api/global_bulletins/`; }
   get syncPatch() { return `${this.baseUrl}/api/device/sync/`; }
 }

frontend/messages/__tests__/cards_test.tsx

@@ -2,7 +2,7 @@ jest.mock("../../devices/actions", () => ({ updateConfig: jest.fn() }));
 
 jest.mock("../../api/crud", () => ({ destroy: jest.fn() }));
 
-const mockData: Bulletin = {
+const fakeBulletin: Bulletin = {
   content: "Alert content.",
   href: "https://farm.bot",
   href_label: "See more",
@@ -10,6 +10,8 @@ const mockData: Bulletin = {
   slug: "slug",
   title: "Announcement",
 };
+
+let mockData: Bulletin | undefined = fakeBulletin;
 jest.mock("../actions", () => ({
   fetchBulletinContent: jest.fn(() => Promise.resolve(mockData)),
 }));
@@ -95,9 +97,19 @@ describe("<AlertCard />", () => {
       expect(wrapper.text()).toContain(string));
   });
 
+  it("has no content to load for bulletin card", async () => {
+    mockData = undefined;
+    const p = fakeProps();
+    p.alert.problem_tag = "api.bulletin.unread";
+    const wrapper = await mount(<AlertCard {...p} />);
+    ["Unable to load content.", "Slug"].map(string =>
+      expect(wrapper.text()).toContain(string));
+  });
+
   it("renders loaded bulletin card", async () => {
     const p = fakeProps();
     p.alert.problem_tag = "api.bulletin.unread";
+    mockData = fakeBulletin;
     mockData.href_label = "See more";
     mockData.type = "info";
     const wrapper = await mount(<AlertCard {...p} />);
@@ -110,6 +122,7 @@ describe("<AlertCard />", () => {
   it("renders loaded bulletin card with missing fields", async () => {
     const p = fakeProps();
     p.alert.problem_tag = "api.bulletin.unread";
+    mockData = fakeBulletin;
     mockData.href_label = undefined;
     mockData.type = "unknown";
     const wrapper = await mount(<AlertCard {...p} />);

frontend/messages/actions.ts

@@ -2,10 +2,11 @@ import axios from "axios";
 import { API } from "../api";
 import { Bulletin } from "./interfaces";
 
-const url = (slug: string) => `${API.current.globalBulletinPath}/${slug}`;
+const url = (slug: string) => `${API.current.globalBulletinPath}${slug}`;
 
-export const fetchBulletinContent = (slug: string): Promise<Bulletin> => {
-  return axios
-    .get<Bulletin>(url(slug))
-    .then(response => Promise.resolve(response.data));
-};
+export const fetchBulletinContent =
+  (slug: string): Promise<Bulletin | undefined> => {
+    return axios
+      .get<Bulletin>(url(slug))
+      .then(response => Promise.resolve(response.data));
+  };

frontend/messages/cards.tsx

@@ -79,16 +79,19 @@ const ICON_LOOKUP: { [x: string]: string } = {
 
 class BulletinAlert
   extends React.Component<CommonAlertCardProps, BulletinAlertState> {
-  state: BulletinAlertState = { bulletin: undefined };
+  state: BulletinAlertState = { bulletin: undefined, no_content: false };
 
   componentDidMount() {
     fetchBulletinContent(this.props.alert.slug)
-      .then(bulletin => this.setState({ bulletin }));
+      .then(bulletin => bulletin
+        ? this.setState({ bulletin })
+        : this.setState({ no_content: true }));
   }
 
   get bulletinData(): Bulletin {
     return this.state.bulletin || {
-      content: t("Loading..."),
+      content: this.state.no_content ? t("Unable to load content.")
+        : t("Loading..."),
       href: undefined,
       href_label: undefined,
       type: "info",

frontend/messages/interfaces.ts

@@ -94,4 +94,5 @@ export interface Bulletin {
 
 export interface BulletinAlertState {
   bulletin: Bulletin | undefined;
+  no_content: boolean;
 }