@strapi/admin 4.15.0-alpha.0 → 4.15.0

package/admin/src/pages/SettingsPage/components/Tokens/Table/index.js

@@ -27,102 +27,24 @@ const Table = ({
   tokenType,
 }) => {
   const { canDelete, canUpdate, canRead } = permissions;
-  const withBulkActions = canDelete || canUpdate || canRead;
-  const [{ query }] = useQueryParams();
-  const { formatMessage } = useIntl();
-  const [, sortOrder] = query ? query.sort.split(':') : 'ASC';
-  const {
-    push,
-    location: { pathname },
-  } = useHistory();
-  const { trackUsage } = useTracking();
-
-  const sortedTokens = tokens.sort((a, b) => {
-    const comparison = a.name.localeCompare(b.name);
-
-    return sortOrder === 'DESC' ? -comparison : comparison;
-  });
 
+  /**
+   * TODO: This needs refactoring to the new `Table` component.
+   */
   return (
     <DynamicTable
       headers={headers}
       contentType={contentType}
       rows={tokens}
-      withBulkActions={withBulkActions}
+      withBulkActions={canDelete || canUpdate || canRead}
       isLoading={isLoading}
       onConfirmDelete={onConfirmDelete}
     >
-      <Tbody>
-        {sortedTokens.map((token) => {
-          return (
-            <Tr
-              key={token.id}
-              {...onRowClick({
-                fn() {
-                  trackUsage('willEditTokenFromList', {
-                    tokenType,
-                  });
-                  push(`${pathname}/${token.id}`);
-                },
-                condition: canUpdate,
-              })}
-            >
-              <Td maxWidth={pxToRem(250)}>
-                <Typography textColor="neutral800" fontWeight="bold" ellipsis>
-                  {token.name}
-                </Typography>
-              </Td>
-              <Td maxWidth={pxToRem(250)}>
-                <Typography textColor="neutral800" ellipsis>
-                  {token.description}
-                </Typography>
-              </Td>
-              <Td>
-                <Typography textColor="neutral800">
-                  <RelativeTime timestamp={new Date(token.createdAt)} />
-                </Typography>
-              </Td>
-              <Td>
-                {token.lastUsedAt && (
-                  <Typography textColor="neutral800">
-                    <RelativeTime
-                      timestamp={new Date(token.lastUsedAt)}
-                      customIntervals={[
-                        {
-                          unit: 'hours',
-                          threshold: 1,
-                          text: formatMessage({
-                            id: 'Settings.apiTokens.lastHour',
-                            defaultMessage: 'last hour',
-                          }),
-                        },
-                      ]}
-                    />
-                  </Typography>
-                )}
-              </Td>
-
-              {withBulkActions && (
-                <Td>
-                  <Flex justifyContent="end">
-                    {canUpdate && <UpdateButton tokenName={token.name} tokenId={token.id} />}
-                    {!canUpdate && canRead && (
-                      <ReadButton tokenName={token.name} tokenId={token.id} />
-                    )}
-                    {canDelete && (
-                      <DeleteButton
-                        tokenName={token.name}
-                        onClickDelete={() => onConfirmDelete(token.id)}
-                        tokenType={tokenType}
-                      />
-                    )}
-                  </Flex>
-                </Td>
-              )}
-            </Tr>
-          );
-        })}
-      </Tbody>
+      <TableRows
+        tokenType={tokenType}
+        permissions={permissions}
+        onConfirmDelete={onConfirmDelete}
+      />
     </DynamicTable>
   );
 };
@@ -159,3 +81,113 @@ Table.defaultProps = {
 };
 
 export default Table;
