@strapi/plugin-documentation 5.0.0-beta.0 → 5.0.0-beta.1

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

@@ -1,212 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  LinkButton,
-  ContentLayout,
-  Flex,
-  HeaderLayout,
-  IconButton,
-  Layout,
-  Table,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-  Typography,
-  EmptyStateLayout,
-} from '@strapi/design-system';
-import { Eye as Show, Refresh as Reload, Trash } from '@strapi/icons';
-import { ConfirmDialog, useRBAC, Page } from '@strapi/strapi/admin';
-import { Helmet } from 'react-helmet';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-
-import { PERMISSIONS } from '../../constants';
-import { useDocumentation } from '../../hooks/useDocumentation';
-import { getTrad } from '../../utils';
-
-const PluginPage = () => {
-  const { formatMessage } = useIntl();
-  const { data, isLoading, isError, remove, regenerate } = useDocumentation();
-  const [showConfirmDelete, setShowConfirmDelete] = useState(false);
-  const [versionToDelete, setVersionToDelete] = useState();
-  const { allowedActions } = useRBAC(PERMISSIONS);
-
-  const colCount = 4;
-  const rowCount = (data?.docVersions?.length || 0) + 1;
-
-  const handleRegenerateDoc = (version) => {
-    regenerate.mutate({ version, prefix: data?.prefix });
-  };
-
-  const handleShowConfirmDelete = () => {
-    setShowConfirmDelete(!showConfirmDelete);
-  };
-
-  const handleConfirmDelete = async () => {
-    await remove.mutateAsync({ prefix: data?.prefix, version: versionToDelete });
-    setShowConfirmDelete(!showConfirmDelete);
-  };
-
-  const handleClickDelete = (version) => {
-    setVersionToDelete(version);
-    setShowConfirmDelete(!showConfirmDelete);
-  };
-
-  const title = formatMessage({
-    id: getTrad('plugin.name'),
-    defaultMessage: 'Documentation',
-  });
-
-  if (isLoading) {
-    return <Page.Loading />;
-  }
-
-  if (isError) {
-    return <Page.Error />;
-  }
-
-  return (
-    <Layout>
-      <Helmet title={title} />
-      <Page.Main>
-        <HeaderLayout
-          title={title}
-          subtitle={formatMessage({
-            id: getTrad('pages.PluginPage.header.description'),
-            defaultMessage: 'Configure the documentation plugin',
-          })}
-          primaryAction={
-            <OpenDocLink
-              disabled={!allowedActions.canOpen || !data?.currentVersion || !data?.prefix}
-              href={createDocumentationHref(`${data?.prefix}/v${data?.currentVersion}`)}
-              startIcon={<Show />}
-            >
-              {formatMessage({
-                id: getTrad('pages.PluginPage.Button.open'),
-                defaultMessage: 'Open Documentation',
-              })}
-            </OpenDocLink>
-          }
-        />
-        <ContentLayout>
-          {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" onClick={(e) => e.stopPropagation()}>
-                          <IconButton
-                            forwardedAs="a"
-                            disabled={!allowedActions.canOpen}
-                            href={createDocumentationHref(`${data.prefix}/v${doc.version}`)}
-                            noBorder
-                            icon={<Show />}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            label={formatMessage(
-                              {
-                                id: getTrad('pages.PluginPage.table.icon.show'),
-                                defaultMessage: 'Open {target}',
-                              },
-                              { target: `${doc.version}` }
-                            )}
-                          />
-                          {allowedActions.canRegenerate ? (
-                            <IconButton
-                              onClick={() => handleRegenerateDoc(doc.version)}
-                              noBorder
-                              icon={<Reload />}
-                              label={formatMessage(
-                                {
-                                  id: getTrad('pages.PluginPage.table.icon.regenerate'),
-                                  defaultMessage: 'Regenerate {target}',
-                                },
-                                { target: `${doc.version}` }
-                              )}
-                            />
-                          ) : null}
-                          {allowedActions.canUpdate && doc.version !== data.currentVersion ? (
-                            <IconButton
-                              onClick={() => handleClickDelete(doc.version)}
-                              noBorder
-                              icon={<Trash />}
-                              label={formatMessage(
-                                {
-                                  id: 'global.delete-target',
-                                  defaultMessage: 'Delete {target}',
-                                },
-                                { target: `${doc.version}` }
-                              )}
-                            />
-                          ) : null}
-                        </Flex>
-                      </Td>
-                    </Tr>
-                  ))}
-              </Tbody>
-            </Table>
-          ) : (
-            <EmptyStateLayout />
-          )}
-        </ContentLayout>
-        <ConfirmDialog
-          onConfirm={handleConfirmDelete}
-          onClose={handleShowConfirmDelete}
-          isOpen={showConfirmDelete}
-        />
-      </Page.Main>
-    </Layout>
-  );
-};
-
-/**
- * TODO: should this be fixed in the DS?
- */
-const OpenDocLink = styled(LinkButton)`
-  text-decoration: none;
-`;
-
-const createDocumentationHref = (path) => {
-  if (path.startsWith('http')) {
-    return path;
-  }
-
-  if (path.startsWith('/')) {
-    return `${window.strapi.backendURL}${path}`;
-  }
-
-  return `${window.strapi.backendURL}/${path}`;
-};
-
-export default PluginPage;

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

