feat: Keep trying to make fetch happen

https://harperdb.atlassian.net/browse/STUDIO-344

Author: dawsontoth

src/features/instance/InstanceNavBar.tsx

@@ -32,16 +32,16 @@ export function InstanceNavBar() {
 			shortName: 'Apps',
 			icon: <PackageIcon className="inline-block" />,
 		},
-		canManage && {
-			to: buildAbsoluteLinkToPage(params, 'apis'),
-			name: 'APIs',
-			icon: <ServerIcon className="inline-block" />,
-		},
 		{
 			to: buildAbsoluteLinkToPage(params, 'databases'),
 			icon: <DatabaseIcon className="inline-block" />,
 			name: 'Databases',
 		},
+		canManage && {
+			to: buildAbsoluteLinkToPage(params, 'apis'),
+			name: 'APIs',
+			icon: <ServerIcon className="inline-block" />,
+		},
 		canManage && {
 			to: buildAbsoluteLinkToPage(params, 'status'),
 			icon: <GaugeIcon className="inline-block" />,

src/features/instance/apis/plugins.ts

@@ -1,25 +1,26 @@
 export const SnippedGeneratorNodeJsPlugin = {
 	fn: {
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		requestSnippetGenerator_node_fetch: (request: any) => {
-			const url = new URL(request.get('url'));
+		requestSnippetGenerator_fetch: (request: { get: (key: string) => unknown }) => {
+			const url = new URL(request.get('url') as string);
 			let isMultipartFormDataRequest = false;
-			const headers = request.get('headers');
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			const headers = request.get('headers') as any;
 			if (headers && headers.size) {
-				request.get('headers').map((val: string, key: string) => {
+				headers.map((val: string, key: string) => {
 					isMultipartFormDataRequest = isMultipartFormDataRequest || /^content-type$/i.test(key) && /^multipart\/form-data$/i.test(val);
 				});
 			}
-			let reqBody = request.get('body');
-			if (request.get('body')) {
-				if (isMultipartFormDataRequest && ['POST', 'PUT', 'PATCH'].includes(request.get('method'))) {
+			let reqBody = request.get('body') as string | object;
+			const reqMethod = request.get('method') as string;
+			if (reqBody) {
+				if (isMultipartFormDataRequest && ['POST', 'PUT', 'PATCH'].includes(reqMethod)) {
 					return 'throw new Error("Currently unsupported content-type: /^multipart\\/form-data$/i");';
 				} else {
 					if (typeof reqBody !== 'string') {
 						reqBody = JSON.stringify(reqBody, null, '\t');
 					}
 				}
-			} else if (!request.get('body') && request.get('method') === 'POST') {
+			} else if (!reqBody && reqMethod === 'POST') {
 				reqBody = '';
 			}
 
@@ -28,19 +29,15 @@ export const SnippedGeneratorNodeJsPlugin = {
 					.replace(/`/g, '\\`')
 				+ '`';
 
-			return `async function main() {
-\tconst response = await fetch("${url.toString()}", {
-\t\tmethod: "${request.get('method')}",${headers && headers.size ? `
-\t\theaders: {
-\t\t\t${request.get('headers').map((val: string, key: string) => `"${key}": "${val}"`).valueSeq().join(',\n\t\t\t')}
-\t\t},` : ''}${reqBody ? `
-\t\tbody: JSON.stringify(${stringBody}),` : ''}
-\t});
-\tconst data = await response.json();
-\tconsole.log(data);
-}
-
-main().catch(console.error);
+			return `const response = await fetch("${url.toString()}", {
+\tmethod: "${request.get('method')}",${headers && headers.size ? `
+\theaders: {
+\t\t${headers.map((val: string, key: string) => `"${key}": "${val}"`).valueSeq().join(',\n\t\t')}
+\t},` : ''}${reqBody ? `
+\tbody: JSON.stringify(${stringBody}),` : ''}
+});
+const data = await response.json();
+console.log(data);
 `;
 		},
 	},

src/features/instance/apis/requestSnippets.ts

@@ -1,7 +1,7 @@
 export const requestSnippets = {
 	generators: {
-		node_fetch: {
-			title: 'Node.js Fetch',
+		fetch: {
+			title: 'Fetch',
 			syntax: 'javascript',
 		},
 	},