fix(StepFunctions): graph visualization of ItemProcessor field #3885

Problem:
StepFunctions state machine graph fails when the definition contains
a Distributed Map state.

    2023-06-01 14:36:20 [ERROR]: TypeError: Cannot read properties of undefined (reading 'States')

Steps to reproduce:
1. Paste a valid ASL JSON definition into an Amazon States Language (JSON)
   document. The example below is from the "Distributed Map to process a CSV
   file in S3" sample project in the Step Functions Console.
2. Click "Render Graph"
3. See "Errors detected. Cannot preview" in the visualization tab.

You can also repro by using the Map state template from `AWS: Create a new Step
Functions state machine` and changing `Iterator` field name to the new
`ItemProcessor` field.

    {
      "Comment": "Distributed map that reads CSV file for order data and detects delayed orders",
      "StartAt": "GenerateCSV",
      "States": {
        "GenerateCSV": {
          "Comment": " This step is used to generate CSV file with contains order data",
          "Type": "Task",
          "Resource": "arn:<PARTITION>:states:::lambda:invoke",
          "OutputPath": "$.Payload",
          "Parameters": {
            "Payload.$": "$",
            "FunctionName": "<CSV_GENERATOR_LAMBDA_FUNCTION_ARN>"
          },
          "Retry": [
            {
              "ErrorEquals": [
                "Lambda.ServiceException",
                "Lambda.AWSLambdaException",
                "Lambda.SdkClientException",
                "Lambda.TooManyRequestsException"
              ],
              "IntervalSeconds": 2,
              "MaxAttempts": 3,
              "BackoffRate": 2
            }
          ],
          "Next": "Shipping File Analysis"
        },
        "Shipping File Analysis": {
          "Type": "Map",
          "ItemProcessor": {
            "ProcessorConfig": {
              "Mode": "DISTRIBUTED",
              "ExecutionType": "EXPRESS"
            },
            "StartAt": "DetectDelayedOrders",
            "States": {
              "DetectDelayedOrders": {
                "Type": "Task",
                "Resource": "arn:<PARTITION>:states:::lambda:invoke",
                "OutputPath": "$.Payload",
                "Parameters": {
                  "Payload.$": "$",
                  "FunctionName": "<DETECT_DELAYED_DATA_LAMBDA_FUNCTION_ARN>"
                },
                "Retry": [
                  {
                    "ErrorEquals": [
                      "Lambda.ServiceException",
                      "Lambda.AWSLambdaException",
                      "Lambda.SdkClientException",
                      "Lambda.TooManyRequestsException"
                    ],
                    "IntervalSeconds": 2,
                    "MaxAttempts": 6,
                    "BackoffRate": 2
                  }
                ],
                "Next": "ProcessDelayedOrders"
              },
              "ProcessDelayedOrders": {
                "Type": "Map",
                "ItemProcessor": {
                  "ProcessorConfig": {
                    "Mode": "INLINE"
                  },
                  "StartAt": "SendDelayedOrder",
                  "States": {
                    "SendDelayedOrder": {
                      "Type": "Task",
                      "Resource": "arn:<PARTITION>:states:::sqs:sendMessage",
                      "Parameters": {
                        "MessageBody.$": "$",
                        "QueueUrl": "<SQS_DELAYED_QUEUE_URL>"
                      },
                      "End": true,
                      "ResultPath": null
                    }
                  }
                },
                "End": true
              }
            }
          },
          "ItemReader": {
            "Resource": "arn:<PARTITION>:states:::s3:getObject",
            "ReaderConfig": {
              "InputType": "CSV",
              "CSVHeaderLocation": "FIRST_ROW"
            },
            "Parameters": {
              "Bucket": "<S3_INPUT_BUCKET>",
              "Key": "<S3_ORDER_FILE_OBJECT_KEY>"
            }
          },
          "MaxConcurrency": 1000,
          "Label": "ShippdingFileAnalysis",
          "End": true,
          "ItemBatcher": {
            "MaxItemsPerBatch": 10
          },
          "ResultWriter": {
            "Resource": "arn:<PARTITION>:states:::s3:putObject",
            "Parameters": {
              "Bucket": "<S3_RESULT_BUCKET>",
              "Prefix": "results"
            }
          }
        }
      }
    }

Solution:
Update dependencies sfn-0.1.8.js, graph-0.1.8.css.
ref #3515

Author: wong-a

.changes/next-release/Feature-3d9dd25d-a1c3-40a8-b520-a19b339bd4dd.json

@@ -0,0 +1,4 @@
+{
+	"type": "Feature",
+	"description": "StepFunctions: Support rendering SFN graph with ItemProcessor field"
+}

src/stepFunctions/utils.ts

@@ -24,8 +24,8 @@ import { fromExtensionManifest } from '../shared/settings'
 const documentSettings: DocumentLanguageSettings = { comments: 'error', trailingCommas: 'error' }
 const languageService = getLanguageService({})
 
-const visualizationScriptUrl = 'https://do0of8uwbahzz.cloudfront.net/sfn-0.1.5.js'
-const visualizationCssUrl = 'https://do0of8uwbahzz.cloudfront.net/graph-0.1.5.css'
+const visualizationScriptUrl = 'https://d3p8cpu0nuk1gf.cloudfront.net/sfn-0.1.8.js'
+const visualizationCssUrl = 'https://d3p8cpu0nuk1gf.cloudfront.net/graph-0.1.8.css'
 
 const scriptsLastDownloadedUrl = 'SCRIPT_LAST_DOWNLOADED_URL'
 const cssLastDownloadedUrl = 'CSS_LAST_DOWNLOADED_URL'