@strapi/plugin-documentation 4.20.5 → 5.0.0-alpha.1

package/admin/src/hooks/useDocumentation.js

@@ -1,13 +1,15 @@
 import { useEffect } from 'react';
 
-import { useFetchClient, useNotification, useAPIErrorHandler } from '@strapi/helper-plugin';
+import { useAPIErrorHandler, useNotification, useFetchClient } from '@strapi/strapi/admin';
+import { useIntl } from 'react-intl';
 import { useMutation, useQuery } from 'react-query';
 
 import pluginId from '../pluginId';
 import getTrad from '../utils/getTrad';
 
 export const useDocumentation = () => {
-  const toggleNotification = useNotification();
+  const { toggleNotification } = useNotification();
+  const { formatMessage } = useIntl();
   const { del, post, put, get } = useFetchClient();
 
   const { formatAPIError } = useAPIErrorHandler();
@@ -24,15 +26,15 @@ export const useDocumentation = () => {
   useEffect(() => {
     if (isError && error) {
       toggleNotification({
-        type: 'warning',
-        message: error ? formatAPIError(error) : { id: 'notification.error' },
+        type: 'danger',
+        message: error ? formatAPIError(error) : formatMessage({ id: 'notification.error' }),
       });
     }
-  }, [isError, error, toggleNotification, formatAPIError]);
+  }, [isError, error, toggleNotification, formatAPIError, formatMessage]);
 
   const handleError = (err) => {
     toggleNotification({
-      type: 'warning',
+      type: 'danger',
       message: formatAPIError(err),
     });
   };
@@ -41,7 +43,7 @@ export const useDocumentation = () => {
     refetch();
     toggleNotification({
       type,
-      message: { id: getTrad(tradId), defaultMessage },
+      message: formatMessage({ id: getTrad(tradId), defaultMessage }),
     });
   };
 

package/admin/src/index.js

@@ -1,34 +1,24 @@
-// NOTE TO PLUGINS DEVELOPERS:
-// If you modify this file by adding new options to the plugin entry point
-// Here's the file: strapi/docs/3.0.0-beta.x/plugin-development/frontend-field-api.md
-// Here's the file: strapi/docs/3.0.0-beta.x/guides/registering-a-field-in-admin.md
-// Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated
-// IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
-import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import { Information } from '@strapi/icons';
 
 import pluginPkg from '../../package.json';
 
 import { PERMISSIONS } from './constants';
 import pluginId from './pluginId';
+import { prefixPluginTranslations } from './utils/prefixPluginTranslations';
 
 const name = pluginPkg.strapi.name;
 
 export default {
   register(app) {
     app.addMenuLink({
-      to: `/plugins/${pluginId}`,
+      to: `plugins/${pluginId}`,
       icon: Information,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
         defaultMessage: 'Documentation',
       },
       permissions: PERMISSIONS.main,
-      async Component() {
-        const component = await import('./pages/PluginPage');
-
-        return component;
-      },
+      Component: () => import('./pages/PluginPage'),
     });
 
     app.registerPlugin({
@@ -43,12 +33,8 @@ export default {
         defaultMessage: 'Documentation',
       },
       id: 'documentation',
-      to: `/settings/${pluginId}`,
-      async Component() {
-        const component = await import('./pages/SettingsPage');
-
-        return component;
-      },
+      to: pluginId,
+      Component: () => import('./pages/SettingsPage'),
       permissions: PERMISSIONS.main,
     });
   },

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

@@ -1,14 +1,13 @@
 import React, { useState } from 'react';
 
+import { ConfirmDialog } from '@strapi/admin/strapi-admin';
 import {
-  Box,
   LinkButton,
   ContentLayout,
   Flex,
   HeaderLayout,
   IconButton,
   Layout,
-  Main,
   Table,
   Tbody,
   Td,
@@ -16,16 +15,11 @@ import {
   Thead,
   Tr,
   Typography,
-} from '@strapi/design-system';
-import {
-  AnErrorOccurred,
-  ConfirmDialog,
   EmptyStateLayout,
-  LoadingIndicatorPage,
-  useFocusWhenNavigate,
-  useRBAC,
-} from '@strapi/helper-plugin';
+} from '@strapi/design-system';
+import { useRBAC } from '@strapi/helper-plugin';
 import { Eye as Show, Refresh as Reload, Trash } from '@strapi/icons';
