custom variable type widget: single resource collection (1/3)

[interim17]

Problem

Advances #40

Decap CMS does not natively support a variable type object widget.
A fairly limited variable type list widget exists, but doesn't quite meet our needs, and it's use leads to significantly cluttered UI with deeply nested fields.

In this case we want a single collection for resources (datasets, cell lines, software tools) to associate with an idea, rather than individual collections for each of those resource types.

https://decapcms.org/docs/variable-type-widgets/

Solution

Built a custom widget to handle a variable type, in this case, a resource object that can be one of several varieties and will render unique fields in the UI based on the type selected.

This PR does not address fully migrating all existing resources, or even the desired final set of fields for any resource types, as its a fairly big lift to just get the custom widget built, styled and registered.

In cms/widgets we define a VariableTypeWidgetControl

Even though we only have one implementation, I figured this was likely a pattern that would be repeated or built upon in any of our projects using this CMS so this abstract implementation doesn't need to know anything about the specifics of the config.

VariableResourceWidget
Hold the config in constants where the fields are actually defined and the React component is VariableResourceUnionControl.

In cms.js
We register the component here, in future work we can also register a custom Preview component here.
we also register a hook in the preSave step of the Decap lifecycle, which allows us to use the nested "name" field for a required and hidden top-level name field, which helps to reduce UI noise.

In config.yml

The collection Resources uses the widget, and in the ideas collection relational widgets are used to make a select both for the general resources, and one filtered only to datasets.

[netlify]

✅ Deploy Preview for project-idea-board ready!

Name	Link
🔨 Latest commit	6653ea5
🔍 Latest deploy log	https://app.netlify.com/projects/project-idea-board/deploys/699ccbad16f4df000832296b
😎 Deploy Preview	https://deploy-preview-49--project-idea-board.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[interim17]

One select for any resource at all, and one filtered to just datasets. We can provide as many as desired/useful.

[Copilot]

Pull request overview

Adds a new CMS-managed “Resources” collection backed by a custom union widget, and wires it into the Decap CMS admin so “Ideas” can reference datasets/resources from a single collection.

Changes:

• Extend static/admin/config.yml to add a new resources collection and new relation fields on Ideas.
• Add a configurable union-style Decap CMS control (resource_union) to author different resource types.
• Treat templateKey: resource markdown as “data-only” content in Gatsby page creation.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
static/admin/config.yml	Adds “Datasets/Resources” relation fields to Ideas and introduces a new “Resources” collection using the custom union widget.
src/cms/widgets/VariableTypeWidget/types.ts	Introduces shared config typings for the union widget.
src/cms/widgets/VariableTypeWidget/VariableTypeWidgetControl.tsx	Implements the generic config-driven union widget control (including file field support).
src/cms/widgets/VariableResourceWidget/constants.ts	Defines the resource-type configuration used by the union widget.
src/cms/widgets/VariableResourceWidget/VariableResourceUnionControl.tsx	Binds the generic union widget to the “resource” use-case with concrete type config.
src/cms/widgets/VariableResourceWidget/copyResourceNameHandler.ts	Adds a preSave hook to copy nested resource name into a required top-level field.
src/cms/cms.js	Registers the custom widget and the preSave event handler with Decap CMS.
gatsby-node.js	Adds resource to the list of data-only templateKeys to prevent page creation.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

handleTypeChange calls onChange({ type: newType }), which drops all existing fields in the object whenever the user changes the type (e.g., name/description/link will be lost). Preserve the current normalized value when switching types (and optionally clear only the previous type-specific fields) so changing the selector doesn't wipe user input.

Suggested change

	onChange({ type: newType });
	const current = normalizeValue();
	onChange({ ...current, type: newType });

[interim17]

Since fields won't match between types necessarily, I think we should drop them.

[Copilot]

cellLine repeats name/description even though the widget's default base fields already include them, causing duplicate inputs bound to the same keys. Remove the duplicates or override baseFields for this type.