MM-11560 - Allow plugins to add channel header tooltips (#1995)

* Allow plugins to add channel header tooltips * Fix non-empty check * Use dropdownText if tooltip isn't set
mattermost · Nov 5, 2018 · 91ceb13 · 91ceb13
1 parent 4481dd5
commit 91ceb13
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 10 deletions.
diff --git a/components/channel_header/components/header_icon_wrapper.jsx b/components/channel_header/components/header_icon_wrapper.jsx
@@ -15,6 +15,7 @@ export default function HeaderIconWrapper({
  buttonId,
  onClick,
  tooltipKey,
+ tooltipText,
 }) {
  function getTooltip(key) {
  const toolTips = {
@@ -61,7 +62,20 @@ export default function HeaderIconWrapper({
  );
  }
 
- const tooltip = getTooltip(tooltipKey);
+ let tooltip;
+ if (tooltipKey === 'plugin' && tooltipText) {
+ tooltip = (
+ <Tooltip
+ id='pluginTooltip'
+ className=''
+ >
+ <span>{tooltipText}</span>
+ </Tooltip>
+ );
+ } else {
+ tooltip = getTooltip(tooltipKey);
+ }
+
  if (tooltip) {
  return (
  <div className='flex-child'>
@@ -102,4 +116,5 @@ HeaderIconWrapper.propTypes = {
  iconComponent: PropTypes.element.isRequired,
  onClick: PropTypes.func.isRequired,
  tooltipKey: PropTypes.string,
+ tooltipText: PropTypes.string,
 };
diff --git a/plugins/channel_header_plug/channel_header_plug.jsx b/plugins/channel_header_plug/channel_header_plug.jsx
@@ -122,6 +122,8 @@ export default class ChannelHeaderPlug extends React.PureComponent {
  iconComponent={plug.icon}
  onClick={() => plug.action(this.props.channel, this.props.channelMember)}
  buttonId={plug.id}
+ tooltipKey={'plugin'}
+ tooltipText={plug.tooltipText ? plug.tooltipText : plug.dropdownText}
  />
  );
  }

diff --git a/plugins/registry.js b/plugins/registry.js
@@ -86,7 +86,8 @@ export default class PluginRegistry {
  // - icon - React element to use as the button's icon
  // - action - a function called when the button is clicked, passed the channel and channel member as arguments
  // - dropdown_text - string or React element shown for the dropdown button description
- registerChannelHeaderButtonAction(icon, action, dropdownText) {
+ // - tooltip_text - string shown for tooltip appear on hover
+ registerChannelHeaderButtonAction(icon, action, dropdownText, tooltipText) {
  const id = generateId();
 
  const data = {
@@ -95,6 +96,7 @@ export default class PluginRegistry {
  icon: resolveReactElement(icon),
  action,
  dropdownText: resolveReactElement(dropdownText),
+ tooltipText,
  };
 
  store.dispatch({

diff --git a/tests/components/channel_header/components/__snapshots__/header_icon_wrapper.test.jsx.snap b/tests/components/channel_header/components/__snapshots__/header_icon_wrapper.test.jsx.snap
@@ -129,6 +129,62 @@ exports[`components/channel_header/components/HeaderIconWrapper should match sna
 </div>
 `;
 
+exports[`components/channel_header/components/HeaderIconWrapper should match snapshot, on PluginIcon with tooltipText 1`] = `
+<div
+ className="flex-child"
+>
+ <OverlayTrigger
+ defaultOverlayShown={false}
+ delayShow={400}
+ overlay={
+ <Tooltip
+ bsClass="tooltip"
+ className=""
+ id="pluginTooltip"
+ placement="right"
+ >
+ <span>
+ plugin_tooltip_text
+ </span>
+ </Tooltip>
+ }
+ placement="bottom"
+ trigger={
+ Array [
+ "hover",
+ "focus",
+ ]
+ }
+ >
+ <button
+ className="button_class"
+ id="button_id"
+ onClick={[Function]}
+ >
+ <i
+ className="fa fa-anchor"
+ />
+ </button>
+ </OverlayTrigger>
+</div>
+`;
+
+exports[`components/channel_header/components/HeaderIconWrapper should match snapshot, on PluginIcon without tooltipText 1`] = `
+<div
+ className="flex-child"
+>
+ <button
+ className="button_class"
+ id="button_id"
+ onClick={[Function]}
+ >
+ <i
+ className="fa fa-anchor"
+ />
+ </button>
+</div>
+`;
+
 exports[`components/channel_header/components/HeaderIconWrapper should match snapshot, on SearchIcon 1`] = `
 <div
  className="flex-child"

diff --git a/tests/components/channel_header/components/header_icon_wrapper.test.jsx b/tests/components/channel_header/components/header_icon_wrapper.test.jsx
@@ -83,4 +83,30 @@ describe('components/channel_header/components/HeaderIconWrapper', () => {
 
  expect(wrapper).toMatchSnapshot();
  });
+
+ test('should match snapshot, on PluginIcon with tooltipText', () => {
+ const pluginIcon = (
+ <i className='fa fa-anchor'/>
+ );
+
+ const props = {...baseProps, iconComponent: pluginIcon, tooltipKey: 'plugin', tooltipText: 'plugin_tooltip_text'};
+ const wrapper = shallow(
+ <HeaderIconWrapper {...props}/>
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('should match snapshot, on PluginIcon without tooltipText', () => {
+ const pluginIcon = (
+ <i className='fa fa-anchor'/>
+ );
+
+ const props = {...baseProps, iconComponent: pluginIcon, tooltipKey: 'plugin'};
+ const wrapper = shallow(
+ <HeaderIconWrapper {...props}/>
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
 });
diff --git a/tests/plugins/__snapshots__/channel_header_plug.test.jsx.snap b/tests/plugins/__snapshots__/channel_header_plug.test.jsx.snap
@@ -23,6 +23,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with one extended compo
  />,
  "id": "someid",
  "pluginId": "pluginid",
+ "tooltipText": "some tooltip text",
  },
  ]
  }
@@ -37,19 +38,49 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with one extended compo
  />
  }
  onClick={[Function]}
+ tooltipKey="plugin"
+ tooltipText="some tooltip text"
  >
  <div
  className="flex-child"
  >
- <button
- className="channel-header__icon style--none"
- id="someid"
- onClick={[Function]}
+ <OverlayTrigger
+ defaultOverlayShown={false}
+ delayShow={400}
+ overlay={
+ <Tooltip
+ bsClass="tooltip"
+ className=""
+ id="pluginTooltip"
+ placement="right"
+ >
+ <span>
+ some tooltip text
+ </span>
+ </Tooltip>
+ }
+ placement="bottom"
+ trigger={
+ Array [
+ "hover",
+ "focus",
+ ]
+ }
  >
- <i
- className="fa fa-anchor"
- />
- </button>
+ <button
+ className="channel-header__icon style--none"
+ id="someid"
+ onBlur={[Function]}
+ onClick={[Function]}
+ onFocus={[Function]}
+ onMouseOut={[Function]}
+ onMouseOver={[Function]}
+ >
+ <i
+ className="fa fa-anchor"
+ />
+ </button>
+ </OverlayTrigger>
  </div>
  </HeaderIconWrapper>
 </ChannelHeaderPlug>
@@ -69,6 +100,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with two extended compo
  />,
  "id": "someid",
  "pluginId": "pluginid",
+ "tooltipText": "some tooltip text",
  },
  Object {
  "action": [Function],
@@ -78,6 +110,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with two extended compo
  />,
  "id": "someid2",
  "pluginId": "pluginid",
+ "tooltipText": "some tooltip text",
  },
  ]
  }

diff --git a/tests/plugins/channel_header_plug.test.jsx b/tests/plugins/channel_header_plug.test.jsx
@@ -13,6 +13,7 @@ describe('plugins/ChannelHeaderPlug', () => {
  icon: <i className='fa fa-anchor'/>,
  action: jest.fn,
  dropdownText: 'some dropdown text',
+ tooltipText: 'some tooltip text',
  };
 
  test('should match snapshot with no extended component', () => {