@strapi/admin 4.15.0-alpha.0 → 4.15.0

package/admin/src/components/LanguageProvider.tsx

@@ -0,0 +1,130 @@
+/*
+ *
+ * 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 };
+export type { LanguageProviderProps, LocalesContextValue };

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 };

package/admin/src/components/PluginsInitializer.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+
+import {
+  LoadingIndicatorPage,
+  useStrapiApp,
+  type StrapiAppContextValue,
+} from '@strapi/helper-plugin';
+import produce from 'immer';
+import set from 'lodash/set';
+
+// @ts-expect-error pages/Admin has not been converted yet.
+import Admin from '../pages/Admin';
+
+/**
+ * TODO: this isn't great, and we really should focus on fixing this.
+ */
+const PluginsInitializer = () => {
+  const { plugins: appPlugins } = useStrapiApp();
+  const [{ plugins }, dispatch] = React.useReducer<React.Reducer<State, Action>, State>(
+    reducer,
+    initialState,
+    () => init(appPlugins)
+  );
+  const setPlugin = React.useRef((pluginId: string) => {
+    dispatch({ type: 'SET_PLUGIN_READY', pluginId });
+  });
+
+  const hasApluginNotReady = Object.keys(plugins).some(
+    (plugin) => plugins[plugin].isReady === false
+  );
+
+  /**
+   *
+   * I have spent some time trying to understand what is happening here, and wanted to
+   * leave that knowledge for my future me:
+   *
+   * `initializer` is an undocumented property of the `registerPlugin` API. At the time
+   * of writing it seems only to be used by the i18n plugin.
+   *
+   * How does it work?
+   *
+   * Every plugin that has an `initializer` component defined, receives the
+   * `setPlugin` function as a component prop. In the case of i18n the plugin fetches locales
+   * first and calls `setPlugin` with `pluginId` once they are loaded, which then triggers the
+   * reducer of the admin app defined above.
+   *
+   * Once all plugins are set to `isReady: true` the app renders.
+   *
+   * This API is used to block rendering of the admin app. We should remove that in v5 completely
+   * and make sure plugins can inject data into the global store before they are initialized, to avoid
+   * having a new prop-callback based communication channel between plugins and the core admin app.
+   *
+   */
+
+  if (hasApluginNotReady) {
+    const initializers = Object.keys(plugins).reduce((acc, current) => {
+      const InitializerComponent = plugins[current].initializer;
+
+      if (InitializerComponent) {
+        const key = plugins[current].pluginId;
+
+        acc.push(<InitializerComponent key={key} setPlugin={setPlugin.current} />);
+      }
+
+      return acc;
+    }, [] as React.ReactNode[]);
+
+    return (
+      <>
+        {initializers}
+        <LoadingIndicatorPage />
+      </>
+    );
+  }
+
+  return <Admin />;
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Reducer
+ * -----------------------------------------------------------------------------------------------*/
+
+interface State {
+  plugins: StrapiAppContextValue['plugins'];
+}
+
+const initialState: State = {
+  plugins: {},
+};
+
+type SetPluginReadyAction = {
+  type: 'SET_PLUGIN_READY';
+  pluginId: string;
+};
+
+type Action = SetPluginReadyAction;
+
+const reducer: React.Reducer<State, Action> = (state = initialState, action: Action): State =>
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case 'SET_PLUGIN_READY': {
+        set(draftState, ['plugins', action.pluginId, 'isReady'], true);
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+/* -------------------------------------------------------------------------------------------------
+ * Init state
+ * -----------------------------------------------------------------------------------------------*/
+
+const init = (plugins: State['plugins']): State => {
+  return {
+    plugins: Object.keys(plugins).reduce<State['plugins']>((acc, current) => {
+      acc[current] = { ...plugins[current] };
+
+      return acc;
+    }, {}),
+  };
+};
+
+export { PluginsInitializer };

package/admin/src/components/PrivateRoute.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import { auth } from '@strapi/helper-plugin';
+import { Redirect, Route, useLocation } from 'react-router-dom';
+
+type PropsOf<T> = T extends React.ComponentType<infer P> ? P : object;
+
+type PrivateRouteProps<TComponent extends React.ElementType> = {
+  component: TComponent;
+  path: string;
+} & PropsOf<TComponent>;
+
+const PrivateRoute = <TComponent extends React.ElementType>({
+  component: Component,
+  path,
+  ...rest
+}: PrivateRouteProps<TComponent>) => {
+  const { pathname, search } = useLocation();
+
+  return (
+    <Route
+      path={path}
+      render={(props) =>
+        auth.getToken() !== null ? (
+          <Component {...rest} {...props} />
+        ) : (
+          <Redirect
+            to={{
+              pathname: '/auth/login',
+              search:
+                pathname !== '/'
+                  ? `?redirectTo=${encodeURIComponent(`${pathname}${search}`)}`
+                  : undefined,
+            }}
+          />
+        )
+      }
+    />
+  );
+};
+
+export { PrivateRoute };