From 3df5ea5ebd62f70a96155a38006cb7cc4d43ecc8 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 21 Sep 2022 13:21:08 +0300
Subject: [PATCH] fix(editor): fix pin data button active state (#4157)

fix: fix pin data button active state
---
 packages/editor-ui/src/components/RunData.vue     | 15 ++-------------
 .../editor-ui/src/components/mixins/pinData.ts    |  2 +-
 2 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 8bf9a54020..1bfa9ed236 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -80,9 +80,9 @@
 						</div>
 					</template>
 					<n8n-icon-button
-						:class="`ml-2xs ${$style['pin-data-button']} ${hasPinData ? $style['pin-data-button-active'] : ''}`"
+						:class="['ml-2xs', $style['pin-data-button']]"
 						type="tertiary"
-						active
+						:active="hasPinData"
 						icon="thumbtack"
 						:disabled="editMode.enabled || (inputData.length === 0 && !hasPinData) || isReadOnly"
 						@click="onTogglePinData({ source: 'pin-icon-click' })"
@@ -1463,17 +1463,6 @@ export default mixins(
 	}
 }
 
-.pin-data-button-active {
-	&,
-	&:hover,
-	&:focus,
-	&:active {
-		border-color: var(--color-primary);
-		color: var(--color-primary);
-		background: var(--color-primary-tint-2);
-	}
-}
-
 .spinner {
 	* {
 		color: var(--color-primary);
diff --git a/packages/editor-ui/src/components/mixins/pinData.ts b/packages/editor-ui/src/components/mixins/pinData.ts
index 34440ee25b..1bfe9cc1e1 100644
--- a/packages/editor-ui/src/components/mixins/pinData.ts
+++ b/packages/editor-ui/src/components/mixins/pinData.ts
@@ -4,7 +4,7 @@ import { IPinData } from 'n8n-workflow';
 import { stringSizeInBytes } from '@/components/helpers';
 import { MAX_WORKFLOW_PINNED_DATA_SIZE, PIN_DATA_NODE_TYPES_DENYLIST } from '@/constants';
 
-interface IPinDataContext {
+export interface IPinDataContext {
 	node: INodeUi;
 	$showError(error: Error, title: string): void;
 }