@strapi/admin 5.0.0-rc.3 → 5.0.0-rc.30

package/dist/admin/{Theme-PrUuuGtN.mjs → Theme-frC82ceE.mjs}

@@ -1,18 +1,22 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useRef, useEffect, useState, useMemo } from 'react';
+import { useMemo, useCallback, useRef, useEffect } from 'react';
 import { createContext as createContext$1 } from '@radix-ui/react-context';
 import { useIntl, IntlProvider } from 'react-intl';
 import { Flex, useCallbackRef, Alert, Link, Main, Loader, EmptyStateLayout, Box, DesignSystemProvider } from '@strapi/design-system';
 import { WarningCircle } from '@strapi/icons';
 import { EmptyPermissions, EmptyDocuments } from '@strapi/icons/symbols';
 import { useLocation, useNavigate } from 'react-router-dom';
-import * as ContextSelector from 'use-context-selector';
-import { b as adminApi, e as useInitQuery, f as useTelemetryPropertiesQuery, g as useProjectSettingsQuery, h as useUpdateProjectSettingsMutation } from './admin-B6AW0Kov.mjs';
+import { parse, stringify } from 'qs';
+import { a as adminApi, e as useInitQuery, f as useTelemetryPropertiesQuery, g as useProjectSettingsQuery, h as useUpdateProjectSettingsMutation } from './admin-GZ-AP2T0.mjs';
 import clone from 'lodash/clone';
 import toPath from 'lodash/toPath';
 import isEqual from 'lodash/isEqual';
 import axios from 'axios';
+import { produce } from 'immer';
+import get from 'lodash/get';
+import set from 'lodash/set';
+import * as ContextSelector from 'use-context-selector';
 import defaultsDeep from 'lodash/defaultsDeep';
 import { useStore, useDispatch, useSelector } from 'react-redux';
 import { createGlobalStyle } from 'styled-components';
@@ -65,6 +69,35 @@ const createTypedSelector = (selector) => createSelector((state) => state, selec
 
 const [StrapiAppProvider, useStrapiApp] = createContext("StrapiApp");
 
+const useQueryParams = (initialParams) => {
+  const { search } = useLocation();
+  const navigate = useNavigate();
+  const query = useMemo(() => {
+    const searchQuery = search.startsWith("?") ? search.slice(1) : search;
+    if (!search && initialParams) {
+      return initialParams;
+    }
+    return { ...initialParams, ...parse(searchQuery) };
+  }, [search, initialParams]);
+  const setQuery = useCallback(
+    (nextParams, method = "push", replace = false) => {
+      let nextQuery = { ...query };
+      if (method === "remove") {
+        Object.keys(nextParams).forEach((key) => {
+          if (Object.prototype.hasOwnProperty.call(nextQuery, key)) {
+            delete nextQuery[key];
+          }
+        });
+      } else {
+        nextQuery = { ...query, ...nextParams };
+      }
+      navigate({ search: stringify(nextQuery, { encode: false }) }, { replace });
+    },
+    [navigate, query]
+  );
+  return [{ query, rawQuery: search }, setQuery];
+};
+
 const STORAGE_KEYS$1 = {
   TOKEN: "jwtToken",
   USER: "userInfo"
@@ -128,7 +161,7 @@ const adminSlice = createSlice({
     }
   }
 });
