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 0000000000..5238fb2c03
--- /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 (
+
+
+
+
+
+
+
+
+
+ {formatMessage({
+ id: 'Settings.roles.list.header.name',
+ defaultMessage: 'Name',
+ })}
+
+ |
+
+
+ {formatMessage({
+ id: 'Settings.roles.list.header.description',
+ defaultMessage: 'description',
+ })}
+
+ |
+
+
+
+ {data.plugins.map(({ name, displayName, description }) => {
+ return (
+
+
+
+ {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 3d4485a04f..46ec374ddb 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 0000000000..ca74c6f07a
--- /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 };