From b84a0043e586b8d70cca11df0cfcf2c1d43a9a31 Mon Sep 17 00:00:00 2001
From: minnakt <47064971+minnakt@users.noreply.github.com>
Date: Wed, 18 Sep 2024 16:02:40 -0400
Subject: [PATCH] DEVPROD-7662: Add image visibility guide cue (#376)

---
 .../cypress/integration/image/navigation.ts   | 12 ++++++
 apps/spruce/cypress/support/e2e.ts            |  2 +
 apps/spruce/src/components/MetadataCard.tsx   |  1 +
 apps/spruce/src/constants/cookies.ts          |  3 +-
 ...ePatchCore_ConfigureTasksDefault.storyshot |  6 +--
 .../task/metadata/ImageVisibilityGuideCue.tsx | 41 +++++++++++++++++++
 .../Metadata_ContainerizedTask.storyshot      | 14 +++----
 .../__snapshots__/Metadata_Default.storyshot  | 25 ++++++-----
 .../Metadata_OOMTracker.storyshot             | 27 ++++++------
 .../Metadata_WithAbortMessage.storyshot       | 25 ++++++-----
 .../Metadata_WithDependencies.storyshot       | 25 ++++++-----
 apps/spruce/src/pages/task/metadata/index.tsx |  8 ++++
 .../ParametersModal_Default.storyshot         |  2 +-
 13 files changed, 134 insertions(+), 57 deletions(-)
 create mode 100644 apps/spruce/src/pages/task/metadata/ImageVisibilityGuideCue.tsx

diff --git a/apps/spruce/cypress/integration/image/navigation.ts b/apps/spruce/cypress/integration/image/navigation.ts
index 0e4463abc..8a26d2c2e 100644
--- a/apps/spruce/cypress/integration/image/navigation.ts
+++ b/apps/spruce/cypress/integration/image/navigation.ts
@@ -1,3 +1,5 @@
+import { SEEN_IMAGE_VISIBILITY_GUIDE_CUE } from "constants/cookies";
+
 describe("/image/imageId/random redirect route", () => {
   it("should redirect to the build information page", () => {
     cy.visit("/image/imageId/random");
@@ -23,6 +25,16 @@ describe("/image/imageId/random redirect route", () => {
     });
   });
 
+  it("shows the image visibility guide cue on task metadata", () => {
+    cy.setCookie(SEEN_IMAGE_VISIBILITY_GUIDE_CUE, "false");
+    cy.visit(
+      "/task/evergreen_ubuntu1604_test_annotations_b_5e4ff3abe3c3317e352062e4_20_02_21_15_13_48",
+    );
+    cy.dataCy("image-visibility-guide-cue").should("be.visible");
+    cy.contains("button", "Got it").click();
+    cy.dataCy("image-visibility-guide-cue").should("not.exist");
+  });
+
   it("navigates to the image page from the task page", () => {
     cy.visit(
       "/task/evergreen_ubuntu1604_test_annotations_b_5e4ff3abe3c3317e352062e4_20_02_21_15_13_48",
diff --git a/apps/spruce/cypress/support/e2e.ts b/apps/spruce/cypress/support/e2e.ts
index 1498d47cf..b883ef458 100644
--- a/apps/spruce/cypress/support/e2e.ts
+++ b/apps/spruce/cypress/support/e2e.ts
@@ -19,6 +19,7 @@ import {
   CY_DISABLE_COMMITS_WELCOME_MODAL,
   CY_DISABLE_NEW_USER_WELCOME_MODAL,
   SLACK_NOTIFICATION_BANNER,
+  SEEN_IMAGE_VISIBILITY_GUIDE_CUE,
 } from "constants/cookies";
 import { isMutation } from "../utils/graphql-test-utils";
 // Alternatively you can use CommonJS syntax:
@@ -159,6 +160,7 @@ before(() => {
     cy.setCookie(CY_DISABLE_COMMITS_WELCOME_MODAL, "true");
     cy.setCookie(CY_DISABLE_NEW_USER_WELCOME_MODAL, "true");
     cy.setCookie(SLACK_NOTIFICATION_BANNER, "true");
+    cy.setCookie(SEEN_IMAGE_VISIBILITY_GUIDE_CUE, "true");
     mutationDispatched = false;
     cy.intercept("POST", "/graphql/query", (req) => {
       if (isMutation(req)) {
diff --git a/apps/spruce/src/components/MetadataCard.tsx b/apps/spruce/src/components/MetadataCard.tsx
index 4bac2bbcc..1660da114 100644
--- a/apps/spruce/src/components/MetadataCard.tsx
+++ b/apps/spruce/src/components/MetadataCard.tsx
@@ -73,6 +73,7 @@ const Item = styled(Body)<BodyProps>`
   :not(:last-child) {
     margin-bottom: 12px;
   }
+  width: fit-content;
 `;
 
 export const MetadataLabel = styled.b<{ color?: string }>`
diff --git a/apps/spruce/src/constants/cookies.ts b/apps/spruce/src/constants/cookies.ts
index 6052d41c8..b0742be6f 100644
--- a/apps/spruce/src/constants/cookies.ts
+++ b/apps/spruce/src/constants/cookies.ts
@@ -13,6 +13,7 @@ export const HIDE_FEEDBACK = "HIDE_FEEDBACK";
 export const INCLUDE_COMMIT_QUEUE_PROJECT_PATCHES =
   "include-commit-queue-project-patches";
 export const INCLUDE_HIDDEN_PATCHES = "include-hidden-patches";
-export const SEEN_MIGRATE_GUIDE_CUE = "seen-migrate-guide-cue";
 export const SLACK_NOTIFICATION_BANNER = "has-closed-slack-banner";
 export const SUBSCRIPTION_METHOD = "subscription-method";
+export const SEEN_IMAGE_VISIBILITY_GUIDE_CUE =
+  "seen-image-visibility-guide-cue";
diff --git a/apps/spruce/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore_ConfigureTasksDefault.storyshot b/apps/spruce/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore_ConfigureTasksDefault.storyshot
index 6fde50e65..cafc11363 100644
--- a/apps/spruce/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore_ConfigureTasksDefault.storyshot
+++ b/apps/spruce/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore_ConfigureTasksDefault.storyshot
@@ -94,7 +94,7 @@
           />
         </div>
         <p
-          class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+          class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         >
           <b
             class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -105,7 +105,7 @@
           mohamed.khelif
         </p>
         <p
-          class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+          class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         >
           <b
             class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -116,7 +116,7 @@
           2020-08-28T15:00:17Z
         </p>
         <p
-          class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+          class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         >
           <b
             class="css-1xk67r-MetadataLabel e1ul56zb0"
diff --git a/apps/spruce/src/pages/task/metadata/ImageVisibilityGuideCue.tsx b/apps/spruce/src/pages/task/metadata/ImageVisibilityGuideCue.tsx
new file mode 100644
index 000000000..e29af3c4b
--- /dev/null
+++ b/apps/spruce/src/pages/task/metadata/ImageVisibilityGuideCue.tsx
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import {
+  GuideCue,
+  GuideCueProps,
+  TooltipAlign,
+} from "@leafygreen-ui/guide-cue";
+import Cookies from "js-cookie";
+import { SEEN_IMAGE_VISIBILITY_GUIDE_CUE } from "constants/cookies";
+import { showImageVisibilityPage } from "constants/featureFlags";
+
+export const ImageVisibilityGuideCue: React.FC<{
+  refEl: GuideCueProps["refEl"];
+}> = ({ refEl }) => {
+  const [open, setOpen] = useState(
+    Cookies.get(SEEN_IMAGE_VISIBILITY_GUIDE_CUE) !== "true",
+  );
+
+  const closeGuideCue = () => {
+    Cookies.set(SEEN_IMAGE_VISIBILITY_GUIDE_CUE, "true", { expires: 365 });
+    setOpen(false);
+  };
+
+  return (
+    <GuideCue
+      currentStep={1}
+      data-cy="image-visibility-guide-cue"
+      // TODO: Remove once the page is ready for release in DEVPROD-11433.
+      enabled={showImageVisibilityPage}
+      numberOfSteps={1}
+      onPrimaryButtonClick={closeGuideCue}
+      open={open}
+      refEl={refEl}
+      setOpen={setOpen}
+      title="Newly Introduced Image Page!"
+      tooltipAlign={TooltipAlign.Right}
+    >
+      Visit the Image page to view general information and package installations
+      for Evergreen distros.
+    </GuideCue>
+  );
+};
diff --git a/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_ContainerizedTask.storyshot b/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_ContainerizedTask.storyshot
index c8b485b32..50428b3f6 100644
--- a/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_ContainerizedTask.storyshot
+++ b/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_ContainerizedTask.storyshot
@@ -16,7 +16,7 @@
         />
       </div>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-build-variant"
       >
         <b
@@ -36,7 +36,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-project"
       >
         <b
@@ -56,7 +56,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -67,7 +67,7 @@
         mohamed.khelif
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -82,7 +82,7 @@
         </span>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -103,7 +103,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-description"
       >
         <b
@@ -141,7 +141,7 @@
       </div>
        
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
diff --git a/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_Default.storyshot b/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_Default.storyshot
index a33098d77..7f666ab8a 100644
--- a/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_Default.storyshot
+++ b/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_Default.storyshot
@@ -16,7 +16,7 @@
         />
       </div>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-build-variant"
       >
         <b
@@ -36,7 +36,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-project"
       >
         <b
@@ -56,7 +56,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -67,7 +67,7 @@
         mohamed.khelif
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -82,7 +82,7 @@
         </span>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -103,7 +103,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-description"
       >
         <b
@@ -141,7 +141,7 @@
       </div>
        
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -161,7 +161,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -180,8 +180,11 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
+        <span
+          class="leafygreen-ui-1l0cwz5"
+        />
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
         >
@@ -199,7 +202,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-ami"
       >
         <b
@@ -211,7 +214,7 @@
         ami-0c83bb0a9f48c15bf
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <a
           class="lg-ui-0001 css-1gw3cuq-StyledLink leafygreen-ui-16e7rxl"
diff --git a/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_OOMTracker.storyshot b/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_OOMTracker.storyshot
index 63418870c..7428b4c1a 100644
--- a/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_OOMTracker.storyshot
+++ b/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_OOMTracker.storyshot
@@ -16,7 +16,7 @@
         />
       </div>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-build-variant"
       >
         <b
@@ -36,7 +36,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-project"
       >
         <b
@@ -56,7 +56,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -67,7 +67,7 @@
         mohamed.khelif
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -82,7 +82,7 @@
         </span>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -103,7 +103,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-description"
       >
         <b
@@ -115,7 +115,7 @@
         'shell.exec' in function 'yarn-test' (step 1 of 1)
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         Out of Memory Kill detected
          
@@ -137,7 +137,7 @@
       </div>
        
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -157,7 +157,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -176,8 +176,11 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
+        <span
+          class="leafygreen-ui-1l0cwz5"
+        />
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
         >
@@ -195,7 +198,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-ami"
       >
         <b
@@ -207,7 +210,7 @@
         ami-0c83bb0a9f48c15bf
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <a
           class="lg-ui-0001 css-1gw3cuq-StyledLink leafygreen-ui-16e7rxl"
diff --git a/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_WithAbortMessage.storyshot b/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_WithAbortMessage.storyshot
index a33098d77..7f666ab8a 100644
--- a/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_WithAbortMessage.storyshot
+++ b/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_WithAbortMessage.storyshot
@@ -16,7 +16,7 @@
         />
       </div>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-build-variant"
       >
         <b
@@ -36,7 +36,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-project"
       >
         <b
@@ -56,7 +56,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -67,7 +67,7 @@
         mohamed.khelif
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -82,7 +82,7 @@
         </span>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -103,7 +103,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-description"
       >
         <b
@@ -141,7 +141,7 @@
       </div>
        
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -161,7 +161,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -180,8 +180,11 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
+        <span
+          class="leafygreen-ui-1l0cwz5"
+        />
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
         >
@@ -199,7 +202,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-ami"
       >
         <b
@@ -211,7 +214,7 @@
         ami-0c83bb0a9f48c15bf
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <a
           class="lg-ui-0001 css-1gw3cuq-StyledLink leafygreen-ui-16e7rxl"
diff --git a/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_WithDependencies.storyshot b/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_WithDependencies.storyshot
index 7ef17e838..5e8d3d971 100644
--- a/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_WithDependencies.storyshot
+++ b/apps/spruce/src/pages/task/metadata/__snapshots__/Metadata_WithDependencies.storyshot
@@ -16,7 +16,7 @@
         />
       </div>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-build-variant"
       >
         <b
@@ -36,7 +36,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-project"
       >
         <b
@@ -56,7 +56,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -67,7 +67,7 @@
         mohamed.khelif
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -82,7 +82,7 @@
         </span>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -103,7 +103,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-description"
       >
         <b
@@ -141,7 +141,7 @@
       </div>
        
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -161,7 +161,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
@@ -180,8 +180,11 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
+        <span
+          class="leafygreen-ui-1l0cwz5"
+        />
         <b
           class="css-1xk67r-MetadataLabel e1ul56zb0"
         >
@@ -199,7 +202,7 @@
         </a>
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
         data-cy="task-metadata-ami"
       >
         <b
@@ -211,7 +214,7 @@
         ami-0c83bb0a9f48c15bf
       </p>
       <p
-        class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+        class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
       >
         <a
           class="lg-ui-0001 css-1gw3cuq-StyledLink leafygreen-ui-16e7rxl"
diff --git a/apps/spruce/src/pages/task/metadata/index.tsx b/apps/spruce/src/pages/task/metadata/index.tsx
index 3b46418d6..d1be67645 100644
--- a/apps/spruce/src/pages/task/metadata/index.tsx
+++ b/apps/spruce/src/pages/task/metadata/index.tsx
@@ -1,3 +1,4 @@
+import { useRef } from "react";
 import { ApolloError } from "@apollo/client";
 import styled from "@emotion/styled";
 import {
@@ -42,6 +43,7 @@ import { isFailedTaskStatus } from "utils/statuses";
 import { AbortMessage } from "./AbortMessage";
 import { DependsOn } from "./DependsOn";
 import ETATimer from "./ETATimer";
+import { ImageVisibilityGuideCue } from "./ImageVisibilityGuideCue";
 import RuntimeTimer from "./RuntimeTimer";
 import { Stepback, isInStepback } from "./Stepback";
 
@@ -112,6 +114,8 @@ export const Metadata: React.FC<Props> = ({ error, loading, task, taskId }) => {
 
   const stepback = isInStepback(task);
 
+  const imageVisibilityGuideCueTriggerRef = useRef<HTMLAnchorElement>(null);
+
   return (
     <>
       <MetadataCard
@@ -399,8 +403,12 @@ export const Metadata: React.FC<Props> = ({ error, loading, task, taskId }) => {
           )}
           {showImageVisibilityPage && !isContainerTask && imageId && (
             <MetadataItem>
+              <ImageVisibilityGuideCue
+                refEl={imageVisibilityGuideCueTriggerRef}
+              />
               <MetadataLabel>Image:</MetadataLabel>{" "}
               <StyledRouterLink
+                ref={imageVisibilityGuideCueTriggerRef}
                 data-cy="task-image-link"
                 onClick={() =>
                   taskAnalytics.sendEvent({
diff --git a/apps/spruce/src/pages/version/ParametersModal/__snapshots__/ParametersModal_Default.storyshot b/apps/spruce/src/pages/version/ParametersModal/__snapshots__/ParametersModal_Default.storyshot
index 842340f4d..f14f8a5b7 100644
--- a/apps/spruce/src/pages/version/ParametersModal/__snapshots__/ParametersModal_Default.storyshot
+++ b/apps/spruce/src/pages/version/ParametersModal/__snapshots__/ParametersModal_Default.storyshot
@@ -1,6 +1,6 @@
 <div>
   <p
-    class="css-1spnncu-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
+    class="css-1xovdqa-Item-wordBreakCss e1ul56zb1 leafygreen-ui-1tb6tuo"
   >
     <span
       class="lg-ui-0001 css-1gw3cuq-StyledLink leafygreen-ui-16e7rxl"