Add support for editing messages with Limelight, where possible

CHANGELOG.md

@@ -1,3 +1,15 @@
+## Monday, October 28th, 2024
+
+### Added
+
+- Added a `postMessageToLimelight` function which uses the `window.postMessage` utility to open Limelight and send message JSON for editing
+- Added a link to edit messages to Spotlights and Infobars in the production table
+- Added a "Create a New Message" link to the navigation header, which links to the New Message page in Limelight
+
+### Fixed
+
+- Fixed a missing message ID in the local JSON, and added a function to safeguard similar errors
+
 ## Wednesday, October 23rd, 2024
 
 ### Added

app/columns.tsx

@@ -70,6 +70,7 @@ export type FxMSMessageInfo = {
   ctrPercent?: number;
   ctrPercentChange?: number;
   ctrDashboardLink?: string;
+  editableJson?: string;
   previewLink?: string;
   metrics: string;
   impressions?: number;
@@ -126,6 +127,31 @@ export type BranchInfo = {
 
 export type RecipeOrBranchInfo = RecipeInfo | BranchInfo;
 
+/**
+ * Opens the Limelight utility using window.postMessage, waits for a response,
+ * and sends message JSON as a payload for editing.
+ */
+function postMessageToLimelight(editableJson: string) {
+  let win = window.open("https://mozilla.github.io/limelight/?postMessage");
+
+  window.addEventListener(
+    "message",
+    (event) => {
+      if (event.origin !== "https://mozilla.github.io/limelight/") {
+        return;
+      }
+      (win as WindowProxy | null)?.postMessage(
+        {
+          type: "import",
+          value: editableJson,
+        },
+        "https://mozilla.github.io/limelight/",
+      );
+    },
+    false,
+  );
+}
+
 /**
  * @returns an OffsiteLink linking to the Looker dashboard link if it exists,
  * labelled with either the CTR percent or "Dashboard"
@@ -215,9 +241,42 @@ export const fxmsMessageColumns: ColumnDef<FxMSMessageInfo>[] = [
     },
   },
   {
-    //   accessorKey: "segment",
-    //   header: "Segment",
-    // }, {
+    accessorKey: "segment",
+    header: "",
+    cell: (props: any) => {
+      const supportedTypes = ["infobar", "spotlight"];
+      if (
+        supportedTypes.includes(props.row.original.template) &&
+        props.row.original.editableJson
+      ) {
+        return (
+          <button
+            onClick={() =>
+              postMessageToLimelight(props.row.original.editableJson)
+            }
+            className="underline text-primary visited:text-primary cursor-pointer hover:no-underline text-xs/[180%]"
+          >
+            Edit a copy of this message
+            <svg
+              fill="none"
+              viewBox="0 0 8 8"
+              className="inline h-[1.1rem] w-[1.1rem] px-1"
+              aria-hidden="true"
+            >
+              <path
+                clipRule="evenodd"
+                d="m1.71278 0h.57093c.31531 0 .57092.255837.57092.571429 0 .315591-.25561.571431-.57092.571431h-.57093c-.31531 0-.57093.25583-.57093.57143v4.57142c0 .3156.25562.57143.57093.57143h4.56741c.31531 0 .57093-.25583.57093-.57143v-.57142c0-.3156.25561-.57143.57092-.57143.31532 0 .57093.25583.57093.57143v.57142c0 .94678-.76684 1.71429-1.71278 1.71429h-4.56741c-.945943 0-1.71278-.76751-1.71278-1.71429v-4.57142c0-.946778.766837-1.71429 1.71278-1.71429zm5.71629 0c.23083.0002686.43879.13963.52697.353143.02881.069172.04375.143342.04396.218286v2.857141c0 .31559-.25561.57143-.57093.57143-.31531 0-.57092-.25584-.57092-.57143v-1.47771l-1.88006 1.88171c-.14335.14855-.35562.20812-.55523.15583-.19962-.0523-.35551-.20832-.40775-.40811-.05225-.19979.00727-.41225.15569-.55572l1.88006-1.88171h-1.47642c-.31531 0-.57093-.25584-.57093-.571431 0-.315592.25562-.571429.57093-.571429z"
+                fill="#5e5e72"
+                fillRule="evenodd"
+              ></path>
+            </svg>
+          </button>
+        );
+      }
+      return <></>;
+    },
+  },
+  {
     accessorKey: "metrics",
     header: () => (
       <div className="flex flex-row items-center">

app/page.tsx

@@ -17,6 +17,7 @@ import {
   getTemplateFromMessage,
   _isAboutWelcomeTemplate,
   maybeCreateWelcomePreview,
+  getEditableJSON,
   getPreviewLink,
   messageHasMicrosurvey,
   compareSurfacesFn,
@@ -74,6 +75,7 @@ async function getASRouterLocalColumnFromJSON(
     metrics: "some metrics",
     ctrPercent: undefined, // may be populated from Looker data
     ctrPercentChange: undefined, // may be populated from Looker data
+    editableJson: getEditableJSON(messageDef), // message JSON for Limelight
     previewLink: getPreviewLink(maybeCreateWelcomePreview(messageDef)),
     impressions: undefined, // may be populated from Looker data
     hasMicrosurvey: messageHasMicrosurvey(messageDef.id),

components/ui/menubutton.tsx

@@ -12,7 +12,15 @@ import {
   navigationMenuTriggerStyle,
   navigationMenuItemStyle,
 } from "@/components/ui/navigation-menu";
-import { Menu, Hash, Book, AppWindow, Table, FileSearch } from "lucide-react";
+import {
+  Menu,
+  Hash,
+  Book,
+  AppWindow,
+  Table,
+  FileSearch,
+  Lightbulb,
+} from "lucide-react";
 import { cn } from "@/lib/utils";
 
 const ListItem = React.forwardRef<
@@ -63,6 +71,17 @@ export function MenuButton({ isComplete }: MenuButtonProps) {
             </a>
           </NavigationMenuLink>
         </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuItemStyle()}>
+            <a
+              className={navMenuItemClassName}
+              href="https://mozilla.github.io/limelight/"
+            >
+              <Lightbulb size={iconSize} />
+              Create A New Message
+            </a>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
         <NavigationMenuItem>
           <NavigationMenuLink asChild className={navigationMenuItemStyle()}>
             <a

lib/asrouter-local-prod-messages/123-nightly-in-progress.json

@@ -1715,6 +1715,7 @@
       "id": "FOX_DOODLE_SET_DEFAULT",
       "screens": [
         {
+          "id": "FOX_DOODLE_SET_DEFAULT_SCREEN",
           "content": {
             "logo": {
               "height": "125px",

lib/messageUtils.ts

@@ -176,6 +176,35 @@ export function maybeCreateWelcomePreview(message: any): object {
   return message;
 }
 
+export function getEditableJSON(message: any): string | undefined {
+  // fallbacks for important properties
+  switch (message.template) {
+    case "spotlight":
+      try {
+        message.content.screens.forEach((screen: any) => {
+          if (!screen.id) {
+            screen.id = message.content.id;
+          }
+        });
+        return message;
+      } catch (e) {
+        console.log("Could not generate editable JSON: ", e);
+      }
+      break;
+    case "infobar":
+      try {
+        if (message.content && message.content.buttons) {
+          return message;
+        }
+      } catch (e) {
+        console.log("Could note generate editable JSON: ", e);
+      }
+      break;
+    default:
+      return undefined;
+  }
+}
+
 export function getPreviewLink(message: any): string {
   let previewLink = `about:messagepreview?json=${encodeURIComponent(
     toBinary(JSON.stringify(message)),