Skip to content
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

feat: Workspace/subscription ux #34057

Merged
merged 19 commits into from
Dec 20, 2024
Merged

feat: Workspace/subscription ux #34057

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
3177e77
refactor: :recycle: Change WorkspaceCardSection header titles to h4
rique223 Nov 25, 2024
e030929
refactor: :recycle: Centralize seats and Monthly Active Contracts con…
rique223 Nov 25, 2024
53e3c41
refactor: :recycle: Centralize active sessions and Active sessions pe…
rique223 Nov 25, 2024
fa0349f
refactor: :recycle: Adjust spacing for PlanCardCommunity and AppsUsag…
rique223 Nov 25, 2024
d7e697e
wip: paliative for card min-height
rique223 Nov 25, 2024
c9d5136
Add proper minHeight and remove unnecessary margin
rique223 Nov 27, 2024
57ad4f9
refactor: :recycle: Paliative for workspace spacing
rique223 Nov 28, 2024
f5335f8
Remove unnecessary minHeight
rique223 Nov 28, 2024
8ec1530
feat: :sparkles: Componentize new WorkspaceCardSection title
rique223 Nov 28, 2024
5338758
Remove unnecessary artifacts
rique223 Nov 28, 2024
f4cc10e
fix: :bug: Version card background image responsivity
rique223 Dec 2, 2024
29c2b6c
Create sour-roses-invite.md
rique223 Dec 3, 2024
d48a6b5
Review
rique223 Dec 4, 2024
6012ae8
Merge branch 'refactor/workspace-subscription-ux' of github.com:Rocke…
rique223 Dec 4, 2024
cfd8d6c
feat: :sparkles: Componentize FeatureUsageCard body
rique223 Dec 5, 2024
9566a7f
Remove unnecessary props
rique223 Dec 16, 2024
43fd719
refactor: :recycle: Remove unnecessary titleToContentGap prop
rique223 Dec 16, 2024
4ecaddd
Merge branch 'develop' into refactor/workspace-subscription-ux
kodiakhq[bot] Dec 19, 2024
b519f1c
Merge branch 'develop' into refactor/workspace-subscription-ux
kodiakhq[bot] Dec 20, 2024
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
15 changes: 8 additions & 7 deletions apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,16 +130,17 @@ const SubscriptionPage = () => {
)}
<Box marginBlock='none' marginInline='auto' width='full' color='default'>
<Grid m={0}>
<Grid.Item lg={4} xs={4} p={8}>
<Grid.Item lg={4} xs={4} p={8} minHeight={244}>
rique223 marked this conversation as resolved.
Show resolved Hide resolved
{license && <PlanCard licenseInformation={license.information} licenseLimits={{ activeUsers: seatsLimit }} />}
{!license && <PlanCardCommunity />}
</Grid.Item>
<Grid.Item lg={8} xs={4} p={8}>

<Grid.Item lg={8} xs={4} p={8} minHeight={244}>
<FeaturesCard activeModules={activeModules} isEnterprise={isEnterprise} />
</Grid.Item>

