fix: Better errors in create-app-bundle.ts [] (#2371)

* fix: Better errors in create-app-bundle.ts

* Update packages/contentful--app-scripts/src/upload/create-app-bundle.test.ts

Co-authored-by: Jared Jolton <145477871+jjolton-contentful@users.noreply.github.com>

---------

Co-authored-by: Jared Jolton <145477871+jjolton-contentful@users.noreply.github.com>

Author: michaelpineirocontentful

packages/contentful--app-scripts/package.json

@@ -25,7 +25,7 @@
     "contentful-app-scripts": "lib/bin.js"
   },
   "scripts": {
-    "prettier": "prettier **/*.js --write --ignore-path .gitignore",
+    "prettier": "prettier **/*.ts --write --ignore-path .gitignore",
     "lint": "eslint ./src",
     "lint:fix": "npm run lint -- --fix",
     "test": "ts-mocha \"./{,!(node_modules)/**/}*.test.ts\"",

packages/contentful--app-scripts/src/analytics.ts

@@ -1,4 +1,4 @@
-import { Analytics } from '@segment/analytics-node'
+import { Analytics } from '@segment/analytics-node';
 
 // Public write key scoped to data source
 const SEGMENT_WRITE_KEY = 'IzCq3j4dQlTAgLdMykRW9oBHQKUy1xMm';
@@ -10,16 +10,18 @@ const SEGMENT_WRITE_KEY = 'IzCq3j4dQlTAgLdMykRW9oBHQKUy1xMm';
  * @param {boolean} properties.ci value if --ci flag has been set
  * @returns
  */
-export function track({ command, ci }: { command: string; ci: boolean; }) {
+export function track({ command, ci }: { command: string; ci: boolean }) {
   if (process.env.DISABLE_ANALYTICS) {
     return;
   }
 
   try {
     const client = new Analytics({
       writeKey: SEGMENT_WRITE_KEY,
-    })
-    client.on('error', (err) => { /* noop */ })
+    });
+    client.on('error', (err) => {
+      /* noop */
+    });
     client.track({
       event: 'app-cli-app-scripts',
       properties: {

packages/contentful--app-scripts/src/bin.ts

@@ -48,7 +48,7 @@ async function runCommand(command: Command, options?: any) {
     .description('Upload your build folder and create an AppBundle')
     .option('--bundle-dir [directory]', 'The directory of your build folder')
     .option('--organization-id [orgId]', 'The id of your organization')
-    .option('--definition-id [defId]', 'The id of your app\'s definition')
+    .option('--definition-id [defId]', "The id of your app's definition")
     .option('--token [accessToken]', 'Your content management access token')
     .option('--comment [comment]', 'Optional comment for the created bundle')
     .option('--skip-activation', 'A Boolean flag to skip automatic activation')
@@ -62,7 +62,7 @@ async function runCommand(command: Command, options?: any) {
     .description('Mark an AppBundle as "active" for a given AppDefinition')
     .option('--bundle-id [bundleId]', 'The id of your bundle')
     .option('--organization-id [orgId]', 'The id of your organization')
-    .option('--definition-id  [defId]', 'The id of your app\'s definition')
+    .option('--definition-id  [defId]', "The id of your app's definition")
     .option('--token [accessToken]', 'Your content management access token')
     .option('--host [host]', 'Contentful subdomain to use, e.g. "api.contentful.com"')
     .action(async (options) => {
@@ -72,7 +72,7 @@ async function runCommand(command: Command, options?: any) {
   program
     .command('open-settings')
     .description('Opens the app editor for a given AppDefinition')
-    .option('--definition-id  [defId]', 'The id of your app\'s definition')
+    .option('--definition-id  [defId]', "The id of your app's definition")
     .option('--host [host]', 'Contentful subdomain to use, e.g. "api.contentful.com"')
     .action(async (options) => {
       await runCommand(open, options);
@@ -82,7 +82,7 @@ async function runCommand(command: Command, options?: any) {
     .command('bundle-cleanup')
     .description('Removes old, non-active bundles, only keeps the 50 most recent ones')
     .option('--organization-id [orgId]', 'The id of your organization')
-    .option('--definition-id  [defId]', 'The id of your app\'s definition')
+    .option('--definition-id  [defId]', "The id of your app's definition")
     .option('--token [accessToken]', 'Your content management access token')
     .option('--keep [keepAmount]', 'The amount of bundles that should remain')
     .option('--host [host]', 'Contentful subdomain to use, e.g. "api.contentful.com"')
@@ -102,7 +102,7 @@ async function runCommand(command: Command, options?: any) {
     .description(
       'Opens a picker to select the space and environment for installing the app associated with a given AppDefinition'
     )
-    .option('--definition-id  [defId]', 'The id of your app\'s definition')
+    .option('--definition-id  [defId]', "The id of your app's definition")
     .option('--host [host]', 'Contentful subdomain to use, e.g. "api.contentful.com"')
     .action(async (options) => {
       await runCommand(install, options);
@@ -133,7 +133,7 @@ async function runCommand(command: Command, options?: any) {
     .description('Upsert Action(s) for an App')
     .option('-m, --manifest-file <path>', 'Contentful app manifest file path')
     .option('--organization-id [orgId]', 'The id of your organization')
-    .option('--definition-id  [defId]', 'The id of your app\'s definition')
+    .option('--definition-id  [defId]', "The id of your app's definition")
     .option('--token [accessToken]', 'Your content management access token')
     .option('--host [host]', 'Contentful subdomain to use, e.g. "api.contentful.com"')
     .action(async (options) => {

packages/contentful--app-scripts/src/get-app-info.ts

@@ -3,19 +3,17 @@ import { selectOrganization, getOrganizationById } from './organization-api';
 import { createClient } from 'contentful-management';
 import { getManagementToken } from './get-management-token';
 
-export const getAppInfo = async (
-  {
-    organizationId,
-    definitionId,
-    token,
-    host,
-  }: {
-    organizationId?: string;
-    definitionId?: string;
-    token?: string;
-    host?: string;
-  },
-) => {
+export const getAppInfo = async ({
+  organizationId,
+  definitionId,
+  token,
+  host,
+}: {
+  organizationId?: string;
+  definitionId?: string;
+  token?: string;
+  host?: string;
+}) => {
   const accessToken = token || (await getManagementToken(host));
   const client = createClient({ accessToken, host });
 

packages/contentful--app-scripts/src/organization-api.ts

@@ -4,8 +4,8 @@ import { ORG_ID_ENV_KEY } from './constants';
 import { ClientAPI } from 'contentful-management';
 
 export interface Organization {
-  name: string,
-  value: string,
+  name: string;
+  value: string;
 }
 
 async function fetchOrganizations(client: ClientAPI): Promise<Organization[]> {

packages/contentful--app-scripts/src/types.ts

@@ -87,4 +87,4 @@ export interface GenerateFunctionSettings {
   name: string;
   example: string;
   language: Language;
-}
+}

packages/contentful--app-scripts/src/upload/create-app-bundle.test.ts

@@ -3,6 +3,7 @@ import assert from 'assert';
 import proxyquire from 'proxyquire';
 import { AppUpload, ClientAPI } from 'contentful-management';
 import { UploadSettings } from '../types';
+import { processCreateAppBundleError } from './create-app-bundle';
 
 const bundleMock = { sys: { id: 'mocked_bundle' } };
 const mockedSettings = {
@@ -116,3 +117,29 @@ describe('createAppBundleFromSettings', () => {
     assert.strictEqual(createClientArgs[0].host, 'jane.doe.com');
   });
 });
+
+describe('processCreateAppBundleError', () => {
+  it('shows creation error when status is not 403', () => {
+    const err = new Error('{"status": 404, "message": "Not found"}');
+    const returnedErr = processCreateAppBundleError(err);
+    assert.strictEqual(returnedErr, err.message);
+  })
+
+  it('shows creation error when status is 403 and reason is not entitled', () => {
+    const err = new Error('{"status": 403, "message": "Forbidden", "details": {"reasons": ["Not entitled to App Functions."]}}');
+    const returnedErr = processCreateAppBundleError(err);
+    assert.strictEqual(returnedErr, 'Your app seems to be using App Functions, which your organization is not entitled to. Remove your app function, or upgrade your account to proceed with your app upload.');
+  })
+
+  it('shows creation error when status is 403 and reason is feature flag is not enabled', () => {
+    const err = new Error('{"status": 403, "message": "Forbidden", "details": {"reasons": ["App Functions beta not enabled."]}}');
+    const returnedErr = processCreateAppBundleError(err);
+    assert.strictEqual(returnedErr, 'Your app seems to be using App Functions, which your organization has not enabled in the Preview Center. In the Contentful web app, go to the Account Menu → Preview Center → App Functions to enable and proceed with your app upload.');
+  })
+
+  it('shows creation error when status is 403 and reason is unknown', () => {
+    const err = new Error('{"status": 403, "message": "Forbidden", "details": {"reasons": ["Unknown reason."]}}');
+    const returnedErr = processCreateAppBundleError(err);
+    assert.deepEqual(returnedErr, ['Unknown reason.']);
+  })
+});

packages/contentful--app-scripts/src/upload/create-app-bundle.ts

@@ -27,19 +27,33 @@ export async function createAppBundleFromUpload(settings: UploadSettings, appUpl
       functions,
     });
   } catch (err: any) {
-    try {
-      const message = JSON.parse(err.message);
-      if (message['status'] == 403 && message.details?.reasons) {
-        showCreationError('app upload', message['details']['reasons']);
+    showCreationError('app upload', processCreateAppBundleError(err))
+  }
+  bundleSpinner.stop();
+  return appBundle;
+}
+
+export function processCreateAppBundleError(err: any) {
+  try {
+    const message = JSON.parse(err.message);
+    const reasons = message.details?.reasons;
+    if (message.status !== 403 || !reasons) {
+      return err.message
+    }
+    if (message['status'] == 403 && message.details?.reasons) {
+      if (reasons.includes('Not entitled to App Functions.')) {
+       return 'Your app seems to be using App Functions, which your organization is not entitled to. Remove your app function, or upgrade your account to proceed with your app upload.'
+      } else if (reasons.includes('App Functions beta not enabled.')) {
+        return 'Your app seems to be using App Functions, which your organization has not enabled in the Preview Center. In the Contentful web app, go to the Account Menu → Preview Center → App Functions to enable and proceed with your app upload.'
       } else {
-        showCreationError('app upload', message);
+        return reasons
       }
-    } catch (e) {
-      showCreationError('app upload', err.message);
+    } else {
+      return reasons
     }
+  } catch (e) {
+    return err.message
   }
-  bundleSpinner.stop();
-  return appBundle;
 }
 
 export async function createAppBundleFromSettings(settings: UploadSettings) {

packages/contentful--app-scripts/src/utils.ts

@@ -129,11 +129,7 @@ export function getFunctionsFromManifest(): Omit<ContentfulFunction, 'entryFile'
       return;
     }
 
-    logProgress(
-      `functions found in ${chalk.bold(
-        DEFAULT_MANIFEST_PATH
-      )}.`
-    );
+    logProgress(`functions found in ${chalk.bold(DEFAULT_MANIFEST_PATH)}.`);
 
     const items = (manifest['functions'] as ContentfulFunction[]).map((item) => {
       const allowNetworks = Array.isArray(item.allowNetworks)

packages/contentful--app-scripts/src/validate-arguments.ts

@@ -3,14 +3,15 @@ import chalk from 'chalk';
 export function validateArguments(
   requiredOptions: Record<string, string>,
   options: Record<string, any>,
-  command?: string,
+  command?: string
 ) {
   Object.entries(requiredOptions).forEach(([option, argument]) => {
     if (!options[option]) {
       console.log(
         `
   ${chalk.red('Invalid Arguments:')} the argument ${chalk.cyan(argument)} was not defined.
-        `);
+        `
+      );
       if (command) {
         console.log(`
   Run ${chalk.dim(`npx @contentful/app-scripts ${command} --help`)} to see all required arguments