Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion .github/workflows/ci-code-check.yml
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ jobs:

- name: Raw layout elements in screens
if: matrix.check == 'lint'
run: node scripts/scan-raw-layout.mjs --max 1146 "$RUNNER_TEMP/raw-layout-findings.json"
run: node scripts/scan-raw-layout.mjs --max 1104 "$RUNNER_TEMP/raw-layout-findings.json"

- name: Spacing scale
if: matrix.check == 'lint'
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import type { IWorkspaceInfo, IStats } from '@rocket.chat/core-typings';
import { Button, Card, CardBody, CardControls, Margins } from '@rocket.chat/fuselage';
import { Button, Card, CardBody, CardControls, Text } from '@rocket.chat/fuselage';
import { useStableCallback } from '@rocket.chat/fuselage-hooks';
import type { IInstance } from '@rocket.chat/rest-typings';
import { useFormatDateAndTime } from '@rocket.chat/ui-client';
import { useSetModal } from '@rocket.chat/ui-contexts';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';

import WorkspaceCardSection from '../components/WorkspaceCardSection';
import InstancesModal from './components/InstancesModal';
import WorkspaceCardDetail from '../components/WorkspaceCardDetail';
import WorkspaceCardSectionTitle from '../components/WorkspaceCardSectionTitle';
import WorkspaceCardSections from '../layout/WorkspaceCardSections';