@@ -1,160 +0,0 @@
-import React from 'react';
-
-import { render, waitFor } from '@strapi/strapi/admin/test';
-
-import PluginPage from '../index';
-
-const versions = ['2.0.0', '1.2.0', '1.0.0'];
-
-describe('PluginPage', () => {
-  it('render the plugin page correctly', async () => {
-    const { getByRole, queryByText, getByText } = render(<PluginPage />);
-
-    await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
-
-    expect(getByRole('heading', { name: 'Documentation' })).toBeInTheDocument();
-    expect(getByText('Configure the documentation plugin')).toBeInTheDocument();
-    expect(getByRole('link', { name: 'Open Documentation' })).toHaveAttribute(
-      'aria-disabled',
-      'false'
-    );
-
-    expect(getByRole('heading', { name: 'Documentation' })).toBeInTheDocument();
-    expect(getByText('Configure the documentation plugin')).toBeInTheDocument();
-    expect(getByRole('link', { name: 'Open Documentation' })).toBeInTheDocument();
-
-    expect(getByRole('grid')).toBeInTheDocument();
-    expect(getByRole('gridcell', { name: 'Version' })).toBeInTheDocument();
-    expect(getByRole('gridcell', { name: 'Last Generated' })).toBeInTheDocument();
-
-    versions.forEach((version) => {
-      expect(getByRole('gridcell', { name: version })).toBeInTheDocument();
-      expect(getByRole('link', { name: `Open ${version}` })).toBeInTheDocument();
-      expect(getByRole('button', { name: `Regenerate ${version}` })).toBeInTheDocument();
-
-      /**
-       * You can't delete the original version
-       */
-      if (version !== '1.0.0') {
-        expect(getByRole('button', { name: `Delete ${version}` })).toBeInTheDocument();
-      }
-    });
-  });
-
-  describe('actions', () => {
-    it('should open the documentation', async () => {
-      const { getByRole, queryByText, user } = render(<PluginPage />);
-
-      await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
-
-      expect(getByRole('link', { name: 'Open Documentation' })).toHaveAttribute(
-        'href',
-        'http://localhost:1337/documentation/v1.0.0'
-      );
-
-      await user.click(getByRole('link', { name: 'Open Documentation' }));
-
-      versions.forEach((version) => {
-        expect(getByRole('link', { name: `Open ${version}` })).toHaveAttribute(
-          'href',
-          `http://localhost:1337/documentation/v${version}`
-        );
-      });
-    });
-
-    it('should regenerate the documentation', async () => {
-      const { getByRole, queryByText, user, getByText } = render(<PluginPage />);
-
-      await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
-
-      expect(getByRole('button', { name: 'Regenerate 2.0.0' })).toBeInTheDocument();
-
-      await user.click(getByRole('button', { name: 'Regenerate 2.0.0' }));
-
-      expect(getByText('Successfully generated documentation')).toBeInTheDocument();
-    });
-
-    it('should delete the documentation', async () => {
-      const { getByRole, queryByText, user, getByText } = render(<PluginPage />);
-
-      await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
-
-      expect(getByRole('button', { name: 'Delete 2.0.0' })).toBeInTheDocument();
-
-      await user.click(getByRole('button', { name: 'Delete 2.0.0' }));
-
-      expect(getByRole('dialog', { name: 'Confirmation' })).toBeInTheDocument();
-      expect(getByRole('button', { name: 'Confirm' })).toBeInTheDocument();
-      expect(getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
-
-      await user.click(getByRole('button', { name: 'Confirm' }));
-
-      expect(getByText('Successfully deleted documentation')).toBeInTheDocument();
-    });
-  });
-
-  describe('permissions', () => {
-    it("should always disable the 'Open Documentation' link if the user cannot open", async () => {
-      const { getByRole, queryByText } = render(<PluginPage />, {
-        providerOptions: { permissions: () => [] },
-      });
-
-      await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
-
-      expect(getByRole('link', { name: 'Open Documentation' })).toHaveAttribute(
-        'aria-disabled',
-        'true'
-      );
-
-      expect(getByRole('link', { name: 'Open Documentation' })).toHaveAttribute(
-        'aria-disabled',
-        'true'
-      );
-    });
-
-    it('should disabled the open documentation version link in the table if the user cannot open', async () => {
-      const { getByRole, queryByText } = render(<PluginPage />, {
-        providerOptions: { permissions: () => [] },
-      });
-
-      await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
-
-      versions.forEach((version) => {
-        expect(getByRole('gridcell', { name: version })).toBeInTheDocument();
-
-        expect(getByRole('link', { name: `Open ${version}` })).toHaveAttribute(
-          'aria-disabled',
-          'true'
-        );
-      });
-    });
-
-    it('should not render the regenerate buttons if the user cannot regenerate', async () => {
-      const { queryByRole, getByRole, queryByText } = render(<PluginPage />, {
-        providerOptions: { permissions: () => [] },
-      });
-
-      await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
-
-      versions.forEach((version) => {
-        expect(getByRole('gridcell', { name: version })).toBeInTheDocument();
-
-        expect(queryByRole('button', { name: `Regenerate ${version}` })).not.toBeInTheDocument();
-      });
-    });
-
-    it('should not render the delete buttons if the user cannot delete', async () => {
-      const { queryByRole, getByRole, queryByText } = render(<PluginPage />, {
-        providerOptions: { permissions: () => [] },
-      });
-
-      await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
-
-      versions.forEach((version) => {
-        expect(getByRole('gridcell', { name: version })).toBeInTheDocument();
-
-        expect(queryByRole('button', { name: `Delete ${version}` })).not.toBeInTheDocument();
-      });
-    });
-  });
-});

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

@@ -1,202 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  Box,
-  Button,
-  ContentLayout,
-  Flex,
-  Grid,
-  GridItem,
-  HeaderLayout,
-  TextInput,
-  ToggleInput,
-  Typography,
-  FieldAction,
-} from '@strapi/design-system';
-import { Check, Eye as Show, EyeStriked as Hide } from '@strapi/icons';
-import { translatedErrors, Page, useRBAC } from '@strapi/strapi/admin';
-import { Form, Formik } from 'formik';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-import * as yup from 'yup';
-
-import { PERMISSIONS } from '../../constants';
-import { useDocumentation } from '../../hooks/useDocumentation';
-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.id) : initSchema;
-  }),
-});
-
-const SettingsPage = () => {
-  const { formatMessage } = useIntl();
-  const { submit, data, isLoading } = useDocumentation();
-  const [passwordShown, setPasswordShown] = useState(false);
-  const { allowedActions } = useRBAC(PERMISSIONS);
-
-  const handleUpdateSettingsSubmit = (body) => {
-    submit.mutate({
-      prefix: data?.prefix,
-      body,
-    });
-  };
-
-  if (isLoading) {
-    return <Page.Loading />;
-  }
-
-  return (
-    <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: 'global.settings',
-                        defaultMessage: 'Settings',
-                      })}
-                    </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}>
-                          <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>
-    </Page.Main>
-  );
-};
-
-const FieldActionWrapper = styled(FieldAction)`
-  svg {
-    height: 1rem;
-    width: 1rem;
-    path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
-`;
-
-export default SettingsPage;

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

