Skip to content

chore: Move InfoPanel component to ui-client package #37701

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kodiakhq merged 4 commits into from
Dec 5, 2025
Merged

chore: Move InfoPanel component to ui-client package #37701

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2a445ee
Move all RetentionPolicyCallout tests to their own stories
gabriellsh Dec 4, 2025
3a3b8e0
Move InfoPanel to ui-client
gabriellsh Dec 4, 2025
61994a0
Fix imports
gabriellsh Dec 4, 2025
2130e68
Merge branch 'develop' into move/infoPanel
kodiakhq[bot] Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 16 additions & 21 deletions apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,24 @@
import { render, screen } from '@testing-library/react';
import { composeStories } from '@storybook/react';
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';

import RetentionPolicyCallout from './RetentionPolicyCallout';
import { createRenteionPolicySettingsMock as createMock } from '../../../tests/mocks/client/mockRetentionPolicySettings';
import { createFakeRoom } from '../../../tests/mocks/data';
import * as stories from './RetentionPolicyCallout.stories';

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

beforeEach(() => {
test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
jest.useFakeTimers();
jest.setSystemTime(new Date(2024, 5, 1, 0, 0, 0));

const { baseElement } = render(<Story />);
expect(baseElement).toMatchSnapshot();
});

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

it('Should not render callout if settings are invalid', () => {
const fakeRoom = createFakeRoom({ t: 'c' });
render(<RetentionPolicyCallout room={fakeRoom} />, {
wrapper: createMock({ appliesToChannels: true, TTLChannels: 60000, advancedPrecisionCron: '* * * 12 *', advancedPrecision: true }),
});
expect(screen.queryByRole('alert')).not.toBeInTheDocument();
});
const results = await axe(container);
expect(results).toHaveNoViolations();
});
32 changes: 32 additions & 0 deletions apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import type { Meta, StoryFn } from '@storybook/react';

import RetentionPolicyCallout from './RetentionPolicyCallout';
import { createRenteionPolicySettingsMock as createMock } from '../../../tests/mocks/client/mockRetentionPolicySettings';
import { createFakeRoom } from '../../../tests/mocks/data';

export default {
component: RetentionPolicyCallout,
} satisfies Meta<typeof RetentionPolicyCallout>;

const fakeRoom = createFakeRoom();

const DefaultWrapper = createMock({ appliesToChannels: true, TTLChannels: 60000 });

export const Default: StoryFn<typeof RetentionPolicyCallout> = () => (
<DefaultWrapper>
<RetentionPolicyCallout room={fakeRoom} />
</DefaultWrapper>
);

const InvalidSettingsWrapper = createMock({
appliesToChannels: true,
TTLChannels: 60000,
advancedPrecisionCron: '* * * 12 * *',
advancedPrecision: true,
});

export const InvalidSettings: StoryFn<typeof RetentionPolicyCallout> = () => (
<InvalidSettingsWrapper>
<RetentionPolicyCallout room={fakeRoom} />
</InvalidSettingsWrapper>
);
75 changes: 75 additions & 0 deletions apps/meteor/client/components/InfoPanel/__snapshots__/RetentionPolicyCallout.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

exports[`renders Default without crashing 1`] = `
<body>
<div>
<section
aria-live="polite"
arial-label="Retention_policy_warning_callout"
class="rcx-box rcx-box--full rcx-callout rcx-callout--warning"
role="alert"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-warning rcx-icon rcx-callout__icon rcx-css-4pvxx3"
>
</i>
<div
class="rcx-box rcx-box--full rcx-callout__wrapper"
>
<div
class="rcx-box rcx-box--full rcx-callout__wrapper-content"
>
<div
class="rcx-box rcx-box--full rcx-callout__content"
>
<div>
<p>
a minute June 1, 2024 at 12:30 AM
</p>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
`;

