@strapi/plugin-documentation 4.0.0-next.7 → 4.0.1

package/admin/src/components/FieldActionWrapper/index.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { FieldAction } from '@strapi/design-system/Field';
+
+const FieldActionWrapper = styled(FieldAction)`
+  svg {
+    height: 1rem;
+    width: 1rem;
+    path {
+      fill: ${({ theme }) => theme.colors.neutral600};
+    }
+  }
+`;
+
+export default FieldActionWrapper;

package/admin/src/components/PluginIcon/index.js

@@ -0,0 +1,12 @@
+/**
+ *
+ * PluginIcon
+ *
+ */
+
+import React from 'react';
+import Information from '@strapi/icons/Information';
+
+const PluginIcon = () => <Information />;
+
+export default PluginIcon;

package/admin/src/index.js

@@ -6,39 +6,54 @@
 // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
 import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
+import PluginIcon from './components/PluginIcon';
 import pluginPermissions from './permissions';
 import pluginId from './pluginId';
-import pluginLogo from './assets/images/logo.svg';
-import App from './pages/App';
 
-const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
-const icon = pluginPkg.strapi.icon;
 const name = pluginPkg.strapi.name;
 
 export default {
   register(app) {
     app.addMenuLink({
       to: `/plugins/${pluginId}`,
-      icon,
+      icon: PluginIcon,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
         defaultMessage: 'Documentation',
       },
       permissions: pluginPermissions.main,
-      Component: App,
+      Component: async () => {
+        const component = await import(
+          /* webpackChunkName: "documentation-page" */ './pages/PluginPage'
+        );
+
+        return component;
+      },
     });
 
     app.registerPlugin({
-      description: pluginDescription,
-      icon,
       id: pluginId,
-      isReady: true,
-      isRequired: pluginPkg.strapi.required || false,
       name,
-      pluginLogo,
     });
   },