+import { Page } from '@strapi/strapi/admin';
 import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -35,11 +29,9 @@ import { useDocumentation } from '../../hooks/useDocumentation';
 import { getTrad } from '../../utils';
 
 const PluginPage = () => {
-  useFocusWhenNavigate();
   const { formatMessage } = useIntl();
   const { data, isLoading, isError, remove, regenerate } = useDocumentation();
   const [showConfirmDelete, setShowConfirmDelete] = useState(false);
-  const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState(false);
   const [versionToDelete, setVersionToDelete] = useState();
   const { allowedActions } = useRBAC(PERMISSIONS);
 
@@ -55,10 +47,8 @@ const PluginPage = () => {
   };
 
   const handleConfirmDelete = async () => {
-    setIsConfirmButtonLoading(true);
     await remove.mutateAsync({ prefix: data?.prefix, version: versionToDelete });
     setShowConfirmDelete(!showConfirmDelete);
-    setIsConfirmButtonLoading(false);
   };
 
   const handleClickDelete = (version) => {
@@ -71,22 +61,18 @@ const PluginPage = () => {
     defaultMessage: 'Documentation',
   });
 
+  if (isLoading) {
+    return <Page.Loading />;
+  }
+
   if (isError) {
-    return (
-      <Layout>
-        <ContentLayout>
-          <Box paddingTop={8}>
-            <AnErrorOccurred />
-          </Box>
-        </ContentLayout>
-      </Layout>
-    );
+    return <Page.Error />;
   }
 
   return (
     <Layout>
       <Helmet title={title} />
-      <Main aria-busy={isLoading}>
+      <Page.Main>
         <HeaderLayout
           title={title}
           subtitle={formatMessage({
@@ -107,7 +93,6 @@ const PluginPage = () => {
           }
         />
         <ContentLayout>
-          {isLoading && <LoadingIndicatorPage>Plugin is loading</LoadingIndicatorPage>}
           {data?.docVersions.length ? (
             <Table colCount={colCount} rowCount={rowCount}>
               <Thead>
@@ -198,12 +183,11 @@ const PluginPage = () => {
           )}
         </ContentLayout>
         <ConfirmDialog
-          isConfirmButtonLoading={isConfirmButtonLoading}
           onConfirm={handleConfirmDelete}
-          onToggleDialog={handleShowConfirmDelete}
+          onClose={handleShowConfirmDelete}
           isOpen={showConfirmDelete}
         />
-      </Main>
+      </Page.Main>
     </Layout>
   );
 };

package/admin/src/pages/PluginPage/tests/index.test.jsx

@@ -2,7 +2,8 @@ import React from 'react';
 
 import { fixtures } from '@strapi/admin-test-utils';
 import { lightTheme, ThemeProvider } from '@strapi/design-system';
-import { NotificationsProvider, RBACContext } from '@strapi/helper-plugin';
+import { RBACContext } from '@strapi/helper-plugin';
+import { NotificationsProvider } from '@strapi/strapi/admin';
 import { render as renderRTL, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
@@ -54,16 +55,15 @@ describe('PluginPage', () => {
   it('render the plugin page correctly', async () => {
     const { getByRole, queryByText, getByText } = render();
 
+    await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
+
     expect(getByRole('heading', { name: 'Documentation' })).toBeInTheDocument();
     expect(getByText('Configure the documentation plugin')).toBeInTheDocument();
-    expect(queryByText('Plugin is loading')).toBeInTheDocument();
     expect(getByRole('link', { name: 'Open Documentation' })).toHaveAttribute(
       'aria-disabled',
-      'true'
+      'false'
     );
 
-    await waitFor(() => expect(queryByText('Plugin is loading')).not.toBeInTheDocument());
-
     expect(getByRole('heading', { name: 'Documentation' })).toBeInTheDocument();
     expect(getByText('Configure the documentation plugin')).toBeInTheDocument();
     expect(getByRole('link', { name: 'Open Documentation' })).toBeInTheDocument();
@@ -90,7 +90,7 @@ describe('PluginPage', () => {
     it('should open the documentation', async () => {
       const { getByRole, queryByText, user } = render();
 
-      await waitFor(() => expect(queryByText('Plugin is loading')).not.toBeInTheDocument());
+      await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
 
       expect(getByRole('link', { name: 'Open Documentation' })).toHaveAttribute(
         'href',
@@ -110,7 +110,7 @@ describe('PluginPage', () => {
     it('should regenerate the documentation', async () => {
       const { getByRole, queryByText, user, getByText } = render();
 
-      await waitFor(() => expect(queryByText('Plugin is loading')).not.toBeInTheDocument());
+      await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
 
       expect(getByRole('button', { name: 'Regenerate 2.0.0' })).toBeInTheDocument();
 
@@ -122,7 +122,7 @@ describe('PluginPage', () => {
     it('should delete the documentation', async () => {
       const { getByRole, queryByText, user, getByText } = render();
 
-      await waitFor(() => expect(queryByText('Plugin is loading')).not.toBeInTheDocument());
+      await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
 
       expect(getByRole('button', { name: 'Delete 2.0.0' })).toBeInTheDocument();
 
@@ -144,14 +144,13 @@ describe('PluginPage', () => {
         permissions: [],
       });
 
-      expect(queryByText('Plugin is loading')).toBeInTheDocument();
+      await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
+
       expect(getByRole('link', { name: 'Open Documentation' })).toHaveAttribute(
         'aria-disabled',
         'true'
       );
 
-      await waitFor(() => expect(queryByText('Plugin is loading')).not.toBeInTheDocument());
-
       expect(getByRole('link', { name: 'Open Documentation' })).toHaveAttribute(
         'aria-disabled',
         'true'
@@ -163,7 +162,7 @@ describe('PluginPage', () => {
         permissions: [],
       });
 
-      await waitFor(() => expect(queryByText('Plugin is loading')).not.toBeInTheDocument());
+      await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
 
       versions.forEach((version) => {
         expect(getByRole('gridcell', { name: version })).toBeInTheDocument();
@@ -180,7 +179,7 @@ describe('PluginPage', () => {
         permissions: [],
       });
 
-      await waitFor(() => expect(queryByText('Plugin is loading')).not.toBeInTheDocument());
+      await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
 
       versions.forEach((version) => {
         expect(getByRole('gridcell', { name: version })).toBeInTheDocument();
@@ -194,7 +193,7 @@ describe('PluginPage', () => {
         permissions: [],
       });
 
-      await waitFor(() => expect(queryByText('Plugin is loading')).not.toBeInTheDocument());
+      await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
 
       versions.forEach((version) => {
         expect(getByRole('gridcell', { name: version })).toBeInTheDocument();

package/admin/src/pages/SettingsPage/index.jsx

@@ -8,22 +8,15 @@ import {
   Grid,
   GridItem,
   HeaderLayout,
-  Main,
   TextInput,
   ToggleInput,
   Typography,
   FieldAction,
 } from '@strapi/design-system';
-import {
-  Form,
-  LoadingIndicatorPage,
-  useFocusWhenNavigate,
-  translatedErrors,
-  useRBAC,
-} from '@strapi/helper-plugin';
-// Strapi Icons
+import { useRBAC } from '@strapi/helper-plugin';
 import { Check, Eye as Show, EyeStriked as Hide } from '@strapi/icons';
-import { Formik } from 'formik';
+import { translatedErrors, Page } from '@strapi/strapi/admin';
+import { Form, Formik } from 'formik';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import * as yup from 'yup';
@@ -35,12 +28,11 @@ import { getTrad } from '../../utils';
 const schema = yup.object().shape({
   restrictedAccess: yup.boolean(),
   password: yup.string().when('restrictedAccess', (value, initSchema) => {
-    return value ? initSchema.required(translatedErrors.required) : initSchema;
+    return value ? initSchema.required(translatedErrors.required.id) : initSchema;
   }),
 });
 
 const SettingsPage = () => {
-  useFocusWhenNavigate();
   const { formatMessage } = useIntl();
   const { submit, data, isLoading } = useDocumentation();
   const [passwordShown, setPasswordShown] = useState(false);
@@ -53,148 +45,148 @@ const SettingsPage = () => {
     });
   };
 
+  if (isLoading) {
+    return <Page.Loading />;
+  }
+
   return (
-    <Main>
-      {isLoading ? (
-        <LoadingIndicatorPage>Plugin settings are loading</LoadingIndicatorPage>
-      ) : (
-        <Formik
-          initialValues={{
-            restrictedAccess: data?.documentationAccess.restrictedAccess || false,
-            password: '',
-          }}
-          onSubmit={handleUpdateSettingsSubmit}
-          validationSchema={schema}
-        >
-          {({
-            handleSubmit,
-            values,
-            handleChange,
-            errors,
-            setFieldTouched,
-            setFieldValue,
-            dirty,
-          }) => {
-            return (
-              <Form noValidate onSubmit={handleSubmit}>
-                <HeaderLayout
-                  title={formatMessage({
-                    id: getTrad('plugin.name'),
-                    defaultMessage: 'Documentation',
-                  })}
-                  subtitle={formatMessage({
-                    id: getTrad('pages.SettingsPage.header.description'),
-                    defaultMessage: 'Configure the documentation plugin',
-                  })}
-                  primaryAction={
-                    <Button
-                      type="submit"
-                      startIcon={<Check />}
-                      disabled={!dirty && allowedActions.canUpdate}
-                    >
+    <Page.Main>
+      <Formik
+        initialValues={{
+          restrictedAccess: data?.documentationAccess.restrictedAccess || false,
+          password: '',
+        }}
+        onSubmit={handleUpdateSettingsSubmit}
+        validationSchema={schema}
+      >
+        {({
+          handleSubmit,
+          values,
+          handleChange,
+          errors,
+          setFieldTouched,
+          setFieldValue,
+          dirty,
+        }) => {
+          return (
+            <Form noValidate onSubmit={handleSubmit}>
+              <HeaderLayout
+                title={formatMessage({
+                  id: getTrad('plugin.name'),
+                  defaultMessage: 'Documentation',
+                })}
+                subtitle={formatMessage({
+                  id: getTrad('pages.SettingsPage.header.description'),
+                  defaultMessage: 'Configure the documentation plugin',
+                })}
+                primaryAction={
+                  <Button
+                    type="submit"
+                    startIcon={<Check />}
+                    disabled={!dirty && allowedActions.canUpdate}
+                  >
+                    {formatMessage({
+                      id: getTrad('pages.SettingsPage.Button.save'),
+                      defaultMessage: 'Save',
+                    })}
+                  </Button>
+                }
+              />
+              <ContentLayout>
+                <Box
+                  background="neutral0"
+                  hasRadius
+                  shadow="filterShadow"
+                  paddingTop={6}
+                  paddingBottom={6}
+                  paddingLeft={7}
+                  paddingRight={7}
+                >
+                  <Flex direction="column" alignItems="stretch" gap={4}>
+                    <Typography variant="delta" as="h2">
                       {formatMessage({
-                        id: getTrad('pages.SettingsPage.Button.save'),
-                        defaultMessage: 'Save',
+                        id: 'global.settings',
+                        defaultMessage: 'Settings',
                       })}
-                    </Button>
-                  }
-                />
-                <ContentLayout>
-                  <Box
-                    background="neutral0"
-                    hasRadius
-                    shadow="filterShadow"
-                    paddingTop={6}
-                    paddingBottom={6}
-                    paddingLeft={7}
-                    paddingRight={7}
-                  >
-                    <Flex direction="column" alignItems="stretch" gap={4}>
-                      <Typography variant="delta" as="h2">
-                        {formatMessage({
-                          id: 'global.settings',
-                          defaultMessage: 'Settings',
-                        })}
-                      </Typography>
-                      <Grid gap={4}>
+                    </Typography>
+                    <Grid gap={4}>
+                      <GridItem col={6} s={12}>
+                        <ToggleInput
+                          name="restrictedAccess"
+                          label={formatMessage({
+                            id: getTrad('pages.SettingsPage.toggle.label'),
+                            defaultMessage: 'Restricted Access',
+                          })}
+                          hint={formatMessage({
+                            id: getTrad('pages.SettingsPage.toggle.hint'),
+                            defaultMessage: 'Make the documentation endpoint private',
+                          })}
+                          checked={values.restrictedAccess}
+                          onChange={() => {
+                            if (values.restrictedAccess === true) {
+                              setFieldValue('password', '', false);
+                              setFieldTouched('password', false, false);
+                            }
+
+                            setFieldValue('restrictedAccess', !values.restrictedAccess, false);
+                          }}
+                          onLabel="On"
+                          offLabel="Off"
+                        />
+                      </GridItem>
+                      {values.restrictedAccess && (
                         <GridItem col={6} s={12}>
-                          <ToggleInput
-                            name="restrictedAccess"
+                          <TextInput
                             label={formatMessage({
-                              id: getTrad('pages.SettingsPage.toggle.label'),
-                              defaultMessage: 'Restricted Access',
+                              id: 'global.password',
+                              defaultMessage: 'Password',
                             })}
-                            hint={formatMessage({
-                              id: getTrad('pages.SettingsPage.toggle.hint'),
-                              defaultMessage: 'Make the documentation endpoint private',
-                            })}
-                            checked={values.restrictedAccess}
-                            onChange={() => {
-                              if (values.restrictedAccess === true) {
-                                setFieldValue('password', '', false);
-                                setFieldTouched('password', false, false);
-                              }
-
-                              setFieldValue('restrictedAccess', !values.restrictedAccess, false);
-                            }}
-                            onLabel="On"
-                            offLabel="Off"
+                            name="password"
+                            placeholder="**********"
+                            type={passwordShown ? 'text' : 'password'}
+                            value={values.password}
+                            onChange={handleChange}
+                            error={
+                              errors.password
+                                ? formatMessage({
+                                    id: errors.password,
+                                    defaultMessage: 'Invalid value',
+                                  })
+                                : null
+                            }
+                            endAction={
+                              <FieldActionWrapper
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setPasswordShown((prev) => !prev);
+                                }}
+                                label={formatMessage(
+                                  passwordShown
+                                    ? {
+                                        id: 'Auth.form.password.show-password',
+                                        defaultMessage: 'Show password',
+                                      }
+                                    : {
+                                        id: 'Auth.form.password.hide-password',
+                                        defaultMessage: 'Hide password',
+                                      }
+                                )}
+                              >
+                                {passwordShown ? <Show /> : <Hide />}
+                              </FieldActionWrapper>
+                            }
                           />
                         </GridItem>
-                        {values.restrictedAccess && (
-                          <GridItem col={6} s={12}>
-                            <TextInput
-                              label={formatMessage({
-                                id: 'global.password',
-                                defaultMessage: 'Password',
-                              })}
-                              name="password"
-                              placeholder="**********"
-                              type={passwordShown ? 'text' : 'password'}
-                              value={values.password}
-                              onChange={handleChange}
-                              error={
-                                errors.password
-                                  ? formatMessage({
-                                      id: errors.password,
-                                      defaultMessage: 'Invalid value',
-                                    })
-                                  : null
-                              }
-                              endAction={
-                                <FieldActionWrapper
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    setPasswordShown((prev) => !prev);
-                                  }}
-                                  label={formatMessage(
-                                    passwordShown
-                                      ? {
-                                          id: 'Auth.form.password.show-password',
-                                          defaultMessage: 'Show password',
-                                        }
-                                      : {
-                                          id: 'Auth.form.password.hide-password',
-                                          defaultMessage: 'Hide password',
-                                        }
-                                  )}
-                                >
-                                  {passwordShown ? <Show /> : <Hide />}
-                                </FieldActionWrapper>
-                              }
-                            />
-                          </GridItem>
-                        )}
-                      </Grid>
-                    </Flex>
-                  </Box>
-                </ContentLayout>
-              </Form>
-            );
-          }}
-        </Formik>
-      )}
-    </Main>
+                      )}
+                    </Grid>
+                  </Flex>
+                </Box>
+              </ContentLayout>
+            </Form>
+          );
+        }}
+      </Formik>
+    </Page.Main>
   );
 };