Skip to content

Commit

Permalink
refactor(client): Use subcomponents for InfoPanel and UserInfo (#…
Browse files Browse the repository at this point in the history 
…32470)
  • Loading branch information
@rique223
rique223 authored Jul 9, 2024
1 parent ca3d90b commit b553cfc
Show file tree
Hide file tree
Showing 16 changed files with 276 additions and 281 deletions.
99 changes: 42 additions & 57 deletions apps/meteor/client/components/InfoPanel/InfoPanel.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,32 @@
import type { ComponentMeta, ComponentStory } from '@storybook/react';
import React from 'react';

import InfoPanel from '.';
import {
InfoPanel,
InfoPanelAction,
InfoPanelActionGroup,
InfoPanelAvatar,
InfoPanelField,
InfoPanelLabel,
InfoPanelSection,
InfoPanelText,
InfoPanelTitle,
} from '.';
import { createFakeRoom } from '../../../tests/mocks/data';
import RetentionPolicyCallout from './RetentionPolicyCallout';

export default {
title: 'Info Panel/InfoPanel',
component: InfoPanel,
subcomponents: {
'InfoPanel.Action': InfoPanel.Action,
'InfoPanel.ActionGroup': InfoPanel.ActionGroup,
'InfoPanel.Avatar': InfoPanel.Avatar,
'InfoPanel.Field': InfoPanel.Field,
'InfoPanel.Label': InfoPanel.Label,
'InfoPanel.Section': InfoPanel.Section,
'InfoPanel.Text': InfoPanel.Text,
'InfoPanel.Title': InfoPanel.Title,
InfoPanelAction,
InfoPanelActionGroup,
InfoPanelAvatar,
InfoPanelField,
InfoPanelLabel,
InfoPanelSection,
InfoPanelText,
InfoPanelTitle,
RetentionPolicyCallout,
},
} as ComponentMeta<typeof InfoPanel>;
Expand All @@ -25,62 +35,37 @@ const fakeRoom = createFakeRoom();

export const Default: ComponentStory<typeof InfoPanel> = () => (
<InfoPanel>
<InfoPanel.Avatar />
<InfoPanel.Section>
<InfoPanel.Title title='rocketchat-frontend-team' icon='hashtag' />
</InfoPanel.Section>
<InfoPanelAvatar />
<InfoPanelSection>
<InfoPanelTitle title='rocketchat-frontend-team' icon='hashtag' />
</InfoPanelSection>

<InfoPanel.Section>
<InfoPanel.Field>
<InfoPanel.Label>Description</InfoPanel.Label>
<InfoPanel.Text>
<InfoPanelSection>
<InfoPanelField>
<InfoPanelLabel>Description</InfoPanelLabel>
<InfoPanelText>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit
libero
</InfoPanel.Text>
</InfoPanel.Field>
<InfoPanel.Field>
<InfoPanel.Label>Announcement</InfoPanel.Label>
<InfoPanel.Text>
</InfoPanelText>
</InfoPanelField>
<InfoPanelField>
<InfoPanelLabel>Announcement</InfoPanelLabel>
<InfoPanelText>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit
libero
</InfoPanel.Text>
</InfoPanel.Field>
<InfoPanel.Field>
<InfoPanel.Label>Topic</InfoPanel.Label>
<InfoPanel.Text>
</InfoPanelText>
</InfoPanelField>
<InfoPanelField>
<InfoPanelLabel>Topic</InfoPanelLabel>
<InfoPanelText>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit
libero
</InfoPanel.Text>
</InfoPanel.Field>
</InfoPanel.Section>

<InfoPanel.Section>
</InfoPanelText>
</InfoPanelField>
</InfoPanelSection>
<InfoPanelSection>
<RetentionPolicyCallout room={fakeRoom} />
</InfoPanel.Section>
</InfoPanelSection>
</InfoPanel>
);
Default.storyName = 'InfoPanel';

