mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-13 05:47:31 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: Update mapping pill for table/json views (#4965)

Browse source 
* feat: standarize mapping pill

* test: update test
This commit is contained in:
Mutasem Aldmour 2022-12-20 09:39:38 +01:00 committed by GitHub
parent 90bfdfd577
commit 343f53bf53
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 72 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
packages/editor-ui/src/components/MappingPill.vue Normal file
View file

@ -0,0 +1,60 @@
<script lang="ts" setup>
type Props = {
html: string;
canDrop: boolean;
};
withDefaults(defineProps<Props>(), {
canDrop: false,
});
</script>
<template>
<div
:class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"
v-html="html"
/>
</template>
<style lang="scss" module>
.dragPill {
display: inline-flex;
height: 24px;
padding: 0 var(--spacing-3xs);
border: 1px solid var(--color-foreground-light);
border-radius: 4px;
background: var(--color-background-xlight);
font-size: var(--font-size-2xs);
color: var(--color-text-base);
white-space: nowrap;
align-items: center;
span {
display: flex;
height: 100%;
align-items: center;
}
}
.droppablePill {
&,
span span {
color: var(--color-success);
border-color: var(--color-success-light);
background-color: white;
}
}
.defaultPill {
transform: translate(-50%, -100%);
box-shadow: 0 2px 6px rgba(68, 28, 23, 0.2);
&,
span span {
color: var(--color-primary);
border-color: var(--color-primary-tint-1);
background-color: var(--color-primary-tint-3);
}
}
</style>

31
packages/editor-ui/src/components/RunDataJson.vue
View file

@ -18,13 +18,7 @@
@dragend="onDragEnd" @dragend="onDragEnd"
> >
<template #preview="{ canDrop, el }"> <template #preview="{ canDrop, el }">
<div :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"> <MappingPill v-if="el" :html="getShortKey(el)" :can-drop="canDrop" />
{{
$locale.baseText('dataMapping.mapKeyToField', {
interpolate: { name: getShortKey(el) },
})
}}
</div>
</template> </template>
<template> <template>
<vue-json-pretty <vue-json-pretty
@ -84,6 +78,7 @@ import { INodeUi } from '@/Interface';
import { externalHooks } from '@/mixins/externalHooks'; import { externalHooks } from '@/mixins/externalHooks';
import { mapStores } from 'pinia'; import { mapStores } from 'pinia';
import { useNDVStore } from '@/stores/ndv'; import { useNDVStore } from '@/stores/ndv';
import MappingPill from './MappingPill.vue';
const runDataJsonActions = () => import('@/components/RunDataJsonActions.vue'); const runDataJsonActions = () => import('@/components/RunDataJsonActions.vue');
@ -93,6 +88,7 @@ export default mixins(externalHooks).extend({
VueJsonPretty, VueJsonPretty,
Draggable, Draggable,
runDataJsonActions, runDataJsonActions,
MappingPill,
}, },
props: { props: {
editMode: { editMode: {
@ -256,27 +252,6 @@ export default mixins(externalHooks).extend({
} }
} }
.dragPill {
display: flex;
height: 24px;
align-items: center;
padding: 0 var(--spacing-4xs);
color: var(--color-text-xlight);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-2xs);
border-radius: var(--border-radius-base);
white-space: nowrap;
}
.droppablePill {
background-color: var(--color-success);
}
.defaultPill {
background-color: var(--color-primary);
transform: translate(-50%, -100%);
box-shadow: 0 2px 6px rgba(68, 28, 23, 0.2);
}
</style> </style>
<style lang="scss"> <style lang="scss">

46
packages/editor-ui/src/components/RunDataSchema.vue
View file

@ -10,6 +10,7 @@ import { telemetry } from '@/plugins/telemetry';
import { IDataObject } from 'n8n-workflow'; import { IDataObject } from 'n8n-workflow';
import { getSchema, isEmpty, mergeDeep } from '@/utils'; import { getSchema, isEmpty, mergeDeep } from '@/utils';
import { i18n } from '@/plugins/i18n'; import { i18n } from '@/plugins/i18n';
import MappingPill from './MappingPill.vue';
type Props = { type Props = {
data: IDataObject[]; data: IDataObject[];
@ -83,11 +84,7 @@ const onDragEnd = (el: HTMLElement) => {
@dragend="onDragEnd" @dragend="onDragEnd"
> >
<template #preview="{ canDrop, el }"> <template #preview="{ canDrop, el }">
<div <MappingPill v-if="el" :html="el.outerHTML" :can-drop="canDrop" />
v-if="el"
:class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"
v-html="el.outerHTML"
/>
</template> </template>
<template> <template>
<div :class="$style.schema"> <div :class="$style.schema">
@ -131,43 +128,4 @@ const onDragEnd = (el: HTMLElement) => {
padding: 0 var(--spacing-s) var(--spacing-s); padding: 0 var(--spacing-s) var(--spacing-s);
} }
.dragPill {
display: inline-flex;
height: 24px;
padding: 0 var(--spacing-3xs);
border: 1px solid var(--color-foreground-light);
border-radius: 4px;
background: var(--color-background-xlight);
font-size: var(--font-size-2xs);
color: var(--color-text-base);
white-space: nowrap;
align-items: center;
span {
display: flex;
height: 100%;
align-items: center;
}
}
.droppablePill {
&,
span span {
color: var(--color-success);
border-color: var(--color-success-light);
background-color: white;
}
}
.defaultPill {
transform: translate(-50%, -100%);
box-shadow: 0 2px 6px rgba(68, 28, 23, 0.2);
&,
span span {
color: var(--color-primary);
border-color: var(--color-primary-tint-1);
background-color: var(--color-primary-tint-3);
}
}
</style> </style>

48
packages/editor-ui/src/components/RunDataTable.vue
View file

@ -40,15 +40,7 @@
@dragend="(column) => onDragEnd(column, 'column')" @dragend="(column) => onDragEnd(column, 'column')"
> >
<template #preview="{ canDrop }"> <template #preview="{ canDrop }">
<div <MappingPill :html="shorten(column, 16, 2)" :can-drop="canDrop" />
:class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"
>
{{
$locale.baseText('dataMapping.mapKeyToField', {
interpolate: { name: shorten(column, 16, 2) },
})
}}
</div>
</template> </template>
<template #default="{ isDragging }"> <template #default="{ isDragging }">
<div <div
@ -105,18 +97,7 @@
ref="draggable" ref="draggable"
> >
<template #preview="{ canDrop, el }"> <template #preview="{ canDrop, el }">
<div :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"> <MappingPill :html="shorten(getPathNameFromTarget(el) || '', 16, 2)" :can-drop="canDrop" />
{{
$locale.baseText(
tableData.data.length > 1
? 'dataMapping.mapAllKeysToField'
: 'dataMapping.mapKeyToField',
{
interpolate: { name: shorten(getPathNameFromTarget(el) || '', 16, 2) },
},
)
}}
</div>
</template> </template>
<template> <template>
<tr <tr
@ -185,12 +166,13 @@ import { externalHooks } from '@/mixins/externalHooks';
import { mapStores } from 'pinia'; import { mapStores } from 'pinia';
import { useWorkflowsStore } from '@/stores/workflows'; import { useWorkflowsStore } from '@/stores/workflows';
import { useNDVStore } from '@/stores/ndv'; import { useNDVStore } from '@/stores/ndv';
import MappingPill from './MappingPill.vue';
const MAX_COLUMNS_LIMIT = 40; const MAX_COLUMNS_LIMIT = 40;
export default mixins(externalHooks).extend({ export default mixins(externalHooks).extend({
name: 'run-data-table', name: 'run-data-table',
components: { Draggable }, components: { Draggable, MappingPill },
props: { props: {
node: { node: {
type: Object as PropType<INodeUi>, type: Object as PropType<INodeUi>,
@ -665,28 +647,6 @@ export default mixins(externalHooks).extend({
margin-left: var(--spacing-2xs); margin-left: var(--spacing-2xs);
} }
.dragPill {
display: flex;
height: 24px;
align-items: center;
padding: 0 var(--spacing-4xs);
color: var(--color-text-xlight);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-2xs);
border-radius: var(--border-radius-base);
white-space: nowrap;
}
.droppablePill {
background-color: var(--color-success);
}
.defaultPill {
background-color: var(--color-primary);
transform: translate(-50%, -100%);
box-shadow: 0px 2px 6px rgba(68, 28, 23, 0.2);
}
.dataKey { .dataKey {
color: var(--color-text-dark); color: var(--color-text-dark);
line-height: 1.7; line-height: 1.7;

6
packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
View file

@ -3,13 +3,13 @@
exports[`RunDataJsonSchema.vue > renders schema for data 1`] = ` exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
<div> <div>
<div <div
class="_schemaWrapper_5xhkc_1" class="_schemaWrapper_1mtap_1"
> >
<div <div
class="" class=""
> >
<div <div
class="_schema_5xhkc_1" class="_schema_1mtap_1"
> >
<div <div
class="_item_14xdy_1" class="_item_14xdy_1"
@ -235,7 +235,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
exports[`RunDataJsonSchema.vue > renders schema for empty data 1`] = ` exports[`RunDataJsonSchema.vue > renders schema for empty data 1`] = `
<div> <div>
<div <div
class="_schemaWrapper_5xhkc_1" class="_schemaWrapper_1mtap_1"
> >
<div <div
class="n8n-info-tip _info_3egb8_33 _note_3egb8_16 _base_3egb8_1 _bold_3egb8_12" class="n8n-info-tip _info_3egb8_33 _note_3egb8_16 _base_3egb8_1 _bold_3egb8_12"

2
packages/editor-ui/src/plugins/i18n/locales/en.json
View file

@ -366,8 +366,6 @@
"dataMapping.tableHint": "<img src='/static/data-mapping-gif.gif'/> Drag a column onto <b>{name}</b> to map it", "dataMapping.tableHint": "<img src='/static/data-mapping-gif.gif'/> Drag a column onto <b>{name}</b> to map it",
"dataMapping.jsonHint": "<img src='/static/json-mapping-gif.gif'/> Drag a JSON key onto <b>{name}</b> to map data", "dataMapping.jsonHint": "<img src='/static/json-mapping-gif.gif'/> Drag a JSON key onto <b>{name}</b> to map data",
"dataMapping.schemaHint": "<img src='/static/schema-mapping-gif.gif'/> Drag a datapill onto <b>{name}</b> to map data", "dataMapping.schemaHint": "<img src='/static/schema-mapping-gif.gif'/> Drag a datapill onto <b>{name}</b> to map data",
"dataMapping.mapKeyToField": "Map '{name}' to a field",
"dataMapping.mapAllKeysToField": "Map every '{name}' to a field",
"dataMapping.tableView.tableColumnsExceeded": "Some columns are hidden", "dataMapping.tableView.tableColumnsExceeded": "Some columns are hidden",
"dataMapping.tableView.tableColumnsExceeded.tooltip": "Your data has more than {columnLimit} columns so some are hidden. Switch to {link} to see all data.", "dataMapping.tableView.tableColumnsExceeded.tooltip": "Your data has more than {columnLimit} columns so some are hidden. Switch to {link} to see all data.",
"dataMapping.tableView.tableColumnsExceeded.tooltip.link": "JSON view", "dataMapping.tableView.tableColumnsExceeded.tooltip.link": "JSON view",