Bump minimatch and react-scripts

functions/button.ts

@@ -0,0 +1,8 @@
+export const onRequest: PagesFunction = async context => {
+	const {
+		request, // same as existing Worker API
+		env, // same as existing Worker API
+	} = context;
+	const url = new URL(request.url);
+	return env.ASSETS.fetch(url.protocol + '//' + url.hostname + '/deploy.svg', request);
+};

functions/variable.ts

@@ -0,0 +1,26 @@
+import { seal } from 'tweetsodium';
+import type { PluginData } from '@cloudflare/pages-plugin-sentry';
+import { base64 } from 'rfc4648';
+
+export const onRequest: PagesFunction<any, any, PluginData> = async ({ request, data }) => {
+	try {
+		const headers = request.headers;
+		const body: any = await request.json();
+		if (body.repo && body.name && body.value) {
+			const resp = await fetch(`https://api.github.com/repos/${body.repo}/actions/variables`, {
+				method: 'POST',
+				headers,
+				body: JSON.stringify({
+					name: body.name,
+					value: body.value,
+				}),
+			});
+			return new Response(null, { status: resp.status });
+		} else {
+			return new Response(null, { status: 400 });
+		}
+	} catch (err) {
+		data.sentry.captureException(err);
+		return new Response(err.toString());
+	}
+};

package.json

@@ -46,7 +46,7 @@
 		"prettier": "^2.7.1",
 		"react": "^16.13.1",
 		"react-dom": "^16.13.1",
-		"react-scripts": "^2.1.3",
+		"react-scripts": "^5.0.1",
 		"tailwindcss": "^1.9.6",
 		"typescript": "^4.7.4",
 		"xstate": "^4.8.0"

src/App.js

@@ -10,14 +10,23 @@ import { EdgeStateContext } from './edge_state';
 import {
 	Completed,
 	Deploy,
-	Configure,
+	ConfigureAccount,
+	ConfigureProject,
 	Embed,
 	GithubAuth,
 	Logo,
 	MissingUrl,
 	Sidebar,
 } from './components';
 
