@strapi/admin 4.15.0-alpha.0 → 4.15.0

package/admin/src/components/Providers.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+
+import {
+  AutoReloadOverlayBlockerProvider,
+  CustomFieldsProvider,
+  CustomFieldsProviderProps,
+  LibraryProvider,
+  LibraryProviderProps,
+  NotificationsProvider,
+  OverlayBlockerProvider,
+  StrapiAppProvider,
+  StrapiAppProviderProps,
+} from '@strapi/helper-plugin';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+
+import { AdminContext, AdminContextValue } from '../contexts/admin';
+
+import { ConfigurationProvider, ConfigurationProviderProps } from './ConfigurationProvider';
+import { GuidedTourProvider } from './GuidedTour/Provider';
+import { LanguageProvider, LanguageProviderProps } from './LanguageProvider';
+import { Theme } from './Theme';
+import { ThemeToggleProvider, ThemeToggleProviderProps } from './ThemeToggleProvider';
+
+import type { Store } from '../core/store/configure';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+interface ProvidersProps
+  extends Pick<ThemeToggleProviderProps, 'themes'>,
+    Pick<LanguageProviderProps, 'messages' | 'localeNames'>,
+    Pick<
+      ConfigurationProviderProps,
+      'authLogo' | 'menuLogo' | 'showReleaseNotification' | 'showTutorials'
+    >,
+    Pick<AdminContextValue, 'getAdminInjectedComponents'>,
+    Pick<CustomFieldsProviderProps, 'customFields'>,
+    Pick<LibraryProviderProps, 'components' | 'fields'>,
+    Pick<
+      StrapiAppProviderProps,
+      | 'getPlugin'
+      | 'menu'
+      | 'plugins'
+      | 'runHookParallel'
+      | 'runHookSeries'
+      | 'runHookWaterfall'
+      | 'settings'
+    > {
+  children: React.ReactNode;
+  store: Store;
+}
+
+const Providers = ({
+  authLogo,
+  children,
+  components,
+  customFields,
+  fields,
+  getAdminInjectedComponents,
+  getPlugin,
+  localeNames,
+  menu,
+  menuLogo,
+  messages,
+  plugins,
+  runHookParallel,
+  runHookSeries,
+  runHookWaterfall,
+  settings,
+  showReleaseNotification,
+  showTutorials,
+  store,
+  themes,
+}: ProvidersProps) => {
+  return (
+    <LanguageProvider messages={messages} localeNames={localeNames}>
+      <ThemeToggleProvider themes={themes}>
+        <Theme>
+          <QueryClientProvider client={queryClient}>
+            <Provider store={store}>
+              <AdminContext.Provider value={{ getAdminInjectedComponents }}>
+                <ConfigurationProvider
+                  authLogo={authLogo}
+                  menuLogo={menuLogo}
+                  showReleaseNotification={showReleaseNotification}
+                  showTutorials={showTutorials}
+                >
+                  <StrapiAppProvider
+                    getPlugin={getPlugin}
+                    menu={menu}
+                    plugins={plugins}
+                    runHookParallel={runHookParallel}
+                    runHookWaterfall={runHookWaterfall}
+                    runHookSeries={runHookSeries}
+                    settings={settings}
+                  >
+                    <LibraryProvider components={components} fields={fields}>
+                      <CustomFieldsProvider customFields={customFields}>
+                        <AutoReloadOverlayBlockerProvider>
+                          <OverlayBlockerProvider>
+                            <GuidedTourProvider>
+                              <NotificationsProvider>{children}</NotificationsProvider>
+                            </GuidedTourProvider>
+                          </OverlayBlockerProvider>
+                        </AutoReloadOverlayBlockerProvider>
+                      </CustomFieldsProvider>
+                    </LibraryProvider>
+                  </StrapiAppProvider>
+                </ConfigurationProvider>
+              </AdminContext.Provider>
+            </Provider>
+          </QueryClientProvider>
+        </Theme>
+      </ThemeToggleProvider>
+    </LanguageProvider>
+  );
+};
+
+export { Providers };

