Skip to content

Commit

Permalink
chore: Remove Card deprecation warning (#30335)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dougfabris
dougfabris authored Sep 9, 2023
1 parent e9ef5d7 commit dfdf401
Show file tree
Hide file tree
Showing 19 changed files with 238 additions and 248 deletions.
6 changes: 3 additions & 3 deletions apps/meteor/client/views/admin/cloud/components/RegisterWorkspaceCards.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Grid } from '@rocket.chat/fuselage';
import { Card } from '@rocket.chat/ui-client';
import { Card, CardBody, CardTitle } from '@rocket.chat/ui-client';
import React from 'react';

import useFeatureBullets from '../hooks/useFeatureBullets';
Expand All @@ -12,8 +12,8 @@ const RegisterWorkspaceCards = () => {
{bulletFeatures.map((card) => (
<Grid.Item key={card.key} xs={4} sm={4} md={4} lg={4} xl={3}>
<Card>
<Card.Title>{card.title}</Card.Title>
<Card.Body height='x88'>{card.description}</Card.Body>
<CardTitle>{card.title}</CardTitle>
<CardBody height='x88'>{card.description}</CardBody>
</Card>
</Grid.Item>
))}
Expand Down
64 changes: 32 additions & 32 deletions apps/meteor/client/views/admin/info/DeploymentCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { IServerInfo, IStats, Serialized } from '@rocket.chat/core-typings'
import { ButtonGroup, Button } from '@rocket.chat/fuselage';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import type { IInstance } from '@rocket.chat/rest-typings';
import { Card } from '@rocket.chat/ui-client';
import { Card, CardBody, CardCol, CardTitle, CardColSection, CardColTitle, CardFooter } from '@rocket.chat/ui-client';
import { useSetModal, useTranslation } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React, { memo } from 'react';
Expand Down Expand Up @@ -31,57 +31,57 @@ const DeploymentCard = ({ info, statistics, instances }: DeploymentCardProps): R

return (
<Card data-qa-id='deployment-card'>
<Card.Title>{t('Deployment')}</Card.Title>
<Card.Body>
<Card.Col>
<Card.Col.Section>
<Card.Col.Title>{t('Version')}</Card.Col.Title>
<CardTitle>{t('Deployment')}</CardTitle>
<CardBody>
<CardCol>
<CardColSection>
<CardColTitle>{t('Version')}</CardColTitle>
{statistics.version}
</Card.Col.Section>
<Card.Col.Section>
<Card.Col.Title>{t('Deployment_ID')}</Card.Col.Title>
</CardColSection>
<CardColSection>
<CardColTitle>{t('Deployment_ID')}</CardColTitle>
{statistics.uniqueId}
</Card.Col.Section>
</CardColSection>
{appsEngineVersion && (
<Card.Col.Section>
<Card.Col.Title>{t('Apps_Engine_Version')}</Card.Col.Title>
<CardColSection>
<CardColTitle>{t('Apps_Engine_Version')}</CardColTitle>
{appsEngineVersion}
</Card.Col.Section>
</CardColSection>
)}
<Card.Col.Section>
<Card.Col.Title>{t('Node_version')}</Card.Col.Title>
<CardColSection>
<CardColTitle>{t('Node_version')}</CardColTitle>
{statistics.process.nodeVersion}
</Card.Col.Section>
<Card.Col.Section>
<Card.Col.Title>{t('DB_Migration')}</Card.Col.Title>
</CardColSection>
<CardColSection>
<CardColTitle>{t('DB_Migration')}</CardColTitle>
{`${statistics.migration.version} (${formatDateAndTime(statistics.migration.lockedAt)})`}
</Card.Col.Section>
<Card.Col.Section>
<Card.Col.Title>{t('MongoDB')}</Card.Col.Title>
</CardColSection>
<CardColSection>
<CardColTitle>{t('MongoDB')}</CardColTitle>
{`${statistics.mongoVersion} / ${statistics.mongoStorageEngine} ${
!statistics.msEnabled ? `(oplog ${statistics.oplogEnabled ? t('Enabled') : t('Disabled')})` : ''
}`}
</Card.Col.Section>
<Card.Col.Section>
<Card.Col.Title>{t('Commit_details')}</Card.Col.Title>
</CardColSection>
<CardColSection>
<CardColTitle>{t('Commit_details')}</CardColTitle>
{t('github_HEAD')}: ({commit.hash ? commit.hash.slice(0, 9) : ''}) <br />
{t('Branch')}: {commit.branch}
</Card.Col.Section>
<Card.Col.Section>
<Card.Col.Title>{t('PID')}</Card.Col.Title>
</CardColSection>
<CardColSection>
<CardColTitle>{t('PID')}</CardColTitle>
{statistics.process.pid}
</Card.Col.Section>
</Card.Col>
</Card.Body>
</CardColSection>
</CardCol>
</CardBody>

{!!instances.length && (
<Card.Footer>
<CardFooter>
<ButtonGroup align='end'>
<Button small onClick={handleInstancesModal}>
{t('Instances')}
</Button>
</ButtonGroup>
</Card.Footer>
</CardFooter>
)}
</Card>
);
Expand Down
26 changes: 13 additions & 13 deletions apps/meteor/client/views/admin/info/LicenseCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ButtonGroup, Button, Skeleton } from '@rocket.chat/fuselage';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import { Card } from '@rocket.chat/ui-client';
import { Card, CardBody, CardCol, CardTitle, CardColSection, CardColTitle, CardFooter } from '@rocket.chat/ui-client';
import { useSetModal, useSetting, useTranslation } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React from 'react';
Expand Down Expand Up @@ -43,14 +43,14 @@ const LicenseCard = (): ReactElement => {

return (
<Card data-qa-id='license-card'>
<Card.Title>{t('License')}</Card.Title>
<Card.Body>
<Card.Col>
<Card.Col.Section>
<CardTitle>{t('License')}</CardTitle>
<CardBody>
<CardCol>
<CardColSection>
<PlanTag />
</Card.Col.Section>
<Card.Col.Section>
<Card.Col.Title>{t('Features')}</Card.Col.Title>
</CardColSection>
<CardColSection>
<CardColTitle>{t('Features')}</CardColTitle>
{isLoading ? (
<>
<Skeleton width='40x' />
Expand All @@ -67,10 +67,10 @@ const LicenseCard = (): ReactElement => {
<Feature label={t('Read_Receipts')} enabled={hasReadReceipts} />
</>
)}
</Card.Col.Section>
</Card.Col>
</Card.Body>
<Card.Footer>
</CardColSection>
</CardCol>
</CardBody>
<CardFooter>
<ButtonGroup>
{isAirGapped ? (
<Button small onClick={handleApplyLicense}>
Expand All @@ -80,7 +80,7 @@ const LicenseCard = (): ReactElement => {
<Button small>{t('Cloud_connectivity')}</Button>
)}
</ButtonGroup>
</Card.Footer>
</CardFooter>
</Card>
);
};
Expand Down
86 changes: 48 additions & 38 deletions apps/meteor/client/views/admin/info/UsageCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,17 @@
import type { IStats } from '@rocket.chat/core-typings';
import { ButtonGroup, Button } from '@rocket.chat/fuselage';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import { TextSeparator, Card } from '@rocket.chat/ui-client';
import {
Card,
CardBody,
CardCol,
CardTitle,
CardColSection,
CardColTitle,
CardFooter,
TextSeparator,
CardIcon,
} from '@rocket.chat/ui-client';
import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React, { memo } from 'react';
Expand Down Expand Up @@ -29,25 +39,25 @@ const UsageCard = ({ statistics, vertical }: UsageCardProps): ReactElement => {

return (
<Card data-qa-id='usage-card'>
<Card.Title>{t('Usage')}</Card.Title>
<Card.Body flexDirection={vertical ? 'column' : 'row'}>
<Card.Col>
<Card.Col.Section>
<Card.Col.Title>{t('Users')}</Card.Col.Title>
<CardTitle>{t('Usage')}</CardTitle>
<CardBody flexDirection={vertical ? 'column' : 'row'}>
<CardCol>
<CardColSection>
<CardColTitle>{t('Users')}</CardColTitle>
<TextSeparator
label={
<>
<Card.Icon name='dialpad' /> {t('Total')}
<CardIcon name='dialpad' /> {t('Total')}
</>
}
value={statistics.totalUsers}
/>
<TextSeparator
label={
<>
<Card.Icon>
<CardIcon>
<UserStatus status='online' />
</Card.Icon>{' '}
</CardIcon>{' '}
{t('Online')}
</>
}
Expand All @@ -56,9 +66,9 @@ const UsageCard = ({ statistics, vertical }: UsageCardProps): ReactElement => {
<TextSeparator
label={
<>
<Card.Icon>
<CardIcon>
<UserStatus status='busy' />
</Card.Icon>{' '}
</CardIcon>{' '}
{t('Busy')}
</>
}
Expand All @@ -67,9 +77,9 @@ const UsageCard = ({ statistics, vertical }: UsageCardProps): ReactElement => {
<TextSeparator
label={
<>
<Card.Icon>
<CardIcon>
<UserStatus status='away' />
</Card.Icon>{' '}
</CardIcon>{' '}
{t('Away')}
</>
}
Expand All @@ -78,97 +88,97 @@ const UsageCard = ({ statistics, vertical }: UsageCardProps): ReactElement => {
<TextSeparator
label={
<>
<Card.Icon>
<CardIcon>
<UserStatus status='offline' />
</Card.Icon>{' '}
</CardIcon>{' '}
{t('Offline')}
</>
}
value={statistics.offlineUsers}
/>
</Card.Col.Section>
<Card.Col.Section>
<Card.Col.Title>{t('Types_and_Distribution')}</Card.Col.Title>
</CardColSection>
<CardColSection>
<CardColTitle>{t('Types_and_Distribution')}</CardColTitle>
<TextSeparator label={t('Connected')} value={statistics.totalConnectedUsers} />
<TextSeparator label={t('Stats_Active_Users')} value={statistics.activeUsers} />
<TextSeparator label={t('Stats_Active_Guests')} value={statistics.activeGuests} />
<TextSeparator label={t('Stats_Non_Active_Users')} value={statistics.nonActiveUsers} />
<TextSeparator label={t('Stats_App_Users')} value={statistics.appUsers} />
</Card.Col.Section>
<Card.Col.Section>
<Card.Col.Title>{t('Uploads')}</Card.Col.Title>
</CardColSection>
<CardColSection>
<CardColTitle>{t('Uploads')}</CardColTitle>
<TextSeparator label={t('Stats_Total_Uploads')} value={statistics.uploadsTotal} />
<TextSeparator label={t('Stats_Total_Uploads_Size')} value={formatMemorySize(statistics.uploadsTotalSize)} />
</Card.Col.Section>
<Card.Col.Section>
<Card.Col.Title>{t('Total_rooms')}</Card.Col.Title>
</CardColSection>
<CardColSection>
<CardColTitle>{t('Total_rooms')}</CardColTitle>
<TextSeparator
label={
<>
<Card.Icon name='dialpad' size='x16' /> {t('Stats_Total_Rooms')}
<CardIcon name='dialpad' size='x16' /> {t('Stats_Total_Rooms')}
</>
}
value={statistics.totalRooms}
/>
<TextSeparator
label={
<>
<Card.Icon name='hash' size='x16' /> {t('Stats_Total_Channels')}
<CardIcon name='hash' size='x16' /> {t('Stats_Total_Channels')}
</>
}
value={statistics.totalChannels}
/>
<TextSeparator
label={
<>
<Card.Icon name='lock' size='x16' /> {t('Stats_Total_Private_Groups')}
<CardIcon name='lock' size='x16' /> {t('Stats_Total_Private_Groups')}
</>
}
value={statistics.totalPrivateGroups}
/>
<TextSeparator
label={
<>
<Card.Icon name='balloon' size='x16' /> {t('Stats_Total_Direct_Messages')}
<CardIcon name='balloon' size='x16' /> {t('Stats_Total_Direct_Messages')}
</>
}
value={statistics.totalDirect}
/>
<TextSeparator
label={
<>
<Card.Icon name='discussion' size='x16' /> {t('Total_Discussions')}
<CardIcon name='discussion' size='x16' /> {t('Total_Discussions')}
</>
}
value={statistics.totalDiscussions}
/>
<TextSeparator
label={
<>
<Card.Icon name='headset' size='x16' /> {t('Stats_Total_Livechat_Rooms')}
<CardIcon name='headset' size='x16' /> {t('Stats_Total_Livechat_Rooms')}
</>
}
value={statistics.totalLivechat}
/>
</Card.Col.Section>
<Card.Col.Section>
<Card.Col.Title>{t('Total_messages')}</Card.Col.Title>
</CardColSection>
<CardColSection>
<CardColTitle>{t('Total_messages')}</CardColTitle>
<TextSeparator label={t('Stats_Total_Messages')} value={statistics.totalMessages} />
<TextSeparator label={t('Total_Threads')} value={statistics.totalThreads} />
<TextSeparator label={t('Stats_Total_Messages_Channel')} value={statistics.totalChannelMessages} />
<TextSeparator label={t('Stats_Total_Messages_PrivateGroup')} value={statistics.totalPrivateGroupMessages} />
<TextSeparator label={t('Stats_Total_Messages_Direct')} value={statistics.totalDirectMessages} />
<TextSeparator label={t('Stats_Total_Messages_Livechat')} value={statistics.totalLivechatMessages} />
</Card.Col.Section>
</Card.Col>
</Card.Body>
<Card.Footer>
</CardColSection>
</CardCol>
</CardBody>
<CardFooter>
<ButtonGroup align='end'>
<Button disabled={!canViewEngagement} small onClick={handleEngagement}>
{t('See_on_Engagement_Dashboard')}
</Button>
</ButtonGroup>
</Card.Footer>
</CardFooter>
</Card>
);
};
Expand Down
Loading

0 comments on commit dfdf401

Please sign in to comment.