@strapi/admin 4.14.4 → 4.14.6

package/admin/.eslintrc.js

@@ -12,5 +12,17 @@ module.exports = {
       files: ['**/*.ts', '**/*.tsx'],
       extends: ['custom/front/typescript'],
     },
+    {
+      files: ['./tests/*', '**/*.test.*'],
+      env: {
+        jest: true,
+      },
+      rules: {
+        /**
+         * So we can do `import { render } from '@tests/utils'`
+         */
+        'import/no-unresolved': 'off',
+      },
+    },
   ],
 };

package/admin/custom.d.ts

@@ -6,3 +6,23 @@ declare module 'styled-components' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   export interface DefaultTheme extends StrapiTheme {}
 }
+
+declare global {
+  interface Window {
+    strapi: {
+      backendURL: string;
+      isEE: boolean;
+      features: {
+        SSO: 'sso';
+        AUDIT_LOGS: 'audit-logs';
+        REVIEW_WORKFLOWS: 'review-workflows';
+        isEnabled: (featureName?: string) => boolean;
+      };
+      flags: {
+        nps?: boolean;
+      };
+      projectType: 'Community' | 'Enterprise';
+      telemetryDisabled: boolean;
+    };
+  }
+}

package/admin/src/StrapiApp.js

@@ -9,7 +9,7 @@ import { Helmet } from 'react-helmet';
 import { BrowserRouter } from 'react-router-dom';
 
 import Logo from './assets/images/logo-strapi-2022.svg';
-import localStorageKey from './components/LanguageProvider/utils/localStorageKey';
+import { LANGUAGE_LOCAL_STORAGE_KEY } from './components/LanguageProvider';
 import Providers from './components/Providers';
 import { customFields, Plugin } from './core/apis';
 import configureStore from './core/store/configureStore';
@@ -454,21 +454,19 @@ class StrapiApp {
         showReleaseNotification={this.configurations.notifications.releases}
         store={store}
       >
-        <>
-          <Helmet
-            link={[
-              {
-                rel: 'icon',
-                type: 'image/png',
-                href: this.configurations.head.favicon,
-              },
-            ]}
-            htmlAttributes={{ lang: localStorage.getItem(localStorageKey) || 'en' }}
-          />
-          <BrowserRouter basename={basename}>
-            <App store={store} />
-          </BrowserRouter>
-        </>
+        <Helmet
+          link={[
+            {
+              rel: 'icon',
+              type: 'image/png',
+              href: this.configurations.head.favicon,
+            },
+          ]}
+          htmlAttributes={{ lang: localStorage.getItem(LANGUAGE_LOCAL_STORAGE_KEY) || 'en' }}
+        />
+        <BrowserRouter basename={basename}>
+          <App store={store} />
+        </BrowserRouter>
       </Providers>
     );
   }

package/admin/src/components/AuthenticatedApp/index.js

@@ -12,10 +12,10 @@ import { useQueries } from 'react-query';
 //  TODO: DS add loader
 
 import packageJSON from '../../../../package.json';
-import { useConfigurations } from '../../hooks';
+import { useConfiguration } from '../../hooks/useConfiguration';
 import { getFullName, hashAdminUserEmail } from '../../utils';
-import NpsSurvey from '../NpsSurvey';
-import PluginsInitializer from '../PluginsInitializer';
+import { NpsSurvey } from '../NpsSurvey';
+import { PluginsInitializer } from '../PluginsInitializer';
 import RBACProvider from '../RBACProvider';
 
 import { fetchAppInfo, fetchCurrentUserPermissions, fetchUserRoles } from './utils/api';
