Implement Release Tracker web application with Azure AD auth and DevOps Wiki integration

[Copilot]

Complete Flask web application for scheduling software releases with Azure AD authentication and automatic Azure DevOps Wiki updates.

Architecture

• Backend: Flask app with MSAL OAuth2 flow, filesystem sessions, Azure DevOps REST API integration
• Frontend: Two-panel UI (Flatpickr calendar + release type checkboxes), vanilla JS with Fetch API
• Auth: Protected routes via @login_required decorator, redirects to Azure AD /authorize endpoint
• Wiki Integration: Creates new pages or appends to existing via Azure DevOps REST API with PAT auth

Implementation Details

Authentication Flow

@app.route('/getAToken')
def authorized():
    result = _build_msal_app().acquire_token_by_authorization_code(
        request.args['code'],
        scopes=SCOPE,
        redirect_uri=url_for('authorized', _external=True)
    )
    session['user'] = result.get('id_token_claims')

Azure DevOps Integration

• Base64-encoded PAT authentication
• GET to retrieve existing page content + eTag
• PUT with If-Match header for updates, or create if 404
• Formatted markdown output with release type icons and user attribution

Security

• Environment variable validation on startup (fails fast if misconfigured)
• Debug mode disabled by default (FLASK_DEBUG env var required)
• HTML-escaped user data in templates (XSS prevention)
• Generic client error messages (sensitive details server-side only)
• Content-Type validation on JSON endpoints
• CodeQL scan: 0 vulnerabilities

Files Created

• app.py (264 lines): Flask backend with MSAL + Azure DevOps integration
• templates/index.html: Two-panel layout with calendar and checkboxes
• static/css/style.css: Gradient design with custom checkbox animations
• static/js/app.js: Form validation, Fetch API, loading states
• requirements.txt: Flask 2.3.3, msal 1.24.0, requests 2.31.0, gunicorn
• .env.example: Configuration template with Azure AD and DevOps vars
• README.md: Azure AD app registration steps, PAT creation, deployment guide

Usage

User selects release date from calendar, checks release types (🔥 Hotfix / ✅ Stable / 🧪 Prerelease), specifies wiki path. On save, backend appends formatted entry to Azure DevOps Wiki page.

Original prompt

Overview

Create a complete Release Tracker web application using Azure App Service with the following features:

Requirements

1. Authentication

• Azure AD (AAD) authentication for user login
• Secure session management using MSAL (Microsoft Authentication Library)
• Login/logout functionality

2. User Interface

• Left Panel: Calendar for selecting release dates (using Flatpickr)
• Right Panel: Checkboxes to select release types:
  • 🔥 Hotfix - Critical bug fixes for production
  • ✅ Stable - Fully tested production release
  • 🧪 Prerelease - Beta or release candidate
• Wiki path input field to specify the target wiki page
• Save button to submit release information

3. Backend API

• Flask-based backend application
• /api/save-release endpoint that:
  • Accepts date, release types, and wiki path
  • Calls Azure DevOps Wiki Update API to add release information
  • Appends formatted release info to the specified wiki page

4. Azure DevOps Integration

• Update Azure DevOps Wiki pages via REST API
• Support for creating new wiki pages if they don't exist
• Append release information to existing pages

Files to Create

Create the following files with complete, working code:

1. app.py - Flask application with:

• MSAL integration for Azure AD authentication
• Flask routes: / (main page), /login, /getAToken (callback), /logout
• API endpoint POST /api/save-release that calls Azure DevOps Wiki API
• Function update_azdo_wiki() to update wiki using REST API with PAT authentication
• login_required decorator for protected routes
• Environment variable configuration for Azure AD and Azure DevOps settings

2. requirements.txt with:

Flask==2.3.3
Flask-Session==0.5.0
msal==1.24.0
requests==2.31.0
python-dotenv==1.0.0
gunicorn==21.2.0

3. templates/index.html - Main HTML template with:

• Header with app title and user info/logout button
• Two-panel layout (left: calendar, right: release options)
• Flatpickr calendar integration via CDN
• Checkbox inputs for release types (hotfix, stable, prerelease)
• Wiki path input field with default value "/Releases"
• Save button with loading state
• Message display area for success/error

4. static/css/style.css with:

• Modern gradient background (purple/blue)
• White card-based panel design with shadows
• Custom styled checkboxes with checkmark animation
• Responsive two-column layout
• Button styles with hover effects
• Success/error message styling

5. static/js/app.js with:

• Flatpickr calendar initialization (inline mode)
• Save button click handler
• Form validation (require date and at least one release type)
• Fetch API call to /api/save-release
• Loading states on button
• Success/error message display with auto-hide

6. .env.example with:

# Azure AD Configuration
AZURE_CLIENT_ID=your-client-id
AZURE_CLIENT_SECRET=your-client-secret
AZURE_TENANT_ID=your-tenant-id

# Azure DevOps Configuration
AZDO_ORGANIZATION=your-organization
AZDO_PROJECT=your-project
AZDO_WIKI_ID=your-wiki-id
AZDO_PAT=your-personal-access-token

# Flask Configuration
SECRET_KEY=your-random-secret-key

7. .gitignore with:

__pycache__/
*.py[cod]
.env
.venv/
venv/
flask_session/
*.log
.DS_Store

8. README.md with comprehensive documentation:

• Project overview and features
• Prerequisites (Python 3.9+, Azure subscription, Azure DevOps account)
• Step-by-step Azure AD App Registration instructions
• Azure DevOps PAT creation steps
• Local development setup instructions
• Azure App Service deployment instructions using Azure CLI
• Environment variables reference table

Important Notes

• All files must contain complete, working code - not placeholders
• The app.py must include the full MSAL authentication flow
• The Azure DevOps Wiki API integration must handle both creating new pages and updating existing ones
• Use base64 encoding for PAT authentication in Azure DevOps API calls

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.