Q-Bits: Integrating Jira with Amazon Q Developer CLI for Seamless Behavior-Driven Development(BDD) Workflows using MCP

┌─────────────────┐          ┌─────────────────┐          ┌─────────────────┐
│                 │          │                 │          │                 │
│   Jira Story    │◄────────►│   Amazon Q      │◄────────►│  BDD Feature    │
│   (SCRUM-3)     │  MCP     │   Developer CLI │          │  Files          │
│                 │          │   with MCP      │          │                 │
└─────────────────┘          └────────┬────────┘          └─────────────────┘
                                      │
                                      │
                                      ▼
                             ┌─────────────────┐
                             │                 │
                             │  Step Defs &    │
                             │  Implementation │
                             │                 │
                             └─────────────────┘

$ Q
To learn more about MCP safety, see https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-mcp-security.html
✓ mcp_atlassian loaded in 8.31 s
✓ 1 of 1 mcp servers initialized

Welcome to 

 █████╗ ███╗   ███╗ █████╗ ███████╗ ██████╗ ███╗   ██╗     ██████╗ 
██╔══██╗████╗ ████║██╔══██╗╚══███╔╝██╔═══██╗████╗  ██║    ██╔═══██╗
███████║██╔████╔██║███████║  ███╔╝ ██║   ██║██╔██╗ ██║    ██║   ██║
██╔══██║██║╚██╔╝██║██╔══██║ ███╔╝  ██║   ██║██║╚██╗██║    ██║▄▄ ██║
██║  ██║██║ ╚═╝ ██║██║  ██║███████╗╚██████╔╝██║ ╚████║    ╚██████╔╝
╚═╝  ╚═╝╚═╝     ╚═╝╚═╝  ╚═╝╚══════╝ ╚═════╝ ╚═╝  ╚═══╝     ╚══▀▀═╝ 
                                                        

[bdd-todo-app] > I am assigned a task with the ID SCRUM-3. Please help me get more details about this task.

I'll help you get more details about the task with ID SCRUM-3. Let me search for this task in Jira.

🛠️  Using tool: jira_get_issue from mcp server mcp_atlassian
 ⋮ 
 ● Running jira_get_issue with the param:
 ⋮  {
 ⋮    "arguments": {
 ⋮      "issue_key": "SCRUM-3"
 ⋮    },
 ⋮    "name": "jira_get_issue"
 ⋮  }
Allow this action? Use 't' to trust (always allow) this tool for the session. [y/n/t]: y

 ⋮ 
 ● Completed in 0.969s

Here are the details for task SCRUM-3:

## Task: Implement Todo Item Tags Feature in UI

Status: To Do
Priority: Medium
Assignee: Kirankumar c
Created: May 6, 2025
Last Updated: May 8, 2025

### Description
As a user, I want to add multiple tags to my todo items so that I can organize and filter them based on different contexts or themes.

### Background
Currently, the todo application allows users to create, update, and delete todo items, but there is no way to categorize or filter them using tags. This feature will enhance the
user experience by allowing better organization of todo items.

### Acceptance Criteria

1. Users can create a new todo item with one or more tags
   • The UI should provide a way to enter multiple tags when creating a todo item
   • Tags should be displayed alongside the todo item in the UI
   • Tags should be visually distinct (e.g., using badges or chips)

2. Users can add tags to existing todo items
   • The UI should provide a way to add tags to an existing todo item
   • Newly added tags should appear immediately in the UI

3. Users can remove specific tags from todo items
   • Each tag should have a way to be removed (e.g., an "x" button)
   • Removed tags should disappear immediately from the UI

4. Users can filter the todo list by a single tag
   • The UI should provide a way to select a tag to filter by
   • Only todo items with the selected tag should be displayed
   • There should be a clear indication that filtering is active

5. Users can view all available tags in the system
   • The UI should display a list of all unique tags used across all todo items
   • The tag list should be easily accessible

6. Users can filter todos by multiple tags (AND logic)
   • The UI should allow selection of multiple tags for filtering
   • Only todo items containing ALL selected tags should be displayed

