Merge pull request #11607 from strapi/v4/plugins-page-front

Add plugins page

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 (
+      <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: 'Settings.roles.list.header.name',
+                      defaultMessage: 'Name',
+                    })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {formatMessage({
+                      id: 'Settings.roles.list.header.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;

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 { CheckPagePermissions } 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 adminPermissions from '../../permissions';
+import Plugins from './Plugins';
 
 const InstalledPluginsPage = () => {
-  const { formatMessage } = useIntl();
-
   return (
     <CheckPagePermissions permissions={adminPermissions.marketplace.main}>
-      <Layout>
+      <Plugins />
-        <Main>
-          <HeaderLayout
-            title={formatMessage({
-              id: 'app.components.ListPluginsPage.helmet.title',
-              defaultMessage: 'List plugins',
-            })}
-          />
-          <ContentLayout>
-            <NoContent
-              content={{
-                id: 'coming.soon',
-                defaultMessage:
-                  'This content is currently under construction and will be back in a few weeks!',
-              }}
-            />
-          </ContentLayout>
-        </Main>
-      </Layout>
     </CheckPagePermissions>
   );
 };

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 };