DEVPROD-32609: Add GuideCue for updated Project navbar

apps/spruce/cypress/support/e2e.ts

@@ -21,6 +21,7 @@ import {
   SEEN_TASK_HISTORY_ONBOARDING_TUTORIAL,
   SEEN_TASK_REVIEW_TOOLTIP,
   SEEN_TEST_SELECTION_GUIDE_CUE,
+  SEEN_GITHUB_NAV_GUIDE_CUE,
 } from "constants/cookies";
 import { hasOperationName, isMutation } from "../utils/graphql-test-utils";
 
@@ -158,6 +159,7 @@ const hostMutations = ["ReprovisionToNew", "RestartJasper", "UpdateHostStatus"];
     cy.setCookie(SEEN_TASK_HISTORY_ONBOARDING_TUTORIAL, "true");
     cy.setCookie(SEEN_TASK_REVIEW_TOOLTIP, "true");
     cy.setCookie(SEEN_TEST_SELECTION_GUIDE_CUE, "true");
+    cy.setCookie(SEEN_GITHUB_NAV_GUIDE_CUE, "true");
     mutationDispatched = false;
     clearAmboyDB = false;
     cy.intercept("POST", "/graphql/query", (req) => {

apps/spruce/playwright/tests/projectSettings/commit_checks.spec.ts

@@ -1,11 +1,18 @@
+import { SEEN_GITHUB_NAV_GUIDE_CUE } from "../../../src/constants/cookies";
 import { test, expect } from "../../fixtures";
 import { validateToast } from "../../helpers";
 
 test.describe("Commit Checks project settings when GitHub webhooks are disabled", () => {
-  const origin = "/project/logkeeper/settings/commit-checks";
-
   test.beforeEach(async ({ authenticatedPage: page }) => {
-    await page.goto(origin);
+    await page.context().addCookies([
+      {
+        name: SEEN_GITHUB_NAV_GUIDE_CUE,
+        value: "true",
+        domain: "localhost",
+        path: "/",
+      },
+    ]);
+    await page.goto("/project/logkeeper/settings/commit-checks");
     await expect(page.getByTestId("save-settings-button")).toHaveAttribute(
       "aria-disabled",
       "true",
@@ -37,6 +44,14 @@ test.describe("Commit Checks project settings when GitHub webhooks are disabled"
 
 test.describe("Commit Checks project settings when GitHub webhooks are enabled", () => {
   test.beforeEach(async ({ authenticatedPage: page }) => {
+    await page.context().addCookies([
+      {
+        name: SEEN_GITHUB_NAV_GUIDE_CUE,
+        value: "true",
+        domain: "localhost",
+        path: "/",
+      },
+    ]);
     await page.goto("/project/spruce/settings/commit-checks");
     await expect(page.getByTestId("save-settings-button")).toHaveAttribute(
       "aria-disabled",

apps/spruce/playwright/tests/projectSettings/git_tags.spec.ts

@@ -1,12 +1,19 @@
 import { clickRadio } from "@evg-ui/playwright-config/helpers";
+import { SEEN_GITHUB_NAV_GUIDE_CUE } from "../../../src/constants/cookies";
 import { test, expect } from "../../fixtures";
 import { validateToast } from "../../helpers";
 
 test.describe("Git Tags project settings when GitHub webhooks are disabled", () => {
-  const origin = "/project/logkeeper/settings/git-tags";
-
   test.beforeEach(async ({ authenticatedPage: page }) => {
-    await page.goto(origin);
+    await page.context().addCookies([
+      {
+        name: SEEN_GITHUB_NAV_GUIDE_CUE,
+        value: "true",
+        domain: "localhost",
+        path: "/",
+      },
+    ]);
+    await page.goto("/project/logkeeper/settings/git-tags");
     await expect(page.getByTestId("save-settings-button")).toBeDisabled();
   });
 
@@ -34,10 +41,16 @@ test.describe("Git Tags project settings when GitHub webhooks are disabled", ()
 });
 
 test.describe("Git Tags project settings when GitHub webhooks are enabled", () => {
-  const origin = "/repo/602d70a2b2373672ee493184/settings/git-tags";
-
   test.beforeEach(async ({ authenticatedPage: page }) => {
-    await page.goto(origin);
+    await page.context().addCookies([
+      {
+        name: SEEN_GITHUB_NAV_GUIDE_CUE,
+        value: "true",
+        domain: "localhost",
+        path: "/",
+      },
+    ]);
+    await page.goto("/repo/602d70a2b2373672ee493184/settings/git-tags");
     await expect(page.getByTestId("save-settings-button")).toBeDisabled();
   });
 

apps/spruce/playwright/tests/projectSettings/merge_queue.spec.ts

@@ -1,11 +1,18 @@
+import { SEEN_GITHUB_NAV_GUIDE_CUE } from "../../../src/constants/cookies";
 import { test, expect } from "../../fixtures";
 import { validateToast } from "../../helpers";
 
 test.describe("Merge Queue project settings when GitHub webhooks are disabled", () => {
-  const origin = "/project/logkeeper/settings/merge-queue";
-
   test.beforeEach(async ({ authenticatedPage: page }) => {
-    await page.goto(origin);
+    await page.context().addCookies([
+      {
+        name: SEEN_GITHUB_NAV_GUIDE_CUE,
+        value: "true",
+        domain: "localhost",
+        path: "/",
+      },
+    ]);
+    await page.goto("/project/logkeeper/settings/merge-queue");
     await expect(page.getByTestId("save-settings-button")).toHaveAttribute(
       "aria-disabled",
       "true",
@@ -36,10 +43,16 @@ test.describe("Merge Queue project settings when GitHub webhooks are disabled",
 });
 
 test.describe("Merge Queue project settings when GitHub webhooks are enabled", () => {
-  const origin = "/project/spruce/settings/merge-queue";
-
   test.beforeEach(async ({ authenticatedPage: page }) => {
-    await page.goto(origin);
+    await page.context().addCookies([
+      {
+        name: SEEN_GITHUB_NAV_GUIDE_CUE,
+        value: "true",
+        domain: "localhost",
+        path: "/",
+      },
+    ]);
+    await page.goto("/project/spruce/settings/merge-queue");
     await expect(page.getByTestId("save-settings-button")).toHaveAttribute(
       "aria-disabled",
       "true",

apps/spruce/playwright/tests/projectSettings/pull_requests.spec.ts

@@ -1,8 +1,17 @@
+import { SEEN_GITHUB_NAV_GUIDE_CUE } from "../../../src/constants/cookies";
 import { test, expect } from "../../fixtures";
 import { validateToast } from "../../helpers";
 
 test.describe("Pull Requests project settings when GitHub webhooks are disabled", () => {
   test.beforeEach(async ({ authenticatedPage: page }) => {
+    await page.context().addCookies([
+      {
+        name: SEEN_GITHUB_NAV_GUIDE_CUE,
+        value: "true",
+        domain: "localhost",
+        path: "/",
+      },
+    ]);
     await page.goto("/project/logkeeper/settings/pull-requests");
     await expect(page.getByTestId("save-settings-button")).toHaveAttribute(
       "aria-disabled",
@@ -35,6 +44,14 @@ test.describe("Pull Requests project settings when GitHub webhooks are disabled"
 
 test.describe("Pull Requests project settings when GitHub webhooks are enabled", () => {
   test.beforeEach(async ({ authenticatedPage: page }) => {
+    await page.context().addCookies([
+      {
+        name: SEEN_GITHUB_NAV_GUIDE_CUE,
+        value: "true",
+        domain: "localhost",
+        path: "/",
+      },
+    ]);
     await page.goto("/repo/602d70a2b2373672ee493184/settings/pull-requests");
     await expect(page.getByTestId("save-settings-button")).toHaveAttribute(
       "aria-disabled",

apps/spruce/src/constants/cookies.ts

@@ -18,4 +18,5 @@ export const TASK_HISTORY_INACTIVE_COMMITS_VIEW =
   "task-history-inactive-commits-view";
 export const SEEN_TASK_REVIEW_TOOLTIP = "seen-task-review-tooltip";
 export const SEEN_TEST_SELECTION_GUIDE_CUE = "seen-test-selection-guide-cue";
+export const SEEN_GITHUB_NAV_GUIDE_CUE = "seen-github-nav-guide-cue";
 export const OMIT_INACTIVE_WATERFALL_BUILDS = "omit-inactive-waterfall-builds";

apps/spruce/src/pages/projectAndRepoSettings/shared/GithubNavGuideCue.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_GITHUB_NAV_GUIDE_CUE } from "constants/cookies";
+import { showNewProjectNavigation } from "constants/featureFlags";
+
+type Props = {
+  refEl: GuideCueProps["refEl"];
+};
+
+export const GithubNavGuideCue: React.FC<Props> = ({ refEl }) => {
+  const [open, setOpen] = useState(
+    Cookies.get(SEEN_GITHUB_NAV_GUIDE_CUE) !== "true",
+  );
+
+  const close = () => {
+    Cookies.set(SEEN_GITHUB_NAV_GUIDE_CUE, "true", { expires: 365 });
+    setOpen(false);
+  };
+
+  return (
+    <GuideCue
+      currentStep={1}
+      enabled={showNewProjectNavigation}
+      numberOfSteps={1}
+      onPrimaryButtonClick={close}
+      open={open}
+      refEl={refEl}
+      setOpen={setOpen}
+      title="New: GitHub settings group"
+      tooltipAlign={TooltipAlign.Right}
+    >
+      GitHub-related settings like Pull Requests, Commit Checks, and Git Tags
+      now live under this GitHub section.
+    </GuideCue>
+  );
+};

apps/spruce/src/pages/projectAndRepoSettings/shared/ProjectNavbar.test.tsx

@@ -1,10 +1,12 @@
 // TODO DEVPROD-31534: Delete this file when the feature flag is removed
+import Cookies from "js-cookie";
 import { vi } from "vitest";
 import {
   renderWithRouterMatch as render,
   screen,
   userEvent,
 } from "@evg-ui/lib/test_utils";
+import { SEEN_GITHUB_NAV_GUIDE_CUE } from "constants/cookies";
 import { ProjectType } from "./tabs/utils";
 
 vi.mock("components/ProjectSelect", () => ({
@@ -29,6 +31,7 @@ const navItems = [
 describe("Feature flag tests for DEVPROD-31534", () => {
   beforeEach(() => {
     vi.resetModules();
+    Cookies.set(SEEN_GITHUB_NAV_GUIDE_CUE, "true");
   });
 
   navItems.forEach(({ dataCy, tabLabel }) => {

apps/spruce/src/pages/projectAndRepoSettings/shared/index.tsx

@@ -1,3 +1,4 @@
+import { useRef } from "react";
 import styled from "@emotion/styled";
 import { FormSkeleton } from "@leafygreen-ui/skeleton-loader";
 import { useParams, Link, Navigate } from "react-router-dom";
@@ -24,6 +25,7 @@ import { ProjectSettingsQuery, RepoSettingsQuery } from "gql/generated/types";
 import { ProjectSettingsProvider } from "./Context";
 import { CreateDuplicateProjectButton } from "./CreateDuplicateProjectButton";
 import { getTabTitle } from "./getTabTitle";
+import { GithubNavGuideCue } from "./GithubNavGuideCue";
 import { ProjectSettingsTabs } from "./Tabs";
 import { projectOnlyTabs } from "./tabs/types";
 import { ProjectType } from "./tabs/utils";
@@ -79,6 +81,7 @@ const SharedSettings: React.FC<SharedSettingsProps> = ({
   const otherTabs: ProjectSettingsTabRoutes[] = [
     ProjectSettingsTabRoutes.EventLog,
   ];
+  const githubGroupRef = useRef<HTMLDivElement | null>(null);
 
   if (!tabRouteValues.includes(tab as ProjectSettingsTabRoutes)) {
     return (
@@ -134,7 +137,7 @@ const SharedSettings: React.FC<SharedSettingsProps> = ({
 
           {showNewProjectNavigation ? (
             <>
-              {/* Grouped, collapsible nav when feature flag is on */}
+              {/* Grouped nav when feature flag is on */}
               <SideNavGroup
                 glyph={<Icon glyph="EvergreenLogo" />}
                 header="Evergreen"
@@ -151,25 +154,26 @@ const SharedSettings: React.FC<SharedSettingsProps> = ({
                   />
                 ))}
               </SideNavGroup>
-
-              <SideNavGroup
-                collapsible
-                glyph={<Icon glyph="GitHub" />}
-                header="GitHub"
-              >
-                {githubTabs.map((v) => (
-                  <SharedSettingsNavItem
-                    key={v}
-                    currentTab={tab ?? ProjectSettingsTabRoutes.General}
-                    getRoute={
-                      isRepo ? getRepoSettingsRoute : getProjectSettingsRoute
-                    }
-                    id={isRepo ? repoId : projectIdentifier}
-                    tab={v}
-                  />
-                ))}
-              </SideNavGroup>
-
+              <div ref={githubGroupRef}>
+                <SideNavGroup
+                  collapsible
+                  glyph={<Icon glyph="GitHub" />}
+                  header="GitHub"
+                >
+                  {githubTabs.map((v) => (
+                    <SharedSettingsNavItem
+                      key={v}
+                      currentTab={tab ?? ProjectSettingsTabRoutes.General}
+                      getRoute={
+                        isRepo ? getRepoSettingsRoute : getProjectSettingsRoute
+                      }
+                      id={isRepo ? repoId : projectIdentifier}
+                      tab={v}
+                    />
+                  ))}
+                </SideNavGroup>
+                <GithubNavGuideCue refEl={githubGroupRef} />
+              </div>
               <SideNavGroup glyph={<Icon glyph="List" />} header="ChangeLog">
                 {otherTabs.map((v) => (
                   <SharedSettingsNavItem