Use native FormData when uploading to Phrase (#254)

.changeset/cuddly-fans-drum.md

@@ -0,0 +1,5 @@
+---
+'@vocab/cli': patch
+---
+
+Remove unused dependency on `form-data` npm package

.changeset/strange-candles-develop.md

@@ -0,0 +1,9 @@
+---
+'@vocab/phrase': patch
+---
+
+Fix forbidden errors when pushing translations
+
+Migrate from `form-data` npm package to the native [Node FormData class](https://nodejs.org/api/globals.html#class-formdata) to ensure compatibility with the earlier move to native Fetch.
+
+Mixing the two was causing some consumers to receive 503 Forbidden errors when pushing translations to Phrase.

.gitignore

@@ -16,3 +16,5 @@ package-lock.json
 yarn-error.log
 yarn.lock
 .eslintcache
+
+.env

fixtures/phrase/package.json

@@ -3,5 +3,13 @@
   "description": "A playground reading and writing files for Phrase tests",
   "version": "1.0.0",
   "author": "SEEK",
-  "private": true
+  "private": true,
+  "scripts": {
+    "push": "dotenv vocab push",
+    "pull": "dotenv vocab pull"
+  },
+  "dependencies": {
+    "@vocab/cli": "workspace:*",
+    "dotenv-cli": "^7.2.1"
+  }
 }

fixtures/phrase/vocab.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  devLanguage: 'en',
+  languages: [{ name: 'en' }, { name: 'fr' }],
+};

package.json

@@ -34,7 +34,9 @@
     "copy-readme-to-packages": "tsx scripts/copy-readme-to-packages",
     "start-fixture": "tsx test-helpers/src/start-fixture",
     "run-server-fixture": "tsx test-helpers/src/run-server-fixture",
-    "compile-fixtures": "pnpm --filter @vocab-fixtures/* compile"
+    "compile-fixtures": "pnpm --filter @vocab-fixtures/* compile",
+    "fixture:phrase:push": "pnpm run --filter @vocab-fixtures/phrase push",
+    "fixture:phrase:pull": "pnpm run --filter @vocab-fixtures/phrase pull"
   },
   "dependencies": {
     "@babel/core": "^7.12.0",

packages/cli/package.json

@@ -25,7 +25,6 @@
     "@vocab/phrase": "workspace:^",
     "env-ci": "^7.3.0",
     "fast-glob": "^3.2.4",
-    "form-data": "^4.0.0",
     "yargs": "^17.7.2"
   },
   "devDependencies": {

packages/phrase/package.json

@@ -17,7 +17,6 @@
     "@vocab/core": "workspace:^",
     "csv-stringify": "^6.2.3",
     "debug": "^4.3.1",
-    "form-data": "^4.0.0",
     "picocolors": "^1.0.0"
   },
   "devDependencies": {

packages/phrase/src/phrase-api.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-console */
-import FormData from 'form-data';
 import type { TranslationsByLanguage } from '@vocab/core';
 import { log, trace } from './logger';
 import { translationsToCsv } from './csv';
@@ -129,22 +128,24 @@ export async function pushTranslations(
   for (const [language, csvFileString] of Object.entries(csvFileStrings)) {
     const formData = new FormData();
 
-    const fileContents = Buffer.from(csvFileString);
-    formData.append('file', fileContents, {
-      contentType: 'text/csv',
-      filename: `${language}.translations.csv`,
-    });
+    formData.append(
+      'file',
+      new Blob([csvFileString], {
+        type: 'text/csv',
+      }),
+      `${language}.translations.csv`,
+    );
 
     formData.append('file_format', 'csv');
     formData.append('branch', branch);
     formData.append('update_translations', 'true');
     formData.append('update_descriptions', 'true');
 
-    formData.append(`locale_mapping[${language}]`, messageIndex);
+    formData.append(`locale_mapping[${language}]`, messageIndex.toString());
 
-    formData.append('format_options[key_index]', keyIndex);
-    formData.append('format_options[comment_index]', commentIndex);
-    formData.append('format_options[tag_column]', tagColumn);
+    formData.append('format_options[key_index]', keyIndex.toString());
+    formData.append('format_options[comment_index]', commentIndex.toString());
+    formData.append('format_options[tag_column]', tagColumn.toString());
     formData.append('format_options[enable_pluralization]', 'false');
 
     log(`Uploading translations for language ${language}`);
@@ -160,7 +161,7 @@ export async function pushTranslations(
       | undefined
     >(`uploads`, {
       method: 'POST',
-      body: formData.toString(),
+      body: formData,
     });
 
     trace('Upload result:\n', result);