+
+const TableRows = ({ tokenType, permissions, rows, withBulkActions, onConfirmDelete }) => {
+  const { canDelete, canUpdate, canRead } = permissions;
+
+  const [{ query }] = useQueryParams();
+  const { formatMessage } = useIntl();
+  const [, sortOrder] = query ? query.sort.split(':') : 'ASC';
+  const {
+    push,
+    location: { pathname },
+  } = useHistory();
+  const { trackUsage } = useTracking();
+
+  const sortedTokens = rows.sort((a, b) => {
+    const comparison = a.name.localeCompare(b.name);
+
+    return sortOrder === 'DESC' ? -comparison : comparison;
+  });
+
+  return (
+    <Tbody>
+      {sortedTokens.map((token) => {
+        return (
+          <Tr
+            key={token.id}
+            {...onRowClick({
+              fn() {
+                trackUsage('willEditTokenFromList', {
+                  tokenType,
+                });
+                push(`${pathname}/${token.id}`);
+              },
+              condition: canUpdate,
+            })}
+          >
+            <Td maxWidth={pxToRem(250)}>
+              <Typography textColor="neutral800" fontWeight="bold" ellipsis>
+                {token.name}
+              </Typography>
+            </Td>
+            <Td maxWidth={pxToRem(250)}>
+              <Typography textColor="neutral800" ellipsis>
+                {token.description}
+              </Typography>
+            </Td>
+            <Td>
+              <Typography textColor="neutral800">
+                <RelativeTime timestamp={new Date(token.createdAt)} />
+              </Typography>
+            </Td>
+            <Td>
+              {token.lastUsedAt && (
+                <Typography textColor="neutral800">
+                  <RelativeTime
+                    timestamp={new Date(token.lastUsedAt)}
+                    customIntervals={[
+                      {
+                        unit: 'hours',
+                        threshold: 1,
+                        text: formatMessage({
+                          id: 'Settings.apiTokens.lastHour',
+                          defaultMessage: 'last hour',
+                        }),
+                      },
+                    ]}
+                  />
+                </Typography>
+              )}
+            </Td>
+
+            {withBulkActions && (
+              <Td>
+                <Flex justifyContent="end">
+                  {canUpdate && <UpdateButton tokenName={token.name} tokenId={token.id} />}
+                  {!canUpdate && canRead && (
+                    <ReadButton tokenName={token.name} tokenId={token.id} />
+                  )}
+                  {canDelete && (
+                    <DeleteButton
+                      tokenName={token.name}
+                      onClickDelete={() => onConfirmDelete(token.id)}
+                      tokenType={tokenType}
+                    />
+                  )}
+                </Flex>
+              </Td>
+            )}
+          </Tr>
+        );
+      })}
+    </Tbody>
+  );
+};
+
+TableRows.defaultProps = {
+  rows: [],
+  withBulkActions: false,
+};
+
+TableRows.propTypes = {
+  rows: PropTypes.array,
+  permissions: PropTypes.shape({
+    canRead: PropTypes.bool,
+    canDelete: PropTypes.bool,
+    canUpdate: PropTypes.bool,
+  }).isRequired,
+  onConfirmDelete: PropTypes.func.isRequired,
+  tokenType: PropTypes.string.isRequired,
+  withBulkActions: PropTypes.bool,
+};

package/admin/src/pages/SettingsPage/constants.js

@@ -164,4 +164,37 @@ export const ROUTES_CE = [
     to: '/settings/transfer-tokens/:id',
     exact: true,
   },
+  {
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "audit-logs-sales-page" */ './pages/AuditLogs/SalesPage'
+      );
+
+      return component;
+    },
+    to: '/settings/purchase-audit-logs',
+    exact: true,
+  },
+  {
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "review-workflows-sales-page" */ './pages/ReviewWorkflows/SalesPage'
+      );
+
+      return component;
+    },
+    to: '/settings/purchase-review-workflows',
+    exact: true,
+  },
+  {
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "sso-sales-page" */ './pages/SingleSignOn/SalesPage'
+      );
+
+      return component;
+    },
+    to: '/settings/purchase-single-sign-on',
+    exact: true,
+  },
 ];

package/admin/src/{hooks/useRegenerate/index.js → pages/SettingsPage/hooks/useRegenerate.ts}

@@ -1,8 +1,14 @@
 import { useState } from 'react';
 
 import { useAPIErrorHandler, useFetchClient, useNotification } from '@strapi/helper-plugin';
+import { AxiosError } from 'axios';
 