exports[`renders InvalidSettings without crashing 1`] = `
<body>
<div>
<section
aria-live="polite"
arial-label="Retention_policy_warning_callout"
class="rcx-box rcx-box--full rcx-callout rcx-callout--warning"
role="alert"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-warning rcx-icon rcx-callout__icon rcx-css-4pvxx3"
>
</i>
<div
class="rcx-box rcx-box--full rcx-callout__wrapper"
>
<div
class="rcx-box rcx-box--full rcx-callout__wrapper-content"
>
<div
class="rcx-box rcx-box--full rcx-callout__content"
>
<div>
<p>
a minute June 12, 2024 at 12:00 AM
</p>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
`;
19 changes: 10 additions & 9 deletions apps/meteor/client/components/UserInfo/UserInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
import type { IUser, Serialized } from '@rocket.chat/core-typings';
import { Box, Margins, Tag } from '@rocket.chat/fuselage';
import { useUserDisplayName, ContextualbarScrollableContent } from '@rocket.chat/ui-client';
import type { TranslationKey } from '@rocket.chat/ui-contexts';
import type { ReactElement, ReactNode } from 'react';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';

import { useTimeAgo } from '../../hooks/useTimeAgo';
import { useUserCustomFields } from '../../hooks/useUserCustomFields';
import {
useUserDisplayName,
ContextualbarScrollableContent,
InfoPanel,
InfoPanelActionGroup,
InfoPanelAvatar,
Expand All @@ -17,7 +11,14 @@ import {
InfoPanelSection,
InfoPanelText,
InfoPanelTitle,
} from '../InfoPanel';
} from '@rocket.chat/ui-client';
import type { TranslationKey } from '@rocket.chat/ui-contexts';
import type { ReactElement, ReactNode } from 'react';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';

import { useTimeAgo } from '../../hooks/useTimeAgo';
import { useUserCustomFields } from '../../hooks/useUserCustomFields';
import MarkdownText from '../MarkdownText';
import UTCClock from '../UTCClock';
import { UserCardRoles } from '../UserCard';
Expand Down
5 changes: 4 additions & 1 deletion .../meteor/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@ import {
ContextualbarScrollableContent,
ContextualbarFooter,
ContextualbarTitle,
InfoPanel,
InfoPanelField,
InfoPanelLabel,
InfoPanelText,
} from '@rocket.chat/ui-client';
import { useRoute, useUserPresence } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';

import { InfoPanel, InfoPanelField, InfoPanelLabel, InfoPanelText } from '../../../../components/InfoPanel';
import { useDeviceLogout } from '../../../../hooks/useDeviceLogout';
import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';

Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/omnichannel/additionalForms/MaxChatsPerAgentDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { InfoPanelLabel, InfoPanelText } from '@rocket.chat/ui-client';
import { useTranslation } from 'react-i18next';

import { InfoPanelLabel, InfoPanelText } from '../../../components/InfoPanel';
import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule';

