-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Store onboarding state in user metadata (#5280)
* feature: Dashboard UI onboarding component * i18n * feature: Dashboard UI onboarding component * i18n * Base logic for store onboarding state in metadata * Fix saving metadata * Wait for user load * Add debouncing * Add test to store * Move ff condition inside onbarding context * Improve loading state from API * Update tests * Add changeset * CR fixes * Update mutation to eliminate problem with permissions --------- Co-authored-by: Wojciech <wojciech.mista@hotmail.com>
- Loading branch information
Showing
16 changed files
with
298 additions
and
76 deletions.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "saleor-dashboard": patch | ||
| --- | ||
|
|
||
| Onboarding state is now stored in user metadata, that means that onboarding state is persisted between logins on different machines |
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
33 changes: 0 additions & 33 deletions
33
src/newHome/homeOnboarding/onboardingContext/OnboardingStorage.ts
This file was deleted.
Oops, something went wrong.
This file contains 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
127 changes: 127 additions & 0 deletions
127
src/newHome/homeOnboarding/onboardingContext/useOnboardingStorage.test.ts
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| import { useUser } from "@dashboard/auth"; | ||
| import { useUpdateUserMetadataMutation } from "@dashboard/graphql"; | ||
| import { OnboardingStepsIDs } from "@dashboard/newHome/homeOnboarding/onboardingContext/types"; | ||
| import { act } from "@testing-library/react"; | ||
| import { renderHook } from "@testing-library/react-hooks"; | ||
|
|
||
| import { useOnboardingStorage } from "./useOnboardingStorage"; | ||
|
|
||
| jest.mock("@dashboard/auth", () => ({ | ||
| __esModule: true, | ||
| useUser: jest.fn(), | ||
| })); | ||
|
|
||
| jest.mock("@dashboard/graphql"); | ||
|
|
||
| jest.useFakeTimers(); | ||
|
|
||
| jest.mock("lodash/debounce", () => jest.fn(fn => fn)); | ||
|
|
||
| describe("useOnboardingStorage", () => { | ||
| describe("getOnboardingState", () => { | ||
| it("should return undefined when there is no onboarding in user metadata", () => { | ||
| // Arrange | ||
| (useUser as jest.Mock).mockImplementation(() => ({ | ||
| user: { metadata: [{ key1: "value1" }, { key2: "value2" }] }, | ||
| })); | ||
| (useUpdateUserMetadataMutation as jest.Mock).mockReturnValue([jest.fn(), {}]); | ||
|
|
||
| const { getOnboardingState } = renderHook(() => useOnboardingStorage()).result.current; | ||
|
|
||
| // Act | ||
| const result = getOnboardingState(); | ||
|
|
||
| // Assert | ||
| expect(result).toBeUndefined(); | ||
| }); | ||
|
|
||
| it("should return onboarding state from user metadata", () => { | ||
| // Arrange | ||
| (useUser as jest.Mock).mockImplementation(() => ({ | ||
| user: { | ||
| metadata: [ | ||
| { | ||
| key: "onboarding", | ||
| value: JSON.stringify({ steps: [], onboardingExpanded: true }), | ||
| }, | ||
| ], | ||
| }, | ||
| })); | ||
| (useUpdateUserMetadataMutation as jest.Mock).mockReturnValue([jest.fn(), {}]); | ||
|
|
||
| const { getOnboardingState } = renderHook(() => useOnboardingStorage()).result.current; | ||
|
|
||
| // Act | ||
| const result = getOnboardingState(); | ||
|
|
||
| // Assert | ||
| expect(result).toEqual({ steps: [], onboardingExpanded: true }); | ||
| }); | ||
| }); | ||
|
|
||
| describe("saveOnboardingState", () => { | ||
| it("should not save onboarding state when there is no user", async () => { | ||
| // Arrange | ||
| (useUser as jest.Mock).mockImplementation(() => ({ user: null })); | ||
|
|
||
| const updateMetadataMock = jest.fn(); | ||
|
|
||
| (useUpdateUserMetadataMutation as jest.Mock).mockReturnValue([updateMetadataMock, {}]); | ||
|
|
||
| const { result } = renderHook(() => useOnboardingStorage()); | ||
|
|
||
| // Act | ||
| const returnValue = await act(async () => { | ||
| return await result.current.saveOnboardingState({ | ||
| stepsCompleted: [], | ||
| stepsExpanded: {} as Record<OnboardingStepsIDs, boolean>, | ||
| onboardingExpanded: true, | ||
| }); | ||
| }); | ||
|
|
||
| // Assert | ||
| expect(returnValue).toBeUndefined(); | ||
| expect(updateMetadataMock).not.toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it("should save onboarding state to user metadata and be called only once", async () => { | ||
| // Arrange | ||
| (useUser as jest.Mock).mockImplementation(() => ({ user: { id: "1", metadata: [] } })); | ||
|
|
||
| const updateMetadataMock = jest.fn(); | ||
|
|
||
| (useUpdateUserMetadataMutation as jest.Mock).mockReturnValue([updateMetadataMock, {}]); | ||
|
|
||
| const { result } = renderHook(() => useOnboardingStorage()); | ||
|
|
||
| // Act | ||
| await act(async () => { | ||
| await result.current.saveOnboardingState({ | ||
| stepsCompleted: [], | ||
| stepsExpanded: {} as Record<OnboardingStepsIDs, boolean>, | ||
| onboardingExpanded: true, | ||
| }); | ||
| }); | ||
|
|
||
| jest.runAllTimers(); | ||
|
|
||
| // Assert | ||
| expect(updateMetadataMock).toHaveBeenCalledTimes(1); | ||
| expect(updateMetadataMock).toHaveBeenCalledWith({ | ||
| variables: { | ||
| id: "1", | ||
| input: [ | ||
| { | ||
| key: "onboarding", | ||
| value: JSON.stringify({ | ||
| stepsCompleted: [], | ||
| stepsExpanded: {} as Record<OnboardingStepsIDs, boolean>, | ||
| onboardingExpanded: true, | ||
| }), | ||
| }, | ||
| ], | ||
| }, | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.