-const useRegenerate = (url, id, onRegenerate, onError) => {
+export const useRegenerate = (
+  url: string,
+  id: number | string,
+  onRegenerate: (accessKey: string) => void,
+  onError?: (error: unknown) => void
+): { isLoadingConfirmation: boolean; regenerateData: () => void } => {
   const [isLoadingConfirmation, setIsLoadingConfirmation] = useState(false);
   const toggleNotification = useNotification();
   const { post } = useFetchClient();
@@ -23,10 +29,12 @@ const useRegenerate = (url, id, onRegenerate, onError) => {
       if (onError) {
         onError(error);
       } else {
-        toggleNotification({
-          type: 'warning',
-          message: formatAPIError(error),
-        });
+        if (error instanceof AxiosError) {
+          toggleNotification({
+            type: 'warning',
+            message: formatAPIError(error),
+          });
+        }
       }
     }
   };
@@ -36,5 +44,3 @@ const useRegenerate = (url, id, onRegenerate, onError) => {
     isLoadingConfirmation,
   };
 };
-
-export default useRegenerate;

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

@@ -8,8 +8,8 @@ import { Redirect, Route, Switch, useParams } from 'react-router-dom';
 
 import { useSettingsMenu } from '../../hooks';
 import { useEnterprise } from '../../hooks/useEnterprise';