const MaxChatsPerAgentDisplay = ({ maxNumberSimultaneousChat = 0 }) => {
Expand Down
3 changes: 2 additions & 1 deletion apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,14 @@ import {
ContextualbarHeader,
ContextualbarScrollableContent,
ContextualbarSkeletonBody,
InfoPanelLabel,
InfoPanelText,
} from '@rocket.chat/ui-client';
import { useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
import { useQuery } from '@tanstack/react-query';
import type { HTMLAttributes } from 'react';
import { useTranslation } from 'react-i18next';

import { InfoPanelLabel, InfoPanelText } from '../../../components/InfoPanel';
import { UserInfoAvatar, UserInfoUsername } from '../../../components/UserInfo';
import { UserStatus } from '../../../components/UserStatus';
import { MaxChatsPerAgentDisplay } from '../additionalForms';
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/omnichannel/components/CustomField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { Box } from '@rocket.chat/fuselage';
import { InfoPanelField, InfoPanelLabel, InfoPanelText } from '@rocket.chat/ui-client';
import { useEndpoint } from '@rocket.chat/ui-contexts';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';

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

type CustomFieldProps = {
Expand Down
3 changes: 1 addition & 2 deletions apps/meteor/client/views/omnichannel/directory/calls/contextualBar/InfoField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { InfoPanelField, InfoPanelLabel, InfoPanelText } from '@rocket.chat/ui-client';
import type { ReactElement } from 'react';

import { InfoPanelField, InfoPanelLabel, InfoPanelText } from '../../../../../components/InfoPanel';

type InfoFieldPropsType = {
label: string;
info: string;
Expand Down
5 changes: 4 additions & 1 deletion apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ import {
ContextualbarScrollableContent,
ContextualbarFooter,
ContextualbarDialog,
InfoPanel,
InfoPanelField,
InfoPanelLabel,
InfoPanelText,
} from '@rocket.chat/ui-client';
import moment from 'moment';
import type { ReactElement } from 'react';
Expand All @@ -17,7 +21,6 @@ import { useTranslation } from 'react-i18next';

import { InfoField } from './InfoField';
import { VoipInfoCallButton } from './VoipInfoCallButton';
import { InfoPanel, InfoPanelField, InfoPanelLabel, InfoPanelText } from '../../../../../components/InfoPanel';
import { UserStatus } from '../../../../../components/UserStatus';
import { useIsCallReady } from '../../../../../contexts/CallContext';
import { parseOutboundPhoneNumber } from '../../../../../lib/voip/parseOutboundPhoneNumber';
Expand Down
3 changes: 1 addition & 2 deletions apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/ChatInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import type { IOmnichannelRoom, IVisitor } from '@rocket.chat/core-typings';
import { Box, Margins, Tag, Button, ButtonGroup } from '@rocket.chat/fuselage';
import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
import { ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
import { ContextualbarScrollableContent, ContextualbarFooter, InfoPanelField, InfoPanelLabel, InfoPanelText } from '@rocket.chat/ui-client';
import type { IRouterPaths } from '@rocket.chat/ui-contexts';
import { useToastMessageDispatch, useRoute, useUserSubscription, useTranslation, usePermission, useUserId } from '@rocket.chat/ui-contexts';
import moment from 'moment';
import { useMemo } from 'react';

import DepartmentField from './DepartmentField';
import VisitorClientInfo from './VisitorClientInfo';
import { InfoPanelField, InfoPanelLabel, InfoPanelText } from '../../../../../components/InfoPanel';
import MarkdownText from '../../../../../components/MarkdownText';
import { useFormatDateAndTime } from '../../../../../hooks/useFormatDateAndTime';
import { useFormatDuration } from '../../../../../hooks/useFormatDuration';
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/room/contextualBar/Info/RoomInfo/ABAC/RoomInfoABACSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import type { IRoom } from '@rocket.chat/core-typings';
import { Box, Divider, Tag } from '@rocket.chat/fuselage';
import { InfoPanelField, InfoPanelLabel } from '@rocket.chat/ui-client';
import { useSetting } from '@rocket.chat/ui-contexts';
import { useTranslation } from 'react-i18next';

import { InfoPanelField, InfoPanelLabel } from '../../../../../../components/InfoPanel';
import { RoomIcon } from '../../../../../../components/RoomIcon';

// TODO: Remove type union when ABAC is implemented
Expand Down
10 changes: 4 additions & 6 deletions apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,6 @@ import {
ContextualbarClose,
ContextualbarTitle,
ContextualbarDialog,
} from '@rocket.chat/ui-client';
import { useTranslation } from 'react-i18next';

import RoomInfoActions from './RoomInfoActions';
import {
InfoPanel,
InfoPanelActionGroup,
InfoPanelAvatar,
Expand All @@ -23,7 +18,10 @@ import {
InfoPanelSection,
InfoPanelText,
InfoPanelTitle,
} from '../../../../../components/InfoPanel';
} from '@rocket.chat/ui-client';
import { useTranslation } from 'react-i18next';

import RoomInfoActions from './RoomInfoActions';
import RetentionPolicyCallout from '../../../../../components/InfoPanel/RetentionPolicyCallout';
import MarkdownText from '../../../../../components/MarkdownText';
import { useRetentionPolicy } from '../../../hooks/useRetentionPolicy';
Expand Down
3 changes: 1 addition & 2 deletions apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfoActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import type { Keys as IconKeys } from '@rocket.chat/icons';

import { InfoPanelAction } from '../../../../../components/InfoPanel';
import { InfoPanelAction } from '@rocket.chat/ui-client';

type Action = {
id: string;
Expand Down
12 changes: 5 additions & 7 deletions apps/meteor/client/views/teams/contextualBar/info/TeamsInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,6 @@ import {
ContextualbarClose,
ContextualbarScrollableContent,
ContextualbarDialog,
} from '@rocket.chat/ui-client';
import type { ReactElement } from 'react';
import { useTranslation } from 'react-i18next';

import { useTeamActions } from './useTeamActions';
import {
InfoPanel,
InfoPanelAction,
InfoPanelActionGroup,
Expand All @@ -24,7 +18,11 @@ import {
InfoPanelSection,
InfoPanelText,
InfoPanelTitle,
} from '../../../../components/InfoPanel';
} from '@rocket.chat/ui-client';
import type { ReactElement } from 'react';
import { useTranslation } from 'react-i18next';

import { useTeamActions } from './useTeamActions';
import RetentionPolicyCallout from '../../../../components/InfoPanel/RetentionPolicyCallout';
import MarkdownText from '../../../../components/MarkdownText';
import { useSplitRoomActions } from '../../../room/contextualBar/Info/hooks/useSplitRoomActions';
Expand Down
0 ...t/components/InfoPanel/InfoPanel.spec.tsx → ...c/components/InfoPanel/InfoPanel.spec.tsx
View file
Open in desktop
File renamed without changes.
8 changes: 0 additions & 8 deletions ...omponents/InfoPanel/InfoPanel.stories.tsx → ...omponents/InfoPanel/InfoPanel.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ import {
InfoPanelText,
InfoPanelTitle,
} from '.';
import RetentionPolicyCallout from './RetentionPolicyCallout';
import { createFakeRoom } from '../../../tests/mocks/data';

export default {
component: InfoPanel,
Expand All @@ -26,12 +24,9 @@ export default {
InfoPanelSection: InfoPanelSection as ComponentType<any>,
InfoPanelText: InfoPanelText as ComponentType<any>,
InfoPanelTitle: InfoPanelTitle as ComponentType<any>,
RetentionPolicyCallout: RetentionPolicyCallout as ComponentType<any>,
},
} satisfies Meta<typeof InfoPanel>;

const fakeRoom = createFakeRoom();

export const Default: StoryFn<typeof InfoPanel> = () => (
<InfoPanel>
<InfoPanelAvatar />
Expand Down Expand Up @@ -61,8 +56,5 @@ export const Default: StoryFn<typeof InfoPanel> = () => (
</InfoPanelText>
</InfoPanelField>
</InfoPanelSection>
<InfoPanelSection>
<RetentionPolicyCallout room={fakeRoom} />
</InfoPanelSection>
</InfoPanel>
);
0 ...client/components/InfoPanel/InfoPanel.tsx → ...nt/src/components/InfoPanel/InfoPanel.tsx
View file
Open in desktop
File renamed without changes.
0 .../components/InfoPanel/InfoPanelAction.tsx → .../components/InfoPanel/InfoPanelAction.tsx
View file
Open in desktop
File renamed without changes.
0 ...onents/InfoPanel/InfoPanelActionGroup.tsx → ...onents/InfoPanel/InfoPanelActionGroup.tsx
View file
Open in desktop
File renamed without changes.
0 .../components/InfoPanel/InfoPanelAvatar.tsx → .../components/InfoPanel/InfoPanelAvatar.tsx
View file
Open in desktop
File renamed without changes.
0 ...t/components/InfoPanel/InfoPanelField.tsx → ...c/components/InfoPanel/InfoPanelField.tsx
View file
Open in desktop
File renamed without changes.
0 ...t/components/InfoPanel/InfoPanelLabel.tsx → ...c/components/InfoPanel/InfoPanelLabel.tsx
View file
Open in desktop
File renamed without changes.
0 ...components/InfoPanel/InfoPanelSection.tsx → ...components/InfoPanel/InfoPanelSection.tsx
View file
Open in desktop
File renamed without changes.
0 ...nt/components/InfoPanel/InfoPanelText.tsx → ...rc/components/InfoPanel/InfoPanelText.tsx
View file
Open in desktop
File renamed without changes.
0 ...t/components/InfoPanel/InfoPanelTitle.tsx → ...c/components/InfoPanel/InfoPanelTitle.tsx
View file
Open in desktop
File renamed without changes.
3 changes: 0 additions & 3 deletions ...nel/__snapshots__/InfoPanel.spec.tsx.snap → ...nel/__snapshots__/InfoPanel.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,6 @@ exports[`renders Default without crashing 1`] = `
</div>
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-6jv9ad"
/>
</div>
</div>
</body>
Expand Down
0 ...teor/client/components/InfoPanel/index.ts → ...-client/src/components/InfoPanel/index.ts
View file
Open in desktop
File renamed without changes.
Loading
Loading