fix(editor): Fix shortcut issue on save buttons (#9309)

n8n-io · May 7, 2024 · e74c14f · e74c14f
1 parent cf441e0
commit e74c14f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -623,6 +623,8 @@ function goToUpgrade() {
 					type="primary"
 					:saved="!uiStore.stateIsDirty && !isNewWorkflow"
 					:disabled="isWorkflowSaving || readOnly"
+					with-shortcut
+					:shortcut-tooltip="$locale.baseText('saveWorkflowButton.hint')"
 					data-test-id="workflow-save-button"
 					@click="onSaveButtonClick"
 				/>

diff --git a/packages/editor-ui/src/components/SaveButton.vue b/packages/editor-ui/src/components/SaveButton.vue
@@ -1,20 +1,30 @@
 <template>
 	<span :class="$style.container" data-test-id="save-button">
 		<span v-if="saved" :class="$style.saved">{{ $locale.baseText('saveButton.saved') }}</span>
-		<KeyboardShortcutTooltip
-			v-else
-			:label="$locale.baseText('saveButton.hint')"
-			:shortcut="{ keys: ['s'], metaKey: true }"
-			placement="bottom"
-		>
+		<template v-else>
+			<KeyboardShortcutTooltip
+				v-if="withShortcut"
+				:label="shortcutTooltipLabel"
+				:shortcut="{ keys: ['s'], metaKey: true }"
+				placement="bottom"
+			>
+				<n8n-button
+					:label="saveButtonLabel"
+					:loading="isSaving"
+					:disabled="disabled"
+					:class="$style.button"
+					:type="type"
+				/>
+			</KeyboardShortcutTooltip>
 			<n8n-button
+				v-else
 				:label="saveButtonLabel"
 				:loading="isSaving"
 				:disabled="disabled"
 				:class="$style.button"
 				:type="type"
 			/>
-		</KeyboardShortcutTooltip>
+		</template>
 	</span>
 </template>
 
@@ -50,13 +60,23 @@ export default defineComponent({
 			type: String,
 			default: 'primary',
 		},
+		withShortcut: {
+			type: Boolean,
+			default: false,
+		},
+		shortcutTooltip: {
+			type: String,
+		},
 	},
 	computed: {
 		saveButtonLabel() {
 			return this.isSaving
 				? this.$locale.baseText('saveButton.saving')
 				: this.$locale.baseText('saveButton.save');
 		},
+		shortcutTooltipLabel() {
+			return this.shortcutTooltip ?? this.$locale.baseText('saveButton.save');
+		},
 	},
 });
 </script>

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1455,7 +1455,7 @@
 	"runData.aiContentBlock.tokens.completion": "Completion:",
 	"saveButton.save": "@:_reusableBaseText.save",
 	"saveButton.saved": "Saved",
-	"saveButton.hint": "Save workflow",
+	"saveWorkflowButton.hint": "Save workflow",
 	"saveButton.saving": "Saving",
 	"settings": "Settings",
 	"settings.communityNodes": "Community nodes",