@@ -1,72 +0,0 @@
-import React from 'react';
-
-import { fireEvent, render, waitFor } from '@strapi/strapi/admin/test';
-import { rest } from 'msw';
-
-import { server } from '../../../../../tests/server';
-import SettingsPage from '../index';
-
-describe('SettingsPage', () => {
-  it('renders the setting page correctly', async () => {
-    const { getByRole, queryByText, getByText } = render(<SettingsPage />);
-
-    await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
-
-    expect(getByRole('heading', { name: 'Documentation' })).toBeInTheDocument();
-    expect(getByText('Configure the documentation plugin')).toBeInTheDocument();
-    expect(getByRole('heading', { name: 'Settings' })).toBeInTheDocument();
-
-    expect(getByRole('button', { name: 'Save' })).toBeInTheDocument();
-    expect(getByRole('button', { name: 'Save' })).toHaveAttribute('aria-disabled', 'true');
-
-    expect(getByRole('checkbox', { name: 'Restricted Access' })).toBeInTheDocument();
-  });
-
-  it('should automatically render the password field if the server restricted access property is true', async () => {
-    server.use(
-      rest.get('*/getInfos', (req, res, ctx) => {
-        return res(
-          ctx.json({
-            documentationAccess: { restrictedAccess: true },
-          })
-        );
-      })
-    );
-
-    const { getByLabelText, queryByText } = render(<SettingsPage />);
-
-    await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
-
-    expect(getByLabelText('Password')).toBeInTheDocument();
-
-    server.restoreHandlers();
-  });
-
-  it('should render the password field when the Restricted Access checkbox is checked', async () => {
-    const { getByRole, getByLabelText, queryByText } = render(<SettingsPage />);
-
-    await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
-
-    fireEvent.click(getByRole('checkbox', { name: 'Restricted Access' }));
-
-    expect(getByRole('button', { name: 'Save' })).toHaveAttribute('aria-disabled', 'false');
-
-    expect(getByLabelText('Password')).toBeInTheDocument();
-  });
-
-  it('should allow me to type a password and save that settings change successfully', async () => {
-    const { getByRole, getByLabelText, queryByText, user, getByText } = render(<SettingsPage />);
-
-    await waitFor(() => expect(queryByText('Loading content.')).not.toBeInTheDocument());
-
-    fireEvent.click(getByRole('checkbox', { name: 'Restricted Access' }));
-
-    expect(getByRole('button', { name: 'Save' })).toHaveAttribute('aria-disabled', 'false');
-
-    await user.type(getByLabelText('Password'), 'password');
-
-    fireEvent.click(getByRole('button', { name: 'Save' }));
-
-    await waitFor(() => expect(getByText('Successfully updated settings')).toBeInTheDocument());
-  });
-});