-  bootstrap() {},
+  bootstrap(app) {
+    app.addSettingsLink('global', {
+      intlLabel: {
+        id: `${pluginId}.plugin.name`,
+        defaultMessage: 'Documentation',
+      },
+      id: 'documentation',
+      to: `/settings/${pluginId}`,
+      Component: async () => {
+        const component = await import(
+          /* webpackChunkName: "documentation-settings" */ './pages/SettingsPage'
+        );
+
+        return component;
+      },
+      permissions: pluginPermissions.main,
+    });
+  },
   async registerTrads({ locales }) {
     const importedTrads = await Promise.all(
       locales.map(locale => {

package/admin/src/pages/PluginPage/index.js

@@ -0,0 +1,199 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+import React, { useState } from 'react';
+import { useIntl } from 'react-intl';
+import {
+  CheckPermissions,
+  ConfirmDialog,
+  LoadingIndicatorPage,
+  stopPropagation,
+  EmptyStateLayout,
+  useFocusWhenNavigate,
+} from '@strapi/helper-plugin';
+import { Helmet } from 'react-helmet';
+import { Button } from '@strapi/design-system/Button';
+import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
+import { Main } from '@strapi/design-system/Main';
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Typography } from '@strapi/design-system/Typography';
+import { Flex } from '@strapi/design-system/Flex';
+import { Table, Tr, Thead, Th, Tbody, Td } from '@strapi/design-system/Table';
+
+import Trash from '@strapi/icons/Trash';
+import Show from '@strapi/icons/Eye';
+import Reload from '@strapi/icons/Refresh';
+
+import permissions from '../../permissions';
+import { getTrad } from '../../utils';
+import openWithNewTab from '../../utils/openWithNewTab';
+import useReactQuery from '../utils/useReactQuery';
+
+const PluginPage = () => {
+  useFocusWhenNavigate();
+  const { formatMessage } = useIntl();
+  const { data, isLoading, deleteMutation, regenerateDocMutation } = useReactQuery();
+  const [showConfirmDelete, setShowConfirmDelete] = useState(false);
+  const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState(false);
+  const [versionToDelete, setVersionToDelete] = useState();
+
+  const colCount = 4;
+  const rowCount = (data?.docVersions?.length || 0) + 1;
+
+  const openDocVersion = () => {
+    const slash = data?.prefix.startsWith('/') ? '' : '/';
+    openWithNewTab(`${slash}${data?.prefix}/v${data?.currentVersion}`);
+  };
+
+  const handleRegenerateDoc = version => {
+    regenerateDocMutation.mutate({ version, prefix: data?.prefix });
+  };
+
+  const handleShowConfirmDelete = () => {
+    setShowConfirmDelete(!showConfirmDelete);
+  };
+
+  const handleConfirmDelete = async () => {
+    setIsConfirmButtonLoading(true);
+    await deleteMutation.mutateAsync({ prefix: data?.prefix, version: versionToDelete });
+    setShowConfirmDelete(!showConfirmDelete);
+    setIsConfirmButtonLoading(false);
+  };
+
+  const handleClickDelete = version => {
+    setVersionToDelete(version);
+    setShowConfirmDelete(!showConfirmDelete);
+  };
+
+  const title = formatMessage({
+    id: getTrad('plugin.name'),
+    defaultMessage: 'Documentation',
+  });
+
+  return (
+    <Layout>
+      <Helmet title={title} />
+      <Main aria-busy={isLoading}>
+        <HeaderLayout
+          title={title}
+          subtitle={formatMessage({
+            id: getTrad('pages.PluginPage.header.description'),
+            defaultMessage: 'Configure the documentation plugin',
+          })}
+          primaryAction={
+            //  eslint-disable-next-line
+            <CheckPermissions permissions={permissions.open}>
+              <Button onClick={openDocVersion} startIcon={<Show />}>
+                {formatMessage({
+                  id: getTrad('pages.PluginPage.Button.open'),
+                  defaultMessage: 'Open Documentation',
+                })}
+              </Button>
+            </CheckPermissions>
+          }
+        />
+        <ContentLayout>
+          {isLoading && <LoadingIndicatorPage>Plugin is loading</LoadingIndicatorPage>}
+          {data?.docVersions.length ? (
+            <Table colCount={colCount} rowCount={rowCount}>
+              <Thead>
+                <Tr>
+                  <Th>
+                    <Typography variant="sigma" textColor="neutral600">
+                      {formatMessage({
+                        id: getTrad('pages.PluginPage.table.version'),
+                        defaultMessage: 'Version',
+                      })}
+                    </Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma" textColor="neutral600">
+                      {formatMessage({
+                        id: getTrad('pages.PluginPage.table.generated'),
+                        defaultMessage: 'Last Generated',
+                      })}
+                    </Typography>
+                  </Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {data.docVersions
+                  .sort((a, b) => (a.generatedDate < b.generatedDate ? 1 : -1))
+                  .map(doc => (
+                    <Tr key={doc.version}>
+                      <Td width="50%">
+                        <Typography>{doc.version}</Typography>
+                      </Td>
+                      <Td width="50%">
+                        <Typography>{doc.generatedDate}</Typography>
+                      </Td>
+                      <Td>
+                        <Flex justifyContent="end" {...stopPropagation}>
+                          <IconButton
+                            onClick={openDocVersion}
+                            noBorder
+                            icon={<Show />}
+                            label={formatMessage(
+                              {
+                                id: getTrad('pages.PluginPage.table.icon.show'),
+                                defaultMessage: 'Open {target}',
+                              },
+                              { target: `${doc.version}` }
+                            )}
+                          />
+                          <CheckPermissions permissions={permissions.regenerate}>
+                            <IconButton
+                              onClick={() => handleRegenerateDoc(doc.version)}
+                              noBorder
+                              icon={<Reload />}
+                              label={formatMessage(
+                                {
+                                  id: getTrad('pages.PluginPage.table.icon.regenerate'),
+                                  defaultMessage: 'Regenerate {target}',
+                                },
+                                { target: `${doc.version}` }
+                              )}
+                            />
+                          </CheckPermissions>
+                          <CheckPermissions permissions={permissions.update}>
+                            {doc.version !== data.currentVersion && (
+                              <IconButton
+                                onClick={() => handleClickDelete(doc.version)}
+                                noBorder
+                                icon={<Trash />}
+                                label={formatMessage(
+                                  {
+                                    id: getTrad('pages.PluginPage.table.icon.delete'),
+                                    defaultMessage: 'Delete {target}',
+                                  },
+                                  { target: `${doc.version}` }
+                                )}
+                              />
+                            )}
+                          </CheckPermissions>
+                        </Flex>
+                      </Td>
+                    </Tr>
+                  ))}
+              </Tbody>
+            </Table>
+          ) : (
+            <EmptyStateLayout />
+          )}
+        </ContentLayout>
+        <ConfirmDialog
+          isConfirmButtonLoading={isConfirmButtonLoading}
+          onConfirm={handleConfirmDelete}
+          onToggleDialog={handleShowConfirmDelete}
+          isOpen={showConfirmDelete}
+        />
+      </Main>
+    </Layout>
+  );
+};
+
+export default PluginPage;