7. Users can update the complete set of tags for a todo item
   • The UI should provide a way to edit all tags at once for a todo item
   • Updated tags should be reflected immediately in the UI


Feature: Todo Item Tags
  As a user
  I want to add multiple tags to my todo items
  So that I can organize and filter them based on different contexts or themes

  Background:
    Given the todo list is empty

  Scenario: Add a todo item with tags
    When I create a todo item with title "Buy groceries" and tags "shopping,errands"
    Then the todo list should contain 1 item
    And the todo item should have title "Buy groceries"
    And the todo item should have tags "shopping,errands"

  Scenario: Add tags to an existing todo item
    Given I have a todo item with title "Pay bills"
    When I add tags "finance,urgent" to todo item "Pay bills"
    Then the todo item "Pay bills" should have tags "finance,urgent"

  Scenario: Remove a tag from a todo item
    Given I create a todo with title "Study for exam" and tags "education,urgent,priority"
    When I remove tag "urgent" from todo item "Study for exam"
    Then the todo item "Study for exam" should have tags "education,priority"
    And the todo item "Study for exam" should not have tag "urgent"

  Scenario: Filter todos by tag
    Given I have the following todo items:
      | title           | tags                  | completed |
      | Buy groceries   | shopping,errands      | False     |
      | Clean the house | home,chores           | False     |
      | Pay bills       | finance,urgent        | False     |
      | Buy gift        | shopping,gift         | False     |
      | Study for exam  | education,urgent      | False     |
    When I list todos with tag "shopping"
    Then I should see 2 todo items in the list
    And all todos should have tag "shopping"

  Scenario: List all available tags
    Given I have the following todo items:
      | title           | tags                  | completed |
      | Buy groceries   | shopping,errands      | False     |
      | Clean the house | home,chores           | False     |
      | Pay bills       | finance,urgent        | False     |
    When I request all available tags
    Then I should see the following tags:
      | tag       |
      | shopping  |
      | errands   |
      | home      |
      | chores    |
      | finance   |
      | urgent    |

  Scenario: Filter todos by multiple tags (AND logic)
    Given I have the following todo items:
      | title           | tags                  | completed |
      | Buy groceries   | shopping,errands      | False     |
      | Clean the house | home,chores           | False     |
      | Pay bills       | finance,urgent        | False     |
      | Buy gift        | shopping,gift,urgent  | False     |
      | Study for exam  | education,urgent      | False     |
    When I list todos with tags "shopping,urgent"
    Then I should see 1 todo item in the list
    And the todo item should have title "Buy gift"

  Scenario: Update tags for a todo item
    Given I create a todo with title "Research project" and tags "work,research"
    When I update tags for todo item "Research project" to "work,research,priority"
    Then the todo item "Research project" should have tags "work,research,priority"

@when('I create a todo item with title "{title}" and tags "{tags_str}"')
def step_impl(context, title, tags_str):
    tags = [tag.strip() for tag in tags_str.split(',')]
    context.todo_app.add_todo_with_tags(title, tags)
    context.current_todo_title = title

@then('the todo item should have tags "{tags_str}"')
def step_impl(context, tags_str):
    expected_tags = set(tag.strip() for tag in tags_str.split(','))
    todo = context.todo_app.find_todo_by_title(context.current_todo_title)
    assert todo is not None, f"Todo with title '{context.current_todo_title}' not found"
    actual_tags = set(todo['tags']) if 'tags' in todo else set()
    assert actual_tags == expected_tags, f"Expected tags {expected_tags}, but got {actual_tags}"

def add_todo_with_tags(self, title, tags):
    """Add a new todo item with the given title and tags"""
    todo = {
        'id': self.next_id,
        'title': title,
        'completed': False,
        'tags': tags
    }
    self.todos.append(todo)
    self.next_id += 1
    return todo['id']

def get_todos_by_tag(self, tag):
    """Return all todo items with the specified tag"""
    return [todo for todo in self.todos if 'tags' in todo and tag in todo['tags']]

<div class="add-todo">
    <input type="text" id="new-todo-title" placeholder="Add a new todo...">
    <input type="text" id="new-todo-tags" placeholder="Tags (comma-separated)">
    <button id="add-todo-btn">Add</button>
