Onboarding app POC#2350
Draft
lkostrowski wants to merge 5 commits intomainfrom
Draft
Conversation
🦋 Changeset detectedLatest commit: 1260448 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. 9 Skipped Deployments
|
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 37.84% 37.84%
=======================================
Files 1037 1037
Lines 66945 66945
Branches 3534 3534
=======================================
Hits 25338 25338
Misses 41226 41226
Partials 381 381
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 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
+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
+21
| export type OnboardingState = { | ||
| stepsCompleted: OnboardingStepsIDs[]; | ||
| stepsExpanded: Record<OnboardingStepsIDs, boolean>; | ||
| onboardingExpanded: boolean; | ||
| }; |
Comment on lines
+9
to
+16
| const debounce = <Args extends unknown[]>(fn: (...args: Args) => void, ms: number) => { | ||
| let timer: ReturnType<typeof setTimeout> | null = null; | ||
|
|
||
| return (...args: Args) => { | ||
| if (timer) clearTimeout(timer); | ||
| timer = setTimeout(() => fn(...args), ms); | ||
| }; | ||
| }; |
Comment on lines
+77
to
+80
| const debouncedSave = useMemo( | ||
| () => debounce(saveOnboardingState, 1000), | ||
| [saveOnboardingState], | ||
| ) as StorageService["saveOnboardingState"]; |
Comment on lines
+68
to
+72
| const userMetadata = prepareUserMetadata(user.metadata, onboardingState); | ||
|
|
||
| await saveMetadata({ id: user.id, input: userMetadata }).catch(() => { | ||
| // intentionally swallowed — widget continues to work without persistence | ||
| }); |
Comment on lines
+87
to
+95
| const toggleOnboarding = (value: boolean) => { | ||
| setOnboardingState((prev) => { | ||
| const newState = { ...prev, onboardingExpanded: value }; | ||
|
|
||
| storageService.saveOnboardingState(newState); | ||
|
|
||
| return newState; | ||
| }); | ||
| }; |
Comment on lines
+5
to
+9
| const handler = createAppRegisterHandler({ | ||
| apl: saleorApp.apl, | ||
| }); | ||
|
|
||
| export const POST = handler; |
Comment on lines
+15
to
+20
| cursor="not-allowed" | ||
| variant="primary" | ||
| boxShadow="none" | ||
| aria-disabled | ||
| tabIndex={-1} | ||
| // Inline styles override macaw-ui's later-applied background classes |
Comment on lines
+67
to
+71
| id: "explore-orders", | ||
| title: "Explore orders", | ||
| 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"), |
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"), |
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.
No description provided.