Skip to content

Commit eac3c1c

Browse files
olgennolgenn
authored
[Bug]: Empty spaces on User Details page #2745 (#2815)
1 parent 6748fd3 commit eac3c1c

File tree

5 files changed

+70
-61
lines changed

5 files changed

+70
-61
lines changed

‎frontend/src/pages/User/Details/Billing/index.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { useParams, useSearchParams } from 'react-router-dom';
44

5-
import { Box, Button, Container, Header, Hotspot, Loader, Modal, SpaceBetween } from 'components';
5+
import { Box, Button, Header, Hotspot, Loader, Modal, SpaceBetween } from 'components';
66
import { PermissionGuard } from 'components/PermissionGuard';
77
import { HotspotIds } from 'layouts/AppLayout/TutorialPanel/constants';
88

@@ -102,7 +102,9 @@ export const Billing: React.FC = () => {
102102

103103
return (
104104
<SpaceBetween size="l">
105-
<Container header={<Header variant="h2">{t('billing.balance')}</Header>}>
105+
<div>
106+
<Header variant="h2">{t('billing.balance')}</Header>
107+
106108
{isLoading && <Loader />}
107109

108110
{data && (
@@ -126,7 +128,7 @@ export const Billing: React.FC = () => {
126128
</SpaceBetween>
127129
</SpaceBetween>
128130
)}
129-
</Container>
131+
</div>
130132

131133
<Payments
132134
payments={data?.billing_history ?? []}

‎frontend/src/pages/User/Details/Payments/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export const Payments: React.FC<IProps> = ({ payments, emptyMessageContent, isLo
5454
<Table
5555
{...collectionProps}
5656
columnDefinitions={columns}
57+
variant="borderless"
5758
items={items}
5859
loading={isLoading}
5960
loadingText={t('common.loading')}

‎frontend/src/pages/User/Details/Projects/index.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import React, { useMemo } from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { useParams } from 'react-router-dom';
44

5-
import { ListEmptyMessage, NavigateLink, Pagination, Table } from 'components';
5+
import {
6+
ListEmptyMessage,
7+
NavigateLink,
8+
// Pagination,
9+
Table,
10+
} from 'components';
611

712
import { useBreadcrumbs, useCollection } from 'hooks';
813
import { ROUTES } from 'routes';
@@ -45,11 +50,15 @@ export const UserProjectList: React.FC = () => {
4550
.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
4651
}, [data]);
4752

48-
const { items, collectionProps, paginationProps } = useCollection(filteredData, {
53+
const {
54+
items,
55+
collectionProps,
56+
// paginationProps
57+
} = useCollection(filteredData, {
4958
filtering: {
5059
empty: renderEmptyMessage(),
5160
},
52-
pagination: { pageSize: 20 },
61+
// pagination: { pageSize: 20 },
5362
selection: {},
5463
});
5564

@@ -66,11 +75,12 @@ export const UserProjectList: React.FC = () => {
6675
return (
6776
<Table
6877
{...collectionProps}
78+
variant="borderless"
6979
columnDefinitions={columns}
7080
items={items}
7181
loading={isLoading || isFetching}
7282
loadingText={t('common.loading')}
73-
pagination={<Pagination {...paginationProps} disabled={isLoading} />}
83+
// pagination={<Pagination {...paginationProps} disabled={isLoading} />}
7484
/>
7585
);
7686
};

‎frontend/src/pages/User/Details/Settings/index.tsx‎

Lines changed: 46 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { useNavigate, useParams } from 'react-router-dom';
44

5-
import { Box, Button, ColumnLayout, Container, Header, Link, Loader, Popover, SpaceBetween, StatusIndicator } from 'components';
5+
import { Box, Button, ColumnLayout, Header, Link, Loader, Popover, SpaceBetween, StatusIndicator } from 'components';
66
import { PermissionGuard } from 'components/PermissionGuard';
77

88
import { useAppSelector, useBreadcrumbs, usePermissionGuard } from 'hooks';
@@ -52,63 +52,59 @@ export const Settings: React.FC = () => {
5252

5353
return (
5454
<div>
55-
<Container
56-
header={
57-
<Header
58-
variant="h2"
59-
actions={
60-
<Button onClick={editUserHandler} disabled={isDisabledUserEditing()}>
61-
{t('common.edit')}
62-
</Button>
63-
}
64-
>
65-
{t('users.account_settings')}
66-
</Header>
55+
<Header
56+
variant="h2"
57+
actions={
58+
<Button onClick={editUserHandler} disabled={isDisabledUserEditing()}>
59+
{t('common.edit')}
60+
</Button>
6761
}
6862
>
69-
{isLoading && <Loader />}
63+
{t('users.account_settings')}
64+
</Header>
7065

71-
{data && (
72-
<ColumnLayout columns={2} variant="text-grid">
73-
<SpaceBetween size="l">
74-
{/*<div>*/}
75-
{/* <Box variant="awsui-key-label">{t('users.user_name')}</Box>*/}
76-
{/* <div>{data.user_name}</div>*/}
77-
{/*</div>*/}
66+
{isLoading && <Loader />}
7867

79-
<div>
80-
<Box variant="awsui-key-label">{t('users.email')}</Box>
81-
<div>{data.email ? <Link href={`mailto:${data.email}`}>{data.email}</Link> : '-'}</div>
82-
</div>
68+
{data && (
69+
<ColumnLayout columns={2} variant="text-grid">
70+
<SpaceBetween size="l">
71+
{/*<div>*/}
72+
{/* <Box variant="awsui-key-label">{t('users.user_name')}</Box>*/}
73+
{/* <div>{data.user_name}</div>*/}
74+
{/*</div>*/}
8375

84-
<PermissionGuard allowedGlobalRoles={[GlobalUserRole.ADMIN]}>
85-
<div>
86-
<Box variant="awsui-key-label">{t('users.global_role')}</Box>
87-
<div>{t(`roles.${data.global_role}`)}</div>
88-
</div>
89-
</PermissionGuard>
76+
<div>
77+
<Box variant="awsui-key-label">{t('users.email')}</Box>
78+
<div>{data.email ? <Link href={`mailto:${data.email}`}>{data.email}</Link> : '-'}</div>
79+
</div>
9080

81+
<PermissionGuard allowedGlobalRoles={[GlobalUserRole.ADMIN]}>
9182
<div>
92-
<Box variant="awsui-key-label">{t('users.token')}</Box>
93-
94-
<div className={styles.token}>
95-
<Popover
96-
dismissButton={false}
97-
position="top"
98-
size="small"
99-
triggerType="custom"
100-
content={<StatusIndicator type="success">{t('users.token_copied')}</StatusIndicator>}
101-
>
102-
<Button formAction="none" iconName="copy" variant="link" onClick={onCopyToken} />
103-
</Popover>
104-
105-
<div>{data.creds.token}</div>
106-
</div>
83+
<Box variant="awsui-key-label">{t('users.global_role')}</Box>
84+
<div>{t(`roles.${data.global_role}`)}</div>
85+
</div>
86+
</PermissionGuard>
87+
88+
<div>
89+
<Box variant="awsui-key-label">{t('users.token')}</Box>
90+
91+
<div className={styles.token}>
92+
<Popover
93+
dismissButton={false}
94+
position="top"
95+
size="small"
96+
triggerType="custom"
97+
content={<StatusIndicator type="success">{t('users.token_copied')}</StatusIndicator>}
98+
>
99+
<Button formAction="none" iconName="copy" variant="link" onClick={onCopyToken} />
100+
</Popover>
101+
102+
<div>{data.creds.token}</div>
107103
</div>
108-
</SpaceBetween>
109-
</ColumnLayout>
110-
)}
111-
</Container>
104+
</div>
105+
</SpaceBetween>
106+
</ColumnLayout>
107+
)}
112108
</div>
113109
);
114110
};

‎frontend/src/pages/User/Details/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,16 +63,19 @@ export const UserDetails: React.FC = () => {
6363
label: t('users.settings'),
6464
id: UserDetailsTabTypeEnum.SETTINGS,
6565
href: ROUTES.USER.DETAILS.FORMAT(paramUserName),
66+
content: <Outlet />,
6667
},
6768
{
6869
label: t('users.projects'),
6970
id: UserDetailsTabTypeEnum.PROJECTS,
7071
href: ROUTES.USER.PROJECTS.FORMAT(paramUserName),
72+
content: <Outlet />,
7173
},
7274
process.env.UI_VERSION === 'sky' && {
7375
label: t('billing.title'),
7476
id: UserDetailsTabTypeEnum.BILLING,
7577
href: ROUTES.USER.BILLING.LIST.FORMAT(paramUserName),
78+
content: <Outlet />,
7679
},
7780
].filter(Boolean);
7881

@@ -88,10 +91,7 @@ export const UserDetails: React.FC = () => {
8891
}
8992
>
9093
<SpaceBetween size="l">
91-
<div />
92-
<div />
93-
<Tabs withNavigation tabs={tabs} />
94-
<Outlet />
94+
<Tabs variant="container" withNavigation tabs={tabs} />
9595
</SpaceBetween>
9696
</ContentLayout>
9797

0 commit comments

Comments
 (0)