feat(editor-ui): JSON mapping (#4270)

* refactor(editor-ui): update 'vue-json-pretty' and adjust component to preserve same behaviour (#4152)

* fix(editor-ui): export interface to solve 'TS4082: Default export of the module has or is using private name' error temporarily

* refactor(editor-ui): update 'vue-json-pretty' and adjust component to preserve same behaviour

* refactor(editor-ui): move json data view into its own component (#4158)

* refactor(editor-ui): move json data view into its own component

* fix(editor-ui): make JSON data component work again

* fix(editor-ui): JSON data component type issues

* fix(editor-ui): JSON data component prop 'inputData'

* refactor(editor-ui): rename helper function

* fix(editor-ui): add declaration to `vue-json-pretty` component

* refactor(editor-ui): JSON mapping move more logic to new component

* refactor(editor-ui): some cleanup in JSON mapping component

* refactor(editor-ui): changing key mapping translation

* refactor(editor-ui): add basic drag'n'drop functionality to JSON view

* refactor(editor-ui): moving JSON view actions into separate components

* fix(editor-ui): JSON view action copy default selected path

* fix(editor-ui): refactor draggable to play nicer with other (3rd party) components

* fix(editor-ui): improve draggable performance

* fix(editor-ui): add disable user selection class to body

* fix(editor-ui): reduce click handler cognitive load in JSON view copy actions

* fix(editor-ui): JSON view mapped path

* fix(editor-ui): remove unnecessary wrapper around RunDataTable.vue

* fix(editor-ui): respect input node distance when json parameter path is copied

* fix(editor-ui): JSON mapping property highlight

* fix(editor-ui): block event only on mousemove for draggable to not select content

* refactor(editor-ui): fixing prop types and organising imports

* fix(editor-ui): JSON view use double quotes where appropriate

* fix(editor-ui): fix new package additions after merge conflict

* fix(editor-ui): fix package update after merge conflict

* fix(editor-ui): JSON view prop names text break

* fix(editor-ui): use kebab-case name for component

* fix(editor-ui): calling convertPath on draggable node path

* feat(editor-ui): add mapping discoverability tooltip to mappable inputs (#4227)

* refactor(editor-ui): move json data view into its own component

* fix(editor-ui): make JSON data component work again

* fix(editor-ui): JSON data component type issues

* fix(editor-ui): JSON data component prop 'inputData'

* refactor(editor-ui): rename helper function

* fix(editor-ui): add declaration to `vue-json-pretty` component

* refactor(editor-ui): JSON mapping move more logic to new component

* refactor(editor-ui): some cleanup in JSON mapping component

* refactor(editor-ui): changing key mapping translation

* refactor(editor-ui): add basic drag'n'drop functionality to JSON view

* refactor(editor-ui): moving JSON view actions into separate components

* fix(editor-ui): JSON view action copy default selected path

* fix(editor-ui): refactor draggable to play nicer with other (3rd party) components

* fix(editor-ui): improve draggable performance

* fix(editor-ui): add disable user selection class to body

* fix(editor-ui): reduce click handler cognitive load in JSON view copy actions

* fix(editor-ui): JSON view mapped path

* fix(editor-ui): remove unnecessary wrapper around RunDataTable.vue

* fix(editor-ui): respect input node distance when json parameter path is copied

* fix(editor-ui): JSON mapping property highlight

* fix(editor-ui): block event only on mousemove for draggable to not select content

* refactor(editor-ui): fixing prop types and organising imports

* fix(editor-ui): JSON view use double quotes where appropriate

* fix(editor-ui): fix new package additions after merge conflict

* fix(editor-ui): fix package update after merge conflict

* fix(editor-ui): JSON view prop names text break

* fix(editor-ui): update helper after merge conflict

* refactor(editor-ui): cleanup RunaDataTable tooltips

* refactor(editor-ui): add temporary static tooltip to input with mapping

* fix(editor-ui): input mapping tooltip proper input name

* fix(editor-ui): show input mapping tooltip when conditions are met

* fix(editor-ui): show different input mapping tooltip for different view types (table, json)

* fix(editor-ui): drop lodash isEmpty

* fix(editor-ui): using and keeping only getter function

* fix(editor-ui): check `INodeExecutionData[]` array emptyness (still needs some improvement)

* feat(editor-ui): add telemetry calls to data mapping (#4250)

* fix(editor-ui): add types package for jsonpath

* fix(editor-ui): JSON view drag'n'drop telemetry call

* fix(editor-ui): add data mapping tooltip close telemetry to parameter input

* fix(editor-ui): execute previous node tooltip linebreak

* fix(editor-ui): input data mapping tooltip show-hide logic

* fix(editor-ui): input data mapping tooltip position

* fix(editor-ui): using a placeholder gif in mapping discoverability tooltip

* refactor(design-system): adding optional configurable buttons to tooltip (#4260)

* refactor(design-system): unbreaking wrapper around element ui tooltip

* fix(design-system): update test snapshot

* refactor(design-system): adding buttons to tooltip

* fix(design-system): update test snapshot

* fix(design-system): change tooltip props and some cleanup

* fix(design-system): update test snapshot

* chore: fix package lock file after merge

* fix(editor-ui): modifications according to Max's review (#4273)

* fix(editor-ui): modifications according to Max's review

* fix(editor-ui): JSON prop names should not be written bold

* fix(editor-ui): use proper animated gif in JSON data mapping discoverability tooltip

packages/design-system/src/components/N8nTooltip/Tooltip.vue

@@ -1,7 +1,50 @@
+<template>
+	<el-tooltip v-bind="$attrs">
+		<template v-for="(_, slotName) in $slots" #[slotName]>
+			<slot :name="slotName"/>
+			<div :key="slotName" v-if="slotName === 'content' && buttons.length" :class="$style.buttons" :style="{ justifyContent: justifyButtons }">
+				<n8n-button
+						v-for="button in buttons"
+						:key="button.attrs.label"
+						v-bind="button.attrs"
+						v-on="button.listeners"
+				/>
+			</div>
+		</template>
+	</el-tooltip>
+</template>
+
 <script lang="ts">
+import Vue, { PropType } from "vue";
 import ElTooltip from 'element-ui/lib/tooltip';
+import type { IN8nButton } from "@/types";
+import N8nButton from '../N8nButton';
 
-ElTooltip.name = 'n8n-tooltip'; // eslint-disable-line @typescript-eslint/no-unsafe-member-access
-
-export default ElTooltip;
+export default Vue.extend({
+	name: 'n8n-tooltip',
+	inheritAttrs: false,
+	components: {
+		ElTooltip, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		N8nButton,
+	},
+	props: {
+		justifyButtons: {
+			type: String,
+			default: 'flex-end',
+			validator: (value: string): boolean => ['flex-start', 'flex-end', 'start', 'end', 'left', 'right', 'center', 'space-between', 'space-around', 'space-evenly'].includes(value),
+		},
+		buttons: {
+			type: Array as PropType<IN8nButton[]>,
+			default: () => [],
+		},
+	},
+});
 </script>
+
+<style lang="scss" module>
+.buttons {
+	display: flex;
+	align-items: center;
+	margin-top: var(--spacing-s);
+}
+</style>