Updates for code scanning alert Development section (#55497)

Author: saritai

assets/images/help/repository/code-scanning-alert-details.png

@@ -50,8 +50,20 @@ Each alert highlights a problem with the code and the name of the tool that iden
 
 {% data reusables.code-scanning.alert-default-branch %}
 
+{% ifversion code-scanning-alert-development-section %}
+
 ![Screenshot of a {% data variables.product.prodname_code_scanning %} alert, includes the alert title, relevant lines of code at the left, metadata at the right.](/assets/images/help/repository/code-scanning-alert.png)
 
+You can also view affected branches, as well as fixes and associated pull requests for an alert. This helps you and your team stay informed about the progress of fixing alerts.
+
+![Screenshot of the "Development" section of a {% data variables.product.prodname_code_scanning %} alert, includes a title of a pull request that could fix the alert.](/assets/images/help/repository/code-scanning-alert-development-section.png)
+
+{% else %}
+
+![Screenshot of a {% data variables.product.prodname_code_scanning %} alert, includes the alert title, relevant lines of code at the left, metadata at the right.](/assets/images/help/repository/code-scanning-alert-without-development.png)
+
+{% endif %}
+
 If you configure {% data variables.product.prodname_code_scanning %} using {% data variables.product.prodname_codeql %}, you can also find data-flow problems in your code. Data-flow analysis finds potential security issues in code, such as: using data insecurely, passing dangerous arguments to functions, and leaking sensitive information.
 
 When {% data variables.product.prodname_code_scanning %} reports data-flow alerts, {% data variables.product.prodname_dotcom %} shows you how data moves through the code. {% data variables.product.prodname_code_scanning_caps %} allows you to identify the areas of your code that leak sensitive information, and that could be the entry point for attacks by malicious users.

assets/images/help/repository/code-scanning-alert-development-section.png

@@ -0,0 +1,5 @@
+# Reference: #16275
+versions:
+  ghec: '*'
+  fpt: '*'
+  ghes: '>3.17'

assets/images/help/repository/code-scanning-alert-without-development.png

@@ -1 +1 @@
-The status and details on the alert page only reflect the state of the alert on the default branch of the repository, even if the alert exists in other branches. You can see the status of the alert on non-default branches in the **Affected branches** section on the right-hand side of the alert page. If an alert doesn't exist in the default branch, the status of the alert will display as "in pull request" or "in branch" and will be colored grey.
+The status and details on the alert page only reflect the state of the alert on the default branch of the repository, even if the alert exists in other branches. You can see the status of the alert on non-default branches in the **Affected branches** section on the right-hand side of the alert page. If an alert doesn't exist in the default branch, the status of the alert will display as "in pull request" or "in branch" and will be colored grey. The **Development** section shows linked branches and pull requests that will fix the alert.