@squiz/component-cli-lib 1.21.1-alpha.7 → 1.22.0

package/lib/integration-tests/helper.d.ts

@@ -1,4 +1,4 @@
-import { ComponentSetWebModelForCreate } from '@squiz/component-lib';
+import { ComponentSetWebModelForCreate, Manifest } from '@squiz/component-lib';
 import { ContentApi } from '@squiz/component-web-api-lib';
 interface Config {
     managementServiceUrl: string;
@@ -23,3 +23,5 @@ export declare function deleteComponentSet(webPath: string): Promise<void>;
 export declare function addComponentSet(componentSet: ComponentSetWebModelForCreate): Promise<void>;
 export declare function addContentItem(contentItem: ContentApi.ContentItemWebModel): Promise<void>;
 export declare function deleteContentItem(contentItemId: string): Promise<void>;
+export declare function deleteComponent(manifest: Manifest): Promise<void>;
+export declare function deleteComponents(manifests: Manifest[]): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/component-cli-lib",
-  "version": "1.21.1-alpha.7",
+  "version": "1.22.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -13,16 +13,16 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@squiz/component-lib": "1.21.1-alpha.7",
-    "@squiz/component-web-api-lib": "1.21.1-alpha.7",
-    "@squiz/dx-common-lib": "1.21.1-alpha.7",
-    "@squiz/dx-json-schema-lib": "1.21.1-alpha.7",
-    "@squiz/dx-logger-lib": "1.21.1-alpha.7",
-    "@squiz/virus-scanner-lib": "1.21.1-alpha.7",
+    "@squiz/component-lib": "1.22.0",
+    "@squiz/component-web-api-lib": "1.22.0",
+    "@squiz/dx-common-lib": "1.22.0",
+    "@squiz/dx-json-schema-lib": "1.22.0",
+    "@squiz/dx-logger-lib": "1.22.0",
+    "@squiz/virus-scanner-lib": "1.22.0",
     "@types/cli-color": "2.0.2",
     "@types/express": "4.17.17",
     "@types/jest": "28.1.8",
-    "@types/node": "17.0.27",
+    "@types/node": "18.15.2",
     "@types/supertest": "2.0.12",
     "dotenv": "16.0.3",
     "jest": "29.4.1",
@@ -32,12 +32,12 @@
     "typescript": "4.9.4"
   },
   "dependencies": {
-    "@squiz/render-runtime-lib": "1.21.1-alpha.7",
+    "@squiz/render-runtime-lib": "1.22.0",
     "archiver": "5.3.1",
     "axios": "1.3.2",
     "cli-color": "^2.0.2",
     "open": "^8.4.0",
     "supertest": "^6.2.3"
   },
-  "gitHead": "3473320147ec8528a9b52c791d28ef3ec0745c97"
+  "gitHead": "c683f01b30c8b35cc23c5bd7426778a94467baec"
 }

package/src/component-dev.integration.spec.ts

