@strapi/admin 4.15.0-alpha.0 → 4.15.0

package/admin/src/hooks/{useAdminRoles/index.js → useAdminRoles.ts}

@@ -1,10 +1,18 @@
 import * as React from 'react';
 
 import { useCollator, useFetchClient } from '@strapi/helper-plugin';
+import { Entity } from '@strapi/types';
 import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';
 
-export const useAdminRoles = (params = {}, queryOptions = {}) => {
+import { RoleEntity } from '../../../shared/entities';
+import { APIBaseParams, APIResponse } from '../types/adminAPI';
+
+export interface APIRolesQueryParams extends APIBaseParams {
+  id?: null | Entity.ID;
+}
+
+export const useAdminRoles = (params: APIRolesQueryParams = {}, queryOptions = {}) => {
   const { id = '', ...queryParams } = params;
 
   const { get } = useFetchClient();
@@ -15,9 +23,15 @@ export const useAdminRoles = (params = {}, queryOptions = {}) => {
   const { data, error, isError, isLoading, refetch } = useQuery(
     ['roles', id, queryParams],
     async () => {
-      const { data } = await get(`/admin/roles/${id ?? ''}`, {
-        params: queryParams,
-      });
+      /**
+       * TODO: can we infer if it's an array or not based on the appearance of `id`?
+       */
+      const { data } = await get<APIResponse<RoleEntity | RoleEntity[]>>(
+        `/admin/roles/${id ?? ''}`,
+        {
+          params: queryParams,
+        }
+      );
 
       return data;
     },
@@ -29,16 +43,18 @@ export const useAdminRoles = (params = {}, queryOptions = {}) => {
   // value, which later on triggers infinite loops if used in the
   // dependency arrays of other hooks
   const roles = React.useMemo(() => {
-    let roles = [];
+    let roles: RoleEntity[] = [];
 
-    if (id && data) {
-      roles = [data.data];
-    } else if (Array.isArray(data?.data)) {
-      roles = data.data;
+    if (data) {
+      if (Array.isArray(data.data)) {
+        roles = data.data;
+      } else {
+        roles = [data.data];
+      }
     }
 
     return [...roles].sort((a, b) => formatter.compare(a.name, b.name));
-  }, [data, id, formatter]);
+  }, [data, formatter]);
 
   return {
     roles,

package/admin/src/hooks/useAdminUsers.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import { useFetchClient } from '@strapi/helper-plugin';
+import { Entity } from '@strapi/types';
+import { useQuery } from 'react-query';
+
+import { UserEntity } from '../../../shared/entities';
+import { APIBaseParams, APIResponsePagination, APIResponseUsersLegacy } from '../types/adminAPI';
+
+export interface APIUsersQueryParams extends APIBaseParams {
+  id?: null | Entity.ID;
+}
+
+export function useAdminUsers(params: APIUsersQueryParams = {}, queryOptions = {}) {
+  const { id = '', ...queryParams } = params;
+
+  const { get } = useFetchClient();
+
+  const { data, isError, isLoading, refetch } = useQuery(
+    ['users', id, queryParams],
+    async () => {
+      const {
+        data: { data },
+      } = await get<
+        APIResponseUsersLegacy<
+          UserEntity | { pagination: APIResponsePagination; results: UserEntity[] }
+        >
+      >(`/admin/users/${id}`, {
+        params: queryParams,
+      });
+
+      return data;
+    },
+    queryOptions
+  );
+
+  // the return value needs to be memoized, because intantiating
+  // an empty array as default value would lead to an unstable return
+  // value, which later on triggers infinite loops if used in the
+  // dependency arrays of other hooks
+  const users = React.useMemo(() => {
+    let users: UserEntity[] = [];
+
+    if (data) {
+      if ('results' in data) {
+        if (Array.isArray(data.results)) {
+          users = data.results;
+        }
+      } else {
+        users = [data];
+      }
+    }
+
+    return users;
+  }, [data]);
+
+  return {
+    users,
+    pagination: React.useMemo(() => (data && 'pagination' in data) ?? null, [data]),
+    isLoading,
+    isError,
+    refetch,
+  };
+}

package/admin/src/hooks/useConfiguration.ts

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { ConfigurationContext } from '../contexts/configuration';
+
+export const useConfiguration = () => useContext(ConfigurationContext);

package/admin/src/hooks/{useContentTypes/useContentTypes.js → useContentTypes.ts}

@@ -1,32 +1,55 @@
 import * as React from 'react';
 
 import { useAPIErrorHandler, useFetchClient, useNotification } from '@strapi/helper-plugin';
+import { AxiosError } from 'axios';
 import { useQueries } from 'react-query';
 
+import { Component, ContentType } from '../../../shared/schema';
+import { APIResponse } from '../types/adminAPI';
+
 export function useContentTypes() {
   const { get } = useFetchClient();
   const { formatAPIError } = useAPIErrorHandler();
   const toggleNotification = useNotification();
-  const queries = useQueries(
-    ['components', 'content-types'].map((type) => {
-      return {
-        queryKey: ['content-manager', type],
-        async queryFn() {
-          const {
-            data: { data },
-          } = await get(`/content-manager/${type}`);
-
-          return data;
-        },
-        onError(error) {
+  const queries = useQueries([
+    {
+      queryKey: ['content-manager', 'components'],
+      async queryFn() {
+        const {
+          data: { data },
+        } = await get<APIResponse<Component[]>>(`/content-manager/components`);
+
+        return data;
+      },
+      onError(error: unknown) {
+        if (error instanceof AxiosError) {
+          toggleNotification({
+            type: 'warning',
+            message: formatAPIError(error),
+          });
+        }
+      },
+    },
+
+    {
+      queryKey: ['content-manager', 'content-types'],
+      async queryFn() {
+        const {
+          data: { data },
+        } = await get<APIResponse<ContentType[]>>(`/content-manager/content-types`);
+
+        return data;
+      },
+      onError(error: unknown) {
+        if (error instanceof AxiosError) {
           toggleNotification({
             type: 'warning',
             message: formatAPIError(error),
           });
-        },
-      };
-    })
-  );
+        }
+      },
+    },
+  ]);
 
   const [components, contentTypes] = queries;
   const isLoading = components.isLoading || contentTypes.isLoading;

package/admin/src/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export function useDebounce<TValue>(value: TValue, delay: number): TValue {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+
+  React.useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/admin/src/hooks/{useEnterprise/useEnterprise.js → useEnterprise.ts}

@@ -6,17 +6,27 @@ function isEnterprise() {
   return window.strapi.isEE;
 }
 
-export function useEnterprise(
-  ceData,
-  eeCallback,
-  { defaultValue = null, combine = (ceData, eeData) => eeData, enabled = true } = {}
+export interface UseEnterpriseOptions<TCEData, TEEData, TCombinedData> {
+  defaultValue?: TCEData | TEEData | null;
+  combine?: (ceData: TCEData, eeData: TEEData) => TCEData | TEEData | TCombinedData;
+  enabled?: boolean;
+}
+
+export function useEnterprise<TCEData, TEEData, TCombinedData = unknown>(
+  ceData: TCEData,
+  eeCallback: () => Promise<TEEData>,
+  {
+    defaultValue = null,
+    combine = (ceData: TCEData, eeData: TEEData) => eeData,
+    enabled = true,
+  }: UseEnterpriseOptions<TCEData, TEEData, TCombinedData> = {}
 ) {
   const eeCallbackRef = useCallbackRef(eeCallback);
   const combineCallbackRef = useCallbackRef(combine);
 
   // We have to use a nested object here, because functions (e.g. Components)
   // can not be stored as value directly
-  const [{ data }, setData] = React.useState({
+  const [{ data }, setData] = React.useState<{ data: TCEData | TEEData | TCombinedData | null }>({
     data: isEnterprise() && enabled ? defaultValue : ceData,
   });
 

package/admin/src/hooks/useLicenseLimitNotification.ts

@@ -0,0 +1,3 @@
+export const useLicenseLimitNotification = () => {
+  return null;
+};

package/admin/src/hooks/useMenu.ts

@@ -0,0 +1,153 @@
+import * as React from 'react';
+
+import {
+  Permission,
+  hasPermissions,
+  useAppInfo,
+  useRBACProvider,
+  useStrapiApp,
+  StrapiAppContextValue,
+} from '@strapi/helper-plugin';
+import { Cog, Puzzle, ShoppingCart } from '@strapi/icons';
+import cloneDeep from 'lodash/cloneDeep';
+import { useSelector } from 'react-redux';
+
+// @ts-expect-error - no types, yet.
+import { selectAdminPermissions } from '../pages/App/selectors';
+
+/* -------------------------------------------------------------------------------------------------
+ * useMenu
+ * -----------------------------------------------------------------------------------------------*/
+
+type MenuItem = StrapiAppContextValue['menu'][number];
+
+export interface Menu {
+  generalSectionLinks: MenuItem[];
+  pluginsSectionLinks: MenuItem[];
+  isLoading: boolean;
+}
+
+const useMenu = () => {
+  const { allPermissions: userPermissions } = useRBACProvider();
+  const { shouldUpdateStrapi } = useAppInfo();
+  const { menu } = useStrapiApp();
+  const permissions = useSelector(selectAdminPermissions);
+  const [menuWithUserPermissions, setMenuWithUserPermissions] = React.useState<Menu>({
+    generalSectionLinks: [
+      {
+        icon: Puzzle,
+        intlLabel: {
+          id: 'global.plugins',
+          defaultMessage: 'Plugins',
+        },
+        to: '/list-plugins',
+        // @ts-expect-error - we need the permissions type from the plugin
+        permissions: permissions.marketplace.main,
+      },
+      {
+        icon: ShoppingCart,
+        intlLabel: {
+          id: 'global.marketplace',
+          defaultMessage: 'Marketplace',
+        },
+        to: '/marketplace',
+        // @ts-expect-error - we need the permissions type from the plugin
+        permissions: permissions.marketplace.main,
+      },
+      {
+        icon: Cog,
+        intlLabel: {
+          id: 'global.settings',
+          defaultMessage: 'Settings',
+        },
+        to: '/settings',
+        // Permissions of this link are retrieved in the init phase
+        // using the settings menu
+        permissions: [],
+        notificationsCount: 0,
+      },
+    ],
+    pluginsSectionLinks: [],
+    isLoading: true,
+  });
+  const generalSectionLinksRef = React.useRef(menuWithUserPermissions.generalSectionLinks);
+
+  React.useEffect(() => {
+    async function applyMenuPermissions() {
+      const authorizedPluginSectionLinks = await getPluginSectionLinks(userPermissions, menu);
+
+      const authorizedGeneralSectionLinks = await getGeneralLinks(
+        userPermissions,
+        generalSectionLinksRef.current,
+        shouldUpdateStrapi
+      );
+
+      setMenuWithUserPermissions((state) => ({
+        ...state,
+        generalSectionLinks: authorizedGeneralSectionLinks,
+        pluginsSectionLinks: authorizedPluginSectionLinks,
+        isLoading: false,
+      }));
+    }
+
+    applyMenuPermissions();
+  }, [
+    setMenuWithUserPermissions,
+    generalSectionLinksRef,
+    userPermissions,
+    menu,
+    permissions,
+    shouldUpdateStrapi,
+  ]);
+
+  return menuWithUserPermissions;
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Utils
+ * -----------------------------------------------------------------------------------------------*/
+
+const getGeneralLinks = async (
+  userPermissions: Permission[],
+  generalSectionRawLinks: MenuItem[],
+  shouldUpdateStrapi: boolean = false
+) => {
+  const generalSectionLinksPermissions = await Promise.all(
+    generalSectionRawLinks.map(({ permissions }) => hasPermissions(userPermissions, permissions))
+  );
+
+  const authorizedGeneralSectionLinks = generalSectionRawLinks.filter(
+    (_, index) => generalSectionLinksPermissions[index]
+  );
+
+  const settingsLinkIndex = authorizedGeneralSectionLinks.findIndex(
+    (obj) => obj.to === '/settings'
+  );
+
+  if (settingsLinkIndex === -1) {
+    return [];
+  }
+
+  const authorizedGeneralLinksClone = cloneDeep(authorizedGeneralSectionLinks);
+
+  authorizedGeneralLinksClone[settingsLinkIndex].notificationsCount = shouldUpdateStrapi ? 1 : 0;
+
+  return authorizedGeneralLinksClone;
+};
+
+const getPluginSectionLinks = async (
+  userPermissions: Permission[],
+  pluginsSectionRawLinks: MenuItem[]
+) => {
+  const pluginSectionLinksPermissions = await Promise.all(
+    pluginsSectionRawLinks.map(({ permissions }) => hasPermissions(userPermissions, permissions))
+  );
+
+  const authorizedPluginSectionLinks = pluginsSectionRawLinks.filter(
+    (_, index) => pluginSectionLinksPermissions[index]
+  );
+
+  return authorizedPluginSectionLinks;
+};
+
+export { useMenu };

package/admin/src/hooks/useSettingsForm/index.js

@@ -1,13 +1,25 @@
 import { useEffect, useReducer } from 'react';
 
-import { useFetchClient, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import { getYupInnerErrors, useFetchClient, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
 import omit from 'lodash/omit';
 
-import { checkFormValidity, formatAPIErrors } from '../../utils';
+import { formatAPIErrors } from '../../utils/formatAPIErrors';
 
 import init from './init';
 import { initialState, reducer } from './reducer';
 
+const checkFormValidity = async (data, schema) => {
+  let errors = null;
+
+  try {
+    await schema.validate(data, { abortEarly: false });
+  } catch (err) {
+    errors = getYupInnerErrors(err);
+  }
+
+  return errors;
+};
+
 /**
  * TODO: refactor this, it's confusing and hard to read.
  * It's also only used in `Settings/pages/SingleSignOn` so it can

package/admin/src/hooks/useSettingsMenu/constants.js

@@ -21,6 +21,34 @@ export const LINKS_CE = {
       to: '/settings/transfer-tokens?sort=name:ASC',
       id: 'transfer-tokens',
     },
+    // If the Enterprise feature is not enabled and if the config doesn't disable it, we promote the Enterprise feature by displaying them in the settings menu.
+    // Disable this by adding "promoteEE: false" to your `./config/admin.js` file
+    ...(!window.strapi.features.isEnabled(window.strapi.features.SSO) &&
+    window.strapi?.flags?.promoteEE
+      ? [
+          {
+            intlLabel: { id: 'Settings.sso.title', defaultMessage: 'Single Sign-On' },
+            to: '/settings/purchase-single-sign-on',
+            id: 'sso',
+            lockIcon: true,
+          },
+        ]
+      : []),
+
+    ...(!window.strapi.features.isEnabled(window.strapi.features.REVIEW_WORKFLOWS) &&
+    window.strapi?.flags?.promoteEE
+      ? [
+          {
+            intlLabel: {
+              id: 'Settings.review-workflows.page.title',
+              defaultMessage: 'Review Workflows',
+            },
+            to: '/settings/purchase-review-workflows',
+            id: 'review-workflows',
+            lockIcon: true,
+          },
+        ]
+      : []),
   ],
 
   admin: [
@@ -35,5 +63,16 @@ export const LINKS_CE = {
       to: '/settings/users?pageSize=10&page=1&sort=firstname',
       id: 'users',
     },
+    ...(!window.strapi.features.isEnabled(window.strapi.features.AUDIT_LOGS) &&
+    window.strapi?.flags?.promoteEE
+      ? [
+          {
+            intlLabel: { id: 'global.auditLogs', defaultMessage: 'Audit Logs' },
+            to: '/settings/purchase-audit-logs',
+            id: 'auditLogs',
+            lockIcon: true,
+          },
+        ]
+      : []),
   ],
 };

package/admin/src/hooks/useThemeToggle.ts

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+
+import { ThemeToggleContext } from '../contexts/themeToggle';
+
+export const useThemeToggle = () => {
+  const context = useContext(ThemeToggleContext);
+
+  return context;
+};

package/admin/src/index.js

@@ -2,10 +2,9 @@ import { getFetchClient } from '@strapi/helper-plugin';
 import { createRoot } from 'react-dom/client';
 
 import appCustomisations from './app';
-import { Components, Fields, Middlewares, Reducers } from './core/apis';
+import { Components, Fields, Middlewares } from './core/apis';
 // eslint-disable-next-line import/extensions
 import plugins from './plugins';
-import appReducers from './reducers';
 
 window.strapi = {
   /**
@@ -23,6 +22,10 @@ window.strapi = {
     REVIEW_WORKFLOWS: 'review-workflows',
   },
   projectType: 'Community',
+  flags: {
+    nps: false,
+    promoteEE: true,
+  },
 };
 
 const customConfig = appCustomisations;
@@ -32,7 +35,6 @@ const library = {
   fields: Fields(),
 };
 const middlewares = Middlewares();
-const reducers = Reducers({ appReducers });
 
 const MOUNT_NODE = document.getElementById('app');
 
@@ -41,16 +43,16 @@ const run = async () => {
   try {
     const {
       data: {
-        data: { isEE, features },
+        data: { isEE, features, flags },
       },
     } = await get('/admin/project-type');
 
     window.strapi.isEE = isEE;
+    window.strapi.flags = flags;
     window.strapi.features = {
       ...window.strapi.features,
       isEnabled: (featureName) => features.some((feature) => feature.name === featureName),
     };
-
     window.strapi.projectType = isEE ? 'Enterprise' : 'Community';
   } catch (err) {
     console.error(err);
@@ -66,7 +68,6 @@ const run = async () => {
     adminConfig: customConfig,
     bootstrap: customConfig,
     middlewares,
-    reducers,
   });
 
   await app.bootstrapAdmin();

package/admin/src/layouts/{AppLayout/index.js → AppLayout.tsx}

@@ -1,7 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Box, Flex, SkipToContent } from '@strapi/design-system';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
@@ -9,7 +8,12 @@ const FlexBox = styled(Box)`
   flex: 1;
 `;
 
-const AppLayout = ({ children, sideNav }) => {
+interface AppLayoutProps {
+  children: React.ReactNode;
+  sideNav: React.ReactNode;
+}
+
+export const AppLayout = ({ children, sideNav }: AppLayoutProps) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -24,10 +28,3 @@ const AppLayout = ({ children, sideNav }) => {
     </Box>
   );
 };
-
-AppLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-  sideNav: PropTypes.node.isRequired,
-};
-
-export default AppLayout;

package/admin/src/layouts/UnauthenticatedLayout.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+import { Box, Flex, SingleSelect, SingleSelectOption } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+
+import { useLocales } from '../components/LanguageProvider';
+
+const Wrapper = styled(Box)`
+  margin: 0 auto;
+  width: 552px;
+`;
+
+export const Column = styled(Flex)`
+  flex-direction: column;
+`;
+
+const LocaleToggle = () => {
+  const { changeLocale, localeNames } = useLocales();
+  const { formatMessage, locale } = useIntl();
+
+  return (
+    <SingleSelect
+      aria-label={formatMessage({
+        id: 'global.localeToggle.label',
+        defaultMessage: 'Select interface language',
+      })}
+      value={locale}
+      onChange={(language) => {
+        changeLocale(language as string);
+      }}
+    >
+      {Object.entries(localeNames).map(([language, name]) => (
+        <SingleSelectOption key={language} value={language}>
+          {name}
+        </SingleSelectOption>
+      ))}
+    </SingleSelect>
+  );
+};
+
+interface LayoutContentProps {
+  children: React.ReactNode;
+}
+
+export const LayoutContent = ({ children }: LayoutContentProps) => (
+  <Wrapper
+    shadow="tableShadow"
+    hasRadius
+    paddingTop={9}
+    paddingBottom={9}
+    paddingLeft={10}
+    paddingRight={10}
+    background="neutral0"
+  >
+    {children}
+  </Wrapper>
+);
+
+interface UnauthenticatedLayoutProps {
+  children: React.ReactNode;
+}
+
+export const UnauthenticatedLayout = ({ children }: UnauthenticatedLayoutProps) => {
+  return (
+    <div>
+      <Flex as="header" justifyContent="flex-end">
+        <Box paddingTop={6} paddingRight={8}>
+          <LocaleToggle />
+        </Box>
+      </Flex>
+      <Box paddingTop={2} paddingBottom={11}>
+        {children}
+      </Box>
+    </div>
+  );
+};