feat(GlDuoChat): view context item content/details

What does this MR do?

feat(GlDuoChat): view context item content/details

• adds support for view context item content/details
• clicking selected context item of type file/git will emit event to load additional data, and displays in new details modal
• adds hook for syntax highlighting the content from consumer applications, in the same manner the chat highlighting is done (via provided renderGFM fn)

This MR is a continuation from !4615 (merged)

Screenshots or screen recordings

Note: syntax highlighting is applied by external consumers of Duo Chat (e.g. VSCode) and so does not show within Storybook

Modal loading state

Integration merge requests

• GitLab: mr_url
• CustomersDot: mr_url
• Status Page: mr_url

Does this MR meet the acceptance criteria?

This checklist encourages the authors, reviewers, and maintainers of merge requests (MRs) to confirm changes were analyzed for conformity with the project's guidelines, security and accessibility.

Toggle the acceptance checklist

Conformity

• Code review guidelines.
• GitLab UI's contributing guidelines.
• If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
• If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
• If the MR changes a component's API, integration MR(s) have been opened (see integration merge requests above).
• Added the ~"component:*" label(s) if applicable.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• Security reports checked/validated by a reviewer from the AppSec team

Accessibility

If this MR adds or modifies a component, take a few moments to review the following:

• All actions and functionality can be done with a keyboard.
• Links, buttons, and controls have a visible focus state.
• All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
• Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
• Color combinations have sufficient contrast.

changed milestone to %17.5

added groupeditor extensions typefeature labels

assigned to @elwyn-gitlab

added Category:Editor Extensions devopscreate sectiondev labels

removed Category:Editor Extensions devopscreate sectiondev labels

added Category:Editor Extensions devopscreate sectiondev labels

	2 Warnings
	This merge request is quite big (548 lines changed), please consider splitting it into multiple merge requests.
	You've changed some components or directives, but didn't change corresponding tests. That's OK as long as you're refactoring existing code. If not, please consider adding/updating tests.

Minor release (conventional commits)

This Merge Request will trigger a minor release of GitLab UI, triggered by commit: 63909dd7

This will bump the second part of the version number, e.g. v1.2.3 -> v1.3.0.

Reviewer roulette

Changes that require review have been detected! A merge request is normally reviewed by both a reviewer and a maintainer in its primary category and by a maintainer in all other categories.

To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.

To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.

Once you've decided who will review this merge request, mention them as you normally would! Danger does not automatically notify them for you.

Category	Reviewer	Maintainer
frontend	@lorenzvanherwaarden (UTC+2, 11 hours behind author)	@vanessaotto (UTC+2, 11 hours behind author)

Missing spec changes

The following spec files were expected to have changes based on the changes in this Merge Request:

• src/components/experimental/duo/chat/components/duo_chat_context/mock_context_data.spec.js
• src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.spec.js
• src/components/experimental/duo/chat/duo_chat.spec.js

Consider adding or updating these to ensure new component/directive behaviors are covered by tests.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

changed the description

changed the description

mentioned in merge request !4615 (merged)

mentioned in merge request gitlab-vscode-extension!1964 (merged)

mentioned in merge request gitlab-org/editor-extensions/gitlab-lsp!877 (merged)

Hey @jannik_lehmann, this is the other half of that previous MR I split down the middle, I wonder if you could please take a look for me?

requested review from @jannik_lehmann

Question (blocking): It’s currently not possible to open this modal using the keyboard. Can we make it keyboard-accessible?

Demo
2024-09-30_09-49-38

Thanks for working on this @elwyn-gitlab Left some comments for you consideration

added 3 commits

• 127691f7 - 1 commit from branch local-git-context-category
• f78b5ff9 - feat(GlDuoChat): view context item content/details
• 91622875 - refactor: apply reviewer suggestions

Compare with previous version

added 1 commit

• 63909dd7 - feat(GlDuoChat): view context item content/details

Compare with previous version

approved this merge request

Thanks for working on this @elwyn-gitlab LGTM! I have one non-blocking thing, so happy to approve as is and take care of this in a follow-up

Small friendly reminder, with MR's in review, please don't squash the commits since this does make finding the new changes tedious, thank you!

added 1 commit

• 8e8a4c3d - fix: don't open details modal if selecting close button via keyboard

Compare with previous version

requested review from @ohoral

I have reviewed the merge request and left a mix of questions and recommendations. The review covers topics such as security concerns with the v-safe-html directive, test specificity, event handling, and potential Vue version compatibility. I estimate there is a decent amount of work required to address these points, though this is only an estimate based on the comments provided.

added workflowin review label

added 2 commits

• 0be0f5d1 - refactor: rename component for more clarity
• b255422c - chore: apply reviewer suggestions

Compare with previous version

mentioned in issue gitlab#497425 (closed)

approved this merge request

resolved all threads

enabled automatic add to merge train when checks pass

resolved all threads

started a merge train

removed this merge request from the merge train because the pipeline did not succeed. Learn more.

enabled automatic add to merge train when checks pass

started a merge train

merged

mentioned in commit 0889f495