appsignal · shairyar · Mar 22, 2023 · Mar 22, 2023 · Mar 22, 2023 · Apr 12, 2023
diff --git a/.env.development b/.env.development
@@ -1,5 +1,5 @@
 NEXT_PUBLIC_API_MOCKING=enabled
 NEXT_PURGE_CSS=enabled
 NEXT_TELEMETRY_DISABLED=1
-DEFAULT_HOSTNAME="staging.appsignal-status.online"
-API_ENDPOINT="api.appsignal-status.online"
+DEFAULT_HOSTNAME="ctl.appsignal-status.com"
+API_ENDPOINT="api.appsignal-status.com"
diff --git a/components/CurrentStatus/CurrentStatus.js b/components/CurrentStatus/CurrentStatus.js
@@ -4,6 +4,7 @@ import {
   faCheck,
   faExclamationTriangle,
 } from "@fortawesome/free-solid-svg-icons";
+import ReactMarkdown from "react-markdown";
 
 const iconMapping = {
   up: {
@@ -48,12 +49,19 @@ const CurrentStatus = ({ statusPage: { state, updates } }) => {
 
   return (
     <section className="mt-16">
-      <div className="container text-center">
+      <div className="container">
         {renderIcon()}
-        <h1 className="mt-4 mb-3 c_h-heading c_h-heading--3xl sm:c_h-heading--4xl">
+        <h1 className="mt-4 mb-3 c_h-heading c_h-heading--3xl sm:c_h-heading--4xl text-center">
           {state === "up" ? "No known issues" : lastUpdateMessage?.title}
         </h1>
-        <p className="text-gray-700">{lastUpdateMessage?.description}</p>
+        {lastUpdateMessage?.description && (
+          <div
+            className="text-gray-700 bg-white shadow-sm rounded py-5 px-6"
+            data-testid="CurrentStatusMarkdownDescription"
+          >
+            <ReactMarkdown>{lastUpdateMessage?.description}</ReactMarkdown>
+          </div>
+        )}
       </div>
     </section>
   );

diff --git a/components/CurrentStatus/CurrentStatus.test.js b/components/CurrentStatus/CurrentStatus.test.js
@@ -46,4 +46,26 @@ describe("CurrentStatus", () => {
     ).toBeInTheDocument();
     expect(screen.getByText("We are printing new paper")).toBeInTheDocument();
   });
+
+  test("it renders markdown", () => {
+    const { container } = build({
+      statusPage: {
+        state: "down",
+        updates: [
+          {
+            title: "Problems with the paper stock",
+            description:
+              "# This is heading This is a [link](https://example.com). ",
+            time: new Date("2021-09-01 12:00"),
+          },
+        ],
+      },
+    });
+    expect(container).toMatchSnapshot();
+
+    const status = screen.getAllByTestId("CurrentStatusMarkdownDescription");
+
+    expect(status[0].innerHTML).toContain("<h1>");
+    expect(status[0].innerHTML).toContain("<a href");
+  });
 });
diff --git a/components/CurrentStatus/__snapshots__/CurrentStatus.test.js.snap b/components/CurrentStatus/__snapshots__/CurrentStatus.test.js.snap
@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CurrentStatus it renders markdown 1`] = `
+<div>
+  <section
+    class="mt-16"
+  >
+    <div
+      class="container"
+    >
+      <div
+        class="flex items-center justify-center h-16 sm:h-20 w-16 sm:w-20 mx-auto rounded-full bg-red-200"
+      >
+        <div
+          class="flex items-center justify-center h-12 sm:h-16 w-12 sm:w-16 rounded-full bg-red-500"
+        >
+          <svg
+            aria-hidden="true"
+            class="svg-inline--fa fa-exclamation-triangle fa-w-18 fa-fw text-white text-2xl sm:text-3xl"
+            data-icon="exclamation-triangle"
+            data-prefix="fas"
+            focusable="false"
+            role="img"
+            viewBox="0 0 576 512"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </div>
+      <h1
+        class="mt-4 mb-3 c_h-heading c_h-heading--3xl sm:c_h-heading--4xl text-center"
+      >
+        Problems with the paper stock
+      </h1>
+      <div
+        class="text-gray-700 bg-white shadow-sm rounded py-5 px-6"
+        data-testid="CurrentStatusMarkdownDescription"
+      >
+        <h1>
+          This is heading This is a 
+          <a
+            href="https://example.com"
+          >
+            link
+          </a>
+          .
+        </h1>
+      </div>
+    </div>
+  </section>
+</div>
+`;
diff --git a/components/StatusUpdate/StatusUpdate.js b/components/StatusUpdate/StatusUpdate.js
@@ -1,6 +1,7 @@
 import PropTypes from "prop-types";
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
+import ReactMarkdown from "react-markdown";
 dayjs.extend(advancedFormat);
 
 import StatusIcon from "../StatusIcon/StatusIcon";
@@ -17,7 +18,12 @@ const StatusUpdate = ({ update }) => {
       <div className="">
         <h3 className="c_h-heading mb-1">{update.title}</h3>
         {update.description && (
-          <p className="text-gray-700">{update.description}</p>
+          <div
+            className="text-gray-700"
+            data-testid="StatusMarkdownDescription"
+          >
+            <ReactMarkdown>{update.description}</ReactMarkdown>
+          </div>
         )}
         <p className="text-gray-600 text-ms mt-2">
           {dayjs(update.time).format("MMM. Do HH:mm")}

diff --git a/components/StatusUpdate/StatusUpdate.test.js b/components/StatusUpdate/StatusUpdate.test.js
@@ -23,4 +23,12 @@ describe("StatusUpdate", () => {
     expect(screen.getByText("Some description")).toBeInTheDocument();
     expect(screen.getByText("Aug. 30th 08:43")).toBeInTheDocument();
   });
+
+  test("it renders markdown", () => {
+    build({ update: statusPageMock.updates[2] });
+
+    const status = screen.getAllByTestId("StatusMarkdownDescription");
+    expect(status[0].innerHTML).toContain("<h1>");
+    expect(status[0].innerHTML).toContain("<a href");
+  });
 });
diff --git a/components/StatusUpdate/__snapshots__/StatusUpdate.test.js.snap b/components/StatusUpdate/__snapshots__/StatusUpdate.test.js.snap
@@ -38,11 +38,14 @@ exports[`StatusUpdate renders without errors 1`] = `
       >
         Some update
       </h3>
