fix(editor): Fix pin data button disappearing after reload (#11198)

cypress/e2e/28-debug.cy.ts

@@ -117,7 +117,8 @@ describe('Debug', () => {
 		workflowPage.getters.canvasNodes().last().find('.node-info-icon').should('be.empty');
 
 		workflowPage.getters.canvasNodes().first().dblclick();
-		ndv.getters.pinDataButton().click();
+		ndv.actions.unPinData();
+
 		ndv.actions.close();
 
 		workflowPage.actions.saveWorkflowUsingKeyboardShortcut();

cypress/pages/ndv.ts

@@ -20,7 +20,8 @@ export class NDV extends BasePage {
 		outputDataContainer: () => this.getters.outputPanel().findChildByTestId('ndv-data-container'),
 		outputDisplayMode: () =>
 			this.getters.outputPanel().findChildByTestId('ndv-run-data-display-mode').first(),
-		pinDataButton: () => cy.getByTestId('ndv-pin-data'),
+		pinDataButton: () => this.getters.outputPanel().findChildByTestId('ndv-pin-data'),
+		unpinDataLink: () => this.getters.outputPanel().findChildByTestId('ndv-unpin-data'),
 		editPinnedDataButton: () => cy.getByTestId('ndv-edit-pinned-data'),
 		pinnedDataEditor: () => this.getters.outputPanel().find('.cm-editor .cm-scroller .cm-content'),
 		runDataPaneHeader: () => cy.getByTestId('run-data-pane-header'),
@@ -147,6 +148,9 @@ export class NDV extends BasePage {
 		pinData: () => {
 			this.getters.pinDataButton().click({ force: true });
 		},
+		unPinData: () => {
+			this.getters.unpinDataLink().click({ force: true });
+		},
 		editPinnedData: () => {
 			this.getters.editPinnedDataButton().click();
 		},

packages/editor-ui/src/components/RunData.vue

@@ -255,6 +255,22 @@ export default defineComponent({
 			}
 			return this.nodeTypesStore.isTriggerNode(this.node.type);
 		},
+		showPinButton(): boolean {
+			return Boolean(
+				(this.canPinData || this.pinnedData.hasData.value || !!this.binaryData?.length) &&
+					(this.rawInputData.length || this.pinnedData.hasData.value) &&
+					!this.editMode.enabled,
+			);
+		},
+		pinButtonDisabled(): boolean {
+			return (
+				this.pinnedData.hasData.value ||
+				!this.rawInputData.length ||
+				!!this.binaryData?.length ||
+				this.isReadOnlyRoute ||
+				this.readOnlyEnv
+			);
+		},
 		canPinData(): boolean {
 			if (this.node === null) {
 				return false;
@@ -1199,6 +1215,7 @@ export default defineComponent({
 					size="small"
 					underline
 					bold
+					data-test-id="ndv-unpin-data"
 					@click.stop="onTogglePinData({ source: 'banner-link' })"
 				>
 					{{ $locale.baseText('runData.pindata.unpin') }}
@@ -1269,13 +1286,8 @@ export default defineComponent({
 				/>
 
 				<RunDataPinButton
-					v-if="(canPinData || !!binaryData?.length) && rawInputData.length && !editMode.enabled"
+					v-if="showPinButton"
-					:disabled="
+					:disabled="pinButtonDisabled"
-						(!rawInputData.length && !pinnedData.hasData.value) ||
-						isReadOnlyRoute ||
-						readOnlyEnv ||
-						!!binaryData?.length
-					"
 					:tooltip-contents-visibility="{
 						binaryDataTooltipContent: !!binaryData?.length,
 						pinDataDiscoveryTooltipContent:

packages/editor-ui/src/components/__tests__/RunData.test.ts

@@ -10,6 +10,7 @@ import type { INodeUi, IRunDataDisplayMode } from '@/Interface';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { setActivePinia } from 'pinia';
 import { defaultNodeTypes } from '@/__tests__/mocks';
+import type { INodeExecutionData } from 'n8n-workflow';
 
 const nodes = [
 	{
@@ -95,7 +96,28 @@ describe('RunData', () => {
 		expect(getByTestId('ndv-binary-data_0')).toBeInTheDocument();
 	});
 
-	const render = (outputData: unknown[], displayMode: IRunDataDisplayMode) => {
+	it('should not render pin data button when there is no output data', async () => {
+		const { queryByTestId } = render([], 'table');
+		expect(queryByTestId('ndv-pin-data')).not.toBeInTheDocument();
+	});
+
+	it('should disable pin data button when data is pinned', async () => {
+		const { getByTestId } = render([], 'table', [{ json: { name: 'Test' } }]);
+		const pinDataButton = getByTestId('ndv-pin-data');
+		expect(pinDataButton).toBeDisabled();
+	});
+
+	it('should enable pin data button when data is not pinned', async () => {
+		const { getByTestId } = render([{ json: { name: 'Test' } }], 'table');
+		const pinDataButton = getByTestId('ndv-pin-data');
+		expect(pinDataButton).toBeEnabled();
+	});
+
+	const render = (
+		outputData: unknown[],
+		displayMode: IRunDataDisplayMode,
+		pinnedData?: INodeExecutionData[],
+	) => {
 		const pinia = createTestingPinia({
 			initialState: {
 				[STORES.SETTINGS]: {
@@ -154,12 +176,18 @@ describe('RunData', () => {
 
 		const workflowsStore = useWorkflowsStore();
 		vi.mocked(workflowsStore).getNodeByName.mockReturnValue(nodes[0]);
+		if (pinnedData) {
+			vi.mocked(workflowsStore).pinDataByNodeName.mockReturnValue(pinnedData);
+		}
 
 		return createComponentRenderer(RunData, {
 			props: {
 				node: {
 					name: 'Test Node',
 				},
+				workflow: {
+					nodes,
+				},
 			},
 			data() {
 				return {