Skip to content

Commit 0cb6a96

Browse files
NAME-ASHWANIYADAVdougfabris
NAME-ASHWANIYADAV
and
dougfabris
authored
refactor: standardize ReturnChatQueueModal using GenericModal (RocketChat#38384)
Co-authored-by: Douglas Fabris <devfabris@gmail.com>
1 parent f5f2374 commit 0cb6a96

4 files changed

Lines changed: 148 additions & 29 deletions

File tree

‎apps/meteor/client/views/omnichannel/modals/ReturnChatQueueModal.spec.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { mockAppRoot } from '@rocket.chat/mock-providers';
2+
import { composeStories } from '@storybook/react';
3+
import { render } from '@testing-library/react';
4+
import { axe } from 'jest-axe';
5+
6+
import * as stories from './ReturnChatQueueModal.stories';
7+
8+
const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
9+
10+
const appRoot = mockAppRoot().build();
11+
12+
test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
13+
const { baseElement } = render(<Story />, { wrapper: appRoot });
14+
expect(baseElement).toMatchSnapshot();
15+
});
16+
17+
test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
18+
const { container } = render(<Story />, { wrapper: appRoot });
19+
const results = await axe(container);
20+
expect(results).toHaveNoViolations();
21+
});

‎apps/meteor/client/views/omnichannel/modals/ReturnChatQueueModal.stories.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import type { Meta, StoryFn } from '@storybook/react';
2+
3+
import ReturnChatQueueModal from './ReturnChatQueueModal';
4+
5+
export default {
6+
component: ReturnChatQueueModal,
7+
parameters: {
8+
layout: 'fullscreen',
9+
actions: { argTypesRegex: '^on.*' },
10+
},
11+
args: {
12+
onMoveChat: () => undefined,
13+
onCancel: () => undefined,
14+
},
15+
} satisfies Meta<typeof ReturnChatQueueModal>;
16+
17+
export const Default: StoryFn<typeof ReturnChatQueueModal> = (args) => <ReturnChatQueueModal {...args} />;

‎apps/meteor/client/views/omnichannel/modals/ReturnChatQueueModal.tsx‎

Lines changed: 12 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,25 @@
1-
import {
2-
Button,
3-
Modal,
4-
ModalClose,
5-
ModalContent,
6-
ModalFooter,
7-
ModalFooterControllers,
8-
ModalHeader,
9-
ModalIcon,
10-
ModalTitle,
11-
} from '@rocket.chat/fuselage';
1+
import { GenericModal } from '@rocket.chat/ui-client';
122
import { useTranslation } from 'react-i18next';
133

144
type ReturnChatQueueModalProps = {
155
onMoveChat: () => void;
166
onCancel: () => void;
177
};
188

19-
// TODO: use `GenericModal` instead of creating a new modal from scratch
20-
const ReturnChatQueueModal = ({ onCancel, onMoveChat, ...props }: ReturnChatQueueModalProps) => {
9+
const ReturnChatQueueModal = ({ onCancel, onMoveChat }: ReturnChatQueueModalProps) => {
2110
const { t } = useTranslation();
2211

2312
return (
24-
<Modal aria-label={t('Return_to_the_queue')} {...props}>
25-
<ModalHeader>
26-
<ModalIcon name='burger-arrow-left' />
27-
<ModalTitle>{t('Return_to_the_queue')}</ModalTitle>
28-
<ModalClose onClick={onCancel} />
29-
</ModalHeader>
30-
<ModalContent fontScale='p2'>{t('Would_you_like_to_return_the_queue')}</ModalContent>
31-
<ModalFooter>
32-
<ModalFooterControllers>
33-
<Button onClick={onCancel}>{t('Cancel')}</Button>
34-
<Button primary onClick={onMoveChat}>
35-
{t('Confirm')}
36-
</Button>
37-
</ModalFooterControllers>
38-
</ModalFooter>
39-
</Modal>
13+
<GenericModal
14+
variant='warning'
15+
icon='burger-arrow-left'
16+
title={t('Return_to_the_queue')}
17+
onConfirm={onMoveChat}
18+
onCancel={onCancel}
19+
confirmText={t('Confirm')}
20+
>
21+
{t('Would_you_like_to_return_the_queue')}
22+
</GenericModal>
4023
);
4124
};
4225

‎apps/meteor/client/views/omnichannel/modals/__snapshots__/ReturnChatQueueModal.spec.tsx.snap‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2+
3+
exports[`renders Default without crashing 1`] = `
4+
<body>
5+
<div>
6+
<dialog
7+
aria-labelledby=":r0:-title"
8+
aria-modal="true"
9+
class="rcx-box rcx-box--full rcx-modal"
10+
open=""
11+
>
12+
<div
13+
class="rcx-box rcx-box--full rcx-modal__inner rcx-css-1euli2f"
14+
>
15+
<header
16+
class="rcx-box rcx-box--full rcx-modal__header"
17+
>
18+
<div
19+
class="rcx-box rcx-box--full rcx-modal__header-inner"
20+
>
21+
<div
22+
class="rcx-box rcx-box--full rcx-css-trljwa rcx-css-1xb12qx"
23+
>
24+
<i
25+
aria-hidden="true"
26+
class="rcx-box rcx-box--full rcx-icon--name-burger-arrow-left rcx-icon rcx-css-zozvgz"
27+
>
28+
29+
</i>
30+
</div>
31+
<div
32+
class="rcx-box rcx-box--full rcx-modal__header-text rcx-css-trljwa rcx-css-lma364"
33+
>
34+
<h2
35+
class="rcx-box rcx-box--full rcx-modal__title"
36+
id=":r0:-title"
37+
>
38+
Return_to_the_queue
39+
</h2>
40+
</div>
41+
<button
42+
aria-label="Close"
43+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-trljwa rcx-css-lma364"
44+
tabindex="-1"
45+
type="button"
46+
>
47+
<i
48+
aria-hidden="true"
49+
class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
50+
>
51+
52+
</i>
53+
</button>
54+
</div>
55+
</header>
56+
<div
57+
class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
58+
>
59+
<div
60+
class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-r1bpeb"
61+
>
62+
Would_you_like_to_return_the_queue
63+
</div>
64+
</div>
65+
<div
66+
class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
67+
>
68+
<div
69+
class="rcx-button-group rcx-button-group--align-end"
70+
role="group"
71+
>
72+
<button
73+
class="rcx-box rcx-box--full rcx-button--secondary rcx-button"
74+
type="button"
75+
>
76+
<span
77+
class="rcx-button--content"
78+
>
79+
Cancel
80+
</span>
81+
</button>
82+
<button
83+
class="rcx-box rcx-box--full rcx-button--primary rcx-button"
84+
type="button"
85+
>
86+
<span
87+
class="rcx-button--content"
88+
>
89+
Confirm
90+
</span>
91+
</button>
92+
</div>
93+
</div>
94+
</div>
95+
</dialog>
96+
</div>
97+
</body>
98+
`;

0 commit comments

Comments
 (0)