fix(js): gen1 recommend parseAmplifyConfig instead of calling configure twice (#8264)

* fix(js): gen1 recommend parseAmplifyConfig instead of calling configure twice

* address feedback

* address feedback

* Update src/fragments/lib/troubleshooting/common/upgrading.mdx

Co-authored-by: Caleb Pollman <[email protected]>

* add reference link for resourcesConfig

---------

Co-authored-by: Ashwin Kumar <[email protected]>
Co-authored-by: Caleb Pollman <[email protected]>

Author: 3 people

src/fragments/lib/analytics/js/existing-resources.mdx

@@ -4,11 +4,15 @@ The manual setup enables you to use your existing Amazon Pinpoint resource in yo
 
 ```javascript
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
+import amplifyconfig from './amplifyconfiguration.json';
+
+const resourceConfig = parseAmplifyConfig(amplifyconfig);
 
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...resourceConfig,
   Analytics: {
-    ...Amplify.getConfig().Analytics,
+    ...resourceConfig.Analytics,
     Pinpoint: {
       // REQUIRED -  Amazon Pinpoint App Client ID
       appId: 'XXXXXXXXXXabcdefghij1234567890ab',

src/fragments/lib/analytics/js/personalize.mdx

@@ -29,9 +29,11 @@ Configure Amazon Personalize:
 
 ```javascript
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
+import amplifyconfig from './amplifyconfiguration.json';
 
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...parseAmplifyConfig(amplifyconfig),
   Analytics: {
     Personalize: {
       // REQUIRED - The trackingId to track the events

src/fragments/lib/analytics/js/storing.mdx

@@ -22,9 +22,11 @@ Configure Kinesis Firehose:
 
 ```javascript
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
+import amplifyconfig from './amplifyconfiguration.json';
 
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...parseAmplifyConfig(amplifyconfig),
   Analytics: {
     KinesisFirehose: {
       // REQUIRED -  Amazon Kinesis Firehose service region

src/fragments/lib/analytics/js/streaming.mdx

@@ -24,9 +24,11 @@ Configure Kinesis:
 ```javascript
 // Configure the plugin after adding it to the Analytics module
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
+import amplifyconfig from './amplifyconfiguration.json';
 
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...parseAmplifyConfig(amplifyconfig),
   Analytics: {
     Kinesis: {
       // REQUIRED -  Amazon Kinesis service region

src/fragments/lib/geo/js/existing-resources.mdx

@@ -4,11 +4,11 @@ You can first import and configure the CLI generated `amplifyconfiguration.json`
 
 ```js
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import amplifyconfig from './amplifyconfiguration.json';
 
-Amplify.configure(amplifyconfig);
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...parseAmplifyConfig(amplifyconfig),
   Geo: {
     LocationService: {
       maps: {

src/fragments/lib/interactions/js/getting-started.mdx

@@ -35,11 +35,11 @@ For adding IAM permissions, find you IAM role and attach the policy below (_reme
 
 ```javascript
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import amplifyconfig from './amplifyconfiguration.json';
 
-Amplify.configure(amplifyconfig);
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...parseAmplifyConfig(amplifyconfig),
   Interactions: {
     LexV2: {
       '<V2BotName>': {
@@ -125,11 +125,11 @@ Configuring bot details in your web app like this:
 
 ```javascript
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import amplifyconfig from './amplifyconfiguration.json';
 
-Amplify.configure(amplifyconfig);
 Amplify.configure({
-  ...Amplify.getConfig(),
+  ...parseAmplifyConfig(amplifyconfig),
   Interactions: {
     LexV1: {
       '<V1BotName>': {

src/fragments/lib/restapi/js/existing-resources.mdx

@@ -1,13 +1,18 @@
 Existing Amazon API Gateway resources can be used with the Amplify Libraries by calling `Amplify.configure()` with the API Gateway API name and options. Note you need to supply the full resource configuration and library options objects when calling `Amplify.configure()`. The following example shows how to configure additional API Gateway resources to an existing Amplify application:
 
 ```javascript
-const existingConfig = Amplify.getConfig();
+import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
+import amplifyconfig from './amplifyconfiguration.json';
+
+const resourceConfig = parseAmplifyConfig(amplifyconfig);
+
 Amplify.configure({
-  ...existingConfig,
+  ...resourceConfig,
   API: {
-    ...existingConfig.API,
+    ...resourceConfig.API,
     REST: {
-      ...existingConfig.API?.REST,
+      ...resourceConfig.API?.REST,
       '[API NAME]': {
         endpoint: '[API GATEWAY ENDPOINT]',
         region: '[REGION]'

src/fragments/lib/troubleshooting/common/upgrading.mdx

@@ -177,7 +177,7 @@ Wherever you called `Amplify.configure({ aws-exports });` previously (usually in
 </Columns>
 
 <Callout>
-  `Amplify.configure()` will now accept either the config JSON file or a strongly typed configuration object. Therefore, if you need to add additional configuration, you will call configure twice: once with the contents of **amplifyconfiguration.json**, and then again using `Amplify.getConfig()` plus any additions. Keep in mind that any call to configuration will fully override previous configurations, so pay special attention to nested configurations.
+  `Amplify.configure()` accepts either the config JSON file or a [ResourceConfig configuration object](/gen1/[platform]/tools/libraries/configure-categories/). You can use the `parseAmplifyConfig` util to parse the contents of the config JSON file **amplifyconfiguration.json** into the ResourceConfig configuration object and override properties as needed. Keep in mind that any call to configuration will fully override previous configurations, so pay special attention to nested configurations.
 </Callout>
 
 If you have previously configured Amplify by passing the configuration object literal when calling the `Amplify.configure()` function, you can now configure Amplify manually with type safety. Please refer to the documentation of each category that you are using for migration.
@@ -635,10 +635,9 @@ In v6, the `AWSLexV2Provider` provider will be included by default and you are n
   <Block name="V6">
     ```
     import { Amplify } from 'aws-amplify';
+    import { parseAmplifyConfig } from "aws-amplify/utils";
     import amplifyconfig from './amplifyconfiguration.json';
 
-    Amplify.configure(amplifyconfig);
-
     const interactionsConfig = {
       LexV2: {
         '<V2BotName>': {
@@ -651,7 +650,7 @@ In v6, the `AWSLexV2Provider` provider will be included by default and you are n
     }
 
     Amplify.configure({
-      ...Amplify.getConfig(),
+      ...parseAmplifyConfig(amplifyconfig),
       Interactions: interactionsConfig
     });
     ```

src/pages/[platform]/build-a-backend/add-aws-services/analytics/streaming-data/index.mdx

@@ -93,6 +93,7 @@ Configure Kinesis:
 ```javascript title="src/index.js"
 // Configure the plugin after adding it to the Analytics module
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import outputs from '../amplify_outputs.json';
 
 const amplifyConfig = parseAmplifyConfig(outputs);

src/pages/gen1/[platform]/build-a-backend/restapi/existing-resources/index.mdx

@@ -47,18 +47,18 @@ Existing Amazon API Gateway resources can be used with the Amplify Libraries by
 
 ```javascript
 import { Amplify } from 'aws-amplify';
+import { parseAmplifyConfig } from "aws-amplify/utils";
 import amplifyconfig from './src/amplifyconfiguration.json';
-Amplify.configure(amplifyconfig):
 
-const existingConfig = Amplify.getConfig();
+const resourceConfig = parseAmplifyConfig(amplifyconfig);
 
 // Add existing resource to the existing configuration.
 Amplify.configure({
-  ...existingConfig,
+  ...resourceConfig,
   API: {
-    ...existingConfig.API,
+    ...resourceConfig.API,
     REST: {
-      ...existingConfig.API?.REST,
+      ...resourceConfig.API?.REST,
       YourAPIName: {
         endpoint:
           'https://abcdefghij1234567890.execute-api.us-east-1.amazonaws.com/stageName',