Skip to content

Commit e96bb84

Browse files
gabriellshgabriellsh
authored
chore: Move InfoPanel component to ui-client package (#37701)
1 parent 75bd3e4 commit e96bb84

File tree

29 files changed

+159
-66
lines changed

29 files changed

+159
-66
lines changed

‎apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.spec.tsx‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,24 @@
1-
import { render, screen } from '@testing-library/react';
1+
import { composeStories } from '@storybook/react';
2+
import { render } from '@testing-library/react';
3+
import { axe } from 'jest-axe';
24

3-
import RetentionPolicyCallout from './RetentionPolicyCallout';
4-
import { createRenteionPolicySettingsMock as createMock } from '../../../tests/mocks/client/mockRetentionPolicySettings';
5-
import { createFakeRoom } from '../../../tests/mocks/data';
5+
import * as stories from './RetentionPolicyCallout.stories';
66

7-
jest.useFakeTimers();
7+
const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
88

9-
beforeEach(() => {
9+
test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
10+
jest.useFakeTimers();
1011
jest.setSystemTime(new Date(2024, 5, 1, 0, 0, 0));
12+
13+
const { baseElement } = render(<Story />);
14+
expect(baseElement).toMatchSnapshot();
1115
});
1216

13-
describe('RetentionPolicyCallout', () => {
14-
it('Should render callout if settings are valid', () => {
15-
const fakeRoom = createFakeRoom({ t: 'c' });
16-
render(<RetentionPolicyCallout room={fakeRoom} />, {
17-
wrapper: createMock({ appliesToChannels: true, TTLChannels: 60000 }),
18-
});
19-
expect(screen.getByRole('alert')).toHaveTextContent('a minute June 1, 2024 at 12:30 AM');
20-
});
17+
test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
18+
// We have to use real timers here because `jest-axe` is breaking otherwise
19+
jest.useRealTimers();
20+
const { container } = render(<Story />);
2121

22-
it('Should not render callout if settings are invalid', () => {
23-
const fakeRoom = createFakeRoom({ t: 'c' });
24-
render(<RetentionPolicyCallout room={fakeRoom} />, {
25-
wrapper: createMock({ appliesToChannels: true, TTLChannels: 60000, advancedPrecisionCron: '* * * 12 *', advancedPrecision: true }),
26-
});
27-
expect(screen.queryByRole('alert')).not.toBeInTheDocument();
28-
});
22+
const results = await axe(container);
23+
expect(results).toHaveNoViolations();
2924
});

‎apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.stories.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import type { Meta, StoryFn } from '@storybook/react';
2+
3+
import RetentionPolicyCallout from './RetentionPolicyCallout';
4+
import { createRenteionPolicySettingsMock as createMock } from '../../../tests/mocks/client/mockRetentionPolicySettings';
5+
import { createFakeRoom } from '../../../tests/mocks/data';
6+
7+
export default {
8+
component: RetentionPolicyCallout,
9+
} satisfies Meta<typeof RetentionPolicyCallout>;
10+
11+
const fakeRoom = createFakeRoom();
12+
13+
const DefaultWrapper = createMock({ appliesToChannels: true, TTLChannels: 60000 });
14+
15+
export const Default: StoryFn<typeof RetentionPolicyCallout> = () => (
16+
<DefaultWrapper>
17+
<RetentionPolicyCallout room={fakeRoom} />
18+
</DefaultWrapper>
19+
);
20+
21+
const InvalidSettingsWrapper = createMock({
22+
appliesToChannels: true,
23+
TTLChannels: 60000,
24+
advancedPrecisionCron: '* * * 12 * *',
25+
advancedPrecision: true,
26+
});
27+
28+
export const InvalidSettings: StoryFn<typeof RetentionPolicyCallout> = () => (
29+
<InvalidSettingsWrapper>
30+
<RetentionPolicyCallout room={fakeRoom} />
31+
</InvalidSettingsWrapper>
32+
);

‎apps/meteor/client/components/InfoPanel/__snapshots__/RetentionPolicyCallout.spec.tsx.snap‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2+
3+
exports[`renders Default without crashing 1`] = `
4+
<body>
5+
<div>
6+
<section
7+
aria-live="polite"
8+
arial-label="Retention_policy_warning_callout"
9+
class="rcx-box rcx-box--full rcx-callout rcx-callout--warning"
10+
role="alert"
11+
>
12+
<i
13+
aria-hidden="true"
14+
class="rcx-box rcx-box--full rcx-icon--name-warning rcx-icon rcx-callout__icon rcx-css-4pvxx3"
15+
>
16+
17+
</i>
18+
<div
19+
class="rcx-box rcx-box--full rcx-callout__wrapper"
20+
>
21+
<div
22+
class="rcx-box rcx-box--full rcx-callout__wrapper-content"
23+
>
24+
<div
25+
class="rcx-box rcx-box--full rcx-callout__content"
26+
>
27+
<div>
28+
<p>
29+
a minute June 1, 2024 at 12:30 AM
30+
</p>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
</section>
36+
</div>
37+
</body>
38+
`;
39+
40+
exports[`renders InvalidSettings without crashing 1`] = `
41+
<body>
42+
<div>
43+
<section
44+
aria-live="polite"
45+
arial-label="Retention_policy_warning_callout"
46+
class="rcx-box rcx-box--full rcx-callout rcx-callout--warning"
47+
role="alert"
48+
>
49+
<i
50+
aria-hidden="true"
51+
class="rcx-box rcx-box--full rcx-icon--name-warning rcx-icon rcx-callout__icon rcx-css-4pvxx3"
52+
>
53+
54+
</i>
55+
<div
56+
class="rcx-box rcx-box--full rcx-callout__wrapper"
57+
>
58+
<div
59+
class="rcx-box rcx-box--full rcx-callout__wrapper-content"
60+
>
61+
<div
62+
class="rcx-box rcx-box--full rcx-callout__content"
63+
>
64+
<div>
65+
<p>
66+
a minute June 12, 2024 at 12:00 AM
67+
</p>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
</section>
73+
</div>
74+
</body>
75+
`;

‎apps/meteor/client/components/UserInfo/UserInfo.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
11
import type { IUser, Serialized } from '@rocket.chat/core-typings';
22
import { Box, Margins, Tag } from '@rocket.chat/fuselage';
3-
import { useUserDisplayName, ContextualbarScrollableContent } from '@rocket.chat/ui-client';
4-
import type { TranslationKey } from '@rocket.chat/ui-contexts';
5-
import type { ReactElement, ReactNode } from 'react';
6-
import { memo } from 'react';
7-
import { useTranslation } from 'react-i18next';
8-
9-
import { useTimeAgo } from '../../hooks/useTimeAgo';
10-
import { useUserCustomFields } from '../../hooks/useUserCustomFields';
113
import {
4+
useUserDisplayName,
5+
ContextualbarScrollableContent,
126
InfoPanel,
137
InfoPanelActionGroup,
148
InfoPanelAvatar,
@@ -17,7 +11,14 @@ import {
1711
InfoPanelSection,
1812
InfoPanelText,
1913
InfoPanelTitle,
20-
} from '../InfoPanel';
14+
} from '@rocket.chat/ui-client';
15+
import type { TranslationKey } from '@rocket.chat/ui-contexts';
16+
import type { ReactElement, ReactNode } from 'react';
17+
import { memo } from 'react';
18+
import { useTranslation } from 'react-i18next';
19+
20+
import { useTimeAgo } from '../../hooks/useTimeAgo';
21+
import { useUserCustomFields } from '../../hooks/useUserCustomFields';
2122
import MarkdownText from '../MarkdownText';
2223
import UTCClock from '../UTCClock';
2324
import { UserCardRoles } from '../UserCard';

‎apps/meteor/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfo.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,16 @@ import {
77
ContextualbarScrollableContent,
88
ContextualbarFooter,
99
ContextualbarTitle,
10+
InfoPanel,
11+
InfoPanelField,
12+
InfoPanelLabel,
13+
InfoPanelText,
1014
} from '@rocket.chat/ui-client';
1115
import { useRoute, useUserPresence } from '@rocket.chat/ui-contexts';
1216
import type { ReactElement } from 'react';
1317
import { useCallback } from 'react';
1418
import { useTranslation } from 'react-i18next';
1519

16-
import { InfoPanel, InfoPanelField, InfoPanelLabel, InfoPanelText } from '../../../../components/InfoPanel';
1720
import { useDeviceLogout } from '../../../../hooks/useDeviceLogout';
1821
import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
1922

‎apps/meteor/client/views/omnichannel/additionalForms/MaxChatsPerAgentDisplay.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { InfoPanelLabel, InfoPanelText } from '@rocket.chat/ui-client';
12
import { useTranslation } from 'react-i18next';
23

3-
import { InfoPanelLabel, InfoPanelText } from '../../../components/InfoPanel';
44
import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule';
55

66
const MaxChatsPerAgentDisplay = ({ maxNumberSimultaneousChat = 0 }) => {

‎apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@ import {
55
ContextualbarHeader,
66
ContextualbarScrollableContent,
77
ContextualbarSkeletonBody,
8+
InfoPanelLabel,
9+
InfoPanelText,
810
} from '@rocket.chat/ui-client';
911
import { useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
1012
import { useQuery } from '@tanstack/react-query';
1113
import type { HTMLAttributes } from 'react';
1214
import { useTranslation } from 'react-i18next';
1315

14-
import { InfoPanelLabel, InfoPanelText } from '../../../components/InfoPanel';
1516
import { UserInfoAvatar, UserInfoUsername } from '../../../components/UserInfo';
1617
import { UserStatus } from '../../../components/UserStatus';
1718
import { MaxChatsPerAgentDisplay } from '../additionalForms';

‎apps/meteor/client/views/omnichannel/components/CustomField.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Box } from '@rocket.chat/fuselage';
2+
import { InfoPanelField, InfoPanelLabel, InfoPanelText } from '@rocket.chat/ui-client';
23
import { useEndpoint } from '@rocket.chat/ui-contexts';
34
import { useQuery } from '@tanstack/react-query';
45
import { useTranslation } from 'react-i18next';
56

6-
import { InfoPanelField, InfoPanelLabel, InfoPanelText } from '../../../components/InfoPanel';
77
import { FormSkeleton } from '../directory/components/FormSkeleton';
88

99
type CustomFieldProps = {

‎apps/meteor/client/views/omnichannel/directory/calls/contextualBar/InfoField.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1+
import { InfoPanelField, InfoPanelLabel, InfoPanelText } from '@rocket.chat/ui-client';
12
import type { ReactElement } from 'react';
23

3-
import { InfoPanelField, InfoPanelLabel, InfoPanelText } from '../../../../../components/InfoPanel';
4-
54
type InfoFieldPropsType = {
65
label: string;
76
info: string;

‎apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ import {
99
ContextualbarScrollableContent,
1010
ContextualbarFooter,
1111
ContextualbarDialog,
12+
InfoPanel,
13+
InfoPanelField,
14+
InfoPanelLabel,
15+
InfoPanelText,
1216
} from '@rocket.chat/ui-client';
1317
import moment from 'moment';
1418
import type { ReactElement } from 'react';
@@ -17,7 +21,6 @@ import { useTranslation } from 'react-i18next';
1721

1822
import { InfoField } from './InfoField';
1923
import { VoipInfoCallButton } from './VoipInfoCallButton';
20-
import { InfoPanel, InfoPanelField, InfoPanelLabel, InfoPanelText } from '../../../../../components/InfoPanel';
2124
import { UserStatus } from '../../../../../components/UserStatus';
2225
import { useIsCallReady } from '../../../../../contexts/CallContext';
2326
import { parseOutboundPhoneNumber } from '../../../../../lib/voip/parseOutboundPhoneNumber';

0 commit comments

Comments
 (0)