mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Enable pin data button to also un-pin (#13642)

Browse source
This commit is contained in:
Milorad FIlipović 2025-03-03 16:17:59 +01:00 committed by GitHub
parent d9e3cfe13f
commit 24681f843c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 44 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/frontend/editor-ui/src/components/RunData.test.ts
View file

@ -166,14 +166,14 @@ describe('RunData', () => {
expect(queryByTestId('ndv-pin-data')).not.toBeInTheDocument(); expect(queryByTestId('ndv-pin-data')).not.toBeInTheDocument();
}); });
it('should disable pin data button when data is pinned', async () => { it('should not disable pin data button when data is pinned [ADO-3143]', async () => {
const { getByTestId } = render({ const { getByTestId } = render({
defaultRunItems: [], defaultRunItems: [],
displayMode: 'table', displayMode: 'table',
pinnedData: [{ json: { name: 'Test' } }], pinnedData: [{ json: { name: 'Test' } }],
}); });
const pinDataButton = getByTestId('ndv-pin-data'); const pinDataButton = getByTestId('ndv-pin-data');
expect(pinDataButton).toBeDisabled(); expect(pinDataButton).not.toBeDisabled();
}); });
it('should render callout when data is pinned in output panel', async () => { it('should render callout when data is pinned in output panel', async () => {

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

@ -528,8 +528,7 @@ const showPinButton = computed(() => {
const pinButtonDisabled = computed( const pinButtonDisabled = computed(
() => () =>
pinnedData.hasData.value || (!rawInputData.value.length && !pinnedData.hasData.value) ||
!rawInputData.value.length ||
!!binaryData.value?.length || !!binaryData.value?.length ||
isReadOnlyRoute.value || isReadOnlyRoute.value ||
readOnlyEnv.value, readOnlyEnv.value,

28
packages/frontend/editor-ui/src/components/RunDataPinButton.test.ts
View file

@ -30,7 +30,7 @@ const renderComponent = createComponentRenderer(RunDataPinButton, {
}, },
dataPinningDocsUrl: '', dataPinningDocsUrl: '',
pinnedData: { pinnedData: {
hasData: false, hasData: { value: false },
}, },
disabled: false, disabled: false,
}, },
@ -121,4 +121,30 @@ describe('RunDataPinButton.vue', () => {
expect(getByRole('tooltip')).toBeVisible(); expect(getByRole('tooltip')).toBeVisible();
expect(getByRole('tooltip')).toHaveTextContent('disabled'); expect(getByRole('tooltip')).toHaveTextContent('disabled');
}); });
it('pins data on button click', async () => {
const { getByTestId, getByRole, emitted } = renderComponent({});
// Should show 'Pin data' tooltip and emit togglePinData event
await userEvent.hover(getByTestId('ndv-pin-data'));
expect(getByRole('tooltip')).toBeVisible();
expect(getByRole('tooltip').textContent).toContain('Pin data');
await userEvent.click(getByTestId('ndv-pin-data'));
expect(emitted().togglePinData).toBeDefined();
});
it('should show correct tooltip and unpin data on button click', async () => {
const { getByTestId, getByRole, emitted } = renderComponent({
props: {
pinnedData: {
hasData: { value: true },
},
},
});
// Should show 'Unpin data' tooltip and emit togglePinData event
await userEvent.hover(getByTestId('ndv-pin-data'));
expect(getByRole('tooltip')).toBeVisible();
expect(getByRole('tooltip').textContent).toContain('Unpin data');
await userEvent.click(getByTestId('ndv-pin-data'));
expect(emitted().togglePinData).toBeDefined();
});
}); });

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

@ -37,14 +37,19 @@ const visible = computed(() =>
{{ locale.baseText('node.discovery.pinData.ndv') }} {{ locale.baseText('node.discovery.pinData.ndv') }}
</div> </div>
<div v-else> <div v-else>
<strong>{{ locale.baseText('ndv.pinData.pin.title') }}</strong> <div v-if="pinnedData.hasData.value">
<N8nText size="small" tag="p"> <strong>{{ locale.baseText('ndv.pinData.unpin.title') }}</strong>
{{ locale.baseText('ndv.pinData.pin.description') }} </div>
<div v-else>
<strong>{{ locale.baseText('ndv.pinData.pin.title') }}</strong>
<N8nText size="small" tag="p">
{{ locale.baseText('ndv.pinData.pin.description') }}
<N8nLink :to="props.dataPinningDocsUrl" size="small"> <N8nLink :to="props.dataPinningDocsUrl" size="small">
{{ locale.baseText('ndv.pinData.pin.link') }} {{ locale.baseText('ndv.pinData.pin.link') }}
</N8nLink> </N8nLink>
</N8nText> </N8nText>
</div>
</div> </div>
</template> </template>
<N8nIconButton <N8nIconButton

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

@ -1042,9 +1042,10 @@
"ndv.title.rename": "Rename", "ndv.title.rename": "Rename",
"ndv.title.renameNode": "Rename node", "ndv.title.renameNode": "Rename node",
"ndv.pinData.pin.title": "Pin data", "ndv.pinData.pin.title": "Pin data",
"ndv.pinData.pin.description": "Node will always output this data instead of executing.", "ndv.pinData.pin.description": "Node will always output current data instead of executing. Doesn't apply to production executions.",
"ndv.pinData.pin.binary": "Pin Data is disabled as this node's output contains binary data.", "ndv.pinData.pin.binary": "Pin Data is disabled as this node's output contains binary data.",
"ndv.pinData.pin.link": "More info", "ndv.pinData.pin.link": "More info",
"ndv.pinData.unpin.title": "Unpin data",
"ndv.pinData.pin.multipleRuns.title": "Run #{index} was pinned", "ndv.pinData.pin.multipleRuns.title": "Run #{index} was pinned",
"ndv.pinData.pin.multipleRuns.description": "This run will be outputted each time the node is run.", "ndv.pinData.pin.multipleRuns.description": "This run will be outputted each time the node is run.",
"ndv.pinData.unpinAndExecute.title": "Unpin output data?", "ndv.pinData.unpinAndExecute.title": "Unpin output data?",