feat: Cloudformation + RDS

packages/frontend/src/components/CloudFormationTemplateUpload.tsx

@@ -0,0 +1,20 @@
+import {useRef} from 'react'
+import {parse} from 'yaml'
+import {Upload} from 'lucide-react'
+
+export function CloudFormationTemplateUpload({onLoad, onError}: {onLoad: (template: string, name: string) => void; onError: (message: string) => void}) {
+    const input = useRef<HTMLInputElement>(null)
+    async function load(file?: File) {
+        if (!file) return
+        if (!/\.(json|ya?ml)$/i.test(file.name)) return onError('Choose a JSON, YAML, or YML template file.')
+        const template = await file.text()
+        try {
+            if (/\.json$/i.test(file.name)) JSON.parse(template)
+            else parse(template)
+            onLoad(template, file.name)
+        } catch {
+            onError(`${file.name} is not valid ${/\.json$/i.test(file.name) ? 'JSON' : 'YAML'}.`)
+        }
+    }
+    return <><input ref={input} type="file" accept=".json,.yaml,.yml,application/json,application/x-yaml,text/yaml" hidden onChange={(event) => void load(event.target.files?.[0])}/><button className="button compact" type="button" onClick={() => input.current?.click()}><Upload size={13}/> Upload JSON or YAML</button></>
+}