@strapi/admin 4.14.5 → 4.15.0

package/admin/src/components/GuidedTour/Ornaments.tsx

@@ -0,0 +1,74 @@
+import { Box, BoxProps, Flex, FlexProps, Typography } from '@strapi/design-system';
+import { pxToRem } from '@strapi/helper-plugin';
+import { Check } from '@strapi/icons';
+
+import { STATES, States } from './constants';
+
+/* -------------------------------------------------------------------------------------------------
+ * Number
+ * -----------------------------------------------------------------------------------------------*/
+
+interface NumberProps extends FlexProps {
+  children: number;
+  state: States;
+}
+
+const Number = ({ children, state, ...props }: NumberProps) => {
+  return state === STATES.IS_DONE || state === STATES.IS_ACTIVE ? (
+    <Flex
+      background="primary600"
+      padding={2}
+      borderRadius="50%"
+      width={pxToRem(30)}
+      height={pxToRem(30)}
+      justifyContent="center"
+      {...props}
+    >
+      {state === STATES.IS_DONE ? (
+        <Check aria-hidden width={pxToRem(16)} color="neutral0" />
+      ) : (
+        <Typography fontWeight="semiBold" textColor="neutral0">
+          {children}
+        </Typography>
+      )}
+    </Flex>
+  ) : (
+    <Flex
+      borderColor="neutral500"
+      borderWidth="1px"
+      borderStyle="solid"
+      padding={2}
+      borderRadius="50%"
+      width={pxToRem(30)}
+      height={pxToRem(30)}
+      justifyContent="center"
+      {...props}
+    >
+      <Typography fontWeight="semiBold" textColor="neutral600">
+        {children}
+      </Typography>
+    </Flex>
+  );
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * VerticalDivider
+ * -----------------------------------------------------------------------------------------------*/
+
+interface VerticalDividerProps extends BoxProps {
+  state: States;
+}
+
+const VerticalDivider = ({ state, ...props }: VerticalDividerProps) => (
+  <Box
+    width={pxToRem(2)}
+    height="100%"
+    background={state === STATES.IS_NOT_DONE ? 'neutral300' : 'primary500'}
+    hasRadius
+    minHeight={state === STATES.IS_ACTIVE ? pxToRem(85) : pxToRem(65)}
+    {...props}
+  />
+);
+
+export { Number, VerticalDivider };
+export type { NumberProps, VerticalDividerProps };

package/admin/src/components/GuidedTour/Provider.tsx

@@ -0,0 +1,253 @@
+import * as React from 'react';
+
+import {
+  GuidedTourContextValue,
+  GuidedTourProvider as GuidedTourProviderComponent,
+  GuidedTourSectionKey,
+  GuidedTourStep,
+  GuidedTourStepKey,
+  auth,
+} from '@strapi/helper-plugin';
+import produce from 'immer';
+import get from 'lodash/get';
+import set from 'lodash/set';
+
+/* -------------------------------------------------------------------------------------------------
+ * GuidedTourProvider
+ * -----------------------------------------------------------------------------------------------*/
+
+interface GuidedTourProviderProps {
+  children: React.ReactNode;
+}
+
+const GuidedTourProvider = ({ children }: GuidedTourProviderProps) => {
+  const [{ currentStep, guidedTourState, isGuidedTourVisible, isSkipped }, dispatch] =
+    React.useReducer(reducer, initialState, initialiseState);
+
+  const setCurrentStep = (step: SetCurrentStepAction['step']) => {
+    // if step is null it is intentional, we need to dispatch it
+    if (step !== null) {
+      const isStepAlreadyDone = get(guidedTourState, step);
+      const [sectionName, stepName] = step.split('.') as [GuidedTourSectionKey, GuidedTourStepKey];
+      const sectionArray = Object.entries(guidedTourState[sectionName]);
+
+      const currentStepIndex = sectionArray.findIndex(([key]) => key === stepName);
+      const previousSteps = sectionArray.slice(0, currentStepIndex);
+
+      const isStepToShow = previousSteps.every(([, sectionValue]) => sectionValue);
+
+      if (isStepAlreadyDone || isSkipped || !isStepToShow) {
+        return null;
+      }
+    }
+
+    auth.set(null, 'GUIDED_TOUR_CURRENT_STEP', true);
+
+    return dispatch({
+      type: 'SET_CURRENT_STEP',
+      step,
+    });
+  };
+
+  const setGuidedTourVisibility = (value: SetGuidedTourVisibilityAction['value']) => {
+    dispatch({
+      type: 'SET_GUIDED_TOUR_VISIBILITY',
+      value,
+    });
+  };
+
+  const setStepState = (currentStep: GuidedTourStep, value: SetStepStateAction['value']) => {
+    addCompletedStep(currentStep);
+
+    dispatch({
+      type: 'SET_STEP_STATE',
+      currentStep,
+      value,
+    });
+  };
+
+  const startSection = (sectionName: GuidedTourSectionKey) => {
+    const sectionSteps = guidedTourState[sectionName];
+
+    if (sectionSteps) {
+      const guidedTourArray = Object.entries(guidedTourState);
+
+      // Find current section position in the guidedTourArray
+      // Get only previous sections based on current section position
+      const currentSectionIndex = guidedTourArray.findIndex(([key]) => key === sectionName);
+      const previousSections = guidedTourArray.slice(0, currentSectionIndex);
+
+      // Check if every steps from previous section are done
+      const isSectionToShow = previousSections.every(([, sectionValue]) =>
+        Object.values(sectionValue).every(Boolean)
+      );
+
+      const [firstStep] = Object.keys(sectionSteps) as [GuidedTourStepKey];
+      const isFirstStepDone = sectionSteps[firstStep];
+
+      if (isSectionToShow && !currentStep && !isFirstStepDone) {
+        setCurrentStep(`${sectionName}.${firstStep}`);
+      }
+    }
+  };
+
+  const setSkipped = (value: SetSkippedAction['value']) => {
+    auth.set(value, 'GUIDED_TOUR_SKIPPED', true);
+
+    dispatch({
+      type: 'SET_SKIPPED',
+      value,
+    });
+  };
+
+  return (
+    <GuidedTourProviderComponent
+      guidedTourState={guidedTourState}
+      currentStep={currentStep}
+      setCurrentStep={setCurrentStep}
+      setGuidedTourVisibility={setGuidedTourVisibility}
+      setSkipped={setSkipped}
+      setStepState={setStepState}
+      startSection={startSection}
+      isGuidedTourVisible={isGuidedTourVisible}
+      isSkipped={isSkipped}
+    >
+      {children}
+    </GuidedTourProviderComponent>
+  );
+};
+
+type State = Pick<
+  GuidedTourContextValue,
+  'guidedTourState' | 'currentStep' | 'isGuidedTourVisible' | 'isSkipped'
+>;
+
+const initialState = {
+  currentStep: null,
+  guidedTourState: {
+    contentTypeBuilder: {
+      create: false,
+      success: false,
+    },
+    contentManager: {
+      create: false,
+      success: false,
+    },
+    apiTokens: {
+      create: false,
+      success: false,
+    },
+  },
+  isGuidedTourVisible: false,
+  isSkipped: false,
+} satisfies State;
+
+interface SetCurrentStepAction {
+  type: 'SET_CURRENT_STEP';
+  step: GuidedTourStep | null;
+}
+
+interface SetStepStateAction {
+  type: 'SET_STEP_STATE';
+  currentStep: GuidedTourStep;
+  value: boolean;
+}
+
+interface SetSkippedAction {
+  type: 'SET_SKIPPED';
+  value: boolean;
+}
+
+interface SetGuidedTourVisibilityAction {
+  type: 'SET_GUIDED_TOUR_VISIBILITY';
+  value: boolean;
+}
+
+type Action =
+  | SetCurrentStepAction
+  | SetStepStateAction
+  | SetSkippedAction
+  | SetGuidedTourVisibilityAction;
+
+const reducer: React.Reducer<State, Action> = (state: State = initialState, action: Action) =>
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case 'SET_CURRENT_STEP': {
+        draftState.currentStep = action.step;
+        break;
+      }
+      case 'SET_STEP_STATE': {
+        const [section, step] = action.currentStep.split('.') as [
+          GuidedTourSectionKey,
+          GuidedTourStepKey
+        ];
+        draftState.guidedTourState[section][step] = action.value;
+        break;
+      }
+      case 'SET_SKIPPED': {
+        draftState.isSkipped = action.value;
+        break;
+      }
+      case 'SET_GUIDED_TOUR_VISIBILITY': {
+        draftState.isGuidedTourVisible = action.value;
+        break;
+      }
+      default: {
+        return draftState;
+      }
+    }
+  });
+
+const initialiseState = (initialState: State) => {
+  const copyInitialState = { ...initialState };
+  const guidedTourLocaleStorage = auth.get('GUIDED_TOUR_COMPLETED_STEPS');
+  const currentStepLocaleStorage = auth.get('GUIDED_TOUR_CURRENT_STEP');
+  const skippedLocaleStorage = auth.get('GUIDED_TOUR_SKIPPED');
+
+  if (Array.isArray(guidedTourLocaleStorage)) {
+    guidedTourLocaleStorage.forEach((step) => {
+      const [sectionName, stepName] = step.split('.');
+      set(copyInitialState, ['guidedTourState', sectionName, stepName], true);
+    });
+  }
+
+  // if current step when initializing mark it as done
+  if (currentStepLocaleStorage) {
+    const [sectionName, stepName] = currentStepLocaleStorage.split('.') as [
+      GuidedTourSectionKey,
+      GuidedTourStepKey
+    ];
+    set(copyInitialState, ['guidedTourState', sectionName, stepName], true);
+
+    addCompletedStep(currentStepLocaleStorage as GuidedTourStep);
+
+    auth.set(null, 'GUIDED_TOUR_CURRENT_STEP', true);
+  }
+
+  if (skippedLocaleStorage !== null) {
+    set(copyInitialState, 'isSkipped', skippedLocaleStorage);
+  }
+
+  return copyInitialState;
+};
+
+/**
+ * @description Add a completed step to the local storage if it does not already exist.
+ */
+const addCompletedStep = (completedStep: GuidedTourStep) => {
+  const currentSteps = auth.get('GUIDED_TOUR_COMPLETED_STEPS') ?? [];
+
+  if (!Array.isArray(currentSteps)) {
+    return;
+  }
+
+  const isAlreadyStored = currentSteps.includes(completedStep);
+
+  if (isAlreadyStored) {
+    return;
+  }
+
+  auth.set([...currentSteps, completedStep], 'GUIDED_TOUR_COMPLETED_STEPS', true);
+};
+
+export { GuidedTourProvider };

