mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): Removing ph-no-capture class from some elements (#6674)

Browse source 
* feat(editor): Remove `.ph-no-capture` class from some of the fields
* ✔️ Updating test snapshots
* ⚡ Redacting expressions preview in credentials form
* 🔧 Disable posthog input masking
* 🚨 Testing PostHog iFrame settings
* Reverting iframe test
* ⚡ Hiding API key in PostHog recordings
* ✅ Added tests for redacted values
* ✔️ Updating checkbox snapshots after label component update
* ✔️ Updating test snapshots in editor-ui
* 👕 Fix lint errors
This commit is contained in:
Milorad FIlipović 2023-07-19 16:51:49 +02:00 committed by GitHub
parent 250175d066
commit c3455a4ad8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
46 changed files with 173 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap
View file

@ -27,6 +27,7 @@ exports[`components > N8nCheckbox > should render with both child and label 1`]
</strong>
<div
class="container"
data-test-id="input-label"
>
<label
class="n8n-input-label inputLabel heading medium"
@ -108,6 +109,7 @@ exports[`components > N8nCheckbox > should render with label 1`] = `
>
<div
class="container"
data-test-id="input-label"
>
<label
class="n8n-input-label inputLabel heading medium"

9
packages/design-system/src/components/N8nInput/Input.vue
View file

@ -85,11 +85,14 @@ export default defineComponent({
return this.size;
},
classes(): string[] {
const classes = [];
if (this.size === 'xlarge') {
return ['xlarge'];
classes.push('xlarge');
}
return [];
if (this.type === 'password') {
classes.push('ph-no-capture');
}
return classes;
},
},
methods: {

18
packages/design-system/src/components/N8nInput/__tests__/Input.spec.ts
View file

@ -6,4 +6,22 @@ describe('N8nInput', () => {
const wrapper = render(N8nInput);
expect(wrapper.html()).toMatchSnapshot();
});
it('should add .ph-no-capture class on password input', () => {
const { container } = render(N8nInput, {
props: {
type: 'password',
},
});
expect(container.firstChild).toHaveClass('ph-no-capture');
});
it('should not add .ph-no-capture class on other input types', () => {
const { container } = render(N8nInput, {
props: {
type: 'number',
},
});
expect(container.firstChild).not.toHaveClass('ph-no-capture');
});
});

2
packages/design-system/src/components/N8nInputLabel/InputLabel.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="$style.container" v-on="$listeners">
<div :class="$style.container" v-on="$listeners" data-test-id="input-label">
<label
v-if="label || $slots.options"
:for="inputName"

1
packages/design-system/src/components/N8nMarkdown/Markdown.vue
View file

@ -3,7 +3,6 @@
<div
v-if="!loading"
ref="editor"
class="ph-no-capture"
:class="$style[theme]"
v-html="htmlContent"
@click="onClick"

10
packages/design-system/src/components/N8nSticky/Sticky.vue
View file

@ -17,12 +17,7 @@
@resizestart="onResizeStart"
>
<template>
<div
v-show="!editMode"
class="ph-no-capture"
:class="$style.wrapper"
@dblclick.stop="onDoubleClick"
>
<div v-show="!editMode" :class="$style.wrapper" @dblclick.stop="onDoubleClick">
<n8n-markdown
theme="sticky"
:content="content"
@ -38,8 +33,7 @@
@keydown.esc="onInputBlur"
@keydown.stop
@wheel.stop
class="sticky-textarea ph-no-capture"
:class="{ 'full-height': !shouldShowFooter }"
:class="{ 'full-height': !shouldShowFooter, 'sticky-textarea': true }"
>
<n8n-input
:value="content"

2
packages/design-system/src/components/N8nUserInfo/UserInfo.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="ph-no-capture" :class="classes">
<div :class="classes">
<div :class="$style.avatarContainer">
<n8n-avatar :firstName="firstName" :lastName="lastName" />
</div>

1
packages/design-system/src/components/N8nUsersList/UsersList.vue
View file

@ -3,7 +3,6 @@
<div
v-for="(user, i) in sortedUsers"
:key="user.id"
class="ph-no-capture"
:class="i === sortedUsers.length - 1 ? $style.itemContainer : $style.itemWithBorder"
:data-test-id="`user-list-item-${user.email}`"
>

4
packages/editor-ui/src/Interface.ts
View file

@ -62,6 +62,10 @@ declare global {
isIdentifiedID?: boolean;
featureFlags: FeatureFlags;
};
session_recording?: {
maskAllInputs?: boolean;
maskInputFn?: ((text: string, element?: HTMLElement) => string) | null;
};
},
): void;
isFeatureEnabled?(flagName: string): boolean;

2
packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
View file

@ -5,7 +5,7 @@
@mouseout="onMouseOut"
ref="codeNodeEditorContainer"
>
<div ref="codeNodeEditor" class="code-node-editor-input ph-no-capture"></div>
<div ref="codeNodeEditor" class="code-node-editor-input"></div>
<n8n-button
v-if="aiButtonEnabled && (isEditorHovered || isEditorFocused)"
size="small"

11
packages/editor-ui/src/components/CopyInput.vue
View file

@ -2,7 +2,12 @@
<div>
<n8n-input-label :label="label">
<div
:class="{ [$style.copyText]: true, [$style[size]]: true, [$style.collapsed]: collapse }"
:class="{
[$style.copyText]: true,
[$style[size]]: true,
[$style.collapsed]: collapse,
'ph-no-capture': redactValue,
}"
@click="copy"
data-test-id="copy-input"
>
@ -56,6 +61,10 @@ export default defineComponent({
type: String,
default: 'large',
},
redactValue: {
type: Boolean,
default: false,
},
},
setup() {
return {

2
packages/editor-ui/src/components/CredentialCard.vue
View file

@ -4,7 +4,7 @@
<credential-icon :credential-type-name="credentialType ? credentialType.name : ''" />
</template>
<template #header>
<n8n-heading tag="h2" bold class="ph-no-capture" :class="$style['card-heading']">
<n8n-heading tag="h2" bold :class="$style['card-heading']">
{{ data.name }}
</n8n-heading>
</template>

3
packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
View file

@ -88,10 +88,11 @@
:toastTitle="
$locale.baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')
"
:redactValue="true"
/>
</template>
<enterprise-edition v-else :features="[EnterpriseEditionFeature.Sharing]">
<div class="ph-no-capture">
<div>
<n8n-info-tip :bold="false">
{{
$locale.baseText('credentialEdit.credentialEdit.info.sharee', {

2
packages/editor-ui/src/components/ExecutionFilter.vue
View file

@ -176,7 +176,7 @@ onBeforeMount(() => {
filterable
data-test-id="executions-filter-workflows-select"
>
<div class="ph-no-capture">
<div>
<n8n-option
v-for="(item, idx) in props.workflows"
:key="idx"

2
packages/editor-ui/src/components/ExecutionsList.vue
View file

@ -79,7 +79,7 @@
/>
</td>
<td>
<span class="ph-no-capture" @click.stop="displayExecution(execution)"
<span @click.stop="displayExecution(execution)"
><a href="#" :class="$style.link">{{
execution.workflowName || $locale.baseText('executionsList.unsavedWorkflow')
}}</a></span

13
packages/editor-ui/src/components/ExpressionEdit.vue
View file

@ -20,7 +20,11 @@
</div>
<div class="variable-selector">
<variable-selector :path="path" @itemSelected="itemSelected"></variable-selector>
<variable-selector
:path="path"
:redactValues="redactValues"
@itemSelected="itemSelected"
></variable-selector>
</div>
</el-col>
<el-col :span="16" class="right-side">
@ -42,11 +46,12 @@
</n8n-link>
</div>
</div>
<div class="expression-editor ph-no-capture">
<div class="expression-editor">
<ExpressionEditorModalInput
:value="value"
:isReadOnly="isReadOnlyRoute"
:path="path"
:class="{ 'ph-no-capture': redactValues }"
@change="valueChanged"
@close="closeDialog"
ref="inputFieldExpression"
@ -59,7 +64,7 @@
<div class="editor-description">
{{ $locale.baseText('expressionEdit.resultOfItem1') }}
</div>
<div class="ph-no-capture">
<div :class="{ 'ph-no-capture': redactValues }">
<ExpressionEditorModalOutput
:segments="segments"
ref="expressionResult"
@ -97,7 +102,7 @@ import type { Segment } from '@/types/expressions';
export default defineComponent({
name: 'ExpressionEdit',
mixins: [externalHooks, genericHelpers, debounceHelper],
props: ['dialogVisible', 'parameter', 'path', 'value', 'eventSource'],
props: ['dialogVisible', 'parameter', 'path', 'value', 'eventSource', 'redactValues'],
components: {
ExpressionEditorModalInput,
ExpressionEditorModalOutput,

2
packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
View file

@ -1,5 +1,5 @@
<template>
<div ref="root" class="ph-no-capture" @keydown.stop></div>
<div ref="root" @keydown.stop></div>
</template>
<script lang="ts">

2
packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue
View file

@ -1,5 +1,5 @@
<template>
<div ref="root" class="ph-no-capture"></div>
<div ref="root"></div>
</template>
<script lang="ts">

2
packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
View file

@ -1,5 +1,5 @@
<template>
<div ref="htmlEditor" class="ph-no-capture"></div>
<div ref="htmlEditor"></div>
</template>
<script lang="ts">

2
packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
View file

@ -1,5 +1,5 @@
<template>
<div ref="root" class="ph-no-capture" data-test-id="inline-expression-editor-input"></div>
<div ref="root" data-test-id="inline-expression-editor-input"></div>
</template>
<script lang="ts">

2
packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
View file

@ -4,7 +4,7 @@
{{ $locale.baseText('parameterInput.resultForItem') }} {{ hoveringItemNumber }}
</n8n-text>
<n8n-text :class="$style.body">
<div ref="root" class="ph-no-capture" data-test-id="inline-expression-editor-output"></div>
<div ref="root" data-test-id="inline-expression-editor-output"></div>
</n8n-text>
<div :class="$style.footer">
<n8n-text size="small" compact>

2
packages/editor-ui/src/components/InlineNameEdit.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="ph-no-capture" :class="$style.container">
<div :class="$style.container">
<span v-if="readonly" :class="$style.headline">
{{ name }}
</span>

2
packages/editor-ui/src/components/InputPanel.vue
View file

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

2
packages/editor-ui/src/components/Node.vue
View file

@ -155,7 +155,7 @@
></div>
</div>
<div class="node-description">
<div class="node-name ph-no-capture" :title="nodeTitle">
<div class="node-name" :title="nodeTitle">
<p data-test-id="canvas-node-box-title">
{{ nodeTitle }}
</p>

2
packages/editor-ui/src/components/NodeTitle.vue
View file

@ -28,7 +28,7 @@
</div>
</div>
<template #reference>
<div class="ph-no-capture" :class="{ [$style.title]: true, [$style.hoverable]: editable }">
<div :class="{ [$style.title]: true, [$style.hoverable]: editable }">
{{ value }}
<div :class="$style.editIconContainer">
<font-awesome-icon :class="$style.editIcon" icon="pencil-alt" v-if="editable" />

19
packages/editor-ui/src/components/ParameterInput.vue
View file

@ -9,6 +9,7 @@
:path="path"
:eventSource="eventSource || 'ndv'"
:isReadOnly="isReadOnly"
:redactValues="shouldRedactValue"
@closeDialog="closeExpressionEditDialog"
@valueChanged="expressionUpdated"
></expression-edit>
@ -41,6 +42,7 @@
:title="displayTitle"
:isReadOnly="isReadOnly"
:path="path"
:class="{ 'ph-no-capture': shouldRedactValue }"
@valueChanged="expressionUpdated"
@modalOpenerClick="openExpressionEditorModal"
@focus="setFocus"
@ -114,11 +116,7 @@
@valueChanged="valueChangedDebounced"
/>
<div
v-else-if="editorType"
class="readonly-code clickable ph-no-capture"
@click="displayEditDialog()"
>
<div v-else-if="editorType" class="readonly-code clickable" @click="displayEditDialog()">
<code-node-editor
v-if="!codeEditDialogVisible"
:value="value"
@ -131,7 +129,7 @@
v-else
v-model="tempValue"
ref="inputField"
class="input-with-opener"
:class="{ 'input-with-opener': true, 'ph-no-capture': shouldRedactValue }"
:size="inputSize"
:type="getStringInputType"
:rows="getArgument('rows')"
@ -204,6 +202,7 @@
: $locale.baseText('parameterInput.selectDateAndTime')
"
:picker-options="dateTimePickerOptions"
:class="{ 'ph-no-capture': shouldRedactValue }"
@change="valueChanged"
@focus="setFocus"
@blur="onBlur"
@ -220,6 +219,7 @@
:min="getArgument('minValue')"
:precision="getArgument('numberPrecision')"
:disabled="isReadOnly"
:class="{ 'ph-no-capture': shouldRedactValue }"
@change="valueChanged"
@input="onTextInputChange"
@focus="setFocus"
@ -274,7 +274,7 @@
>
<div class="list-option">
<div
class="option-headline ph-no-capture"
class="option-headline"
:class="{ 'remote-parameter-option': isRemoteParameterOption(option) }"
>
{{ getOptionsOptionDisplayName(option) }}
@ -331,7 +331,7 @@
/>
<el-switch
v-else-if="parameter.type === 'boolean'"
class="switch-input"
:class="{ 'switch-input': true, 'ph-no-capture': shouldRedactValue }"
ref="inputField"
active-color="#13ce66"
:value="displayValue"
@ -830,6 +830,9 @@ export default defineComponent({
remoteParameterOptionsKeys(): string[] {
return (this.remoteParameterOptions || []).map((o) => o.name);
},
shouldRedactValue(): boolean {
return this.getStringInputType === 'password' || this.isForCredential;
},
},
methods: {
isRemoteParameterOption(option: INodePropertyOptions) {

3
packages/editor-ui/src/components/ParameterInputWrapper.vue
View file

@ -27,9 +27,8 @@
/>
<input-hint
v-if="expressionOutput"
:class="$style.hint"
:class="{ [$style.hint]: true, 'ph-no-capture': isForCredential }"
data-test-id="parameter-expression-preview"
class="ph-no-capture"
:highlight="!!(expressionOutput && targetItem) && isInputParentOfActiveNode"
:hint="expressionOutput"
:singleLine="true"

1
packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
View file

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

2
packages/editor-ui/src/components/RunDataHtml.vue
View file

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

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

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

2
packages/editor-ui/src/components/RunDataSchemaItem.vue
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" class="ph-no-capture">{{ text }}</span>
<span v-if="text" :class="$style.text">{{ 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" />

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

@ -121,7 +121,6 @@
<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">
@ -143,11 +142,9 @@
>
</template>
<template #value="{ value }">
<span
:class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }"
class="ph-no-capture"
>{{ getValueToRender(value) }}</span
>
<span :class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }">
{{ getValueToRender(value) }}
</span>
</template>
</n8n-tree>
</td>

2
packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
View file

@ -2,7 +2,7 @@
<n8n-card :class="$style.cardLink" data-test-id="destination-card" @click="onClick">
<template #header>
<div>
<n8n-heading tag="h2" bold class="ph-no-capture" :class="$style.cardHeading">
<n8n-heading tag="h2" bold :class="$style.cardHeading">
{{ destination.label }}
</n8n-heading>
<div :class="$style.cardDescription">

2
packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
View file

@ -1,6 +1,6 @@
<template>
<div :class="$style.sqlEditor" v-click-outside="onBlur">
<div ref="sqlEditor" data-test-id="sql-editor-container" class="ph-no-capture"></div>
<div ref="sqlEditor" data-test-id="sql-editor-container"></div>
<InlineExpressionEditorOutput
:segments="segments"
:value="query"

3
packages/editor-ui/src/components/VariableSelector.vue
View file

@ -16,6 +16,7 @@
v-for="option in currentResults"
:key="option.key"
:extendAll="extendAll"
:redactValues="redactValues"
@itemSelected="forwardItemSelected"
></variable-selector-item>
</div>
@ -59,7 +60,7 @@ export default defineComponent({
components: {
VariableSelectorItem,
},
props: ['path'],
props: ['path', 'redactValues'],
data() {
return {
variableFilter: '',

5
packages/editor-ui/src/components/VariableSelectorItem.vue
View file

@ -41,6 +41,7 @@
:key="option.key"
:extendAll="extendAll"
:allowParentSelect="option.allowParentSelect"
:redactValues="redactValues"
class="sub-level"
@itemSelected="forwardItemSelected"
></variable-selector-item>
@ -51,7 +52,7 @@
{{ item.name }}:
<font-awesome-icon icon="dot-circle" title="Select Item" />
</div>
<div class="item-value ph-no-capture">
<div :class="{ 'ph-no-capture': redactValues, 'item-value': true }">
{{ item.value !== undefined ? item.value : $locale.baseText('variableSelectorItem.empty') }}
</div>
</div>
@ -66,7 +67,7 @@ import { externalHooks } from '@/mixins/externalHooks';
export default defineComponent({
name: 'VariableSelectorItem',
mixins: [externalHooks],
props: ['allowParentSelect', 'extendAll', 'item'],
props: ['allowParentSelect', 'extendAll', 'item', 'redactValues'],
mounted() {
if (this.extended) return;

8
packages/editor-ui/src/components/WorkflowCard.vue
View file

@ -1,13 +1,7 @@
<template>
<n8n-card :class="$style.cardLink" @click="onClick">
<template #header>
<n8n-heading
tag="h2"
bold
class="ph-no-capture"
:class="$style.cardHeading"
data-test-id="workflow-card-name"
>
<n8n-heading tag="h2" bold :class="$style.cardHeading" data-test-id="workflow-card-name">
{{ data.name }}
</n8n-heading>
</template>

51
packages/editor-ui/src/components/__tests__/CopyInput.test.ts Normal file
View file

@ -0,0 +1,51 @@
import { PiniaVuePlugin } from 'pinia';
import { render } from '@testing-library/vue';
import { merge } from 'lodash-es';
import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
import { STORES } from '@/constants';
import { createTestingPinia } from '@pinia/testing';
import CopyInput from '@/components/CopyInput.vue';
const DEFAULT_SETUP = {
pinia: createTestingPinia({
initialState: {
[STORES.SETTINGS]: {
settings: merge({}, SETTINGS_STORE_DEFAULT_STATE.settings),
},
},
}),
props: {
copyButtonText: 'Click to copy',
label: 'Copy Input test',
},
};
const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
render(CopyInput, merge(DEFAULT_SETUP, renderOptions), (vue) => {
vue.use(PiniaVuePlugin);
});
describe('BannerStack', () => {
afterEach(() => {
vi.clearAllMocks();
});
it('should render default configuration', async () => {
const { getByTestId } = renderComponent();
expect(getByTestId('input-label')).toHaveTextContent('Copy Input test');
expect(getByTestId('copy-input')).toHaveTextContent('Click to copy');
});
it('should render redacted version', async () => {
const { container, getByTestId } = renderComponent(
merge(DEFAULT_SETUP, {
props: {
redactValue: true,
},
}),
);
expect(getByTestId('copy-input')).toHaveClass('ph-no-capture');
});
});

13
packages/editor-ui/src/components/__tests__/RunDataJson.test.ts
View file

@ -65,17 +65,4 @@ describe('RunDataJson.vue', () => {
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');
});
});

10
packages/editor-ui/src/components/__tests__/__snapshots__/PersonalizationModal.spec.ts.snap
View file

@ -21,7 +21,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
<div>
<div class=\\"grid\\">
<div class=\\"\\">
<div class=\\"container\\" data-test-id=\\"companyType\\"><label for=\\"companyType\\" class=\\"n8n-input-label inputLabel heading medium\\">
<div data-test-id=\\"companyType\\" class=\\"container\\"><label for=\\"companyType\\" class=\\"n8n-input-label inputLabel heading medium\\">
<div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> What best describes your company? <!----></span></div>
<!---->
<!---->
@ -71,7 +71,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
</div>
</div>
<div class=\\"\\">
<div class=\\"container\\" data-test-id=\\"role\\"><label for=\\"role\\" class=\\"n8n-input-label inputLabel heading medium\\">
<div data-test-id=\\"role\\" class=\\"container\\"><label for=\\"role\\" class=\\"n8n-input-label inputLabel heading medium\\">
<div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> Which role best describes you? <!----></span></div>
<!---->
<!---->
@ -123,7 +123,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
</div>
</div>
<div class=\\"\\">
<div class=\\"container\\" data-test-id=\\"automationBeneficiary\\"><label for=\\"automationBeneficiary\\" class=\\"n8n-input-label inputLabel heading medium\\">
<div data-test-id=\\"automationBeneficiary\\" class=\\"container\\"><label for=\\"automationBeneficiary\\" class=\\"n8n-input-label inputLabel heading medium\\">
<div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> Who will your automations mainly be for? <!----></span></div>
<!---->
<!---->
@ -169,7 +169,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
</div>
</div>
<div class=\\"\\">
<div class=\\"container\\" data-test-id=\\"companySize\\"><label for=\\"companySize\\" class=\\"n8n-input-label inputLabel heading medium\\">
<div data-test-id=\\"companySize\\" class=\\"container\\"><label for=\\"companySize\\" class=\\"n8n-input-label inputLabel heading medium\\">
<div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> How big is your company? <!----></span></div>
<!---->
<!---->
@ -218,7 +218,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
</div>
</div>
<div class=\\"\\">
<div class=\\"container\\" data-test-id=\\"reportedSource\\"><label for=\\"reportedSource\\" class=\\"n8n-input-label inputLabel heading medium\\">
<div data-test-id=\\"reportedSource\\" class=\\"container\\"><label for=\\"reportedSource\\" class=\\"n8n-input-label inputLabel heading medium\\">
<div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> How did you hear about n8n? <!----></span></div>
<!---->
<!---->

30
packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap
View file

@ -138,7 +138,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
class="vjs-value vjs-value-number"
>
<span
class="ph-no-capture mappable"
class="mappable"
data-depth="3"
data-name="list[0]"
data-path="[0].list[0]"
@ -180,7 +180,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
class="vjs-value vjs-value-number"
>
<span
class="ph-no-capture mappable"
class="mappable"
data-depth="3"
data-name="list[1]"
data-path="[0].list[1]"
@ -222,7 +222,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
class="vjs-value vjs-value-number"
>
<span
class="ph-no-capture mappable"
class="mappable"
data-depth="3"
data-name="list[2]"
data-path="[0].list[2]"
@ -351,9 +351,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
<span
class="vjs-value vjs-value-string"
>
<span
class="ph-no-capture"
>
<span>
"Joe"
</span>
</span>
@ -429,9 +427,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
<span
class="vjs-value vjs-value-number"
>
<span
class="ph-no-capture"
>
<span>
123
</span>
</span>
@ -479,9 +475,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
<span
class="vjs-value vjs-value-string"
>
<span
class="ph-no-capture"
>
<span>
"456"
</span>
</span>
@ -529,9 +523,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
<span
class="vjs-value vjs-value-string"
>
<span
class="ph-no-capture"
>
<span>
"abc"
</span>
</span>
@ -579,9 +571,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
<span
class="vjs-value vjs-value-null"
>
<span
class="ph-no-capture"
>
<span>
null
</span>
</span>
@ -629,9 +619,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
<span
class="vjs-value vjs-value-undefined"
>
<span
class="ph-no-capture"
>
<span>
</span>
</span>

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

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

4
packages/editor-ui/src/components/__tests__/__snapshots__/VariablesRow.spec.ts.snap
View file

@ -32,7 +32,7 @@ exports[`VariablesRow > should show key and value inputs in edit mode 1`] = `
"<tr data-test-id=\\"variables-row\\" class=\\"variablesRow\\">
<td class=\\"variables-key-column\\">
<div>
<div class=\\"container\\" data-test-id=\\"variable-row-key-input\\">
<div data-test-id=\\"variable-row-key-input\\" class=\\"container\\">
<!---->
<div class=\\"\\">
<div class=\\"el-input el-input--large n8n-input\\">
@ -49,7 +49,7 @@ exports[`VariablesRow > should show key and value inputs in edit mode 1`] = `
</td>
<td class=\\"variables-value-column\\">
<div>
<div class=\\"container\\" data-test-id=\\"variable-row-value-input\\">
<div data-test-id=\\"variable-row-value-input\\" class=\\"container\\">
<!---->
<div class=\\"\\">
<div class=\\"el-input el-input--large n8n-input\\">

3
packages/editor-ui/src/stores/posthog.store.ts
View file

@ -118,6 +118,9 @@ export const usePostHog = defineStore('posthog', () => {
autocapture: config.autocapture,
disable_session_recording: config.disableSessionRecording,
debug: config.debug,
session_recording: {
maskAllInputs: false,
},
};
window.posthog?.init(config.apiKey, options);

3
packages/editor-ui/src/views/SettingsApiView.vue
View file

@ -36,12 +36,13 @@
{{ $locale.baseText('generic.delete') }}
</n8n-link>
</span>
<div class="ph-no-capture">
<div>
<CopyInput
:label="$locale.baseText('settings.api.view.myKey')"
:value="apiKey"
:copy-button-text="$locale.baseText('generic.clickToCopy')"
:toast-title="$locale.baseText('settings.api.view.copy.toast')"
:redactValue="true"
@copy="onCopy"
/>
</div>

2
packages/editor-ui/src/views/SettingsPersonalView.vue
View file

@ -4,7 +4,7 @@
<n8n-heading size="2xlarge">{{
$locale.baseText('settings.personal.personalSettings')
}}</n8n-heading>
<div class="ph-no-capture" :class="$style.user">
<div :class="$style.user">
<span :class="$style.username" data-test-id="current-user-name">
<n8n-text color="text-light">{{ currentUser.fullName }}</n8n-text>
</span>