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

package/dist/admin/{Theme-7W0we6BI.js → Theme-y_rWTknM.js}

@@ -8,12 +8,16 @@ const designSystem = require('@strapi/design-system');
 const icons = require('@strapi/icons');
 const symbols = require('@strapi/icons/symbols');
 const reactRouterDom = require('react-router-dom');
-const ContextSelector = require('use-context-selector');
+const qs = require('qs');
 const admin = require('./admin-p0djr5G6.js');
 const clone = require('lodash/clone');
 const toPath = require('lodash/toPath');
 const isEqual = require('lodash/isEqual');
 const axios = require('axios');
+const immer = require('immer');
+const get = require('lodash/get');
+const set = require('lodash/set');
+const ContextSelector = require('use-context-selector');
 const defaultsDeep = require('lodash/defaultsDeep');
 const reactRedux = require('react-redux');
 const styledComponents = require('styled-components');
@@ -40,11 +44,13 @@ function _interopNamespace(e) {
 }
 
 const React__namespace = /*#__PURE__*/_interopNamespace(React);
-const ContextSelector__namespace = /*#__PURE__*/_interopNamespace(ContextSelector);
 const clone__default = /*#__PURE__*/_interopDefault(clone);
 const toPath__default = /*#__PURE__*/_interopDefault(toPath);
 const isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
 const axios__default = /*#__PURE__*/_interopDefault(axios);
+const get__default = /*#__PURE__*/_interopDefault(get);
+const set__default = /*#__PURE__*/_interopDefault(set);
+const ContextSelector__namespace = /*#__PURE__*/_interopNamespace(ContextSelector);
 const defaultsDeep__default = /*#__PURE__*/_interopDefault(defaultsDeep);
 
 class RBAC {
@@ -94,6 +100,35 @@ const createTypedSelector = (selector) => toolkit.createSelector((state) => stat
 
 const [StrapiAppProvider, useStrapiApp] = createContext("StrapiApp");
 
+const useQueryParams = (initialParams) => {
+  const { search } = reactRouterDom.useLocation();
+  const navigate = reactRouterDom.useNavigate();
+  const query = React.useMemo(() => {
+    const searchQuery = search.startsWith("?") ? search.slice(1) : search;
+    if (!search && initialParams) {
+      return initialParams;
+    }
+    return { ...initialParams, ...qs.parse(searchQuery) };
+  }, [search, initialParams]);
+  const setQuery = React.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: qs.stringify(nextQuery, { encode: false }) }, { replace });
+    },
+    [navigate, query]
+  );
+  return [{ query, rawQuery: search }, setQuery];
+};
+
 const STORAGE_KEYS$1 = {
   TOKEN: "jwtToken",
   USER: "userInfo"
@@ -157,7 +192,7 @@ const adminSlice = toolkit.createSlice({
     }
   }
 });
