@strapi/admin 4.14.3 → 4.14.5

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/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/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

@@ -23,6 +23,9 @@ window.strapi = {
     REVIEW_WORKFLOWS: 'review-workflows',
   },
   projectType: 'Community',
+  flags: {
+    nps: false,
+  },
 };
 
 const customConfig = appCustomisations;
@@ -41,16 +44,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);

package/admin/src/layouts/UnauthenticatedLayout/LocaleToggle/index.js

@@ -9,10 +9,10 @@ import React from 'react';
 import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
-import useLocalesProvider from '../../../components/LocalesProvider/useLocalesProvider';
+import { useLocales } from '../../../components/LanguageProvider';
 
 const LocaleToggle = () => {
-  const { changeLocale, localeNames } = useLocalesProvider();
+  const { changeLocale, localeNames } = useLocales();
   const { locale } = useIntl();
 
   return (

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

@@ -13,8 +13,9 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Route, Switch } from 'react-router-dom';
 
 import GuidedTourModal from '../../components/GuidedTour/Modal';
-import LeftMenu from '../../components/LeftMenu';
-import { useConfigurations, useMenu } from '../../hooks';
+import { LeftMenu } from '../../components/LeftMenu';
+import { useConfiguration } from '../../hooks/useConfiguration';
+import { useMenu } from '../../hooks/useMenu';
 import AppLayout from '../../layouts/AppLayout';
 import { createRoute } from '../../utils';
 import { SET_APP_RUNTIME_STATUS } from '../App/constants';
@@ -73,7 +74,7 @@ const Admin = () => {
   useTrackUsage();
   const { isLoading, generalSectionLinks, pluginsSectionLinks } = useMenu();
   const { menu } = useStrapiApp();
-  const { showTutorials } = useConfigurations();
+  const { showTutorials } = useConfiguration();
 
   const routes = useMemo(() => {
     return menu

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

@@ -21,9 +21,9 @@ import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Route, Switch } from 'react-router-dom';
 
-import PrivateRoute from '../../components/PrivateRoute';
+import { PrivateRoute } from '../../components/PrivateRoute';
 import { ADMIN_PERMISSIONS_CE } from '../../constants';
-import { useConfigurations } from '../../hooks';
+import { useConfiguration } from '../../hooks/useConfiguration';
 import { useEnterprise } from '../../hooks/useEnterprise';
 import { createRoute, makeUniqueRoutes } from '../../utils';
 import AuthPage from '../AuthPage';
@@ -57,7 +57,7 @@ function App() {
     }
   );
   const toggleNotification = useNotification();
-  const { updateProjectSettings } = useConfigurations();
+  const { updateProjectSettings } = useConfiguration();
   const { formatMessage } = useIntl();
   const [{ isLoading, hasAdmin, uuid, deviceId }, setState] = useState({
     isLoading: true,
@@ -180,7 +180,9 @@ function App() {
 
   return (
     <Suspense fallback={<LoadingIndicatorPage />}>
-      <SkipToContent>{formatMessage({ id: 'skipToContent' })}</SkipToContent>
+      <SkipToContent>
+        {formatMessage({ id: 'skipToContent', defaultMessage: 'Skip to content' })}
+      </SkipToContent>
       <TrackingProvider value={trackingInfo}>
         <Switch>
           {authRoutes}

package/admin/src/pages/AuthPage/components/ForgotPassword/index.js

@@ -6,7 +6,7 @@ import { Formik } from 'formik';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

package/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js

@@ -4,7 +4,7 @@ import { Box, Flex, Main, Typography } from '@strapi/design-system';
 import { Link } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

package/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import { Column, LayoutContent } from '../../../../layouts/UnauthenticatedLayout';
 import FieldActionWrapper from '../FieldActionWrapper';
 

package/admin/src/pages/AuthPage/components/Oops/index.js

@@ -4,7 +4,7 @@ import { Box, Flex, Main, Typography } from '@strapi/design-system';
 import { Link, useQuery } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

package/admin/src/pages/AuthPage/components/Register/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import {
   Box,
@@ -26,11 +26,12 @@ import { Formik } from 'formik';
 import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import { useQuery as useReactQuery } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { useNpsSurveySettings } from '../../../../components/NpsSurvey/hooks/useNpsSurveySettings';
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { useNpsSurveySettings } from '../../../../components/NpsSurvey';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, { LayoutContent } from '../../../../layouts/UnauthenticatedLayout';
 import FieldActionWrapper from '../FieldActionWrapper';
 
@@ -50,7 +51,6 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
   const [passwordShown, setPasswordShown] = useState(false);
   const [confirmPasswordShown, setConfirmPasswordShown] = useState(false);
   const [submitCount, setSubmitCount] = useState(0);
-  const [userInfo, setUserInfo] = useState({});
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
   const query = useQuery();
@@ -60,39 +60,34 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
 
   const registrationToken = query.get('registrationToken');
 
-  useEffect(() => {
-    if (registrationToken) {
-      const getData = async () => {
-        try {
-          const {
-            data: { data },
-          } = await get(`/admin/registration-info`, {
-            params: {
-              registrationToken,
-            },
-          });
+  const { data: userInfo } = useReactQuery({
+    queryKey: ['admin', 'registration-info', registrationToken],
+    async queryFn() {
+      const {
+        data: { data },
+      } = await get(`/admin/registration-info`, {
+        params: {
+          registrationToken,
+        },
+      });
 
-          if (data) {
-            setUserInfo(data);
-          }
-        } catch (error) {
-          const message = formatAPIError(error);
+      return data;
+    },
+    enabled: !!registrationToken,
+    initialData: {},
+    onError(err) {
+      const message = formatAPIError(err);
 
-          toggleNotification({
-            type: 'warning',
-            message,
-          });
+      toggleNotification({
+        type: 'warning',
+        message,
+      });
 
-          // Redirect to the oops page in case of an invalid token
-          // @alexandrebodin @JAB I am not sure it is the wanted behavior
-          push(`/auth/oops?info=${encodeURIComponent(message)}`);
-        }
-      };
-
-      getData();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [registrationToken]);
+      // Redirect to the oops page in case of an invalid token
+      // @alexandrebodin @JAB I am not sure it is the wanted behavior
+      push(`/auth/oops?info=${encodeURIComponent(message)}`);
+    },
+  });
 
   function normalizeData(data) {
     return Object.entries(data).reduce((acc, [key, value]) => {

package/admin/src/pages/AuthPage/components/ResetPassword/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

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

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { Redirect, useHistory, useRouteMatch } from 'react-router-dom';
 
 import persistStateToLocaleStorage from '../../components/GuidedTour/utils/persistStateToLocaleStorage';
-import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
+import { useLocales } from '../../components/LanguageProvider';
 import { useEnterprise } from '../../hooks/useEnterprise';
 import formatAPIErrors from '../../utils/formatAPIErrors';
 
@@ -23,7 +23,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
     push,
     location: { search },
   } = useHistory();
-  const { changeLocale } = useLocalesProvider();
+  const { changeLocale } = useLocales();
   const { setSkipped } = useGuidedTour();
   const { trackUsage } = useTracking();
   const {

package/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js

@@ -16,11 +16,9 @@ import PackageStats from './PackageStats';
 
 // Custom component to have an ellipsis after the 2nd line
 const EllipsisText = styled(Typography)`
-  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
-  /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
   overflow: hidden;
 `;
 

package/admin/src/pages/MarketplacePage/hooks/__mocks__/useNavigatorOnline.ts

@@ -0,0 +1 @@
+export const useNavigatorOnline = () => true;

package/admin/src/{hooks/useNavigatorOnLine/index.js → pages/MarketplacePage/hooks/useNavigatorOnline.ts}

@@ -1,21 +1,21 @@
-import { useEffect, useState } from 'react';
+import * as React from 'react';
 
 /**
  * For more details about this hook see:
  * https://www.30secondsofcode.org/react/s/use-navigator-on-line
  */
-const useNavigatorOnLine = () => {
+export const useNavigatorOnline = (): boolean => {
   const onlineStatus =
     typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
       ? navigator.onLine
       : true;
 
-  const [isOnline, setIsOnline] = useState(onlineStatus);
+  const [isOnline, setIsOnline] = React.useState(onlineStatus);
 
   const setOnline = () => setIsOnline(true);
   const setOffline = () => setIsOnline(false);
 
-  useEffect(() => {
+  React.useEffect(() => {
     window.addEventListener('online', setOnline);
     window.addEventListener('offline', setOffline);
 
@@ -27,5 +27,3 @@ const useNavigatorOnLine = () => {
 
   return isOnline;
 };
-
-export default useNavigatorOnLine;