feat(toolbox) notify click for hangup-menu and end-meeting menu button

config.js

@@ -767,11 +767,13 @@ var config = {
     //     'desktop',
     //     'download',
     //     'embedmeeting',
+    //     'end-meeting',
     //     'etherpad',
     //     'feedback',
     //     'filmstrip',
     //     'fullscreen',
     //     'hangup',
+    //     'hangup-menu',
     //     'help',
     //     {
     //         key: 'invite',

react/features/base/config/configType.ts

@@ -39,11 +39,13 @@ type ButtonsWithNotifyClick = 'camera' |
     'desktop' |
     'download' |
     'embedmeeting' |
+    'end-meeting' |
     'etherpad' |
     'feedback' |
     'filmstrip' |
     'fullscreen' |
     'hangup' |
+    'hangup-menu' |
     'help' |
     'invite' |
     'livestreaming' |

react/features/toolbox/components/web/EndConferenceButton.tsx

@@ -4,16 +4,36 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { endConference } from '../../../base/conference/actions';
 import { isLocalParticipantModerator } from '../../../base/participants/functions';
-import Button from '../../../base/ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../base/ui/constants.web';
 import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
 
+import { HangupContextMenuItem } from './HangupContextMenuItem';
+
+/**
+ * The type of the React {@code Component} props of {@link EndConferenceButton}.
+ */
+type Props = {
+
+    /**
+     * Key to use for toolbarButtonClicked event.
+     */
+    buttonKey: string;
+
+    /**
+     * Notify mode for `toolbarButtonClicked` event -
+     * whether to only notify or to also prevent button click routine.
+     */
+    notifyMode?: string;
+};
+
+
 /**
  * Button to end the conference for all participants.
  *
+ * @param {Object} props - Component's props.
  * @returns {JSX.Element} - The end conference button.
  */
-export const EndConferenceButton = () => {
+export const EndConferenceButton = (props: Props) => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
     const _isLocalParticipantModerator = useSelector(isLocalParticipantModerator);
@@ -24,11 +44,12 @@ export const EndConferenceButton = () => {
     }, [ dispatch ]);
 
     return (<>
-        { !_isInBreakoutRoom && _isLocalParticipantModerator && <Button
+        { !_isInBreakoutRoom && _isLocalParticipantModerator && <HangupContextMenuItem
             accessibilityLabel = { t('toolbar.accessibilityLabel.endConference') }
-            fullWidth = { true }
+            buttonKey = { props.buttonKey }
+            buttonType = { BUTTON_TYPES.DESTRUCTIVE }
             label = { t('toolbar.endConference') }
-            onClick = { onEndConference }
+            notifyMode = { props.notifyMode }
-            type = { BUTTON_TYPES.DESTRUCTIVE } /> }
+            onClick = { onEndConference } /> }
     </>);
 };

react/features/toolbox/components/web/HangupContextMenuItem.tsx

@@ -0,0 +1,75 @@
+import React, { useCallback } from 'react';
+
+import Button from '../../../base/ui/components/web/Button';
+import { NOTIFY_CLICK_MODE } from '../../constants';
+
+
+/**
+ * The type of the React {@code Component} props of {@link HangupContextMenuItem}.
+ */
+type Props = {
+
+    /**
+     * Accessibility label for the button.
+     */
+    accessibilityLabel: string;
+
+    /**
+     * Key to use for toolbarButtonClicked event.
+     */
+    buttonKey: string;
+
+    /**
+     * Type of button to display.
+     */
+    buttonType: string;
+
+    /**
+     * Text associated with the button.
+     */
+    label: string;
+
+    /**
+     * Notify mode for `toolbarButtonClicked` event -
+     * whether to only notify or to also prevent button click routine.
+     */
+    notifyMode?: string;
+
+    /**
+     * Callback that performs the actual hangup action.
+     */
+    onClick: Function;
+};
+
+declare let APP: any;
+
+/**
+ * Implementation of a button to be rendered within Hangup context menu.
+ *
+ * @param {Object} props - Component's props.
+ * @returns {JSX.Element} - Button that would trigger the hangup action.
+ */
+export const HangupContextMenuItem = (props: Props) => {
+    const shouldNotify = props.notifyMode !== undefined;
+    const shouldPreventExecution = props.notifyMode === NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY;
+
+    const _onClick = useCallback(() => {
+        if (shouldNotify) {
+            APP.API.notifyToolbarButtonClicked(props.buttonKey, shouldPreventExecution);
+        }
+
+        if (!shouldPreventExecution) {
+            props.onClick();
+        }
+    }, []);
+
+    return (
+        <Button
+            accessibilityLabel = { props.accessibilityLabel }
+            fullWidth = { true }
+            label = { props.label }
+            onClick = { _onClick }
+            type = { props.buttonType } />
+    );
+};
+

