JavaScript (v3): Textract - Fix non-unique domain prefix in textract-react CFN template and some broke unit tests. (#7190)

* JavaScript (v3): Textract - Fix non-unique domain prefix in textract-react CFN template.
* JavaScript (v3): Textract - Update to latest react scripts and declare working node engine.
* JavaScript (v3): Add workaround for broken instanceof check 
[This PR](https://github.com/smithy-lang/smithy-typescript/pull/1490/files) overrode
the default 'instanceof' implementation for ServiceException. It created a duck-type
check that took priority over the prototype chain check. There's a [fix](https://github.com/smithy-lang/smithy-typescript/pull/1503/files)
incoming, but in the meantime this makes it quack.
* JavaScript (v3): Textract - Ensure unique LoginUrl is saved as a CFN output.
* JavaScript (v3): Unit tests - Fix incorrect link in S3 unit tests comments.

Author: cpyle0819

.github/workflows/lint-javascript.yml

@@ -26,7 +26,7 @@ jobs:
         if: steps.changed-files.outputs.any_changed == 'true'
         uses: actions/setup-node@v3
         with:
-          node-version: "20.x"
+          node-version: "22.x"
       - name: Install dependencies
         if: steps.changed-files.outputs.any_changed == 'true'
         run: npm i --prefix javascriptv3

javascriptv3/example_code/cross-services/textract-react/package.json

@@ -13,7 +13,7 @@
     "bootstrap": "^5.0.0-beta3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.0",
     "web-vitals": "^1.1.1"
   },
   "scripts": {
@@ -31,10 +31,13 @@
     ]
   },
   "devDependencies": {
-    "canvas": "^2.7.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^12.8.3"
+    "@testing-library/user-event": "^12.8.3",
+    "canvas": "^3.0.1"
   },
-  "type": "module"
+  "type": "module",
+  "engines": {
+    "node": ">=22 <23"
+  }
 }

javascriptv3/example_code/cross-services/textract-react/setup.yaml

@@ -201,7 +201,19 @@ Resources:
   textractcognitodemoidtextractcognitodemodomainEBB6899F:
     Type: AWS::Cognito::UserPoolDomain
     Properties:
-      Domain: textract-demo
+      Domain:
+        Fn::Join:
+          - '-'
+          - - textract-react
+            - Fn::Select:
+              - 4
+              - Fn::Split:
+                - '-'
+                - Fn::Select:
+                  - 2
+                  - Fn::Split:
+                    - /
+                    - Ref: AWS::StackId
       UserPoolId:
         Ref: textractcognitodemoidA350B90F
     Metadata:
@@ -332,7 +344,9 @@ Outputs:
     Value:
       Fn::Join:
         - ""
-        - - https://textract-demo.auth.
+        - - https://
+          - Ref: textractcognitodemoidtextractcognitodemodomainEBB6899F
+          - .auth.
           - Ref: AWS::Region
           - .amazoncognito.com/login?client_id=
           - Ref: textractcognitodemoidtextractcognitodemoclientidB9ABA9D2

javascriptv3/example_code/cross-services/textract-react/src/App.js

@@ -2,11 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useState, useEffect } from "react";
-import { ImageLoader } from "./ImageLoader";
-import { ImageDisplay } from "./ImageDisplay";
-import { ExtractButtons } from "./ExtractButtons";
-import { ExplorerCard } from "./ExplorerCard";
-import { LoginCard } from "./LoginCard";
+import { ImageLoader } from "./ImageLoader.js";
+import { ImageDisplay } from "./ImageDisplay.js";
+import { ExtractButtons } from "./ExtractButtons.js";
+import { ExplorerCard } from "./ExplorerCard.js";
+import { LoginCard } from "./LoginCard.js";
 
 /**
  * Main React application element. Includes panels for signing in, loading and

javascriptv3/example_code/cross-services/textract-react/src/Config.js

@@ -1,5 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+
 export const Config = {
   ConfigError:
     "Demo resources not initialized. You must deploy AWS resources and demo elements before running this application. See the README for details.",

javascriptv3/example_code/cross-services/textract-react/src/ExplorerCard.js

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useRef } from "react";
-import { ExplorerTree } from "./ExplorerTree";
+import { ExplorerTree } from "./ExplorerTree.js";
 
 /**
  * Displays output from Amazon Textract as a hierarchical tree of checkboxes.

javascriptv3/example_code/cross-services/textract-react/src/ExplorerTree.js

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from "react";
-import { ColorMap, FilterMap } from "./Utils";
+import { ColorMap, FilterMap } from "./Utils.js";
 
 /**
  * An individual node that displays a block item from Amazon Textract as a checkbox.

javascriptv3/example_code/cross-services/textract-react/src/ImageDisplay.js

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useRef, useLayoutEffect } from "react";
-import { ColorMap } from "./Utils";
+import { ColorMap } from "./Utils.js";
 
 /**
  * Displays a PNG image formatted as a Base64 string and draws polygons on top of

javascriptv3/example_code/cross-services/textract-react/src/index.js

@@ -16,10 +16,10 @@
 import "bootstrap/dist/css/bootstrap.css";
 import React from "react";
 import ReactDOM from "react-dom";
-import { Config } from "./Config";
-import { awsFactory } from "./AwsFactory";
-import App from "./App";
-import TextractModel from "./TextractModel";
+import { Config } from "./Config.js";
+import { awsFactory } from "./AwsFactory.js";
+import App from "./App.js";
+import TextractModel from "./TextractModel.js";
 
 const params = new URLSearchParams(window.location.hash.slice(1));
 const idToken = params.get("id_token");

javascriptv3/example_code/s3/tests/copy-object.unit.test.js

@@ -37,7 +37,10 @@ describe("copy-object", () => {
   });
 
   it("should log a relevant error message if the object is in an archive tier", async () => {
-    send.mockRejectedValue(new ObjectNotInActiveTierError());
+    const error = new ObjectNotInActiveTierError();
+    error.$fault = "server"; // Workaround until PR is released. https://github.com/smithy-lang/smithy-typescript/pull/1503
+    error.$metadata = "metadata"; // Workaround until PR is released. https://github.com/smithy-lang/smithy-typescript/pull/1503
+    send.mockRejectedValue(error);
 
     const spy = vi.spyOn(console, "error");