</div>

<div class="filter-container">
    <div class="filter-group">
        <label for="tag-filter">Filter by tag:</label>
        <select id="tag-filter">
            <option value="">All tags</option>
        </select>
    </div>
</div>

.todo-tag {
    font-size: 14px;
    color: #2c3e50;
    background-color: #e8f4f8;
    padding: 3px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #bde0ec;
}

.tag-remove {
    cursor: pointer;
    color: #e74c3c;
    font-size: 12px;
}

function updateTagOptions() {
    // Update tags from todos
    todos.forEach(todo => {
        if (todo.tags && Array.isArray(todo.tags)) {
            todo.tags.forEach(tag => tags.add(tag));
        }
    });
    
    // Clear existing options except the first one
    while (tagFilter.options.length > 1) {
        tagFilter.remove(1);
    }
    
    // Add tag options
    tags.forEach(tag => {
        const option = document.createElement('option');
        option.value = tag;
        option.textContent = tag;
        tagFilter.appendChild(option);
    });
}

Great! I've implemented the Todo Item Tags Feature in the UI. Here's a summary of the changes made:

### 1. Created UI Feature File for Tags
Created /features/ui_tags.feature with scenarios for:
• Adding a new todo with tags
• Adding tags to an existing todo
• Removing tags from a todo
• Filtering todos by tag
• Viewing all available tags
• Filtering by multiple tags
• Updating all tags for a todo

### 2. Created UI Step Definitions for Tags
Created /features/steps/ui_tags_steps.py with step definitions that implement the UI interactions for tags

### 3. Updated HTML Template
Modified /src/api/templates/index.html to include:
• A tags input field in the add todo form
• A tag filter dropdown in the filter section
• A "View All Tags" button
• A tag list panel to display all available tags
• Advanced filters section with multiple tag selection

### 4. Updated CSS Styles
Enhanced /src/api/static/css/styles.css with:
• Styling for tags (badges with remove buttons)
• Styling for the tag list panel
• Improved layout for the add todo form with input rows
• Styling for the advanced filters section

### 5. Updated JavaScript
Completely rewrote /src/api/static/js/app.js to include:
• Fetching and displaying tags
• Adding todos with tags
• Editing and removing tags
• Filtering by single tag or multiple tags
• Viewing all available tags
• Tag management functions

All the acceptance criteria from the SCRUM-3 task have been implemented in the UI.

[bdd-todo-app] > Can you please help me update the status of the task to in-progress and also add a comment that the work has been started?

I'll help you update the status of SCRUM-3 to "In Progress" and add a comment indicating that work has started.

First, let's transition the issue to "In Progress":

🛠️  Using tool: jira_get_transitions from mcp server mcp_atlassian
 ⋮ 
 ● Running jira_get_transitions with the param:
 ⋮  {
 ⋮    "arguments": {
 ⋮      "issue_key": "SCRUM-3"
 ⋮    },
 ⋮    "name": "jira_get_transitions"
 ⋮  }
Allow this action? Use 't' to trust (always allow) this tool for the session. [y/n/t]: y

 ⋮ 
 ● Completed in 0.297s

🛠️  Using tool: jira_transition_issue from mcp server mcp_atlassian
 ⋮ 
 ● Running jira_transition_issue with the param:
 ⋮  {
 ⋮    "arguments": {
 ⋮      "issue_key": "SCRUM-3",
 ⋮      "transition_id": "21"
 ⋮    },
 ⋮    "name": "jira_transition_issue"
 ⋮  }
Allow this action? Use 't' to trust (always allow) this tool for the session. [y/n/t]: y

 ⋮ 
 ● Completed in 0.899s

🛠️  Using tool: jira_add_comment from mcp server mcp_atlassian
 ⋮ 
 ● Running jira_add_comment with the param:
 ⋮  {
 ⋮    "arguments": {
 ⋮      "comment": "I've started working on the Todo Item Tags Feature implementation in the UI. Beginning with the data structure changes and basic UI components for tag display and input.",
 ⋮      "issue_key": "SCRUM-3"
 ⋮    },
 ⋮    "name": "jira_add_comment"
 ⋮  }
