MM-54814: Convert ./components/widgets/menu/menu_group.tsx from Class Component to Function Component (#25183)

* MM-54814: Convert ./components/widgets/menu/menu_group.tsx from Class Component to Function Component

Signed-off-by: Nicolas Le Cam <niko.lecam@gmail.com>

* review: Don't rerender component if props are unchanged

Signed-off-by: Nicolas Le Cam <niko.lecam@gmail.com>

* Fix tests

Signed-off-by: Nicolas Le Cam <niko.lecam@gmail.com>

---------

Signed-off-by: Nicolas Le Cam <niko.lecam@gmail.com>
This commit is contained in:
Nicolas Le Cam 2023-11-21 11:25:54 +01:00 committed by GitHub
parent d5c04f5d95
commit 88520e6740
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 262 additions and 262 deletions

View File

@ -47,7 +47,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
inHeaderDropdown={true}
openUp={false}
/>
<MenuGroup>
<Memo(MenuGroup)>
<Connect(ToggleFavoriteChannel)
channel={
Object {
@ -231,8 +231,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
}
}
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(Component)
channelId="test-channel-id"
permissions={
@ -424,8 +424,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
text="View Members"
/>
</Connect(Component)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
dialogProps={
Object {
@ -496,8 +496,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
show={false}
text="Convert to Private Channel"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(Component)
channelId="test-channel-id"
permissions={
@ -780,9 +780,9 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
<Connect(Component)
isArchived={false}
/>
</MenuGroup>
<MenuGroup />
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup) />
<Memo(MenuGroup)>
<Connect(Component)
channelId="test-channel-id"
permissions={
@ -828,7 +828,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
text="Unarchive Channel"
/>
</Connect(Component)>
</MenuGroup>
</Memo(MenuGroup)>
</Fragment>
`;
@ -879,7 +879,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
inHeaderDropdown={true}
openUp={false}
/>
<MenuGroup>
<Memo(MenuGroup)>
<Connect(ToggleFavoriteChannel)
channel={
Object {
@ -1063,8 +1063,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
}
}
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(Component)
channelId="test-channel-id"
permissions={
@ -1256,8 +1256,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
text="View Members"
/>
</Connect(Component)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
dialogProps={
Object {
@ -1328,8 +1328,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
show={false}
text="Convert to Private Channel"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(Component)
channelId="test-channel-id"
permissions={
@ -1612,8 +1612,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
<Connect(Component)
isArchived={false}
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
id="plugin-1_pluginmenuitem"
key="plugin-1_pluginmenuitem"
@ -1628,8 +1628,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
show={true}
text="plugin-2-text"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(Component)
channelId="test-channel-id"
permissions={
@ -1675,6 +1675,6 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
text="Unarchive Channel"
/>
</Connect(Component)>
</MenuGroup>
</Memo(MenuGroup)>
</Fragment>
`;

View File

@ -47,7 +47,7 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
openLeft={false}
openUp={false}
>
<MenuGroup>
<Memo(MenuGroup)>
<MenuItemExternalLink
iconClassName="icon-file-text-outline"
id="mattermostUserGuideLink"
@ -84,7 +84,7 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
show={true}
text="Keyboard shortcuts"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
</MenuWrapper>
`;
@ -136,7 +136,7 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
openLeft={false}
openUp={false}
>
<MenuGroup>
<Memo(MenuGroup)>
<MenuItemExternalLink
iconClassName="icon-file-text-outline"
id="mattermostUserGuideLink"
@ -165,7 +165,7 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
show={true}
text="Keyboard shortcuts"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
</MenuWrapper>
`;
@ -217,7 +217,7 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
openLeft={false}
openUp={false}
>
<MenuGroup>
<Memo(MenuGroup)>
<MenuItemExternalLink
iconClassName="icon-file-text-outline"
id="mattermostUserGuideLink"
@ -262,7 +262,7 @@ exports[`components/channel_header/components/UserGuideDropdown should match sna
show={true}
text="Test Item"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
</MenuWrapper>
`;

View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/global/product_switcher_menu should match snapshot with id 1`] = `
<MenuGroup>
<Memo(MenuGroup)>
<div
onClick={[Function]}
>
@ -195,11 +195,11 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1
text="About "
/>
</div>
</MenuGroup>
</Memo(MenuGroup)>
`;
exports[`components/global/product_switcher_menu should match snapshot with most of the thing enabled 1`] = `
<MenuGroup>
<Memo(MenuGroup)>
<div
onClick={[Function]}
>
@ -393,7 +393,7 @@ exports[`components/global/product_switcher_menu should match snapshot with most
text="About "
/>
</div>
</MenuGroup>
</Memo(MenuGroup)>
`;
exports[`components/global/product_switcher_menu should match userGroups snapshot with EnableCustomGroups config 1`] = `

View File

@ -6,17 +6,19 @@ import React from 'react';
import type {UserProfile} from '@mattermost/types/users';
import MenuGroup from 'components/widgets/menu/menu_group';
import {TestHelper} from 'utils/test_helper';
import ProductMenuList from './product_menu_list';
import type {Props as ProductMenuListProps} from './product_menu_list';
describe('components/global/product_switcher_menu', () => {
// Neccessary for components enhanced by HOCs due to issue with enzyme.
// Necessary for components enhanced by HOCs due to issue with enzyme.
// See https://github.com/enzymejs/enzyme/issues/539
const getMenuWrapper = (props: ProductMenuListProps) => {
const wrapper = shallow(<ProductMenuList {...props}/>);
return wrapper.find('MenuGroup').shallow();
return wrapper.find(MenuGroup).shallow();
};
const user = TestHelper.getUserMock({

View File

@ -54,7 +54,7 @@ exports[`components/Menu should match snapshot with guest access disabled and no
<Menu
ariaLabel="team menu"
>
<MenuGroup>
<Memo(MenuGroup)>
<Connect(TeamPermissionGate)
permissions={
Array [
@ -208,8 +208,8 @@ exports[`components/Menu should match snapshot with guest access disabled and no
show={true}
text="Leave Team"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -227,8 +227,8 @@ exports[`components/Menu should match snapshot with guest access disabled and no
to="/create_team"
/>
</Connect(SystemPermissionGate)>
</MenuGroup>
<MenuGroup />
</Memo(MenuGroup)>
<Memo(MenuGroup) />
</Menu>
`;
@ -237,7 +237,7 @@ exports[`components/Menu should match snapshot with id 1`] = `
ariaLabel="team menu"
id="test-id"
>
<MenuGroup>
<Memo(MenuGroup)>
<Connect(TeamPermissionGate)
permissions={
Array [
@ -409,8 +409,8 @@ exports[`components/Menu should match snapshot with id 1`] = `
show={true}
text="Leave Team"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -428,8 +428,8 @@ exports[`components/Menu should match snapshot with id 1`] = `
to="/create_team"
/>
</Connect(SystemPermissionGate)>
</MenuGroup>
<MenuGroup />
</Memo(MenuGroup)>
<Memo(MenuGroup) />
</Menu>
`;
@ -437,7 +437,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
<Menu
ariaLabel="team menu"
>
<MenuGroup>
<Memo(MenuGroup)>
<Connect(TeamPermissionGate)
permissions={
Array [
@ -609,8 +609,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
show={true}
text="Leave Team"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -628,8 +628,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
to="/create_team"
/>
</Connect(SystemPermissionGate)>
</MenuGroup>
<MenuGroup />
</Memo(MenuGroup)>
<Memo(MenuGroup) />
</Menu>
`;
@ -637,7 +637,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
<Menu
ariaLabel="main menu"
>
<MenuGroup>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -649,8 +649,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
id="menuCloudTrial"
/>
</Connect(SystemPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -662,8 +662,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
id="startTrial"
/>
</Connect(SystemPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<i
@ -688,8 +688,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
show={true}
text="Saved messages"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
dialogProps={
Object {
@ -738,8 +738,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
show={true}
text="Settings"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(TeamPermissionGate)
permissions={
Array [
@ -799,8 +799,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
text="Invite People"
/>
</Connect(TeamPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(TeamPermissionGate)
permissions={
Array [
@ -921,8 +921,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
text="View Members"
/>
</Connect(TeamPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -968,17 +968,17 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
show={true}
text="Leave Team"
/>
</MenuGroup>
<MenuGroup />
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup) />
<Memo(MenuGroup)>
<MenuItemLink
id="integrations"
show={false}
text="Integrations"
to="/team_name/integrations"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemExternalLink
icon={
<i
@ -1029,8 +1029,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
show={true}
text="About Mattermost"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<i
@ -1042,7 +1042,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
show={true}
text="Log Out"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
`;
@ -1050,7 +1050,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
<Menu
ariaLabel="team menu"
>
<MenuGroup>
<Memo(MenuGroup)>
<Connect(TeamPermissionGate)
permissions={
Array [
@ -1222,8 +1222,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
show={true}
text="Leave Team"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -1241,8 +1241,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
to="/create_team"
/>
</Connect(SystemPermissionGate)>
</MenuGroup>
<MenuGroup />
</Memo(MenuGroup)>
<Memo(MenuGroup) />
</Menu>
`;
@ -1250,7 +1250,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
<Menu
ariaLabel="main menu"
>
<MenuGroup>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -1262,8 +1262,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
id="menuCloudTrial"
/>
</Connect(SystemPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -1275,8 +1275,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
id="startTrial"
/>
</Connect(SystemPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<i
@ -1301,8 +1301,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
show={true}
text="Saved messages"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
dialogProps={
Object {
@ -1351,8 +1351,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
show={true}
text="Settings"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(TeamPermissionGate)
permissions={
Array [
@ -1412,8 +1412,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
text="Invite People"
/>
</Connect(TeamPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(TeamPermissionGate)
permissions={
Array [
@ -1534,8 +1534,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
text="View Members"
/>
</Connect(TeamPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -1581,17 +1581,17 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
show={true}
text="Leave Team"
/>
</MenuGroup>
<MenuGroup />
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup) />
<Memo(MenuGroup)>
<MenuItemLink
id="integrations"
show={false}
text="Integrations"
to="/team_name/integrations"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemExternalLink
icon={
<i
@ -1644,8 +1644,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
show={true}
text="About Mattermost"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<i
@ -1657,7 +1657,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
show={true}
text="Log Out"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
`;
@ -1665,7 +1665,7 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
<Menu
ariaLabel="team menu"
>
<MenuGroup>
<Memo(MenuGroup)>
<Connect(TeamPermissionGate)
permissions={
Array [
@ -1837,8 +1837,8 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
show={true}
text="Leave Team"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -1856,8 +1856,8 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
to="/create_team"
/>
</Connect(SystemPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={false}
id="plugin-id-1_pluginmenuitem"
@ -1872,7 +1872,7 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
onClick={[Function]}
show={true}
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
`;
@ -1880,7 +1880,7 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
<Menu
ariaLabel="main menu"
>
<MenuGroup>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -1892,8 +1892,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
id="menuCloudTrial"
/>
</Connect(SystemPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -1905,8 +1905,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
id="startTrial"
/>
</Connect(SystemPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<i
@ -1931,8 +1931,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
show={true}
text="Saved messages"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
dialogProps={
Object {
@ -1981,8 +1981,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
show={true}
text="Settings"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(TeamPermissionGate)
permissions={
Array [
@ -2042,8 +2042,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
text="Invite People"
/>
</Connect(TeamPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(TeamPermissionGate)
permissions={
Array [
@ -2164,8 +2164,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
text="View Members"
/>
</Connect(TeamPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -2211,8 +2211,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
show={true}
text="Leave Team"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
id="plugin-id-1_pluginmenuitem"
key="plugin-id-1_pluginmenuitem"
@ -2225,16 +2225,16 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
onClick={[Function]}
show={true}
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemLink
id="integrations"
show={false}
text="Integrations"
to="/team_name/integrations"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemExternalLink
icon={
<i
@ -2285,8 +2285,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
show={true}
text="About Mattermost"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<i
@ -2298,6 +2298,6 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
show={true}
text="Log Out"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
`;

View File

@ -45,7 +45,7 @@ exports[`UserGuideDropdown should match snapshot 1`] = `
openLeft={true}
openUp={false}
>
<MenuGroup>
<Memo(MenuGroup)>
<MenuItemExternalLink
id="askTheCommunityLink"
onClick={[Function]}
@ -71,7 +71,7 @@ exports[`UserGuideDropdown should match snapshot 1`] = `
show={true}
text="Keyboard shortcuts"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
</MenuWrapper>
`;
@ -121,7 +121,7 @@ exports[`UserGuideDropdown should match snapshot for false of enableAskCommunity
openLeft={true}
openUp={false}
>
<MenuGroup>
<Memo(MenuGroup)>
<MenuItemExternalLink
id="helpResourcesLink"
show={true}
@ -140,7 +140,7 @@ exports[`UserGuideDropdown should match snapshot for false of enableAskCommunity
show={true}
text="Keyboard shortcuts"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
</MenuWrapper>
`;

View File

@ -28,7 +28,7 @@ exports[`components/new_channel_modal should match snapshot 1`] = `
ariaLabel="Add Channels Dropdown"
id="AddChannelCtaDropdown"
>
<MenuGroup>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<i
@ -51,7 +51,7 @@ exports[`components/new_channel_modal should match snapshot 1`] = `
show={true}
text="Browse channels"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
</MenuWrapper>
`;

View File

@ -58,7 +58,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
</Text>
</div>
</Memo(MenuHeader)>
<MenuGroup>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="out of office"
extraText="Automatic Replies are enabled"
@ -66,8 +66,8 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
show={false}
text="Out of office"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="online"
icon={
@ -189,8 +189,8 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
show={true}
text="Offline"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
ariaLabel="Profile"
dialogProps={
@ -216,8 +216,8 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
show={true}
text="Profile"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<ExitToAppIcon
@ -229,7 +229,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
show={true}
text="Log Out"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
</MenuWrapper>
`;
@ -292,7 +292,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and
</Text>
</div>
</Memo(MenuHeader)>
<MenuGroup>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="out of office"
extraText="Automatic Replies are enabled"
@ -300,8 +300,8 @@ exports[`components/StatusDropdown should match snapshot with custom status and
show={false}
text="Out of office"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
ariaLabel="In a meeting"
className="MenuItem__primary-text custom_status__row"
@ -381,8 +381,8 @@ exports[`components/StatusDropdown should match snapshot with custom status and
withinBrackets={true}
/>
</MenuItemToggleModalRedux>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="online"
icon={
@ -504,8 +504,8 @@ exports[`components/StatusDropdown should match snapshot with custom status and
show={true}
text="Offline"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
ariaLabel="Profile"
dialogProps={
@ -531,8 +531,8 @@ exports[`components/StatusDropdown should match snapshot with custom status and
show={true}
text="Profile"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<ExitToAppIcon
@ -544,7 +544,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and
show={true}
text="Log Out"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
</MenuWrapper>
`;
@ -607,7 +607,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
</Text>
</div>
</Memo(MenuHeader)>
<MenuGroup>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="out of office"
extraText="Automatic Replies are enabled"
@ -615,8 +615,8 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
show={false}
text="Out of office"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
ariaLabel="Set a Custom Status"
className="MenuItem__primary-text custom_status__row"
@ -648,8 +648,8 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
</Text>
</span>
</MenuItemToggleModalRedux>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="online"
icon={
@ -771,8 +771,8 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
show={true}
text="Offline"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
ariaLabel="Profile"
dialogProps={
@ -798,8 +798,8 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
show={true}
text="Profile"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<ExitToAppIcon
@ -811,7 +811,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
show={true}
text="Log Out"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
</MenuWrapper>
`;
@ -874,7 +874,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
</Text>
</div>
</Memo(MenuHeader)>
<MenuGroup>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="out of office"
extraText="Automatic Replies are enabled"
@ -882,8 +882,8 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
show={false}
text="Out of office"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
ariaLabel="Set a Custom Status"
className="MenuItem__primary-text custom_status__row"
@ -915,8 +915,8 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
</Text>
</span>
</MenuItemToggleModalRedux>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="online"
icon={
@ -1038,8 +1038,8 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
show={true}
text="Offline"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
ariaLabel="Profile"
dialogProps={
@ -1065,8 +1065,8 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
show={true}
text="Profile"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<ExitToAppIcon
@ -1078,7 +1078,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
show={true}
text="Log Out"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
</MenuWrapper>
`;
@ -1141,7 +1141,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
</Text>
</div>
</Memo(MenuHeader)>
<MenuGroup>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="out of office"
extraText="Automatic Replies are enabled"
@ -1149,8 +1149,8 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
show={false}
text="Out of office"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
ariaLabel="Set a Custom Status"
className="MenuItem__primary-text custom_status__row"
@ -1183,8 +1183,8 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
<PulsatingDot />
</span>
</MenuItemToggleModalRedux>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="online"
icon={
@ -1306,8 +1306,8 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
show={true}
text="Offline"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
ariaLabel="Profile"
dialogProps={
@ -1333,8 +1333,8 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
show={true}
text="Profile"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<ExitToAppIcon
@ -1346,7 +1346,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
show={true}
text="Log Out"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
</MenuWrapper>
`;
@ -1417,7 +1417,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
</Text>
</div>
</Memo(MenuHeader)>
<MenuGroup>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="out of office"
extraText="Automatic Replies are enabled"
@ -1425,8 +1425,8 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
show={false}
text="Out of office"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="online"
icon={
@ -1548,8 +1548,8 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
show={true}
text="Offline"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
ariaLabel="Profile"
dialogProps={
@ -1575,8 +1575,8 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
show={true}
text="Profile"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<ExitToAppIcon
@ -1588,7 +1588,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
show={true}
text="Log Out"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
</MenuWrapper>
`;
@ -1651,7 +1651,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
</Text>
</div>
</Memo(MenuHeader)>
<MenuGroup>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="out of office"
extraText="Automatic Replies are enabled"
@ -1659,8 +1659,8 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
show={false}
text="Out of office"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="online"
icon={
@ -1782,8 +1782,8 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
show={true}
text="Offline"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
ariaLabel="Profile"
dialogProps={
@ -1809,8 +1809,8 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
show={true}
text="Profile"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<ExitToAppIcon
@ -1822,7 +1822,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
show={true}
text="Log Out"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
</MenuWrapper>
`;
@ -1885,7 +1885,7 @@ exports[`components/StatusDropdown should not show clear status button when cust
</Text>
</div>
</Memo(MenuHeader)>
<MenuGroup>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="out of office"
extraText="Automatic Replies are enabled"
@ -1893,8 +1893,8 @@ exports[`components/StatusDropdown should not show clear status button when cust
show={false}
text="Out of office"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
ariaLabel="Set a Custom Status"
className="MenuItem__primary-text custom_status__row"
@ -1926,8 +1926,8 @@ exports[`components/StatusDropdown should not show clear status button when cust
</Text>
</span>
</MenuItemToggleModalRedux>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="online"
icon={
@ -2049,8 +2049,8 @@ exports[`components/StatusDropdown should not show clear status button when cust
show={true}
text="Offline"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
ariaLabel="Profile"
dialogProps={
@ -2076,8 +2076,8 @@ exports[`components/StatusDropdown should not show clear status button when cust
show={true}
text="Profile"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<ExitToAppIcon
@ -2089,7 +2089,7 @@ exports[`components/StatusDropdown should not show clear status button when cust
show={true}
text="Log Out"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
</MenuWrapper>
`;
@ -2152,7 +2152,7 @@ exports[`components/StatusDropdown should show clear status button when custom s
</Text>
</div>
</Memo(MenuHeader)>
<MenuGroup>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="out of office"
extraText="Automatic Replies are enabled"
@ -2160,8 +2160,8 @@ exports[`components/StatusDropdown should show clear status button when custom s
show={false}
text="Out of office"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
ariaLabel="In a meeting"
className="MenuItem__primary-text custom_status__row"
@ -2241,8 +2241,8 @@ exports[`components/StatusDropdown should show clear status button when custom s
withinBrackets={true}
/>
</MenuItemToggleModalRedux>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
ariaLabel="online"
icon={
@ -2364,8 +2364,8 @@ exports[`components/StatusDropdown should show clear status button when custom s
show={true}
text="Offline"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
ariaLabel="Profile"
dialogProps={
@ -2391,8 +2391,8 @@ exports[`components/StatusDropdown should show clear status button when custom s
show={true}
text="Profile"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<ExitToAppIcon
@ -2404,7 +2404,7 @@ exports[`components/StatusDropdown should show clear status button when custom s
show={true}
text="Log Out"
/>
</MenuGroup>
</Memo(MenuGroup)>
</Menu>
</MenuWrapper>
`;

View File

@ -8,32 +8,30 @@ import './menu_group.scss';
type Props = {
divider?: React.ReactNode;
children?: React.ReactNode;
}
};
/**
* @deprecated Use the "webapp/channels/src/components/menu" instead.
*/
export default class MenuGroup extends React.PureComponent<Props> {
handleDividerClick = (e: React.MouseEvent): void => {
const MenuGroup = (props: Props) => {
const handleDividerClick = (e: React.MouseEvent): void => {
e.preventDefault();
e.stopPropagation();
};
public render() {
const {children} = this.props;
const divider = props.divider ?? (
<li
className='MenuGroup menu-divider'
onClick={handleDividerClick}
/>
);
const divider = this.props.divider || (
<li
className='MenuGroup menu-divider'
onClick={this.handleDividerClick}
/>
);
return (
<>
{divider}
{props.children}
</>
);
};
return (
<React.Fragment>
{divider}
{children}
</React.Fragment>
);
}
}
export default React.memo(MenuGroup);

View File

@ -11,7 +11,7 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
onClick={[Function]}
style={Object {}}
>
<MenuGroup>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -23,8 +23,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
id="menuCloudTrial"
/>
</Connect(SystemPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -36,8 +36,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
id="startTrial"
/>
</Connect(SystemPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<i
@ -62,8 +62,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
show={true}
text="Saved messages"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemToggleModalRedux
dialogProps={
Object {
@ -112,8 +112,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
show={true}
text="Settings"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(TeamPermissionGate)
permissions={
Array [
@ -173,8 +173,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
text="Invite People"
/>
</Connect(TeamPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(TeamPermissionGate)
permissions={
Array [
@ -295,8 +295,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
text="View Members"
/>
</Connect(TeamPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -342,8 +342,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
show={false}
text="Leave Team"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
id="someplugin_pluginmenuitem"
key="someplugin_pluginmenuitem"
@ -351,16 +351,16 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
show={true}
text="some plugin text"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemLink
id="integrations"
show={false}
text="Integrations"
to="/somename/integrations"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemExternalLink
icon={
<i
@ -411,8 +411,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
show={true}
text="About Mattermost"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={
<i
@ -424,7 +424,7 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
show={true}
text="Log Out"
/>
</MenuGroup>
</Memo(MenuGroup)>
</ul>
</div>
`;
@ -440,7 +440,7 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
onClick={[Function]}
style={Object {}}
>
<MenuGroup>
<Memo(MenuGroup)>
<Connect(TeamPermissionGate)
permissions={
Array [
@ -612,8 +612,8 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
show={false}
text="Leave Team"
/>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<Connect(SystemPermissionGate)
permissions={
Array [
@ -631,8 +631,8 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
to="/create_team"
/>
</Connect(SystemPermissionGate)>
</MenuGroup>
<MenuGroup>
</Memo(MenuGroup)>
<Memo(MenuGroup)>
<MenuItemAction
icon={false}
id="someplugin_pluginmenuitem"
@ -641,7 +641,7 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
show={true}
text="some plugin text"
/>
</MenuGroup>
</Memo(MenuGroup)>
</ul>
</div>
`;