package/admin/src/components/GuidedTour/{layout.js → constants.ts}

@@ -1,4 +1,4 @@
-const layout = {
+const LAYOUT_DATA = {
   contentTypeBuilder: {
     home: {
       title: {
@@ -157,6 +157,16 @@ const layout = {
       trackingEvent: 'didGenerateGuidedTourApiTokens',
     },
   },
-};
+} as const;
 
-export default layout;
+const STATES = {
+  IS_DONE: 'IS_DONE',
+  IS_ACTIVE: 'IS_ACTIVE',
+  IS_NOT_DONE: 'IS_NOT_DONE',
+} as const;
+
+type LayoutData = typeof LAYOUT_DATA;
+type States = keyof typeof STATES;
+
+export { LAYOUT_DATA, STATES };
+export type { LayoutData, States };

package/admin/src/components/LanguageProvider.tsx

@@ -127,3 +127,4 @@ const reducer = (state = initialState, action: Action) => {
 };
 
 export { LanguageProvider, useLocales, LANGUAGE_LOCAL_STORAGE_KEY };
+export type { LanguageProviderProps, LocalesContextValue };

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

@@ -11,9 +11,11 @@ interface ThemeProps {
 }
 
 const Theme = ({ children }: ThemeProps) => {
-  const { currentTheme, themes } = useThemeToggle();
+  const { currentTheme, themes, systemTheme } = useThemeToggle();
   const { locale } = useIntl();
 
+  const computedThemeName = currentTheme === 'system' ? systemTheme : currentTheme;
+
   return (
     <DesignSystemProvider
       locale={locale}
@@ -22,7 +24,7 @@ const Theme = ({ children }: ThemeProps) => {
        * 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}
+      theme={themes?.[computedThemeName || 'light']}
     >
       {children}
       <GlobalStyle />

package/admin/src/components/ThemeToggleProvider.tsx

@@ -2,19 +2,14 @@ import * as React from 'react';
 
 import { DefaultTheme } from 'styled-components';
 
-import { ThemeToggleContext, ThemeName } from '../contexts/themeToggle';
+import { ThemeToggleContext, ThemeName, NonSystemThemeName } 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;
+  return persistedTheme || 'system';
 };
 
 interface ThemeToggleProviderProps {
@@ -26,7 +21,8 @@ interface ThemeToggleProviderProps {
 }
 
 const ThemeToggleProvider = ({ children, themes }: ThemeToggleProviderProps) => {
-  const [currentTheme, setCurrentTheme] = React.useState(getDefaultTheme());
+  const [currentTheme, setCurrentTheme] = React.useState<ThemeName>(getDefaultTheme());
+  const [systemTheme, setSystemTheme] = React.useState<NonSystemThemeName>();
 
   const handleChangeTheme = React.useCallback(
     (nextTheme: ThemeName) => {
@@ -36,15 +32,33 @@ const ThemeToggleProvider = ({ children, themes }: ThemeToggleProviderProps) =>
     [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]);
+  }, [currentTheme, handleChangeTheme, themes, systemTheme]);
 
   return <ThemeToggleContext.Provider value={themeValues}>{children}</ThemeToggleContext.Provider>;
 };
 
 export { ThemeToggleProvider };
+export type { ThemeToggleProviderProps };

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

@@ -1,3 +1,5 @@
+/* eslint-disable check-file/filename-naming-convention */
+
 export function useLocalesProvider() {
   return {
     changeLocale() {},