@strapi/plugin-documentation 0.0.0-experimental.62ebf57bb35846666febb5ee2078fe02fe990f57 → 0.0.0-experimental.6340da17068c3bed7fb006e7bcc554c71129e282

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

@@ -1,230 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  Box,
-  LinkButton,
-  ContentLayout,
-  Flex,
-  HeaderLayout,
-  IconButton,
-  Layout,
-  Main,
-  Table,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-  Typography,
-} from '@strapi/design-system';
-import {
-  AnErrorOccurred,
-  ConfirmDialog,
-  EmptyStateLayout,
-  LoadingIndicatorPage,
-  useFocusWhenNavigate,
-  useRBAC,
-} from '@strapi/helper-plugin';
-import { Eye as Show, Refresh as Reload, Trash } from '@strapi/icons';
-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 = () => {
-  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);
-
-  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 () => {
-    setIsConfirmButtonLoading(true);
-    await remove.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',
-  });
-
-  if (isError) {
-    return (
-      <Layout>
-        <ContentLayout>
-          <Box paddingTop={8}>
-            <AnErrorOccurred />
-          </Box>
-        </ContentLayout>
-      </Layout>
-    );
-  }
-
-  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={
-            <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>
-          {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" 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
-          isConfirmButtonLoading={isConfirmButtonLoading}
-          onConfirm={handleConfirmDelete}
-          onToggleDialog={handleShowConfirmDelete}
-          isOpen={showConfirmDelete}
-        />
-      </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,206 +0,0 @@
-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 { render as renderRTL, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { IntlProvider } from 'react-intl';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { MemoryRouter } from 'react-router-dom';
-
-import PluginPage from '../index';
-
-const render = ({ permissions } = { permissions: fixtures.permissions.allPermissions }) => ({
-  ...renderRTL(<PluginPage />, {
-    wrapper({ children }) {
-      const client = new QueryClient({
-        defaultOptions: {
-          queries: {
-            retry: false,
-          },
-        },
-      });
-
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const rbacContextValue = React.useMemo(
-        () => ({
-          allPermissions: permissions,
-        }),
-        []
-      );
-
-      return (
-        <MemoryRouter>
-          <ThemeProvider theme={lightTheme}>
-            <QueryClientProvider client={client}>
-              <IntlProvider locale="en" messages={{}} textComponent="span">
-                <NotificationsProvider>
-                  <RBACContext.Provider value={rbacContextValue}>{children}</RBACContext.Provider>
-                </NotificationsProvider>
-              </IntlProvider>
-            </QueryClientProvider>
-          </ThemeProvider>
-        </MemoryRouter>
-      );
-    },
-  }),
-  user: userEvent.setup(),
-});
-
-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();
-
-    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'
-    );
-
-    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();
-
-    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();
-
-      await waitFor(() => expect(queryByText('Plugin is loading')).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();
-
-      await waitFor(() => expect(queryByText('Plugin is loading')).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();
-
-      await waitFor(() => expect(queryByText('Plugin is loading')).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({
-        permissions: [],
-      });
-
-      expect(queryByText('Plugin is loading')).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'
-      );
-    });
-
-    it('should disabled the open documentation version link in the table if the user cannot open', async () => {
-      const { getByRole, queryByText } = render({
-        permissions: [],
-      });
-
-      await waitFor(() => expect(queryByText('Plugin is loading')).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({
-        permissions: [],
-      });
-
-      await waitFor(() => expect(queryByText('Plugin is loading')).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({
-        permissions: [],
-      });
-
-      await waitFor(() => expect(queryByText('Plugin is loading')).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,211 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  Box,
-  Button,
-  ContentLayout,
-  Flex,
-  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 { Check, Eye as Show, EyeStriked as Hide } from '@strapi/icons';
-import { 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) : initSchema;
-  }),
-});
-
-const SettingsPage = () => {
-  useFocusWhenNavigate();
-  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,
-    });
-  };
-
-  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}
-                    >
-                      {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>
-      )}
-    </Main>
-  );
-};
-
-const FieldActionWrapper = styled(FieldAction)`
-  svg {
-    height: 1rem;
-    width: 1rem;
-    path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
-`;
-
-export default SettingsPage;