Skip to content

Commit 4af7dd4

Browse files
avatusgithub-actions
avatus
authored and
github-actions
committed
Move DeviceTrust EmptyList to OSS
This takes the empty list components from e and moves them to OSS. The main difference is the different CTAs and buttons now displayed in oss v e. The empty list itself is unchanged, only moved
1 parent c0bd290 commit 4af7dd4

File tree

5 files changed

+632
-148
lines changed

5 files changed

+632
-148
lines changed

‎web/packages/teleport/src/DeviceTrust/DeviceList/DeviceList.tsx

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/**
2+
* Teleport
3+
* Copyright (C) 2024 Gravitational, Inc.
4+
*
5+
* This program is free software: you can redistribute it and/or modify
6+
* it under the terms of the GNU Affero General Public License as published by
7+
* the Free Software Foundation, either version 3 of the License, or
8+
* (at your option) any later version.
9+
*
10+
* This program is distributed in the hope that it will be useful,
11+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
* GNU Affero General Public License for more details.
14+
*
15+
* You should have received a copy of the GNU Affero General Public License
16+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
17+
*/
18+
19+
import styled from 'styled-components';
20+
21+
import Box from 'design/Box';
22+
import Table, { Cell } from 'design/DataTable';
23+
import { ResourceIcon, ResourceIconName } from 'design/ResourceIcon';
24+
import { P2 } from 'design/Text';
25+
26+
import {
27+
DeviceListProps,
28+
TrustedDeviceOSType,
29+
} from 'teleport/DeviceTrust/types';
30+
31+
export const DeviceList = ({
32+
items = [],
33+
pageSize = 50,
34+
pagerPosition = null,
35+
fetchStatus = '',
36+
fetchData,
37+
}: DeviceListProps) => {
38+
return (
39+
<Table
40+
data={items}
41+
columns={[
42+
{
43+
key: 'osType',
44+
headerText: 'OS Type',
45+
render: ({ osType }) => <IconCell osType={osType} />,
46+
},
47+
{
48+
key: 'assetTag',
49+
headerText: 'Asset Tag',
50+
},
51+
{
52+
key: 'enrollStatus',
53+
headerText: 'Enroll Status',
54+
render: ({ enrollStatus }) => (
55+
<EnrollmentStatusCell status={enrollStatus} />
56+
),
57+
},
58+
{
59+
key: 'owner',
60+
headerText: 'Owner',
61+
},
62+
]}
63+
emptyText="No Devices Found"
64+
pagination={{ pageSize, pagerPosition }}
65+
fetching={{ onFetchMore: fetchData, fetchStatus }}
66+
isSearchable
67+
/>
68+
);
69+
};
70+
71+
const EnrollmentStatusCell = ({ status }: { status: string }) => {
72+
const enrolled = status === 'enrolled';
73+
return (
74+
<Cell
75+
align="left"
76+
css={`
77+
display: flex;
78+
align-items: center;
79+
`}
80+
>
81+
<EnrollmentIcon enrolled={enrolled} />
82+
<P2 color={enrolled ? 'success.main' : 'error.main'}>{status}</P2>
83+
</Cell>
84+
);
85+
};
86+
87+
export const IconCell = ({ osType }: { osType: TrustedDeviceOSType }) => {
88+
let iconName: ResourceIconName;
89+
switch (osType) {
90+
case 'Windows':
91+
iconName = 'microsoft';
92+
break;
93+
case 'Linux':
94+
iconName = 'linux';
95+
break;
96+
case 'macOS':
97+
iconName = 'apple';
98+
break;
99+
}
100+
return (
101+
<Cell align="left" style={{ display: 'flex', alignItems: 'center' }}>
102+
<ResourceIcon name={iconName} width="14px" mr={3} />
103+
{osType}
104+
</Cell>
105+
);
106+
};
107+
108+
const EnrollmentIcon = styled(Box)<{ enrolled: boolean }>`
109+
width: 12px;
110+
height: 12px;
111+
margin-right: ${p => p.theme.space[1]}px;
112+
border-radius: 50%;
113+
background-color: ${p =>
114+
p.enrolled ? p.theme.colors.success.main : p.theme.colors.error.main};
115+
};
116+
`;

‎web/packages/teleport/src/DeviceTrust/DeviceList/index.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* Teleport
3+
* Copyright (C) 2024 Gravitational, Inc.
4+
*
5+
* This program is free software: you can redistribute it and/or modify
6+
* it under the terms of the GNU Affero General Public License as published by
7+
* the Free Software Foundation, either version 3 of the License, or
8+
* (at your option) any later version.
9+
*
10+
* This program is distributed in the hope that it will be useful,
11+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
* GNU Affero General Public License for more details.
14+
*
15+
* You should have received a copy of the GNU Affero General Public License
16+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
17+
*/
18+
19+
export { DeviceList } from './DeviceList';

‎web/packages/teleport/src/DeviceTrust/DeviceTrustLocked.tsx

+5-147
Original file line numberDiff line numberDiff line change
@@ -16,160 +16,18 @@
1616
* along with this program. If not, see <http://www.gnu.org/licenses/>.
1717
*/
1818

19-
import styled from 'styled-components';
19+
import { Box } from 'design';
2020