package/admin/src/components/RBACProvider.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+
+import {
+  LoadingIndicatorPage,
+  Permission,
+  RBACContext,
+  RBACContextValue,
+} from '@strapi/helper-plugin';
+import produce from 'immer';
+
+import { useTypedSelector, useTypedDispatch } from '../core/store/hooks';
+
+/* -------------------------------------------------------------------------------------------------
+ * RBACProvider
+ * -----------------------------------------------------------------------------------------------*/
+
+interface RBACProviderProps {
+  children: React.ReactNode;
+  permissions: Permission[];
+  refetchPermissions: RBACContextValue['refetchPermissions'];
+}
+
+const RBACProvider = ({ children, permissions, refetchPermissions }: RBACProviderProps) => {
+  const allPermissions = useTypedSelector((state) => state.rbacProvider.allPermissions);
+
+  const dispatch = useTypedDispatch();
+
+  React.useEffect(() => {
+    dispatch(setPermissionsAction(permissions));
+
+    return () => {
+      dispatch(resetStoreAction());
+    };
+  }, [permissions, dispatch]);
+
+  if (!allPermissions) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <RBACContext.Provider value={{ allPermissions, refetchPermissions }}>
+      {children}
+    </RBACContext.Provider>
+  );
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * RBACReducer
+ * -----------------------------------------------------------------------------------------------*/
+
+interface RBACState {
+  allPermissions: null | Permission[];
+  collectionTypesRelatedPermissions: Record<string, Record<string, Permission[]>>;
+}
+
+const initialState = {
+  allPermissions: null,
+  collectionTypesRelatedPermissions: {},
+};
+
+const RESET_STORE = 'StrapiAdmin/RBACProvider/RESET_STORE';
+const SET_PERMISSIONS = 'StrapiAdmin/RBACProvider/SET_PERMISSIONS';
+
+interface ResetStoreAction {
+  type: typeof RESET_STORE;
+}
+
+const resetStoreAction = (): ResetStoreAction => ({ type: RESET_STORE });
+
+interface SetPermissionsAction {
+  type: typeof SET_PERMISSIONS;
+  permissions: Permission[];
+}
+
+const setPermissionsAction = (
+  permissions: SetPermissionsAction['permissions']
+): SetPermissionsAction => ({
+  type: SET_PERMISSIONS,
+  permissions,
+});
+
+type Actions = ResetStoreAction | SetPermissionsAction;
+
+const RBACReducer = (state: RBACState = initialState, action: Actions) =>
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case SET_PERMISSIONS: {
+        draftState.allPermissions = action.permissions;
+        draftState.collectionTypesRelatedPermissions = action.permissions
+          .filter((perm) => perm.subject)
+          .reduce<Record<string, Record<string, Permission[]>>>((acc, current) => {
+            const { subject, action } = current;
+
+            if (!subject) return acc;
+
+            if (!acc[subject]) {
+              acc[subject] = {};
+            }
+
+            acc[subject] = acc[subject][action]
+              ? { ...acc[subject], [action]: [...acc[subject][action], current] }
+              : { ...acc[subject], [action]: [current] };
+
+            return acc;
+          }, {});
+        break;
+      }
+      case RESET_STORE: {
+        return initialState;
+      }
+      default:
+        return state;
+    }
+  });
+
+export { RBACProvider, RBACReducer, resetStoreAction, setPermissionsAction };
+export type {
+  RBACState,
+  Actions,
+  RBACProviderProps,
+  ResetStoreAction,
+  SetPermissionsAction,
+  Permission,
+};

package/admin/src/components/Theme.tsx