@@ -21,7 +21,7 @@ describe('component-dev', () => {
 
     it('should fail validation when requesting a function with a missing entry file', async () => {
       const response = await request.get(
-        '/r/unit-test-components/test-component/1.0.3/non-existent-entry-file?_componentSet=set&something=not-used',
+        '/r/unit-test-components/test-component/1.0.3/main?_componentSet=set&something=not-used',
       );
 
       expect(response.body).toEqual({

package/src/component-dev.ts

@@ -9,7 +9,6 @@ import path from 'path';
 import { ComponentFunctionService, ComponentSetServiceForLocalDev, ManifestServiceForDev } from '@squiz/component-lib';
 import open from 'open';
 import { DevelopmentApiKeyService } from '@squiz/dx-common-lib';
-import { JsonValidationService } from '@squiz/dx-json-schema-lib';
 
 /**
  * startDevelopmentRender starts a dev-mode render stack for any
@@ -37,14 +36,14 @@ export function startDevelopmentRender(
       dataMountPoint,
       shouldCacheResponses: false,
       workerTimeout: 5_000,
-      numOfWorkers: 2,
+      minWorkers: 2,
+      maxWorkers: 2,
     },
     logger,
   );
-  const jsonValidationService = new JsonValidationService();
-  const componentFunctionService = new ComponentFunctionService(rootUrl, jsonValidationService);
+  const componentFunctionService = new ComponentFunctionService(rootUrl);
   const componentSetService = new ComponentSetServiceForLocalDev(logger);
-  const manifestService = new ManifestServiceForDev(dataMountPoint, logger, jsonValidationService);
+  const manifestService = new ManifestServiceForDev(dataMountPoint, logger);
   const contentItemService = undefined;
   const renderInputService = new RenderInputService(
     componentSetService,

package/src/integration-tests/__components__/cmp-no-api-key/main.js

@@ -0,0 +1,25 @@
+/**
+ * @param {object} input
+ * @param {ComponentInfo} info
+ */
+module.exports = async function (input, info) {
+  function hasDxpApiKey(obj) {
+    if (typeof obj === 'object' && obj !== null) {
+      if (obj.hasOwnProperty('dxpApiKey')) {
+        return true;
+      }
+      for (const prop in obj) {
+        if (hasDxpApiKey(obj[prop])) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  if (hasDxpApiKey(input) || hasDxpApiKey(info)) {
+    return 'true';
+  }
+
+  return 'false';
+};

package/src/integration-tests/__components__/cmp-no-api-key/manifest.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "http://localhost:3000/schemas/v1.json#",
+
+  "name": "cmp-no-api-key",
+  "version": "1.0.0",
+  "mainFunction": "main",
+  "displayName": "some-display-name",
+  "namespace": "smoke-test-components",
+  "description": "some-description",
+  "functions": [
+    {
+      "name": "main",
+      "entry": "main.js",
+      "input": {
+        "type": "object",
+        "properties": {
+          "text": {
+            "type": "string",
+            "format": "multi-line"
+          }
+        },
+        "required": ["text"]
+      },
+      "output": { "responseType": "html" }
+    }
+  ],
+  "previews": {
+    "test-preview": {
+      "functionData": {
+        "main": {
+          "inputData": {
+            "type": "inline",
+            "value": {
+              "text": "this is a test"
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/integration-tests/__components__/cmp-property-order/main.js

@@ -0,0 +1,6 @@
+/**
+ * @param {object} input
+ */
+module.exports = async function (input) {
+  return `<div>Input: ${JSON.stringify(input)}</div>`;
+};

package/src/integration-tests/__components__/cmp-property-order/manifest.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "http://localhost:3000/schemas/v1.json#",
+
+  "name": "cmp-property-order",
+  "version": "1.0.0",
+  "mainFunction": "main",
+  "displayName": "some-display-name",
+  "namespace": "smoke-test-components",
+  "description": "some-description",
+  "functions": [
+    {
+      "name": "main",
+      "entry": "main.js",
+      "input": {
+        "type": "object",
+        "properties": {
+          "input1": {
+            "type": "string"
+          },
+          "333": {
+            "type": "string"
+          },
+          "input333": {
+            "type": "string"
+          },
+          "\"": {
+            "type": "string"
+          },
+          "~": {
+            "type": "string"
+          },
+          "": {
+            "type": "string"
+          },
+          "$": {
+            "type": "string"
+          },
+          "111": {
+            "type": "string"
+          },
+          "input22": {
+            "type": "string"
+          },
+          "222": {
+            "type": "string"
+          },
+          "*": {
+            "type": "string"
+          },
+          "null": {
+            "type": "null",
+            "default": null
+          }
+        },
+        "required": []
+      },
+      "output": { "responseType": "html" }
+    }
+  ]
+}

package/src/integration-tests/__components__/matrix-asset-uri/manifest.json

@@ -32,7 +32,7 @@
           "inputData": {
             "type": "inline",
             "value": {
-              "text": "matrix://canary.uat.matrix.squiz.cloud/abc123"
+              "text": "matrix-asset://canary.uat.matrix.squiz.cloud/abc123"
             }
           }
         }

package/src/integration-tests/helper.ts

@@ -1,15 +1,14 @@
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
 import path from 'path';
 
 import fsp from 'fs/promises';
 import { randomBytes } from 'crypto';
-import { ComponentSetWebModelForCreate, ManifestServiceForDev } from '@squiz/component-lib';
+import { ComponentSetWebModelForCreate, Manifest, ManifestServiceForDev } from '@squiz/component-lib';
 import { parseEnvVarForVar } from '@squiz/dx-common-lib';
 import { ContentApi } from '@squiz/component-web-api-lib';
 import { config } from 'dotenv';
 import { execSync } from 'child_process';
 import { getLogger } from '@squiz/dx-logger-lib';
-import { JsonValidationService } from '@squiz/dx-json-schema-lib';
 
 config();
 
@@ -112,11 +111,7 @@ export const ci_buildBranch = configObj.ci_buildBranch;
 
 export async function getTestComponents() {
   const componentsDir = path.join(__dirname, '/__components__/');
-  const manifestService = new ManifestServiceForDev(
-    componentsDir,
-    getLogger({ name: 'getTestComponents' }),
-    new JsonValidationService(),
-  );
+  const manifestService = new ManifestServiceForDev(componentsDir, getLogger({ name: 'getTestComponents' }));
   return await manifestService.listAllComponentManifests();
 }
 export async function createFile(filePath: string, sizeInMB: number) {
@@ -159,3 +154,20 @@ export async function deleteContentItem(contentItemId: string) {
     //no ops
   }
 }
+
+export async function deleteComponent(manifest: Manifest) {
+  try {
+    await managementService.delete(`/component/${manifest.getName()}`);
+    await contentService.delete(
+      `/content-schema/${manifest.getName()}/${manifest.getVersion()}/${manifest.getComponentFunctionByName().name}`,
+    );
+  } catch (error) {
+    if ((error as AxiosError).response?.status !== 404) {
+      throw error;
+    }
+  }
+}
+
+export async function deleteComponents(manifests: Manifest[]) {
+  await Promise.all(manifests.map((manifest) => deleteComponent(manifest)));
+}

package/src/integration-tests/upload-and-render-component.integration.spec.ts

@@ -1,16 +1,16 @@
 import { uploadComponentFolder } from '../index';
 import configObj, {
-  renderService,
   managementService,
+  renderService,
   getTestComponents,
   createFile,
+  deleteComponents,
   removeFile,
   addComponentSet,
   deleteComponentSet,
   addContentItem,
   deleteContentItem,
   managementServiceRoot,
-  contentService,
 } from './helper';
 
 import path from 'path';
@@ -19,7 +19,6 @@ import { logger } from '../upload-component-folder';
 import { ComponentSetWebModelForCreate } from '@squiz/component-lib';
 import fsp from 'fs/promises';
 import { randomUUID } from 'crypto';
-import { AxiosError } from 'axios';
 
 const webPath = 'set-' + randomUUID();
 const contentItemId = randomUUID();
@@ -36,18 +35,8 @@ describe('uploading a component', () => {
     // clean up the component added by the test
     await deleteComponentSet(webPath);
     await deleteContentItem(contentItemId);
-
-    for (const manifest of await getTestComponents()) {
-      await managementService.delete(`/component/${manifest.getName()}`).catch(() => null);
-      await contentService
-        .delete(
-          `/content-schema/${manifest.getName()}/${manifest.getVersion()}/${
-            manifest.getComponentFunctionByName().name
-          }`,
-        )
-        .catch(() => null);
-    }
-    // clean up the test componnet files
+    await deleteComponents(await getTestComponents());
+    // clean up the test component files
     await fsp.rm(testFilesDir, { force: true, recursive: true });
     logger.silent = false;
   });
@@ -102,22 +91,9 @@ describe('uploading a component', () => {
 
   describe('Deploy a basic component having a input with multiline format', () => {
     beforeAll(async () => {
-      try {
-        await deleteComponentSet(webPath);
-        await deleteContentItem(contentItemId);
-        for (const manifest of await getTestComponents()) {
-          await managementService.delete(`/component/${manifest.getName()}`);
-          await contentService.delete(
-            `/content-schema/${manifest.getName()}/${manifest.getVersion()}/${
-              manifest.getComponentFunctionByName().name
-            }`,
-          );
-        }
-      } catch (error: unknown) {
-        if ((error as AxiosError).response?.status !== 404) {
-          throw error;
-        }
-      }
+      await deleteComponentSet(webPath);
+      await deleteContentItem(contentItemId);
+      await deleteComponents(await getTestComponents());
     });
 
     it('Should upload the component and return a valid url to preview', async () => {
@@ -160,26 +136,27 @@ describe('uploading a component', () => {
       expect(response.status).toEqual(200);
       expect(response.data).toEqual(`<div>Input: from-content-item-service</div>`);
     });
+
+    it('Should return relevant error if upload fails at the server', async () => {
+      // delete the previously uploaded component
+      await managementService.delete(`/component/smoke-test-components/cmp-format-string`);
+
+      // trying uploading the component again should fail at the server
+      // due to content item schema already exist matching the component name/version
+      const componentPath = path.join(__dirname, '/__components__/cmp-format-string');
+      await expect(
+        uploadComponentFolder(managementServiceRoot, configObj.managementServiceUrl, componentPath, testFilesDir),
+      ).rejects.toThrowErrorMatchingInlineSnapshot(
+        `"Unexpected response code 500. Error occurred when creating content schema: Content schema smoke-test-components/cmp-format-string/1.0.0/main already exists"`,
+      );
+    });
   });
 
   describe('Deploy a basic component with input format matrix-asset-uri', () => {
     beforeAll(async () => {
-      try {
-        await deleteComponentSet(webPath);
-        await deleteContentItem(contentItemId);
-        for (const manifest of await getTestComponents()) {
-          await managementService.delete(`/component/${manifest.getName()}`);
-          await contentService.delete(
-            `/content-schema/${manifest.getName()}/${manifest.getVersion()}/${
-              manifest.getComponentFunctionByName().name
-            }`,
-          );
-        }
-      } catch (error) {
-        if ((error as AxiosError).response?.status !== 404) {
-          throw error;
-        }
-      }
+      await deleteComponentSet(webPath);
+      await deleteContentItem(contentItemId);
+      await deleteComponents(await getTestComponents());
     });
     it('Should upload the component and return a valid url to preview', async () => {
       const componentPath = path.join(__dirname, '/__components__/matrix-asset-uri');
@@ -231,22 +208,9 @@ describe('uploading a component', () => {
     const componentPath = path.join(__dirname, '/__components__/cmp-static-file-test');
 
     beforeAll(async () => {
-      try {
-        await deleteComponentSet(webPath);
-        await deleteContentItem(contentItemId);
-        for (const manifest of await getTestComponents()) {
-          await managementService.delete(`/component/${manifest.getName()}`);
-          await contentService.delete(
-            `/content-schema/${manifest.getName()}/${manifest.getVersion()}/${
-              manifest.getComponentFunctionByName().name
-            }`,
-          );
-        }
-      } catch (error) {
-        if ((error as AxiosError).response?.status !== 404) {
-          throw error;
-        }
-      }
+      await deleteComponentSet(webPath);
+      await deleteContentItem(contentItemId);
+      await deleteComponents(await getTestComponents());
     });
 
     it('Should upload the component and return a valid url to preview', async () => {
@@ -351,4 +315,109 @@ describe('uploading a component', () => {
       );
     });
   });
+
+  describe('Deploy a basic component using and not expose the x-api-key', () => {
+    // component to deploy for this test
+    const componentPath = path.join(__dirname, '/__components__/cmp-no-api-key');
+
+    beforeAll(async () => {
+      await deleteComponentSet(webPath);
+      await deleteContentItem(contentItemId);
+      await deleteComponents(await getTestComponents());
+    });
+
+    it('Should upload the component and return a valid url', async () => {
+      await uploadComponentFolder(
+        managementServiceRoot,
+        configObj.managementServiceUrl,
+        componentPath,
+
+        testFilesDir,
+      );
+
+      const uploadedComponent =
+        '<a href="/r/smoke-test-components/cmp-no-api-key/1.0.0?_previewKey=test-preview">1.0.0</a>';
+      const get = await supertest(configObj.renderServiceUrl).get('/');
+      expect(get.status).toEqual(200);
+      expect((get as any)?.res?.text).toContain(uploadedComponent);
+    });
+
+    it('Should render component', async () => {
+      const componentSet: ComponentSetWebModelForCreate = {
+        webPath,
+        displayName: 'some-display-name',
+        description: 'Set description',
+        headers: {},
+        environmentVariables: {},
+        components: {},
+        componentVersionRules: {
+          'smoke-test-components/cmp-no-api-key': {
+            renderableVersionPattern: '1.0.0',
+            editableVersions: [],
+            excludedVersions: [],
+          },
+        },
+      };
+
+      await addComponentSet(componentSet);
+
+      const response = await renderService.get(
+        `/r/smoke-test-components/cmp-no-api-key/1.0.0/?_componentSet=${webPath}&text=hello`,
+        { headers: { 'x-api-key': 'this is key' } },
+      );
+      expect(response.status).toEqual(200);
+      expect(response.data).toEqual(false);
+    });
+  });
+
+  describe('Deploy component with properties defined in a specific order', () => {
+    // component to deploy for this test
+    const componentPath = path.join(__dirname, '/__components__/cmp-property-order');
+
+    beforeAll(async () => {
+      await deleteComponentSet(webPath);
+      await deleteContentItem(contentItemId);
+      await deleteComponents(await getTestComponents());
+
+      await uploadComponentFolder(managementServiceRoot, configObj.managementServiceUrl, componentPath, testFilesDir);
+    });
+
+    it('Should preserve input field order when uploading schema to content store', async () => {
+      const response = await supertest(configObj.contentServiceUrl).get(
+        '/content-schema/smoke-test-components/cmp-property-order/1.0.0/main',
+      );
+
+      // Relates to DEVX-891, property order is preserved so that we can reliably draw a UI from it.
+      //
+      // The sequence here is important and should follow the rules defined here:
+      //  * https://tc39.es/ecma262/#sec-ordinaryownpropertykeys
+      //  * https://stackoverflow.com/a/38218582
+      //
+      // Per EMCA-262 numeric keys appear first in ascending order but all other keys should appear
+      // in the order they were originally defined, they should not be affected by them being stored in
+      // a JSONB DB column or anything else.
+      //
+      // Asserting on the encoded contents of the response to avoid any decoding in the test having
+      // a potential influence on the outcome.
+      const expectedProperties =
+        '"111":{"type":"string"},' +
+        '"222":{"type":"string"},' +
+        '"333":{"type":"string"},' +
+        '"input1":{"type":"string"},' +
+        '"input333":{"type":"string"},' +
+        '"\\"":{"type":"string"},' +
+        '"~":{"type":"string"},' +
+        '"":{"type":"string"},' +
+        '"$":{"type":"string"},' +
+        '"input22":{"type":"string"},' +
+        '"*":{"type":"string"},' +
+        '"null":{"type":"null","default":null}';
+
+      expect(response.status).toEqual(200);
+      expect(response.text).toEqual(
+        `{"name":"smoke-test-components/cmp-property-order/1.0.0/main",` +
+          `"schema":{"type":"object","properties":{${expectedProperties}},"required":[]},"contentSchemaType":"component"}`,
+      );
+    });
+  });
 });

package/src/upload-component-folder.ts

@@ -7,7 +7,6 @@ import path from 'path';
 import { AxiosResponse, AxiosError, AxiosInstance } from 'axios';
 import color from 'cli-color';
 import { getLogger, Logger } from '@squiz/dx-logger-lib';
-import { JsonValidationService } from '@squiz/dx-json-schema-lib';
 
 export const logger: Logger = getLogger({ name: 'upload-component', format: 'human' });
 
@@ -44,7 +43,8 @@ export async function uploadComponentFolder(
       logger.info(`deployment id: ${initialUpload.id} status: ${color.green('success')}`);
       logger.info(`uploaded location: ${result.accessLink}`);
     } else {
-      logger.error('failed for an unknown reason', color.red(result));
+      const message = result?.message ?? 'unknown';
+      logger.error(`failed due an unexpected reason: ${message}`);
     }
   } catch (e) {
     await fsp.rm(tmpDir, { force: true, recursive: true });
@@ -54,7 +54,7 @@ export async function uploadComponentFolder(
 }
 
 async function preUploadChecks(apiClient: AxiosInstance, managementURL: string, folderPath: string) {
-  const service = new ManifestServiceForDev(folderPath, logger, new JsonValidationService());
+  const service = new ManifestServiceForDev(folderPath, logger);
   const manifestPath = path.join(folderPath, `manifest.json`);
 
   const result = await service.readManifest(manifestPath);
@@ -136,10 +136,11 @@ function handleError(error: any): Error {
   const newError = new Error(errorMessage || 'An error has occurred');
 
   if (isAxiosError(error)) {
+    const errorCode = response.status ?? 'unknown';
     if (response?.data?.message) {
-      newError.message = `${errorMessage} (code: ${response.status})`;
+      newError.message = `Unexpected response code ${errorCode}. ${response.data.message}`.trim();
     } else {
-      newError.message = `Unexpected response code ${response.status}. ${errorMessage}`.trim();
+      newError.message = `${errorMessage} (code: ${errorCode})`;
     }
   }