@strapi/admin 4.15.0-alpha.0 → 4.15.0

package/.eslintrc.js

@@ -2,8 +2,11 @@ module.exports = {
   root: true,
   overrides: [
     {
-      files: ['admin/**/*', 'ee/admin/**/*'],
+      files: ['ee/admin/**/*'],
       extends: ['custom/front'],
+      rules: {
+        'import/extensions': 'off',
+      },
     },
     {
       files: ['**/*'],

package/admin/.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  root: true,
+  overrides: [
+    {
+      files: ['**/*.js', '**/*.jsx'],
+      extends: ['custom/front'],
+      rules: {
+        'import/extensions': 'off',
+      },
+    },
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      extends: ['custom/front/typescript'],
+    },
+    {
+      files: ['./tests/*', '**/*.test.*'],
+      env: {
+        jest: true,
+      },
+      rules: {
+        /**
+         * So we can do `import { render } from '@tests/utils'`
+         */
+        'import/no-unresolved': 'off',
+      },
+    },
+  ],
+};

package/admin/custom.d.ts

@@ -0,0 +1,28 @@
+export {};
+
+import { StrapiTheme } from '@strapi/design-system';
+
+declare module 'styled-components' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends StrapiTheme {}
+}
+
+declare global {
+  interface Window {
+    strapi: {
+      backendURL: string;
+      isEE: boolean;
+      features: {
+        SSO: 'sso';
+        AUDIT_LOGS: 'audit-logs';
+        REVIEW_WORKFLOWS: 'review-workflows';
+        isEnabled: (featureName?: string) => boolean;
+      };
+      flags: {
+        nps?: boolean;
+      };
+      projectType: 'Community' | 'Enterprise';
+      telemetryDisabled: boolean;
+    };
+  }
+}

package/admin/src/StrapiApp.js

@@ -9,24 +9,25 @@ import { Helmet } from 'react-helmet';
 import { BrowserRouter } from 'react-router-dom';
 
 import Logo from './assets/images/logo-strapi-2022.svg';
-import localStorageKey from './components/LanguageProvider/utils/localStorageKey';
-import Providers from './components/Providers';
-import { customFields, Plugin } from './core/apis';
-import configureStore from './core/store/configureStore';
+import { LANGUAGE_LOCAL_STORAGE_KEY } from './components/LanguageProvider';
+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;
 
@@ -454,21 +455,19 @@ class StrapiApp {
         showReleaseNotification={this.configurations.notifications.releases}
         store={store}
       >
-        <>
-          <Helmet
-            link={[
-              {
-                rel: 'icon',
-                type: 'image/png',
-                href: this.configurations.head.favicon,
-              },
-            ]}
-            htmlAttributes={{ lang: localStorage.getItem(localStorageKey) || 'en' }}
-          />
-          <BrowserRouter basename={basename}>
-            <App store={store} />
-          </BrowserRouter>
-        </>
+        <Helmet
+          link={[
+            {
+              rel: 'icon',
+              type: 'image/png',
+              href: this.configurations.head.favicon,
+            },
+          ]}
+          htmlAttributes={{ lang: localStorage.getItem(LANGUAGE_LOCAL_STORAGE_KEY) || 'en' }}
+        />
+        <BrowserRouter basename={basename}>
+          <App store={store} />
+        </BrowserRouter>
       </Providers>
     );
   }

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

@@ -0,0 +1,68 @@
+import * as React from 'react';
+
+import { ConfigurationContext, ConfigurationContextValue } from '../contexts/configuration';
+
+interface ConfigurationProviderProps {
+  children: React.ReactNode;
+  authLogo: string;
+  menuLogo: string;
+  showReleaseNotification?: boolean;
+  showTutorials?: boolean;
+}
+
+type LogoKeys = keyof ConfigurationContextValue['logos'];
+
+const ConfigurationProvider = ({
+  children,
+  authLogo: defaultAuthLogo,
+  menuLogo: defaultMenuLogo,
+  showReleaseNotification = false,
+  showTutorials = false,
+}: ConfigurationProviderProps) => {
+  const [{ menuLogo, authLogo }, setLogos] = React.useState<{
+    [_Key in `${LogoKeys}Logo`]?: ConfigurationContextValue['logos'][LogoKeys]['custom'];
+  }>({
+    menuLogo: null,
+    authLogo: null,
+  });
+
+  const updateProjectSettings: ConfigurationContextValue['updateProjectSettings'] =
+    React.useCallback(
+      ({ menuLogo, authLogo }) => {
+        setLogos({
+          menuLogo: menuLogo || defaultMenuLogo,
+          authLogo: authLogo || defaultAuthLogo,
+        });
+      },
+      [defaultAuthLogo, defaultMenuLogo]
+    );
+
+  const configurationValue = React.useMemo(() => {
+    return {
+      logos: {
+        menu: { custom: menuLogo, default: defaultMenuLogo },
+        auth: { custom: authLogo, default: defaultAuthLogo },
+      },
+      updateProjectSettings,
+      showReleaseNotification,
+      showTutorials,
+    };
+  }, [
+    menuLogo,
+    defaultMenuLogo,
+    authLogo,
+    defaultAuthLogo,
+    updateProjectSettings,
+    showReleaseNotification,
+    showTutorials,
+  ]);
+
+  return (
+    <ConfigurationContext.Provider value={configurationValue}>
+      {children}
+    </ConfigurationContext.Provider>
+  );
+};
+
+export { ConfigurationProvider };
+export type { ConfigurationProviderProps };

package/admin/src/components/{DragLayer/DragLayer.js → DragLayer.tsx}

@@ -1,11 +1,14 @@
 import * as React from 'react';
 
 import { Box } from '@strapi/design-system';
-import PropTypes from 'prop-types';
-import { useDragLayer } from 'react-dnd';
-
-function getStyle(initialOffset, currentOffset, mouseOffset) {
-  if (!initialOffset || !currentOffset) {
+import { DragLayerMonitor, XYCoord, useDragLayer } from 'react-dnd';
+
+function getStyle(
+  initialOffset: XYCoord | null,
+  currentOffset: XYCoord | null,
+  mouseOffset: XYCoord | null
+) {
+  if (!initialOffset || !currentOffset || !mouseOffset) {
     return { display: 'none' };
   }
 
@@ -16,7 +19,14 @@ function getStyle(initialOffset, currentOffset, mouseOffset) {
   };
 }
 
-export function DragLayer({ renderItem }) {
+export interface DragLayerProps {
+  renderItem: (item: {
+    item: unknown;
+    type: ReturnType<DragLayerMonitor['getItemType']>;
+  }) => React.ReactNode;
+}
+
+const DragLayer = ({ renderItem }: DragLayerProps) => {
   const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = useDragLayer(
     (monitor) => ({
       item: monitor.getItem(),
@@ -47,8 +57,6 @@ export function DragLayer({ renderItem }) {
       </Box>
     </Box>
   );
-}
-
-DragLayer.propTypes = {
-  renderItem: PropTypes.func.isRequired,
 };
+
+export { DragLayer };

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 };