// export const Archived = () => <Contextualbar height={800}>
// <RoomInfo
// {...room}
// icon='lock'
// onClickHide={alert}
// onClickLeave={alert}
// onClickEdit={alert}
// onClickDelete={alert}
// archived
// />
// </Contextualbar>;

// export const Broadcast = () => <Contextualbar height={800}>
// <RoomInfo
// {...room}
// icon='lock'
// onClickHide={alert}
// onClickLeave={alert}
// onClickEdit={alert}
// onClickDelete={alert}
// broadcast
// />
// </Contextualbar>;
29 changes: 9 additions & 20 deletions apps/meteor/client/components/InfoPanel/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,9 @@
import InfoPanel from './InfoPanel';
import InfoPanelAction from './InfoPanelAction';
import InfoPanelActionGroup from './InfoPanelActionGroup';
import InfoPanelAvatar from './InfoPanelAvatar';
import InfoPanelField from './InfoPanelField';
import InfoPanelLabel from './InfoPanelLabel';
import InfoPanelSection from './InfoPanelSection';
import InfoPanelText from './InfoPanelText';
import InfoPanelTitle from './InfoPanelTitle';

export default Object.assign(InfoPanel, {
Title: InfoPanelTitle,
Label: InfoPanelLabel,
Text: InfoPanelText,
Avatar: InfoPanelAvatar,
Field: InfoPanelField,
Action: InfoPanelAction,
Section: InfoPanelSection,
ActionGroup: InfoPanelActionGroup,
});
export { default as InfoPanel } from './InfoPanel';
export { default as InfoPanelAction } from './InfoPanelAction';
export { default as InfoPanelActionGroup } from './InfoPanelActionGroup';
export { default as InfoPanelAvatar } from './InfoPanelAvatar';
export { default as InfoPanelField } from './InfoPanelField';
export { default as InfoPanelLabel } from './InfoPanelLabel';
export { default as InfoPanelSection } from './InfoPanelSection';
export { default as InfoPanelText } from './InfoPanelText';
export { default as InfoPanelTitle } from './InfoPanelTitle';
125 changes: 67 additions & 58 deletions apps/meteor/client/components/UserInfo/UserInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,16 @@ import { useTimeAgo } from '../../hooks/useTimeAgo';
import { useUserCustomFields } from '../../hooks/useUserCustomFields';
import { useUserDisplayName } from '../../hooks/useUserDisplayName';
import { ContextualbarScrollableContent } from '../Contextualbar';
import InfoPanel from '../InfoPanel';
import {
InfoPanel,
InfoPanelActionGroup,
InfoPanelAvatar,
InfoPanelField,
InfoPanelLabel,
InfoPanelSection,
InfoPanelText,
InfoPanelTitle,
} from '../InfoPanel';
import MarkdownText from '../MarkdownText';
import UTCClock from '../UTCClock';
import { UserCardRoles } from '../UserCard';
Expand Down Expand Up @@ -72,119 +81,119 @@ const UserInfo = ({
<ContextualbarScrollableContent p={24} {...props}>
<InfoPanel>
{username && (
<InfoPanel.Avatar>
<InfoPanelAvatar>
<UserInfoAvatar username={username} etag={avatarETag} />
</InfoPanel.Avatar>
</InfoPanelAvatar>
)}

{actions && <InfoPanel.ActionGroup>{actions}</InfoPanel.ActionGroup>}
{actions && <InfoPanelActionGroup>{actions}</InfoPanelActionGroup>}

<InfoPanel.Section>
{userDisplayName && <InfoPanel.Title icon={status} title={userDisplayName} />}
<InfoPanelSection>
{userDisplayName && <InfoPanelTitle icon={status} title={userDisplayName} />}

{statusText && (
<InfoPanel.Text>
<InfoPanelText>
<MarkdownText content={statusText} parseEmoji={true} variant='inline' />
</InfoPanel.Text>
</InfoPanelText>
)}
</InfoPanel.Section>
</InfoPanelSection>

<InfoPanel.Section>
<InfoPanelSection>
{reason && (
<InfoPanel.Field>
<InfoPanel.Label>{t('Reason_for_joining')}</InfoPanel.Label>
<InfoPanel.Text>{reason}</InfoPanel.Text>
</InfoPanel.Field>
<InfoPanelField>
<InfoPanelLabel>{t('Reason_for_joining')}</InfoPanelLabel>
<InfoPanelText>{reason}</InfoPanelText>
</InfoPanelField>
)}

{nickname && (
<InfoPanel.Field>
<InfoPanel.Label>{t('Nickname')}</InfoPanel.Label>
<InfoPanel.Text>{nickname}</InfoPanel.Text>
</InfoPanel.Field>
<InfoPanelField>
<InfoPanelLabel>{t('Nickname')}</InfoPanelLabel>
<InfoPanelText>{nickname}</InfoPanelText>
</InfoPanelField>
)}

{roles.length !== 0 && (
<InfoPanel.Field>
<InfoPanel.Label>{t('Roles')}</InfoPanel.Label>
<InfoPanelField>
<InfoPanelLabel>{t('Roles')}</InfoPanelLabel>
<UserCardRoles>{roles}</UserCardRoles>
</InfoPanel.Field>
</InfoPanelField>
)}

{username && username !== name && (
<InfoPanel.Field>
<InfoPanel.Label>{t('Username')}</InfoPanel.Label>
<InfoPanel.Text data-qa='UserInfoUserName'>{username}</InfoPanel.Text>
</InfoPanel.Field>
<InfoPanelField>
<InfoPanelLabel>{t('Username')}</InfoPanelLabel>
<InfoPanelText data-qa='UserInfoUserName'>{username}</InfoPanelText>
</InfoPanelField>
)}

{Number.isInteger(utcOffset) && (
<InfoPanel.Field>
<InfoPanel.Label>{t('Local_Time')}</InfoPanel.Label>
<InfoPanel.Text>{utcOffset && <UTCClock utcOffset={utcOffset} />}</InfoPanel.Text>
</InfoPanel.Field>
<InfoPanelField>
<InfoPanelLabel>{t('Local_Time')}</InfoPanelLabel>
<InfoPanelText>{utcOffset && <UTCClock utcOffset={utcOffset} />}</InfoPanelText>
</InfoPanelField>
)}

{bio && (
<InfoPanel.Field>
<InfoPanel.Label>{t('Bio')}</InfoPanel.Label>
<InfoPanel.Text withTruncatedText={false}>
<InfoPanelField>
<InfoPanelLabel>{t('Bio')}</InfoPanelLabel>
<InfoPanelText withTruncatedText={false}>
<MarkdownText variant='inline' content={bio} />
</InfoPanel.Text>
</InfoPanel.Field>
</InfoPanelText>
</InfoPanelField>
)}

{Number.isInteger(utcOffset) && canViewAllInfo && (
<InfoPanel.Field>
<InfoPanel.Label>{t('Last_login')}</InfoPanel.Label>
<InfoPanel.Text>{lastLogin ? timeAgo(lastLogin) : t('Never')}</InfoPanel.Text>
</InfoPanel.Field>
<InfoPanelField>
<InfoPanelLabel>{t('Last_login')}</InfoPanelLabel>
<InfoPanelText>{lastLogin ? timeAgo(lastLogin) : t('Never')}</InfoPanelText>
</InfoPanelField>
)}

{phone && (
<InfoPanel.Field>
<InfoPanel.Label>{t('Phone')}</InfoPanel.Label>
<InfoPanel.Text display='flex' flexDirection='row' alignItems='center'>
<InfoPanelField>
<InfoPanelLabel>{t('Phone')}</InfoPanelLabel>
<InfoPanelText display='flex' flexDirection='row' alignItems='center'>
<Box is='a' withTruncatedText href={`tel:${phone}`}>
{phone}
</Box>
</InfoPanel.Text>
</InfoPanel.Field>
</InfoPanelText>
</InfoPanelField>
)}

{email && (
<InfoPanel.Field>
<InfoPanel.Label>{t('Email')}</InfoPanel.Label>
<InfoPanel.Text display='flex' flexDirection='row' alignItems='center'>
<InfoPanelField>
<InfoPanelLabel>{t('Email')}</InfoPanelLabel>
<InfoPanelText display='flex' flexDirection='row' alignItems='center'>
<Box is='a' withTruncatedText href={`mailto:${email}`}>
{email}
</Box>
<Margins inline={4}>
<Tag>{verified ? t('Verified') : t('Not_verified')}</Tag>
</Margins>
</InfoPanel.Text>
</InfoPanel.Field>
</InfoPanelText>
</InfoPanelField>
)}

{userCustomFields?.map(
(customField) =>
customField?.value && (
<InfoPanel.Field key={customField.value}>
<InfoPanel.Label>{t(customField.label as TranslationKey)}</InfoPanel.Label>
<InfoPanel.Text>
<InfoPanelField key={customField.value}>
<InfoPanelLabel>{t(customField.label as TranslationKey)}</InfoPanelLabel>
<InfoPanelText>
<MarkdownText content={customField.value} variant='inline' />
</InfoPanel.Text>
</InfoPanel.Field>
</InfoPanelText>
</InfoPanelField>
),
)}

{createdAt && (
<InfoPanel.Field>
<InfoPanel.Label>{t('Created_at')}</InfoPanel.Label>
<InfoPanel.Text>{timeAgo(createdAt)}</InfoPanel.Text>
</InfoPanel.Field>
<InfoPanelField>
<InfoPanelLabel>{t('Created_at')}</InfoPanelLabel>
<InfoPanelText>{timeAgo(createdAt)}</InfoPanelText>
</InfoPanelField>
)}
</InfoPanel.Section>
</InfoPanelSection>
</InfoPanel>
</ContextualbarScrollableContent>
);
Expand Down
17 changes: 4 additions & 13 deletions apps/meteor/client/components/UserInfo/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,4 @@
import InfoPanel from '../InfoPanel';
import UserInfo from './UserInfo';
import UserInfoAction from './UserInfoAction';
import UserInfoAvatar from './UserInfoAvatar';
import UserInfoUsername from './UserInfoUsername';

export default Object.assign(UserInfo, {
Action: UserInfoAction,
Avatar: UserInfoAvatar,
Info: InfoPanel.Text,
Label: InfoPanel.Label,
Username: UserInfoUsername,
});
export { default as UserInfo } from './UserInfo';
export { default as UserInfoAction } from './UserInfoAction';
export { default as UserInfoAvatar } from './UserInfoAvatar';
export { default as UserInfoUsername } from './UserInfoUsername';
6 changes: 3 additions & 3 deletions apps/meteor/client/omnichannel/additionalForms/MaxChatsPerAgentDisplay.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useTranslation } from '@rocket.chat/ui-contexts';
import React from 'react';

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

const MaxChatsPerAgentDisplay = ({ maxNumberSimultaneousChat = 0 }) => {
Expand All @@ -14,8 +14,8 @@ const MaxChatsPerAgentDisplay = ({ maxNumberSimultaneousChat = 0 }) => {

return (
<>
<UserInfo.Label>{t('Max_number_of_chats_per_agent')}</UserInfo.Label>
<UserInfo.Info>{maxNumberSimultaneousChat}</UserInfo.Info>
<InfoPanelLabel>{t('Max_number_of_chats_per_agent')}</InfoPanelLabel>
<InfoPanelText>{maxNumberSimultaneousChat}</InfoPanelText>
</>
);
};
Expand Down
Loading

0 comments on commit b553cfc

Please sign in to comment.