@@ -0,0 +1,41 @@
+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, systemTheme } = useThemeToggle();
+  const { locale } = useIntl();
+
+  const computedThemeName = currentTheme === 'system' ? systemTheme : currentTheme;
+
+  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={themes?.[computedThemeName || 'light']}
+    >
+      {children}
+      <GlobalStyle />
+    </DesignSystemProvider>
+  );
+};
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    background: ${({ theme }) => theme.colors.neutral100};
+  }
+`;
+
+export { Theme };

package/admin/src/components/ThemeToggleProvider.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import { DefaultTheme } from 'styled-components';
+
+import { ThemeToggleContext, ThemeName, NonSystemThemeName } from '../contexts/themeToggle';
+
+const THEME_KEY = 'STRAPI_THEME';
+
+const getDefaultTheme = () => {
+  const persistedTheme = localStorage.getItem(THEME_KEY) as ThemeName | null;
+
+  return persistedTheme || 'system';
+};
+
+interface ThemeToggleProviderProps {
+  children: React.ReactNode;
+  themes: {
+    light: DefaultTheme;
+    dark: DefaultTheme;
+  };
+}
+
+const ThemeToggleProvider = ({ children, themes }: ThemeToggleProviderProps) => {
+  const [currentTheme, setCurrentTheme] = React.useState<ThemeName>(getDefaultTheme());
+  const [systemTheme, setSystemTheme] = React.useState<NonSystemThemeName>();
+
+  const handleChangeTheme = React.useCallback(
+    (nextTheme: ThemeName) => {
+      setCurrentTheme(nextTheme);
+      localStorage.setItem(THEME_KEY, nextTheme);
+    },
+    [setCurrentTheme]
+  );
+
+  // Listen to changes in the system theme
+  React.useEffect(() => {
+    const themeWatcher = window.matchMedia('(prefers-color-scheme: dark)');
+    setSystemTheme(themeWatcher.matches ? 'dark' : 'light');
+
+    const listener = (event: MediaQueryListEvent) => {
+      setSystemTheme(event.matches ? 'dark' : 'light');
+    };
+    themeWatcher.addEventListener('change', listener);
+
+    // Remove listener on cleanup
+    return () => {
+      themeWatcher.removeEventListener('change', listener);
+    };
+  }, []);
+
+  const themeValues = React.useMemo(() => {
+    return {
+      currentTheme,
+      onChangeTheme: handleChangeTheme,
+      themes,
+      systemTheme,
+    };
+  }, [currentTheme, handleChangeTheme, themes, systemTheme]);
+
+  return <ThemeToggleContext.Provider value={themeValues}>{children}</ThemeToggleContext.Provider>;
+};
+
+export { ThemeToggleProvider };
+export type { ThemeToggleProviderProps };

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.ts}

@@ -1,4 +1,6 @@
-export default function useLocalesProvider() {
+/* eslint-disable check-file/filename-naming-convention */
+
+export function useLocalesProvider() {
   return {
     changeLocale() {},
     localeNames: { en: 'English' },

package/admin/src/{constants.js → constants.ts}

@@ -88,3 +88,51 @@ export const ADMIN_PERMISSIONS_CE = {
     },
   },
 };
+
+export const HOOKS = {
+  /**
+   * Hook that allows to mutate the displayed headers of the list view table
+   * @constant
+   * @type {string}
+   */
+  INJECT_COLUMN_IN_TABLE: 'Admin/CM/pages/ListView/inject-column-in-table',
+
+  /**
+   * Hook that allows to mutate the CM's collection types links pre-set filters
+   * @constant
+   * @type {string}
+   */
+  MUTATE_COLLECTION_TYPES_LINKS: 'Admin/CM/pages/App/mutate-collection-types-links',
+
+  /**
+   * Hook that allows to mutate the CM's edit view layout
+   * @constant
+   * @type {string}
+   */
+  MUTATE_EDIT_VIEW_LAYOUT: 'Admin/CM/pages/EditView/mutate-edit-view-layout',
+
+  /**
+   * Hook that allows to mutate the CM's single types links pre-set filters
+   * @constant
+   * @type {string}
+   */
+  MUTATE_SINGLE_TYPES_LINKS: 'Admin/CM/pages/App/mutate-single-types-links',
+};
+
+export const INJECTION_ZONES = {
+  admin: {
+    // Temporary injection zone, support for the react-tour plugin in foodadvisor
+    tutorials: {
+      links: [],
+    },
+  },
+  contentManager: {
+    editView: { informations: [], 'right-links': [] },
+    listView: {
+      actions: [],
+      deleteModalAdditionalInfos: [],
+      publishModalAdditionalInfos: [],
+      unpublishModalAdditionalInfos: [],
+    },
+  },
+};

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;