Channel Header Plugin Changes

Where are my plugins? Plugin component location changing from channel header to new App Bar

Plugin components have most recently used the channel header. With the new layout of the web application introduced in v6.0, including the global header, the channel header now has a more specific purpose, specifically focused on the current channel.

The channel header location is being deprecated in version 7.0 of the application with the release of the App Bar, replaced by two new locations for plugins to place their components:

  • Start Call Button/Menu - Use this location if the plugin’s component starts an audio/video call.
  • App Bar - Use this location for all other use cases. Ideally the plugin can support rendering context in the RHS pane when this button is clicked.

If you don’t update your plugin to register an icon on the App Bar, nothing will visibly change in 7.0 and the beta. Channel header icons will remain in the same place for now. Starting in v8.0 (June 2023) plugin components in the channel header will no longer render and must be migrated to the App Bar.

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 easy to register a button using the current method, and add the new App Bar registration in parallel. This way, your plugin will work on older servers without the App Bar (as they do currently), and when the App Bar is enabled on a server — the icon will be moved to the app bar seamlessly. You can use this example PR to get started.

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.

The core webapp code coordinates between a given plugin’s registered channel header and registered App Bar components. Currently with the AppBarEnabled feature flag disabled by default: if the feature flag is enabled, the webapp will render a plugin’s App Bar components, and not its channel header components, and vise versa if the feature flag is disabled. This logic does not affect plugins that register only channel header components, meaning if we have the feature flag enabled, plugins that have not registered an App Bar component will still show its components in the channel header.

The webapp handles this logic, so the individual plugins should not have conditional logic based on this feature flag. For backwards compatibility, the individual plugins should take into account whether registry.registerAppBarComponent is available before calling it, and should register their components in both locations.

Deprecation

Starting in Mattermost v7.0, a warning will be logged to the browser’s dev tools console, if a plugin registers only a channel header component, and not either a Start Call Button component or App Bar component.

This check will occur after the webapp runs the plugin’s initialize function. It’s recommended that a plugin should render its App Bar component at all times. The plugin has the opportunity to provide an image URL to show as its icon, and text tooltip to express its action.