Bug 1891121 - Add experiment brief links to experiment and rollout tables

__tests__/lib/nimbusRecipe.test.ts

@@ -363,4 +363,59 @@ describe("NimbusRecipe", () => {
       );
     });
   });
+
+  describe("getExperimentBriefLink", () => {
+    it("returns the correct experiment brief link", () => {
+      const documentationLinks = [
+        {
+          title: "DESIGN_DOC",
+          link: "https://docs.google.com/document/d/1mKXnU-qbStb1OUNHmDOQY5Awb-Wz5e8wit28jkUKP-4/edit#heading=h.uoblsnu302hk",
+        },
+        {
+          title: "ENG_TICKET",
+          link: "https://mozilla-hub.atlassian.net/browse/OMC-811",
+        },
+        {
+          title: "DESIGN_DOC",
+          link: "https://www.figma.com/design/V2alIUZh1C4UXoWacJjZCA/Bookmarks-improvements?node-id=2073-16689&node-type=canvas&t=yXRpQavvJl25GGbF-0",
+        },
+      ];
+      const rawRecipe = ExperimentFakes.recipe("test-recipe");
+      const nimbusRecipe = new NimbusRecipe(rawRecipe);
+
+      const result = nimbusRecipe.getExperimentBriefLink(documentationLinks);
+
+      expect(result).toBe(
+        "https://docs.google.com/document/d/1mKXnU-qbStb1OUNHmDOQY5Awb-Wz5e8wit28jkUKP-4/edit#heading=h.uoblsnu302hk",
+      );
+    });
+
+    it("returns undefined if no experiment brief document exists", () => {
+      const documentationLinks = [
+        {
+          title: "DS_JIRA",
+          link: "https://mozilla-hub.atlassian.net/browse/DS-3819",
+        },
+        {
+          title: "ENG_TICKET",
+          link: "https://mozilla-hub.atlassian.net/browse/FXE-952",
+        },
+      ];
+      const rawRecipe = ExperimentFakes.recipe("test-recipe");
+      const nimbusRecipe = new NimbusRecipe(rawRecipe);
+
+      const result = nimbusRecipe.getExperimentBriefLink(documentationLinks);
+
+      expect(result).toBeUndefined();
+    });
+  });
+
+  it("returns undefined if no documentation link exists", () => {
+    const rawRecipe = ExperimentFakes.recipe("test-recipe");
+    const nimbusRecipe = new NimbusRecipe(rawRecipe);
+
+    const result = nimbusRecipe.getExperimentBriefLink(undefined);
+
+    expect(result).toBeUndefined();
+  });
 });

app/columns.tsx

@@ -3,11 +3,22 @@ import { types } from "@mozilla/nimbus-shared";
 import { ColumnDef, Row } from "@tanstack/react-table";
 import { NimbusRecipe } from "@/lib/nimbusRecipe";
 import { PreviewLinkButton } from "@/components/ui/previewlinkbutton";
-import { ChevronsUpDown, ChevronDown, ChevronRight } from "lucide-react";
+import {
+  ChevronsUpDown,
+  ChevronDown,
+  ChevronRight,
+  FileText,
+} from "lucide-react";
 import { PrettyDateRange } from "./dates";
 import { InfoPopover } from "@/components/ui/infopopover";
 import { getSurfaceDataForTemplate } from "@/lib/messageUtils";
 import { HIDE_DASHBOARD_EXPERIMENTS } from "@/lib/experimentUtils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 function SurfaceTag(template: string, surface: string) {
   const { tagColor, docs } = getSurfaceDataForTemplate(template);
