Onboarding app#2350
Open
lkostrowski wants to merge 12 commits into
Open
Conversation
🦋 Changeset detectedLatest commit: 4d285c1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Differences FoundExpandLicense Package <<missing>> saleor-app-onboarding SummaryExpand
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #2350 +/- ##
==========================================
- Coverage 38.00% 34.19% -3.81%
==========================================
Files 1048 892 -156
Lines 67133 60165 -6968
Branches 3578 2781 -797
==========================================
- Hits 25515 20575 -4940
+ Misses 41228 39236 -1992
+ Partials 390 354 -36
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new Onboarding Saleor app (POC) that mounts as a Dashboard home-page widget via the HOME_WIDGETS extension, with client-side onboarding UI and user-metadata persistence.
Changes:
- Introduces the
apps/onboardingNext.js App Router app with manifest + register endpoints and minimal UI shell/providers. - Implements onboarding widget UI, state management, metadata persistence, and unit tests for core logic/hooks.
- Adds app-level tooling/config (ESLint, TS, Vitest, codegen, Sentry) and updates
pnpm-lock.yaml.
Reviewed changes
Copilot reviewed 50 out of 55 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Updates lockfile to include the new onboarding app and dependency graph changes. |
| apps/onboarding/vitest.config.ts | Adds Vitest configuration for onboarding app unit tests. |
| apps/onboarding/vercel.json | Adds Vercel deployment config (regions). |
| apps/onboarding/turbo.json | Declares env vars required for the deploy task in Turbo. |
| apps/onboarding/tsconfig.json | Adds TypeScript config and path aliases for onboarding app. |
| apps/onboarding/src/modules/onboarding/welcome-page-onboarding.tsx | Implements the top-level onboarding widget accordion container. |
| apps/onboarding/src/modules/onboarding/welcome-page-onboarding-accordion.tsx | Renders the per-step accordion UI and loading skeleton. |
| apps/onboarding/src/modules/onboarding/onboarding-context/utils.ts | Adds onboarding state transition helpers and metadata preparation. |
| apps/onboarding/src/modules/onboarding/onboarding-context/utils.test.ts | Unit tests for onboarding context utilities. |
| apps/onboarding/src/modules/onboarding/onboarding-context/use-onboarding-storage.ts | Adds me query + metadata persistence via updateMetadata. |
| apps/onboarding/src/modules/onboarding/onboarding-context/use-expanded-onboarding-id.ts | Hook for selecting which onboarding step is expanded. |
| apps/onboarding/src/modules/onboarding/onboarding-context/use-expanded-onboarding-id.test.ts | Tests for expanded-step selection hook behavior. |
| apps/onboarding/src/modules/onboarding/onboarding-context/types.ts | Declares onboarding context/state/types and storage service interface. |
| apps/onboarding/src/modules/onboarding/onboarding-context/onboarding-context.tsx | Implements the Onboarding context provider and state lifecycle. |
| apps/onboarding/src/modules/onboarding/onboarding-context/initial-onboarding-state.ts | Defines initial steps list and initial persisted state. |
| apps/onboarding/src/modules/onboarding/hooks/use-onboarding-data.tsx | Provides step data (copy + actions) backed by onboarding state. |
| apps/onboarding/src/modules/onboarding/hooks/use-app-redirect.ts | Wraps AppBridge redirect for navigation from widget buttons. |
| apps/onboarding/src/modules/onboarding/components/step-icon.tsx | Adds step completion icon component. |
| apps/onboarding/src/modules/onboarding/components/fake-disabled-button.tsx | Adds a “disabled-looking” button used for permission-gated actions. |
| apps/onboarding/src/modules/onboarding/components/dashboard-card.tsx | Adds a small DashboardCard-like compound component wrapper. |
| apps/onboarding/src/modules/onboarding/components/buttons/types.ts | Defines shared button props. |
| apps/onboarding/src/modules/onboarding/components/buttons/permission-gated-redirect-button.tsx | Adds permission-gated redirect button with tooltip. |
| apps/onboarding/src/modules/onboarding/components/buttons/orders-button.tsx | Adds “Go to orders” step action button. |
| apps/onboarding/src/modules/onboarding/components/buttons/invite-staff-button.tsx | Adds “Invite members” step action button. |
| apps/onboarding/src/modules/onboarding/components/buttons/extensions-button.tsx | Adds extensions navigation step action button. |
| apps/onboarding/src/modules/onboarding/components/buttons/create-product-button.tsx | Adds products navigation step action button. |
| apps/onboarding/src/modules/onboarding/components/buttons/check-graphql-button.tsx | Adds GraphQL playground navigation step action button. |
| apps/onboarding/src/lib/saleor-app.ts | Adds a SaleorApp instance using a no-op APL (client-only app). |
| apps/onboarding/src/lib/env.ts | Adds env validation via @t3-oss/env-nextjs. |
| apps/onboarding/src/instrumentations/sentry-node.ts | Adds Node-runtime Sentry initialization for error reporting. |
| apps/onboarding/src/instrumentation.ts | Adds Next.js instrumentation hook and request error capture. |
| apps/onboarding/src/app/page.tsx | Adds the app root page rendering the client-only widget. |
| apps/onboarding/src/app/layout.tsx | Adds App Router layout with Macaw UI styles. |
| apps/onboarding/src/app/global-error.tsx | Adds global error boundary capturing errors to Sentry. |
| apps/onboarding/src/app/api/register/route.ts | Adds App Router register endpoint for app installation. |
| apps/onboarding/src/app/api/manifest/route.ts | Adds manifest endpoint declaring the HOME_WIDGETS widget extension. |
| apps/onboarding/src/app/_providers.tsx | Adds client providers (AppBridge, urql, theming, NoSSR). |
| apps/onboarding/src/app/_page-client.tsx | Adds client entry that wires providers + onboarding context + UI. |
| apps/onboarding/sentry.client.config.ts | Adds browser-side Sentry initialization. |
| apps/onboarding/reset.d.ts | Enables ts-reset for the onboarding app. |
| apps/onboarding/README.md | Documents app purpose, architecture, and local development steps. |
| apps/onboarding/package.json | Declares onboarding app scripts and dependencies. |
| apps/onboarding/next.config.ts | Adds Next.js config + Sentry integration. |
| apps/onboarding/next-env.d.ts | Adds Next.js TypeScript env typings file. |
| apps/onboarding/lint-staged.config.js | Adds app-specific lint-staged overrides. |
| apps/onboarding/graphql/queries/me.graphql | Adds me query for metadata + permissions. |
| apps/onboarding/graphql/mutations/update-user-metadata.graphql | Adds mutation for persisting onboarding state in metadata. |
| apps/onboarding/graphql.config.ts | Adds GraphQL config pointing at local schema file. |
| apps/onboarding/eslint.config.js | Adds app-specific ESLint configuration and overrides. |
| apps/onboarding/codegen.ts | Adds GraphQL codegen configuration for generated types/documents. |
| apps/onboarding/.env.example | Adds onboarding app env example file. |
| .changeset/onboarding-app-initial.md | Adds changeset announcing the onboarding app introduction. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Comment on lines
+47
to
+50
| title: "Create a new product", | ||
| description: | ||
| "Go to all products from where you can create a new product and view it in all product list. View the product in GraphQL", | ||
| isCompleted: isStepCompleted("create-product"), |
Comment on lines
+5
to
+9
| const handler = createAppRegisterHandler({ | ||
| apl: saleorApp.apl, | ||
| }); | ||
|
|
||
| export const POST = handler; |
Comment on lines
+1
to
+4
| "use client"; | ||
|
|
||
| import { Accordion, Box, Button, ChervonDownIcon, Text } from "@saleor/macaw-ui"; | ||
|
|
Comment on lines
+1
to
+4
| "use client"; | ||
|
|
||
| import { Accordion, Box, ChervonDownIcon, Skeleton, Text } from "@saleor/macaw-ui"; | ||
|
|
Comment on lines
+87
to
+94
| const toggleOnboarding = (value: boolean) => { | ||
| setOnboardingState((prev) => { | ||
| const newState = { ...prev, onboardingExpanded: value }; | ||
|
|
||
| storageService.saveOnboardingState(newState); | ||
|
|
||
| return newState; | ||
| }); |
Comment on lines
+11
to
+21
| <Button | ||
| ref={ref} | ||
| onMouseEnter={() => setIsHovered(true)} | ||
| onMouseLeave={() => setIsHovered(false)} | ||
| cursor="not-allowed" | ||
| variant="primary" | ||
| boxShadow="none" | ||
| aria-disabled | ||
| tabIndex={-1} | ||
| // Inline styles override macaw-ui's later-applied background classes | ||
| style={{ |
Comment on lines
+12
to
+13
| - **Next.js App Router** for both API endpoints (`/api/manifest`, `/api/register`) and UI (`/`). | ||
| - **Manifest extension**: `HOME_WIDGETS` mount, `WIDGET` target, `GET` method (the staff JWT |
Comment on lines
+5
to
+7
| Introduce the Onboarding app — a standalone Saleor App that mounts on the Dashboard home page | ||
| (`HOME_WIDGETS` extension) and walks new users through first-run tasks: creating a product, | ||
| exploring orders, opening the GraphQL playground, browsing extensions, and inviting staff. |
Comment on lines
+34
to
+41
| homepageUrl: "https://github.com/saleor/apps", | ||
| id: env.MANIFEST_APP_ID, | ||
| name: env.APP_NAME, | ||
| permissions: [], | ||
| requiredSaleorVersion: ">=3.23 <4", | ||
| supportUrl: "https://saleor.io/discord", | ||
| version: packageJson.version, | ||
| webhooks: [], |
Comment on lines
+12
to
+16
| - **Next.js App Router** for both API endpoints (`/api/manifest`, `/api/register`) and UI (`/`). | ||
| - **Manifest extension**: `HOME_WIDGETS` mount, `WIDGET` target, `GET` method (the staff JWT | ||
| comes from AppBridge automatically). | ||
| - **Client-only**: all GraphQL calls run in the browser using the user's JWT issued by AppBridge. | ||
| No webhooks, no APL persistence (a no-op APL satisfies the SDK's register handler). |
Comment on lines
+5
to
+7
| Introduce the Onboarding app — a standalone Saleor App that mounts on the Dashboard home page | ||
| (`HOME_WIDGETS` extension) and walks new users through first-run tasks: creating a product, | ||
| exploring orders, opening the GraphQL playground, browsing extensions, and inviting staff. |
| @@ -0,0 +1,92 @@ | |||
| "use client"; | |||
|
|
|||
| import { Accordion, Box, Button, ChervonDownIcon, Text } from "@saleor/macaw-ui"; | |||
| size="small" | ||
| data-test-id="onboarding-accordion-trigger" | ||
| > | ||
| <ChervonDownIcon /> |
| @@ -0,0 +1,78 @@ | |||
| "use client"; | |||
|
|
|||
| import { Accordion, Box, ChervonDownIcon, Skeleton, Text } from "@saleor/macaw-ui"; | |||
| transition="ease" | ||
| __transform={`${extendedStepId === step.id ? "rotate(180deg)" : "none"}`} | ||
| > | ||
| <ChervonDownIcon /> |
Comment on lines
+13
to
+14
| // Matches dashboard's count: view-extensions and view-webhooks are mutually exclusive. | ||
| export const TOTAL_STEPS_COUNT = initialOnboardingSteps.length - 1; |
Comment on lines
+17
to
+26
| boxShadow="none" | ||
| aria-disabled | ||
| tabIndex={-1} | ||
| // Inline styles override macaw-ui's later-applied background classes | ||
| style={{ | ||
| backgroundColor: isHovered | ||
| ? vars.colors.background.buttonDefaultPrimaryHovered | ||
| : vars.colors.background.buttonDefaultDisabled, | ||
| color: vars.colors.text.defaultDisabled, | ||
| }} |
Comment on lines
+69
to
+71
| description: | ||
| "Go to all orders where you can create an fulfilment and refund and review corresponding statuses. View the order in GraphQL", | ||
| isCompleted: isStepCompleted("explore-orders"), |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Takes Onboarding screen from the Dashboard and makes it an app. Together with a new API, app mounts itself as a fullscreen page under
/homepathThis allows