Release/v6.1.1 (aws-solutions#443)

* Update CHANGELOG.md

Correct release date

* Remove unicode changes from backend, fix unicode support in demo-ui

* Use stack name in Service Catalog Application name for multiple cfn stack deployments (aws-solutions#438)

* Add stack name to service catalog application

This allows multiple stack deployments in the same account, region

* Update cdk snapshot

* Add changelog entry

* Prepend AppRegistry application name with static name

Stack name is used in naming AppRegistry application and attribute group; which must not begin with aws.
The change adds support for stack names starting with aws-*

* Update to v6.1.1, set release date, include PR link

---------

Co-authored-by: Doug Toppin <[email protected]>
Co-authored-by: garvit singh <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -5,13 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [6.1.1] - 2022-01-26
+## [6.1.1] - 2023-02-09
 
 ### Added
 
 - package-lock.json for all modules [#426](https://github.com/aws-solutions/serverless-image-handler/pull/426)
 - github workflows for running unit test, eslint and prettier formatting, cdk nag, security scans [#402](https://github.com/aws-solutions/serverless-image-handler/pull/402)
 - demo-ui unicode support [#416](https://github.com/aws-solutions/serverless-image-handler/issues/416)
+- support for multiple cloudformation stack deployments in the same region [#438](https://github.com/aws-solutions/serverless-image-handler/pull/438)
 
 ### Changed
 

source/constructs/lib/common-resources/common-resources-construct.ts

@@ -93,7 +93,7 @@ export class CommonResources extends Construct {
     const applicationType = "AWS-Solutions";
 
     const application = new appreg.Application(stack, "AppRegistry", {
-      applicationName: Fn.join("-", [props.applicationName, Aws.REGION, Aws.ACCOUNT_ID]),
+      applicationName: Fn.join("-", ["AppRegistry", Aws.STACK_NAME, Aws.REGION, Aws.ACCOUNT_ID]),
       description: `Service Catalog application to track and manage all your resources for the solution ${props.applicationName}`,
     });
     application.associateStack(stack);
@@ -104,7 +104,7 @@ export class CommonResources extends Construct {
     Tags.of(application).add("Solutions:ApplicationType", applicationType);
 
     const attributeGroup = new appreg.AttributeGroup(stack, "DefaultApplicationAttributes", {
-      attributeGroupName: Aws.STACK_NAME,
+      attributeGroupName: `AppRegistry-${Aws.STACK_NAME}`,
       description: "Attribute group for solution information",
       attributes: {
         applicationType,

source/constructs/test/__snapshots__/constructs.test.ts.snap

@@ -333,7 +333,10 @@ exports[`Serverless Image Handler Stack Snapshot 1`] = `
           "Fn::Join": [
             "-",
             [
-              "sih",
+              "AppRegistry",
+              {
+                "Ref": "AWS::StackName",
+              },
               {
                 "Ref": "AWS::Region",
               },
@@ -1823,7 +1826,15 @@ exports[`Serverless Image Handler Stack Snapshot 1`] = `
         },
         "Description": "Attribute group for solution information",
         "Name": {
-          "Ref": "AWS::StackName",
+          "Fn::Join": [
+            "",
+            [
+              "AppRegistry-",
+              {
+                "Ref": "AWS::StackName",
+              },
+            ],
+          ],
         },
         "Tags": {
           "SolutionId": "S0ABC",

source/demo-ui/scripts.js

@@ -18,10 +18,13 @@ function importOriginalImage() {
     // Assemble the image request
     const request = {
         bucket: bucketName,
-        key: encodeURIComponent(keyName)
+        key: keyName
     }
     const strRequest = JSON.stringify(request);
-    const encRequest = btoa(strRequest);
+    const encRequest = btoa(encodeURIComponent(strRequest).replace(/%([0-9A-F]{2})/g, function(match, p1) {
+        return String.fromCharCode(parseInt(p1, 16))
+    }));
+    
     // Import the image data into the element
     $(`#img-original`)
         .attr(`src`, `${appVariables.apiEndpoint}/${encRequest}`)
@@ -77,14 +80,18 @@ function getPreviewImage() {
     // Set up the request body
     const request = {
         bucket: bucketName,
-        key: encodeURIComponent(keyName),
+        key: keyName,
         edits: _edits
     }
     if (Object.keys(request.edits).length === 0) { delete request.edits }
     console.log(request);
     // Setup encoded request
     const str = JSON.stringify(request);
-    const enc = btoa(str);
+
+    const enc = btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
+        return String.fromCharCode(parseInt(p1, 16))
+    }));
+
     // Fill the preview image
     $(`#img-preview`).attr(`src`, `${appVariables.apiEndpoint}/${enc}`);
     // Fill the request body field

source/image-handler/image-handler.ts

@@ -443,7 +443,7 @@ export class ImageHandler {
     alpha: string,
     sourceImageMetadata: sharp.Metadata
   ): Promise<Buffer> {
-    const params = { Bucket: bucket, Key: decodeURIComponent(key) };
+    const params = { Bucket: bucket, Key: key };
     try {
       const { width, height } = sourceImageMetadata;
       const overlayImage: S3.GetObjectOutput = await this.s3Client.getObject(params).promise();

source/image-handler/image-request.ts

@@ -269,7 +269,7 @@ export class ImageRequest {
     if (requestType === RequestTypes.DEFAULT) {
       // Decode the image request and return the image key
       const { key } = this.decodeRequest(event);
-      return decodeURIComponent(key);
+      return key;
     }
 
     if (requestType === RequestTypes.THUMBOR || requestType === RequestTypes.CUSTOM) {