@strapi/admin 4.14.5 → 4.15.0

package/admin/src/StrapiApp.js

@@ -10,23 +10,24 @@ import { BrowserRouter } from 'react-router-dom';
 
 import Logo from './assets/images/logo-strapi-2022.svg';
 import { LANGUAGE_LOCAL_STORAGE_KEY } from './components/LanguageProvider';
-import Providers from './components/Providers';
-import { customFields, Plugin } from './core/apis';
-import configureStore from './core/store/configureStore';
+import { Providers } from './components/Providers';
+import { HOOKS, INJECTION_ZONES } from './constants';
+import { customFields, Plugin, Reducers } from './core/apis';
+import { configureStore } from './core/store/configure';
 import { basename, createHook } from './core/utils';
-import {
+import favicon from './favicon.png';
+import App from './pages/App';
+import languageNativeNames from './translations/languageNativeNames';
+
+const {
   INJECT_COLUMN_IN_TABLE,
   MUTATE_COLLECTION_TYPES_LINKS,
   MUTATE_EDIT_VIEW_LAYOUT,
   MUTATE_SINGLE_TYPES_LINKS,
-} from './exposedHooks';
-import favicon from './favicon.png';
-import injectionZones from './injectionZones';
-import App from './pages/App';
-import languageNativeNames from './translations/languageNativeNames';
+} = HOOKS;
 
 class StrapiApp {
-  constructor({ adminConfig, appPlugins, library, middlewares, reducers }) {
+  constructor({ adminConfig, appPlugins, library, middlewares }) {
     this.customConfigurations = adminConfig.config;
     this.customBootstrapConfiguration = adminConfig.bootstrap;
     this.configurations = {
@@ -43,11 +44,11 @@ class StrapiApp {
     this.library = library;
     this.middlewares = middlewares;
     this.plugins = {};
-    this.reducers = reducers;
+    this.reducers = Reducers({});
     this.translations = {};
     this.hooksDict = {};
     this.admin = {
-      injectionZones,
+      injectionZones: INJECTION_ZONES,
     };
     this.customFields = customFields;
 

package/admin/src/components/AuthenticatedApp.tsx

@@ -0,0 +1,187 @@
+import * as React from 'react';
+
+import {
+  AppInfoContextValue,
+  AppInfoProvider,
+  auth,
+  LoadingIndicatorPage,
+  useFetchClient,
+  useGuidedTour,
+} from '@strapi/helper-plugin';
+import { useQueries } from 'react-query';
+import lt from 'semver/functions/lt';
+import valid from 'semver/functions/valid';
+//  TODO: DS add loader
+
+import packageJSON from '../../../package.json';
+import { UserEntity } from '../../../shared/entities';
+import { useConfiguration } from '../hooks/useConfiguration';
+import { APIResponse, APIResponseUsersLegacy } from '../types/adminAPI';
+import { getFullName } from '../utils/getFullName';
+import { hashAdminUserEmail } from '../utils/hashAdminUserEmail';
+
+import { NpsSurvey } from './NpsSurvey';
+import { PluginsInitializer } from './PluginsInitializer';
+import { RBACProvider, Permission } from './RBACProvider';
+
+const strapiVersion = packageJSON.version;
+
+const AuthenticatedApp = () => {
+  const { setGuidedTourVisibility } = useGuidedTour();
+  const userInfo = auth.get('userInfo');
+  const [userDisplayName, setUserDisplayName] = React.useState<string>(() =>
+    userInfo ? userInfo.username || getFullName(userInfo.firstname ?? '', userInfo.lastname) : ''
+  );
+  const [userId, setUserId] = React.useState<string>();
+  const { showReleaseNotification } = useConfiguration();
+  const { get } = useFetchClient();
+  const [
+    { data: appInfos, status },
+    { data: tagName, isLoading },
+    { data: permissions, status: fetchPermissionsStatus, refetch, isFetching },
+    { data: userRoles },
+  ] = useQueries([
+    {
+      queryKey: 'app-infos',
+      async queryFn() {
+        const { data } = await get<
+          APIResponse<
+            Pick<
+              AppInfoContextValue,
+              | 'currentEnvironment'
+              | 'autoReload'
+              | 'communityEdition'
+              | 'dependencies'
+              | 'useYarn'
+              | 'projectId'
+              | 'strapiVersion'
+              | 'nodeVersion'
+            >
+          >
+        >('/admin/information');
+
+        return data.data;
+      },
+    },
+    {
+      queryKey: 'strapi-release',
+      async queryFn() {
+        try {
+          const res = await fetch('https://api.github.com/repos/strapi/strapi/releases/latest');
+
+          if (!res.ok) {
+            throw new Error();
+          }
+
+          const response = (await res.json()) as { tag_name: string | null | undefined };
+
+          if (!response.tag_name) {
+            throw new Error();
+          }
+
+          return response.tag_name;
+        } catch (err) {
+          // Don't throw an error
+          return strapiVersion;
+        }
+      },
+      enabled: showReleaseNotification,
+      initialData: strapiVersion,
+    },
+    {
+      queryKey: 'admin-users-permission',
+      async queryFn() {
+        const { data } = await get<{ data: Permission[] }>('/admin/users/me/permissions');
+
+        return data.data;
+      },
+      initialData: [],
+    },
+    {
+      queryKey: 'user-roles',
+      async queryFn() {
+        const {
+          data: {
+            data: { roles },
+          },
+        } = await get<APIResponseUsersLegacy<UserEntity>>('/admin/users/me');
+
+        return roles;
+      },
+    },
+  ]);
+
+  const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, tagName);
+
+  /**
+   * TODO: does this actually need to be an effect?
+   */
+  React.useEffect(() => {
+    if (userRoles) {
+      const isUserSuperAdmin = userRoles.find(({ code }) => code === 'strapi-super-admin');
+
+      if (isUserSuperAdmin && appInfos?.autoReload) {
+        setGuidedTourVisibility(true);
+      }
+    }
+  }, [userRoles, appInfos, setGuidedTourVisibility]);
+
+  React.useEffect(() => {
+    const getUserId = async () => {
+      if (userInfo) {
+        const userId = await hashAdminUserEmail(userInfo);
+
+        if (userId) {
+          setUserId(userId);
+        }
+      }
+    };
+
+    getUserId();
+  }, [userInfo]);
+
+  // We don't need to wait for the release query to be fetched before rendering the plugins
+  // however, we need the appInfos and the permissions
+  const shouldShowNotDependentQueriesLoader =
+    isFetching || status === 'loading' || fetchPermissionsStatus === 'loading';
+
+  const shouldShowLoader = isLoading || shouldShowNotDependentQueriesLoader;
+
+  if (shouldShowLoader) {
+    return <LoadingIndicatorPage />;
+  }
+
+  // TODO: add error state
+  if (status === 'error') {
+    return <div>error...</div>;
+  }
+
+  return (
+    <AppInfoProvider
+      {...appInfos}
+      userId={userId}
+      latestStrapiReleaseTag={tagName}
+      setUserDisplayName={setUserDisplayName}
+      shouldUpdateStrapi={shouldUpdateStrapi}
+      userDisplayName={userDisplayName}
+    >
+      <RBACProvider permissions={permissions ?? []} refetchPermissions={refetch}>
+        <NpsSurvey />
+        <PluginsInitializer />
+      </RBACProvider>
+    </AppInfoProvider>
+  );
+};
+
+const checkLatestStrapiVersion = (
+  currentPackageVersion: string,
+  latestPublishedVersion: string = ''
+): boolean => {
+  if (!valid(currentPackageVersion) || !valid(latestPublishedVersion)) {
+    return false;
+  }
+
+  return lt(currentPackageVersion, latestPublishedVersion);
+};
+
+export { AuthenticatedApp };

package/admin/src/components/ConfigurationProvider.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { ConfigurationContext, ConfigurationContextValue } from '../contexts/configuration';
 
-export interface ConfigurationProviderProps {
+interface ConfigurationProviderProps {
   children: React.ReactNode;
   authLogo: string;
   menuLogo: string;
@@ -65,3 +65,4 @@ const ConfigurationProvider = ({
 };
 
 export { ConfigurationProvider };
+export type { ConfigurationProviderProps };

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

@@ -0,0 +1,111 @@
+import { Box, Button, Flex, Typography } from '@strapi/design-system';
+import { LinkButton } from '@strapi/design-system/v2';
+import { GuidedTourContextValue, pxToRem, useGuidedTour, useTracking } from '@strapi/helper-plugin';
+import { ArrowRight } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { NavLink } from 'react-router-dom';
+
+import { LAYOUT_DATA, States, STATES } from './constants';
+import { Number, VerticalDivider } from './Ornaments';
+
+const GuidedTourHomepage = () => {
+  const { guidedTourState, setSkipped } = useGuidedTour();
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  const sections = Object.entries(LAYOUT_DATA).map(([key, val]) => ({
+    key: key,
+    title: val.home.title,
+    content: (
+      <LinkButton
+        onClick={() => trackUsage(val.home.trackingEvent)}
+        as={NavLink}
+        // @ts-expect-error - types are not inferred correctly through the as prop.
+        to={val.home.cta.target}
+        endIcon={<ArrowRight />}
+      >
+        {formatMessage(val.home.cta.title)}
+      </LinkButton>
+    ),
+    isDone: Object.entries(
+      guidedTourState[key as keyof GuidedTourContextValue['guidedTourState']]
+    ).every(([, value]) => value),
+  }));
+
+  const activeSectionIndex = sections.findIndex((section) => !section.isDone);
+
+  const handleSkip = () => {
+    setSkipped(true);
+    trackUsage('didSkipGuidedtour');
+  };
+
+  return (
+    <Box
+      hasRadius
+      shadow="tableShadow"
+      paddingTop={7}
+      paddingRight={4}
+      paddingLeft={7}
+      paddingBottom={4}
+      background="neutral0"
+    >
+      <Flex direction="column" alignItems="stretch" gap={6}>
+        <Typography variant="beta" as="h2">
+          {formatMessage({
+            id: 'app.components.GuidedTour.title',
+            defaultMessage: '3 steps to get started',
+          })}
+        </Typography>
+        <Box>
+          {sections.map((section, index) => {
+            const state = getState(activeSectionIndex, index);
+            return (
+              <Box key={section.key}>
+                <Flex>
+                  <Box minWidth={pxToRem(30)} marginRight={5}>
+                    <Number state={state}>{index + 1}</Number>
+                  </Box>
+                  <Typography variant="delta" as="h3">
+                    {formatMessage(section.title)}
+                  </Typography>
+                </Flex>
+                <Flex alignItems="flex-start">
+                  <Flex
+                    justifyContent="center"
+                    minWidth={pxToRem(30)}
+                    marginBottom={3}
+                    marginTop={3}
+                    marginRight={5}
+                  >
+                    {index === sections.length - 1 ? null : <VerticalDivider state={state} />}
+                  </Flex>
+                  <Box marginTop={2}>{state === STATES.IS_ACTIVE ? section.content : null}</Box>
+                </Flex>
+              </Box>
+            );
+          })}
+        </Box>
+      </Flex>
+      <Flex justifyContent="flex-end">
+        <Button variant="tertiary" onClick={handleSkip}>
+          {formatMessage({ id: 'app.components.GuidedTour.skip', defaultMessage: 'Skip the tour' })}
+        </Button>
+      </Flex>
+    </Box>
+  );
+};
+
+const getState = (activeSectionIndex: number, index: number): States => {
+  if (activeSectionIndex === -1) {
+    return STATES.IS_DONE;
+  }
+  if (index < activeSectionIndex) {
+    return STATES.IS_DONE;
+  }
+  if (index > activeSectionIndex) {
+    return STATES.IS_NOT_DONE;
+  }
+  return STATES.IS_ACTIVE;
+};
+
+export { GuidedTourHomepage };

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

@@ -0,0 +1,303 @@
+import * as React from 'react';
+
+import {
+  Box,
+  Button,
+  Flex,
+  FocusTrap,
+  IconButton,
+  Portal,
+  Typography,
+} from '@strapi/design-system';
+import { LinkButton } from '@strapi/design-system/v2';
+import { GuidedTourContextValue, pxToRem, useGuidedTour, useTracking } from '@strapi/helper-plugin';
+import { ArrowRight, Cross } from '@strapi/icons';
+import get from 'lodash/get';
+import { MessageDescriptor, useIntl } from 'react-intl';
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { LAYOUT_DATA, STATES } from './constants';
+import { Number, VerticalDivider } from './Ornaments';
+
+/* -------------------------------------------------------------------------------------------------
+ * GuidedTourModal
+ * -----------------------------------------------------------------------------------------------*/
+
+const GuidedTourModal = () => {
+  const {
+    currentStep,
+    guidedTourState,
+    setCurrentStep,
+    setStepState,
+    isGuidedTourVisible,
+    setSkipped,
+  } = useGuidedTour();
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  if (!currentStep || !isGuidedTourVisible) {
+    return null;
+  }
+
+  const stepData = get(LAYOUT_DATA, currentStep);
+  const sectionKeys = Object.keys(guidedTourState);
+  const [sectionName, stepName] = currentStep.split('.') as [
+    keyof GuidedTourContextValue['guidedTourState'],
+    string
+  ];
+  const sectionIndex = sectionKeys.indexOf(sectionName);
+  const stepIndex = Object.keys(guidedTourState[sectionName]).indexOf(stepName);
+  const hasSectionAfter = sectionIndex < sectionKeys.length - 1;
+  const hasStepAfter = stepIndex < Object.keys(guidedTourState[sectionName]).length - 1;
+
+  const handleCtaClick = () => {
+    setStepState(currentStep, true);
+    trackUsage(stepData.trackingEvent);
+
+    setCurrentStep(null);
+  };
+
+  const handleSkip = () => {
+    setSkipped(true);
+    setCurrentStep(null);
+    trackUsage('didSkipGuidedtour');
+  };
+
+  return (
+    <Portal>
+      <ModalWrapper onClick={handleCtaClick} padding={8} justifyContent="center">
+        <FocusTrap onEscape={handleCtaClick}>
+          <Flex
+            direction="column"
+            alignItems="stretch"
+            background="neutral0"
+            width={pxToRem(660)}
+            shadow="popupShadow"
+            hasRadius
+            padding={4}
+            gap={8}
+            role="dialog"
+            aria-modal
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Flex justifyContent="flex-end">
+              <IconButton
+                onClick={handleCtaClick}
+                aria-label={formatMessage({
+                  id: 'app.utils.close-label',
+                  defaultMessage: 'Close',
+                })}
+              >
+                <Cross />
+              </IconButton>
+            </Flex>
+            <Box
+              paddingLeft={7}
+              paddingRight={7}
+              paddingBottom={!hasStepAfter && !hasSectionAfter ? 8 : 0}
+            >
+              <GuidedTourStepper
+                title={stepData.title}
+                cta={'cta' in stepData ? stepData.cta : undefined}
+                onCtaClick={handleCtaClick}
+                sectionIndex={sectionIndex}
+                stepIndex={stepIndex}
+                hasSectionAfter={hasSectionAfter}
+              >
+                <GuidedTourContent {...stepData.content} />
+              </GuidedTourStepper>
+            </Box>
+            {!(!hasStepAfter && !hasSectionAfter) && (
+              <Flex justifyContent="flex-end">
+                <Button variant="tertiary" onClick={handleSkip}>
+                  {formatMessage({
+                    id: 'app.components.GuidedTour.skip',
+                    defaultMessage: 'Skip the tour',
+                  })}
+                </Button>
+              </Flex>
+            )}
+          </Flex>
+        </FocusTrap>
+      </ModalWrapper>
+    </Portal>
+  );
+};
+
+const ModalWrapper = styled(Flex)`
+  position: fixed;
+  z-index: 4;
+  inset: 0;
+  /* this is theme.colors.neutral800 with opacity */
+  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
+`;
+
+/* -------------------------------------------------------------------------------------------------
+ * GuidedTourStepper
+ * -----------------------------------------------------------------------------------------------*/
+
+interface GuidedTourStepperProps {
+  title: MessageDescriptor;
+  children: React.ReactNode;
+  cta?: {
+    title: MessageDescriptor;
+    target?: string;
+  };
+  onCtaClick: () => void;
+  sectionIndex: number;
+  stepIndex: number;
+  hasSectionAfter: boolean;
+}
+
+const GuidedTourStepper = ({
+  title,
+  children,
+  cta,
+  onCtaClick,
+  sectionIndex,
+  stepIndex,
+  hasSectionAfter,
+}: GuidedTourStepperProps) => {
+  const { formatMessage } = useIntl();
+
+  const hasSectionBefore = sectionIndex > 0;
+  const hasStepsBefore = stepIndex > 0;
+  const nextSectionIndex = sectionIndex + 1;
+
+  return (
+    <>
+      <Flex alignItems="stretch">
+        <Flex marginRight={8} justifyContent="center" minWidth={pxToRem(30)}>
+          {hasSectionBefore && <VerticalDivider state={STATES.IS_DONE} minHeight={pxToRem(24)} />}
+        </Flex>
+        <Typography variant="sigma" textColor="primary600">
+          {formatMessage({
+            id: 'app.components.GuidedTour.title',
+            defaultMessage: '3 steps to get started',
+          })}
+        </Typography>
+      </Flex>
+      <Flex>
+        <Flex marginRight={8} minWidth={pxToRem(30)}>
+          <Number
+            state={hasStepsBefore ? STATES.IS_DONE : STATES.IS_ACTIVE}
+            paddingTop={3}
+            paddingBottom={3}
+          >
+            {sectionIndex + 1}
+          </Number>
+        </Flex>
+        <Typography variant="alpha" fontWeight="bold" textColor="neutral800" as="h3" id="title">
+          {formatMessage(title)}
+        </Typography>
+      </Flex>
+      <Flex alignItems="stretch">
+        <Flex marginRight={8} direction="column" justifyContent="center" minWidth={pxToRem(30)}>
+          {hasSectionAfter && (
+            <>
+              <VerticalDivider state={STATES.IS_DONE} />
+              {hasStepsBefore && (
+                <Number state={STATES.IS_ACTIVE} paddingTop={3}>
+                  {nextSectionIndex + 1}
+                </Number>
+              )}
+            </>
+          )}
+        </Flex>
+        <Box>
+          {children}
+          {cta &&
+            (cta.target ? (
+              <LinkButton
+                as={NavLink}
+                endIcon={<ArrowRight />}
+                onClick={onCtaClick}
+                // @ts-expect-error - types are not inferred correctly through the as prop.
+                to={cta.target}
+              >
+                {formatMessage(cta.title)}
+              </LinkButton>
+            ) : (
+              <Button endIcon={<ArrowRight />} onClick={onCtaClick}>
+                {formatMessage(cta.title)}
+              </Button>
+            ))}
+        </Box>
+      </Flex>
+      {hasStepsBefore && hasSectionAfter && (
+        <Box paddingTop={3}>
+          <Flex marginRight={8} justifyContent="center" width={pxToRem(30)}>
+            <VerticalDivider state={STATES.IS_DONE} minHeight={pxToRem(24)} />
+          </Flex>
+        </Box>
+      )}
+    </>
+  );
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * GuidedTourContent
+ * -----------------------------------------------------------------------------------------------*/
+
+interface GuidedTourContentProps
+  extends Required<Pick<MessageDescriptor, 'defaultMessage' | 'id'>> {}
+
+const GuidedTourContent = ({ id, defaultMessage }: GuidedTourContentProps) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Flex direction="column" alignItems="stretch" gap={4} paddingBottom={6}>
+      {formatMessage(
+        { id, defaultMessage },
+        {
+          documentationLink: DocumentationLink,
+          b: Bold,
+          p: Paragraph,
+          light: Light,
+          ul: List,
+          li: ListItem,
+        }
+      )}
+    </Flex>
+  );
+};
+
+const DocumentationLink = (children: React.ReactNode) => (
+  <Typography
+    as="a"
+    textColor="primary600"
+    target="_blank"
+    rel="noopener noreferrer"
+    href="https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#api-parameters"
+  >
+    {children}
+  </Typography>
+);
+
+const Bold = (children: React.ReactNode) => (
+  <Typography fontWeight="semiBold">{children}</Typography>
+);
+
+const Paragraph = (children: React.ReactNode) => <Typography>{children}</Typography>;
+
+const Light = (children: React.ReactNode) => (
+  <Typography textColor="neutral600">{children}</Typography>
+);
+
+const List = (children: React.ReactNode) => (
+  <Box paddingLeft={6}>
+    <ul>{children}</ul>
+  </Box>
+);
+
+const LiStyled = styled.li`
+  list-style: disc;
+  &::marker {
+    color: ${({ theme }) => theme.colors.neutral800};
+  }
+`;
+
+const ListItem = (children: React.ReactNode) => <LiStyled>{children}</LiStyled>;
+
+export { GuidedTourModal };