fix: Update Posthog no-capture (#5693)

* feat: add no-capture class for schema view

* fix: add ee nocapture

* fix: update no capture

* fix: update ndv capturing

* feat: remove no capture from empty resources list

* lint: fix

* test: update tests

* test: add json view tests

* fix: update more class to cover

* lint: fix
This commit is contained in:
Mutasem Aldmour 2023-03-23 11:20:11 +01:00 committed by GitHub
parent ac18c0b9eb
commit a732374f24
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 789 additions and 62 deletions

View file

@ -92,7 +92,7 @@
/>
</td>
<td>
<span>{{
<span class="ph-no-capture">{{
execution.workflowName || $locale.baseText('executionsList.unsavedWorkflow')
}}</span>
</td>

View file

@ -45,7 +45,7 @@
:label="`${truncate(node.name)} ${getMultipleNodesText(node.name)}`"
data-test-id="ndv-input-option"
>
{{ truncate(node.name) }}&nbsp;
<span class="ph-no-capture">{{ truncate(node.name) }}&nbsp;</span>
<span v-if="getMultipleNodesText(node.name)">{{
getMultipleNodesText(node.name)
}}</span>

View file

@ -27,6 +27,7 @@
v-if="expressionOutput"
:class="$style.hint"
data-test-id="parameter-expression-preview"
class="ph-no-capture"
:highlight="!!(expressionOutput && targetItem)"
:hint="expressionOutput"
:singleLine="true"

View file

@ -47,6 +47,7 @@
[$style.selected]: result.value === value,
[$style.hovering]: hoverIndex === i,
}"
class="ph-no-capture"
@click="() => onItemClick(result.value)"
@mouseenter="() => onItemHover(i)"
@mouseleave="() => onItemHoverLeave()"

View file

@ -290,7 +290,6 @@
<run-data-table
v-else-if="hasNodeRun && displayMode === 'table'"
class="ph-no-capture"
:node="node"
:inputData="inputData"
:mappingEnabled="mappingEnabled"
@ -306,7 +305,6 @@
<run-data-json
v-else-if="hasNodeRun && displayMode === 'json'"
class="ph-no-capture"
:paneType="paneType"
:editMode="editMode"
:sessioId="sessionId"

View file

@ -1,5 +1,5 @@
<template>
<div class="__html-display" v-html="html"></div>
<div class="__html-display ph-no-capture" v-html="html"></div>
</template>
<script lang="ts">

View file

@ -1,60 +1,81 @@
import Vue from 'vue';
import { PiniaVuePlugin } from 'pinia';
import { createTestingPinia } from '@pinia/testing';
import { render, screen } from '@testing-library/vue';
import { render, screen, cleanup } from '@testing-library/vue';
import RunDataJson from '@/components/RunDataJson.vue';
Vue.use(PiniaVuePlugin);
describe('RunDataJson.vue', () => {
const DEFAULT_SETUP = {
pinia: createTestingPinia(),
props: {
mappingEnabled: true,
editMode: { enabled: false },
inputData: [
{
json: {
list: [1, 2, 3],
record: { name: 'Joe' },
myNumber: 123,
myStringNumber: '456',
myStringText: 'abc',
nil: null,
d: undefined,
},
},
],
node: {
parameters: {
keepOnlySet: false,
values: {},
options: {},
},
id: '820ea733-d8a6-4379-8e73-88a2347ea003',
name: 'Set',
type: 'n8n-nodes-base.set',
typeVersion: 1,
position: [380, 1060],
disabled: false,
},
},
mocks: {
$locale: {
baseText() {
return '';
},
},
$store: {
getters: {},
},
},
};
beforeEach(cleanup);
it('renders json values properly', () => {
render(RunDataJson, {
pinia: createTestingPinia(),
props: {
mappingEnabled: true,
editMode: { enabled: false },
inputData: [
{
json: {
list: [1, 2, 3],
record: { name: 'Joe' },
myNumber: 123,
myStringNumber: '456',
myStringText: 'abc',
nil: null,
d: undefined,
},
},
],
node: {
parameters: {
keepOnlySet: false,
values: {},
options: {},
},
id: '820ea733-d8a6-4379-8e73-88a2347ea003',
name: 'Set',
type: 'n8n-nodes-base.set',
typeVersion: 1,
position: [380, 1060],
disabled: false,
},
},
mocks: {
$locale: {
baseText() {
return '';
},
},
$store: {
getters: {},
},
},
const { container } = render(RunDataJson, DEFAULT_SETUP, (vue) => {
vue.use(PiniaVuePlugin);
});
expect(container).toMatchSnapshot();
expect(screen.getByText('123')).toBeInTheDocument();
expect(screen.getByText('"456"')).toBeInTheDocument();
expect(screen.getByText('"abc"')).toBeInTheDocument();
expect(screen.getByText('null')).toBeInTheDocument();
expect(screen.queryByText('undefined')).not.toBeInTheDocument();
});
it('sets ph-no-capture class correctly', () => {
render(RunDataJson, DEFAULT_SETUP);
expect(screen.getByText('"list"')).not.toHaveClass('ph-no-capture');
expect(screen.getByText('"record"')).not.toHaveClass('ph-no-capture');
expect(screen.getByText('"myStringNumber"')).not.toHaveClass('ph-no-capture');
expect(screen.getByText('123')).toHaveClass('ph-no-capture');
expect(screen.getByText('"456"')).toHaveClass('ph-no-capture');
expect(screen.getByText('"abc"')).toHaveClass('ph-no-capture');
expect(screen.getByText('null')).toHaveClass('ph-no-capture');
});
});

View file

@ -45,7 +45,9 @@
>
</template>
<template #nodeValue="{ node }">
<span v-if="isNaN(node.index)">{{ getContent(node.content) }}</span>
<span v-if="isNaN(node.index)" class="ph-no-capture">{{
getContent(node.content)
}}</span>
<span
v-else
data-target="mappable"
@ -57,6 +59,7 @@
[$style.mappable]: mappingEnabled,
[$style.dragged]: draggingPath === node.path,
}"
class="ph-no-capture"
>{{ getContent(node.content) }}</span
>
</template>

View file

@ -96,7 +96,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
<span v-if="key" :class="{ [$style.arrayIndex]: isSchemaParentTypeArray }">{{ key }}</span>
</span>
</div>
<span v-if="text" :class="$style.text">{{ text }}</span>
<span v-if="text" :class="$style.text" class="ph-no-capture">{{ text }}</span>
<input v-if="level > 0 && isSchemaValueArray" :id="subKey" type="checkbox" checked />
<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
<font-awesome-icon icon="angle-up" />

View file

@ -120,6 +120,7 @@
<span
v-if="isSimple(data)"
:class="{ [$style.value]: true, [$style.empty]: isEmpty(data) }"
class="ph-no-capture"
>{{ getValueToRender(data) }}</span
>
<n8n-tree :nodeClass="$style.nodeClass" v-else :value="data">
@ -141,9 +142,11 @@
>
</template>
<template #value="{ value }">
<span :class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }">{{
getValueToRender(value)
}}</span>
<span
:class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }"
class="ph-no-capture"
>{{ getValueToRender(value) }}</span
>
</template>
</n8n-tree>
</td>