package/admin/src/pluginId.js

@@ -1,5 +0,0 @@
-import pluginPkg from '../../package.json';
-
-const pluginId = pluginPkg.name.replace(/^@strapi\/plugin-/i, '');
-
-export default pluginId;

package/admin/src/translations/ar.json

@@ -1,20 +0,0 @@
-{
-  "components.Row.open": "Open",
-  "components.Row.regenerate": "Regenerate",
-  "containers.HomePage.Block.title": "Versions",
-  "containers.HomePage.Button.update": "Update",
-  "containers.HomePage.PluginHeader.title": "Documentation — Settings",
-  "containers.HomePage.PopUpWarning.confirm": "I understand",
-  "containers.HomePage.PopUpWarning.message": "Are you sure you want to delete this version?",
-  "containers.HomePage.form.password": "Password",
-  "containers.HomePage.form.password.inputDescription": "Set the password to access the documentation",
-  "containers.HomePage.form.restrictedAccess": "Restricted access",
-  "containers.HomePage.form.restrictedAccess.inputDescription": "Make the documentation endpoint private. By default, the access is public",
-  "containers.HomePage.form.showGeneratedFiles": "Show generated files",
-  "containers.HomePage.form.showGeneratedFiles.inputDescription": "Useful when you want to override the generated documentation. \nThe plugin will generate files split by model and plugin. \nBy enabling this option it will be easier to customize your documentation",
-  "error.deleteDoc.versionMissing": "The version you are trying to delete does not exist.",
-  "error.noVersion": "A version is required",
-  "error.regenerateDoc": "An error occurred while regenerating the doc",
-  "error.regenerateDoc.versionMissing": "The version you are trying to generate doesn't exist",
-  "notification.update.success": "Settings updated successfully"
-}