Copilot Creates Issues includes codes snippets in its drafts [Public Preview] (#57733)

Author: sunbrye

content/copilot/how-tos/use-copilot-for-common-tasks/use-copilot-to-create-issues.md

@@ -37,6 +37,7 @@ You can create issues from {% data variables.copilot.copilot_chat_short %}'s imm
    * {% prompt %}In OWNER/REPOSITORY, create a feature request to add fuzzy matching to search.{% endprompt %}
    * {% prompt %}Log a bug for a 500 error. This happens consistently when I try to log into the site.{% endprompt %}
    * {% prompt %}Create a task to change the application logo background to red and add the label "needs design review".{% endprompt %}
+   * {% prompt %}In octo-org/octo-repo, create an issue and add relevant code snippets to improve the API response format.{% endprompt %}
 
    > [!NOTE] You can only use {% data variables.product.prodname_copilot_short %} to create issues in repositories where you already have permission to create issues. This feature doesn't change your access or bypass repository permissions.
 

content/copilot/tutorials/copilot-chat-cookbook/document-code/creating-issues.md

@@ -0,0 +1,80 @@
+---
+title: Creating issues
+shortTitle: Create issues
+intro: '{% data variables.copilot.copilot_chat_short %} can help you quickly create issues without filling out every field manually.'
+versions:
+  feature: copilot
+complexity:
+  - Simple
+octicon: copilot
+category:
+  - Document code
+topics:
+  - Copilot
+contentType: tutorials
+---
+
+Creating issues manually can be time-consuming. {% data variables.copilot.copilot_chat_short %} lets you create issues from natural language, and automatically fills in the title, body, labels, and other metadata based on your prompt.
+
+## Example scenario
+
+You're working on an API service and need to add server-side validation to the `createUser` endpoint. Instead of drafting the issue manually, you use {% data variables.copilot.copilot_chat_short %} to generate a detailed issue description that includes an example implementation of the validation middleware.
+
+The following snippet shows the current implementation of the `createUser` route, before validation is added:
+
+```javascript
+// Route
+app.post('/users', validateCreateUser, (req, res) => {
+  const { username, email } = req.body;
+  // Simulate user creation
+  res.status(201).json({ message: 'User created', user: { username, email } });
+});
+```
+
+## Example prompt
+
+`In octo-org/octo-repo, create an issue to add server-side validation for the createUser API endpoint. Include an example of how to validate the request body using an existing middleware pattern. Label it with "backend" and "enhancement".`
+
+## Example response
+
+{% data reusables.copilot.example-prompts.response-is-an-example %}
+
+When you submit the prompt, {% data variables.copilot.copilot_chat_short %} generates a draft issue based on your description and includes a code snippet. You can review and edit the draft before creating the issue.
+
+```markdown
+## Problem
+The `createUser` API endpoint currently lacks robust server-side validation for incoming requests. To ensure data integrity and security, we should validate the request body before proceeding with user creation.
+
+**Current API endpoint:**
+// Route
+app.post('/users', validateCreateUser, (req, res) => {
+  const { username, email } = req.body;
+  // Simulate user creation
+  res.status(201).json({ message: 'User created', user: { username, email } });
+});
+
+## Proposal
+- Add server-side validation for the request body using the existing middleware pattern.
+- Ensure required fields (`username`, `email`) are present and valid.
+- Return a 400 Bad Request response if validation fails.
+
+**Example (middleware pattern):**
+function validateCreateUser(req, res, next) {
+  const { username, email } = req.body;
+  if (!username || !email) {
+    return res.status(400).json({ error: 'Username and email are required.' });
+  }
+  // Additional validation logic here
+  next();
+}
+
+app.post('/users', validateCreateUser, (req, res) => {
+  // ...
+});
+
+
+## Acceptance Criteria
+- Server-side validation middleware is added to the `createUser` endpoint.
+- Request body is properly validated.
+- Appropriate error responses are returned for invalid requests.
+```

content/copilot/tutorials/copilot-chat-cookbook/document-code/index.md

@@ -10,6 +10,7 @@ versions:
 topics:
   - Copilot
 children:
+  - /creating-issues
   - /document-legacy-code
   - /explain-legacy-code
   - /explain-complex-logic

content/copilot/tutorials/plan-a-project.md

@@ -88,12 +88,12 @@ After you finish generating the issue tree you may notice that {% data variables
 1. Start with the newly generated issue such as "Task: Create placeholder pages for main routes".  
 
    Prompt {% data variables.product.prodname_copilot_short %} with:  
-  ```Can you improve the description for “Task: Create placeholder pages for main routes”? Please provide a detailed technical summary, list the main routes to be included, outline the steps for implementation, and specify what should be delivered for this task.```
+  ```Can you improve the description for “Task: Create placeholder pages for main routes”? Please provide a detailed technical summary, list the main routes to be included, outline the steps for implementation, and specify what should be delivered for this task. Please add any relevant code snippets.```
 
 1. {% data variables.product.prodname_copilot_short %} will generate a new version of the draft issue "Task: Create placeholder pages for main routes."  
 
     At the top-left of the issue, click the versioning drop-down and select **Version 2** to review the new changes.
-1. Review and decide whether to keep {% data variables.product.prodname_copilot_short %}’s revised version, edit further, or prompt again for more detail.
+1. Review and decide whether to keep {% data variables.product.prodname_copilot_short %}’s revised version, edit further, or prompt again for more detail. {% data variables.product.prodname_copilot_short %} can add code snippets into the draft to improve clarity and provide immediate context for these issues.
 1. Repeat this process for other issues in the epic, refining descriptions and breaking down tasks as needed.
 1. Once you’re satisfied with the issue descriptions, click **Create all** to create the issues in your repository.