From 39a3943591ae835694cefaf901c420e219ff4d8d Mon Sep 17 00:00:00 2001 From: Emily McMinn Date: Fri, 16 Aug 2024 10:56:29 +0100 Subject: [PATCH 1/6] Add support for editing messages with Limelight, where possible --- .env | 4 ++ app/columns.tsx | 58 ++++++++++++++++++- app/limelight/limelight.svg | 4 ++ app/page.tsx | 2 + components/ui/menubutton.tsx | 13 ++++- .../123-nightly-in-progress.json | 1 + lib/messageUtils.ts | 13 +++++ 7 files changed, 91 insertions(+), 4 deletions(-) create mode 100644 app/limelight/limelight.svg diff --git a/.env b/.env index c1f850a2..643becac 100644 --- a/.env +++ b/.env @@ -19,3 +19,7 @@ LOOKERSDK_BASE_URL=null # Threshold for hiding messages with small impression numbers HIDDEN_MESSAGE_IMPRESSION_THRESHOLD=1000 + +# Limelight (edit message) link prefix +# LIMELIGHT_EDIT_URL = https://mozilla.github.io/limelight + diff --git a/app/columns.tsx b/app/columns.tsx index e83e2113..c0beb1dc 100644 --- a/app/columns.tsx +++ b/app/columns.tsx @@ -58,6 +58,7 @@ function OffsiteLink(href: string, linkText: any) { ); } + // This type is used to define the shape of our data. // NOTE: ctrPercent is undefined by default until set using getCTRPercent. It is // made optional to help determine what's displayed in the Metrics column. @@ -70,6 +71,7 @@ export type FxMSMessageInfo = { ctrPercent?: number; ctrPercentChange?: number; ctrDashboardLink?: string; + editableJson?: string; previewLink?: string; metrics: string; impressions?: number; @@ -126,6 +128,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) => { + console.log("RECEIVED EVENT FROM LIMELIGHT: ", 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 +242,34 @@ export const fxmsMessageColumns: ColumnDef[] = [ }, }, { - // accessorKey: "segment", - // header: "Segment", - // }, { + accessorKey: "segment", + header: "", + cell: (props: any) => { + const supportedTypes = [ + "infobar", + "spotlight", + ]; + if (supportedTypes.includes(props.row.original.template)) { + return + } + return <>; + }, + }, { accessorKey: "metrics", header: () => (
diff --git a/app/limelight/limelight.svg b/app/limelight/limelight.svg new file mode 100644 index 00000000..2df3fffa --- /dev/null +++ b/app/limelight/limelight.svg @@ -0,0 +1,4 @@ + + diff --git a/app/page.tsx b/app/page.tsx index 6a70ed0b..2aac51b0 100644 --- a/app/page.tsx +++ b/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), diff --git a/components/ui/menubutton.tsx b/components/ui/menubutton.tsx index dcce937a..784596c4 100644 --- a/components/ui/menubutton.tsx +++ b/components/ui/menubutton.tsx @@ -12,7 +12,7 @@ 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 +63,17 @@ export function MenuButton({ isComplete }: MenuButtonProps) { + + + + + Create A New Message + + + { + if (!screen.id) { + screen.id = message.content.id; + } + }) + } + + return message; +} + export function getPreviewLink(message: any): string { let previewLink = `about:messagepreview?json=${encodeURIComponent( toBinary(JSON.stringify(message)), From 062a29b6695db04aecd1ec4c29a660c76e63ba89 Mon Sep 17 00:00:00 2001 From: Emily McMinn Date: Fri, 18 Oct 2024 17:30:31 -0400 Subject: [PATCH 2/6] optional chaining --- app/columns.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/columns.tsx b/app/columns.tsx index c0beb1dc..d593c27c 100644 --- a/app/columns.tsx +++ b/app/columns.tsx @@ -144,7 +144,7 @@ function postMessageToLimelight( if (event.origin !== "https://mozilla.github.io/limelight/") { return; } - (win as WindowProxy | null).postMessage({ + (win as WindowProxy | null)?.postMessage({ type: "import", value: editableJson, }, "https://mozilla.github.io/limelight/") From 78310b3941f4b96a143311a85b9df232dd50ca0b Mon Sep 17 00:00:00 2001 From: Emily McMinn Date: Fri, 18 Oct 2024 18:14:43 -0400 Subject: [PATCH 3/6] Clean up logging and Prettier fixes --- app/columns.tsx | 65 +++++++++++++++++++----------------- components/ui/menubutton.tsx | 10 +++++- lib/messageUtils.ts | 3 +- 3 files changed, 45 insertions(+), 33 deletions(-) diff --git a/app/columns.tsx b/app/columns.tsx index d593c27c..aac855bc 100644 --- a/app/columns.tsx +++ b/app/columns.tsx @@ -58,7 +58,6 @@ function OffsiteLink(href: string, linkText: any) { ); } - // This type is used to define the shape of our data. // NOTE: ctrPercent is undefined by default until set using getCTRPercent. It is // made optional to help determine what's displayed in the Metrics column. @@ -132,9 +131,7 @@ 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 -) { +function postMessageToLimelight(editableJson: string) { let win = window.open("https://mozilla.github.io/limelight/?postMessage"); window.addEventListener( @@ -144,13 +141,16 @@ function postMessageToLimelight( if (event.origin !== "https://mozilla.github.io/limelight/") { return; } - (win as WindowProxy | null)?.postMessage({ - type: "import", - value: editableJson, - }, "https://mozilla.github.io/limelight/") + (win as WindowProxy | null)?.postMessage( + { + type: "import", + value: editableJson, + }, + "https://mozilla.github.io/limelight/", + ); }, false, - ); + ); } /** @@ -245,31 +245,36 @@ export const fxmsMessageColumns: ColumnDef[] = [ accessorKey: "segment", header: "", cell: (props: any) => { - const supportedTypes = [ - "infobar", - "spotlight", - ]; + const supportedTypes = ["infobar", "spotlight"]; if (supportedTypes.includes(props.row.original.template)) { - return + return ( + + ); } return <>; }, - }, { + }, + { accessorKey: "metrics", header: () => (
diff --git a/components/ui/menubutton.tsx b/components/ui/menubutton.tsx index 784596c4..4a260296 100644 --- a/components/ui/menubutton.tsx +++ b/components/ui/menubutton.tsx @@ -12,7 +12,15 @@ import { navigationMenuTriggerStyle, navigationMenuItemStyle, } from "@/components/ui/navigation-menu"; -import { Menu, Hash, Book, AppWindow, Table, FileSearch, Lightbulb } from "lucide-react"; +import { + Menu, + Hash, + Book, + AppWindow, + Table, + FileSearch, + Lightbulb, +} from "lucide-react"; import { cn } from "@/lib/utils"; const ListItem = React.forwardRef< diff --git a/lib/messageUtils.ts b/lib/messageUtils.ts index 5f0a6c15..495647c9 100644 --- a/lib/messageUtils.ts +++ b/lib/messageUtils.ts @@ -183,9 +183,8 @@ export function getEditableJSON(message: any): string { if (!screen.id) { screen.id = message.content.id; } - }) + }); } - return message; } From acfc0cda079de915620bc4250720ffcfa5dc0d41 Mon Sep 17 00:00:00 2001 From: Emily McMinn Date: Mon, 28 Oct 2024 17:51:23 -0400 Subject: [PATCH 4/6] Update CHANGELOG & clean up unneccessary files --- .env | 4 ---- CHANGELOG.md | 11 +++++++++++ app/columns.tsx | 1 - app/limelight/limelight.svg | 4 ---- 4 files changed, 11 insertions(+), 9 deletions(-) delete mode 100644 app/limelight/limelight.svg diff --git a/.env b/.env index 643becac..c1f850a2 100644 --- a/.env +++ b/.env @@ -19,7 +19,3 @@ LOOKERSDK_BASE_URL=null # Threshold for hiding messages with small impression numbers HIDDEN_MESSAGE_IMPRESSION_THRESHOLD=1000 - -# Limelight (edit message) link prefix -# LIMELIGHT_EDIT_URL = https://mozilla.github.io/limelight - diff --git a/CHANGELOG.md b/CHANGELOG.md index 6fd00fe0..6fd26dc5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,14 @@ +## 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 + +### Fixed + +- Fixed a missing message ID in the local JSON, and added a function to safeguard similar errors + ## Wednesday, October 23rd, 2024 ### Added diff --git a/app/columns.tsx b/app/columns.tsx index aac855bc..89fc1b86 100644 --- a/app/columns.tsx +++ b/app/columns.tsx @@ -137,7 +137,6 @@ function postMessageToLimelight(editableJson: string) { window.addEventListener( "message", (event) => { - console.log("RECEIVED EVENT FROM LIMELIGHT: ", event); if (event.origin !== "https://mozilla.github.io/limelight/") { return; } diff --git a/app/limelight/limelight.svg b/app/limelight/limelight.svg deleted file mode 100644 index 2df3fffa..00000000 --- a/app/limelight/limelight.svg +++ /dev/null @@ -1,4 +0,0 @@ - - From 67303f5bd047d1d690650ad7c4fd24f493c7f84a Mon Sep 17 00:00:00 2001 From: Emily McMinn Date: Mon, 28 Oct 2024 18:08:04 -0400 Subject: [PATCH 5/6] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6fd26dc5..598ca126 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - 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 From f90212747eb8afb2299cec177b4826a552d6d863 Mon Sep 17 00:00:00 2001 From: Emily McMinn Date: Wed, 30 Oct 2024 12:25:08 -0400 Subject: [PATCH 6/6] Add error handling to getEditableJSON --- app/columns.tsx | 5 ++++- lib/messageUtils.ts | 31 ++++++++++++++++++++++++------- 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/app/columns.tsx b/app/columns.tsx index 89fc1b86..47266baf 100644 --- a/app/columns.tsx +++ b/app/columns.tsx @@ -245,7 +245,10 @@ export const fxmsMessageColumns: ColumnDef[] = [ header: "", cell: (props: any) => { const supportedTypes = ["infobar", "spotlight"]; - if (supportedTypes.includes(props.row.original.template)) { + if ( + supportedTypes.includes(props.row.original.template) && + props.row.original.editableJson + ) { return (