Skip to content

fix(chat): fix UI glitches and prepare for gitlab-ui update

Denys Mishunov requested to merge dmishunov/duo-chat-ui-polish into main

Description

  • UI bug fixes to improve the overall user experience:
    • Fixed color of the copy-code button.
    • Fixed colors for the legal warning.
      • Fixes for both older and newer @gitlab/ui versions.
  • Preparation for updating the @gitlab/ui dependency for Duo Chat to v87.2.1.
    • Fixed colors for shadow gradient at the bottom of the chat.
    • Cancel button should show stop icon -used to be just white.

Notes

This is Part 1 of 3.
Part 2: Implementing the cancel button and upgrading @gitlab/ui - MR here !1783 (merged).
Part 3: (MR/issue not yet created) Implementing the Insert Snippet functionality.

Screenshots (if appropriate)

The copy-code button

Click to expand
Theme On main branch After
Solarized Light Screenshot_2024-07-16_at_08.35.50 Screenshot_2024-07-16_at_08.35.57
Solarized Dark (modified) Screenshot_2024-07-16_at_08.35.36 Screenshot_2024-07-16_at_08.35.21

Legal warning

Note: also broken in a different way on main. Fixed for both cases.

Click to expand
Theme On main branch With @gitlab/ui v87.2.1 After
Solarized Light Screenshot_2024-07-30_at_22.03.26 Screenshot_2024-07-30_at_22.07.41 Screenshot_2024-07-30_at_22.02.49
Solarized Dark (modified) Screenshot_2024-07-30_at_22.03.18 Screenshot_2024-07-30_at_22.07.31 Screenshot_2024-07-30_at_22.02.59

The shadow gradient at the bottom of the chat

Click to expand
Theme With @gitlab/ui v87.2.1 After
Solarized Light Screenshot_2024-07-16_at_08.15.34 Screenshot_2024-07-16_at_08.15.25
Solarized Dark (modified) Screenshot_2024-07-16_at_08.14.14 Screenshot_2024-07-16_at_08.13.46

The Cancel Button

Click to expand
Theme With @gitlab/ui v87.2.1 After
Solarized Light Screenshot_2024-07-16_at_08.45.58 Screenshot_2024-07-16_at_08.43.24
Solarized Dark (modified) Screenshot_2024-07-16_at_08.45.49 Screenshot_2024-07-16_at_08.44.00

How was this tested?

This MR should work for BOTH current (v78.10.0) and updated (v87.2.1) version of @gitlab/ui. So for testing, we're going to run through both.

  1. Check out the branch and run the test extension.
  2. Test the scenarios above and verify that everything looks good 👍🏻
  3. Apply the following patch:
diff --git a/webviews/vue2/package.json b/webviews/vue2/package.json
index efdb6aef..c804a48d 100644
--- a/webviews/vue2/package.json
+++ b/webviews/vue2/package.json
@@ -15,7 +15,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@gitlab/ui": "^78.10.0",
+    "@gitlab/ui": "87.2.1",
     "dompurify": "^3.0.5",
     "v-tooltip": "^2.1.3",
     "vue": "^2.7.16",
  1. Run npm install and re-run the test extension.
  2. Test the scenarios above and verify that everything still looks good 👍🏻

What CHANGELOG entry will this MR create?

  • fix: Bug fix fixes - a user-facing issue in production - included in changelog
  • feature: New feature - a user-facing change which adds functionality - included in changelog
  • BREAKING CHANGE: (fix or feature that would cause existing functionality to change) - should bump major version, mentioned in the changelog
  • None - other non-user-facing changes
Edited by Tristan Read

Merge request reports