You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

HelpButton.ts 1.9KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import { connect } from 'react-redux';
  2. import { createToolbarEvent } from '../../analytics/AnalyticsEvents';
  3. import { sendAnalytics } from '../../analytics/functions';
  4. import { IReduxState } from '../../app/types';
  5. import { HELP_BUTTON_ENABLED } from '../../base/flags/constants';
  6. import { getFeatureFlag } from '../../base/flags/functions';
  7. import { translate } from '../../base/i18n/functions';
  8. import { IconHelp } from '../../base/icons/svg';
  9. import AbstractButton, { IProps as AbstractButtonProps } from '../../base/toolbox/components/AbstractButton';
  10. import { openURLInBrowser } from '../../base/util/openURLInBrowser';
  11. interface IProps extends AbstractButtonProps {
  12. /**
  13. * The URL to the user documentation.
  14. */
  15. _userDocumentationURL: string;
  16. }
  17. /**
  18. * Implements an {@link AbstractButton} to open the user documentation in a new window.
  19. */
  20. class HelpButton extends AbstractButton<IProps> {
  21. accessibilityLabel = 'toolbar.accessibilityLabel.help';
  22. icon = IconHelp;
  23. label = 'toolbar.help';
  24. tooltip = 'toolbar.help';
  25. /**
  26. * Handles clicking / pressing the button, and opens a new window with the user documentation.
  27. *
  28. * @private
  29. * @returns {void}
  30. */
  31. _handleClick() {
  32. const { _userDocumentationURL } = this.props;
  33. sendAnalytics(createToolbarEvent('help.pressed'));
  34. openURLInBrowser(_userDocumentationURL);
  35. }
  36. }
  37. /**
  38. * Maps part of the redux state to the component's props.
  39. *
  40. * @param {Object} state - The redux store/state.
  41. * @returns {Object}
  42. */
  43. function _mapStateToProps(state: IReduxState) {
  44. const { userDocumentationURL } = state['features/base/config'].deploymentUrls || {};
  45. const enabled = getFeatureFlag(state, HELP_BUTTON_ENABLED, true);
  46. const visible = typeof userDocumentationURL === 'string' && enabled;
  47. return {
  48. _userDocumentationURL: userDocumentationURL ?? '',
  49. visible
  50. };
  51. }
  52. export default translate(connect(_mapStateToProps)(HelpButton));