Add a keyboard shortcut to toggle hidden event visibility when labs are enabled. (#7584)

Notes: The keyboard shortcut is control (or cmd) shift h.
Signed-off-by: Katarzyna Stachura <uwunyaa@outlook.com>

src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx

@@ -25,6 +25,7 @@ import {
     CATEGORIES,
     CategoryName,
 } from "../../../../../accessibility/KeyboardShortcuts";
+import SdkConfig from "../../../../../SdkConfig";
 import { isMac, Key } from "../../../../../Keyboard";
 import { _t } from "../../../../../languageHandler";
 
@@ -76,6 +77,10 @@ interface IKeyboardShortcutRowProps {
     name: string;
 }
 
+// Filter out the labs section if labs aren't enabled.
+const visibleCategories = Object.entries(CATEGORIES).filter(([categoryName]) =>
+    categoryName !== CategoryName.LABS || SdkConfig.get()['showLabsSettings']);
+
 const KeyboardShortcutRow: React.FC<IKeyboardShortcutRowProps> = ({ name }) => {
     return <div className="mx_KeyboardShortcut_shortcutRow">
         { KEYBOARD_SHORTCUTS[name].displayName }
@@ -100,7 +105,7 @@ const KeyboardShortcutSection: React.FC<IKeyboardShortcutSectionProps> = ({ cate
 const KeyboardUserSettingsTab: React.FC = () => {
     return <div className="mx_SettingsTab mx_KeyboardUserSettingsTab">
         <div className="mx_SettingsTab_heading">{ _t("Keyboard") }</div>
-        { Object.entries(CATEGORIES).map(([categoryName, category]: [CategoryName, ICategory]) => {
+        { visibleCategories.map(([categoryName, category]: [CategoryName, ICategory]) => {
             return <KeyboardShortcutSection key={categoryName} categoryName={categoryName} category={category} />;
         }) }
     </div>;