export type DeploymentCardProps = {
serverInfo: IWorkspaceInfo;
Expand All @@ -35,67 +36,34 @@ const DeploymentCard = ({
return (
<Card>
<CardBody flexDirection='column'>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Deployment')} variant='h4' />
</WorkspaceCardSection>
<Margins blockEnd={8}>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Version')} />
{statistics.version}
</WorkspaceCardSection>
{workspaceUrl && (
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Site_Url')} />
{workspaceUrl}
</WorkspaceCardSection>
)}
<WorkspaceCardSectionTitle title={t('Deployment')} variant='h4' />
<WorkspaceCardSections gap='x16' spaceAbove='x20' spaceBelow='x8'>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Resolved
<WorkspaceCardDetail label={t('Version')}>{statistics.version}</WorkspaceCardDetail>
{workspaceUrl && <WorkspaceCardDetail label={t('Site_Url')}>{workspaceUrl}</WorkspaceCardDetail>}
{hashedWorkspaceUrl && (
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Hashed_Site_Url')} />
<span style={{ lineBreak: 'anywhere' }}>{hashedWorkspaceUrl}</span>
</WorkspaceCardSection>
<WorkspaceCardDetail label={t('Hashed_Site_Url')}>
<Text is='span' style={{ lineBreak: 'anywhere' }}>
{hashedWorkspaceUrl}
</Text>
</WorkspaceCardDetail>
)}
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Deployment_ID')} />
{statistics.uniqueId}
</WorkspaceCardSection>
<WorkspaceCardDetail label={t('Deployment_ID')}>{statistics.uniqueId}</WorkspaceCardDetail>

{cloudWorkspaceId && (
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Cloud_Workspace_Id')} />
{cloudWorkspaceId}
</WorkspaceCardSection>
)}
{cloudWorkspaceId && <WorkspaceCardDetail label={t('Cloud_Workspace_Id')}>{cloudWorkspaceId}</WorkspaceCardDetail>}

{appsEngineVersion && (
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Apps_Engine_Version')} />
{appsEngineVersion}
</WorkspaceCardSection>
)}
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Node_version')} />
{statistics.process.nodeVersion}
</WorkspaceCardSection>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('DB_Migration')} />
{appsEngineVersion && <WorkspaceCardDetail label={t('Apps_Engine_Version')}>{appsEngineVersion}</WorkspaceCardDetail>}
<WorkspaceCardDetail label={t('Node_version')}>{statistics.process.nodeVersion}</WorkspaceCardDetail>
<WorkspaceCardDetail label={t('DB_Migration')}>
{`${statistics.migration.version} (${formatDateAndTime(statistics.migration.lockedAt)})`}
</WorkspaceCardSection>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('MongoDB')} />
{`${statistics.mongoVersion} / ${statistics.mongoStorageEngine}`}
</WorkspaceCardSection>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Commit_details')} />
</WorkspaceCardDetail>
<WorkspaceCardDetail label={t('MongoDB')}>{`${statistics.mongoVersion} / ${statistics.mongoStorageEngine}`}</WorkspaceCardDetail>
<WorkspaceCardDetail label={t('Commit_details')}>
{t('github_HEAD')}: ({commit.hash ? commit.hash.slice(0, 9) : ''}) <br />
{t('Branch')}: {commit.branch} <br />
{commit.subject}
</WorkspaceCardSection>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('PID')} />
{statistics.process.pid}
</WorkspaceCardSection>
</Margins>
</WorkspaceCardDetail>
<WorkspaceCardDetail label={t('PID')}>{statistics.process.pid}</WorkspaceCardDetail>
</WorkspaceCardSections>
</CardBody>

{!!instances.length && (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,23 +1,20 @@
import { Box, Table, TableBody } from '@rocket.chat/fuselage';
import { Table, TableBody } from '@rocket.chat/fuselage';
import type { ReactNode } from 'react';
import { memo } from 'react';

import DescriptionListFrame from './layout/DescriptionListFrame';

export type DescriptionListProps = {
children: ReactNode;
title?: string;
};

const DescriptionList = ({ children, title }: DescriptionListProps) => (
<Box paddingBlockEnd={32}>
{title && (
<Box display='flex' justifyContent='flex-end' width='30%' paddingInline={8}>
{title}
</Box>
)}
<DescriptionListFrame title={title}>
<Table striped>
<TableBody>{children}</TableBody>
</Table>
</Box>
</DescriptionListFrame>
);

export default memo(DescriptionList);
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { Box } from '@rocket.chat/fuselage';
import type { ReactNode } from 'react';

type DescriptionListFrameProps = {
title?: string;
children: ReactNode;
};

/**
* Frames a description list: its optional title over the label column, and room below before the next list.
*/
const DescriptionListFrame = ({ title, children }: DescriptionListFrameProps) => (
<Box paddingBlockEnd='x32'>
{title && (
<Box display='flex' justifyContent='flex-end' width='30%' paddingInline='x8'>
{title}
</Box>
)}
{children}
</Box>
);

export default DescriptionListFrame;
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { memo } from 'react';
import { useTranslation } from 'react-i18next';

import WorkspaceCardSection from '../components/WorkspaceCardSection';
import WorkspaceCardSectionTitle from '../components/WorkspaceCardSectionTitle';
import WorkspaceCardTextSeparator from '../components/WorkspaceCardTextSeparator';

export type MessagesRoomsCardProps = {
Expand All @@ -16,9 +15,7 @@ const MessagesRoomsCard = ({ statistics }: MessagesRoomsCardProps) => {

return (
<Card>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Total_rooms')} variant='h4' />

<WorkspaceCardSection title={t('Total_rooms')}>
<WorkspaceCardTextSeparator label={t('Channels')} icon='hash' value={statistics.totalChannels} />
<WorkspaceCardTextSeparator label={t('Private_Groups')} icon='lock' value={statistics.totalPrivateGroups} />
<WorkspaceCardTextSeparator label={t('Direct_Messages')} icon='balloon' value={statistics.totalDirect} />
Expand All @@ -27,8 +24,7 @@ const MessagesRoomsCard = ({ statistics }: MessagesRoomsCardProps) => {
<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalRooms} />
</WorkspaceCardSection>

<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Messages')} variant='h4' />
<WorkspaceCardSection title={t('Messages')}>
<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Channel')} icon='hash' value={statistics.totalChannelMessages} />
<WorkspaceCardTextSeparator
label={t('Stats_Total_Messages_PrivateGroup')}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import type { IStats } from '@rocket.chat/core-typings';
import type { Meta, StoryObj } from '@storybook/react';

import UsersUploadsCard from './UsersUploadsCard';

export default {
component: UsersUploadsCard,
parameters: {
layout: 'centered',
},
args: {
statistics: {
onlineUsers: 12,
busyUsers: 3,
awayUsers: 5,
offlineUsers: 80,
totalUsers: 100,
totalConnectedUsers: 20,
activeUsers: 90,
activeGuests: 4,
nonActiveUsers: 6,
appUsers: 2,
uploadsTotal: 321,
uploadsTotalSize: 123456789,
} as IStats,
},
} satisfies Meta<typeof UsersUploadsCard>;

export const Default: StoryObj<typeof UsersUploadsCard> = {};
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { IStats } from '@rocket.chat/core-typings';
import { Button, Card, CardBody, CardControls, Margins } from '@rocket.chat/fuselage';
import { Button, Card, CardBody, CardControls } from '@rocket.chat/fuselage';
import { useStableCallback } from '@rocket.chat/fuselage-hooks';
import { useHasLicenseModule } from '@rocket.chat/ui-client';
import { useRouter } from '@rocket.chat/ui-contexts';
Expand All @@ -8,8 +8,8 @@ import { useTranslation } from 'react-i18next';

import { useFormatMemorySize } from '../../../../hooks/useFormatMemorySize';
import WorkspaceCardSection from '../components/WorkspaceCardSection';
import WorkspaceCardSectionTitle from '../components/WorkspaceCardSectionTitle';
import WorkspaceCardTextSeparator from '../components/WorkspaceCardTextSeparator';
import WorkspaceCardSections from '../layout/WorkspaceCardSections';

export type UsersUploadsCardProps = {
statistics: IStats;
Expand All @@ -30,33 +30,27 @@ const UsersUploadsCard = ({ statistics }: UsersUploadsCardProps) => {
return (
<Card>
<CardBody flexDirection='column'>
<Margins blockEnd={24}>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Users')} variant='h4' />

<WorkspaceCardSections gap='x32' spaceBelow='x24'>
Comment thread
juliajforesti marked this conversation as resolved.
Resolved
<WorkspaceCardSection title={t('Users')}>
<WorkspaceCardTextSeparator label={t('Online')} status='online' value={statistics.onlineUsers} />
<WorkspaceCardTextSeparator label={t('Busy')} status='busy' value={statistics.busyUsers} />
<WorkspaceCardTextSeparator label={t('Away')} status='away' value={statistics.awayUsers} />
<WorkspaceCardTextSeparator label={t('Offline')} status='offline' value={statistics.offlineUsers} />
<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalUsers} />
</WorkspaceCardSection>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Types')} variant='h4' />

<WorkspaceCardSection title={t('Types')}>
<WorkspaceCardTextSeparator label={t('Users_Connected')} value={statistics.totalConnectedUsers} />
<WorkspaceCardTextSeparator label={t('Stats_Active_Users')} value={statistics.activeUsers} />
<WorkspaceCardTextSeparator label={t('Stats_Active_Guests')} value={statistics.activeGuests} />
<WorkspaceCardTextSeparator label={t('Stats_Non_Active_Users')} value={statistics.nonActiveUsers} />
<WorkspaceCardTextSeparator label={t('Stats_App_Users')} value={statistics.appUsers} />
</WorkspaceCardSection>

<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Uploads')} variant='h4' />

<WorkspaceCardSection title={t('Uploads')}>
<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads')} value={statistics.uploadsTotal} />
<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads_Size')} value={formatMemorySize(statistics.uploadsTotalSize)} />
</WorkspaceCardSection>
</Margins>
</WorkspaceCardSections>
</CardBody>

<CardControls>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { ExternalLink } from '@rocket.chat/ui-client';
import type { Meta, StoryObj } from '@storybook/react';

import VersionCardActionItem from './VersionCardActionItem';

export default {
component: VersionCardActionItem,
parameters: {
layout: 'padded',
},
args: {
icon: 'check',
label: 'Operating within plan limits',
},
} satisfies Meta<typeof VersionCardActionItem>;

type Story = StoryObj<typeof VersionCardActionItem>;

export const Default: Story = {};

export const Danger: Story = {
args: { danger: true, icon: 'warning', label: 'Plan limits reached' },
};

export const WithLink: Story = {
args: {
label: (
<>
Version <ExternalLink to='https://go.rocket.chat/i/version-support'>supported</ExternalLink> until Dec 31, 2026
</>
),
},
};
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, FramedIcon } from '@rocket.chat/fuselage';
import { FramedIcon, Stack, Text } from '@rocket.chat/fuselage';
import type { Keys } from '@rocket.chat/icons';
import type { ReactNode } from 'react';

Expand All @@ -12,10 +12,12 @@ export type VersionCardActionItemProps = VersionActionItem;

const VersionCardActionItem = ({ icon, label, danger }: VersionCardActionItemProps) => {
return (
<Box display='flex' alignItems='center' color={danger ? 'danger' : 'secondary-info'} fontScale='p2m'>
<Stack direction='row' align='center' gap='x12'>
<FramedIcon danger={danger} icon={icon} />
<Box marginInlineStart={12}>{label}</Box>
</Box>
<Text color={danger ? 'danger' : 'secondary-info'} fontScale='p2m'>
{label}
</Text>
</Stack>
);
};

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Card } from '@rocket.chat/fuselage';
import type { Meta, StoryObj } from '@storybook/react';

import { VersionCardSkeleton } from './VersionCardSkeleton';

export default {
component: VersionCardSkeleton,
parameters: {
layout: 'padded',
},
decorators: [
(Story) => (
<Card>
<Story />
</Card>
),
],
} satisfies Meta<typeof VersionCardSkeleton>;

export const Default: StoryObj<typeof VersionCardSkeleton> = {};
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
import { Box, Skeleton } from '@rocket.chat/fuselage';
import { Skeleton } from '@rocket.chat/fuselage';

import VersionCardSkeletonRow from '../layout/VersionCardSkeletonRow';

export const VersionCardSkeleton = () => {
return (
<>
<Skeleton height={28} width={160} />
<Skeleton height={28} width={150} />
<Box display='flex' width={160} height={28} alignItems='center' gap={12}>
<VersionCardSkeletonRow width={160}>
<Skeleton height={38} width={28} />
<Skeleton height={20} width={120} />
</Box>
<Box display='flex' width={180} height={28} alignItems='center' gap={12}>
</VersionCardSkeletonRow>
<VersionCardSkeletonRow width={180}>
<Skeleton height={38} width={28} />
<Skeleton height={20} width={140} />
</Box>
<Box display='flex' width={160} height={28} alignItems='center' gap={12}>
</VersionCardSkeletonRow>
<VersionCardSkeletonRow width={160}>
<Skeleton height={38} width={28} />
<Skeleton height={20} width={120} />
</Box>
</VersionCardSkeletonRow>
<Skeleton height={50} width={160} />
</>
);
Expand Down
Loading
Loading