fix(toolbar) disable the profile button based on the toolbar logic (#13696)

react/features/base/config/configType.ts

@@ -1,4 +1,4 @@
-type ToolbarButtons = 'camera' |
+export type ToolbarButton = 'camera' |
     'chat' |
     'closedcaptions' |
     'desktop' |
@@ -15,6 +15,9 @@ type ToolbarButtons = 'camera' |
     'linktosalesforce' |
     'livestreaming' |
     'microphone' |
+    'mute-everyone' |
+    'mute-video-everyone' |
+    'noisesuppression' |
     'participants-pane' |
     'profile' |
     'raisehand' |
@@ -30,6 +33,7 @@ type ToolbarButtons = 'camera' |
     'tileview' |
     'toggle-camera' |
     'videoquality' |
+    'whiteboard' |
     '__end';
 
 type ButtonsWithNotifyClick = 'camera' |
@@ -579,7 +583,7 @@ export interface IConfig {
     tokenAuthUrl?: string;
     tokenAuthUrlAutoRedirect?: string;
     tokenLogoutUrl?: string;
-    toolbarButtons?: Array<ToolbarButtons>;
+    toolbarButtons?: Array<ToolbarButton>;
     toolbarConfig?: {
         alwaysVisible?: boolean;
         autoHideWhileChatIsOpen?: boolean;

react/features/base/config/constants.ts

@@ -1,3 +1,5 @@
+import { ToolbarButton } from './configType';
+
 /**
  * The prefix of the {@code localStorage} key into which {@link storeConfig}
  * stores and from which {@link restoreConfig} restores.
@@ -13,7 +15,7 @@ export const _CONFIG_STORE_PREFIX = 'config.js';
  * @protected
  * @type Array<string>
  */
-export const TOOLBAR_BUTTONS = [
+export const TOOLBAR_BUTTONS: ToolbarButton[] = [
     'camera',
     'chat',
     'closedcaptions',

react/features/base/config/functions.web.ts

@@ -7,7 +7,8 @@ import {
     IDeeplinkingConfig,
     IDeeplinkingMobileConfig,
     IDeeplinkingPlatformConfig,
-    NotifyClickButton
+    NotifyClickButton,
+    ToolbarButton
 } from './configType';
 import { TOOLBAR_BUTTONS } from './constants';
 
@@ -46,7 +47,7 @@ export function getToolbarButtons(state: IReduxState): Array<string> {
     const buttons = Array.isArray(toolbarButtons) ? toolbarButtons : TOOLBAR_BUTTONS;
 
     if (customButtons) {
-        buttons.push(...customButtons);
+        buttons.push(...customButtons as ToolbarButton[]);
     }
 
     return buttons;

react/features/base/config/reducer.ts

@@ -16,8 +16,10 @@ import {
     IDeeplinkingConfig,
     IDeeplinkingMobileConfig,
     IDeeplinkingPlatformConfig,
-    IMobileDynamicLink
+    IMobileDynamicLink,
+    ToolbarButton
 } from './configType';
+import { TOOLBAR_BUTTONS } from './constants';
 import { _cleanupConfig, _setDeeplinkingDefaults } from './functions';
 
 /**
@@ -546,6 +548,11 @@ function _translateLegacyConfig(oldValue: IConfig) {
         };
     }
 
+    if (oldValue.disableProfile) {
+        newValue.toolbarButtons = (newValue.toolbarButtons || TOOLBAR_BUTTONS)
+            .filter((button: ToolbarButton) => button !== 'profile');
+    }
+
     _setDeeplinkingDefaults(newValue.deeplinking as IDeeplinkingConfig);
 
     return newValue;

react/features/toolbox/components/web/ProfileButton.ts

@@ -103,14 +103,13 @@ class ProfileButton extends AbstractButton<IProps> {
  * @returns {Object}
  */
 const mapStateToProps = (state: IReduxState) => {
-    const { defaultLocalDisplayName, disableProfile } = state['features/base/config'];
+    const { defaultLocalDisplayName } = state['features/base/config'];
 
     return {
         _defaultLocalDisplayName: defaultLocalDisplayName ?? '',
         _localParticipant: getLocalParticipant(state),
         _unclickable: !interfaceConfig.SETTINGS_SECTIONS.includes('profile'),
-        customClass: 'profile-button-avatar',
-        visible: !disableProfile
+        customClass: 'profile-button-avatar'
     };
 };