@squiz/component-cli-lib 1.2.12 → 1.2.13-alpha.0

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/set/unit-test-components/test-component/1.0.3/non-existent-entry-file?something=not-used',
+        '/r/unit-test-components/test-component/1.0.3/non-existent-entry-file?_componentSet=set&something=not-used',
       );
 
       expect(response.body).toEqual({

package/src/component-dev.ts

@@ -1,12 +1,15 @@
 import {
-  ComponentPreviewWithDataService,
+  ComponentPreviewService,
   ComponentRunnerServiceWithWorkers,
+  RenderInputService,
   setupRenderRuntimeServer,
 } from '@squiz/render-runtime-lib';
 import { getLogger, LoggerOptions } from '@squiz/dx-logger-lib';
 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
@@ -22,9 +25,10 @@ export function startDevelopmentRender(
   options: { port: number; loggingFormat?: LoggerOptions['format']; noBrowser?: boolean },
 ) {
   const logger = getLogger({ name: 'component-dev', format: options.loggingFormat || 'human' });
-  const rootUrl = `http://localhost:${options.port}`;
   const dataMountPoint = path.resolve(process.cwd(), componentPath);
 
+  const rootUrl = `http://localhost:${options.port}`;
+
   const componentRunnerService = new ComponentRunnerServiceWithWorkers(
     {
       dataMountPoint,
@@ -33,23 +37,31 @@ export function startDevelopmentRender(
     },
     logger,
   );
-  const componentFunctionService = new ComponentFunctionService(rootUrl);
-  const webServer = setupRenderRuntimeServer(
-    {
-      logger,
-      componentRunnerService,
-      componentFunctionService,
-      componentPreviewService: new ComponentPreviewWithDataService(componentRunnerService, componentFunctionService, {
-        rootUrl,
-      }),
-      componentSetService: new ComponentSetServiceForLocalDev(logger),
-      manifestService: new ManifestServiceForDev(dataMountPoint, logger),
-    },
-    { rootUrl },
+  const jsonValidationService = new JsonValidationService();
+  const componentFunctionService = new ComponentFunctionService(rootUrl, jsonValidationService);
+  const componentSetService = new ComponentSetServiceForLocalDev(logger);
+  const manifestService = new ManifestServiceForDev(dataMountPoint, logger, jsonValidationService);
+  const contentItemService = undefined;
+  const renderInputService = new RenderInputService(
+    componentSetService,
+    manifestService,
+    componentFunctionService,
+    contentItemService,
+    rootUrl,
   );
+  const webServer = setupRenderRuntimeServer({
+    logger,
+    componentRunnerService,
+    componentFunctionService,
+    componentPreviewService: new ComponentPreviewService(),
+    componentSetService,
+    manifestService,
+    renderInputService,
+    apiKeyService: new DevelopmentApiKeyService(),
+  });
 
   const server = webServer.listen(options.port, () => {
-    logger.info(`Component development webserver started on port ${options.port}`);
+    logger.info(`Component development webserver started on port ${rootUrl}`);
   });
 
   if (options?.noBrowser !== true) {

package/src/integration-tests/__components__/cmp-format-string/main.js

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

package/src/integration-tests/__components__/cmp-format-string/manifest.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "http://localhost:3000/schemas/v1.json#",
+
+  "name": "cmp-format-string",
+  "version": "1.0.0",
+  "mainFunction": "main",
+  "displayName": "some-display-name",
+  "namespace": "fixtures",
+  "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-static-file-test/main.js

@@ -1,10 +1,6 @@
-/**
- * @param {object} input
- * @param {ComponentInfo} info
- */
 module.exports = async function (input, info) {
   return (
     `<div>Input: ${input.something}</div>` +
-    `<div>${info.ctx.componentName} ${info.ctx.version} ${info.ctx.getStaticResourceUrl('birthday-cake.png')}</div>`
+    `<div>${info.componentName} ${info.version} ${info.ctx.getStaticResourceUrl('birthday-cake.png')}</div>`
   );
 };

package/src/integration-tests/__components__/invalid-manifest/main.js

@@ -1,7 +1,3 @@
-/**
- * @param {object} input
- * @param {ComponentInfo} info
- */
 module.exports = async function (input, info) {
   return '<div>test</div>';
 };

package/src/integration-tests/__components__/invalid-upload/main.js

@@ -1,7 +1,3 @@
-/**
- * @param {object} input
- * @param {ComponentInfo} info
- */
 module.exports = async function (input, info) {
   return '<div>test</div>';
 };

package/src/integration-tests/helper.ts

@@ -8,6 +8,7 @@ import { ComponentSetWebModelForCreate } 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';
 
 config();
 
@@ -27,22 +28,75 @@ const configObj: Config = {
   ci_buildBranch: parseEnvVarForVar('CI_COMMIT_REF_NAME'),
 };
 
+if (!configObj.ci_buildVersion) {
+  configObj.ci_buildVersion = execSync('git rev-parse --short HEAD', { encoding: 'utf-8' }).trim();
+}
+
+if (!configObj.ci_buildBranch) {
+  configObj.ci_buildBranch = execSync('git branch --show-current', { encoding: 'utf-8' }).trim();
+}
+
 export default configObj;
 
+const DXP_SERVICE_NAME = 'dxpComponents';
+const ALL_PERMISSIONS_ROLE = {
+  privileges: [
+    'COMPONENT_DEPLOY',
+    'COMPONENT_DELETE',
+    'COMPONENT_READ',
+    'COMPONENT_SET_RULES_READ',
+    'COMPONENT_SET_RULES_WRITE',
+
+    'COMPONENT_SET_READ',
+    'COMPONENT_SET_WRITE',
+
+    'COMPONENT_SET_ENVIRONMENT_READ',
+    'COMPONENT_SET_ENVIRONMENT_WRITE',
+  ],
+};
+
+const validToken = {
+  organisationId: 'aa',
+  permission: '',
+  tenant: 'zz',
+  tenantId: 'zz',
+  userId: 'zz',
+
+  service: {
+    [DXP_SERVICE_NAME]: {
+      privileges: ALL_PERMISSIONS_ROLE.privileges,
+    },
+  },
+};
+
+export const authToken = `Bearer xxx.${Buffer.from(JSON.stringify(validToken)).toString('base64')}.zzz`;
+
 export const managementService = axios.create({
   baseURL: configObj.managementServiceUrl + '/v1',
+  headers: {
+    authorization: authToken,
+  },
 });
 
 export const managementServiceRoot = axios.create({
   baseURL: configObj.managementServiceUrl,
+  headers: {
+    authorization: authToken,
+  },
 });
 
 export const renderService = axios.create({
   baseURL: configObj.renderServiceUrl,
+  headers: {
+    authorization: authToken,
+  },
 });
 
 export const contentService = axios.create({
   baseURL: configObj.contentServiceUrl,
+  headers: {
+    authorization: authToken,
+  },
 });
 
 export const ci_buildVersion = configObj.ci_buildVersion;

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

@@ -74,7 +74,7 @@ describe('uploading a component', () => {
         testFilesDir,
       );
       expect(mockConsoleError.mock.calls[0][0]).toEqual(
-        color.red('failed validation: /name pattern must match pattern "^[a-zA-Z0-9_\\-]+$"'),
+        color.red('failed validation: /name: pattern must match pattern "^[a-zA-Z0-9_\\-]+$"'),
       );
     });
 
@@ -97,6 +97,65 @@ describe('uploading a component', () => {
     });
   });
 
+  describe('Deploy a basic component having a input with multiline format', () => {
+    beforeAll(async () => {
+      await deleteComponentSet(webPath);
+      await deleteContentItem(contentItemId);
+      for (const componentName of getTestComponents()) {
+        try {
+          await managementService.delete(`/component/${componentName}`);
+        } catch {
+          // no op
+        }
+      }
+    });
+
+    beforeEach(() => {
+      console.error = mockConsoleError;
+      console.log = mockConsoleLog;
+    });
+
+    afterEach(() => {
+      console.error = orgConsoleError;
+    });
+
+    it('Should upload the component and return a valid url to preview', async () => {
+      const componentPath = path.join(__dirname, '/__components__/cmp-format-string');
+      await uploadComponentFolder(managementServiceRoot, configObj.managementServiceUrl, componentPath, testFilesDir);
+      const uploadedComponent = '<a href="/r/fixtures/cmp-format-string/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 a component with multi-line format string input', async () => {
+      const componentSet: ComponentSetWebModelForCreate = {
+        webPath,
+        displayName: 'some-display-name',
+        description: 'Set description',
+        headers: {},
+        environmentVariables: {},
+        components: {
+          'fixtures/cmp-format-string': [{ environmentVariables: {}, version: '1.0.0' }],
+        },
+        componentVersionRules: {},
+      };
+      await addComponentSet(componentSet);
+      await addContentItem({
+        id: contentItemId,
+        schemaName: 'fixtures/cmp-format-string/1.0.0/main',
+        content: {
+          text: 'from-content-item-service',
+        },
+      });
+      const response = await renderService.get(
+        `/r/fixtures/cmp-format-string/1.0.0/?_contentItemId=${contentItemId}&_componentSet=${webPath}`,
+      );
+      expect(response.status).toEqual(200);
+      expect(response.data).toEqual(`<div>Input: from-content-item-service</div>`);
+    });
+  });
+
   describe('Deploy basic component having a static file', () => {
     // component to deploy for this test
     const componentPath = path.join(__dirname, '/__components__/cmp-static-file-test');
@@ -131,7 +190,7 @@ describe('uploading a component', () => {
         testFilesDir,
       );
 
-      const uploadedComponent = '<a href="/preview/smoke-test-components/cmp-static-file-test/1.0.0">1.0.0</a>';
+      const uploadedComponent = '<a href="/r/smoke-test-components/cmp-static-file-test/1.0.0">1.0.0</a>';
       const get = await supertest(configObj.renderServiceUrl).get('/');
       expect(get.status).toEqual(200);
       expect((get as any)?.res?.text).toContain(uploadedComponent);
@@ -172,14 +231,14 @@ describe('uploading a component', () => {
       await addComponentSet(componentSet);
 
       const response = await renderService.get(
-        `/r/${webPath}/smoke-test-components/cmp-static-file-test/1.0.0/?something=hello`,
+        `/r/smoke-test-components/cmp-static-file-test/1.0.0/?_componentSet=${webPath}&something=hello`,
       );
       expect(response.status).toEqual(200);
       expect(response.data).toEqual(
         [
           '<div>Input: hello</div>',
           '<div>smoke-test-components/cmp-static-file-test 1.0.0 ',
-          `${configObj.renderServiceUrl}/s/${webPath}/smoke-test-components/cmp-static-file-test/1.0.0/birthday-cake.png</div>`,
+          `${configObj.renderServiceUrl}/s/smoke-test-components/cmp-static-file-test/1.0.0/birthday-cake.png?_componentSet=${webPath}</div>`,
         ].join(''),
       );
     });
@@ -207,17 +266,19 @@ describe('uploading a component', () => {
         },
       });
 
-      console.log(`/r/${webPath}/smoke-test-components/cmp-static-file-test/1.0.0/?_contentItemId=` + contentItemId);
+      console.log(
+        `/r/smoke-test-components/cmp-static-file-test/1.0.0/?_componentSet=${webPath}&_contentItemId=${contentItemId}`,
+      );
 
       const response = await renderService.get(
-        `/r/${webPath}/smoke-test-components/cmp-static-file-test/1.0.0/?_contentItemId=` + contentItemId,
+        `/r/smoke-test-components/cmp-static-file-test/1.0.0/?_componentSet=${webPath}&_contentItemId=${contentItemId}`,
       );
       expect(response.status).toEqual(200);
       expect(response.data).toEqual(
         [
           '<div>Input: from-content-item-service</div>',
           '<div>smoke-test-components/cmp-static-file-test 1.0.0 ',
-          `${configObj.renderServiceUrl}/s/${webPath}/smoke-test-components/cmp-static-file-test/1.0.0/birthday-cake.png</div>`,
+          `${configObj.renderServiceUrl}/s/smoke-test-components/cmp-static-file-test/1.0.0/birthday-cake.png?_componentSet=${webPath}</div>`,
         ].join(''),
       );
     });

package/src/upload-component-folder.ts

@@ -7,6 +7,7 @@ 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' });
 
@@ -57,7 +58,7 @@ export async function uploadComponentFolder(
 }
 
 async function preUploadChecks(apiClient: AxiosInstance, managementURL: string, folderPath: string) {
-  const service = new ManifestServiceForDev(folderPath, logger);
+  const service = new ManifestServiceForDev(folderPath, logger, new JsonValidationService());
   const manifestPath = path.join(folderPath, `manifest.json`);
 
   const result = await service.readManifest(manifestPath);

package/tsconfig.json

@@ -11,9 +11,10 @@
 
   "references": [
     { "path": "../virus-scanner-lib" },
-    { "path": "../component-lib" },
     { "path": "../render-runtime-lib" },
-    { "path": "../dx-logger-lib" }
+    { "path": "../component-lib" },
+    { "path": "../dx-logger-lib" },
+    { "path": "../dx-json-schema-lib" }
   ],
 
   "include": ["src/**/*.ts", "src/**/*.json"],