feat(UI-1433): create onboarding guided tour (#1093)

Author: RonenMars

e2e/pages/dashboard.ts

@@ -18,6 +18,14 @@ export class DashboardPage {
 		await this.page.getByRole("tab", { name: "PROGRAM.PY" }).isVisible();
 		await this.page.getByText('print("Hello World!")').isVisible();
 		await this.page.waitForLoadState("domcontentloaded");
+
+		try {
+			await this.page.getByRole("button", { name: "Skip the tour", exact: true }).click({ timeout: 2000 });
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		} catch (error) {
+			// eslint-disable-next-line no-console
+			console.log("Skip the tour button not found, continuing...");
+		}
 	}
 
 	async createProjectFromTemplate(projectName: string) {
@@ -29,5 +37,13 @@ export class DashboardPage {
 		await this.page.getByRole("button", { name: "Create Project From Template: HTTP" }).click();
 		await this.page.getByPlaceholder("Enter project name").fill(projectName);
 		await this.page.getByRole("button", { name: "Create", exact: true }).click();
+
+		try {
+			await this.page.getByRole("button", { name: "Skip the tour", exact: true }).click({ timeout: 2000 });
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		} catch (error) {
+			// eslint-disable-next-line no-console
+			console.log("Skip the tour button not found, continuing...");
+		}
 	}
 }

e2e/project/webhookSessionTriggered.spec.ts

@@ -78,10 +78,18 @@ async function setupProjectAndTriggerSession({ dashboardPage, page, request }: S
 		await page.getByRole("option", { name: "Samples" }).click();
 		await page.locator("body").click({ position: { x: 0, y: 0 } });
 		await page.getByRole("button", { name: "Create Project From Template: HTTP" }).scrollIntoViewIfNeeded();
-		await page.getByRole("button", { name: "Create Project From Template: HTTP" }).click();
+		await page.getByRole("button", { name: "Create Project From Template: HTTP" }).click({ timeout: 2000 });
 
 		await page.getByPlaceholder("Enter project name").fill(projectName);
 		await page.getByRole("button", { name: "Create", exact: true }).click();
+
+		try {
+			await page.getByRole("button", { name: "Skip the tour", exact: true }).click({ timeout: 2000 });
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		} catch (error) {
+			// eslint-disable-next-line no-console
+			console.log("Skip the tour button not found, continuing...");
+		}
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	} catch (error) {
 		await dashboardPage.createProjectFromTemplate(projectName);

src/app.tsx

@@ -159,7 +159,7 @@ export const App = () => {
 							path=":eventId"
 						/>
 					</Route>
-					<Route element={<Navigate replace to="code" />} index />
+					<Route element={<Navigate replace state={location.state} to="code" />} index />
 
 					<Route element={<Connections />} path="connections">
 						<Route element={<ConnectionsTable />} index />

src/assets/index.css

@@ -186,4 +186,51 @@ ul li::before {
 .swiper-prev,
 .swiper-next {
 	@apply relative;
+}
+
+[data-tour-highlight="true"] {
+	position: relative;
+	z-index: 50;
+	box-shadow: 0 0 0 4px rgba(188, 248, 112, 1);
+	animation: pulse-highlight 3s infinite;
+	border:2px solid rgba(188, 248, 112, 1) !important;
+}
+  
+@keyframes pulse-highlight {
+0% {
+	box-shadow: 0 0 0 0 rgba(188, 248, 112, 0.7);
+}
+70% {
+	box-shadow: 0 0 0 6px rgba(188, 248, 112, 0);
+}
+100% {
+	box-shadow: 0 0 0 0 rgba(188, 248, 112, 0);
+}
+}
+
+.dashed-arrow {
+	--c:red;  /* color */
+	--r:10px; /* circle size */
+	--s:10px; /* space bettwen circles */
+
+	width:100px;
+	height:100px;
+	display:inline-block;
+	margin:20px;
+	--g:radial-gradient(circle closest-side, var(--c) 85%,transparent);
+	background:
+		var(--g) calc(var(--s)/-2) 0/calc(var(--r) + var(--s)) var(--r) repeat-x,
+		var(--g) 0 calc(var(--s)/-2)/var(--r) calc(var(--r) + var(--s)) repeat-y;
+}
+  
+.dashed-arrow::after {
+	content:"";
+	position:absolute;
+	top:calc(var(--r)/2);
+	left:100%;
+	width:20px;
+	height:20px;
+	transform:translateY(-50%);
+	background:var(--c);
+	clip-path:polygon(0 0, 100% 50%,0 100%);
 }

src/components/atoms/buttons/button.tsx

@@ -13,6 +13,7 @@ export const Button = ({
 	disabled,
 	form,
 	href,
+	id,
 	onClick,
 	onKeyPressed,
 	style,
@@ -51,6 +52,7 @@ export const Button = ({
 			className={buttonClass}
 			disabled={disabled}
 			form={form}
+			id={id}
 			onClick={onClick}
 			onKeyDown={onKeyDown}
 			onMouseEnter={onMouseEnter}
@@ -63,7 +65,15 @@ export const Button = ({
 			{children}
 		</button>
 	) : (
-		<Link ariaLabel={ariaLabel} className={buttonClass} disabled={disabled} target={target} title={title} to={href}>
+		<Link
+			ariaLabel={ariaLabel}
+			className={buttonClass}
+			disabled={disabled}
+			id={id}
+			target={target}
+			title={title}
+			to={href}
+		>
 			{children}
 		</Link>
 	);

src/components/atoms/buttons/iconButton.tsx

@@ -19,6 +19,7 @@ export const IconButton = ({
 	title,
 	type = "button",
 	variant,
+	id,
 }: IconButtonProps) => {
 	const iconButtonClass = cn(
 		"flex shrink-0 items-center justify-center rounded-full p-2 outline-0 transition duration-300 hover:bg-gray-850",
@@ -49,6 +50,7 @@ export const IconButton = ({
 			title={title}
 			type={type}
 			{...linkHref}
+			id={id}
 		>
 			{children}
 		</Component>

src/components/atoms/dashedArrow.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+import { cn } from "@src/utilities";
+
+export const DashedArrow = ({ style, className }: { className: string; style: React.CSSProperties }) => {
+	const arrowClass = cn("dashed-arrow", className);
+	return <div className={arrowClass} style={style} />;
+};

src/components/atoms/index.ts

@@ -23,3 +23,4 @@ export { Toggle } from "@components/atoms/toggle";
 export { Typography } from "@components/atoms/typography";
 export { SuccessMessage } from "@components/atoms/successMessage";
 export { Tooltip } from "@components/atoms/tooltip";
+export { DashedArrow } from "@components/atoms/dashedArrow";

src/components/atoms/link.tsx

@@ -5,7 +5,7 @@ import { Link as LinkReact } from "react-router-dom";
 import { LinkProps } from "@interfaces/components";
 import { cn } from "@utilities";
 
-export const Link = ({ ariaLabel, children, className, disabled, target, title, to }: LinkProps) => {
+export const Link = ({ ariaLabel, children, className, disabled, target, title, to, id }: LinkProps) => {
 	const linkClass = cn(
 		{
 			"pointer-events-none cursor-not-allowed select-none": disabled,
@@ -14,7 +14,7 @@ export const Link = ({ ariaLabel, children, className, disabled, target, title,
 	);
 
 	return (
-		<LinkReact aria-label={ariaLabel} className={linkClass} target={target} title={title} to={to}>
+		<LinkReact aria-label={ariaLabel} className={linkClass} id={id} target={target} title={title} to={to}>
 			{children}
 		</LinkReact>
 	);

src/components/molecules/popover/popoverContentBase.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef } from "react";
 import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
 
 import { PopoverContentBaseProps } from "@src/interfaces/components";
+import { cn } from "@src/utilities";
 
 import { useMergeRefsCustom } from "@components/molecules/popover/utilities";
 
@@ -11,39 +12,20 @@ export const PopoverContentBase = forwardRef<HTMLDivElement, PopoverContentBaseP
 	propRef
 ) {
 	const ref = useMergeRefsCustom(context.refs.setFloating, propRef);
-
-	const handleOverlayKeyDown = (event: React.KeyboardEvent) => {
-		if (event.key === "Escape" || event.key === "Enter" || event.key === " ") {
-			context.setOpen(false);
-		}
-	};
-
-	const isClickInteraction = context.interactionType === "click";
+	const popoverClassName = cn("z-40", props?.className);
 
 	return (
 		<FloatingPortal>
 			<FloatingFocusManager context={floatingContext} initialFocus={initialFocusElement || 0}>
 				{context.isMounted ? (
-					<>
-						{isClickInteraction ? (
-							<div
-								aria-hidden="true"
-								className="fixed inset-0 z-30 bg-black/10"
-								onClick={() => context.setOpen(false)}
-								onKeyDown={handleOverlayKeyDown}
-								role="button"
-								tabIndex={0}
-							/>
-						) : null}
-						<div
-							ref={ref}
-							style={{ ...style, ...context.floatingStyles, ...context.styles }}
-							{...context.getFloatingProps(props)}
-							className={`${props?.className} z-40`}
-						>
-							{props.children}
-						</div>
-					</>
+					<div
+						ref={ref}
+						style={{ ...style, ...context.floatingStyles, ...context.styles }}
+						{...context.getFloatingProps(props)}
+						className={popoverClassName}
+					>
+						{props.children}
+					</div>
 				) : (
 					<div />
 				)}