Repository: n8n-io/n8n
File: packages/frontend/editor-ui/src/features/integrations/secretsProviders.ee/components/SecretsProviderConnectionModal.ee.vue (Vue)

Code before:
					</div>
					<div ref="nameRef" :class="$style.name">
						<div :class="$style.nameRow">
							<N8nText size="large">
								{{
									modal.selectedProviderType.value?.displayName ??
									i18n.baseText(
										'settings.secretsProviderConnections.modal.providerType.placeholder',
									)
								}}
							</N8nText>
						</div>
					</div>
				</div>
				<div :class="$style.actions">
					<N8nTooltip placement="left">
						<N8nIconButton
							v-if="modal.isEditMode.value && modal.canDelete.value"
							:title="i18n.baseText('generic.delete')"
							icon="trash-2"
							variant="ghost"
							:disabled="modal.isSaving.value"
							data-test-id="secrets-provider-delete-button"
							@click="handleDelete"
						/>
						<template #content>Delete</template>
					</N8nTooltip>
					<SaveButton
						:saved="!modal.hasUnsavedChanges.value && modal.isEditMode.value"
						:is-saving="modal.isSaving.value"
						:disabled="!modal.canSave.value"
						:saving-label="i18n.baseText('settings.secretsProviderConnections.modal.saving')"
						data-test-id="secrets-provider-connection-save-button"
						@click="handleSave"
					/>
				</div>
			</div>
		</template>

		<template #content>
			<div :class="$style.container">
				<!-- Left sidebar menu -->
				<nav :class="$style.sidebar">
					<N8nMenuItem
						v-for="item in sidebarItems"
						:key="item.id"
						:item="item"
						:active="ACTIVE_TAB === item.id"
						:data-test-id="`sidebar-item-${item.id}`"
						@click="ACTIVE_TAB = item.id"
					/>

Review comment (suggestion):
Good catch on adding a tooltip on an icon-only button. Would be good to also use translated messages here. There is the `generic.delete` message available

Code after:
					</div>
					<div ref="nameRef" :class="$style.name">
						<div :class="$style.nameRow">
							<N8nText size="large">
								{{
									modal.selectedProviderType.value?.displayName ??
									i18n.baseText(
										'settings.secretsProviderConnections.modal.providerType.placeholder',
									)
								}}
							</N8nText>
						</div>
					</div>
				</div>
				<div :class="$style.actions">
					<N8nTooltip placement="left">
						<N8nIconButton
							v-if="modal.isEditMode.value && modal.canDelete.value"
							:title="i18n.baseText('generic.delete')"
							icon="trash-2"
							variant="ghost"
							:disabled="modal.isSaving.value"
							data-test-id="secrets-provider-delete-button"
							@click="handleDelete"
						/>
						<template #content>{{ i18n.baseText('generic.delete') }}</template>
					</N8nTooltip>
					<SaveButton
						:saved="!modal.hasUnsavedChanges.value && modal.isEditMode.value"
						:is-saving="modal.isSaving.value"
						:disabled="!modal.canSave.value"
						:saving-label="i18n.baseText('settings.secretsProviderConnections.modal.saving')"
						data-test-id="secrets-provider-connection-save-button"
						@click="handleSave"
					/>
				</div>
			</div>
		</template>

		<template #content>
			<div :class="$style.container">
				<!-- Left sidebar menu -->
				<nav :class="$style.sidebar">
					<N8nMenuItem
						v-for="item in sidebarItems"
						:key="item.id"
						:item="item"
						:active="ACTIVE_TAB === item.id"
						:data-test-id="`sidebar-item-${item.id}`"
						@click="ACTIVE_TAB = item.id"
					/>