fix(editor): Add tooltips to workflow history button (#10570)

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -21,6 +21,7 @@ import SaveButton from '@/components/SaveButton.vue';
 import TagsDropdown from '@/components/TagsDropdown.vue';
 import InlineTextEdit from '@/components/InlineTextEdit.vue';
 import BreakpointsObserver from '@/components/BreakpointsObserver.vue';
+import WorkflowHistoryButton from '@/components/MainHeader/WorkflowHistoryButton.vue';
 
 import { useRootStore } from '@/stores/root.store';
 import { useSettingsStore } from '@/stores/settings.store';
@@ -216,19 +217,6 @@ const isWorkflowHistoryFeatureEnabled = computed(() => {
 	return settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.WorkflowHistory];
 });
 
-const workflowHistoryRoute = computed<{ name: string; params: { workflowId: string } }>(() => {
-	return {
-		name: VIEWS.WORKFLOW_HISTORY,
-		params: {
-			workflowId: props.workflow.id,
-		},
-	};
-});
-
-const isWorkflowHistoryButtonDisabled = computed(() => {
-	return isNewWorkflow.value;
-});
-
 const workflowTagIds = computed(() => {
 	return (props.workflow.tags ?? []).map((tag) => (typeof tag === 'string' ? tag : tag.id));
 });
@@ -588,6 +576,10 @@ function goToUpgrade() {
 	void uiStore.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
 }
 
+function goToWorkflowHistoryUpgrade() {
+	void uiStore.goToUpgrade('workflow-history', 'upgrade-workflow-history');
+}
+
 function showCreateWorkflowSuccessToast(id?: string) {
 	if (!id || ['new', PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(id)) {
 		let toastTitle = locale.baseText('workflows.create.personal.toast.title');
@@ -732,20 +724,12 @@ function showCreateWorkflowSuccessToast(id?: string) {
 					data-test-id="workflow-save-button"
 					@click="onSaveButtonClick"
 				/>
-				<RouterLink
-					v-if="isWorkflowHistoryFeatureEnabled"
-					:to="workflowHistoryRoute"
-					:class="$style.workflowHistoryButton"
-				>
-					<N8nIconButton
-						:disabled="isWorkflowHistoryButtonDisabled"
-						data-test-id="workflow-history-button"
-						type="tertiary"
-						icon="history"
-						size="medium"
-						text
-					/>
-				</RouterLink>
+				<WorkflowHistoryButton
+					:workflow-id="props.workflow.id"
+					:is-feature-enabled="isWorkflowHistoryFeatureEnabled"
+					:is-new-workflow="isNewWorkflow"
+					@upgrade="goToWorkflowHistoryUpgrade"
+				/>
 			</div>
 			<div :class="[$style.workflowMenuContainer, $style.group]">
 				<input
@@ -848,21 +832,4 @@ $--header-spacing: 20px;
 .disabledShareButton {
 	cursor: not-allowed;
 }
-
-.workflowHistoryButton {
-	width: 30px;
-	height: 30px;
-	color: var(--color-text-dark);
-	border-radius: var(--border-radius-base);
-
-	&:hover {
-		background-color: var(--color-background-base);
-	}
-
-	:disabled {
-		background: transparent;
-		border: none;
-		opacity: 0.5;
-	}
-}
 </style>