From 158bf2193b4b1efaabc843aad975ad7ce20939ea Mon Sep 17 00:00:00 2001 From: Ashish Dhama Date: Mon, 20 Sep 2021 13:34:14 +0530 Subject: [PATCH 1/9] add keyboard shortcuts to tooltips --- .../shortcuts_modal.test.jsx.snap | 201 ------- .../header_icon_wrapper.test.tsx.snap | 16 + .../components/header_icon_wrapper.tsx | 11 + .../channel_layout/channel_controller.jsx | 5 +- .../__snapshots__/file_upload.test.jsx.snap | 81 ++- components/file_upload/file_upload.jsx | 25 +- .../at_mentions_button/at_mentions_button.tsx | 7 + .../history_buttons/history_buttons.tsx | 62 ++- .../keyboard_shortcuts/keyboard_shortcuts.ts | 306 +++++++++++ .../keyboard_shortcuts_modal.test.tsx.snap | 64 +++ .../keyboard_shortcuts_modal.scss | 24 - .../keyboard_shortcuts_modal.test.tsx | 17 + .../keyboard_shortcuts_modal.tsx | 173 ++++++ .../keyboard_shortcuts_sequence.test.tsx.snap | 40 ++ .../keyboard_shortcuts_sequence.scss | 30 + .../keyboard_shortcuts_sequence.test.tsx | 23 + .../keyboard_shortcuts_sequence.tsx | 70 +++ components/shortcut_key/shortcut_key.scss | 17 + components/shortcut_key/shortcut_key.tsx | 6 + components/shortcuts_modal.jsx | 516 ------------------ components/shortcuts_modal.test.jsx | 25 - .../channel_navigator/channel_navigator.tsx | 57 +- .../sidebar_category.test.tsx.snap | 32 ++ .../sidebar_category/sidebar_category.tsx | 9 + .../team_sidebar/components/team_button.tsx | 34 +- i18n/en.json | 4 +- sass/components/_tooltip.scss | 7 +- sass/routes/_module.scss | 1 - 28 files changed, 1007 insertions(+), 856 deletions(-) delete mode 100644 components/__snapshots__/shortcuts_modal.test.jsx.snap create mode 100644 components/keyboard_shortcuts/keyboard_shortcuts.ts create mode 100644 components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap rename sass/routes/_shortcuts-modal.scss => components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss (82%) create mode 100644 components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.test.tsx create mode 100644 components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx create mode 100644 components/keyboard_shortcuts/keyboard_shortcuts_sequence/__snapshots__/keyboard_shortcuts_sequence.test.tsx.snap create mode 100644 components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.scss create mode 100644 components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.test.tsx create mode 100644 components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx delete mode 100644 components/shortcuts_modal.jsx delete mode 100644 components/shortcuts_modal.test.jsx diff --git a/components/__snapshots__/shortcuts_modal.test.jsx.snap b/components/__snapshots__/shortcuts_modal.test.jsx.snap deleted file mode 100644 index 2b05dcbede4e..000000000000 --- a/components/__snapshots__/shortcuts_modal.test.jsx.snap +++ /dev/null @@ -1,201 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`components/ShortcutsModal should match snapshot modal for Mac 1`] = ` - - - - - -`; - -exports[`components/ShortcutsModal should match snapshot modal for non-Mac like Windows/Linux 1`] = ` - - - - - -`; diff --git a/components/channel_header/components/__snapshots__/header_icon_wrapper.test.tsx.snap b/components/channel_header/components/__snapshots__/header_icon_wrapper.test.tsx.snap index 68a9c0ea3ad1..c7c2198ca9a2 100644 --- a/components/channel_header/components/__snapshots__/header_icon_wrapper.test.tsx.snap +++ b/components/channel_header/components/__snapshots__/header_icon_wrapper.test.tsx.snap @@ -93,6 +93,22 @@ exports[`components/channel_header/components/HeaderIconWrapper should match sna defaultMessage="Recent mentions" id="channel_header.recentMentions" /> + } placement="bottom" diff --git a/components/channel_header/components/header_icon_wrapper.tsx b/components/channel_header/components/header_icon_wrapper.tsx index 22ef34519f64..e1708dda4af4 100644 --- a/components/channel_header/components/header_icon_wrapper.tsx +++ b/components/channel_header/components/header_icon_wrapper.tsx @@ -10,6 +10,8 @@ import OverlayTrigger from 'components/overlay_trigger'; import {localizeMessage} from 'utils/utils.jsx'; import {Constants} from 'utils/constants'; import {t} from 'utils/i18n'; +import KeyboardShortcutSequence from '../../keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; +import {KEYBOARD_SHORTCUTS, KeyboardShortcutsSeq} from '../../keyboard_shortcuts/keyboard_shortcuts'; type Props = { ariaLabel?: boolean; @@ -27,6 +29,7 @@ type TooltipInfo = { id: string; messageID: string; message: string; + keyboardShortcut?: KeyboardShortcutsSeq; } const HeaderIconWrapper: React.FC = (props: Props) => { @@ -59,6 +62,7 @@ const HeaderIconWrapper: React.FC = (props: Props) => { id: 'recentMentionsTooltip', messageID: t('channel_header.recentMentions'), message: 'Recent mentions', + keyboardShortcut: KEYBOARD_SHORTCUTS.navMentions, }, search: { class: '', @@ -88,6 +92,13 @@ const HeaderIconWrapper: React.FC = (props: Props) => { id={toolTips[key].messageID} defaultMessage={toolTips[key].message} /> + {toolTips[key].keyboardShortcut && + + } ); } diff --git a/components/channel_layout/channel_controller.jsx b/components/channel_layout/channel_controller.jsx index 7b6fd6732a5d..5cd4fe2d205d 100644 --- a/components/channel_layout/channel_controller.jsx +++ b/components/channel_layout/channel_controller.jsx @@ -14,18 +14,17 @@ import EditPostModal from 'components/edit_post_modal'; import GetPublicLinkModal from 'components/get_public_link_modal'; import LeavePrivateChannelModal from 'components/leave_private_channel_modal'; import ResetStatusModal from 'components/reset_status_modal'; -import ShortcutsModal from 'components/shortcuts_modal.jsx'; import SidebarRight from 'components/sidebar_right'; import SidebarRightMenu from 'components/sidebar_right_menu'; import ImportThemeModal from 'components/user_settings/import_theme_modal'; import TeamSidebar from 'components/team_sidebar'; import Sidebar from 'components/sidebar'; -import * as Utils from 'utils/utils'; import * as UserAgent from 'utils/user_agent'; import CenterChannel from 'components/channel_layout/center_channel'; import LoadingScreen from 'components/loading_screen'; import FaviconTitleHandler from 'components/favicon_title_handler'; import ProductNoticesModal from 'components/product_notices_modal'; +import KeyboardShortcutsModal from 'components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx'; export default class ChannelController extends React.PureComponent { static propTypes = { @@ -77,7 +76,7 @@ export default class ChannelController extends React.PureComponent { - + ); diff --git a/components/file_upload/__snapshots__/file_upload.test.jsx.snap b/components/file_upload/__snapshots__/file_upload.test.jsx.snap index de73c48a6024..2fd146538bdf 100644 --- a/components/file_upload/__snapshots__/file_upload.test.jsx.snap +++ b/components/file_upload/__snapshots__/file_upload.test.jsx.snap @@ -1,32 +1,63 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`components/FileUpload should match snapshot 1`] = ` -
-
- + - - +
- + `; diff --git a/components/file_upload/file_upload.jsx b/components/file_upload/file_upload.jsx index 03fb87337e4f..c60ce8eb83ab 100644 --- a/components/file_upload/file_upload.jsx +++ b/components/file_upload/file_upload.jsx @@ -5,6 +5,7 @@ import PropTypes from 'prop-types'; import React, {PureComponent} from 'react'; import ReactDOM from 'react-dom'; import {defineMessages, FormattedMessage, injectIntl} from 'react-intl'; +import {Tooltip} from 'react-bootstrap'; import dragster from 'utils/dragster'; import Constants from 'utils/constants'; @@ -30,6 +31,9 @@ import MenuWrapper from 'components/widgets/menu/menu_wrapper'; import Menu from 'components/widgets/menu/menu'; import AttachmentIcon from 'components/widgets/icons/attachment_icon'; +import KeyboardShortcutSequence from '../keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; +import {KEYBOARD_SHORTCUTS} from '../keyboard_shortcuts/keyboard_shortcuts'; +import OverlayTrigger from 'components/overlay_trigger'; const holders = defineMessages({ limited: { @@ -695,9 +699,24 @@ export class FileUpload extends PureComponent { } return ( -
- {bodyAction} -
+ + + + } + > +
+ {bodyAction} +
+ ); } } diff --git a/components/global/at_mentions_button/at_mentions_button.tsx b/components/global/at_mentions_button/at_mentions_button.tsx index a531bcc608df..9b21bd88bc59 100644 --- a/components/global/at_mentions_button/at_mentions_button.tsx +++ b/components/global/at_mentions_button/at_mentions_button.tsx @@ -13,6 +13,8 @@ import OverlayTrigger from 'components/overlay_trigger'; import {getIsRhsOpen, getRhsState} from 'selectors/rhs'; import {GlobalState} from 'types/store'; import Constants, {RHSStates} from 'utils/constants'; +import {KEYBOARD_SHORTCUTS} from '../../keyboard_shortcuts/keyboard_shortcuts'; +import KeyboardShortcutSequence from '../../keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; const AtMentionsButton = (): JSX.Element => { const dispatch = useDispatch(); @@ -34,6 +36,11 @@ const AtMentionsButton = (): JSX.Element => { id='channel_header.recentMentions' defaultMessage='Recent mentions' /> + ); diff --git a/components/global/history_buttons/history_buttons.tsx b/components/global/history_buttons/history_buttons.tsx index 40b8691cd612..cf2772273f06 100644 --- a/components/global/history_buttons/history_buttons.tsx +++ b/components/global/history_buttons/history_buttons.tsx @@ -3,11 +3,16 @@ import React from 'react'; import styled from 'styled-components'; +import {Tooltip} from 'react-bootstrap'; import IconButton from '@mattermost/compass-components/components/icon-button'; import {trackEvent} from 'actions/telemetry_actions'; import * as Utils from 'utils/utils'; import {browserHistory} from 'utils/browser_history'; +import {KEYBOARD_SHORTCUTS, KeyboardShortcutsSeq} from '../../keyboard_shortcuts/keyboard_shortcuts'; +import Constants from '../../../utils/constants'; +import KeyboardShortcutSequence from '../../keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; +import OverlayTrigger from 'components/overlay_trigger'; const HistoryButtonsContainer = styled.nav` display: flex; @@ -19,6 +24,17 @@ const HistoryButtonsContainer = styled.nav` `; const HistoryButtons = (): JSX.Element => { + const getTooltip = (shortcut: KeyboardShortcutsSeq) => ( + + + + ); const goBack = () => { trackEvent('ui', 'ui_history_back'); browserHistory.goBack(); @@ -31,22 +47,36 @@ const HistoryButtons = (): JSX.Element => { return ( - - + + + + + + ); }; diff --git a/components/keyboard_shortcuts/keyboard_shortcuts.ts b/components/keyboard_shortcuts/keyboard_shortcuts.ts new file mode 100644 index 000000000000..26e030e6b1fa --- /dev/null +++ b/components/keyboard_shortcuts/keyboard_shortcuts.ts @@ -0,0 +1,306 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import {MessageDescriptor} from 'react-intl'; + +import {t} from '../../utils/i18n'; + +export type KeyboardShortcutsSeq = MessageDescriptor | {default: MessageDescriptor; mac?: MessageDescriptor}; + +export function isMessageDescriptor(descriptor: KeyboardShortcutsSeq): descriptor is MessageDescriptor { + return Boolean((descriptor as MessageDescriptor).id); +} + +export const KEYBOARD_SHORTCUTS = { + mainHeader: { + default: { + id: t('shortcuts.header'), + defaultMessage: 'Keyboard Shortcuts\tCtrl|/', + }, + mac: { + id: t('shortcuts.header.mac'), + defaultMessage: 'Keyboard Shortcuts\t⌘|/', + }, + }, + navPrev: { + default: { + id: t('shortcuts.nav.prev'), + defaultMessage: 'Previous channel:\tAlt|Up', + }, + mac: { + id: t('shortcuts.nav.prev.mac'), + defaultMessage: 'Previous channel:\t⌥|Up', + }, + }, + navNext: { + default: { + id: t('shortcuts.nav.next'), + defaultMessage: 'Next channel:\tAlt|Down', + }, + mac: { + id: t('shortcuts.nav.next.mac'), + defaultMessage: 'Next channel:\t⌥|Down', + }, + }, + navUnreadPrev: { + default: { + id: t('shortcuts.nav.unread_prev'), + defaultMessage: 'Previous unread channel:\tAlt|Shift|Up', + }, + mac: { + id: t('shortcuts.nav.unread_prev.mac'), + defaultMessage: 'Previous unread channel:\t⌥|Shift|Up', + }, + }, + navUnreadNext: { + default: { + id: t('shortcuts.nav.unread_next'), + defaultMessage: 'Next unread channel:\tAlt|Shift|Down', + }, + mac: { + id: t('shortcuts.nav.unread_next.mac'), + defaultMessage: 'Next unread channel:\t⌥|Shift|Down', + }, + }, + teamNavPrev: { + default: { + id: t('shortcuts.team_nav.prev'), + defaultMessage: 'Previous team:\tCtrl|Alt|Up', + }, + mac: { + id: t('shortcuts.team_nav.prev.mac'), + defaultMessage: 'Previous team:\t⌘|⌥|Up', + }, + }, + teamNavNext: { + default: { + id: t('shortcuts.team_nav.next'), + defaultMessage: 'Next team:\tCtrl|Alt|Down', + }, + mac: { + id: t('shortcuts.team_nav.next.mac'), + defaultMessage: 'Next team:\t⌘|⌥|Down', + }, + }, + teamNavSwitcher: { + default: { + id: t('shortcuts.team_nav.switcher'), + defaultMessage: 'Switch to a specific team:\tCtrl|Alt|[1-9]', + }, + mac: { + id: t('shortcuts.team_nav.switcher.mac'), + defaultMessage: 'Switch to a specific team:\t⌘|⌥|[1-9]', + }, + }, + teamNavigation: { + default: { + id: t('team.button.tooltip'), + defaultMessage: 'Ctrl|Alt|{order}', + }, + mac: { + id: t('team.button.tooltip.mac'), + defaultMessage: '⌘|⌥|{order}', + }, + }, + navSwitcher: { + default: { + id: t('shortcuts.nav.switcher'), + defaultMessage: 'Quick channel switcher:\tCtrl|K', + }, + mac: { + id: t('shortcuts.nav.switcher.mac'), + defaultMessage: 'Quick channel switcher:\t⌘|K', + }, + }, + navDMMenu: { + default: { + id: t('shortcuts.nav.direct_messages_menu'), + defaultMessage: 'Direct messages menu:\tCtrl|Shift|K', + }, + mac: { + id: t('shortcuts.nav.direct_messages_menu.mac'), + defaultMessage: 'Direct messages menu:\t⌘|Shift|K', + }, + }, + navSettings: { + default: { + id: t('shortcuts.nav.settings'), + defaultMessage: 'Account settings:\tCtrl|Shift|A', + }, + mac: { + id: t('shortcuts.nav.settings.mac'), + defaultMessage: 'Account settings:\t⌘|Shift|A', + }, + }, + navMentions: { + default: { + id: t('shortcuts.nav.recent_mentions'), + defaultMessage: 'Recent mentions:\tCtrl|Shift|M', + }, + mac: { + id: t('shortcuts.nav.recent_mentions.mac'), + defaultMessage: 'Recent mentions:\t⌘|Shift|M', + }, + }, + navFocusCenter: { + default: { + id: t('shortcuts.nav.focus_center'), + defaultMessage: 'Set focus to input field:\tCtrl|Shift|L', + }, + mac: { + id: t('shortcuts.nav.focus_center.mac'), + defaultMessage: 'Set focus to input field:\t⌘|Shift|L', + }, + }, + navOpenCloseSidebar: { + default: { + id: t('shortcuts.nav.open_close_sidebar'), + defaultMessage: 'Open or close the right sidebar\tCtrl|.', + }, + mac: { + id: t('shortcuts.nav.open_close_sidebar.mac'), + defaultMessage: 'Open or close the right sidebar\t⌘|.', + }, + }, + msgEdit: { + id: t('shortcuts.msgs.edit'), + defaultMessage: 'Edit last message in channel:\tUp', + }, + msgReply: { + id: t('shortcuts.msgs.reply'), + defaultMessage: 'Reply to last message in channel:\tShift|Up', + }, + msgReprintPrev: { + default: { + id: t('shortcuts.msgs.reprint_prev'), + defaultMessage: 'Reprint previous message:\tCtrl|Up', + }, + mac: { + id: t('shortcuts.msgs.reprint_prev.mac'), + defaultMessage: 'Reprint previous message:\t⌘|Up', + }, + }, + msgReprintNext: { + default: { + id: t('shortcuts.msgs.reprint_next'), + defaultMessage: 'Reprint next message:\tCtrl|Down', + }, + mac: { + id: t('shortcuts.msgs.reprint_next.mac'), + defaultMessage: 'Reprint next message:\t⌘|Down', + }, + }, + msgCompUsername: { + id: t('shortcuts.msgs.comp.username'), + defaultMessage: 'Username:\t@|[a-z]|Tab', + }, + msgCompChannel: { + id: t('shortcuts.msgs.comp.channel'), + defaultMessage: 'Channel:\t~|[a-z]|Tab', + }, + msgCompEmoji: { + id: t('shortcuts.msgs.comp.emoji'), + defaultMessage: 'Emoji:\t:|[a-z]|Tab', + }, + msgLastReaction: { + default: { + id: t('shortcuts.msgs.comp.last_reaction'), + defaultMessage: 'React to last message:\tCtrl|Shift|\u29F5', + }, + mac: { + id: t('shortcuts.msgs.comp.last_reaction.mac'), + defaultMessage: 'React to last message:\t⌘|Shift|\u29F5', + }, + }, + msgMarkdownBold: { + default: { + id: t('shortcuts.msgs.markdown.bold'), + defaultMessage: 'Bold:\tCtrl|B', + }, + mac: { + id: t('shortcuts.msgs.markdown.bold.mac'), + defaultMessage: 'Bold:\t⌘|B', + }, + }, + msgMarkdownItalic: { + default: { + id: t('shortcuts.msgs.markdown.italic'), + defaultMessage: 'Italic:\tCtrl|I', + }, + mac: { + id: t('shortcuts.msgs.markdown.italic.mac'), + defaultMessage: 'Italic:\t⌘|I', + }, + }, + msgMarkdownLink: { + default: { + id: t('shortcuts.msgs.markdown.link'), + defaultMessage: 'Link:\tCtrl|Alt|K', + }, + mac: { + id: t('shortcuts.msgs.markdown.link.mac'), + defaultMessage: 'Link:\t⌘|Alt|K', + }, + }, + filesUpload: { + default: { + id: t('shortcuts.files.upload'), + defaultMessage: 'Upload files:\tCtrl|U', + }, + mac: { + id: t('shortcuts.files.upload.mac'), + defaultMessage: 'Upload files:\t⌘|U', + }, + }, + browserChannelPrev: { + default: { + id: t('shortcuts.browser.channel_prev'), + defaultMessage: 'Back in history:\tAlt|Left', + }, + mac: { + id: t('shortcuts.browser.channel_prev.mac'), + defaultMessage: 'Back in history:\t⌘|[', + }, + }, + browserChannelNext: { + default: { + id: t('shortcuts.browser.channel_next'), + defaultMessage: 'Forward in history:\tAlt|Right', + }, + mac: { + id: t('shortcuts.browser.channel_next.mac'), + defaultMessage: 'Forward in history:\t⌘|]', + }, + }, + browserFontIncrease: { + default: { + id: t('shortcuts.browser.font_increase'), + defaultMessage: 'Zoom in:\tCtrl|+', + }, + mac: { + id: t('shortcuts.browser.font_increase.mac'), + defaultMessage: 'Zoom in:\t⌘|+', + }, + }, + browserFontDecrease: { + default: { + id: t('shortcuts.browser.font_decrease'), + defaultMessage: 'Zoom out:\tCtrl|-', + }, + mac: { + id: t('shortcuts.browser.font_decrease.mac'), + defaultMessage: 'Zoom out:\t⌘|-', + }, + }, + browserHighlightPrev: { + id: t('shortcuts.browser.highlight_prev'), + defaultMessage: 'Highlight text to the previous line:\tShift|Up', + }, + browserHighlightNext: { + id: t('shortcuts.browser.highlight_next'), + defaultMessage: 'Highlight text to the next line:\tShift|Down', + }, + browserNewline: { + id: t('shortcuts.browser.newline'), + defaultMessage: 'Create a new line:\tShift|Enter', + }, +}; diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap b/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap new file mode 100644 index 000000000000..5e072d0119e1 --- /dev/null +++ b/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap @@ -0,0 +1,64 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = ` + + + + + +`; diff --git a/sass/routes/_shortcuts-modal.scss b/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss similarity index 82% rename from sass/routes/_shortcuts-modal.scss rename to components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss index ee82d6319e1f..da26cd9e7e34 100644 --- a/sass/routes/_shortcuts-modal.scss +++ b/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss @@ -84,26 +84,6 @@ } } -.shortcut-line { - margin: 16px 0; - - span { - &:first-child { - margin-right: 5px; - } - } - - // TODO: It probably makes sense to switch to component - // in order to have universal shortcut key appearance - .shortcut-key { - padding: 4px 6px; - margin: 5px 0 5px 5px; - border-radius: 3px; - font-size: 0.9em; - font-weight: 500; - } -} - @media (max-height: 800px) { .modal { .shortcuts-modal { @@ -116,8 +96,4 @@ } } } - - .shortcut-line { - margin-top: 14px; - } } diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.test.tsx b/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.test.tsx new file mode 100644 index 000000000000..357cba868928 --- /dev/null +++ b/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.test.tsx @@ -0,0 +1,17 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; + +import {mountWithIntl} from 'tests/helpers/intl-test-helper'; +import KeyboardShortcutsModal from 'components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal'; + +describe('components/KeyboardShortcutsModal', () => { + test('should match snapshot modal', () => { + const wrapper = mountWithIntl( + , + ); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx b/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx new file mode 100644 index 000000000000..12c94b97c8e9 --- /dev/null +++ b/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx @@ -0,0 +1,173 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {useEffect, useState} from 'react'; +import {Modal} from 'react-bootstrap'; +import {defineMessages, useIntl} from 'react-intl'; + +import ModalStore from 'stores/modal_store.jsx'; +import Constants from 'utils/constants'; +import {t} from 'utils/i18n'; +import * as Utils from 'utils/utils'; +import {KEYBOARD_SHORTCUTS} from '../keyboard_shortcuts'; +import KeyboardShortcutSequence from '../keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; +import './keyboard_shortcuts_modal.scss'; + +const modalMessages = defineMessages({ + msgHeader: { + id: t('shortcuts.msgs.header'), + defaultMessage: 'Messages', + }, + msgInputHeader: { + id: t('shortcuts.msgs.input.header'), + defaultMessage: 'Works inside an empty input field', + }, + filesHeader: { + id: t('shortcuts.files.header'), + defaultMessage: 'Files', + }, + browserHeader: { + id: t('shortcuts.browser.header'), + defaultMessage: 'Built-in Browser Commands', + }, + msgCompHeader: { + id: t('shortcuts.msgs.comp.header'), + defaultMessage: 'Autocomplete', + }, + browserInputHeader: { + id: t('shortcuts.browser.input.header'), + defaultMessage: 'Works inside an input field', + }, + msgMarkdownHeader: { + id: t('shortcuts.msgs.markdown.header'), + defaultMessage: 'Formatting', + }, + info: { + id: t('shortcuts.info'), + defaultMessage: + 'Begin a message with / for a list of all the commands at your disposal.', + }, + navHeader: { + id: t('shortcuts.nav.header'), + defaultMessage: 'Navigation', + }, +}); + +const KeyboardShortcutsModal: React.FC = () => { + const [show, updateShow] = useState(); + + useEffect(() => { + ModalStore.addModalListener(Constants.ActionTypes.TOGGLE_SHORTCUTS_MODAL, handleToggle); + return () => { + ModalStore.removeModalListener(Constants.ActionTypes.TOGGLE_SHORTCUTS_MODAL, handleToggle); + }; + }, []); + + const handleToggle = () => { + //toggles the state of shortcut dialog + updateShow(!show); + }; + + const handleHide = () => { + updateShow(false); + }; + const {formatMessage} = useIntl(); + const isLinux = Utils.isLinux(); + + return ( + +
+ + + + + + +
+
+
+
+

{formatMessage(modalMessages.navHeader)}

+ + + + + {!isLinux && } + {!isLinux && } + + + + + + + +
+
+
+
+
+
+

{formatMessage(modalMessages.msgHeader)}

+ {formatMessage(modalMessages.msgInputHeader)} +
+ + + + + +
+ {formatMessage(modalMessages.msgCompHeader)} +
+ + + +
+ {formatMessage(modalMessages.msgMarkdownHeader)} +
+ + + +
+
+
+
+
+
+
+

{formatMessage(modalMessages.filesHeader)}

+ +
+
+

{formatMessage(modalMessages.browserHeader)}

+ + + + + {formatMessage(modalMessages.browserInputHeader)} +
+ + + +
+
+
+
+
+
{formatMessage(modalMessages.info)}
+ +
+ + ); +}; + +export default KeyboardShortcutsModal; diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/__snapshots__/keyboard_shortcuts_sequence.test.tsx.snap b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/__snapshots__/keyboard_shortcuts_sequence.test.tsx.snap new file mode 100644 index 000000000000..ec95c55cadca --- /dev/null +++ b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/__snapshots__/keyboard_shortcuts_sequence.test.tsx.snap @@ -0,0 +1,40 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/shortcuts/KeyboardShortcutsSequence should match snapshot modal for Mac 1`] = ` + +
+ + Keyboard Shortcuts + + + + ⌘ + + + + + / + + +
+ +`; diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.scss b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.scss new file mode 100644 index 000000000000..e3532fe3999c --- /dev/null +++ b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.scss @@ -0,0 +1,30 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +.shortcut-line { + margin: 16px 0; + + span { + &:first-child { + margin-right: 5px; + } + } + + .shortcut-key { + padding: 2px 5px; + + + .shortcut-key { + margin-left: 2px; + } + } +} + +.tooltip-inner .shortcut-line { + margin: 4px 0; +} + +@media (max-height: 800px) { + .shortcut-line { + margin-top: 14px; + } +} diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.test.tsx b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.test.tsx new file mode 100644 index 000000000000..c7163a15fc1d --- /dev/null +++ b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.test.tsx @@ -0,0 +1,23 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; + +import {mountWithIntl} from 'tests/helpers/intl-test-helper'; + +import KeyboardShortcutsSequence from './keyboard_shortcuts_sequence'; + +describe('components/shortcuts/KeyboardShortcutsSequence', () => { + test('should match snapshot modal for Mac', () => { + const wrapper = mountWithIntl( + , + ); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx new file mode 100644 index 000000000000..df50c46c0384 --- /dev/null +++ b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx @@ -0,0 +1,70 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import {FormatXMLElementFn, PrimitiveType} from 'intl-messageformat'; +import React, {memo} from 'react'; +import {useIntl} from 'react-intl'; + +import {isMessageDescriptor, KeyboardShortcutsSeq} from '../keyboard_shortcuts'; + +import {isMac} from '../../../utils/utils'; +import './keyboard_shortcuts_sequence.scss'; +import {ShortcutKetVariant, ShortcutKey} from '../../shortcut_key'; + +type Props = { + shortcut: KeyboardShortcutsSeq; + values?: Record>; + hideDescription?: boolean; + hoistDescription?: boolean; + isInsideTooltip?: boolean; +}; + +function normalize(shortcut: KeyboardShortcutsSeq) { + if (isMessageDescriptor(shortcut)) { + return shortcut; + } + + const {default: standard, mac} = shortcut; + return isMac() && mac ? mac : standard; +} + +const KEY_SEPARATOR = '|'; + +function KeyboardShortcutSequence({shortcut, values, hideDescription, hoistDescription, isInsideTooltip}: Props) { + const {formatMessage} = useIntl(); + const shortcutText = formatMessage(normalize(shortcut), values); + const splitShortcut = shortcutText.split('\t'); + + let description: string | undefined; + let keys: string | undefined; + + if (splitShortcut.length > 1) { + description = splitShortcut[0]; + keys = splitShortcut[1]; + } else if (splitShortcut[0].includes(KEY_SEPARATOR)) { + keys = splitShortcut[0]; + } else { + description = splitShortcut[0]; + } + + if (hideDescription) { + description = undefined; + } + + return ( + <> + {hoistDescription && description?.replace(/:{1,2}$/, '')} +
+ {!hoistDescription && description && {description}} + {keys?.split(KEY_SEPARATOR).map((key) => ( + + {key} + + ))} +
+ + ); +} +export default memo(KeyboardShortcutSequence); diff --git a/components/shortcut_key/shortcut_key.scss b/components/shortcut_key/shortcut_key.scss index 5499770b3bd4..f029bb35c299 100644 --- a/components/shortcut_key/shortcut_key.scss +++ b/components/shortcut_key/shortcut_key.scss @@ -12,5 +12,22 @@ background-color: rgba(var(--center-channel-color-rgb), 0.08); color: var(--center-channel-color); } + + &.shortcut-key--tooltip { + padding: 2px 5px; + background-color: rgba(255, 255, 255, 0.08); + color: rgba(255, 255, 255, 0.72); + font-family: inherit; + font-size: 12px; + font-weight: 600; + line-height: 16px; + } + + &.shortcut-key--shortcut-modal { + font-family: inherit; + font-size: 12px; + font-weight: 600; + line-height: 16px; + } } } diff --git a/components/shortcut_key/shortcut_key.tsx b/components/shortcut_key/shortcut_key.tsx index 3117066316e4..53a33722e45a 100644 --- a/components/shortcut_key/shortcut_key.tsx +++ b/components/shortcut_key/shortcut_key.tsx @@ -6,6 +6,8 @@ import './shortcut_key.scss'; export enum ShortcutKetVariant { Contrast = 'contrast', + Tooltip = 'tooltip', + ShortcutModal = 'shortcut', } export type ShortcutKeyProps = { @@ -17,6 +19,10 @@ export const ShortcutKey = ({children, variant}: ShortcutKeyProps) => { let className = 'shortcut-key'; if (variant === ShortcutKetVariant.Contrast) { className += ' shortcut-key--contrast'; + } else if (variant === ShortcutKetVariant.Tooltip) { + className += ' shortcut-key--tooltip'; + } else if (variant === ShortcutKetVariant.ShortcutModal) { + className += ' shortcut-key--shortcut-modal'; } return ( diff --git a/components/shortcuts_modal.jsx b/components/shortcuts_modal.jsx deleted file mode 100644 index 7655b37c7511..000000000000 --- a/components/shortcuts_modal.jsx +++ /dev/null @@ -1,516 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import PropTypes from 'prop-types'; -import React from 'react'; -import {Modal} from 'react-bootstrap'; -import {defineMessages, injectIntl} from 'react-intl'; - -import ModalStore from 'stores/modal_store.jsx'; -import Constants from 'utils/constants'; -import {intlShape} from 'utils/react_intl'; -import {t} from 'utils/i18n'; -import * as Utils from 'utils/utils'; - -const allShortcuts = defineMessages({ - mainHeader: { - default: { - id: t('shortcuts.header'), - defaultMessage: 'Keyboard Shortcuts\tCtrl|/', - }, - mac: { - id: t('shortcuts.header.mac'), - defaultMessage: 'Keyboard Shortcuts\t⌘|/', - }, - }, - navHeader: { - id: t('shortcuts.nav.header'), - defaultMessage: 'Navigation', - }, - navPrev: { - default: { - id: t('shortcuts.nav.prev'), - defaultMessage: 'Previous channel:\tAlt|Up', - }, - mac: { - id: t('shortcuts.nav.prev.mac'), - defaultMessage: 'Previous channel:\t⌥|Up', - }, - }, - navNext: { - default: { - id: t('shortcuts.nav.next'), - defaultMessage: 'Next channel:\tAlt|Down', - }, - mac: { - id: t('shortcuts.nav.next.mac'), - defaultMessage: 'Next channel:\t⌥|Down', - }, - }, - navUnreadPrev: { - default: { - id: t('shortcuts.nav.unread_prev'), - defaultMessage: 'Previous unread channel:\tAlt|Shift|Up', - }, - mac: { - id: t('shortcuts.nav.unread_prev.mac'), - defaultMessage: 'Previous unread channel:\t⌥|Shift|Up', - }, - }, - navUnreadNext: { - default: { - id: t('shortcuts.nav.unread_next'), - defaultMessage: 'Next unread channel:\tAlt|Shift|Down', - }, - mac: { - id: t('shortcuts.nav.unread_next.mac'), - defaultMessage: 'Next unread channel:\t⌥|Shift|Down', - }, - }, - teamNavPrev: { - default: { - id: t('shortcuts.team_nav.prev'), - defaultMessage: 'Previous team:\tCtrl|Alt|Up', - }, - mac: { - id: t('shortcuts.team_nav.prev.mac'), - defaultMessage: 'Previous team:\t⌘|⌥|Up', - }, - }, - teamNavNext: { - default: { - id: t('shortcuts.team_nav.next'), - defaultMessage: 'Next team:\tCtrl|Alt|Down', - }, - mac: { - id: t('shortcuts.team_nav.next.mac'), - defaultMessage: 'Next team:\t⌘|⌥|Down', - }, - }, - teamNavSwitcher: { - default: { - id: t('shortcuts.team_nav.switcher'), - defaultMessage: 'Switch to a specific team:\tCtrl|Alt|[1-9]', - }, - mac: { - id: t('shortcuts.team_nav.switcher.mac'), - defaultMessage: 'Switch to a specific team:\t⌘|⌥|[1-9]', - }, - }, - navSwitcher: { - default: { - id: t('shortcuts.nav.switcher'), - defaultMessage: 'Quick channel switcher:\tCtrl|K', - }, - mac: { - id: t('shortcuts.nav.switcher.mac'), - defaultMessage: 'Quick channel switcher:\t⌘|K', - }, - }, - navDMMenu: { - default: { - id: t('shortcuts.nav.direct_messages_menu'), - defaultMessage: 'Direct messages menu:\tCtrl|Shift|K', - }, - mac: { - id: t('shortcuts.nav.direct_messages_menu.mac'), - defaultMessage: 'Direct messages menu:\t⌘|Shift|K', - }, - }, - navSettings: { - default: { - id: t('shortcuts.nav.settings'), - defaultMessage: 'Account settings:\tCtrl|Shift|A', - }, - mac: { - id: t('shortcuts.nav.settings.mac'), - defaultMessage: 'Account settings:\t⌘|Shift|A', - }, - }, - navMentions: { - default: { - id: t('shortcuts.nav.recent_mentions'), - defaultMessage: 'Recent mentions:\tCtrl|Shift|M', - }, - mac: { - id: t('shortcuts.nav.recent_mentions.mac'), - defaultMessage: 'Recent mentions:\t⌘|Shift|M', - }, - }, - navFocusCenter: { - default: { - id: t('shortcuts.nav.focus_center'), - defaultMessage: 'Set focus to input field:\tCtrl|Shift|L', - }, - mac: { - id: t('shortcuts.nav.focus_center.mac'), - defaultMessage: 'Set focus to input field:\t⌘|Shift|L', - }, - }, - navOpenCloseSidebar: { - default: { - id: t('shortcuts.nav.open_close_sidebar'), - defaultMessage: 'Open or close the right sidebar\tCtrl|.', - }, - mac: { - id: t('shortcuts.nav.open_close_sidebar.mac'), - defaultMessage: 'Open or close the right sidebar\t⌘|.', - }, - }, - msgHeader: { - id: t('shortcuts.msgs.header'), - defaultMessage: 'Messages', - }, - msgInputHeader: { - id: t('shortcuts.msgs.input.header'), - defaultMessage: 'Works inside an empty input field', - }, - msgEdit: { - id: t('shortcuts.msgs.edit'), - defaultMessage: 'Edit last message in channel:\tUp', - }, - msgReply: { - id: t('shortcuts.msgs.reply'), - defaultMessage: 'Reply to last message in channel:\tShift|Up', - }, - msgReprintPrev: { - default: { - id: t('shortcuts.msgs.reprint_prev'), - defaultMessage: 'Reprint previous message:\tCtrl|Up', - }, - mac: { - id: t('shortcuts.msgs.reprint_prev.mac'), - defaultMessage: 'Reprint previous message:\t⌘|Up', - }, - }, - msgReprintNext: { - default: { - id: t('shortcuts.msgs.reprint_next'), - defaultMessage: 'Reprint next message:\tCtrl|Down', - }, - mac: { - id: t('shortcuts.msgs.reprint_next.mac'), - defaultMessage: 'Reprint next message:\t⌘|Down', - }, - }, - msgCompHeader: { - id: t('shortcuts.msgs.comp.header'), - defaultMessage: 'Autocomplete', - }, - msgCompUsername: { - id: t('shortcuts.msgs.comp.username'), - defaultMessage: 'Username:\t@|[a-z]|Tab', - }, - msgCompChannel: { - id: t('shortcuts.msgs.comp.channel'), - defaultMessage: 'Channel:\t~|[a-z]|Tab', - }, - msgCompEmoji: { - id: t('shortcuts.msgs.comp.emoji'), - defaultMessage: 'Emoji:\t:|[a-z]|Tab', - }, - msgLastReaction: { - default: { - id: t('shortcuts.msgs.comp.last_reaction'), - defaultMessage: 'React to last message:\tCtrl|Shift|\u29F5', - }, - mac: { - id: t('shortcuts.msgs.comp.last_reaction.mac'), - defaultMessage: 'React to last message:\t⌘|Shift|\u29F5', - }, - }, - msgMarkdownHeader: { - id: t('shortcuts.msgs.markdown.header'), - defaultMessage: 'Formatting', - }, - msgMarkdownBold: { - default: { - id: t('shortcuts.msgs.markdown.bold'), - defaultMessage: 'Bold:\tCtrl|B', - }, - mac: { - id: t('shortcuts.msgs.markdown.bold.mac'), - defaultMessage: 'Bold:\t⌘|B', - }, - }, - msgMarkdownItalic: { - default: { - id: t('shortcuts.msgs.markdown.italic'), - defaultMessage: 'Italic:\tCtrl|I', - }, - mac: { - id: t('shortcuts.msgs.markdown.italic.mac'), - defaultMessage: 'Italic:\t⌘|I', - }, - }, - msgMarkdownLink: { - default: { - id: t('shortcuts.msgs.markdown.link'), - defaultMessage: 'Link:\tCtrl|Alt|K', - }, - mac: { - id: t('shortcuts.msgs.markdown.link.mac'), - defaultMessage: 'Link:\t⌘|Alt|K', - }, - }, - filesHeader: { - id: t('shortcuts.files.header'), - defaultMessage: 'Files', - }, - filesUpload: { - default: { - id: t('shortcuts.files.upload'), - defaultMessage: 'Upload files:\tCtrl|U', - }, - mac: { - id: t('shortcuts.files.upload.mac'), - defaultMessage: 'Upload files:\t⌘|U', - }, - }, - browserHeader: { - id: t('shortcuts.browser.header'), - defaultMessage: 'Built-in Browser Commands', - }, - browserChannelPrev: { - default: { - id: t('shortcuts.browser.channel_prev'), - defaultMessage: 'Back in history:\tAlt|Left', - }, - mac: { - id: t('shortcuts.browser.channel_prev.mac'), - defaultMessage: 'Back in history:\t⌘|[', - }, - }, - browserChannelNext: { - default: { - id: t('shortcuts.browser.channel_next'), - defaultMessage: 'Forward in history:\tAlt|Right', - }, - mac: { - id: t('shortcuts.browser.channel_next.mac'), - defaultMessage: 'Forward in history:\t⌘|]', - }, - }, - browserFontIncrease: { - default: { - id: t('shortcuts.browser.font_increase'), - defaultMessage: 'Zoom in:\tCtrl|+', - }, - mac: { - id: t('shortcuts.browser.font_increase.mac'), - defaultMessage: 'Zoom in:\t⌘|+', - }, - }, - browserFontDecrease: { - default: { - id: t('shortcuts.browser.font_decrease'), - defaultMessage: 'Zoom out:\tCtrl|-', - }, - mac: { - id: t('shortcuts.browser.font_decrease.mac'), - defaultMessage: 'Zoom out:\t⌘|-', - }, - }, - browserInputHeader: { - id: t('shortcuts.browser.input.header'), - defaultMessage: 'Works inside an input field', - }, - browserHighlightPrev: { - id: t('shortcuts.browser.highlight_prev'), - defaultMessage: 'Highlight text to the previous line:\tShift|Up', - }, - browserHighlightNext: { - id: t('shortcuts.browser.highlight_next'), - defaultMessage: 'Highlight text to the next line:\tShift|Down', - }, - browserNewline: { - id: t('shortcuts.browser.newline'), - defaultMessage: 'Create a new line:\tShift|Enter', - }, - info: { - id: t('shortcuts.info'), - defaultMessage: 'Begin a message with / for a list of all the commands at your disposal.', - }, -}); - -class ShortcutsModal extends React.PureComponent { - static propTypes = { - intl: intlShape.isRequired, - isMac: PropTypes.bool.isRequired, - } - - constructor(props) { - super(props); - - this.state = { - show: false, - }; - } - - componentDidMount() { - ModalStore.addModalListener(Constants.ActionTypes.TOGGLE_SHORTCUTS_MODAL, this.handleToggle); - } - - componentWillUnmount() { - ModalStore.removeModalListener(Constants.ActionTypes.TOGGLE_SHORTCUTS_MODAL, this.handleToggle); - } - - handleToggle = () => { - //toggles the state of shortcut dialog - this.setState({ - show: !this.state.show, - }); - } - - handleHide = () => { - this.setState({show: false}); - } - - getShortcuts() { - const {isMac} = this.props; - const shortcuts = {}; - Object.keys(allShortcuts).forEach((s) => { - if (isMac && allShortcuts[s].mac) { - shortcuts[s] = allShortcuts[s].mac; - } else if (!isMac && allShortcuts[s].default) { - shortcuts[s] = allShortcuts[s].default; - } else { - shortcuts[s] = allShortcuts[s]; - } - }); - - return shortcuts; - } - - render() { - const shortcuts = this.getShortcuts(); - const {formatMessage} = this.props.intl; - - const isLinux = Utils.isLinux(); - - return ( - -
- - - {renderShortcut(formatMessage(shortcuts.mainHeader))} - - - -
-
-
-
-

{formatMessage(shortcuts.navHeader)}

- {renderShortcut(formatMessage(shortcuts.navPrev))} - {renderShortcut(formatMessage(shortcuts.navNext))} - {renderShortcut(formatMessage(shortcuts.navUnreadPrev))} - {renderShortcut(formatMessage(shortcuts.navUnreadNext))} - {!isLinux && renderShortcut(formatMessage(shortcuts.teamNavPrev))} - {!isLinux && renderShortcut(formatMessage(shortcuts.teamNavNext))} - {renderShortcut(formatMessage(shortcuts.teamNavSwitcher))} - {renderShortcut(formatMessage(shortcuts.navSwitcher))} - {renderShortcut(formatMessage(shortcuts.navDMMenu))} - {renderShortcut(formatMessage(shortcuts.navSettings))} - {renderShortcut(formatMessage(shortcuts.navMentions))} - {renderShortcut(formatMessage(shortcuts.navFocusCenter))} - {renderShortcut(formatMessage(shortcuts.navOpenCloseSidebar))} -
-
-
-
-
-
-

{formatMessage(shortcuts.msgHeader)}

- {formatMessage(shortcuts.msgInputHeader)} -
- {renderShortcut(formatMessage(shortcuts.msgEdit))} - {renderShortcut(formatMessage(shortcuts.msgReply))} - {renderShortcut(formatMessage(shortcuts.msgLastReaction))} - {renderShortcut(formatMessage(shortcuts.msgReprintPrev))} - {renderShortcut(formatMessage(shortcuts.msgReprintNext))} -
- {formatMessage(shortcuts.msgCompHeader)} -
- {renderShortcut(formatMessage(shortcuts.msgCompUsername))} - {renderShortcut(formatMessage(shortcuts.msgCompChannel))} - {renderShortcut(formatMessage(shortcuts.msgCompEmoji))} -
- {formatMessage(shortcuts.msgMarkdownHeader)} -
- {renderShortcut(formatMessage(shortcuts.msgMarkdownBold))} - {renderShortcut(formatMessage(shortcuts.msgMarkdownItalic))} - {renderShortcut(formatMessage(shortcuts.msgMarkdownLink))} -
-
-
-
-
-
-
-

{formatMessage(shortcuts.filesHeader)}

- {renderShortcut(formatMessage(shortcuts.filesUpload))} -
-
-

{formatMessage(shortcuts.browserHeader)}

- {renderShortcut(formatMessage(shortcuts.browserChannelPrev))} - {renderShortcut(formatMessage(shortcuts.browserChannelNext))} - {renderShortcut(formatMessage(shortcuts.browserFontIncrease))} - {renderShortcut(formatMessage(shortcuts.browserFontDecrease))} - {formatMessage(shortcuts.browserInputHeader)} -
- {renderShortcut(formatMessage(shortcuts.browserHighlightPrev))} - {renderShortcut(formatMessage(shortcuts.browserHighlightNext))} - {renderShortcut(formatMessage(shortcuts.browserNewline))} -
-
-
-
-
-
{formatMessage(shortcuts.info)}
- -
- - ); - } -} - -function renderShortcut(text) { - if (!text) { - return null; - } - - const shortcut = text.split('\t'); - const description = {shortcut[0]}; - - let keys = null; - if (shortcut.length > 1) { - keys = shortcut[1].split('|').map((key) => ( - - {key} - - )); - } - - return ( -
- {description} - {keys} -
- ); -} - -export default injectIntl(ShortcutsModal); diff --git a/components/shortcuts_modal.test.jsx b/components/shortcuts_modal.test.jsx deleted file mode 100644 index 954c58387754..000000000000 --- a/components/shortcuts_modal.test.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; - -import {mountWithIntl} from 'tests/helpers/intl-test-helper'; -import ShortcutsModal from 'components/shortcuts_modal.jsx'; - -describe('components/ShortcutsModal', () => { - test('should match snapshot modal for Mac', () => { - const wrapper = mountWithIntl( - , - ); - - expect(wrapper).toMatchSnapshot(); - }); - - test('should match snapshot modal for non-Mac like Windows/Linux', () => { - const wrapper = mountWithIntl( - , - ); - - expect(wrapper).toMatchSnapshot(); - }); -}); diff --git a/components/sidebar/channel_navigator/channel_navigator.tsx b/components/sidebar/channel_navigator/channel_navigator.tsx index 66fef9f9ae00..9797ed573584 100644 --- a/components/sidebar/channel_navigator/channel_navigator.tsx +++ b/components/sidebar/channel_navigator/channel_navigator.tsx @@ -4,6 +4,7 @@ import React from 'react'; import {FormattedMessage} from 'react-intl'; import classNames from 'classnames'; +import {Tooltip} from 'react-bootstrap'; import {trackEvent} from 'actions/telemetry_actions'; import Constants, {ModalIdentifiers} from 'utils/constants'; @@ -13,6 +14,9 @@ import {isDesktopApp} from 'utils/user_agent'; import AddChannelDropdown from '../add_channel_dropdown'; import ChannelFilter from '../channel_filter'; import {AddChannelButtonTreatments} from 'mattermost-redux/constants/config'; +import {KEYBOARD_SHORTCUTS, KeyboardShortcutsSeq} from '../../keyboard_shortcuts/keyboard_shortcuts'; +import KeyboardShortcutSequence from '../../keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; +import OverlayTrigger from 'components/overlay_trigger'; export type Props = { addChannelButton?: AddChannelButtonTreatments; @@ -146,27 +150,52 @@ export default class ChannelNavigator extends React.PureComponent { /> ); } + const getTooltip = (shortcut: KeyboardShortcutsSeq) => ( + + + + ); let layout; if (isDesktopApp() && !this.props.globalHeaderEnabled) { const historyArrows = ( <> - - + + - - + + ); diff --git a/components/sidebar/sidebar_category/__snapshots__/sidebar_category.test.tsx.snap b/components/sidebar/sidebar_category/__snapshots__/sidebar_category.test.tsx.snap index 24e9f32ba8d9..8c04cfa03f5e 100644 --- a/components/sidebar/sidebar_category/__snapshots__/sidebar_category.test.tsx.snap +++ b/components/sidebar/sidebar_category/__snapshots__/sidebar_category.test.tsx.snap @@ -316,6 +316,22 @@ exports[`components/sidebar/sidebar_category should match snapshot when sorting placement="right" > Create new direct message + } placement="top" @@ -426,6 +442,22 @@ exports[`components/sidebar/sidebar_category should match snapshot when the cate placement="right" > Create new direct message + } placement="top" diff --git a/components/sidebar/sidebar_category/sidebar_category.tsx b/components/sidebar/sidebar_category/sidebar_category.tsx index adde4fbc69c3..069f6be1d8b6 100644 --- a/components/sidebar/sidebar_category/sidebar_category.tsx +++ b/components/sidebar/sidebar_category/sidebar_category.tsx @@ -25,6 +25,10 @@ import SidebarChannel from '../sidebar_channel'; import {SidebarCategoryHeader} from '../sidebar_category_header'; import InviteMembersButton from '../invite_members_button'; +import KeyboardShortcutSequence from '../../keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; + +import {KEYBOARD_SHORTCUTS} from '../../keyboard_shortcuts/keyboard_shortcuts'; + import SidebarCategorySortingMenu from './sidebar_category_sorting_menu'; import SidebarCategoryMenu from './sidebar_category_menu'; @@ -283,6 +287,11 @@ export default class SidebarCategory extends React.PureComponent { className='hidden-xs' > {addHelpLabel} + ); diff --git a/components/team_sidebar/components/team_button.tsx b/components/team_sidebar/components/team_button.tsx index 8c2a5e7c402c..6218406f44e0 100644 --- a/components/team_sidebar/components/team_button.tsx +++ b/components/team_sidebar/components/team_button.tsx @@ -11,10 +11,12 @@ import classNames from 'classnames'; import {mark, trackEvent} from 'actions/telemetry_actions.jsx'; import Constants from 'utils/constants'; import {isDesktopApp} from 'utils/user_agent'; -import {isMac, localizeMessage} from 'utils/utils.jsx'; +import {localizeMessage} from 'utils/utils.jsx'; import CopyUrlContextMenu from 'components/copy_url_context_menu'; import OverlayTrigger from 'components/overlay_trigger'; import TeamIcon from '../../widgets/team_icon/team_icon'; +import KeyboardShortcutSequence from '../../keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; +import {KEYBOARD_SHORTCUTS} from '../../keyboard_shortcuts/keyboard_shortcuts'; interface Props { btnClass?: string; @@ -51,7 +53,7 @@ class TeamButton extends React.PureComponent { } render() { - const {teamIconUrl, displayName, btnClass, mentions, unread, isDraggable = false, teamIndex, teamId} = this.props; + const {teamIconUrl, displayName, btnClass, mentions, unread, isDraggable = false, teamIndex, teamId, order} = this.props; const {formatMessage} = this.props.intl; let teamClass: string = this.props.active ? 'active' : ''; @@ -119,36 +121,22 @@ class TeamButton extends React.PureComponent { let toolTip = this.props.tip || localizeMessage('team.button.name_undefined', 'This team does not have a name'); let orderIndicator: JSX.Element | undefined; if (typeof this.props.order !== 'undefined' && this.props.order < 10) { - let toolTipHelp; - if (isMac()) { - toolTipHelp = formatMessage({ - id: 'team.button.tooltip.mac', - defaultMessage: '⌘ ⌥ {order}', - }, - { - order: this.props.order, - }); - } else { - toolTipHelp = formatMessage({ - id: 'team.button.tooltip', - defaultMessage: 'Ctrl+Alt+{order}', - }, - { - order: this.props.order, - }); - } - toolTip = ( <> {toolTip} -
{toolTipHelp}
+ ); if (this.props.showOrder) { orderIndicator = (
- {this.props.order} + {order}
); } diff --git a/i18n/en.json b/i18n/en.json index 70633105c13b..ae6a96d34da5 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -4298,8 +4298,8 @@ "team.button.ariaLabel": "{teamName} team", "team.button.mentions.ariaLabel": "{teamName} team, {mentionCount} mentions", "team.button.name_undefined": "This team does not have a name", - "team.button.tooltip": "Ctrl+Alt+{order}", - "team.button.tooltip.mac": "⌘ ⌥ {order}", + "team.button.tooltip": "Ctrl|Alt|{order}", + "team.button.tooltip.mac": "⌘|⌥|{order}", "team.button.unread.ariaLabel": "{teamName} team unread", "terms_of_service.agreeButton": "I Agree", "terms_of_service.api_error": "Unable to complete the request. If this issue persists, contact your System Administrator.", diff --git a/sass/components/_tooltip.scss b/sass/components/_tooltip.scss index 5e15e392e468..9da25f16ce94 100644 --- a/sass/components/_tooltip.scss +++ b/sass/components/_tooltip.scss @@ -2,15 +2,16 @@ .tooltip { max-width: 220px; + font-family: inherit; pointer-events: none; word-wrap: break-word; .tooltip-inner { max-width: 100%; - padding: 5px 10px 6px; + padding: 4px 8px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); - font-size: 13px; - font-weight: 500; + font-size: 12px; + font-weight: 600; line-height: 18px; text-align: center; word-break: break-word; diff --git a/sass/routes/_module.scss b/sass/routes/_module.scss index b7ecc08e78c5..c0a5b19bca0e 100644 --- a/sass/routes/_module.scss +++ b/sass/routes/_module.scss @@ -11,6 +11,5 @@ @import 'loading'; @import 'print'; @import 'settings'; -@import 'shortcuts-modal'; @import 'signup'; @import 'statistics'; From 4fbc9c861aa823590b99519c485e7d28a673c2c4 Mon Sep 17 00:00:00 2001 From: Ashish Dhama Date: Mon, 20 Sep 2021 22:45:24 +0530 Subject: [PATCH 2/9] fix imports and some code touch ups --- .../components/header_icon_wrapper.tsx | 8 +++++--- components/file_upload/file_upload.jsx | 3 +-- .../at_mentions_button/at_mentions_button.tsx | 4 +--- .../history_buttons/history_buttons.tsx | 10 ++++++---- .../keyboard_shortcuts_modal.tsx | 20 +++++++++---------- .../keyboard_shortcuts_sequence/index.ts | 7 +++++++ .../keyboard_shortcuts.ts | 7 ++++--- .../keyboard_shortcuts_sequence.tsx | 20 +++++++++---------- components/shortcut_key/shortcut_key.tsx | 18 ++++++++--------- .../channel_navigator/channel_navigator.tsx | 8 +++++--- .../sidebar_category/sidebar_category.tsx | 13 +++--------- .../team_sidebar/components/team_button.tsx | 5 +++-- 12 files changed, 61 insertions(+), 62 deletions(-) create mode 100644 components/keyboard_shortcuts/keyboard_shortcuts_sequence/index.ts rename components/keyboard_shortcuts/{ => keyboard_shortcuts_sequence}/keyboard_shortcuts.ts (97%) diff --git a/components/channel_header/components/header_icon_wrapper.tsx b/components/channel_header/components/header_icon_wrapper.tsx index e1708dda4af4..bc3df1464dc6 100644 --- a/components/channel_header/components/header_icon_wrapper.tsx +++ b/components/channel_header/components/header_icon_wrapper.tsx @@ -10,8 +10,10 @@ import OverlayTrigger from 'components/overlay_trigger'; import {localizeMessage} from 'utils/utils.jsx'; import {Constants} from 'utils/constants'; import {t} from 'utils/i18n'; -import KeyboardShortcutSequence from '../../keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; -import {KEYBOARD_SHORTCUTS, KeyboardShortcutsSeq} from '../../keyboard_shortcuts/keyboard_shortcuts'; +import KeyboardShortcutSequence, { + KEYBOARD_SHORTCUTS, + NormalizeKeyboardShortcutDescriptor, +} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence'; type Props = { ariaLabel?: boolean; @@ -29,7 +31,7 @@ type TooltipInfo = { id: string; messageID: string; message: string; - keyboardShortcut?: KeyboardShortcutsSeq; + keyboardShortcut?: NormalizeKeyboardShortcutDescriptor; } const HeaderIconWrapper: React.FC = (props: Props) => { diff --git a/components/file_upload/file_upload.jsx b/components/file_upload/file_upload.jsx index c60ce8eb83ab..3665c1e33924 100644 --- a/components/file_upload/file_upload.jsx +++ b/components/file_upload/file_upload.jsx @@ -31,8 +31,7 @@ import MenuWrapper from 'components/widgets/menu/menu_wrapper'; import Menu from 'components/widgets/menu/menu'; import AttachmentIcon from 'components/widgets/icons/attachment_icon'; -import KeyboardShortcutSequence from '../keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; -import {KEYBOARD_SHORTCUTS} from '../keyboard_shortcuts/keyboard_shortcuts'; +import KeyboardShortcutSequence, {KEYBOARD_SHORTCUTS} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence'; import OverlayTrigger from 'components/overlay_trigger'; const holders = defineMessages({ diff --git a/components/global/at_mentions_button/at_mentions_button.tsx b/components/global/at_mentions_button/at_mentions_button.tsx index 9b21bd88bc59..b606c9c6d74a 100644 --- a/components/global/at_mentions_button/at_mentions_button.tsx +++ b/components/global/at_mentions_button/at_mentions_button.tsx @@ -13,9 +13,7 @@ import OverlayTrigger from 'components/overlay_trigger'; import {getIsRhsOpen, getRhsState} from 'selectors/rhs'; import {GlobalState} from 'types/store'; import Constants, {RHSStates} from 'utils/constants'; -import {KEYBOARD_SHORTCUTS} from '../../keyboard_shortcuts/keyboard_shortcuts'; -import KeyboardShortcutSequence from '../../keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; - +import KeyboardShortcutSequence, {KEYBOARD_SHORTCUTS} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence'; const AtMentionsButton = (): JSX.Element => { const dispatch = useDispatch(); const rhsState = useSelector((state: GlobalState) => getRhsState(state)); diff --git a/components/global/history_buttons/history_buttons.tsx b/components/global/history_buttons/history_buttons.tsx index cf2772273f06..903717449611 100644 --- a/components/global/history_buttons/history_buttons.tsx +++ b/components/global/history_buttons/history_buttons.tsx @@ -9,9 +9,11 @@ import IconButton from '@mattermost/compass-components/components/icon-button'; import {trackEvent} from 'actions/telemetry_actions'; import * as Utils from 'utils/utils'; import {browserHistory} from 'utils/browser_history'; -import {KEYBOARD_SHORTCUTS, KeyboardShortcutsSeq} from '../../keyboard_shortcuts/keyboard_shortcuts'; -import Constants from '../../../utils/constants'; -import KeyboardShortcutSequence from '../../keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; +import Constants from 'utils/constants'; +import KeyboardShortcutSequence, { + KEYBOARD_SHORTCUTS, + NormalizeKeyboardShortcutDescriptor, +} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence'; import OverlayTrigger from 'components/overlay_trigger'; const HistoryButtonsContainer = styled.nav` @@ -24,7 +26,7 @@ const HistoryButtonsContainer = styled.nav` `; const HistoryButtons = (): JSX.Element => { - const getTooltip = (shortcut: KeyboardShortcutsSeq) => ( + const getTooltip = (shortcut: NormalizeKeyboardShortcutDescriptor) => ( diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx b/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx index 12c94b97c8e9..125b7e2e313e 100644 --- a/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx +++ b/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx @@ -9,8 +9,9 @@ import ModalStore from 'stores/modal_store.jsx'; import Constants from 'utils/constants'; import {t} from 'utils/i18n'; import * as Utils from 'utils/utils'; -import {KEYBOARD_SHORTCUTS} from '../keyboard_shortcuts'; -import KeyboardShortcutSequence from '../keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; +import KeyboardShortcutSequence, { + KEYBOARD_SHORTCUTS, +} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence'; import './keyboard_shortcuts_modal.scss'; const modalMessages = defineMessages({ @@ -54,23 +55,20 @@ const modalMessages = defineMessages({ }); const KeyboardShortcutsModal: React.FC = () => { - const [show, updateShow] = useState(); + const [show, updateShow] = useState(false); useEffect(() => { + //toggles the state of shortcut dialog + function handleToggle(): void { + updateShow(!show); + } ModalStore.addModalListener(Constants.ActionTypes.TOGGLE_SHORTCUTS_MODAL, handleToggle); return () => { ModalStore.removeModalListener(Constants.ActionTypes.TOGGLE_SHORTCUTS_MODAL, handleToggle); }; }, []); - const handleToggle = () => { - //toggles the state of shortcut dialog - updateShow(!show); - }; - - const handleHide = () => { - updateShow(false); - }; + const handleHide = (): void => updateShow(false); const {formatMessage} = useIntl(); const isLinux = Utils.isLinux(); diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/index.ts b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/index.ts new file mode 100644 index 000000000000..b7db22946cbd --- /dev/null +++ b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/index.ts @@ -0,0 +1,7 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import KeyboardShortcutSequence from './keyboard_shortcuts_sequence'; + +export * from './keyboard_shortcuts'; +export default KeyboardShortcutSequence; diff --git a/components/keyboard_shortcuts/keyboard_shortcuts.ts b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts.ts similarity index 97% rename from components/keyboard_shortcuts/keyboard_shortcuts.ts rename to components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts.ts index 26e030e6b1fa..56dfbda9f259 100644 --- a/components/keyboard_shortcuts/keyboard_shortcuts.ts +++ b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts.ts @@ -1,12 +1,13 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. + import {MessageDescriptor} from 'react-intl'; -import {t} from '../../utils/i18n'; +import {t} from 'utils/i18n'; -export type KeyboardShortcutsSeq = MessageDescriptor | {default: MessageDescriptor; mac?: MessageDescriptor}; +export type NormalizeKeyboardShortcutDescriptor = MessageDescriptor | {default: MessageDescriptor; mac?: MessageDescriptor}; -export function isMessageDescriptor(descriptor: KeyboardShortcutsSeq): descriptor is MessageDescriptor { +export function isMessageDescriptor(descriptor: NormalizeKeyboardShortcutDescriptor): descriptor is MessageDescriptor { return Boolean((descriptor as MessageDescriptor).id); } diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx index df50c46c0384..224f22f0f496 100644 --- a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx +++ b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx @@ -4,21 +4,23 @@ import {FormatXMLElementFn, PrimitiveType} from 'intl-messageformat'; import React, {memo} from 'react'; import {useIntl} from 'react-intl'; -import {isMessageDescriptor, KeyboardShortcutsSeq} from '../keyboard_shortcuts'; +import {ShortcutKetVariant, ShortcutKey} from '../../shortcut_key'; + +import {isMac} from 'utils/utils'; + +import {isMessageDescriptor, NormalizeKeyboardShortcutDescriptor} from './keyboard_shortcuts'; -import {isMac} from '../../../utils/utils'; import './keyboard_shortcuts_sequence.scss'; -import {ShortcutKetVariant, ShortcutKey} from '../../shortcut_key'; type Props = { - shortcut: KeyboardShortcutsSeq; + shortcut: NormalizeKeyboardShortcutDescriptor; values?: Record>; hideDescription?: boolean; hoistDescription?: boolean; isInsideTooltip?: boolean; }; -function normalize(shortcut: KeyboardShortcutsSeq) { +function normalize(shortcut: NormalizeKeyboardShortcutDescriptor) { if (isMessageDescriptor(shortcut)) { return shortcut; } @@ -46,15 +48,11 @@ function KeyboardShortcutSequence({shortcut, values, hideDescription, hoistDescr description = splitShortcut[0]; } - if (hideDescription) { - description = undefined; - } - return ( <> - {hoistDescription && description?.replace(/:{1,2}$/, '')} + {hoistDescription && !hideDescription && description?.replace(/:{1,2}$/, '')}
- {!hoistDescription && description && {description}} + {!hoistDescription && !hideDescription && description && {description}} {keys?.split(KEY_SEPARATOR).map((key) => ( { - let className = 'shortcut-key'; - if (variant === ShortcutKetVariant.Contrast) { - className += ' shortcut-key--contrast'; - } else if (variant === ShortcutKetVariant.Tooltip) { - className += ' shortcut-key--tooltip'; - } else if (variant === ShortcutKetVariant.ShortcutModal) { - className += ' shortcut-key--shortcut-modal'; - } - return ( - + {children} ); diff --git a/components/sidebar/channel_navigator/channel_navigator.tsx b/components/sidebar/channel_navigator/channel_navigator.tsx index 9797ed573584..88c5f8c08547 100644 --- a/components/sidebar/channel_navigator/channel_navigator.tsx +++ b/components/sidebar/channel_navigator/channel_navigator.tsx @@ -14,8 +14,10 @@ import {isDesktopApp} from 'utils/user_agent'; import AddChannelDropdown from '../add_channel_dropdown'; import ChannelFilter from '../channel_filter'; import {AddChannelButtonTreatments} from 'mattermost-redux/constants/config'; -import {KEYBOARD_SHORTCUTS, KeyboardShortcutsSeq} from '../../keyboard_shortcuts/keyboard_shortcuts'; -import KeyboardShortcutSequence from '../../keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; +import KeyboardShortcutSequence, { + KEYBOARD_SHORTCUTS, + NormalizeKeyboardShortcutDescriptor, +} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence'; import OverlayTrigger from 'components/overlay_trigger'; export type Props = { @@ -150,7 +152,7 @@ export default class ChannelNavigator extends React.PureComponent { /> ); } - const getTooltip = (shortcut: KeyboardShortcutsSeq) => ( + const getTooltip = (shortcut: NormalizeKeyboardShortcutDescriptor) => ( diff --git a/components/sidebar/sidebar_category/sidebar_category.tsx b/components/sidebar/sidebar_category/sidebar_category.tsx index 069f6be1d8b6..9f7fbe519c0f 100644 --- a/components/sidebar/sidebar_category/sidebar_category.tsx +++ b/components/sidebar/sidebar_category/sidebar_category.tsx @@ -10,27 +10,20 @@ import classNames from 'classnames'; import {CategoryTypes} from 'mattermost-redux/constants/channel_categories'; import {ChannelCategory, CategorySorting} from 'mattermost-redux/types/channel_categories'; import {localizeMessage} from 'mattermost-redux/utils/i18n_utils'; - import {trackEvent} from 'actions/telemetry_actions'; - import OverlayTrigger from 'components/overlay_trigger'; - import {DraggingState} from 'types/store'; - import Constants, {A11yCustomEventTypes, DraggingStateTypes, DraggingStates} from 'utils/constants'; import {t} from 'utils/i18n'; import {isKeyPressed} from 'utils/utils'; - import SidebarChannel from '../sidebar_channel'; import {SidebarCategoryHeader} from '../sidebar_category_header'; import InviteMembersButton from '../invite_members_button'; - -import KeyboardShortcutSequence from '../../keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; - -import {KEYBOARD_SHORTCUTS} from '../../keyboard_shortcuts/keyboard_shortcuts'; +import KeyboardShortcutSequence, { + KEYBOARD_SHORTCUTS, +} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence'; import SidebarCategorySortingMenu from './sidebar_category_sorting_menu'; - import SidebarCategoryMenu from './sidebar_category_menu'; type Props = { diff --git a/components/team_sidebar/components/team_button.tsx b/components/team_sidebar/components/team_button.tsx index 6218406f44e0..443bbfd2ab7b 100644 --- a/components/team_sidebar/components/team_button.tsx +++ b/components/team_sidebar/components/team_button.tsx @@ -15,8 +15,9 @@ import {localizeMessage} from 'utils/utils.jsx'; import CopyUrlContextMenu from 'components/copy_url_context_menu'; import OverlayTrigger from 'components/overlay_trigger'; import TeamIcon from '../../widgets/team_icon/team_icon'; -import KeyboardShortcutSequence from '../../keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence'; -import {KEYBOARD_SHORTCUTS} from '../../keyboard_shortcuts/keyboard_shortcuts'; +import KeyboardShortcutSequence, { + KEYBOARD_SHORTCUTS, +} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence'; interface Props { btnClass?: string; From 3c3fbad61c77816b7664e4a2b8a9d5c3d6899802 Mon Sep 17 00:00:00 2001 From: Ashish Dhama Date: Mon, 20 Sep 2021 22:52:52 +0530 Subject: [PATCH 3/9] fix import order --- components/global/at_mentions_button/at_mentions_button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/global/at_mentions_button/at_mentions_button.tsx b/components/global/at_mentions_button/at_mentions_button.tsx index b606c9c6d74a..7a780496da84 100644 --- a/components/global/at_mentions_button/at_mentions_button.tsx +++ b/components/global/at_mentions_button/at_mentions_button.tsx @@ -5,7 +5,6 @@ import React from 'react'; import {Tooltip} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; import {useDispatch, useSelector} from 'react-redux'; - import IconButton from '@mattermost/compass-components/components/icon-button'; import {closeRightHandSide, showMentions} from 'actions/views/rhs'; @@ -14,6 +13,7 @@ import {getIsRhsOpen, getRhsState} from 'selectors/rhs'; import {GlobalState} from 'types/store'; import Constants, {RHSStates} from 'utils/constants'; import KeyboardShortcutSequence, {KEYBOARD_SHORTCUTS} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence'; + const AtMentionsButton = (): JSX.Element => { const dispatch = useDispatch(); const rhsState = useSelector((state: GlobalState) => getRhsState(state)); From 425ee22dad56d20df0084c06970c00bff5b6d901 Mon Sep 17 00:00:00 2001 From: Ashish Dhama Date: Tue, 21 Sep 2021 13:11:40 +0530 Subject: [PATCH 4/9] change normalize func name and keyboard shortcut type rename --- .../channel_header/components/header_icon_wrapper.tsx | 4 ++-- components/global/history_buttons/history_buttons.tsx | 4 ++-- .../keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx | 4 +--- .../keyboard_shortcuts_sequence/keyboard_shortcuts.ts | 4 ++-- .../keyboard_shortcuts_sequence.tsx | 8 ++++---- .../sidebar/channel_navigator/channel_navigator.tsx | 4 ++-- 6 files changed, 13 insertions(+), 15 deletions(-) diff --git a/components/channel_header/components/header_icon_wrapper.tsx b/components/channel_header/components/header_icon_wrapper.tsx index bc3df1464dc6..66464c663e46 100644 --- a/components/channel_header/components/header_icon_wrapper.tsx +++ b/components/channel_header/components/header_icon_wrapper.tsx @@ -12,7 +12,7 @@ import {Constants} from 'utils/constants'; import {t} from 'utils/i18n'; import KeyboardShortcutSequence, { KEYBOARD_SHORTCUTS, - NormalizeKeyboardShortcutDescriptor, + KeyboardShortcutDescriptor, } from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence'; type Props = { @@ -31,7 +31,7 @@ type TooltipInfo = { id: string; messageID: string; message: string; - keyboardShortcut?: NormalizeKeyboardShortcutDescriptor; + keyboardShortcut?: KeyboardShortcutDescriptor; } const HeaderIconWrapper: React.FC = (props: Props) => { diff --git a/components/global/history_buttons/history_buttons.tsx b/components/global/history_buttons/history_buttons.tsx index 903717449611..89ab06eccf45 100644 --- a/components/global/history_buttons/history_buttons.tsx +++ b/components/global/history_buttons/history_buttons.tsx @@ -12,7 +12,7 @@ import {browserHistory} from 'utils/browser_history'; import Constants from 'utils/constants'; import KeyboardShortcutSequence, { KEYBOARD_SHORTCUTS, - NormalizeKeyboardShortcutDescriptor, + KeyboardShortcutDescriptor, } from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence'; import OverlayTrigger from 'components/overlay_trigger'; @@ -26,7 +26,7 @@ const HistoryButtonsContainer = styled.nav` `; const HistoryButtons = (): JSX.Element => { - const getTooltip = (shortcut: NormalizeKeyboardShortcutDescriptor) => ( + const getTooltip = (shortcut: KeyboardShortcutDescriptor) => ( diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx b/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx index 125b7e2e313e..1c674a749288 100644 --- a/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx +++ b/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx @@ -59,9 +59,7 @@ const KeyboardShortcutsModal: React.FC = () => { useEffect(() => { //toggles the state of shortcut dialog - function handleToggle(): void { - updateShow(!show); - } + const handleToggle = (): void => updateShow(!show); ModalStore.addModalListener(Constants.ActionTypes.TOGGLE_SHORTCUTS_MODAL, handleToggle); return () => { ModalStore.removeModalListener(Constants.ActionTypes.TOGGLE_SHORTCUTS_MODAL, handleToggle); diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts.ts b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts.ts index 56dfbda9f259..2015a413e28f 100644 --- a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts.ts +++ b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts.ts @@ -5,9 +5,9 @@ import {MessageDescriptor} from 'react-intl'; import {t} from 'utils/i18n'; -export type NormalizeKeyboardShortcutDescriptor = MessageDescriptor | {default: MessageDescriptor; mac?: MessageDescriptor}; +export type KeyboardShortcutDescriptor = MessageDescriptor | {default: MessageDescriptor; mac?: MessageDescriptor}; -export function isMessageDescriptor(descriptor: NormalizeKeyboardShortcutDescriptor): descriptor is MessageDescriptor { +export function isMessageDescriptor(descriptor: KeyboardShortcutDescriptor): descriptor is MessageDescriptor { return Boolean((descriptor as MessageDescriptor).id); } diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx index 224f22f0f496..b38824fa0320 100644 --- a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx +++ b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx @@ -8,19 +8,19 @@ import {ShortcutKetVariant, ShortcutKey} from '../../shortcut_key'; import {isMac} from 'utils/utils'; -import {isMessageDescriptor, NormalizeKeyboardShortcutDescriptor} from './keyboard_shortcuts'; +import {isMessageDescriptor, KeyboardShortcutDescriptor} from './keyboard_shortcuts'; import './keyboard_shortcuts_sequence.scss'; type Props = { - shortcut: NormalizeKeyboardShortcutDescriptor; + shortcut: KeyboardShortcutDescriptor; values?: Record>; hideDescription?: boolean; hoistDescription?: boolean; isInsideTooltip?: boolean; }; -function normalize(shortcut: NormalizeKeyboardShortcutDescriptor) { +function normalizeShortcutDescriptor(shortcut: KeyboardShortcutDescriptor) { if (isMessageDescriptor(shortcut)) { return shortcut; } @@ -33,7 +33,7 @@ const KEY_SEPARATOR = '|'; function KeyboardShortcutSequence({shortcut, values, hideDescription, hoistDescription, isInsideTooltip}: Props) { const {formatMessage} = useIntl(); - const shortcutText = formatMessage(normalize(shortcut), values); + const shortcutText = formatMessage(normalizeShortcutDescriptor(shortcut), values); const splitShortcut = shortcutText.split('\t'); let description: string | undefined; diff --git a/components/sidebar/channel_navigator/channel_navigator.tsx b/components/sidebar/channel_navigator/channel_navigator.tsx index 88c5f8c08547..83f1c6a717e2 100644 --- a/components/sidebar/channel_navigator/channel_navigator.tsx +++ b/components/sidebar/channel_navigator/channel_navigator.tsx @@ -16,7 +16,7 @@ import ChannelFilter from '../channel_filter'; import {AddChannelButtonTreatments} from 'mattermost-redux/constants/config'; import KeyboardShortcutSequence, { KEYBOARD_SHORTCUTS, - NormalizeKeyboardShortcutDescriptor, + KeyboardShortcutDescriptor, } from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence'; import OverlayTrigger from 'components/overlay_trigger'; @@ -152,7 +152,7 @@ export default class ChannelNavigator extends React.PureComponent { /> ); } - const getTooltip = (shortcut: NormalizeKeyboardShortcutDescriptor) => ( + const getTooltip = (shortcut: KeyboardShortcutDescriptor) => ( From a5174e66e463274d8ace8563384d8526ac743a4b Mon Sep 17 00:00:00 2001 From: Ashish Dhama Date: Tue, 21 Sep 2021 16:35:55 +0530 Subject: [PATCH 5/9] refining code --- .../keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx | 8 ++++---- .../keyboard_shortcuts_sequence.tsx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx b/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx index 1c674a749288..4f6761e9d35a 100644 --- a/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx +++ b/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx @@ -54,19 +54,19 @@ const modalMessages = defineMessages({ }, }); -const KeyboardShortcutsModal: React.FC = () => { - const [show, updateShow] = useState(false); +const KeyboardShortcutsModal = (): JSX.Element => { + const [show, setShow] = useState(false); useEffect(() => { //toggles the state of shortcut dialog - const handleToggle = (): void => updateShow(!show); + const handleToggle = (): void => setShow(!show); ModalStore.addModalListener(Constants.ActionTypes.TOGGLE_SHORTCUTS_MODAL, handleToggle); return () => { ModalStore.removeModalListener(Constants.ActionTypes.TOGGLE_SHORTCUTS_MODAL, handleToggle); }; }, []); - const handleHide = (): void => updateShow(false); + const handleHide = (): void => setShow(false); const {formatMessage} = useIntl(); const isLinux = Utils.isLinux(); diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx index b38824fa0320..df40e5ff0678 100644 --- a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx +++ b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx @@ -20,13 +20,13 @@ type Props = { isInsideTooltip?: boolean; }; +const isOsMac = isMac(); function normalizeShortcutDescriptor(shortcut: KeyboardShortcutDescriptor) { if (isMessageDescriptor(shortcut)) { return shortcut; } - const {default: standard, mac} = shortcut; - return isMac() && mac ? mac : standard; + return isOsMac && mac ? mac : standard; } const KEY_SEPARATOR = '|'; @@ -36,8 +36,8 @@ function KeyboardShortcutSequence({shortcut, values, hideDescription, hoistDescr const shortcutText = formatMessage(normalizeShortcutDescriptor(shortcut), values); const splitShortcut = shortcutText.split('\t'); - let description: string | undefined; - let keys: string | undefined; + let description = ''; + let keys = ''; if (splitShortcut.length > 1) { description = splitShortcut[0]; From 0873bbcc336d8f4b5d9e2ca799a3db8bc3cd8988 Mon Sep 17 00:00:00 2001 From: Ashish Dhama Date: Tue, 21 Sep 2021 17:51:19 +0530 Subject: [PATCH 6/9] fix test breaking code block --- .../keyboard_shortcuts_sequence.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx index df40e5ff0678..7fc81831b0d5 100644 --- a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx +++ b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx @@ -20,13 +20,12 @@ type Props = { isInsideTooltip?: boolean; }; -const isOsMac = isMac(); function normalizeShortcutDescriptor(shortcut: KeyboardShortcutDescriptor) { if (isMessageDescriptor(shortcut)) { return shortcut; } const {default: standard, mac} = shortcut; - return isOsMac && mac ? mac : standard; + return isMac() && mac ? mac : standard; } const KEY_SEPARATOR = '|'; From 6bd2d89138bb0ebda86aff27dddcd5cc6ada4f87 Mon Sep 17 00:00:00 2001 From: Michel Engelen Date: Tue, 21 Sep 2021 14:38:10 +0200 Subject: [PATCH 7/9] PR review remarks ### components/shortcut_key/index.ts - improved index exports ### components/shortcut_key/shortcut_key.tsx - fixed a typo in `ShortcutKeyVariant` enum ### components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx - shortened components import - improved `normalizeShortcutDescriptor` function --- .../keyboard_shortcuts_sequence.tsx | 13 ++++++++----- components/shortcut_key/index.ts | 3 +-- components/shortcut_key/shortcut_key.tsx | 14 +++++++------- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx index 7fc81831b0d5..92db6fcbd09d 100644 --- a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx +++ b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx @@ -4,8 +4,7 @@ import {FormatXMLElementFn, PrimitiveType} from 'intl-messageformat'; import React, {memo} from 'react'; import {useIntl} from 'react-intl'; -import {ShortcutKetVariant, ShortcutKey} from '../../shortcut_key'; - +import {ShortcutKeyVariant, ShortcutKey} from 'components/shortcut_key'; import {isMac} from 'utils/utils'; import {isMessageDescriptor, KeyboardShortcutDescriptor} from './keyboard_shortcuts'; @@ -20,12 +19,15 @@ type Props = { isInsideTooltip?: boolean; }; +const descriptorProperty = isMac() ? 'mac' : 'default'; + function normalizeShortcutDescriptor(shortcut: KeyboardShortcutDescriptor) { if (isMessageDescriptor(shortcut)) { return shortcut; } - const {default: standard, mac} = shortcut; - return isMac() && mac ? mac : standard; + + // return the default descriptor when there is no mac specific descriptor + return shortcut[descriptorProperty] || shortcut.default; } const KEY_SEPARATOR = '|'; @@ -55,7 +57,7 @@ function KeyboardShortcutSequence({shortcut, values, hideDescription, hoistDescr {keys?.split(KEY_SEPARATOR).map((key) => ( {key} @@ -64,4 +66,5 @@ function KeyboardShortcutSequence({shortcut, values, hideDescription, hoistDescr ); } + export default memo(KeyboardShortcutSequence); diff --git a/components/shortcut_key/index.ts b/components/shortcut_key/index.ts index ddf42fff53b9..1b9505b2babf 100644 --- a/components/shortcut_key/index.ts +++ b/components/shortcut_key/index.ts @@ -1,5 +1,4 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import {ShortcutKey, ShortcutKetVariant} from './shortcut_key'; -export {ShortcutKey, ShortcutKetVariant}; +export * from './shortcut_key'; diff --git a/components/shortcut_key/shortcut_key.tsx b/components/shortcut_key/shortcut_key.tsx index 0ce1813e2553..5bd1eaa5f452 100644 --- a/components/shortcut_key/shortcut_key.tsx +++ b/components/shortcut_key/shortcut_key.tsx @@ -1,28 +1,28 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. import React from 'react'; +import classNames from 'classnames'; import './shortcut_key.scss'; -import classNames from 'classnames'; -export enum ShortcutKetVariant { +export enum ShortcutKeyVariant { Contrast = 'contrast', Tooltip = 'tooltip', ShortcutModal = 'shortcut', } export type ShortcutKeyProps = { - variant?: ShortcutKetVariant; + variant?: ShortcutKeyVariant; children: React.ReactNode; } -export const ShortcutKey = ({children, variant}: ShortcutKeyProps) => { +export const ShortcutKey = ({children, variant}: ShortcutKeyProps): JSX.Element => { return ( {children} From 7407d4963a7fdfe7ed063a7f94e8d151ce54f97a Mon Sep 17 00:00:00 2001 From: Ashish Dhama Date: Tue, 21 Sep 2021 19:00:50 +0530 Subject: [PATCH 8/9] minor code clean up and reverting the normalizeShortcutDescriptor code snippet --- .../keyboard_shortcuts_modal.scss | 10 ---------- .../keyboard_shortcuts_sequence.tsx | 7 ++----- components/search_shortcut/search_shortcut.tsx | 8 ++++---- components/shortcut_key/shortcut_key.test.tsx | 4 ++-- 4 files changed, 8 insertions(+), 21 deletions(-) diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss b/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss index da26cd9e7e34..c97060c99baa 100644 --- a/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss +++ b/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss @@ -54,16 +54,6 @@ margin-right: 5px; } } - - // TODO: It probably makes sense to switch to component - // in order to have universal shortcut key appearance - .shortcut-key { - padding: 4px 6px; - margin: 5px 0 5px 5px; - border-radius: 3px; - font-size: 12px; - font-weight: 500; - } } } diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx index 92db6fcbd09d..5a0e27b289c8 100644 --- a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx +++ b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.tsx @@ -19,15 +19,12 @@ type Props = { isInsideTooltip?: boolean; }; -const descriptorProperty = isMac() ? 'mac' : 'default'; - function normalizeShortcutDescriptor(shortcut: KeyboardShortcutDescriptor) { if (isMessageDescriptor(shortcut)) { return shortcut; } - - // return the default descriptor when there is no mac specific descriptor - return shortcut[descriptorProperty] || shortcut.default; + const {default: standard, mac} = shortcut; + return isMac() && mac ? mac : standard; } const KEY_SEPARATOR = '|'; diff --git a/components/search_shortcut/search_shortcut.tsx b/components/search_shortcut/search_shortcut.tsx index 31fdb3779709..a7a2782bcca9 100644 --- a/components/search_shortcut/search_shortcut.tsx +++ b/components/search_shortcut/search_shortcut.tsx @@ -2,7 +2,7 @@ // See LICENSE.txt for license information. import React from 'react'; -import {ShortcutKey, ShortcutKetVariant} from 'components/shortcut_key'; +import {ShortcutKey, ShortcutKeyVariant} from 'components/shortcut_key'; import {isMac} from 'utils/utils.jsx'; import {isDesktopApp} from 'utils/user_agent'; @@ -13,9 +13,9 @@ export const SearchShortcut = () => { return ( - {controlKey} - {!isDesktopApp() && {'Shift'}} - {'F'} + {controlKey} + {!isDesktopApp() && {'Shift'}} + {'F'} ); }; diff --git a/components/shortcut_key/shortcut_key.test.tsx b/components/shortcut_key/shortcut_key.test.tsx index eb0c37a0284e..c6149b52f49c 100644 --- a/components/shortcut_key/shortcut_key.test.tsx +++ b/components/shortcut_key/shortcut_key.test.tsx @@ -3,7 +3,7 @@ import React from 'react'; import {shallow} from 'enzyme'; -import {ShortcutKey, ShortcutKetVariant} from './shortcut_key'; +import {ShortcutKey, ShortcutKeyVariant} from './shortcut_key'; describe('components/ShortcutKey', () => { test('should match snapshot for regular key', () => { @@ -12,7 +12,7 @@ describe('components/ShortcutKey', () => { }); test('should match snapshot for contrast key', () => { - const wrapper = shallow({'Shift'}); + const wrapper = shallow({'Shift'}); expect(wrapper).toMatchSnapshot(); }); }); From 305e885fcf8be4474e503f252088b5154d7e837c Mon Sep 17 00:00:00 2001 From: Ashish Dhama Date: Thu, 23 Sep 2021 14:26:33 +0530 Subject: [PATCH 9/9] update test for keyboard shortcut sequence component --- .../keyboard_shortcuts_sequence.test.tsx.snap | 177 +++++++++++++++++- .../keyboard_shortcuts_sequence.test.tsx | 77 +++++++- 2 files changed, 252 insertions(+), 2 deletions(-) diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/__snapshots__/keyboard_shortcuts_sequence.test.tsx.snap b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/__snapshots__/keyboard_shortcuts_sequence.test.tsx.snap index ec95c55cadca..bb6161b8aaf6 100644 --- a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/__snapshots__/keyboard_shortcuts_sequence.test.tsx.snap +++ b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/__snapshots__/keyboard_shortcuts_sequence.test.tsx.snap @@ -1,6 +1,65 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`components/shortcuts/KeyboardShortcutsSequence should match snapshot modal for Mac 1`] = ` +exports[`components/shortcuts/KeyboardShortcutsSequence should create sequence with order 1`] = ` + +
+ + + Ctrl + + + + + Alt + + + + + 3 + + +
+ +`; + +exports[`components/shortcuts/KeyboardShortcutsSequence should match snapshot when used for modal with description 1`] = ` `; + +exports[`components/shortcuts/KeyboardShortcutsSequence should render sequence hoisting description 1`] = ` + + Keyboard Shortcuts +
+ + + ⌘ + + + + + / + + +
+ +`; + +exports[`components/shortcuts/KeyboardShortcutsSequence should render sequence without description 1`] = ` + +
+ + + ⌘ + + + + + / + + +
+ +`; + +exports[`components/shortcuts/KeyboardShortcutsSequence should render sequence without description 2`] = ` + +
+ + Keyboard Shortcuts + + + + ⌘ + + + + + / + + +
+ +`; diff --git a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.test.tsx b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.test.tsx index c7163a15fc1d..79d841d2cdd9 100644 --- a/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.test.tsx +++ b/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.test.tsx @@ -7,17 +7,92 @@ import {mountWithIntl} from 'tests/helpers/intl-test-helper'; import KeyboardShortcutsSequence from './keyboard_shortcuts_sequence'; +import KeyboardShortcutSequence, {KEYBOARD_SHORTCUTS} from './index'; + describe('components/shortcuts/KeyboardShortcutsSequence', () => { - test('should match snapshot modal for Mac', () => { + test('should match snapshot when used for modal with description', () => { + const wrapper = mountWithIntl( + , + ); + + const tag = {'Keyboard Shortcuts'}; + expect(wrapper.contains(tag)).toEqual(true); + expect(wrapper).toMatchSnapshot(); + expect(wrapper.find('.shortcut-key--tooltip')).toHaveLength(0); + expect(wrapper.find('.shortcut-key--shortcut-modal')).toHaveLength(2); + }); + + test('should render sequence without description', () => { + const wrapper = mountWithIntl( + , + ); + + const tag = {'Keyboard Shortcuts'}; + expect(wrapper.contains(tag)).toEqual(false); + expect(wrapper).toMatchSnapshot(); + }); + + test('should render sequence without description', () => { const wrapper = mountWithIntl( , ); + const tag = {'Keyboard Shortcuts'}; + expect(wrapper.contains(tag)).toEqual(true); + expect(wrapper).toMatchSnapshot(); + expect(wrapper.find('.shortcut-key--tooltip')).toHaveLength(2); + expect(wrapper.find('.shortcut-key--shortcut-modal')).toHaveLength(0); + }); + test('should render sequence hoisting description', () => { + const wrapper = mountWithIntl( + , + ); + + const tag = {'Keyboard Shortcuts'}; + expect(wrapper.contains(tag)).toEqual(false); + expect(wrapper).toMatchSnapshot(); + expect(wrapper.find('.shortcut-key--tooltip')).toHaveLength(2); + expect(wrapper.find('.shortcut-key--shortcut-modal')).toHaveLength(0); + }); + + test('should create sequence with order', () => { + const order = 3; + const wrapper = mountWithIntl( + , + ); expect(wrapper).toMatchSnapshot(); + const tag = {'Keyboard Shortcuts'}; + expect(wrapper.contains(tag)).toEqual(false); + expect(wrapper.find('.shortcut-key--tooltip')).toHaveLength(3); + expect(wrapper.find('.shortcut-key--shortcut-modal')).toHaveLength(0); }); });