react/features/toolbox/components/web/HangupMenuButton.tsx

@@ -28,6 +28,12 @@ interface IProps extends WithTranslation {
      */
     isOpen: boolean;
 
+    /**
+     * Notify mode for `toolbarButtonClicked` event -
+     * whether to only notify or to also prevent button click routine.
+     */
+    notifyMode?: string;
+
     /**
      * Callback to change the visibility of the hangup menu.
      */
@@ -88,9 +94,11 @@ class HangupMenuButton extends Component<IProps> {
                     trigger = 'click'
                     visible = { isOpen }>
                     <HangupToggleButton
+                        buttonKey = 'hangup-menu'
                         customClass = 'hangup-menu-button'
                         handleClick = { this._toggleDialogVisibility }
                         isOpen = { isOpen }
+                        notifyMode = { this.props.notifyMode }
                         onKeyDown = { this._onEscClick } />
                 </Popover>
             </div>

react/features/toolbox/components/web/LeaveConferenceButton.tsx

@@ -5,15 +5,35 @@ import { useDispatch } from 'react-redux';
 import { createToolbarEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
 import { leaveConference } from '../../../base/conference/actions';
-import Button from '../../../base/ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../base/ui/constants.web';
 
+import { HangupContextMenuItem } from './HangupContextMenuItem';
+
+/**
+ * The type of the React {@code Component} props of {@link LeaveConferenceButton}.
+ */
+type Props = {
+
+    /**
+     * Key to use for toolbarButtonClicked event.
+     */
+    buttonKey: string;
+
+    /**
+     * Notify mode for `toolbarButtonClicked` event -
+     * whether to only notify or to also prevent button click routine.
+     */
+    notifyMode?: string;
+};
+
+
 /**
  * Button to leave the conference.
  *
+ * @param {Object} props - Component's props.
  * @returns {JSX.Element} - The leave conference button.
  */
-export const LeaveConferenceButton = () => {
+export const LeaveConferenceButton = (props: Props) => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
 
@@ -23,11 +43,12 @@ export const LeaveConferenceButton = () => {
     }, [ dispatch ]);
 
     return (
-        <Button
+        <HangupContextMenuItem
             accessibilityLabel = { t('toolbar.accessibilityLabel.leaveConference') }
-            fullWidth = { true }
+            buttonKey = { props.buttonKey }
+            buttonType = { BUTTON_TYPES.SECONDARY }
             label = { t('toolbar.leaveConference') }
-            onClick = { onLeaveConference }
+            notifyMode = { props.notifyMode }
-            type = { BUTTON_TYPES.SECONDARY } />
+            onClick = { onLeaveConference } />
     );
 };

react/features/toolbox/components/web/Toolbox.tsx

@@ -1489,6 +1489,7 @@ class Toolbox extends Component<IProps> {
                                     ariaControls = 'hangup-menu'
                                     isOpen = { _hangupMenuVisible }
                                     key = 'hangup-menu'
+                                    notifyMode = { this._getButtonNotifyMode('hangup-menu') }
                                     onVisibilityChange = { this._onSetHangupVisible }>
                                     <ContextMenu
                                         accessibilityLabel = { t(toolbarAccLabel) }
@@ -1496,8 +1497,12 @@ class Toolbox extends Component<IProps> {
                                         hidden = { false }
                                         inDrawer = { _overflowDrawer }
                                         onKeyDown = { this._onEscKey }>
-                                        <EndConferenceButton />
+                                        <EndConferenceButton
-                                        <LeaveConferenceButton />
+                                            buttonKey = 'end-meeting'
+                                            notifyMode = { this._getButtonNotifyMode('end-meeting') } />
+                                        <LeaveConferenceButton
+                                            buttonKey = 'hangup'
+                                            notifyMode = { this._getButtonNotifyMode('hangup') } />
                                     </ContextMenu>
                                 </HangupMenuButton>
                                 : <HangupButton