feat: Add SelectableList component (no-changelog)

[CharlieKolb]

Summary

Add a new SelectableList component that maintains a list of clickable content which, on click, add a provided slot below.

I tried a few things here which I'm keen to get feedback on, namely using defineModel() for v-model and more advanced generics to provide a well-typed experience for the provided slot.

In practice, usage will look like this:

// the keys here will be updated when tags are clicked or slots are removed
const selectedProps = ref({ propA: 'an existing value' });
// All items that should either appear in a pill or have a slot entry with the provided custom props (tooltip in this case)
const propsDefined = [{
        { name: propA, initialValue: '', tooltip: 'a tooltip' },
        { name: propB, initialValue: 3, tooltip: 'another tooltip' },
}];

<N8nSelectableList
	v-model="selectedProps"
	:inputs="propsDefined"
>
	<template #displayItem="{ name, initialValue, tooltip }">  <--- these are all accurately type-inferred from propsDefined
		<ParameterInputFull ...

Note that the slot content is still responsible for updating the value, this component only initializes to a given value and manages whether the slot is visible or not via the keys in selectedProps.

The way the values are provided here seems a bit awkward, but in practice this really optimizes usability for the existing use case here.

It does make an assumption about our slot being representable by a single (default) value (though this could also be an object).

Concrete use case here is optional parameters for the fromAI button (branch):

Related Linear tickets, Github issues, and Community forum posts

https://linear.app/n8n/issue/ADO-3035/feature-add-support-for-additional-fields-for-overridden-fields

Review / Merge checklist

• PR title and summary are descriptive. (conventions)
• Docs updated or follow-up ticket created.
• Tests included.
• PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

[codecov]

Codecov Report

Attention: Patch coverage is 61.38614% with 39 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...onents/N8nSelectableList/SelectableList.stories.ts	0.00%	39 Missing ⚠️

📢 Thoughts on this report? Let us know!

[alexgrozav]

Great work on this! A few small remarks, but looks good.

[github-actions]

⚠️ Visual regressions found: 1

[github-actions]

✅ All Cypress E2E specs passed

[cypress]

n8n    Run #8815

Run Properties:   Passed #8815  •  d303900296: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 CharlieKolb 🗃️ e2e/*

Project	n8n
Branch Review	ADO-3035
Run status	Passed #8815
Run duration	00m 14s
Commit	d303900296: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 CharlieKolb 🗃️ e2e/*
Committer	Charlie Kolb
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	2
Pending	0
Skipped	0
Passing	489
View all changes introduced in this branch ↗︎

[github-actions]

✅ No visual regressions found.

[github-actions]

⚠️ Some Cypress E2E specs are failing, please fix them before merging

[github-actions]

✅ All Cypress E2E specs passed

[netroy]

⚠️ Visual regressions found: 1

Whenever you see these warning, please either acknowledge them on chromatic, or ask someone else to review it 🙏🏽

[janober]

Got released with [email protected]