-
-
Notifications
You must be signed in to change notification settings - Fork 7.6k
/
Plugins.js
111 lines (103 loc) 路 3.25 KB
/
Plugins.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React from 'react';
import { useQuery } from 'react-query';
import { useIntl } from 'react-intl';
import { LoadingIndicatorPage, useNotification, useFocusWhenNavigate } from '@strapi/helper-plugin';
import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
import { Main } from '@strapi/design-system/Main';
import { useNotifyAT } from '@strapi/design-system/LiveRegions';
import { Typography } from '@strapi/design-system/Typography';
import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table';
import { fetchPlugins } from './utils/api';
const Plugins = () => {
const { formatMessage } = useIntl();
useFocusWhenNavigate();
const { notifyStatus } = useNotifyAT();
const toggleNotification = useNotification();
const title = formatMessage({
id: 'global.plugins',
defaultMessage: 'Plugins',
});
const notifyLoad = () => {
notifyStatus(
formatMessage(
{
id: 'app.utils.notify.data-loaded',
defaultMessage: 'The {target} has loaded',
},
{ target: title }
)
);
};
const { status, data } = useQuery('list-plugins', () => fetchPlugins(notifyLoad), {
onError: () => {
toggleNotification({
type: 'warning',
message: { id: 'notification.error', defaultMessage: 'An error occured' },
});
},
});
const isLoading = status !== 'success' && status !== 'error';
if (isLoading) {
return (
<Layout>
<Main aria-busy>
<LoadingIndicatorPage />
</Main>
</Layout>
);
}
return (
<Layout>
<Main>
<HeaderLayout
title={title}
subtitle={formatMessage({
id: 'app.components.ListPluginsPage.description',
defaultMessage: 'List of the installed plugins in the project.',
})}
/>
<ContentLayout>
<Table colCount={2} rowCount={data?.plugins.length + 1}>
<Thead>
<Tr>
<Th>
<Typography variant="sigma" textColor="neutral600">
{formatMessage({
id: 'global.name',
defaultMessage: 'Name',
})}
</Typography>
</Th>
<Th>
<Typography variant="sigma" textColor="neutral600">
{formatMessage({
id: 'global.description',
defaultMessage: 'description',
})}
</Typography>
</Th>
</Tr>
</Thead>
<Tbody>
{data.plugins.map(({ name, displayName, description }) => {
return (
<Tr key={name}>
<Td>
<Typography textColor="neutral800" variant="omega" fontWeight="bold">
{displayName}
</Typography>
</Td>
<Td>
<Typography textColor="neutral800">{description}</Typography>
</Td>
</Tr>
);
})}
</Tbody>
</Table>
</ContentLayout>
</Main>
</Layout>
);
};
export default Plugins;