-const reducer = adminSlice.reducer;
+const reducer$1 = adminSlice.reducer;
 const { setAppTheme, setAvailableThemes, setLocale, setToken, logout, login } = adminSlice.actions;
 
 const authService = admin.adminApi.enhanceEndpoints({
@@ -360,6 +395,7 @@ const AuthProvider = ({
   const dispatch = useTypedDispatch();
   const runRbacMiddleware = useStrapiApp("AuthProvider", (state) => state.rbac.run);
   const location = reactRouterDom.useLocation();
+  const [{ rawQuery }] = useQueryParams();
   const token = useTypedSelector((state) => state.admin_app.token ?? null);
   const { data: user, isLoading: isLoadingUser } = useGetMeQuery(void 0, {
     /**
@@ -445,7 +481,7 @@ const AuthProvider = ({
   }, [isUninitialized, refetch]);
   const [checkPermissions] = useLazyCheckPermissionsQuery();
   const checkUserHasPermissions = React__namespace.useCallback(
-    async (permissions, passedPermissions) => {
+    async (permissions, passedPermissions, rawQueryContext) => {
       if (!permissions || permissions.length === 0) {
         return [{ action: "", subject: "" }];
       }
@@ -460,7 +496,7 @@ const AuthProvider = ({
           user,
           permissions: userPermissions,
           pathname: location.pathname,
-          search: location.search.split("?")[1] ?? ""
+          search: (rawQueryContext || rawQuery).split("?")[1] ?? ""
         },
         matchingPermissions
       );
@@ -482,7 +518,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__ */ jsxRuntime.jsx(
@@ -958,13 +994,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] = React.useState(true);
-  const [error, setError] = React.useState();
-  const [data, setData] = React.useState();
-  const warnOnce = React.useMemo(() => once(console.warn), []);
-  const actualPermissionsToCheck = React.useMemo(() => {
+  const [isLoading, setIsLoading] = React__namespace.useState(true);
+  const [error, setError] = React__namespace.useState();
+  const [data, setData] = React__namespace.useState();
+  const warnOnce = React__namespace.useMemo(() => once(console.warn), []);
+  const actualPermissionsToCheck = React__namespace.useMemo(() => {
     if (Array.isArray(permissionsToCheck)) {
       return permissionsToCheck;
     } else {
@@ -974,7 +1010,7 @@ const useRBAC = (permissionsToCheck = [], passedPermissions) => {
       return Object.values(permissionsToCheck).flat();
     }
   }, [permissionsToCheck, warnOnce]);
-  const defaultAllowedActions = React.useMemo(() => {
+  const defaultAllowedActions = React__namespace.useMemo(() => {
     return actualPermissionsToCheck.reduce((acc, permission) => {
       return {
         ...acc,
@@ -984,12 +1020,14 @@ const useRBAC = (permissionsToCheck = [], passedPermissions) => {
   }, [actualPermissionsToCheck]);
   const checkUserHasPermissions = useAuth("useRBAC", (state) => state.checkUserHasPermissions);
   const permssionsChecked = usePrev(actualPermissionsToCheck);
-  React.useEffect(() => {
-    if (!isEqual__default.default(permssionsChecked, actualPermissionsToCheck)) {
+  const contextChecked = usePrev(rawQueryContext);
+  React__namespace.useEffect(() => {
+    if (!isEqual__default.default(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) => {
@@ -1011,7 +1049,9 @@ const useRBAC = (permissionsToCheck = [], passedPermissions) => {
     checkUserHasPermissions,
     passedPermissions,
     permissionsToCheck,
-    permssionsChecked
+    permssionsChecked,
+    contextChecked,
+    rawQueryContext
   ]);
   const allowedActions = Object.entries({
     ...defaultAllowedActions,
@@ -1214,6 +1254,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__namespace.useReducer(reducer, initialState, initialiseState);
+  const setCurrentStep = (step) => {
+    if (step !== null) {
+      const isStepAlreadyDone = get__default.default(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__ */ jsxRuntime.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) => immer.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__default.default(copyInitialState, ["guidedTourState", sectionName, stepName], true);
+    });
+  }
+  if (currentStepLocaleStorage) {
+    const [sectionName, stepName] = currentStepLocaleStorage.split(".");
+    set__default.default(copyInitialState, ["guidedTourState", sectionName, stepName], true);
+    addCompletedStep(currentStepLocaleStorage);
+    window.localStorage.setItem(GUIDED_TOUR_CURRENT_STEP, JSON.stringify(null));
+  }
+  if (skippedLocaleStorage !== null) {
+    set__default.default(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__default.default(messages[locale], messages.en);
@@ -1262,6 +1465,7 @@ exports.AppInfoProvider = AppInfoProvider;
 exports.AuthProvider = AuthProvider;
 exports.ConfigurationContextProvider = ConfigurationContextProvider;
 exports.ConfigurationProvider = ConfigurationProvider;
+exports.GuidedTourProvider = GuidedTourProvider;
 exports.LANGUAGE_LOCAL_STORAGE_KEY = LANGUAGE_LOCAL_STORAGE_KEY;
 exports.LanguageProvider = LanguageProvider;
 exports.NotificationsProvider = NotificationsProvider;
@@ -1279,7 +1483,7 @@ exports.getStoredToken = getStoredToken;
 exports.isObject = isObject;
 exports.login = login;
 exports.logout = logout;
-exports.reducer = reducer;
+exports.reducer = reducer$1;
 exports.setAppTheme = setAppTheme;
 exports.setIn = setIn;
 exports.setLocale = setLocale;
@@ -1291,8 +1495,10 @@ exports.useForgotPasswordMutation = useForgotPasswordMutation;
 exports.useGetProviderOptionsQuery = useGetProviderOptionsQuery;
 exports.useGetProvidersQuery = useGetProvidersQuery;
 exports.useGetRegistrationInfoQuery = useGetRegistrationInfoQuery;
+exports.useGuidedTour = useGuidedTour;
 exports.useIsSSOLockedQuery = useIsSSOLockedQuery;
 exports.useNotification = useNotification;
+exports.useQueryParams = useQueryParams;
 exports.useRBAC = useRBAC;
 exports.useRegisterAdminMutation = useRegisterAdminMutation;
 exports.useRegisterUserMutation = useRegisterUserMutation;
@@ -1304,4 +1510,4 @@ exports.useTypedSelector = useTypedSelector;
 exports.useTypedStore = useTypedStore;
 exports.useUpdateMeMutation = useUpdateMeMutation;
 exports.useUpdateProviderOptionsMutation = useUpdateProviderOptionsMutation;
-//# sourceMappingURL=Theme-7W0we6BI.js.map
+//# sourceMappingURL=Theme-y_rWTknM.js.map