Setup proxy to convert SVG to PNG

[johnnymetz]

User Story

As an end user, I want to convert an SVG to a PNG, so that it can be used as a theme icon.

Motivation

In #7925, we need to convert an SVG to a PNG (see here).

Note this is a temporary workaround until browsers support dynamic SVG icons: w3c/webextensions#462

Acceptance Criteria

• A user can convert an SVG to a PNG in the Extension

Implementation Notes

• Potential Solutions
  • https://github.com/GewoonJaap/svg-to-png-cf-worker: Let's look into this first
  • Setup an App endpoint to do this
• This endpoint will be called a lot so need to ensure the solution isn't expensive. If it is, we probably want to enable caching.

[twschiller]

Can we just have the user upload in the Admin Console, convert it, and then store the PNG on S3? Or is there a reason to do it on the fly given that the icon won't change frequently?

[johnnymetz]

Can we just have the user upload in the Admin Console, convert it, and then store the PNG on S3?

That should work. @grahamlangford mentioned we need the icon to load for unauthenticated users but we can design the backend so that works (e.g. construct the icon URL in Chrome instead of returning the icon from an authenticated PixieBrix endpoint).

How often will this feature be used? I'm wondering if it's better to just require teams to contact PixieBrix support to do this (convert to PNG + upload to S3) manually? Considering we don't need this feature once w3c/webextensions#462 is done.

[fregante]

Considering that https://github.com/GewoonJaap/svg-to-png-cf-worker is already tested and it works, I'd probably say it's the quickest solution, at least until someone finds it and starts spamming it. A rate limiter (via CF page rules) can certainly help.

[twschiller]

@grahamlangford mentioned we need the icon to load for unauthenticated users but we can design the backend so that works (e.g. construct the icon URL in Chrome instead of returning the icon from an authenticated PixieBrix endpoint).

Don't we return the icon URL via the theme currently?

How often will this feature be used? I'm wondering if it's better to just require teams to contact PixieBrix support to do this (convert to PNG + upload to S3) manually?

It would be whenever we onboard an enterprise customer, or want to demo custom branding to an enterprise customer. @BrandonPxBx this would be good to triage vs. the other self-serve administration efforts. In many cases, the png is already publicly available, we'd just need a way to provide the png URL to the extension

[grahamlangford]

Don't we return the icon URL via the theme currently?

This is correct, when I was speaking with Johnny earlier, I mistakenly thought we were managing the theme with managedStorage, but we're just checking for a partnerId and organizationId:

pixiebrix-extension/src/themes/themeStore.ts

Lines 55 to 68 in 6ca9daa

	export async function getActiveTheme(): Promise<ThemeAssets> {
	expectContext("extension");
	try {
	const client = await getApiClient();
	const [
	{ partnerId: managedPartnerId, managedOrganizationId },
	{ data: meApiResponse },
	{ partnerId: settingsPartnerId },
	] = await Promise.all([
	// Enterprise managed storage, if provided, always takes precedence over the user's theme settings
	readManagedStorage(),
	client.get<components["schemas"]["Me"]>("/api/me/"),
	getSettingsState(),
	]);

[twschiller]

Closing - we'll instead do icon upload/hosting