-      <p
+      <div
         class="text-gray-700"
+        data-testid="StatusMarkdownDescription"
       >
-        Some description
-      </p>
+        <p>
+          Some description
+        </p>
+      </div>
       <p
         class="text-gray-600 text-ms mt-2"
       >

diff --git a/components/StatusUpdates/__snapshots__/StatusUpdates.test.js.snap b/components/StatusUpdates/__snapshots__/StatusUpdates.test.js.snap
@@ -101,18 +101,78 @@ exports[`StatusUpdates it renders without errors 1`] = `
             >
               Some update
             </h3>
-            <p
+            <div
               class="text-gray-700"
+              data-testid="StatusMarkdownDescription"
             >
-              Some description
-            </p>
+              <p>
+                Some description
+              </p>
+            </div>
             <p
               class="text-gray-600 text-ms mt-2"
             >
               Aug. 30th 08:43
             </p>
           </div>
         </div>
+        <div
+          class="flex bg-white shadow-sm rounded py-5 px-6"
+          data-testid="statusUpdate"
+        >
+          <div
+            class="mr-4 my-0.5"
+          >
+            <span
+              class="flex items-center justify-center h-4 w-4 rounded-full bg-green-500 text-white"
+            >
+              <svg
+                aria-hidden="true"
+                class="svg-inline--fa fa-check fa-w-16 fa-fw "
+                data-icon="check"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style="font-size: 8px;"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+          </div>
+          <div
+            class=""
+          >
+            <h3
+              class="c_h-heading mb-1"
+            >
+              Update with markdown
+            </h3>
+            <div
+              class="text-gray-700"
+              data-testid="StatusMarkdownDescription"
+            >
+              <h1>
+                This is heading This is a 
+                <a
+                  href="https://example.com"
+                >
+                  link
+                </a>
+                .
+              </h1>
+            </div>
+            <p
+              class="text-gray-600 text-ms mt-2"
+            >
+              Sep. 1st 08:44
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   </section>

diff --git a/jest.config.js b/jest.config.js
@@ -7,4 +7,8 @@ module.exports = {
     "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
   },
   testEnvironment: "jsdom",
+  moduleNameMapper: {
+    "react-markdown":
+      "<rootDir>/node_modules/react-markdown/react-markdown.min.js",
+  },
 };
diff --git a/mocks/status_pages/appsignal.json b/mocks/status_pages/appsignal.json
@@ -19,6 +19,13 @@
       "description": null,
       "state": "resolved",
       "time": "2021-09-01T08:44:28.265Z"
+    },
+    {
+      "id": "update-three",
+      "title": "Update with markdown",
+      "description": "# This is heading This is a [link](https://example.com). ",
+      "state": "resolved",
+      "time": "2020-09-01T08:44:28.265Z"
     }
   ],
   "uptime_monitors": [

diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "next": "11.1.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-markdown": "^8.0.6",
     "react-test-renderer": "^17.0.2",
     "whatwg-fetch": "^3.6.2",
     "mockdate": "^3.0.5"

diff --git a/pages/index.js b/pages/index.js
@@ -28,7 +28,7 @@ export async function getServerSideProps({ req }) {
   const { headers } = req;
   const hostname = headers["cdn-host"] || process.env.DEFAULT_HOSTNAME;
   const base64Hostname = Buffer.from(hostname).toString("base64");
-  const baseEndpoint = `https://${process.env.API_ENDPOINT}/status_pages/${base64Hostname}`;
+  const baseEndpoint = `http://${process.env.API_ENDPOINT}/status_pages/${base64Hostname}`;
   const result = await fetch(`${baseEndpoint}.json`);
 
   if (!result.ok) {