View file

@ -47,11 +47,11 @@
</div>
</div>
<div v-else class="value clickable" @click="selectItem(item)">
<div class="item-title ph-no-capture" :title="item.key">
<div class="item-title" :title="item.key">
{{ item.name }}:
<font-awesome-icon icon="dot-circle" title="Select Item" />
</div>
<div class="item-value">
<div class="item-value ph-no-capture">
{{ item.value !== undefined ? item.value : $locale.baseText('variableSelectorItem.empty') }}
</div>
</div>

View file

@ -0,0 +1,700 @@
// Vitest Snapshot v1
exports[`RunDataJson.vue > renders json values properly 1`] = `
<div>
<div
class="jsonDisplay"
>
<!---->
<div
class=""
>
<div
class="json-data vjs-tree"
>
<div
class="vjs-tree-list"
>
<div
class="vjs-tree-list-holder"
>
<div
class="vjs-tree-list-holder-inner"
>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<!---->
</div>
<!---->
<span>
<span
class="vjs-tree-brackets"
>
[
</span>
<!---->
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<div
class="vjs-indent-unit has-line"
/>
<!---->
</div>
<!---->
<span>
<span
class="vjs-tree-brackets"
>
{
</span>
<!---->
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<!---->
</div>
<span
class="vjs-key"
>
<span
class="mappable"
data-depth="2"
data-name="list"
data-path="[0].list"
data-target="mappable"
data-value="{{ $node.Set.json.list }}"
>
"list"
</span>
<span>
:
</span>
</span>
<span>
<span
class="vjs-tree-brackets"
>
[
</span>
<!---->
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<!---->
</div>
<!---->
<span>
<span
class="vjs-value vjs-value-number"
>
<span
class="ph-no-capture mappable"
data-depth="3"
data-name="list[0]"
data-path="[0].list[0]"
data-target="mappable"
data-value="{{ $node.Set.json.list[0] }}"
>
1
</span>
</span>
<span>
,
</span>
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<!---->
</div>
<!---->
<span>
<span
class="vjs-value vjs-value-number"
>
<span
class="ph-no-capture mappable"
data-depth="3"
data-name="list[1]"
data-path="[0].list[1]"
data-target="mappable"
data-value="{{ $node.Set.json.list[1] }}"
>
2
</span>
</span>
<span>
,
</span>
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<!---->
</div>
<!---->
<span>
<span
class="vjs-value vjs-value-number"
>
<span
class="ph-no-capture mappable"
data-depth="3"
data-name="list[2]"
data-path="[0].list[2]"
data-target="mappable"
data-value="{{ $node.Set.json.list[2] }}"
>
3
</span>
</span>
<!---->
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<!---->
</div>
<!---->
<span>
<span
class="vjs-tree-brackets"
>
]
</span>
<span>
,
</span>
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<!---->
</div>
<span
class="vjs-key"
>
<span
class="mappable"
data-depth="2"
data-name="record"
data-path="[0].record"
data-target="mappable"
data-value="{{ $node.Set.json.record }}"
>
"record"
</span>
<span>
:
</span>
</span>
<span>
<span
class="vjs-tree-brackets"
>
{
</span>
<!---->
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<!---->
</div>
<span
class="vjs-key"
>
<span
class="mappable"
data-depth="3"
data-name="name"
data-path="[0].record.name"
data-target="mappable"
data-value="{{ $node.Set.json.record.name }}"
>
"name"
</span>
<span>
:
</span>
</span>
<span>
<span
class="vjs-value vjs-value-string"
>
<span
class="ph-no-capture"
>
"Joe"
</span>
</span>
<!---->
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<!---->
</div>
<!---->
<span>
<span
class="vjs-tree-brackets"
>
}
</span>
<span>
,
</span>
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<!---->
</div>
<span
class="vjs-key"
>
<span
class="mappable"
data-depth="2"
data-name="myNumber"
data-path="[0].myNumber"
data-target="mappable"
data-value="{{ $node.Set.json.myNumber }}"
>
"myNumber"
</span>
<span>
:
</span>
</span>
<span>
<span
class="vjs-value vjs-value-number"
>
<span
class="ph-no-capture"
>
123
</span>
</span>
<span>
,
</span>
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<!---->
</div>
<span
class="vjs-key"
>
<span
class="mappable"
data-depth="2"
data-name="myStringNumber"
data-path="[0].myStringNumber"
data-target="mappable"
data-value="{{ $node.Set.json.myStringNumber }}"
>
"myStringNumber"
</span>
<span>
:
</span>
</span>
<span>
<span
class="vjs-value vjs-value-string"
>
<span
class="ph-no-capture"
>
"456"
</span>
</span>
<span>
,
</span>
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<!---->
</div>
<span
class="vjs-key"
>
<span
class="mappable"
data-depth="2"
data-name="myStringText"
data-path="[0].myStringText"
data-target="mappable"
data-value="{{ $node.Set.json.myStringText }}"
>
"myStringText"
</span>
<span>
:
</span>
</span>
<span>
<span
class="vjs-value vjs-value-string"
>
<span
class="ph-no-capture"
>
"abc"
</span>
</span>
<span>
,
</span>
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<!---->
</div>
<span
class="vjs-key"
>
<span
class="mappable"
data-depth="2"
data-name="nil"
data-path="[0].nil"
data-target="mappable"
data-value="{{ $node.Set.json.nil }}"
>
"nil"
</span>
<span>
:
</span>
</span>
<span>
<span
class="vjs-value vjs-value-null"
>
<span
class="ph-no-capture"
>
null
</span>
</span>
<span>
,
</span>
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<div
class="vjs-indent-unit has-line"
/>
<div
class="vjs-indent-unit has-line"
/>
<!---->
</div>
<span
class="vjs-key"
>
<span
class="mappable"
data-depth="2"
data-name="d"
data-path="[0].d"
data-target="mappable"
data-value="{{ $node.Set.json.d }}"
>
"d"
</span>
<span>
:
</span>
</span>
<span>
<span
class="vjs-value vjs-value-undefined"
>
<span
class="ph-no-capture"
>
</span>
</span>
<!---->
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<div
class="vjs-indent-unit has-line"
/>
<!---->
</div>
<!---->
<span>
<span
class="vjs-tree-brackets"
>
}
</span>
<!---->
<!---->
</span>
</div>
<div
class="vjs-tree-node"
collapsed-on-click-brackets="true"
>
<!---->
<!---->
<div
class="vjs-indent"
>
<!---->
</div>
<!---->
<span>
<span
class="vjs-tree-brackets"
>
]
</span>
<!---->
<!---->
</span>
</div>
</div>
</div>
</div>
</div>
<div
class="teleporter hidden"
data-v-d4e6e290=""
/>
</div>
</div>
</div>
`;

View file

@ -52,7 +52,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
</span>
</div>
<span
class="text"
class="ph-no-capture text"
>
John
</span>
@ -90,7 +90,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
</span>
</div>
<span
class="text"
class="ph-no-capture text"
>
22
</span>
@ -176,7 +176,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
</span>
</div>
<span
class="text"
class="ph-no-capture text"
>
surfing
</span>
@ -216,7 +216,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
</span>
</div>
<span
class="text"
class="ph-no-capture text"
>
traveling
</span>
@ -458,7 +458,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
</span>
</div>
<span
class="text"
class="ph-no-capture text"
>
1
</span>
@ -498,7 +498,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
</span>
</div>
<span
class="text"
class="ph-no-capture text"
>
ignore
</span>

View file

@ -33,7 +33,7 @@
<n8n-loading :class="$style['card-loading']" variant="custom" />
</div>
<template v-else>
<div class="ph-no-capture" v-if="resources.length === 0">
<div v-if="resources.length === 0">
<slot name="empty">
<n8n-action-box
data-test-id="empty-resources-list"