@strapi/admin 4.14.3 → 4.14.5

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

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

@@ -12,12 +12,12 @@ import PropTypes from 'prop-types';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
 
-import { AdminContext } from '../../contexts';
-import ConfigurationsProvider from '../ConfigurationsProvider';
+import { AdminContext } from '../../contexts/admin';
+import { ConfigurationProvider } from '../ConfigurationProvider';
 import GuidedTour from '../GuidedTour';
-import LanguageProvider from '../LanguageProvider';
-import Theme from '../Theme';
-import ThemeToggleProvider from '../ThemeToggleProvider';
+import { LanguageProvider } from '../LanguageProvider';
+import { Theme } from '../Theme';
+import { ThemeToggleProvider } from '../ThemeToggleProvider';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -56,7 +56,7 @@ const Providers = ({
           <QueryClientProvider client={queryClient}>
             <Provider store={store}>
               <AdminContext.Provider value={{ getAdminInjectedComponents }}>
-                <ConfigurationsProvider
+                <ConfigurationProvider
                   authLogo={authLogo}
                   menuLogo={menuLogo}
                   showReleaseNotification={showReleaseNotification}
@@ -83,7 +83,7 @@ const Providers = ({
                       </CustomFieldsProvider>
                     </LibraryProvider>
                   </StrapiAppProvider>
-                </ConfigurationsProvider>
+                </ConfigurationProvider>
               </AdminContext.Provider>
             </Provider>
           </QueryClientProvider>
@@ -95,7 +95,7 @@ const Providers = ({
 
 Providers.propTypes = {
   authLogo: PropTypes.oneOfType([PropTypes.string, PropTypes.any]).isRequired,
-  children: PropTypes.element.isRequired,
+  children: PropTypes.node.isRequired,
   components: PropTypes.object.isRequired,
   customFields: PropTypes.object.isRequired,
   fields: PropTypes.object.isRequired,

package/admin/src/components/Theme.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+import { DesignSystemProvider } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { createGlobalStyle } from 'styled-components';
+
+import { useThemeToggle } from '../hooks/useThemeToggle';
+
+interface ThemeProps {
+  children: React.ReactNode;
+}
+
+const Theme = ({ children }: ThemeProps) => {
+  const { currentTheme, themes } = useThemeToggle();
+  const { locale } = useIntl();
+
+  return (
+    <DesignSystemProvider
+      locale={locale}
+      /**
+       * TODO: could we make this neater i.e. by setting up the context to throw
+       * if it can't find it, that way the type is always fully defined and we're
+       * not checking it all the time...
+       */
+      theme={currentTheme && themes ? themes[currentTheme] : themes?.light}
+    >
+      {children}
+      <GlobalStyle />
+    </DesignSystemProvider>
+  );
+};
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    background: ${({ theme }) => theme.colors.neutral100};
+  }
+`;
+
+export { Theme };

package/admin/src/components/ThemeToggleProvider.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+import { DefaultTheme } from 'styled-components';
+
+import { ThemeToggleContext, ThemeName } from '../contexts/themeToggle';
+
+const THEME_KEY = 'STRAPI_THEME';
+
+const getDefaultTheme = () => {
+  const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  const persistedTheme = localStorage.getItem(THEME_KEY) as ThemeName | null;
+
+  if (!persistedTheme) {
+    localStorage.setItem(THEME_KEY, browserTheme);
+  }
+
+  return persistedTheme || browserTheme;
+};
+
+interface ThemeToggleProviderProps {
+  children: React.ReactNode;
+  themes: {
+    light: DefaultTheme;
+    dark: DefaultTheme;
+  };
+}
+
+const ThemeToggleProvider = ({ children, themes }: ThemeToggleProviderProps) => {
+  const [currentTheme, setCurrentTheme] = React.useState(getDefaultTheme());
+
+  const handleChangeTheme = React.useCallback(
+    (nextTheme: ThemeName) => {
+      setCurrentTheme(nextTheme);
+      localStorage.setItem(THEME_KEY, nextTheme);
+    },
+    [setCurrentTheme]
+  );
+
+  const themeValues = React.useMemo(() => {
+    return {
+      currentTheme,
+      onChangeTheme: handleChangeTheme,
+      themes,
+    };
+  }, [currentTheme, handleChangeTheme, themes]);
+
+  return <ThemeToggleContext.Provider value={themeValues}>{children}</ThemeToggleContext.Provider>;
+};
+
+export { ThemeToggleProvider };

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

@@ -1,8 +1,6 @@
-import React from 'react';
-
 import styled from 'styled-components';
 
-import { useConfigurations } from '../../hooks';
+import { useConfiguration } from '../hooks/useConfiguration';
 
 const Img = styled.img`
   height: ${72 / 16}rem;
@@ -11,9 +9,9 @@ const Img = styled.img`
 const Logo = () => {
   const {
     logos: { auth },
-  } = useConfigurations();
+  } = useConfiguration();
 
   return <Img src={auth?.custom ?? auth.default} aria-hidden alt="" />;
 };
 
-export default Logo;
+export { Logo };

package/admin/src/components/{LocalesProvider/__mocks__/useLocalesProvider.js → __mocks__/LanguageProvider.js}

@@ -1,4 +1,4 @@
-export default function useLocalesProvider() {
+export function useLocalesProvider() {
   return {
     changeLocale() {},
     localeNames: { en: 'English' },

package/admin/src/content-manager/components/BlocksEditor/BlocksInput/index.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { Box } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { Editable, useSlate } from 'slate-react';
 import { useTheme } from 'styled-components';
@@ -13,6 +14,7 @@ const getEditorStyle = (theme) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: theme.spaces[2],
+  height: '100%',
 });
 
 const baseRenderLeaf = (props, modifiers) => {
@@ -37,9 +39,10 @@ const baseRenderElement = (props, blocks) => {
   return block.renderElement(props);
 };
 
-const BlocksInput = ({ readOnly }) => {
+const BlocksInput = ({ disabled, placeholder }) => {
   const theme = useTheme();
   const editor = useSlate();
+  const blocksRef = React.useRef();
 
   // Create renderLeaf function based on the modifiers store
   const modifiers = useModifiersStore();
@@ -62,26 +65,82 @@ const BlocksInput = ({ readOnly }) => {
     }
   };
 
+  const handleBackspaceEvent = (event) => {
+    const selectedNode = editor.children[editor.selection.anchor.path[0]];
+    const selectedBlock = Object.values(blocks).find((block) => block.matchNode(selectedNode));
+
+    if (selectedBlock.handleBackspaceKey) {
+      selectedBlock.handleBackspaceKey(editor, event);
+    }
+  };
+
   const handleKeyDown = (event) => {
     if (event.key === 'Enter') {
       event.preventDefault();
       handleEnter();
     }
+    if (event.key === 'Backspace') {
+      handleBackspaceEvent(event);
+    }
+  };
+
+  /**
+   *  scrollSelectionIntoView : Slate's default method to scroll a DOM selection into the view,
+   *  thats shifting layout for us when there is a overflowY:scroll on the viewport.
+   *  We are overriding it to check if the selection is not fully within the visible area of the editor,
+   *  we use scrollBy one line to the bottom
+   */
+  const handleScrollSelectionIntoView = (_, domRange) => {
+    const domRect = domRange.getBoundingClientRect();
+    const blocksInput = blocksRef.current;
+    const editorRect = blocksInput.getBoundingClientRect();
+
+    // Check if the selection is not fully within the visible area of the editor
+    if (domRect.top < editorRect.top || domRect.bottom > editorRect.bottom) {
+      // Scroll by one line to the bottom
+      blocksInput.scrollBy({
+        top: 28, // 20px is the line-height + 8px line gap
+        behavior: 'smooth',
+      });
+    }
   };
 
   return (
-    <Editable
-      readOnly={readOnly}
-      style={getEditorStyle(theme)}
-      renderElement={renderElement}
-      renderLeaf={renderLeaf}
-      onKeyDown={handleKeyDown}
-    />
+    <Box
+      ref={blocksRef}
+      grow={1}
+      width="100%"
+      overflow="auto"
+      fontSize={2}
+      background="neutral0"
+      color="neutral800"
+      lineHeight={6}
+      hasRadius
+      paddingLeft={4}
+      paddingRight={4}
+      marginTop={3}
+      marginBottom={3}
+    >
+      <Editable
+        readOnly={disabled}
+        placeholder={placeholder}
+        style={getEditorStyle(theme)}
+        renderElement={renderElement}
+        renderLeaf={renderLeaf}
+        onKeyDown={handleKeyDown}
+        scrollSelectionIntoView={handleScrollSelectionIntoView}
+      />
+    </Box>
   );
 };
 
+BlocksInput.defaultProps = {
+  placeholder: null,
+};
+
 BlocksInput.propTypes = {
-  readOnly: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  placeholder: PropTypes.string,
 };
 
 export default BlocksInput;