Channel Header Plugin Changes

Plugin component location changing from channel header to new App Bar

Webapp plugins have been able to register custom components in the channel header. With the global header introduced in v6.0, the channel header now has a more specific purpose, specifically focused on the current channel. Since the channel header components have been treated as channel-specific, this location is being replaced by a new location called the App Bar.

The channel header location is being deprecated in version 7.0 of the application with the release of the App Bar.

To access the App Bar, enable the experimental setting in the system console at “Experimental > Features > Enable App Bar”

If a plugin is not updated to register an icon on the App Bar, it will automatically be moved to the App Bar when the App Bar is enabled. Starting in v8.0 (June 2023), the App Bar will be enabled by default.

Migrating your plugin component to the App Bar

If you are a developer with an existing plugin that registers an icon in the channel header, you will need to make some minor changes to your plugin to smoothly transition to this new UI. We’ve made it simple to register both a channel header icon, and add the new App Bar registration simultaneously. This way, your plugin will work on older servers without the App Bar (using the channel header), and when the App Bar is enabled on a server. The App Bar component will automatically be used instead. You can use this PR as an example of a plugin implementing an App Bar icon.

In order to maintain backwards compatibility with older server versions, the strategy we’ve taken with the App Bar is to have plugins continue registering any channel header components using registerChannelHeaderButtonAction​, while simultaneously registering the new component using registerAppBarComponent. Plugins should register only one component to the App Bar. Ideally the plugin supports rendering content in the RHS pane when this button is clicked. The icon is automatically highlighted in this case, as seen in the screenshot below.