+function parseField(value) {
+	const { name, secret, descr } = JSON.parse(value);
+	if (!name || !secret || !descr) {
+		throw new Error('misconfigured fields');
+	}
+	return { name, secretName: secret, description: descr, value: '' };
+}
+
 export const appMachine = Machine(
 	{
 		id: 'app',
@@ -31,7 +40,7 @@ export const appMachine = Machine(
 					},
 					NO_URL: 'missing_url',
 					URL: {
-						target: 'configuring',
+						target: 'configuring_account',
 						actions: 'incrementStep',
 					},
 					LS_FORKED: {
@@ -43,20 +52,28 @@ export const appMachine = Machine(
 			missing_url: {
 				on: {
 					URL: {
-						target: 'configuring',
+						target: 'configuring_account',
 						actions: 'incrementStep',
 					},
 				},
 			},
 			login: {
 				on: {
 					AUTH: {
-						target: 'configuring',
+						target: 'configuring_account',
 						actions: 'incrementStep',
 					},
 				},
 			},
-			configuring: {
+			configuring_account: {
+				on: {
+					SUBMIT: {
+						target: 'configuring_project',
+						actions: 'incrementStep',
+					},
+				},
+			},
+			configuring_project: {
 				on: {
 					SUBMIT: {
 						target: 'deploying_setup',
@@ -91,6 +108,7 @@ const App = () => {
 	const [forkedRepo, setForkedRepo] = useState(null);
 	const [edgeState] = useContext(EdgeStateContext);
 	const [debug, setDebug] = useState(false);
+	const [fields, setFields] = useState([]);
 
 	const setAccountIdWithCache = accountId => {
 		setAccountId(accountId);
@@ -162,8 +180,19 @@ const App = () => {
 		} else {
 			send('NO_AUTH');
 		}
+
+		const fields = windowUrl.searchParams.getAll('fields');
+		if (fields.length > 0) {
+			setFields(fields.map(parseField));
+		}
 	}, [send, edgeState]);
 
+	useEffect(() => {
+		if (current.value === 'configuring_project' && fields.length === 0) {
+			send('SUBMIT');
+		}
+	}, [current]);
+
 	const fork = async ({ accountId, apiToken, event }) => {
 		const regex = /github.com\/(?<owner>[^/]+)\/(?<repo>[^/]+)/;
 		let urlToMatch = url;
@@ -244,8 +273,24 @@ const App = () => {
 				'User-Agent': 'Deploy-to-CF-Workers',
 			},
 		});
-		send('SUBMIT');
 
+		for (let i = 0, len = fields.length; i < len; i++) {
+			const field = fields[i];
+			await fetch('/variable', {
+				body: JSON.stringify({
+					repo: repo.full_name,
+					name: field.secretName,
+					value: field.value,
+				}),
+				method: 'POST',
+				headers: {
+					'Authorization': `token ${edgeState.accessToken}`,
+					'User-Agent': 'Deploy-to-CF-Workers',
+				},
+			});
+		}
+
+		send('SUBMIT');
 		return false;
 	};
 
@@ -289,19 +334,33 @@ const App = () => {
 					<div className="pt-4 flex-1 max-w-2xl">
 						<>
 							<GithubAuth current={current} url={url} />
-							<Configure
+							<ConfigureAccount
 								accountIdState={[accountId, setAccountIdWithCache]}
 								apiTokenState={[apiToken, setApiToken]}
 								complete={() => send('SUBMIT')}
 								current={current}
 							/>
+							{fields.length > 0 ? (
+								<ConfigureProject
+									current={current}
+									stepNumber={3}
+									fields={fields}
+									submit={fields => {
+										setFields(fields);
+										send('SUBMIT');
+									}}
+								/>
+							) : (
+								''
+							)}
 							<Deploy
 								accountId={accountId}
 								current={current}
 								deploy={dispatchEvent}
 								fork={event => fork({ accountId, apiToken, event })}
 								forkedRepo={forkedRepo}
 								send={send}
+								stepNumber={fields.length > 0 ? 4 : 3}
 							/>
 						</>
 					</div>

src/components/configure.js → src/components/configure-account.js

@@ -78,7 +78,7 @@ export default ({
 	return (
 		<Section
 			currentState={current}
-			state="configuring"
+			state="configuring_account"
 			title="Configure Cloudflare Account"
 			stepNumber={2}
 			active={

src/components/configure-project.js

@@ -0,0 +1,74 @@
+import { Section } from './index';
+import React, { useState } from 'react';
+
+export default ({ current, stepNumber, fields, submit }) => {
+	const [state, setState] = useState(fields);
+
+	const onSubmit = event => {
+		event.preventDefault();
+		submit(state);
+	};
+
+	return (
+		<Section
+			title="Configure Project"
+			currentState={current}
+			state={['configuring_project']}
+			stepNumber={stepNumber}
+			inactive={null}
+			completed={
+				<div>
+					<p>Project has been configured.</p>
+				</div>
+			}
+			active={
+				<div className="mt-4">
+					<form onSubmit={onSubmit}>
+						{state.map(({ name, secretName, description, value }, idx) => (
+							<div key={secretName}>
+								<div className="mb-4">
+									<p className="mb-2">{description}:</p>
+								</div>
+								<div className="mr-8">
+									<label htmlFor="account_id" className="block font-medium leading-5 text-gray-1">
+										{name}
+									</label>
+									<div className="mt-1 mb-6 relative">
+										<input
+											id="account_id"
+											className="form-input block w-64 p-2 rounded-md border border-gray-7 sm:text-sm sm:leading-5"
+											onChange={({ target: { value } }) => {
+												setState(fields => {
+													// Copy the Array so that
+													// React can detect the change
+													// based on ref equality
+													const newFields = [...fields];
+													newFields[idx].value = value;
+													return newFields;
+												});
+											}}
+											placeholder="Enter a value"
+											required
+											value={value}
+										/>
+									</div>
+								</div>
+							</div>
+						))}
+
+						<div className="mt-6 mb-4 flex items-center">
+							<span className="block mr-4">
+								<button
+									type="submit"
+									className={`flex items-center justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-4 hover:bg-blue-4 focus:outline-none focus:border-blue-4 focus:shadow-outline-indigo active:bg-blue-4 transition duration-150 ease-in-out`}
+								>
+									Configure
+								</button>
+							</span>
+						</div>
+					</form>
+				</div>
+			}
+		/>
+	);
+};

src/components/deploy.js

@@ -42,7 +42,7 @@ const machine = Machine({
 	},
 });
 
-export default ({ accountId, current, deploy, fork, forkedRepo, send }) => {
+export default ({ accountId, current, deploy, fork, forkedRepo, send, stepNumber }) => {
 	const [subcurrent, subsend] = useMachine(machine);
 
 	const submit = event => {
@@ -78,11 +78,11 @@ export default ({ accountId, current, deploy, fork, forkedRepo, send }) => {
 
 	return (
 		<Section
-			isFinal
 			title="Deploy with GitHub Actions"
 			currentState={current}
 			state={['deploying', 'deploying_setup']}
-			stepNumber={3}
+			stepNumber={stepNumber}
+			isLast
 			active={
 				<>
 					<Subsection

src/components/index.js

@@ -2,7 +2,7 @@ export { default as AlertPanel } from './alert-panel';
 export { default as Deploy } from './deploy';
 export { default as Embed } from './embed';
 export { default as Completed } from './completed';
-export { default as Configure } from './configure';
+export { default as ConfigureAccount } from './configure-account';
 export { default as GithubAuth } from './github-auth';
 export {
 	accountId as AccountId,
@@ -23,3 +23,4 @@ export { default as Sidebar } from './sidebar';
 export { default as Subsection } from './subsection';
 export { default as Templates } from './templates';
 export { default as WorkflowStatus } from './workflow-status';
+export { default as ConfigureProject } from './configure-project';

src/components/section.js

@@ -1,14 +1,20 @@
 import React from 'react';
 
-const MAX_STEP = 3;
-
-export default ({ active, completed, currentState, inactive, stepNumber, state, title }) => {
+export default ({
+	active,
+	completed,
+	currentState,
+	inactive,
+	stepNumber,
+	state,
+	title,
+	isLast,
+}) => {
 	if (!currentState) return null;
 
 	const isActive =
 		typeof state === 'object' ? state.includes(currentState.value) : currentState.value === state;
 	const isComplete = currentState.context.stepNumber > stepNumber;
-	const isLast = stepNumber === MAX_STEP;
 
 	const baseContainerClasses =
 		'font-bold -mt-1 -ml-4 mr-6 w-8 h-8 flex items-center justify-center font-mono font-semibold rounded-full';