feat: add doc menu link in side bar

xrutayisire · xrutayisire · commit b137ce900366 · 2025-05-26T15:19:54.000+02:00
diff --git a/packages/manager/src/managers/telemetry/types.ts b/packages/manager/src/managers/telemetry/types.ts
@@ -35,8 +35,6 @@ export const SegmentEventType = {
 	devCollab_setUpWorkflowOpened: "dev-collab:set-up-workflow-opened",
 	devCollab_workflowStubDisplayed: "dev-collab:workflow-stub-displayed",
 	sliceMachine_start: "slice-machine:start",
-	sliceLibrary_beta_modalOpened: "slice-library:beta:modal-opened",
-	sliceLibrary_beta_codeOpened: "slice-library:beta:code-opened",
 	postPush_emptyStateCtaClicked: "post-push:empty-state-cta-clicked",
 	postPush_toastCtaClicked: "post-push:toast-cta-clicked",
 	experiment_exposure: "experiment:exposure",
@@ -45,6 +43,7 @@ export const SegmentEventType = {
 	sharedOnboarding_completed: "shared-onboarding:completed",
 	sharedOnboarding_tutorial: "shared-onboarding:follow-tutorial",
 	sliceGenerationFeedback: "slice-generation-feedback",
+	navigation_documentationLinkClicked: "navigation:documentation-link-clicked",
 } as const;
 type SegmentEventTypes =
 	(typeof SegmentEventType)[keyof typeof SegmentEventType];
@@ -88,10 +87,6 @@ export const HumanSegmentEventType = {
 	[SegmentEventType.devCollab_workflowStubDisplayed]:
 		"SliceMachine Dev Collab Workflow Stub Displayed",
 	[SegmentEventType.sliceMachine_start]: "SliceMachine Start",
-	[SegmentEventType.sliceLibrary_beta_modalOpened]:
-		"SliceMachine Slice Library [BETA] CTA modal displayed",
-	[SegmentEventType.sliceLibrary_beta_codeOpened]:
-		"SliceMachine Slice Library [BETA] CTA example code opened",
 	[SegmentEventType.postPush_emptyStateCtaClicked]:
 		"SliceMachine Post Push Empty State CTA Clicked",
 	[SegmentEventType.postPush_toastCtaClicked]:
@@ -106,6 +101,8 @@ export const HumanSegmentEventType = {
 	[SegmentEventType.sharedOnboarding_tutorial]:
 		"Prismic Onboarding Guide Follow Tutorial",
 	[SegmentEventType.sliceGenerationFeedback]: "Slice Generation Feedback",
+	[SegmentEventType.navigation_documentationLinkClicked]:
+		"SliceMachine Documentation Link Clicked",
 } as const;
 
 export type HumanSegmentEventTypes =
@@ -375,14 +372,6 @@ type SliceMachineStart = SegmentEvent<
 	}
 >;
 
-type SliceLibraryBetaModalOpened = SegmentEvent<
-	typeof SegmentEventType.sliceLibrary_beta_modalOpened
->;
-
-type SliceLibraryBetaCodeOpened = SegmentEvent<
-	typeof SegmentEventType.sliceLibrary_beta_codeOpened
->;
-
 type OnboardingCommonPayload = { stepId: string; stepTitle: string };
 type SharedOnboardingProperties<T = Record<string, string>> = T & {
 	source: "SliceMachine";
@@ -431,6 +420,13 @@ type SliceGenerationFeedback = SegmentEvent<
 	}
 >;
 
+type NavigationDocumentationLinkClicked = SegmentEvent<
+	typeof SegmentEventType.navigation_documentationLinkClicked,
+	{
+		framework: string;
+	}
+>;
+
 export type SegmentEvents =
 	| CommandInitStartSegmentEvent
 	| CommandInitIdentifySegmentEvent
@@ -461,13 +457,12 @@ export type SegmentEvents =
 	| DevCollabSetUpWorkflowOpened
 	| DevCollabWorkflowStubDisplayed
 	| SliceMachineStart
-	| SliceLibraryBetaModalOpened
-	| SliceLibraryBetaCodeOpened
 	| SliceMachineSharedOnboardingStepOpened
 	| SliceMachineSharedOnboardingStepCompleted
 	| SliceMachineSharedOnboardingCompleted
 	| SliceMachineSharedOnboardingTutorial
 	| SliceMachinePostPushEmptyStateCtaClicked
 	| SliceMachinePostPushToastCtaClicked
 	| SliceMachineExperimentExposure
-	| SliceGenerationFeedback;
+	| SliceGenerationFeedback
+	| NavigationDocumentationLinkClicked;
diff --git a/packages/slice-machine/src/features/masterSliceLibrary/SliceLibraryPreviewModal.tsx b/packages/slice-machine/src/features/masterSliceLibrary/SliceLibraryPreviewModal.tsx
diff --git a/packages/slice-machine/src/features/navigation/Navigation.tsx b/packages/slice-machine/src/features/navigation/Navigation.tsx
@@ -1,19 +1,19 @@
 import { ActionList, Box, Separator, Skeleton } from "@prismicio/editor-ui";
 import { useRouter } from "next/router";
-import { Suspense, useState } from "react";
+import { Suspense } from "react";
 
 import { telemetry } from "@/apiClient";
 import { ErrorBoundary } from "@/ErrorBoundary";
 import { CUSTOM_TYPES_CONFIG } from "@/features/customTypes/customTypesConfig";
 import { CUSTOM_TYPES_MESSAGES } from "@/features/customTypes/customTypesMessages";
-import { MasterSliceLibraryPreviewModal } from "@/features/masterSliceLibrary/SliceLibraryPreviewModal";
 import { RepositoryInfo } from "@/features/navigation/RepositoryInfo";
 import { OnboardingGuide } from "@/features/onboarding";
 import { useGitIntegrationExperiment } from "@/features/settings/git/useGitIntegrationExperiment";
+import { useAdapterName } from "@/hooks/useAdapterName";
 import { useMarketingContent } from "@/hooks/useMarketingContent";
 import { FolderIcon } from "@/icons/FolderIcon";
 import { LightningIcon } from "@/icons/Lightning";
-import { MasterSliceLibraryIcon } from "@/icons/MasterSliceLibraryIcon";
+import { MenuBookIcon } from "@/icons/MenuBookIcon";
 import { SettingsIcon } from "@/icons/SettingsIcon";
 import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
 
@@ -28,10 +28,9 @@ export function Navigation() {
   const router = useRouter();
 
   const gitIntegrationExperiment = useGitIntegrationExperiment();
-  const [isSliceLibraryDialogOpen, setIsSliceLibraryDialogOpen] =
-    useState(false);
-  const { masterSliceLibrary } = useMarketingContent();
+  const { documentationLink } = useMarketingContent();
   const sectionsNamingExperiment = useSectionsNamingExperiment();
+  const adapter = useAdapterName();
 
   interface CustomTypeNavigationItemProps {
     type: "page" | "custom";
@@ -105,29 +104,18 @@ export function Navigation() {
             </Suspense>
           </ErrorBoundary>
 
-          {masterSliceLibrary && (
-            <>
-              <MasterSliceLibraryPreviewModal
-                isOpen={isSliceLibraryDialogOpen}
-                onClose={() => {
-                  setIsSliceLibraryDialogOpen(false);
-                }}
-              />
-              <NavigationItem
-                title={`Master ${capitalizeFirstLetter(
-                  sectionsNamingExperiment.value,
-                )} Library`}
-                Icon={MasterSliceLibraryIcon}
-                onClick={() => {
-                  void telemetry.track({
-                    event: "slice-library:beta:modal-opened",
-                  });
-
-                  setIsSliceLibraryDialogOpen(true);
-                }}
-              />
-            </>
-          )}
+          <NavigationItem
+            title="Documentation"
+            href={documentationLink}
+            target="_blank"
+            Icon={MenuBookIcon}
+            onClick={() => {
+              void telemetry.track({
+                event: "navigation:documentation-link-clicked",
+                framework: adapter,
+              });
+            }}
+          />
 
           {gitIntegrationExperiment.eligible && (
             <NavigationItem
diff --git a/packages/slice-machine/src/features/navigation/NavigationItem.tsx b/packages/slice-machine/src/features/navigation/NavigationItem.tsx
@@ -18,7 +18,9 @@ type NavigationItemPropsBase = {
 type NavigationLinkItemProps = NavigationItemPropsBase & {
   href: string;
   target?: "_blank";
-  onClick?: never;
+
+  // For telemetry (optional)
+  onClick?: MouseEventHandler<Element>;
 };
 
 type NavigationButtonItemProps = NavigationItemPropsBase & {
@@ -58,6 +60,7 @@ export function NavigationItem(props: NavigationItemProps) {
           target={target}
           style={{ textDecoration: "none" }}
           data-active={active}
+          onClick={onClick}
         >
           {Content}
         </Link>
diff --git a/packages/slice-machine/src/hooks/useMarketingContent.ts b/packages/slice-machine/src/hooks/useMarketingContent.ts
@@ -1,38 +1,18 @@
 import { useAdapterName } from "./useAdapterName";
 
 type MarketingContent = {
-  tutorial?: {
-    url: string;
-  };
-  masterSliceLibrary?: {
-    exampleLinkUrl: string;
-    codeLinkUrl: string;
-    previewVideoUrl: string;
-  };
+  documentationLink: string;
 };
 
 const CONTENT_BY_ADAPTER: Record<string, MarketingContent> = {
   "@slicemachine/adapter-next": {
-    tutorial: {
-      url: "https://prismic.dev/course/next",
-    },
-    masterSliceLibrary: {
-      exampleLinkUrl: "https://slicify-app.vercel.app/slice-library",
-      codeLinkUrl:
-        "https://github.com/prismicio-solution-engineering/slicify-library#readme",
-      previewVideoUrl:
-        "https://res.cloudinary.com/dmtf1daqp/video/upload/v1715957263/Slice_library_video_oemhy0.mp4",
-    },
+    documentationLink: "https://prismic.io/docs/nextjs",
   },
   "@slicemachine/adapter-nuxt": {
-    tutorial: {
-      url: "https://prismic.dev/course/nuxt",
-    },
+    documentationLink: "https://prismic.io/docs/nuxt",
   },
   "@slicemachine/adapter-sveltekit": {
-    tutorial: {
-      url: "https://prismic.dev/course/sveltekit",
-    },
+    documentationLink: "https://prismic.io/docs/sveltekit",
   },
 };
 
diff --git a/packages/slice-machine/src/icons/MasterSliceLibraryIcon.tsx b/packages/slice-machine/src/icons/MasterSliceLibraryIcon.tsx
diff --git a/packages/slice-machine/src/icons/MenuBookIcon.tsx b/packages/slice-machine/src/icons/MenuBookIcon.tsx
@@ -0,0 +1,17 @@
+import type { FC, SVGProps } from "react";
+
+export const MenuBookIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M14 9.9V8.2C14.55 7.96667 15.1125 7.79167 15.6875 7.675C16.2625 7.55833 16.8667 7.5 17.5 7.5C17.9333 7.5 18.3583 7.53333 18.775 7.6C19.1917 7.66667 19.6 7.75 20 7.85V9.45C19.6 9.3 19.1958 9.1875 18.7875 9.1125C18.3792 9.0375 17.95 9 17.5 9C16.8667 9 16.2583 9.07917 15.675 9.2375C15.0917 9.39583 14.5333 9.61667 14 9.9ZM14 15.4V13.7C14.55 13.4667 15.1125 13.2917 15.6875 13.175C16.2625 13.0583 16.8667 13 17.5 13C17.9333 13 18.3583 13.0333 18.775 13.1C19.1917 13.1667 19.6 13.25 20 13.35V14.95C19.6 14.8 19.1958 14.6875 18.7875 14.6125C18.3792 14.5375 17.95 14.5 17.5 14.5C16.8667 14.5 16.2583 14.575 15.675 14.725C15.0917 14.875 14.5333 15.1 14 15.4ZM14 12.65V10.95C14.55 10.7167 15.1125 10.5417 15.6875 10.425C16.2625 10.3083 16.8667 10.25 17.5 10.25C17.9333 10.25 18.3583 10.2833 18.775 10.35C19.1917 10.4167 19.6 10.5 20 10.6V12.2C19.6 12.05 19.1958 11.9375 18.7875 11.8625C18.3792 11.7875 17.95 11.75 17.5 11.75C16.8667 11.75 16.2583 11.8292 15.675 11.9875C15.0917 12.1458 14.5333 12.3667 14 12.65ZM6.5 16C7.28333 16 8.04583 16.0875 8.7875 16.2625C9.52917 16.4375 10.2667 16.7 11 17.05V7.2C10.3167 6.8 9.59167 6.5 8.825 6.3C8.05833 6.1 7.28333 6 6.5 6C5.9 6 5.30417 6.05833 4.7125 6.175C4.12083 6.29167 3.55 6.46667 3 6.7V16.6C3.58333 16.4 4.1625 16.25 4.7375 16.15C5.3125 16.05 5.9 16 6.5 16ZM13 17.05C13.7333 16.7 14.4708 16.4375 15.2125 16.2625C15.9542 16.0875 16.7167 16 17.5 16C18.1 16 18.6875 16.05 19.2625 16.15C19.8375 16.25 20.4167 16.4 21 16.6V6.7C20.45 6.46667 19.8792 6.29167 19.2875 6.175C18.6958 6.05833 18.1 6 17.5 6C16.7167 6 15.9417 6.1 15.175 6.3C14.4083 6.5 13.6833 6.8 13 7.2V17.05ZM12 20C11.2 19.3667 10.3333 18.875 9.4 18.525C8.46667 18.175 7.5 18 6.5 18C5.8 18 5.1125 18.0917 4.4375 18.275C3.7625 18.4583 3.11667 18.7167 2.5 19.05C2.15 19.2333 1.8125 19.225 1.4875 19.025C1.1625 18.825 1 18.5333 1 18.15V6.1C1 5.91667 1.04583 5.74167 1.1375 5.575C1.22917 5.40833 1.36667 5.28333 1.55 5.2C2.31667 4.8 3.11667 4.5 3.95 4.3C4.78333 4.1 5.63333 4 6.5 4C7.46667 4 8.4125 4.125 9.3375 4.375C10.2625 4.625 11.15 5 12 5.5C12.85 5 13.7375 4.625 14.6625 4.375C15.5875 4.125 16.5333 4 17.5 4C18.3667 4 19.2167 4.1 20.05 4.3C20.8833 4.5 21.6833 4.8 22.45 5.2C22.6333 5.28333 22.7708 5.40833 22.8625 5.575C22.9542 5.74167 23 5.91667 23 6.1V18.15C23 18.5333 22.8375 18.825 22.5125 19.025C22.1875 19.225 21.85 19.2333 21.5 19.05C20.8833 18.7167 20.2375 18.4583 19.5625 18.275C18.8875 18.0917 18.2 18 17.5 18C16.5 18 15.5333 18.175 14.6 18.525C13.6667 18.875 12.8 19.3667 12 20Z"
+      fill="#6F6E77"
+    />
+  </svg>
+);
diff --git a/playwright/pages/components/Menu.ts b/playwright/pages/components/Menu.ts
@@ -11,8 +11,7 @@ export class Menu {
   readonly customTypesLink: Locator;
   readonly slicesLink: Locator;
   readonly changesLink: Locator;
-  readonly masterSliceLibraryButton: Locator;
-  readonly learnPrismicLink: Locator;
+  readonly documentationLink: Locator;
   readonly settingsLink: Locator;
   readonly changelogLink: Locator;
   readonly appVersion: Locator;
@@ -55,12 +54,8 @@ export class Menu {
     this.changesLink = this.menu.getByRole("button", {
       name: "Review changes",
     });
-    this.masterSliceLibraryButton = this.menu.getByRole("button", {
-      name: "Master Slice Library",
-      exact: true,
-    });
-    this.learnPrismicLink = this.menu.getByRole("link", {
-      name: "Learn Prismic",
+    this.documentationLink = this.menu.getByRole("link", {
+      name: "Documentation",
       exact: true,
     });
     this.settingsLink = this.menu.getByRole("link", {
diff --git a/playwright/tests/common/navigation.spec.ts b/playwright/tests/common/navigation.spec.ts