@@ -31,7 +31,7 @@ const AuthenticatedApp = () => {
   const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
   const [userDisplayName, setUserDisplayName] = useState(userName);
   const [userId, setUserId] = useState(null);
-  const { showReleaseNotification } = useConfigurations();
+  const { showReleaseNotification } = useConfiguration();
   const [
     { data: appInfos, status },
     { data: tagName, isLoading },

package/admin/src/components/ConfigurationProvider.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import { ConfigurationContext, ConfigurationContextValue } from '../contexts/configuration';
+
+export interface ConfigurationProviderProps {
+  children: React.ReactNode;
+  authLogo: string;
+  menuLogo: string;
+  showReleaseNotification?: boolean;
+  showTutorials?: boolean;
+}
+
+type LogoKeys = keyof ConfigurationContextValue['logos'];
+
+const ConfigurationProvider = ({
+  children,
+  authLogo: defaultAuthLogo,
+  menuLogo: defaultMenuLogo,
+  showReleaseNotification = false,
+  showTutorials = false,
+}: ConfigurationProviderProps) => {
+  const [{ menuLogo, authLogo }, setLogos] = React.useState<{
+    [_Key in `${LogoKeys}Logo`]?: ConfigurationContextValue['logos'][LogoKeys]['custom'];
+  }>({
+    menuLogo: null,
+    authLogo: null,
+  });
+
+  const updateProjectSettings: ConfigurationContextValue['updateProjectSettings'] =
+    React.useCallback(
+      ({ menuLogo, authLogo }) => {
+        setLogos({
+          menuLogo: menuLogo || defaultMenuLogo,
+          authLogo: authLogo || defaultAuthLogo,
+        });
+      },
+      [defaultAuthLogo, defaultMenuLogo]
+    );
+
+  const configurationValue = React.useMemo(() => {
+    return {
+      logos: {
+        menu: { custom: menuLogo, default: defaultMenuLogo },
+        auth: { custom: authLogo, default: defaultAuthLogo },
+      },
+      updateProjectSettings,
+      showReleaseNotification,
+      showTutorials,
+    };
+  }, [
+    menuLogo,
+    defaultMenuLogo,
+    authLogo,
+    defaultAuthLogo,
+    updateProjectSettings,
+    showReleaseNotification,
+    showTutorials,
+  ]);
+
+  return (
+    <ConfigurationContext.Provider value={configurationValue}>
+      {children}
+    </ConfigurationContext.Provider>
+  );
+};
+
+export { ConfigurationProvider };

package/admin/src/components/LanguageProvider.tsx

@@ -0,0 +1,129 @@
+/*
+ *
+ * LanguageProvider
+ *
+ * this component connects the redux state language locale to the
+ * IntlProvider component and i18n messages (loaded from `app/translations`)
+ */
+
+import * as React from 'react';
+
+import defaultsDeep from 'lodash/defaultsDeep';
+import { IntlProvider } from 'react-intl';
+
+/* -------------------------------------------------------------------------------------------------
+ * LocalesContext
+ * -----------------------------------------------------------------------------------------------*/
+
+interface LocalesContextValue {
+  changeLocale: (locale: keyof State['localeNames']) => void;
+  localeNames: Record<string, string>;
+}
+
+const LocalesContext = React.createContext<LocalesContextValue>({
+  changeLocale: () => {
+    throw new Error('LocalesContext: changeLocale() is not implemented');
+  },
+  localeNames: {},
+});
+
+const useLocales = () => React.useContext(LocalesContext);
+
+/* -------------------------------------------------------------------------------------------------
+ * LanguageProvider
+ * -----------------------------------------------------------------------------------------------*/
+
+const LANGUAGE_LOCAL_STORAGE_KEY = 'strapi-admin-language';
+
+interface LanguageProviderProps {
+  children: React.ReactNode;
+  localeNames: Record<string, string>;
+  messages: Record<string, Record<string, string>>;
+}
+
+const LanguageProvider = ({ children, localeNames, messages }: LanguageProviderProps) => {
+  const [{ locale }, dispatch] = React.useReducer<React.Reducer<State, Action>, State>(
+    reducer,
+    initialState,
+    () => {
+      const languageFromLocaleStorage = window.localStorage.getItem(LANGUAGE_LOCAL_STORAGE_KEY);
+      if (languageFromLocaleStorage && localeNames[languageFromLocaleStorage]) {
+        return {
+          locale: languageFromLocaleStorage,
+          localeNames,
+        };
+      } else {
+        return {
+          locale: 'en',
+          localeNames,
+        };
+      }
+    }
+  );
+
+  React.useEffect(() => {
+    // Set user language in local storage.
+    window.localStorage.setItem(LANGUAGE_LOCAL_STORAGE_KEY, locale);
+    document.documentElement.setAttribute('lang', locale);
+  }, [locale]);
+
+  const changeLocale = React.useCallback((locale: keyof State['localeNames']) => {
+    dispatch({
+      type: 'CHANGE_LOCALE',
+      locale,
+    });
+  }, []);
+
+  const appMessages = defaultsDeep(messages[locale], messages.en);
+
+  const contextValue = React.useMemo(
+    () => ({ changeLocale, localeNames }),
+    [changeLocale, localeNames]
+  );
+
+  return (
+    <IntlProvider locale={locale} defaultLocale="en" messages={appMessages} textComponent="span">
+      <LocalesContext.Provider value={contextValue}>{children}</LocalesContext.Provider>
+    </IntlProvider>
+  );
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Reducer
+ * -----------------------------------------------------------------------------------------------*/
+
+interface State {
+  localeNames: Record<string, string>;
+  locale: keyof State['localeNames'];
+}
+
+const initialState: State = {
+  localeNames: { en: 'English' },
+  locale: 'en',
+};
+
+interface ChangeLocaleAction {
+  type: 'CHANGE_LOCALE';
+  locale: keyof State['localeNames'];
+}
+
+type Action = ChangeLocaleAction;
+
+const reducer = (state = initialState, action: Action) => {
+  switch (action.type) {
+    case 'CHANGE_LOCALE': {
+      const { locale } = action;
+
+      if (!state.localeNames[locale]) {
+        return state;
+      }
+
+      return { ...state, locale };
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+export { LanguageProvider, useLocales, LANGUAGE_LOCAL_STORAGE_KEY };

package/admin/src/components/{LeftMenu/index.js → LeftMenu.tsx}

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import * as React from 'react';
 
 import { Box, Divider, Flex, FocusTrap, Typography } from '@strapi/design-system';
 import {
@@ -19,12 +19,12 @@ import {
   useTracking,
 } from '@strapi/helper-plugin';
 import { Exit, Write } from '@strapi/icons';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { NavLink as RouterNavLink, useHistory, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { useConfigurations } from '../../hooks';
+import { useConfiguration } from '../hooks/useConfiguration';
+import { Menu } from '../hooks/useMenu';
 
 const LinkUserWrapper = styled(Box)`
   width: ${150 / 16}rem;
@@ -33,7 +33,7 @@ const LinkUserWrapper = styled(Box)`
   left: ${({ theme }) => theme.spaces[5]};
 `;
 
-const LinkUser = styled(RouterNavLink)`
+const LinkUser = styled(RouterNavLink)<{ logout?: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -54,12 +54,14 @@ const LinkUser = styled(RouterNavLink)`
   }
 `;
 
-const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
-  const buttonRef = useRef();
-  const [userLinksVisible, setUserLinksVisible] = useState(false);
+interface LeftMenuProps extends Pick<Menu, 'generalSectionLinks' | 'pluginsSectionLinks'> {}
+
+const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) => {
+  const navUserRef = React.useRef<HTMLDivElement>(null!);
+  const [userLinksVisible, setUserLinksVisible] = React.useState(false);
   const {
     logos: { menu },
-  } = useConfigurations();
+  } = useConfiguration();
   const [condensed, setCondensed] = usePersistentState('navbar-condensed', false);
   const { userDisplayName } = useAppInfo();
   const { formatMessage } = useIntl();
@@ -83,16 +85,19 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
     history.push('/auth/login');
   };
 
-  const handleBlur = (e) => {
+  const handleBlur: React.FocusEventHandler = (e) => {
     if (
       !e.currentTarget.contains(e.relatedTarget) &&
+      /**
+       * TODO: can we replace this by just using the navUserRef?
+       */
       e.relatedTarget?.parentElement?.id !== 'main-nav-user-button'
     ) {
       setUserLinksVisible(false);
     }
   };
 
-  const handleClickOnLink = (destination = null) => {
+  const handleClickOnLink = (destination: string) => {
     trackUsage('willNavigate', { from: pathname, to: destination });
   };
 
@@ -126,6 +131,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
       <NavSections>
         <NavLink
           as={RouterNavLink}
+          // @ts-expect-error the props from the passed as prop are not inferred // joined together
           to="/content-manager"
           icon={<Write />}
           onClick={() => handleClickOnLink('/content-manager')}
@@ -146,6 +152,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
               return (
                 <NavLink
                   as={RouterNavLink}
+                  // @ts-expect-error the props from the passed as prop are not inferred // joined together
                   to={link.to}
                   key={link.to}
                   icon={<Icon />}
@@ -172,8 +179,11 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
                 <NavLink
                   as={RouterNavLink}
                   badgeContent={
-                    (link.notificationsCount > 0 && link.notificationsCount.toString()) || undefined
+                    link.notificationsCount && link.notificationsCount > 0
+                      ? link.notificationsCount.toString()
+                      : undefined
                   }
+                  // @ts-expect-error the props from the passed as prop are not inferred // joined together
                   to={link.to}
                   key={link.to}
                   icon={<LinkIcon />}
@@ -190,7 +200,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
       <NavFooter>
         <NavUser
           id="main-nav-user-button"
-          ref={buttonRef}
+          ref={navUserRef}
           onClick={handleToggleUserLinks}
           initials={initials}
         >
@@ -244,9 +254,4 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   );
 };
 
-LeftMenu.propTypes = {
-  generalSectionLinks: PropTypes.array.isRequired,
-  pluginsSectionLinks: PropTypes.array.isRequired,
-};
-
-export default LeftMenu;
+export { LeftMenu };

package/admin/src/components/{NpsSurvey/index.js → NpsSurvey.tsx}

@@ -13,7 +13,7 @@ import {
   FieldInput,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { auth, useNotification, useAppInfo } from '@strapi/helper-plugin';
+import { auth, useNotification, useAppInfo, usePersistentState } from '@strapi/helper-plugin';
 import { Cross } from '@strapi/icons';
 import { Formik, Form } from 'formik';
 import { useIntl } from 'react-intl';
@@ -21,8 +21,6 @@ import { useMutation } from 'react-query';
 import styled, { useTheme } from 'styled-components';
 import * as yup from 'yup';
 
-import { useNpsSurveySettings } from './hooks/useNpsSurveySettings';
-
 const FieldWrapper = styled(Field)`
   height: ${32 / 16}rem;
   width: ${32 / 16}rem;
@@ -67,21 +65,27 @@ const delays = {
 
 const ratingArray = [...Array(11).keys()];
 
-const checkIfShouldShowSurvey = (settings) => {
+const checkIfShouldShowSurvey = (settings: NpsSurveySettings) => {
   const { enabled, lastResponseDate, firstDismissalDate, lastDismissalDate } = settings;
 
   // This function goes through all the cases where we'd want to not show the survey:
-  // 1. If the survey is disabled, abort mission, don't bother checking the other settings.
-  // 2. If the user has already responded to the survey, check if enough time has passed since the last response.
-  // 3. If the user has dismissed the survey twice or more before, check if enough time has passed since the last dismissal.
-  // 4. If the user has only dismissed the survey once before, check if enough time has passed since the first dismissal.
+  // 1. If the survey is disabled by strapi, abort mission, don't bother checking the other settings.
+  // 2. If the survey is disabled by user, abort mission, don't bother checking the other settings.
+  // 3. If the user has already responded to the survey, check if enough time has passed since the last response.
+  // 4. If the user has dismissed the survey twice or more before, check if enough time has passed since the last dismissal.
+  // 5. If the user has only dismissed the survey once before, check if enough time has passed since the first dismissal.
   // If none of these cases check out, then we show the survey.
   // Note that submitting a response resets the dismissal counts.
-  // Checks 3 and 4 should not be reversed, since the first dismissal will also exist if the user has dismissed the survey twice or more before.
+  // Checks 4 and 5 should not be reversed, since the first dismissal will also exist if the user has dismissed the survey twice or more before.
 
   // For users who had created an account before the NPS feature was introduced,
   // we assume that they would have enabled the NPS feature if they had the chance.
 
+  // Global strapi disable for NSP.
+  if (window.strapi.flags.nps === false) {
+    return false;
+  }
+
   // User chose not to enable the NPS feature when signing up
   if (enabled === false) {
     return false;
@@ -132,7 +136,16 @@ const NpsSurvey = () => {
   const toggleNotification = useNotification();
   const { currentEnvironment, strapiVersion } = useAppInfo();
 
-  const { mutate, isLoading } = useMutation(
+  interface NpsSurveyMutationBody {
+    email: string;
+    rating: number | null;
+    comment: string;
+    environment?: string;
+    version?: string;
+    license: 'Enterprise' | 'Community';
+  }
+
+  const { mutate, isLoading } = useMutation<unknown, unknown, NpsSurveyMutationBody>(
     async (form) => {
       const res = await fetch('https://analytics.strapi.io/submit-nps', {
         method: 'POST',
@@ -152,7 +165,7 @@ const NpsSurvey = () => {
       onSuccess() {
         setNpsSurveySettings((settings) => ({
           ...settings,
-          lastResponseDate: new Date(),
+          lastResponseDate: new Date().toString(),
           firstDismissalDate: null,
           lastDismissalDate: null,
         }));
@@ -165,7 +178,7 @@ const NpsSurvey = () => {
       onError() {
         toggleNotification({
           type: 'warning',
-          message: formatMessage({ id: 'notification.error' }),
+          message: formatMessage({ id: 'notification.error', defaultMessage: 'An error occurred' }),
         });
       },
     }
@@ -197,12 +210,18 @@ const NpsSurvey = () => {
     return null;
   }
 
-  const handleSubmitResponse = ({ npsSurveyRating: rating, npsSurveyFeedback: comment }) => {
-    const { email } = auth.getUserInfo();
+  const handleSubmitResponse = ({
+    npsSurveyRating,
+    npsSurveyFeedback,
+  }: {
+    npsSurveyRating: NpsSurveyMutationBody['rating'];
+    npsSurveyFeedback: NpsSurveyMutationBody['comment'];
+  }) => {
+    const userInfo = auth.getUserInfo();
     mutate({
-      email,
-      rating,
-      comment,
+      email: typeof userInfo === 'object' && userInfo !== null ? userInfo.email : '',
+      rating: npsSurveyRating,
+      comment: npsSurveyFeedback,
       environment: currentEnvironment,
       version: strapiVersion,
       license: window.strapi.projectType,
@@ -218,10 +237,10 @@ const NpsSurvey = () => {
 
       if (settings.firstDismissalDate) {
         // If the user dismisses the survey for the second time
-        nextSettings.lastDismissalDate = new Date();
+        nextSettings.lastDismissalDate = new Date().toString();
       } else {
         // If the user dismisses the survey for the first time
-        nextSettings.firstDismissalDate = new Date();
+        nextSettings.firstDismissalDate = new Date().toString();
       }
 
       return nextSettings;
@@ -295,7 +314,7 @@ const NpsSurvey = () => {
                       return (
                         <FieldWrapper
                           key={number}
-                          className={values.npsSurveyRating === number ? 'selected' : null} // "selected" class added when child radio button is checked
+                          className={values.npsSurveyRating === number ? 'selected' : undefined} // "selected" class added when child radio button is checked
                           hasRadius
                           background="primary100"
                           borderColor="primary200"
@@ -365,4 +384,32 @@ const NpsSurvey = () => {
   );
 };
 
-export default NpsSurvey;
+interface NpsSurveySettings {
+  enabled: boolean;
+  lastResponseDate: string | null;
+  firstDismissalDate: string | null;
+  lastDismissalDate: string | null;
+}
+
+/**
+ * We exported to make it available during admin user registration.
+ * Because we only enable the NPS for users who subscribe to the newsletter when signing up
+ */
+function useNpsSurveySettings() {
+  const [npsSurveySettings, setNpsSurveySettings] = usePersistentState<NpsSurveySettings>(
+    'STRAPI_NPS_SURVEY_SETTINGS',
+    {
+      enabled: true,
+      lastResponseDate: null,
+      firstDismissalDate: null,
+      lastDismissalDate: null,
+    }
+  );
+
+  /**
+   * TODO: should this just be an array so we can alias the `usePersistentState` hook?
+   */
+  return { npsSurveySettings, setNpsSurveySettings };
+}
+
+export { NpsSurvey, useNpsSurveySettings };