mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 12:44:07 -08:00
Code Issues Actions 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"
>
<template #preview="{ canDrop, el }">
<div :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]">
{{
$locale.baseText('dataMapping.mapKeyToField', {
interpolate: { name: getShortKey(el) },
})
}}
</div>
<MappingPill v-if="el" :html="getShortKey(el)" :can-drop="canDrop" />
</template>
<template>
<vue-json-pretty
@ -84,6 +78,7 @@ import { INodeUi } from '@/Interface';
import { externalHooks } from '@/mixins/externalHooks';
import { mapStores } from 'pinia';
import { useNDVStore } from '@/stores/ndv';
import MappingPill from './MappingPill.vue';
const runDataJsonActions = () => import('@/components/RunDataJsonActions.vue');
@ -93,6 +88,7 @@ export default mixins(externalHooks).extend({
VueJsonPretty,
Draggable,
runDataJsonActions,
MappingPill,
},
props: {
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 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 { getSchema, isEmpty, mergeDeep } from '@/utils';
import { i18n } from '@/plugins/i18n';
import MappingPill from './MappingPill.vue';
type Props = {
data: IDataObject[];
@ -83,11 +84,7 @@ const onDragEnd = (el: HTMLElement) => {
@dragend="onDragEnd"
>
<template #preview="{ canDrop, el }">
<div
v-if="el"
:class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"
v-html="el.outerHTML"
/>
<MappingPill v-if="el" :html="el.outerHTML" :can-drop="canDrop" />
</template>
<template>
<div :class="$style.schema">
@ -131,43 +128,4 @@ const onDragEnd = (el: HTMLElement) => {
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>

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

@ -40,15 +40,7 @@
@dragend="(column) => onDragEnd(column, 'column')"
>
<template #preview="{ canDrop }">
<div
:class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"
>
{{
$locale.baseText('dataMapping.mapKeyToField', {
interpolate: { name: shorten(column, 16, 2) },
})
}}
</div>
<MappingPill :html="shorten(column, 16, 2)" :can-drop="canDrop" />
</template>
<template #default="{ isDragging }">
<div
@ -105,18 +97,7 @@
ref="draggable"
>
<template #preview="{ canDrop, el }">
<div :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]">
{{
$locale.baseText(
tableData.data.length > 1
? 'dataMapping.mapAllKeysToField'
: 'dataMapping.mapKeyToField',
{
interpolate: { name: shorten(getPathNameFromTarget(el) || '', 16, 2) },
},
)
}}
</div>
<MappingPill :html="shorten(getPathNameFromTarget(el) || '', 16, 2)" :can-drop="canDrop" />
</template>
<template>
<tr
@ -185,12 +166,13 @@ import { externalHooks } from '@/mixins/externalHooks';
import { mapStores } from 'pinia';
import { useWorkflowsStore } from '@/stores/workflows';
import { useNDVStore } from '@/stores/ndv';
import MappingPill from './MappingPill.vue';
const MAX_COLUMNS_LIMIT = 40;
export default mixins(externalHooks).extend({
name: 'run-data-table',
components: { Draggable },
components: { Draggable, MappingPill },
props: {
node: {
type: Object as PropType<INodeUi>,
@ -665,28 +647,6 @@ export default mixins(externalHooks).extend({
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 {
color: var(--color-text-dark);
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`] = `
<div>
<div
class="_schemaWrapper_5xhkc_1"
class="_schemaWrapper_1mtap_1"
>
<div
class=""
>
<div
class="_schema_5xhkc_1"
class="_schema_1mtap_1"
>
<div
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`] = `
<div>
<div
class="_schemaWrapper_5xhkc_1"
class="_schemaWrapper_1mtap_1"
>
<div
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.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.mapKeyToField": "Map '{name}' to a field",
"dataMapping.mapAllKeysToField": "Map every '{name}' to a field",
"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.link": "JSON view",