fix(overflow-menu) hide "more moderation controls" option if moderator settings tab disabled

react/features/participants-pane/components/web/FooterContextMenu.js

@@ -27,7 +27,11 @@ import {
     getParticipantCount,
     isEveryoneModerator
 } from '../../../base/participants';
-import { openSettingsDialog, SETTINGS_TABS } from '../../../settings';
+import {
+    SETTINGS_TABS,
+    openSettingsDialog,
+    shouldShowModeratorSettings
+} from '../../../settings';
 import { MuteEveryonesVideoDialog } from '../../../video-menu/components';
 
 const useStyles = makeStyles(theme => {
@@ -81,6 +85,7 @@ export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props
     const dispatch = useDispatch();
     const isModerationSupported = useSelector(isAvModerationSupported());
     const allModerators = useSelector(isEveryoneModerator);
+    const isModeratorSettingsTabEnabled = useSelector(shouldShowModeratorSettings);
     const participantCount = useSelector(getParticipantCount);
     const isAudioModerationEnabled = useSelector(isAvModerationEnabled(MEDIA_TYPE.AUDIO));
     const isVideoModerationEnabled = useSelector(isAvModerationEnabled(MEDIA_TYPE.VIDEO));
@@ -146,14 +151,16 @@ export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props
                     </div>
                 </ContextMenuItemGroup>
             )}
-            <ContextMenuItemGroup
-                actions = { [ {
-                    accessibilityLabel: t('participantsPane.actions.moreModerationControls'),
-                    id: 'participants-pane-open-moderation-control-settings',
-                    icon: IconHorizontalPoints,
-                    onClick: openModeratorSettings,
-                    text: t('participantsPane.actions.moreModerationControls')
-                } ] } />
+            {isModeratorSettingsTabEnabled && (
+                <ContextMenuItemGroup
+                    actions = { [ {
+                        accessibilityLabel: t('participantsPane.actions.moreModerationControls'),
+                        id: 'participants-pane-open-moderation-control-settings',
+                        icon: IconHorizontalPoints,
+                        onClick: openModeratorSettings,
+                        text: t('participantsPane.actions.moreModerationControls')
+                    } ] } />
+            )}
         </ContextMenu>
     );
 };

react/features/settings/functions.js

@@ -153,16 +153,11 @@ export function getModeratorTabProps(stateful: Object | Function) {
     } = state['features/base/conference'];
     const { disableReactionsModeration } = state['features/base/config'];
     const followMeActive = isFollowMeActive(state);
-    const configuredTabs = interfaceConfig.SETTINGS_SECTIONS || [];
-
-    const showModeratorSettings = Boolean(
-        conference
-        && configuredTabs.includes('moderator')
-        && isLocalParticipantModerator(state));
+    const showModeratorSettings = shouldShowModeratorSettings(state);
 
     // The settings sections to display.
     return {
-        showModeratorSettings,
+        showModeratorSettings: Boolean(conference && showModeratorSettings),
         disableReactionsModeration: Boolean(disableReactionsModeration),
         followMeActive: Boolean(conference && followMeActive),
         followMeEnabled: Boolean(conference && followMeEnabled),
@@ -172,6 +167,21 @@ export function getModeratorTabProps(stateful: Object | Function) {
     };
 }
 
+/**
+ * Returns true if moderator tab in settings should be visible/accessible.
+ *
+ * @param {(Function|Object)} stateful - The (whole) redux state, or redux's
+ * {@code getState} function to be used to retrieve the state.
+ * @returns {boolean} True to indicate that moderator tab should be visible, false otherwise.
+ */
+export function shouldShowModeratorSettings(stateful: Object | Function) {
+    const state = toState(stateful);
+
+    return Boolean(
+        isSettingEnabled('moderator')
+        && isLocalParticipantModerator(state));
+}
+
 /**
  * Returns the properties for the "Profile" tab from settings dialog from Redux
  * state.