{seatsLimit.value !== undefined && (
<Grid.Item lg={6} xs={4} p={8}>
<Grid.Item lg={6} xs={4} p={8} minHeight={244}>
{seatsLimit.max !== Infinity ? (
<SeatsCard value={seatsLimit.value} max={seatsLimit.max} hideManageSubscription={licensesData?.trial} />
) : (
Expand All @@ -149,7 +150,7 @@ const SubscriptionPage = () => {
)}

{macLimit.value !== undefined && (
<Grid.Item lg={6} xs={4} p={8}>
<Grid.Item lg={6} xs={4} p={8} minHeight={244}>
{macLimit.max !== Infinity ? (
<MACCard max={macLimit.max} value={macLimit.value} hideManageSubscription={licensesData?.trial} />
) : (
Expand All @@ -161,15 +162,15 @@ const SubscriptionPage = () => {
{!license && (
<>
{limits?.marketplaceApps !== undefined && (
<Grid.Item lg={4} xs={4} p={8}>
<Grid.Item lg={4} xs={4} p={8} minHeight={244}>
<AppsUsageCard privateAppsLimit={limits?.privateApps} marketplaceAppsLimit={limits.marketplaceApps} />
</Grid.Item>
)}

<Grid.Item lg={4} xs={4} p={8}>
<Grid.Item lg={4} xs={4} p={8} minHeight={244}>
<ActiveSessionsCard />
</Grid.Item>
<Grid.Item lg={4} xs={4} p={8}>
<Grid.Item lg={4} xs={4} p={8} minHeight={244}>
<ActiveSessionsPeakCard />
</Grid.Item>
</>
Expand Down
13 changes: 11 additions & 2 deletions apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,26 @@ export type CardProps = {
title: string;
infoText?: ReactNode;
upgradeButton?: ReactNode;
isHorizontallyCenteredOnly?: boolean;
};

const FeatureUsageCard = ({ children, card }: FeatureUsageCardProps): ReactElement => {
const { title, infoText, upgradeButton } = card;
const { title, infoText, upgradeButton, isHorizontallyCenteredOnly } = card;

return (
<Card height='full'>
<CardTitle>
{title} {infoText && <InfoTextIconModal title={title} infoText={infoText} />}
</CardTitle>
<CardBody>
<Box h='full' w='full'>
<Box
h='full'
w='full'
display='flex'
alignItems='center'
justifyContent={isHorizontallyCenteredOnly ? 'flex-start' : 'center'}
rique223 marked this conversation as resolved.
Show resolved Hide resolved
flexDirection='column'
>
{children}
</Box>
</CardBody>
Expand Down
5 changes: 3 additions & 2 deletions apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const ActiveSessionsCard = (): ReactElement => {
if (result.isLoading || result.isError) {
return (
<FeatureUsageCard card={card}>
<Skeleton variant='rect' width='x112' height='x112' />
<Skeleton variant='rect' width='x112' height='x224' />
</FeatureUsageCard>
);
}
Expand All @@ -53,9 +53,10 @@ const ActiveSessionsCard = (): ReactElement => {
</UpgradeButton>
),
}),
isHorizontallyCenteredOnly: true,
rique223 marked this conversation as resolved.
Show resolved Hide resolved
}}
>
<Box color='font-secondary-info'>
<Box color='font-secondary-info' textAlign='center'>
<Box fontScale='h1' color={exceedLimit ? 'font-danger' : 'font-default'} mbe={12}>
{used} / {total}
</Box>
Expand Down
3 changes: 2 additions & 1 deletion apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const ActiveSessionsPeakCard = (): ReactElement => {
</UpgradeButton>
),
}),
isHorizontallyCenteredOnly: true,
rique223 marked this conversation as resolved.
Show resolved Hide resolved
};

if (isLoading || maxMonthlyPeakConnections === undefined) {
Expand All @@ -43,7 +44,7 @@ const ActiveSessionsPeakCard = (): ReactElement => {

return (
<FeatureUsageCard card={card}>
<Box color='font-secondary-info'>
<Box color='font-secondary-info' textAlign='center'>
<Box fontScale='h1' color={exceedLimit ? 'font-danger' : 'font-default'} mbe={12}>
{used} / {total}
</Box>
Expand Down
3 changes: 2 additions & 1 deletion apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const AppsUsageCard = ({ privateAppsLimit, marketplaceAppsLimit }: AppsUsageCard
// FIXME: not accessible enough
return (
<FeatureUsageCard card={{ title: t('Apps') }}>
<Skeleton variant='rect' width='x112' height='x112' role='presentation' />
<Skeleton variant='rect' width='x112' height='x224' role='presentation' />
</FeatureUsageCard>
);
}
Expand All @@ -49,6 +49,7 @@ const AppsUsageCard = ({ privateAppsLimit, marketplaceAppsLimit }: AppsUsageCard
components={{ 1: <ExternalLink to={PRICING_LINK}>premium plans</ExternalLink> }}
/>
),
isHorizontallyCenteredOnly: true,
rique223 marked this conversation as resolved.
Show resolved Hide resolved

...(marketplaceAppsAboveWarning && {
upgradeButton: (
Expand Down
2 changes: 1 addition & 1 deletion ...r/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCardSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const AppsUsageCardSection = ({ title, tip, appsCount, appsMaxCount, warningThre
const labelId = useUniqueId();

return (
<Box fontScale='c1' mb={12} title={tip}>
<Box fontScale='c1' mb={12} title={tip} display='flex' flexDirection='column' width='100%'>
<Box display='flex' flexGrow='1' justifyContent='space-between' mbe={4}>
<div id={labelId}>{title}</div>

Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/admin/subscription/components/cards/CountSeatsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const CountSeatsCard = ({ activeUsers }: { activeUsers: number }): ReactElement
infoText: t('CountSeats_InfoText'),
}}
>
<Box fontScale='h1'>
<Box fontScale='h1' display='flex' alignItems='center' justifyContent='center'>
<Icon color='font-annotation' name='user' size={40} mie={4} />
{activeUsers}
</Box>
Expand Down
10 changes: 5 additions & 5 deletions apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardCommunity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Card, CardBody, CardRow, Icon } from '@rocket.chat/fuselage';
import { Box, Card, CardBody, Icon } from '@rocket.chat/fuselage';
import type { ReactElement } from 'react';
import React from 'react';
import { useTranslation } from 'react-i18next';
Expand All @@ -12,12 +12,12 @@ const PlanCardCommunity = (): ReactElement => {
<Card height='full'>
<PlanCardHeader name={t('Community')} />
<CardBody flexDirection='column'>
<CardRow>
<Box display='flex' flexDirection='row' alignItems='center'>
<Icon name='card' size={24} mie={12} /> {t('free_per_month_user')}
rique223 marked this conversation as resolved.
Show resolved Hide resolved
</CardRow>
<CardRow>
</Box>
<Box display='flex' flexDirection='row' alignItems='center'>
<Icon name='cloud-plus' size={24} mie={12} /> {t('Self_managed_hosting')}
</CardRow>
</Box>
</CardBody>
</Card>
);
Expand Down
75 changes: 50 additions & 25 deletions apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { IWorkspaceInfo, IStats } from '@rocket.chat/core-typings';
import { Button, Card, CardControls } from '@rocket.chat/fuselage';
import { Button, Card, CardBody, CardControls, Margins } from '@rocket.chat/fuselage';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import type { IInstance } from '@rocket.chat/rest-typings';
import { useSetModal } from '@rocket.chat/ui-contexts';
Expand All @@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
import WorkspaceCardSection from '../components/WorkspaceCardSection';
import InstancesModal from './components/InstancesModal';
import WorkspaceCardSectionTitle from '../components/WorkspaceCardSectionTitle';

type DeploymentCardProps = {
serverInfo: IWorkspaceInfo;
Expand All @@ -30,35 +31,59 @@ const DeploymentCard = ({ serverInfo: { info, cloudWorkspaceId }, statistics, in

return (
<Card data-qa-id='deployment-card' height='full'>
<WorkspaceCardSection title={t('Deployment')} />
<WorkspaceCardSection title={t('Version')} body={statistics.version} />
<WorkspaceCardSection title={t('Deployment_ID')} body={statistics.uniqueId} />
<CardBody flexDirection='column'>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Deployment')} variant='h4' titleToContentGap={20} />
</WorkspaceCardSection>
<Margins blockEnd={8}>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Version')} />
{statistics.version}
</WorkspaceCardSection>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Deployment_ID')} />
{statistics.uniqueId}
</WorkspaceCardSection>

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

{appsEngineVersion && <WorkspaceCardSection title={t('Apps_Engine_Version')} body={appsEngineVersion} />}
<WorkspaceCardSection title={t('Node_version')} body={statistics.process.nodeVersion} />
<WorkspaceCardSection
title={t('DB_Migration')}
body={`${statistics.migration.version} (${formatDateAndTime(statistics.migration.lockedAt)})`}
/>
<WorkspaceCardSection
title={t('MongoDB')}
body={`${statistics.mongoVersion} / ${statistics.mongoStorageEngine} ${
!statistics.msEnabled ? `(oplog ${statistics.oplogEnabled ? t('Enabled') : t('Disabled')})` : ''
}`}
/>
<WorkspaceCardSection
title={t('Commit_details')}
body={
<>
{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')} />
{`${statistics.migration.version} (${formatDateAndTime(statistics.migration.lockedAt)})`}
</WorkspaceCardSection>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('MongoDB')} />
{`${statistics.mongoVersion} / ${statistics.mongoStorageEngine} ${
!statistics.msEnabled ? `(oplog ${statistics.oplogEnabled ? t('Enabled') : t('Disabled')})` : ''
}`}
</WorkspaceCardSection>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Commit_details')} />
{t('github_HEAD')}: ({commit.hash ? commit.hash.slice(0, 9) : ''}) <br />
{t('Branch')}: {commit.branch} <br />
{commit.subject}
</>
}
/>
<WorkspaceCardSection title={t('PID')} body={statistics.process.pid} />
</WorkspaceCardSection>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('PID')} />
{statistics.process.pid}
</WorkspaceCardSection>
</Margins>
</CardBody>

{!!instances.length && (
<CardControls>
Expand Down
66 changes: 28 additions & 38 deletions apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import React, { memo } from 'react';
import { useTranslation } from 'react-i18next';

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

type MessagesRoomsCardProps = {
Expand All @@ -16,45 +17,34 @@ const MessagesRoomsCard = ({ statistics }: MessagesRoomsCardProps): ReactElement

return (
<Card height='full'>
<WorkspaceCardSection
title={t('Total_rooms')}
body={
<>
<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} />
<WorkspaceCardTextSeparator label={t('Discussions')} icon='discussion' value={statistics.totalDiscussions} />
<WorkspaceCardTextSeparator label={t('Omnichannel')} icon='headset' value={statistics.totalLivechat} />
<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalRooms} />
</>
}
/>
<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Total_rooms')} variant='h4' titleToContentGap={20} />

<WorkspaceCardSection
title={t('Messages')}
body={
<>
<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Channel')} icon='hash' value={statistics.totalChannelMessages} />
<WorkspaceCardTextSeparator
label={t('Stats_Total_Messages_PrivateGroup')}
icon='lock'
value={statistics.totalPrivateGroupMessages}
/>
<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Direct')} icon='balloon' value={statistics.totalDirectMessages} />
<WorkspaceCardTextSeparator
label={t('Stats_Total_Messages_Discussions')}
icon='discussion'
value={statistics.totalDiscussionsMessages}
/>
<WorkspaceCardTextSeparator
label={t('Stats_Total_Messages_Livechat')}
icon='headset'
value={statistics.totalLivechatMessages}
/>
<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalMessages} />
</>
}
/>
<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} />
<WorkspaceCardTextSeparator label={t('Discussions')} icon='discussion' value={statistics.totalDiscussions} />
<WorkspaceCardTextSeparator label={t('Omnichannel')} icon='headset' value={statistics.totalLivechat} />
<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalRooms} />
</WorkspaceCardSection>

<WorkspaceCardSection>
<WorkspaceCardSectionTitle title={t('Messages')} variant='h4' titleToContentGap={20} />
<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Channel')} icon='hash' value={statistics.totalChannelMessages} />
<WorkspaceCardTextSeparator
label={t('Stats_Total_Messages_PrivateGroup')}
icon='lock'
value={statistics.totalPrivateGroupMessages}
/>
<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Direct')} icon='balloon' value={statistics.totalDirectMessages} />
<WorkspaceCardTextSeparator
label={t('Stats_Total_Messages_Discussions')}
icon='discussion'
value={statistics.totalDiscussionsMessages}
/>
<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Livechat')} icon='headset' value={statistics.totalLivechatMessages} />
<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalMessages} />
</WorkspaceCardSection>
</Card>
);
};
Expand Down
Loading
Loading