From 002cb7794c7d960cc4e950453cfd8db8aae3c008 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 11 Oct 2025 12:15:52 +0000 Subject: [PATCH 1/3] Initial plan From 4232285d5a7c90136d2a6c22cd46ae7affc9e04a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 11 Oct 2025 12:30:11 +0000 Subject: [PATCH 2/3] Improve recovery dialog button labels with explicit actions and danger styling Co-authored-by: six7 <4548309+six7@users.noreply.github.com> --- .changeset/popular-months-bow.md | 5 ++ .../__tests__/pullTokensFactory.test.ts | 55 +++++++++++++++++++ .../startupProcessSteps/pullTokensFactory.ts | 3 + 3 files changed, 63 insertions(+) create mode 100644 .changeset/popular-months-bow.md diff --git a/.changeset/popular-months-bow.md b/.changeset/popular-months-bow.md new file mode 100644 index 0000000000..530e5ef319 --- /dev/null +++ b/.changeset/popular-months-bow.md @@ -0,0 +1,5 @@ +--- +"@tokens-studio/figma-plugin": patch +--- + +Improved recovery dialog button labels to be more explicit. Changed from "Yes"/"Cancel" to "Recover changes"/"Use remote" with danger styling for the destructive action. diff --git a/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/__tests__/pullTokensFactory.test.ts b/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/__tests__/pullTokensFactory.test.ts index 1bdfa480ec..46653c8a06 100644 --- a/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/__tests__/pullTokensFactory.test.ts +++ b/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/__tests__/pullTokensFactory.test.ts @@ -330,6 +330,61 @@ describe('pullTokensFactory', () => { expect(state.tokenState.remoteData).toEqual({ metadata: null, themes: [], tokens: {} }); }); + it('should show recovery dialog with correct button labels and danger variant', async () => { + const mockStore = createMockStore({ + uiState: { + storageType: mockStorageType, + }, + }); + + const mockParams = { + localTokenData: { + checkForChanges: true, + values: { + global: [ + { + type: TokenTypes.COLOR, + name: 'colors.red', + value: '#ff0000', + $extensions: { + 'studio.tokens': { + id: 'mock-uuid', + }, + }, + }, + ], + }, + }, + localApiProviders: [ + { ...mockStorageType, secret: 'secret' }, + ], + } as unknown as StartupMessage; + + mockConfirm.mockResolvedValueOnce(true); + + const fn = pullTokensFactory( + mockStore, + mockStore.dispatch, + {}, + mockParams, + mockUseConfirm, + mockUseRemoteTokens, + ); + + mockFetchBranches.mockResolvedValueOnce(['main']); + + await fn(); + + // Verify the confirm dialog was called with correct parameters + expect(mockConfirm).toHaveBeenCalledWith({ + text: 'Recover local changes?', + description: 'You have local changes unsaved to the remote storage.', + confirmAction: 'Recover changes', + cancelAction: 'Use remote', + variant: 'danger', + }); + }); + it('should go to start tab if the localTokenData is missing somehow', async () => { const mockStore = createMockStore({ uiState: { diff --git a/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/pullTokensFactory.ts b/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/pullTokensFactory.ts index a0f165078f..178b14a640 100644 --- a/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/pullTokensFactory.ts +++ b/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/pullTokensFactory.ts @@ -31,6 +31,9 @@ export function pullTokensFactory( const shouldRecoverLocalChanges = await useConfirmResult.confirm({ text: 'Recover local changes?', description: 'You have local changes unsaved to the remote storage.', + confirmAction: 'Recover changes', + cancelAction: 'Use remote', + variant: 'danger', }); return shouldRecoverLocalChanges; }; From db4f67434e023c326bfed087376ce916d1035d26 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 11 Oct 2025 12:35:05 +0000 Subject: [PATCH 3/3] Swap button positions to apply danger styling to destructive action Co-authored-by: six7 <4548309+six7@users.noreply.github.com> --- .changeset/popular-months-bow.md | 2 +- .../__tests__/pullTokensFactory.test.ts | 8 ++++---- .../startupProcessSteps/pullTokensFactory.ts | 9 +++++---- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/.changeset/popular-months-bow.md b/.changeset/popular-months-bow.md index 530e5ef319..05511e08ee 100644 --- a/.changeset/popular-months-bow.md +++ b/.changeset/popular-months-bow.md @@ -2,4 +2,4 @@ "@tokens-studio/figma-plugin": patch --- -Improved recovery dialog button labels to be more explicit. Changed from "Yes"/"Cancel" to "Recover changes"/"Use remote" with danger styling for the destructive action. +Improved recovery dialog button labels to be more explicit. The "Use remote" action (which discards local changes) is now the primary action with danger styling, while "Recover changes" (which keeps local changes) is the secondary cancel action. This makes it clearer which action is destructive. diff --git a/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/__tests__/pullTokensFactory.test.ts b/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/__tests__/pullTokensFactory.test.ts index 46653c8a06..db36957ecb 100644 --- a/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/__tests__/pullTokensFactory.test.ts +++ b/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/__tests__/pullTokensFactory.test.ts @@ -308,7 +308,7 @@ describe('pullTokensFactory', () => { ], } as unknown as StartupMessage; - mockConfirm.mockResolvedValueOnce(true); + mockConfirm.mockResolvedValueOnce(false); const fn = pullTokensFactory( mockStore, @@ -360,7 +360,7 @@ describe('pullTokensFactory', () => { ], } as unknown as StartupMessage; - mockConfirm.mockResolvedValueOnce(true); + mockConfirm.mockResolvedValueOnce(false); const fn = pullTokensFactory( mockStore, @@ -379,8 +379,8 @@ describe('pullTokensFactory', () => { expect(mockConfirm).toHaveBeenCalledWith({ text: 'Recover local changes?', description: 'You have local changes unsaved to the remote storage.', - confirmAction: 'Recover changes', - cancelAction: 'Use remote', + confirmAction: 'Use remote', + cancelAction: 'Recover changes', variant: 'danger', }); }); diff --git a/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/pullTokensFactory.ts b/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/pullTokensFactory.ts index 178b14a640..001109562a 100644 --- a/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/pullTokensFactory.ts +++ b/packages/tokens-studio-for-figma/src/app/components/AppContainer/startupProcessSteps/pullTokensFactory.ts @@ -28,14 +28,15 @@ export function pullTokensFactory( const activeTheme = typeof params.activeTheme === 'string' ? { [INTERNAL_THEMES_NO_GROUP]: params.activeTheme } : params.activeTheme; const askUserIfRecoverLocalChanges = async () => { - const shouldRecoverLocalChanges = await useConfirmResult.confirm({ + const shouldUseRemote = await useConfirmResult.confirm({ text: 'Recover local changes?', description: 'You have local changes unsaved to the remote storage.', - confirmAction: 'Recover changes', - cancelAction: 'Use remote', + confirmAction: 'Use remote', + cancelAction: 'Recover changes', variant: 'danger', }); - return shouldRecoverLocalChanges; + // Return the opposite: if user confirms "Use remote", we should NOT recover local changes + return !shouldUseRemote; }; const getApiCredentials = async (shouldPull: boolean, isRemoteStorage: boolean) => {