Allow this action? Use 't' to trust (always allow) this tool for the session. [y/n/t]: y

 ⋮ 
 ● Completed in 0.488s

Great! I've successfully completed both tasks:

1. Updated the status of SCRUM-3 from "To Do" to "In Progress"
2. Added a comment to the issue indicating that work has started

The comment reads: "I've started working on the Todo Item Tags Feature implementation in the UI. Beginning with the data structure changes and basic UI components for tag 
display and input."

The issue is now properly updated in Jira. Is there anything else you'd like me to help you with regarding this task?

[bdd-todo-app] > please update the ticket with the details about what all is implemented

I'll help you update the Jira ticket with details about the implementation.

🛠️  Using tool: jira_add_comment from mcp server mcp_atlassian
 ⋮ 
 ● Running jira_add_comment with the param:
 ⋮  {
 ⋮    "arguments": {
 ⋮      "comment": "## Implementation Details for Todo Item Tags Feature in UI\n\nI've completed the implementation of the Todo Item Tags Feature in the UI. Here's a summary of what has been implemented:\n\n### UI Components Added\n- Tags input field in the \"Add Todo\" form (comma-separated values)\n- Tag badges display for each todo item with remove buttons\n- Tag filtering dropdown in the main filters section\n- \"View All Tags\" button to see all available tags\n- Advanced filters section with multiple tag selection (AND logic)\n- Tag list panel that shows all unique tags in the system\n\n### Features Implemented\n1. **Create Todo with Tags**\n   - Users can add comma-separated tags when creating a new todo\n   - Tags are displayed as visually distinct badges\n\n2. **Add/Edit Tags for Existing Todos**\n   - Users can add tags to existing todo items\n   - Tags appear immediately in the UI\n\n3. **Remove Tags**\n   - Each tag has an \"×\" button for easy removal\n   - Removed tags disappear immediately from the UI\n\n4. **Filter by Single Tag**\n   - Dropdown to select a tag to filter by\n   - Only todos with the selected tag are displayed\n   - Clear visual indication that filtering is active\n\n5. **View All Tags**\n   - Button to view a list of all unique tags\n   - Tags are clickable to filter by that tag\n\n6. **Filter by Multiple Tags (AND logic)**\n   - Advanced filter with multi-select for tags\n   - Only todos containing ALL selected tags are displayed\n\n7. **Update All Tags**\n   - Edit function allows updating the complete set of tags\n   - Updated tags are reflected immediately in the UI\n\n### Technical Implementation\n- Tags stored as arrays in the todo item data structure\n- Case-insensitive tag handling with whitespace trimming\n- Duplicate tag prevention\n- Proper tag persistence in the data store\n\n### Files Modified/Created\n- Created `/features/ui_tags.feature` with BDD scenarios\n- Created `/features/steps/ui_tags_steps.py` with step definitions\n- Updated HTML template to include tag UI elements\n- Enhanced CSS for tag styling and layout\n- Updated JavaScript to handle tag operations\n\nAll acceptance criteria from the task description have been implemented and the UI now fully supports the tags feature.",
 ⋮      "issue_key": "SCRUM-3"
 ⋮    },
 ⋮    "name": "jira_add_comment"
 ⋮  }
Allow this action? Use 't' to trust (always allow) this tool for the session. [y/n/t]: y

 ⋮ 
 ● Completed in 1.102s

Great! I've successfully added a detailed comment to the SCRUM-3 ticket summarizing the implementation of the Todo Item Tags Feature in the UI.

The comment includes:

1. UI Components Added - A list of all the new UI elements added to support tags
2. Features Implemented - A breakdown of the 7 key features implemented, matching the acceptance criteria
3. Technical Implementation - Details about how tags are handled in the code
4. Files Modified/Created - A list of the files that were created or updated

Would you like me to also update the status of the ticket to reflect that the implementation is complete? Or would you prefer to keep it in "In Progress" for now, perhaps for 
testing or review?