Plugins: Add grafana/user/profile/tab plugin extension point

[joeyorlando]

What is this feature?

This PR adds a new plugin component extension point, grafana/user/profile/tab, allowing plugins to render content on the /profile.

• If no plugins have registered components against this extension point, the profile page is unchanged
• If at least one plugin has registered a component, tabs are shown at the top of the page. Core is the default tab and represents the pre-existing settings. The remaining tab(s) are dependant based on what plugin(s) have registered against this extension point. For example, the following code within a plugin would result in this:

const extensionPointId = 'grafana/user/profile/settings';

const IRMSettingsTabTitle = 'IRM';
const OnCallSettingsTabTitle = 'OnCall';

plugin.configureExtensionComponent({
  title: IRMSettingsTabTitle,
  description: "", // not used with this extension point, but required by the TS type
  extensionPointId,
  component: MobileAppConnectionQRCode,
});

plugin.configureExtensionComponent({
  title: IRMSettingsTabTitle,
  description: "", // not used with this extension point, but required by the TS type
  extensionPointId,
  component: SomeMoreIRMSettings,
});

plugin.configureExtensionComponent({
  title: OnCallSettingsTabTitle,
  description: '', // not used with this extension point, but required by the TS type
  extensionPointId,
  component: GrafanaOnCallSettings,
});

• the /profile page will now look for a tab query parameter. If this is equal to any of the tab titles (case-insensitive), that tab will be rendered directly on page load.

Note: multiple plugins can render content to the same tab. Tabs + tab content are decided based on unique title attributes. Any duplicates are grouped together and rendered within the same tab (this will be useful for example in the "IRM" use-case where Grafana OnCall and Grafana Incident may each need to render some shared IRM-level settings; example mobile app QR code).

Why do we need this feature?

Grafana OnCall and Grafana Incident teams have a quarterly milestone to add Grafana Incident features to the IRM mobile app (previously OnCall mobile app). Part of this project involves moving the QR authentication code from within Grafana OnCall to somewhere "higher-up" within core Grafana. Since this is a shared setting between OnCall and Incident it made sense to move it to /profile.

Who is this feature for?

Plugin developers.

Which issue(s) does this PR fix?:

This unblocks grafana/oncall#3296

Please check that:

• It works as expected from a user's perspective.
• If this is a pre-GA feature, it is behind a feature toggle.
• The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

[joeyorlando]

See grafana/plugin-tools#557 for docs update PR

[ashharrison90]

generally looks good 👍

think we need to refactor slightly to make clear the separation between the tab query param (or id) and the tab title (or title). that's especially important for the core tab, because we'll want to translate that so we can't rely on the title.

shout if anything doesn't make sense 👍

[ashharrison90]

why should it be case-insensitive? 🤔 afaik all our urls are supposed to be lower case

[joeyorlando]

I think I was overthinking edge-cases here. Your proposed approach of distinguishing between tab ids (always lowercased) & titles makes things simpler imo 👍

[ashharrison90]

why use toPairs instead of Object.entries? 🤔

with the new structure, this will return [id, pluginExtensionComponents instead of [title, pluginExtensionComponents]

[joeyorlando]

updated this to use Object.entries, thanks for the suggestion! (this is how you know I'm (mostly) a backend engineer 🤓)

this:

Object.entries(groupedExtensionComponents).map(([title, pluginExtensionComponents])

will still return [title, pluginExtensionComponents] since I'm grouping the registered extension point components here by title. Nevertheless, I've added this small util function to convert a tab title to a tab id.

[ashharrison90]

accidentally approved when i meant to just leave a comment... so now i've gotta request changes 😂

[ashharrison90]

i've pinged in our channel to see if we can get a second pair of 👀 on it just for a sanity check

one more thing @joshhunt pointed out, i think in https://raintank-corp.slack.com/archives/C064R17Q1A8/p1699964541932529 we discussed calling the default tab General instead of Core - can we make that change (and for the internal id as well). (sorry for not raising that sooner 🤦 )

[joeyorlando]

@ashharrison90 no worries, I've updated "Core" -> "General".

Question regarding the translation .json files (as this is my first grafana/grafana PR that touches these). Most of the diff'd .json files seem to have user-profile.tabs.general as blank. Also, I see in the docs you linked:

To update phrases in any translated language, edit the phrase in Crowdin. Do not edit the {locale}/grafana.json

I don't seem to have access to the project in crowdin (despite having access to grafana.crowdin.com). Anything more I need to do here or this is good as-is?

[ashharrison90]

lgtm 🚀

let's see if we can get 1 more from @grafana/grafana-frontend-platform to approve as well 🙏

re: translations - nope, you're all set. all you need to make sure is that the english string (and pseudo string) is present, the empty strings in other languages is expected.

what happens is those keys are added to crowdin, then external translators will add the other language translations to crowdin. a github action then syncs the changes from crowdin back to the main repo.

[torkelo]

Why use a query parameter here and not separate routes?