Refactored Vacation Planner App

[paolosalvatori]

Motivation

This pull request changes the look and feel for the Vacation Planner demo to be consistent across the following samples:

• Azure Web App with Azure SQL Database and Azure Key Vault
• Azure Web App with Managed Identity
• Azure Web App with Azure Cosmos DB for NoSQL API
• Azure Web App with Azure Cosmos DB for MongoDB

Changes

The new UI is more modern and consistent, and introduces support for light and dark color schemes.

Tests

Tests were successfully run locally.

[Copilot]

Pull request overview

This PR refactors the Vacation Planner Flask sample UIs to a consistent, modern look across multiple Azure-backed variants, adding a light/dark theme and moving add/edit/delete interactions into a modal-driven UI with toast notifications.

Changes:

• Replaced the Bootstrap-based layout with a custom “Vacation Planner” header/table UI and modal workflows (add/edit + delete confirmation) across the samples.
• Added dark-mode support (CSS variables + localStorage toggle) and toast display of Flask flash messages.
• Updated Flask backends to set secret_key and emit flash messages; added “update existing activity” support for the managed-identity (Blob Storage) sample.

Reviewed changes

Copilot reviewed 13 out of 22 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
samples/web-app-sql-database/python/src/templates/index.html	New modal-based UI, dark-mode toggle, toast for flash messages
samples/web-app-sql-database/python/src/static/style.css	New shared styling, CSS variables, dark theme, modal/toast styles
samples/web-app-sql-database/python/src/app.py	Adds flash and sets app.secret_key; flashes on add/update/delete
samples/web-app-managed-identity/python/src/templates/index.html	New modal-based UI, dark-mode toggle, toast for flash messages
samples/web-app-managed-identity/python/src/static/style.css	New shared styling, CSS variables, dark theme, modal/toast styles
samples/web-app-managed-identity/python/src/app.py	Adds flash + secret_key; introduces update_blob() and flashes status
samples/web-app-cosmosdb-nosql-api/python/src/templates/index.html	New modal-based UI, dark-mode toggle, toast for flash messages
samples/web-app-cosmosdb-nosql-api/python/src/static/style.css	New shared styling, CSS variables, dark theme, modal/toast styles
samples/web-app-cosmosdb-nosql-api/python/src/app.py	Adds flash and sets app.secret_key; flashes on add/update/delete
samples/web-app-cosmosdb-mongodb-api/python/src/templates/index.html	New modal-based UI, dark-mode toggle, toast for flash messages
samples/web-app-cosmosdb-mongodb-api/python/src/static/style.css	New shared styling, CSS variables, dark theme, modal/toast styles
samples/web-app-cosmosdb-mongodb-api/python/src/static/favicon.ico:Zone.Identifier	Removes Windows Zone Identifier metadata file
samples/web-app-cosmosdb-mongodb-api/python/src/app.py	Adds flash + secret_key; removes old edit-via-redirect route usage

Comments suppressed due to low confidence (3)

samples/web-app-managed-identity/python/src/app.py:234

• The POST update path calls update_blob() and updates the in-memory activities list without checking whether the blob update actually succeeded. Since update_blob() doesn’t currently signal failure, consider changing it to return/raise on failure and only updating local state + flashing success when the upload succeeds.

                update_blob(row_id, activity)
                for i, act in enumerate(activities):
                    if act[0] == row_id:
                        activities[i] = (row_id, activity)
                        break

samples/web-app-managed-identity/python/src/app.py:242

• The add path flashes “Activity added successfully.” after calling create_blob_if_not_exists(), but create_blob_if_not_exists() catches exceptions and only prints them. This can show a success toast even when the upload failed. Prefer propagating/returning status and gating the success flash + append on success.

                timestamp = datetime.datetime.now().strftime("%Y-%m-%d-%H-%M-%S")
                name = f"{timestamp}-activity.txt"
                create_blob_if_not_exists(name, activity)
                activities.append((name, activity))
                flash('Activity added successfully.')

samples/web-app-sql-database/python/src/templates/index.html:104

• The add/edit modal form hard-codes action="/". Using url_for('index') (or omitting action to post back to the current route) is more robust if the app is mounted under a URL prefix or behind a reverse proxy with a sub-path.

    <form id="activity-form" method="post" action="/" novalidate>
      <input type="hidden" id="f-row-id" name="row_id" value="" />
      <div class="field">
        <label for="f-activity">Activity <span style="color:#ef4444">*</span></label>
        <input id="f-activity" name="activity" type="text" placeholder="e.g. Snorkelling at Coral Bay" required />

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[DrisDary]

Amazing Job @paolosalvatori can't wait to use this new version of the vacation planner 🥳

[paolosalvatori]

Amazing Job @paolosalvatori can't wait to use this new version of the vacation planner 🥳
Oh man, the UI is way better looking and it's consistent across all the demos🎉