Implement UI context metadata

[torchiaf]

Summary

Fixes #15528

Technical notes summary

It adds the new ui-context directive & store to handle the UI context metadata.

The directive will register the context on mount and unregister it before unmounting.
This means the context will be available in the store until the bound elements stay on screen.

Usage:

<div v-ui-context="{ tag: 'example-tag', path: 'some.path.in.component', description: 'An example context' }"></div>
or
<div v-ui-context="{ tag: 'example-tag', value: 'Direct Value', description: 'An example context with direct value' }"></div>
or
<div v-ui-context="{ tag: 'example-tag', description: 'An example context with text content' }">Text Content Value</div>

The context object must have a 'tag' and either a 'path' or a 'value'.
If both 'path' and 'value' are undefined, the element's textContent will be used as the value.

Areas or cases that should be tested

Areas which could experience regressions

Screenshot/Video

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes
• The PR has been reviewed in terms of Accessibility

[codyrancher]

I don't have a problem with the changes but I'm not sure I'm understanding the purpose or when I'd want to use this over say just a store or provide/inject.

Could you maybe elaborate some more on the situations we'd want to use this?

[torchiaf]

@codyrancher the purpose is to make available simple key: value objects for extension, for instance the AI assistant.
I don't expect we'll use it extensively - most of the info like current cluster or current namespaces are already available in the store - but consider that we have a page where we want to make accessible specific info, like labels or links, the simplest way is to use this v-ui-context (at least this is the way without having to parse the html from the extension).

[codyrancher]

@codyrancher the purpose is to make available simple key: value objects for extension, for instance the AI assistant. I don't expect we'll use it extensively - most of the info like current cluster or current namespaces are already available in the store - but consider that we have a page where we want to make accessible specific info, like labels or links, the simplest way is to use this v-ui-context (at least this is the way without having to parse the html from the extension).

Based on that info I would think provide/inject would be sufficient https://vuejs.org/guide/components/provide-inject.

I'm okay with it going in though.