@@ -98,6 +109,7 @@ export type RecipeInfo = {
   isBranch?: boolean;
   branches: BranchInfo[]; // XXX rename this to branchInfos to avoid confusion with the branches property inside NimbusExperiment
   hasMicrosurvey?: boolean;
+  experimentBriefLink?: string;
 };
 
 export type BranchInfo = {
@@ -169,11 +181,33 @@ const previewURLInfoButton = (
 );
 
 const microsurveyBadge = (
-  <div className="inline ml-1 px-2 py-1 bg-slate-300 text-foreground text-3xs rounded-md font-medium">
+  <div className="inline px-2 py-1 bg-slate-300 text-foreground text-3xs rounded-md font-medium">
     Microsurvey
   </div>
 );
 
+function experimentBriefTooltip(link: string) {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <a
+            className="flex items-center justify-center rounded-md text-primary hover:text-primary/80 visited:text-inherit"
+            href={link}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <FileText size={14} />
+          </a>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>See experiment brief</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
 function filterBySurface(
   row: Row<RecipeOrBranchInfo>,
   filterValue: string,
@@ -367,32 +401,36 @@ export const experimentColumns: ColumnDef<RecipeOrBranchInfo>[] = [
     cell: (props: any) => {
       if (props.row.original.userFacingName) {
         return (
-          <>
-            <a
-              href={props.row.original.experimenterLink}
-              className="font-semibold text-sm text-primary visited:text-inherit hover:text-blue-800 no-underline"
-              target="_blank"
-              rel="noreferrer"
-            >
-              {props.row.original.userFacingName || props.row.original.id}
-              <svg
-                fill="currentColor"
-                fillOpacity="0.6"
-                viewBox="0 0 8 8"
-                className="inline h-[1.2rem] w-[1.2rem] px-1"
-                aria-hidden="true"
-                style={{
-                  marginInline: "0.1rem 0",
-                  paddingBlock: "0 0.1rem",
-                  overflow: "visible",
-                }}
+          <div>
+            <div className="flex flex-row gap-x-2 items-center">
+              {props.row.original.experimentBriefLink &&
+                experimentBriefTooltip(props.row.original.experimentBriefLink)}
+              {props.row.original.hasMicrosurvey && <> {microsurveyBadge} </>}
+              <a
+                href={props.row.original.experimenterLink}
+                className="font-semibold text-sm text-primary visited:text-inherit hover:text-blue-800 no-underline"
+                target="_blank"
+                rel="noreferrer"
               >
-                <path 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"></path>
-              </svg>
-            </a>
-            {props.row.original.hasMicrosurvey && <> {microsurveyBadge} </>}
+                {props.row.original.userFacingName || props.row.original.id}
+                <svg
+                  fill="currentColor"
+                  fillOpacity="0.6"
+                  viewBox="0 0 8 8"
+                  className="inline h-[1.2rem] w-[1.2rem] px-1"
+                  aria-hidden="true"
+                  style={{
+                    marginInline: "0.1rem 0",
+                    paddingBlock: "0 0.1rem",
+                    overflow: "visible",
+                  }}
+                >
+                  <path 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"></path>
+                </svg>
+              </a>
+            </div>
             <div className="font-mono text-3xs">{props.row.original.id}</div>
-          </>
+          </div>
         );
       }
 
@@ -568,32 +606,36 @@ export const completedExperimentColumns: ColumnDef<RecipeOrBranchInfo>[] = [
     cell: (props: any) => {
       if (props.row.original.userFacingName) {
         return (
-          <>
-            <a
-              href={props.row.original.experimenterLink}
-              className="font-semibold text-sm text-primary visited:text-inherit hover:text-blue-800 no-underline"
-              target="_blank"
-              rel="noreferrer"
-            >
-              {props.row.original.userFacingName || props.row.original.id}
-              <svg
-                fill="currentColor"
-                fillOpacity="0.6"
-                viewBox="0 0 8 8"
-                className="inline h-[1.2rem] w-[1.2rem] px-1"
-                aria-hidden="true"
-                style={{
-                  marginInline: "0.1rem 0",
-                  paddingBlock: "0 0.1rem",
-                  overflow: "visible",
-                }}
+          <div>
+            <div className="flex flex-row gap-x-2 items-center">
+              {props.row.original.experimentBriefLink &&
+                experimentBriefTooltip(props.row.original.experimentBriefLink)}
+              {props.row.original.hasMicrosurvey && <> {microsurveyBadge} </>}
+              <a
+                href={props.row.original.experimenterLink}
+                className="font-semibold text-sm text-primary visited:text-inherit hover:text-blue-800 no-underline"
+                target="_blank"
+                rel="noreferrer"
               >
-                <path 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"></path>
-              </svg>
-            </a>
-            {props.row.original.hasMicrosurvey && <> {microsurveyBadge} </>}
+                {props.row.original.userFacingName || props.row.original.id}
+                <svg
+                  fill="currentColor"
+                  fillOpacity="0.6"
+                  viewBox="0 0 8 8"
+                  className="inline h-[1.2rem] w-[1.2rem] px-1"
+                  aria-hidden="true"
+                  style={{
+                    marginInline: "0.1rem 0",
+                    paddingBlock: "0 0.1rem",
+                    overflow: "visible",
+                  }}
+                >
+                  <path 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"></path>
+                </svg>
+              </a>
+            </div>
             <div className="font-mono text-3xs">{props.row.original.id}</div>
-          </>
+          </div>
         );
       }
 

lib/nimbusRecipe.ts

@@ -16,6 +16,11 @@ import { getExperimentLookerDashboardDate } from "./lookerUtils.ts";
 
 type NimbusExperiment = types.experiments.NimbusExperiment;
 
+type DocumentationLink = {
+  title: string;
+  link: string;
+};
+
 function isMessagingFeature(featureId: string): boolean {
   return MESSAGING_EXPERIMENTS_DEFAULT_FEATURES.includes(featureId);
 }
@@ -320,6 +325,9 @@ export class NimbusRecipe implements NimbusRecipeType {
       nimbusExperiment: this._rawRecipe,
       branches: branchInfos,
       hasMicrosurvey: hasMicrosurvey,
+      experimentBriefLink: this.getExperimentBriefLink(
+        this._rawRecipe.documentationLinks,
+      ),
     };
   }
 
@@ -382,4 +390,26 @@ export class NimbusRecipe implements NimbusRecipeType {
       this._rawRecipe.slug,
     )}/summary#${branchSlug}`;
   }
+
+  /**
+   * @param documentationLinks a list of documentation links provided for this Nimbus recipe
+   * @returns the first documentation link of the experiment brief Google Doc if it exists
+   */
+  getExperimentBriefLink(
+    documentationLinks: DocumentationLink[] | undefined,
+  ): string | undefined {
+    if (documentationLinks) {
+      const brief = documentationLinks.find(
+        (documentationLink: DocumentationLink) => {
+          return (
+            documentationLink.title === "DESIGN_DOC" &&
+            documentationLink.link.startsWith(
+              "https://docs.google.com/document",
+            )
+          );
+        },
+      );
+      return brief && brief.link;
+    }
+  }
 }