-
Notifications
You must be signed in to change notification settings - Fork 10.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Improve UX from "Action Buttons" in
RoomInfo (#32632)
- Loading branch information
1 parent
703af95
commit 5bfde8d
Showing
9 changed files
with
232 additions
and
97 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@rocket.chat/meteor": patch | ||
| --- | ||
|
|
||
| Improving UX by change the position of room info actions buttons and menu order to avoid missclick in destructive actions. |
60 changes: 60 additions & 0 deletions
60
apps/meteor/client/components/GenericMenu/GenericMenu.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import '@testing-library/jest-dom'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import React from 'react'; | ||
|
|
||
| import GenericMenu from './GenericMenu'; | ||
|
|
||
| const mockedFunction = jest.fn(); | ||
| const regular = { | ||
| items: [ | ||
| { | ||
| id: 'edit', | ||
| content: 'Edit', | ||
| icon: 'pencil' as const, | ||
| onClick: mockedFunction, | ||
| }, | ||
| ], | ||
| }; | ||
| const danger = { | ||
| items: [ | ||
| { | ||
| id: 'delete', | ||
| content: 'Delete', | ||
| icon: 'trash' as const, | ||
| onClick: () => null, | ||
| variant: 'danger', | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| const sections = [regular, danger]; | ||
|
|
||
| describe('Room Actions Menu', () => { | ||
| it('should render kebab menu with the list content', async () => { | ||
| render(<GenericMenu title='Kebab' sections={sections} />); | ||
|
|
||
| userEvent.click(screen.getByRole('button')); | ||
|
|
||
| expect(await screen.findByText('Edit')).toBeInTheDocument(); | ||
| expect(await screen.findByText('Delete')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should have two different sections, regular and danger', async () => { | ||
| render(<GenericMenu title='Kebab' sections={sections} />); | ||
|
|
||
| userEvent.click(screen.getByRole('button')); | ||
|
|
||
| expect(screen.getAllByRole('presentation')).toHaveLength(2); | ||
| expect(screen.getByRole('separator')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should call the action when item clicked', async () => { | ||
| render(<GenericMenu title='Kebab' sections={sections} />); | ||
|
|
||
| userEvent.click(screen.getByRole('button')); | ||
| userEvent.click(screen.getAllByRole('menuitem')[0]); | ||
|
|
||
| expect(mockedFunction).toHaveBeenCalled(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfoActions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import type { Keys as IconKeys } from '@rocket.chat/icons'; | ||
| import React from 'react'; | ||
|
|
||
| import { InfoPanelAction } from '../../../../../components/InfoPanel'; | ||
|
|
||
| type Action = { | ||
| id: string; | ||
| content: string; | ||
| icon: IconKeys; | ||
| onClick: () => void; | ||
| variant?: string; | ||
| }; | ||
|
|
||
| export type RoomInfoActionsProps = { | ||
| actions: { items: Action[] }; | ||
| className?: string; | ||
| }; | ||
|
|
||
| const RoomInfoActions = ({ actions, className }: RoomInfoActionsProps) => { | ||
| return ( | ||
| <> | ||
| {actions.items.map(({ id, content, icon, onClick }) => ( | ||
| <InfoPanelAction className={className} key={id} label={content} onClick={onClick} icon={icon} /> | ||
| ))} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default RoomInfoActions; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
apps/meteor/client/views/room/contextualBar/Info/hooks/useSplitRoomActions.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import type { RoomInfoActionsProps } from '../RoomInfo/RoomInfoActions'; | ||
|
|
||
| type UseSplitRoomActionsOptions = { | ||
| size?: number; | ||
| }; | ||
|
|
||
| /** | ||
| * | ||
| * @param room | ||
| * @param options | ||
| * @returns If more than two room actions are enabled `menu.regular` will be a non-empty array | ||
| */ | ||
| export const useSplitRoomActions = (actions: RoomInfoActionsProps['actions'], options?: UseSplitRoomActionsOptions) => { | ||
| const size = options?.size || 2; | ||
|
|
||
| if (actions.items.length <= size) { | ||
| return { buttons: actions }; | ||
| } | ||
|
|
||
| const buttons = { items: actions.items.slice(0, size) }; | ||
| const regular = actions.items.slice(size); | ||
| const firstDanger = regular.findIndex((item) => item.variant); | ||
| const danger = regular.splice(firstDanger); | ||
|
|
||
| const menu = [{ items: regular }, { items: danger }]; | ||
|
|
||
| return { buttons, menu }; | ||
| }; |
Oops, something went wrong.