From ed20b012060f72843c5ee2fed965dc70e5c6e5eb Mon Sep 17 00:00:00 2001 From: soupette Date: Wed, 17 Nov 2021 15:08:43 +0100 Subject: [PATCH] Add plugins page Signed-off-by: soupette --- .../src/pages/InstalledPluginsPage/Plugins.js | 111 ++++++++++++++++++ .../src/pages/InstalledPluginsPage/index.js | 29 +---- .../pages/InstalledPluginsPage/utils/api.js | 11 ++ 3 files changed, 126 insertions(+), 25 deletions(-) create mode 100644 packages/core/admin/admin/src/pages/InstalledPluginsPage/Plugins.js create mode 100644 packages/core/admin/admin/src/pages/InstalledPluginsPage/utils/api.js diff --git a/packages/core/admin/admin/src/pages/InstalledPluginsPage/Plugins.js b/packages/core/admin/admin/src/pages/InstalledPluginsPage/Plugins.js new file mode 100644 index 00000000000..5238fb2c031 --- /dev/null +++ b/packages/core/admin/admin/src/pages/InstalledPluginsPage/Plugins.js @@ -0,0 +1,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: 'app.components.ListPluginsPage.title', + 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 ( + +
+ +
+
+ ); + } + + return ( + +
+ + + + + + + + + + + {data.plugins.map(({ name, displayName, description }) => { + return ( + + + + + ); + })} + +
+ + {formatMessage({ + id: 'Settings.roles.list.header.name', + defaultMessage: 'Name', + })} + + + + {formatMessage({ + id: 'Settings.roles.list.header.description', + defaultMessage: 'description', + })} + +
+ + {displayName} + + + {description} +
+
+
+
+ ); +}; + +export default Plugins; diff --git a/packages/core/admin/admin/src/pages/InstalledPluginsPage/index.js b/packages/core/admin/admin/src/pages/InstalledPluginsPage/index.js index 3d4485a04fc..46ec374ddb0 100644 --- a/packages/core/admin/admin/src/pages/InstalledPluginsPage/index.js +++ b/packages/core/admin/admin/src/pages/InstalledPluginsPage/index.js @@ -1,34 +1,13 @@ import React from 'react'; -import { CheckPagePermissions, NoContent } from '@strapi/helper-plugin'; -import { useIntl } from 'react-intl'; -import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout'; -import { Main } from '@strapi/design-system/Main'; +import { CheckPagePermissions } from '@strapi/helper-plugin'; + import adminPermissions from '../../permissions'; +import Plugins from './Plugins'; const InstalledPluginsPage = () => { - const { formatMessage } = useIntl(); - return ( - -
- - - - -
-
+
); }; diff --git a/packages/core/admin/admin/src/pages/InstalledPluginsPage/utils/api.js b/packages/core/admin/admin/src/pages/InstalledPluginsPage/utils/api.js new file mode 100644 index 00000000000..ca74c6f07a0 --- /dev/null +++ b/packages/core/admin/admin/src/pages/InstalledPluginsPage/utils/api.js @@ -0,0 +1,11 @@ +import { axiosInstance } from '../../../core/utils'; + +const fetchPlugins = async notify => { + const { data } = await axiosInstance.get('/admin/plugins'); + + notify(); + + return data; +}; + +export { fetchPlugins };