-const reducer = adminSlice.reducer;
+const reducer$1 = adminSlice.reducer;
 const { setAppTheme, setAvailableThemes, setLocale, setToken, logout, login } = adminSlice.actions;
 
 const authService = adminApi.enhanceEndpoints({
@@ -331,6 +364,7 @@ const AuthProvider = ({
   const dispatch = useTypedDispatch();
   const runRbacMiddleware = useStrapiApp("AuthProvider", (state) => state.rbac.run);
   const location = useLocation();
+  const [{ rawQuery }] = useQueryParams();
   const token = useTypedSelector((state) => state.admin_app.token ?? null);
   const { data: user, isLoading: isLoadingUser } = useGetMeQuery(void 0, {
     /**
@@ -416,7 +450,7 @@ const AuthProvider = ({
   }, [isUninitialized, refetch]);
   const [checkPermissions] = useLazyCheckPermissionsQuery();
   const checkUserHasPermissions = React.useCallback(
-    async (permissions, passedPermissions) => {
+    async (permissions, passedPermissions, rawQueryContext) => {
       if (!permissions || permissions.length === 0) {
         return [{ action: "", subject: "" }];
       }
@@ -431,7 +465,7 @@ const AuthProvider = ({
           user,
           permissions: userPermissions,
           pathname: location.pathname,
-          search: location.search.split("?")[1] ?? ""
+          search: (rawQueryContext || rawQuery).split("?")[1] ?? ""
         },
         matchingPermissions
       );
@@ -453,7 +487,7 @@ const AuthProvider = ({
         return middlewaredPermissions.filter((_, index) => data?.data[index] === true);
       }
     },
-    [checkPermissions, location.pathname, location.search, runRbacMiddleware, user, userPermissions]
+    [checkPermissions, location.pathname, rawQuery, runRbacMiddleware, user, userPermissions]
   );
   const isLoading = isLoadingUser || isLoadingPermissions;
   return /* @__PURE__ */ jsx(
@@ -929,13 +963,13 @@ const usePrev = (value) => {
   return ref.current;
 };
 
-const useRBAC = (permissionsToCheck = [], passedPermissions) => {
+const useRBAC = (permissionsToCheck = [], passedPermissions, rawQueryContext) => {
   const isLoadingAuth = useAuth("useRBAC", (state) => state.isLoading);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState();
-  const [data, setData] = useState();
-  const warnOnce = useMemo(() => once(console.warn), []);
-  const actualPermissionsToCheck = useMemo(() => {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState();
+  const [data, setData] = React.useState();
+  const warnOnce = React.useMemo(() => once(console.warn), []);
+  const actualPermissionsToCheck = React.useMemo(() => {
     if (Array.isArray(permissionsToCheck)) {
       return permissionsToCheck;
     } else {
@@ -945,7 +979,7 @@ const useRBAC = (permissionsToCheck = [], passedPermissions) => {
       return Object.values(permissionsToCheck).flat();
     }
   }, [permissionsToCheck, warnOnce]);
-  const defaultAllowedActions = useMemo(() => {
+  const defaultAllowedActions = React.useMemo(() => {
     return actualPermissionsToCheck.reduce((acc, permission) => {
       return {
         ...acc,
@@ -955,12 +989,14 @@ const useRBAC = (permissionsToCheck = [], passedPermissions) => {
   }, [actualPermissionsToCheck]);
   const checkUserHasPermissions = useAuth("useRBAC", (state) => state.checkUserHasPermissions);
   const permssionsChecked = usePrev(actualPermissionsToCheck);
-  useEffect(() => {
-    if (!isEqual(permssionsChecked, actualPermissionsToCheck)) {
+  const contextChecked = usePrev(rawQueryContext);
+  React.useEffect(() => {
+    if (!isEqual(permssionsChecked, actualPermissionsToCheck) || // TODO: also run this when the query context changes
+    contextChecked !== rawQueryContext) {
       setIsLoading(true);
       setData(void 0);
       setError(void 0);
-      checkUserHasPermissions(actualPermissionsToCheck, passedPermissions).then((res) => {
+      checkUserHasPermissions(actualPermissionsToCheck, passedPermissions, rawQueryContext).then((res) => {
         if (res) {
           setData(
             res.reduce((acc, permission) => {
@@ -982,7 +1018,9 @@ const useRBAC = (permissionsToCheck = [], passedPermissions) => {
     checkUserHasPermissions,
     passedPermissions,
     permissionsToCheck,
-    permssionsChecked
+    permssionsChecked,
+    contextChecked,
+    rawQueryContext
   ]);
   const allowedActions = Object.entries({
     ...defaultAllowedActions,
@@ -1185,6 +1223,169 @@ const ConfigurationProvider = ({
   );
 };
 
+const GUIDED_TOUR_COMPLETED_STEPS = "GUIDED_TOUR_COMPLETED_STEPS";
+const GUIDED_TOUR_CURRENT_STEP = "GUIDED_TOUR_CURRENT_STEP";
+const GUIDED_TOUR_SKIPPED = "GUIDED_TOUR_SKIPPED";
+const [GuidedTourProviderImpl, useGuidedTour] = createContext("GuidedTour");
+const GuidedTourProvider = ({ children }) => {
+  const [{ currentStep, guidedTourState, isGuidedTourVisible, isSkipped }, dispatch] = React.useReducer(reducer, initialState, initialiseState);
+  const setCurrentStep = (step) => {
+    if (step !== null) {
+      const isStepAlreadyDone = get(guidedTourState, step);
+      const [sectionName, stepName] = step.split(".");
+      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;
+      }
+    }
+    window.localStorage.setItem(GUIDED_TOUR_CURRENT_STEP, JSON.stringify(null));
+    return dispatch({
+      type: "SET_CURRENT_STEP",
+      step
+    });
+  };
+  const setGuidedTourVisibility = (value) => {
+    dispatch({
+      type: "SET_GUIDED_TOUR_VISIBILITY",
+      value
+    });
+  };
+  const setStepState = (currentStep2, value) => {
+    addCompletedStep(currentStep2);
+    dispatch({
+      type: "SET_STEP_STATE",
+      currentStep: currentStep2,
+      value
+    });
+  };
+  const startSection = (sectionName) => {
+    const sectionSteps = guidedTourState[sectionName];
+    if (sectionSteps) {
+      const guidedTourArray = Object.entries(guidedTourState);
+      const currentSectionIndex = guidedTourArray.findIndex(([key]) => key === sectionName);
+      const previousSections = guidedTourArray.slice(0, currentSectionIndex);
+      const isSectionToShow = previousSections.every(
+        ([, sectionValue]) => Object.values(sectionValue).every(Boolean)
+      );
+      const [firstStep] = Object.keys(sectionSteps);
+      const isFirstStepDone = sectionSteps[firstStep];
+      if (isSectionToShow && !currentStep && !isFirstStepDone) {
+        setCurrentStep(`${sectionName}.${firstStep}`);
+      }
+    }
+  };
+  const setSkipped = (value) => {
+    window.localStorage.setItem(GUIDED_TOUR_SKIPPED, JSON.stringify(value));
+    dispatch({
+      type: "SET_SKIPPED",
+      value
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    GuidedTourProviderImpl,
+    {
+      guidedTourState,
+      currentStep,
+      setCurrentStep,
+      setGuidedTourVisibility,
+      setSkipped,
+      setStepState,
+      startSection,
+      isGuidedTourVisible,
+      isSkipped,
+      children
+    }
+  );
+};
+const initialState = {
+  currentStep: null,
+  guidedTourState: {
+    contentTypeBuilder: {
+      create: false,
+      success: false
+    },
+    contentManager: {
+      create: false,
+      success: false
+    },
+    apiTokens: {
+      create: false,
+      success: false
+    }
+  },
+  isGuidedTourVisible: false,
+  isSkipped: false
+};
+const reducer = (state = initialState, 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(".");
+      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 = (initialState2) => {
+  const copyInitialState = { ...initialState2 };
+  const guidedTourLocaleStorage = JSON.parse(
+    window.localStorage.getItem(GUIDED_TOUR_COMPLETED_STEPS) ?? "[]"
+  );
+  const currentStepLocaleStorage = JSON.parse(
+    window.localStorage.getItem(GUIDED_TOUR_CURRENT_STEP) ?? "null"
+  );
+  const skippedLocaleStorage = JSON.parse(
+    window.localStorage.getItem(GUIDED_TOUR_SKIPPED) ?? "null"
+  );
+  if (Array.isArray(guidedTourLocaleStorage)) {
+    guidedTourLocaleStorage.forEach((step) => {
+      const [sectionName, stepName] = step.split(".");
+      set(copyInitialState, ["guidedTourState", sectionName, stepName], true);
+    });
+  }
+  if (currentStepLocaleStorage) {
+    const [sectionName, stepName] = currentStepLocaleStorage.split(".");
+    set(copyInitialState, ["guidedTourState", sectionName, stepName], true);
+    addCompletedStep(currentStepLocaleStorage);
+    window.localStorage.setItem(GUIDED_TOUR_CURRENT_STEP, JSON.stringify(null));
+  }
+  if (skippedLocaleStorage !== null) {
+    set(copyInitialState, "isSkipped", skippedLocaleStorage);
+  }
+  return copyInitialState;
+};
+const addCompletedStep = (completedStep) => {
+  const currentSteps = JSON.parse(window.localStorage.getItem(GUIDED_TOUR_COMPLETED_STEPS) ?? "[]");
+  if (!Array.isArray(currentSteps)) {
+    return;
+  }
+  const isAlreadyStored = currentSteps.includes(completedStep);
+  if (isAlreadyStored) {
+    return;
+  }
+  window.localStorage.setItem(
+    GUIDED_TOUR_COMPLETED_STEPS,
+    JSON.stringify([...currentSteps, completedStep])
+  );
+};
+
 const LanguageProvider = ({ children, messages }) => {
   const locale = useTypedSelector((state) => state.admin_app.language.locale);
   const appMessages = defaultsDeep(messages[locale], messages.en);
@@ -1229,5 +1430,5 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-export { AuthProvider as A, LANGUAGE_LOCAL_STORAGE_KEY as B, ConfigurationContextProvider as C, getIn as D, setIn as E, setLocale as F, useForgotPasswordMutation as G, useGetRegistrationInfoQuery as H, useRegisterAdminMutation as I, useRegisterUserMutation as J, useResetPasswordMutation as K, LanguageProvider as L, logout as M, NotificationsProvider as N, THEME_LOCAL_STORAGE_KEY as O, Page as P, useTypedStore as Q, RBAC as R, StrapiAppProvider as S, Theme as T, useNotification as a, useTypedSelector as b, createTypedSelector as c, useTracking as d, useTypedDispatch as e, useAPIErrorHandler as f, useUpdateMeMutation as g, useIsSSOLockedQuery as h, useGetProviderOptionsQuery as i, useUpdateProviderOptionsMutation as j, useRBAC as k, useGetProvidersQuery as l, login as m, useAppInfo as n, useStrapiApp as o, useConfiguration as p, getStoredToken as q, reducer as r, setAppTheme as s, AppInfoProvider as t, useAuth as u, isObject as v, capitalise as w, createContext as x, TrackingProvider as y, ConfigurationProvider as z };
-//# sourceMappingURL=Theme-PrUuuGtN.mjs.map
+export { AuthProvider as A, TrackingProvider as B, ConfigurationContextProvider as C, ConfigurationProvider as D, LANGUAGE_LOCAL_STORAGE_KEY as E, getIn as F, GuidedTourProvider as G, setIn as H, setLocale as I, useForgotPasswordMutation as J, useGetRegistrationInfoQuery as K, LanguageProvider as L, useRegisterAdminMutation as M, NotificationsProvider as N, useRegisterUserMutation as O, Page as P, useResetPasswordMutation as Q, RBAC as R, StrapiAppProvider as S, Theme as T, logout as U, THEME_LOCAL_STORAGE_KEY as V, useTypedStore as W, useNotification as a, useTypedSelector as b, useTracking as c, useTypedDispatch as d, useAPIErrorHandler as e, useUpdateMeMutation as f, useIsSSOLockedQuery as g, createTypedSelector as h, useGetProviderOptionsQuery as i, useUpdateProviderOptionsMutation as j, useRBAC as k, useGetProvidersQuery as l, useGuidedTour as m, login as n, useQueryParams as o, useAppInfo as p, useStrapiApp as q, useConfiguration as r, setAppTheme as s, getStoredToken as t, useAuth as u, reducer$1 as v, AppInfoProvider as w, isObject as x, capitalise as y, createContext as z };
+//# sourceMappingURL=Theme-frC82ceE.mjs.map