Make customData available to interactive atoms

[frederickobrien]

The final domino in the parameterised interactives sequence, this takes the newly available customData passed down with interactive atoms and adds a data-atom-custom-data attribute to the container if it's there, thereby allowing atoms to access configuration, content, etc. defined in Composer rather than publishing new atoms for even the slightest variation.

Custom data set for interactive atoms in Composer...

Is now available in Dotcom through a new data attribute:

Atoms can then use a snippet like this to get the data:

const getAtomCustomData = <T>(id: string): T | null => {
	const getAtomContainer = (id: string): Element | null =>
		document.querySelector(`[data-atom-id="${id}"]`);
	const container = getAtomContainer(id);
	if (!container) return null;
	const raw = container.getAttribute('data-atom-custom-data');
	if (!raw) return null;
	try {
		return JSON.parse(raw) as T;
	} catch {
		console.warn(`Failed to parse data-atom-custom-data for atom "${id}"`);
		return null;
	}
};

And do with it as it sees fit.

[github-actions]

🚀 Image pushed to AWS ECR

Image digest: sha256:08a080ef3fc9fab6ca160f29f86469af6c5045788e98e09c9e72b56e74ece516

🐛 Run the image locally

The following can be used to run the image locally:

# Refer to image using the immutable digest. Find alternatives below.
IMAGE_IDENTIFIER="@sha256:08a080ef3fc9fab6ca160f29f86469af6c5045788e98e09c9e72b56e74ece516"

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-custom-data-for-interactive-atoms"

# Refer to image using build tag
# IMAGE_IDENTIFIER=":build-30765"

# Refer to image via the GitHub commit SHA tag
# IMAGE_IDENTIFIER=":sha-6bab1afda18b5ba14951366e8fe3877254bdcdc2"

# Set environment variables for the AWS CLI
AWS_PROFILE="<A_PROFILE_FROM_JANUS>"
AWS_DEFAULT_REGION="eu-west-1"

IMAGE_ACCOUNT_ID=$(aws ssm get-parameter --name /organisation/accounts/deployTools --query "Parameter.Value" --output text)
REGISTRY="${IMAGE_ACCOUNT_ID}.dkr.ecr.${AWS_DEFAULT_REGION}.amazonaws.com"
IMAGE="${REGISTRY}/guardian/dotcom-rendering${IMAGE_IDENTIFIER}"

# Login to AWS ECR https://docs.aws.amazon.com/AmazonECR/latest/userguide/registry_auth.html
aws ecr get-login-password | docker login --username AWS --password-stdin $REGISTRY

# Pull the image
docker pull $IMAGE

# Run the image. You'll likely need to set additional flags. See https://docs.docker.com/reference/cli/docker/container/run.
docker run $IMAGE

---

From guardian/actions-publish-image.

[github-actions]

Deploy build 30765 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 30765 of dotcom:rendering-all to CODE
• Deploy parts of build 30765 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[github-actions]

Deploy build 2993 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 2993 of dotcom:ab-testing to CODE
• Deploy parts of build 2993 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[emma-imber]

Looks good!

[gu-prout]

Seen on PROD (merged by @frederickobrien 9 minutes and 26 seconds ago) Please check your changes!