-import createRoute from '../../utils/createRoute';
-import makeUniqueRoutes from '../../utils/makeUniqueRoutes';
+import { createRoute } from '../../utils/createRoute';
+import { makeUniqueRoutes } from '../../utils/makeUniqueRoutes';
 
 import SettingsNav from './components/SettingsNav';
 import { ROUTES_CE } from './constants';

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/ActionBoundRoutes/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Flex, GridItem, Typography } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
-import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
+import { useApiTokenPermissionsContext } from '../../../../../../../contexts/apiTokenPermissions';
 import BoundRoute from '../BoundRoute';
 
 const ActionBoundRoutes = () => {

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/CollapsableContentType/index.js

@@ -17,7 +17,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
+import { useApiTokenPermissionsContext } from '../../../../../../../contexts/apiTokenPermissions';
 
 import CheckboxWrapper from './CheckBoxWrapper';
 

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/Permissions/index.js

@@ -3,7 +3,7 @@ import React, { memo } from 'react';
 import { Flex, Grid, GridItem, Typography } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
-import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
+import { useApiTokenPermissionsContext } from '../../../../../../../contexts/apiTokenPermissions';
 import ActionBoundRoutes from '../ActionBoundRoutes';
 import ContentTypesSection from '../ContenTypesSection';
 

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/Regenerate/index.js

@@ -6,7 +6,7 @@ import { Refresh } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { useRegenerate } from '../../../../../../../hooks';
+import { useRegenerate } from '../../../../../hooks/useRegenerate';
 
 export const Regenerate = ({ onRegenerate, idToRegenerate }) => {
   const { formatMessage } = useIntl();

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js

@@ -18,8 +18,8 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
-import { ApiTokenPermissionsContextProvider } from '../../../../../contexts/ApiTokenPermissions';
-import { formatAPIErrors } from '../../../../../utils';
+import { ApiTokenPermissionsContextProvider } from '../../../../../contexts/apiTokenPermissions';
+import { formatAPIErrors } from '../../../../../utils/formatAPIErrors';
 import { selectAdminPermissions } from '../../../../App/selectors';
 import { API_TOKEN_TYPE } from '../../../components/Tokens/constants';
 import FormHead from '../../../components/Tokens/FormHead';

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/CustomizationInfos/index.js

@@ -5,7 +5,7 @@ import { useTracking } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { useConfigurations } from '../../../../../../hooks';
+import { useConfiguration } from '../../../../../../hooks/useConfiguration';
 import { DIMENSION, SIZE } from '../../utils/constants';
 import LogoInput from '../LogoInput';
 
@@ -17,7 +17,7 @@ const CustomizationInfos = forwardRef(({ canUpdate, projectSettingsStored }, ref
   const { trackUsage } = useTracking();
   const {
     logos: { menu, auth },
-  } = useConfigurations();
+  } = useConfiguration();
   const [{ menuLogo, authLogo }, dispatch] = useReducer(reducer, initialState, () =>
     init(initialState, projectSettingsStored)
   );

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js

@@ -29,7 +29,7 @@ import { useIntl } from 'react-intl';
 import { useMutation, useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 
-import { useConfigurations } from '../../../../hooks';
+import { useConfiguration } from '../../../../hooks/useConfiguration';
 import { useEnterprise } from '../../../../hooks/useEnterprise';
 import { selectAdminPermissions } from '../../../App/selectors';
 
@@ -44,7 +44,7 @@ const ApplicationInfosPage = () => {
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
   const { get, post } = useFetchClient();
-  const { updateProjectSettings } = useConfigurations();
+  const { updateProjectSettings } = useConfiguration();
   const permissions = useSelector(selectAdminPermissions);
   const { formatAPIError } = useAPIErrorHandler();
 

package/admin/src/pages/SettingsPage/pages/AuditLogs/SalesPage.js

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { Box, Layout, Main, HeaderLayout, EmptyStateLayout } from '@strapi/design-system';
+import { LinkButton } from '@strapi/design-system/v2';
+import { ExternalLink, EmptyPermissions } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+
+const SalesPage = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Layout>
+      <Main>
+        <HeaderLayout
+          title={formatMessage({ id: 'global.auditLogs', defaultMessage: 'Audit Logs' })}
+          subtitle={formatMessage({
+            id: 'Settings.permissions.auditLogs.listview.header.subtitle',
+            defaultMessage: 'Logs of all the activities that happened in your environment',
+          })}
+        />
+        <Box paddingLeft={10} paddingRight={10}>
+          <EmptyStateLayout
+            icon={<EmptyPermissions width="10rem" />}
+            content={formatMessage({
+              id: 'Settings.permissions.auditLogs.not-available',
+              defaultMessage:
+                'Audit Logs is only available as part of the Enterprise Edition. Upgrade to get a searchable and filterable display of all activities.',
+            })}
+            action={
+              <LinkButton
+                variant="default"
+                endIcon={<ExternalLink />}
+                href="https://strp.cc/45mbAdF"
+                isExternal
+                target="_blank"
+              >
+                {formatMessage({
+                  id: 'global.learn-more',
+                  defaultMessage: 'Learn more',
+                })}
+              </LinkButton>
+            }
+          />
+        </Box>
+      </Main>
+    </Layout>
+  );
+};
+
+export default SalesPage;

package/admin/src/pages/SettingsPage/pages/ReviewWorkflows/SalesPage.js

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { Box, Layout, Main, HeaderLayout, EmptyStateLayout } from '@strapi/design-system';
+import { LinkButton } from '@strapi/design-system/v2';
+import { ExternalLink, EmptyPermissions } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+
+const SalesPage = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Layout>
+      <Main>
+        <HeaderLayout
+          title={formatMessage({
+            id: 'Settings.review-workflows.list.page.title',
+            defaultMessage: 'Review Workflows',
+          })}
+          subtitle={formatMessage({
+            id: 'Settings.review-workflows.list.page.subtitle',
+            defaultMessage: 'Manage your content review process',
+          })}
+        />
+        <Box paddingLeft={10} paddingRight={10}>
+          <EmptyStateLayout
+            icon={<EmptyPermissions width="10rem" />}
+            content={formatMessage({
+              id: 'Settings.review-workflows.not-available',
+              defaultMessage:
+                'Review Workflows is only available as part of the Enterprise Edition. Upgrade to create and manage workflows.',
+            })}
+            action={
+              <LinkButton
+                variant="default"
+                endIcon={<ExternalLink />}
+                href="https://strp.cc/3tdNfJqe"
+                isExternal
+                target="_blank"
+              >
+                {formatMessage({
+                  id: 'global.learn-more',
+                  defaultMessage: 'Learn more',
+                })}
+              </LinkButton>
+            }
+          />
+        </Box>
+      </Main>
+    </Layout>
+  );
+};
+
+export default SalesPage;

package/admin/src/pages/SettingsPage/pages/Roles/CreatePage/index.js

@@ -33,10 +33,10 @@ import { useSelector } from 'react-redux';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { useAdminRolePermissions } from '../../../../../hooks/useAdminRolePermissions';
 import { selectAdminPermissions } from '../../../../App/selectors';
 import Permissions from '../EditPage/components/Permissions';
 import { useAdminRolePermissionLayout } from '../hooks/useAdminRolePermissionLayout';
+import { useAdminRolePermissions } from '../hooks/useAdminRolePermissions';
 
 import schema from './utils/schema';
 

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/index.js

@@ -16,7 +16,7 @@ import upperFirst from 'lodash/upperFirst';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { usePermissionsDataManager } from '../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../hooks/usePermissionsDataManager';
 
 import ActionRow from './ActionRow';
 import createDefaultConditionsForm from './utils/createDefaultConditionsForm';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { usePermissionsDataManager } from '../../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../../hooks/usePermissionsDataManager';
 import ConditionsButton from '../../ConditionsButton';
 import ConditionsModal from '../../ConditionsModal';
 import HiddenAction from '../../HiddenAction';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { usePermissionsDataManager } from '../../../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../../../hooks/usePermissionsDataManager';
 import HiddenAction from '../../../HiddenAction';
 import { cellWidth, rowHeight } from '../../../Permissions/utils/constants';
 import RequiredSign from '../../../RequiredSign';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { usePermissionsDataManager } from '../../../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../../../hooks/usePermissionsDataManager';
 import CollapseLabel from '../../../CollapseLabel';
 import Curve from '../../../Curve';
 import HiddenAction from '../../../HiddenAction';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/GlobalActions/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { usePermissionsDataManager } from '../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../hooks/usePermissionsDataManager';
 import { cellWidth, firstRowWidth } from '../Permissions/utils/constants';
 
 import { findDisplayedActions, getCheckboxesState } from './utils';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PermissionsDataManagerProvider/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import PropTypes from 'prop-types';
 
-import { PermissionsDataManagerContext } from '../../../../../../../contexts';
+import { PermissionsDataManagerContext } from '../../hooks/usePermissionsDataManager';
 
 const PermissionsDataManagerProvider = ({ children, value }) => {
   return (

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/SubCategory/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { usePermissionsDataManager } from '../../../../../../../../hooks';
+import { usePermissionsDataManager } from '../../../hooks/usePermissionsDataManager';
 import ConditionsButton from '../../ConditionsButton';
 import ConditionsModal from '../../ConditionsModal';
 import { getCheckboxState, removeConditionKeyFromData } from '../../utils';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/hooks/usePermissionsDataManager.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+// Note: I had to guess most of these types based on the name and usage, but I actually don't
+// know if they are correct, because the usage is very generic. Feel free to correct them if
+// they create problems.
+export interface PermissionsDataManagerContextValue {
+  availableConditions: unknown[];
+  modifiedData: object;
+  onChangeCollectionTypeLeftActionRowCheckbox: (
+    pathToData: string,
+    propertyName: string,
+    nam: string,
+    value: unknown
+  ) => void;
+  onChangeConditions: (conditions: object) => void;
+  onChangeSimpleCheckbox: (target: { name: string; value: unknown }) => void;
+  onChangeParentCheckbox: (target: { name: string; value: unknown }) => void;
+  onChangeCollectionTypeGlobalActionCheckbox: (
+    kind: string,
+    actionId: string,
+    value: unknown
+  ) => void;
+}
+
+export const PermissionsDataManagerContext =
+  React.createContext<PermissionsDataManagerContextValue | null>(null);
+
+export const usePermissionsDataManager = () => React.useContext(PermissionsDataManagerContext);

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js

@@ -16,9 +16,9 @@ import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
-import { useAdminRolePermissions } from '../../../../../hooks/useAdminRolePermissions';
 import { useAdminRoles } from '../../../../../hooks/useAdminRoles';
 import { useAdminRolePermissionLayout } from '../hooks/useAdminRolePermissionLayout';
+import { useAdminRolePermissions } from '../hooks/useAdminRolePermissions';
 
 import { Permissions, RoleForm } from './components';
 import schema from './utils/schema';