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

Author: Ashwin Kumar

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()` will now accept either the config JSON file or a strongly typed configuration object. You can use the `parseAmplifyConfig` util to parse the contents of config JSON file **amplifyconfiguration.json** into the strongly typed configuration object and modify or 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/[platform]/build-a-backend/add-aws-services/predictions/set-up-predictions/index.mdx

@@ -154,7 +154,13 @@ Import and load the configuration file in your app. It is recommended you add th
 
 ```ts title="src/main.ts"
 import { Amplify } from "aws-amplify";
-import outputs from '../amplify_outputs.json';
+import { parseAmplifyConfig } from "aws-amplify/utils";
+import outputs from './amplify_outputs.json';
 
-Amplify.configure(outputs);
+const amplifyConfig = parseAmplifyConfig(outputs);
+
+Amplify.configure({
+  ...amplifyConfig,
+  Predictions: outputs.custom.Predictions,
+});
 ```