21-
import { Box, Flex, Link } from 'design';
22-
import Table, { Cell } from 'design/DataTable';
23-
import { Apple, Linux, Lock, Windows } from 'design/Icon';
24-
import { IconCircle } from 'design/Icon/IconCircle';
25-
import { P } from 'design/Text/Text';
21+
import { FeatureBox } from 'teleport/components/Layout';
2622

27-
import { ButtonLockedFeature } from 'teleport/components/ButtonLockedFeature';
28-
import {
29-
FeatureBox,
30-
FeatureHeader,
31-
FeatureHeaderTitle,
32-
} from 'teleport/components/Layout';
33-
import {
34-
DeviceListProps,
35-
TrustedDeviceOSType,
36-
} from 'teleport/DeviceTrust/types';
37-
import { CtaEvent } from 'teleport/services/userEvent';
23+
import { EmptyList } from './EmptyList';
3824

3925
export function DeviceTrustLocked() {
4026
return (
4127
<FeatureBox>
42-
<FeatureHeader>
43-
<FeatureHeaderTitle>Trusted Devices</FeatureHeaderTitle>
44-
</FeatureHeader>
45-
<Box
46-
mr="6"
47-
mb="4"
48-
style={{
49-
filter: 'blur(2px)',
50-
pointerEvents: 'none',
51-
userSelect: 'none',
52-
height: '100px',
53-
}}
54-
>
55-
<FakeDeviceList
56-
items={generateFakeItems(15)}
57-
fetchData={() => null}
58-
fetchStatus={''}
59-
/>
28+
<Box>
29+
<EmptyList />
6030
</Box>
61-
<StyledMessageContainer>
62-
<Box p="3" borderRadius="50%">
63-
<IconCircle Icon={Lock} size={64} />
64-
</Box>
65-
<P textAlign="justify">
66-
Device Trust enables trusted and authenticated device access. When
67-
resources are configured with the Device Trust mode “required”,
68-
Teleport will authenticate the Trusted Device, in addition to
69-
establishing the user's identity and enforcing the necessary roles,
70-
and leaves an audit trail with device information. For more details,
71-
please view{' '}
72-
<Link
73-
href={
74-
'https://goteleport.com/docs/access-controls/device-trust/guide/'
75-
}
76-
target="_blank"
77-
>
78-
Device Trust documentation
79-
</Link>
80-
.
81-
</P>
82-
<Box>
83-
<ButtonLockedFeature event={CtaEvent.CTA_TRUSTED_DEVICES}>
84-
Unlock Device Trust with Teleport Enterprise
85-
</ButtonLockedFeature>
86-
</Box>
87-
</StyledMessageContainer>
8831
</FeatureBox>
8932
);
9033
}
91-
92-
function generateFakeItems(count) {
93-
const items = [];
94-
const osType = ['Windows', 'Linux', 'macOS'];
95-
96-
for (let i = 0; i < count; i++) {
97-
items.push({
98-
id: `id-${i}`,
99-
assetTag: `CLFBDAACC${i}`,
100-
enrollStatus: `enroll-status-${i}`,
101-
osType: osType[i % osType.length],
102-
});
103-
}
104-
105-
return items;
106-
}
107-
108-
const FakeDeviceList = ({
109-
items = [],
110-
pageSize = 20,
111-
fetchStatus = '',
112-
fetchData,
113-
}: DeviceListProps) => {
114-
return (
115-
<Table
116-
data={items}
117-
columns={[
118-
{
119-
key: 'osType',
120-
headerText: 'OS Type',
121-
render: ({ osType }) => <IconCell osType={osType} />,
122-
},
123-
{
124-
key: 'assetTag',
125-
headerText: 'Asset Tag',
126-
},
127-
{
128-
key: 'enrollStatus',
129-
headerText: 'Enroll Status',
130-
},
131-
]}
132-
emptyText="No Devices Found"
133-
pagination={{ pageSize }}
134-
fetching={{ onFetchMore: fetchData, fetchStatus }}
135-
/>
136-
);
137-
};
138-
139-
const IconCell = ({ osType }: { osType: TrustedDeviceOSType }) => {
140-
let icon;
141-
switch (osType) {
142-
case 'Windows':
143-
icon = <Windows size="small" mr={1} />;
144-
break;
145-
case 'Linux':
146-
icon = <Linux size="small" mr={1} />;
147-
break;
148-
default:
149-
icon = <Apple size="small" mr={1} />;
150-
}
151-
return (
152-
<Cell align="left" style={{ display: 'flex' }}>
153-
{icon} {osType}
154-
</Cell>
155-
);
156-
};
157-
158-
const StyledMessageContainer = styled(Flex)`
159-
position: relative;
160-
top: 30%;
161-
left: 50%;
162-
transform: translate(-50%, -50%);
163-
background-color: ${({ theme }) => theme.colors.levels.elevated};
164-
flex-direction: column;
165-
justify-content: center;
166-
align-items: center;
167-
padding: 24px;
168-
gap: 24px;
169-
width: 600px;
170-
box-shadow:
171-
0 5px 5px -3px rgba(0, 0, 0, 0.2),
172-
0 8px 10px 1px rgba(0, 0, 0, 0.14),
173-
0 3px 14px 2px rgba(0, 0, 0, 0.12);
174-
border-radius: 8px;
175-
`;

0 commit comments

Comments
 (0)