@strapi/admin 4.6.0 → 4.7.0-beta.0

package/admin/src/content-manager/pages/App/utils/getContentTypeLinks.js

@@ -1,13 +1,14 @@
-import { axiosInstance } from '../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 import generateModelsLinks from './generateModelsLinks';
 import checkPermissions from './checkPermissions';
 import { getRequestUrl } from '../../../utils';
 
 const getContentTypeLinks = async (models, userPermissions, toggleNotification) => {
+  const { get } = getFetchClient();
   try {
     const {
       data: { data: contentTypeConfigurations },
-    } = await axiosInstance.get(getRequestUrl('content-types-settings'));
+    } = await get(getRequestUrl('content-types-settings'));
 
     const { collectionTypesSectionLinks, singleTypesSectionLinks } = generateModelsLinks(
       models,

package/admin/src/content-manager/pages/ComponentSetttingsView/index.js

@@ -1,9 +1,8 @@
 import React, { memo, useEffect, useMemo, useReducer } from 'react';
 import { useParams } from 'react-router-dom';
-import { CheckPagePermissions, LoadingIndicatorPage } from '@strapi/helper-plugin';
+import { CheckPagePermissions, LoadingIndicatorPage, useFetchClient } from '@strapi/helper-plugin';
 import { useSelector, shallowEqual } from 'react-redux';
 import axios from 'axios';
-import { axiosInstance } from '../../../core/utils';
 import { getRequestUrl, mergeMetasWithSchema } from '../../utils';
 import { makeSelectModelAndComponentSchemas } from '../App/selectors';
 import permissions from '../../../permissions';
@@ -18,6 +17,7 @@ const ComponentSettingsView = () => {
   const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);
   const { schemas } = useSelector((state) => schemasSelector(state), shallowEqual);
   const { uid } = useParams();
+  const { get } = useFetchClient();
 
   useEffect(() => {
     const CancelToken = axios.CancelToken;
@@ -29,7 +29,7 @@ const ComponentSettingsView = () => {
 
         const {
           data: { data },
-        } = await axiosInstance.get(getRequestUrl(`components/${uid}/configuration`), {
+        } = await get(getRequestUrl(`components/${uid}/configuration`), {
           cancelToken: source.token,
         });
 
@@ -48,7 +48,7 @@ const ComponentSettingsView = () => {
     return () => {
       source.cancel('Operation canceled by the user.');
     };
-  }, [uid, schemas]);
+  }, [uid, schemas, get]);
 
   if (isLoading) {
     return <LoadingIndicatorPage />;

package/admin/src/content-manager/pages/EditSettingsView/utils/api.js

@@ -1,8 +1,10 @@
-import { axiosInstance } from '../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 import { getRequestUrl } from '../../../utils';
 
 const putCMSettingsEV = (body, slug, isContentTypeView) => {
-  return axiosInstance.put(
+  const { put } = getFetchClient();
+
+  return put(
     getRequestUrl(
       isContentTypeView ? `content-types/${slug}/configuration` : `components/${slug}/configuration`
     ),

package/admin/src/content-manager/pages/ListSettingsView/utils/api.js

@@ -1,8 +1,10 @@
-import { axiosInstance } from '../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 import { getRequestUrl } from '../../../utils';
 
 const putCMSettingsLV = (body, slug) => {
-  return axiosInstance.put(getRequestUrl(`content-types/${slug}/configuration`), body);
+  const { put } = getFetchClient();
+
+  return put(getRequestUrl(`content-types/${slug}/configuration`), body);
 };
 
 export default putCMSettingsLV;

package/admin/src/content-manager/pages/ListView/index.js

@@ -14,6 +14,7 @@ import {
   NoPermissions,
   CheckPermissions,
   SearchURLQuery,
+  useFetchClient,
   useFocusWhenNavigate,
   useQueryParams,
   useNotification,
@@ -33,8 +34,6 @@ import ArrowLeft from '@strapi/icons/ArrowLeft';
 import Plus from '@strapi/icons/Plus';
 import Cog from '@strapi/icons/Cog';
 
-import { axiosInstance } from '../../../core/utils';
-
 import DynamicTable from '../../components/DynamicTable';
 import AttributeFilter from '../../components/AttributeFilter';
 import { InjectionZone } from '../../../shared/components';
@@ -97,6 +96,8 @@ function ListView({
   const { formatMessage } = useIntl();
   const contentType = layout.contentType;
   const hasDraftAndPublish = get(contentType, 'options.draftAndPublish', false);
+  const fetchClient = useFetchClient();
+  const { post, del } = fetchClient;
 
   // FIXME
   // Using a ref to avoid requests being fired multiple times on slug on change
@@ -112,7 +113,7 @@ function ListView({
 
         const {
           data: { results, pagination: paginationResult },
-        } = await axiosInstance.get(endPoint, opts);
+        } = await fetchClient.get(endPoint, opts);
 
         notifyStatus(
           formatMessage(
@@ -154,13 +155,13 @@ function ListView({
         });
       }
     },
-    [formatMessage, getData, getDataSucceeded, notifyStatus, push, toggleNotification]
+    [formatMessage, getData, getDataSucceeded, notifyStatus, push, toggleNotification, fetchClient]
   );
 
   const handleConfirmDeleteAllData = useCallback(
     async (ids) => {
       try {
-        await axiosInstance.post(getRequestUrl(`collection-types/${slug}/actions/bulkDelete`), {
+        await post(getRequestUrl(`collection-types/${slug}/actions/bulkDelete`), {
           ids,
         });
 
@@ -174,13 +175,13 @@ function ListView({
         });
       }
     },
-    [fetchData, params, slug, toggleNotification]
+    [fetchData, params, slug, toggleNotification, post]
   );
 
   const handleConfirmDeleteData = useCallback(
     async (idToDelete) => {
       try {
-        await axiosInstance.delete(getRequestUrl(`collection-types/${slug}/${idToDelete}`));
+        await del(getRequestUrl(`collection-types/${slug}/${idToDelete}`));
 
         const requestUrl = getRequestUrl(`collection-types/${slug}${params}`);
         fetchData(requestUrl);
@@ -202,7 +203,7 @@ function ListView({
         });
       }
     },
-    [slug, params, fetchData, toggleNotification, formatMessage]
+    [slug, params, fetchData, toggleNotification, formatMessage, del]
   );
 
   useEffect(() => {
@@ -221,7 +222,6 @@ function ListView({
 
       source.cancel('Operation canceled by the user.');
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [canRead, getData, slug, params, getDataSucceeded, fetchData]);
 
   const defaultHeaderLayoutTitle = formatMessage({

package/admin/src/core/utils/index.js

@@ -1,3 +1,2 @@
-export { default as axiosInstance } from './axiosInstance';
 export { default as basename } from './basename';
 export { default as createHook } from './createHook';

package/admin/src/hooks/useFetchEnabledPlugins/utils/api.js

@@ -1,7 +1,8 @@
-import { axiosInstance } from '../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 
 const fetchEnabledPlugins = async () => {
-  const { data } = await axiosInstance.get('/admin/plugins');
+  const { get } = getFetchClient();
+  const { data } = await get('/admin/plugins');
 
   return data;
 };

package/admin/src/hooks/useInjectReducer/index.js

@@ -0,0 +1 @@
+export * from './useInjectReducer';

package/admin/src/hooks/useInjectReducer/useInjectReducer.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { useStore } from 'react-redux';
+
+/**
+ * Inject a new reducer into the global redux-store.
+ *
+ * @export
+ * @param {string} namespace - Store namespace of the injected reducer
+ * @param {Function} reducer - Reducer function
+ * @return void
+ */
+
+export function useInjectReducer(namespace, reducer) {
+  const store = useStore();
+
+  useEffect(() => {
+    store.injectReducer(namespace, reducer);
+  }, [store, namespace, reducer]);
+}

package/admin/src/hooks/useRegenerate/index.js

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { get } from 'lodash';
-import { useNotification } from '@strapi/helper-plugin';
-import { axiosInstance } from '../../core/utils';
+import { useFetchClient, useNotification } from '@strapi/helper-plugin';
 
-const useRegenerate = (id, onRegenerate) => {
+const useRegenerate = (url, id, onRegenerate) => {
   const [isLoadingConfirmation, setIsLoadingConfirmation] = useState(false);
   const toggleNotification = useNotification();
+  const { post } = useFetchClient();
 
   const regenerateData = async () => {
     try {
@@ -13,7 +13,7 @@ const useRegenerate = (id, onRegenerate) => {
         data: {
           data: { accessKey },
         },
-      } = await axiosInstance.post(`/admin/api-tokens/${id}/regenerate`);
+      } = await post(`${url}${id}/regenerate`);
       setIsLoadingConfirmation(false);
       onRegenerate(accessKey);
     } catch (error) {

package/admin/src/hooks/useRolesList/index.js

@@ -1,7 +1,6 @@
 import { useEffect, useReducer, useCallback } from 'react';
-import { useNotification } from '@strapi/helper-plugin';
+import { getFetchClient, useNotification } from '@strapi/helper-plugin';
 import get from 'lodash/get';
-import { axiosInstance } from '../../core/utils';
 import init from './init';
 import reducer, { initialState } from './reducer';
 
@@ -19,6 +18,9 @@ const useRolesList = (shouldFetchData = true) => {
   }, [shouldFetchData]);
 
   const fetchRolesList = useCallback(async () => {
+    // TODO: evaluate to replace it with a useFetchClient when we work on the useCallback to remove
+    const fetchClient = getFetchClient();
+
     try {
       dispatch({
         type: 'GET_DATA',
@@ -26,7 +28,7 @@ const useRolesList = (shouldFetchData = true) => {
 
       const {
         data: { data },
-      } = await axiosInstance.get('/admin/roles');
+      } = await fetchClient.get('/admin/roles');
 
       dispatch({
         type: 'GET_DATA_SUCCEEDED',

package/admin/src/hooks/useSettingsMenu/utils/defaultGlobalLinks.js

@@ -22,6 +22,13 @@ const defaultGlobalLinks = [
     isDisplayed: false,
     permissions: adminPermissions.settings['api-tokens'].main,
   },
+  {
+    intlLabel: { id: 'Settings.transferTokens.title', defaultMessage: 'Transfer Tokens' },
+    to: '/settings/transfer-tokens?sort=name:ASC',
+    id: 'transfer-tokens',
+    isDisplayed: false,
+    permissions: adminPermissions.settings['transfer-tokens'].main,
+  },
 ];
 
 export default defaultGlobalLinks;

package/admin/src/index.js

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom';
-import appCustomisations from './app';
+import { getFetchClient } from '@strapi/helper-plugin';
 import { Components, Fields, Middlewares, Reducers } from './core/apis';
-import { axiosInstance } from './core/utils';
+import appCustomisations from './app';
 // eslint-disable-next-line import/extensions
 import plugins from './plugins';
 import appReducers from './reducers';
@@ -29,12 +29,13 @@ const reducers = Reducers({ appReducers });
 const MOUNT_NODE = document.getElementById('app');
 
 const run = async () => {
+  const { get } = getFetchClient();
   try {
     const {
       data: {
         data: { isEE, features },
       },
-    } = await axiosInstance.get('/admin/project-type');
+    } = await get('/admin/project-type');
 
     window.strapi.isEE = isEE;
     window.strapi.features = {

package/admin/src/pages/Admin/Onboarding/constants.js

@@ -0,0 +1,46 @@
+import { Book, PaperPlane } from '@strapi/icons';
+
+export const VIDEO_LINKS = [
+  {
+    label: {
+      id: 'app.components.Onboarding.link.build-content',
+      defaultMessage: 'Build a content architecture',
+    },
+    href: 'https://www.youtube.com/watch?v=G9GjN0RxhkE',
+    duration: '5:48',
+  },
+  {
+    label: {
+      id: 'app.components.Onboarding.link.manage-content',
+      defaultMessage: 'Add & manage content',
+    },
+    href: 'https://www.youtube.com/watch?v=DEZw4KbybAI',
+    duration: '3:18',
+  },
+  {
+    label: { id: 'app.components.Onboarding.link.manage-media', defaultMessage: 'Manage media' },
+    href: 'https://www.youtube.com/watch?v=-61MuiMQb38',
+    duration: '3:41',
+  },
+];
+
+export const WATCH_MORE = {
+  href: 'https://www.youtube.com/playlist?list=PL7Q0DQYATmvidz6lEmwE5nIcOAYagxWqq',
+  label: {
+    id: 'app.components.Onboarding.link.more-videos',
+    defaultMessage: 'Watch more videos',
+  },
+};
+
+export const DOCUMENTATION_LINKS = [
+  {
+    label: { id: 'global.documentation', defaultMessage: 'documentation' },
+    href: 'https://docs.strapi.io',
+    icon: Book,
+  },
+  {
+    label: { id: 'app.static.links.cheatsheet', defaultMessage: 'cheatsheet' },
+    href: 'https://strapi-showcase.s3-us-west-2.amazonaws.com/CheatSheet.pdf',
+    icon: PaperPlane,
+  },
+];

package/admin/src/pages/Admin/Onboarding/index.js

@@ -1,92 +1,91 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Box, Flex, FocusTrap, Typography, Icon, Stack } from '@strapi/design-system';
-import { Book, Cross, Information, Question } from '@strapi/icons';
-import { pxToRem } from '@strapi/helper-plugin';
-
-import { useConfigurations } from '../../../hooks';
-
-const OnboardingWrapper = styled(Box)`
-  position: fixed;
-  bottom: ${({ theme }) => theme.spaces[2]};
-  right: ${({ theme }) => theme.spaces[2]};
-`;
-
-const Button = styled(Box)`
-  width: ${({ theme }) => theme.spaces[8]};
-  height: ${({ theme }) => theme.spaces[8]};
-  background: ${({ theme }) => theme.colors.primary600};
-  box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  FocusTrap,
+  Icon,
+  Portal,
+  PopoverPrimitives,
+  Stack,
+  Typography,
+  VisuallyHidden,
+} from '@strapi/design-system';
+import { Cross, Play, Question } from '@strapi/icons';
+
+import onboardingPreview from '../../../assets/images/onboarding-preview.png';
+import { VIDEO_LINKS, DOCUMENTATION_LINKS, WATCH_MORE } from './constants';
+
+// TODO: use new Button props derived from Box props with next DS release
+const HelperButton = styled(Button)`
   border-radius: 50%;
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.buttonNeutral0};
-  }
+  padding: ${({ theme }) => theme.spaces[3]};
+  /* Resetting 2rem height defined by Button component */
+  height: 100%;
 `;
 
-const LinksWrapper = styled(Box)`
-  bottom: ${({ theme }) => `${theme.spaces[9]}`};
-  min-width: ${200 / 16}rem;
-  position: absolute;
-  right: 0;
+const IconWrapper = styled(Flex)`
+  transform: translate(-50%, -50%);
 `;
 
-const StyledLink = styled(Flex)`
+const VideoLinkWrapper = styled(Flex)`
   text-decoration: none;
 
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral600};
+  :focus-visible {
+    outline-offset: ${({ theme }) => `-${theme.spaces[1]}`};
   }
 
-  &:focus,
-  &:hover {
-    background: ${({ theme }) => theme.colors.neutral100};
+  :hover {
+    background: ${({ theme }) => theme.colors.primary100};
 
-    svg path {
-      fill: ${({ theme }) => theme.colors.neutral700};
+    /* Hover style for the number displayed */
+    ${Typography}:first-child {
+      color: ${({ theme }) => theme.colors.primary500};
     }
 
-    ${[Typography]} {
-      color: ${({ theme }) => theme.colors.neutral700};
+    /* Hover style for the label */
+    ${Typography}:nth-child(1) {
+      color: ${({ theme }) => theme.colors.primary600};
     }
   }
 `;
 
+const Preview = styled.img`
+  width: ${({ theme }) => theme.spaces[10]};
+  height: ${({ theme }) => theme.spaces[8]};
+  /* Same overlay used in ModalLayout */
+  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
+  border-radius: ${({ theme }) => theme.borderRadius};
+`;
+
+const TypographyLineHeight = styled(Typography)`
+  /* line height of label and watch more to 1 so they can be better aligned visually */
+  line-height: 1;
+`;
+
+const TextLink = styled(TypographyLineHeight)`
+  text-decoration: none;
+
+  :hover {
+    text-decoration: underline;
+  }
+`;
+
 const Onboarding = () => {
+  const triggerRef = useRef();
   const [isOpen, setIsOpen] = useState(false);
   const { formatMessage } = useIntl();
-  const { showTutorials } = useConfigurations();
-
-  if (!showTutorials) {
-    return null;
-  }
 
-  const STATIC_LINKS = [
-    {
-      Icon: <Book />,
-      label: formatMessage({
-        id: 'global.documentation',
-        defaultMessage: 'Documentation',
-      }),
-      destination: 'https://docs.strapi.io',
-    },
-    {
-      Icon: <Information />,
-      label: formatMessage({ id: 'app.static.links.cheatsheet', defaultMessage: 'CheatSheet' }),
-      destination: 'https://strapi-showcase.s3-us-west-2.amazonaws.com/CheatSheet.pdf',
-    },
-  ];
-
-  const handleClick = () => {
+  const handlePopoverVisibility = () => {
     setIsOpen((prev) => !prev);
   };
 
   return (
-    <OnboardingWrapper as="aside">
-      <Button
-        as="button"
-        id="onboarding"
+    <Box as="aside" position="fixed" bottom={2} right={2}>
+      <HelperButton
         aria-label={formatMessage(
           isOpen
             ? {
@@ -98,37 +97,110 @@ const Onboarding = () => {
                 defaultMessage: 'Open help menu',
               }
         )}
-        onClick={handleClick}
+        onClick={handlePopoverVisibility}
+        ref={triggerRef}
       >
-        <Icon as={isOpen ? Cross : Question} height={pxToRem(16)} width={pxToRem(16)} />
-      </Button>
+        <Icon as={isOpen ? Cross : Question} color="buttonNeutral0" />
+      </HelperButton>
 
-      {/* FIX ME - replace with popover when overflow popover is fixed 
-       + when v4 mockups for onboarding component are ready */}
       {isOpen && (
-        <FocusTrap onEscape={handleClick}>
-          <LinksWrapper background="neutral0" hasRadius shadow="tableShadow" padding={2}>
-            {STATIC_LINKS.map((link) => (
-              <StyledLink
-                as="a"
-                key={link.label}
-                rel="nofollow noreferrer noopener"
-                target="_blank"
-                href={link.destination}
-                padding={2}
-                hasRadius
-                alignItems="center"
+        <Portal>
+          <PopoverPrimitives.Content
+            padding={0}
+            source={triggerRef}
+            placement="top-end"
+            spacing={12}
+          >
+            <FocusTrap onEscape={handlePopoverVisibility}>
+              <Flex
+                justifyContent="space-between"
+                paddingBottom={5}
+                paddingRight={6}
+                paddingLeft={6}
+                paddingTop={6}
               >
-                <Stack horizontal spacing={2}>
-                  {link.Icon}
-                  <Typography color="neutral600">{link.label}</Typography>
-                </Stack>
-              </StyledLink>
-            ))}
-          </LinksWrapper>
-        </FocusTrap>
+                <TypographyLineHeight fontWeight="bold">
+                  {formatMessage({
+                    id: 'app.components.Onboarding.title',
+                    defaultMessage: 'Get started videos',
+                  })}
+                </TypographyLineHeight>
+                <TextLink
+                  as="a"
+                  href={WATCH_MORE.href}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  variant="pi"
+                  textColor="primary600"
+                >
+                  {formatMessage(WATCH_MORE.label)}
+                </TextLink>
+              </Flex>
+              <Divider />
+              {VIDEO_LINKS.map(({ href, duration, label }, index) => (
+                <VideoLinkWrapper
+                  as="a"
+                  href={href}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  key={href}
+                  hasRadius
+                  paddingTop={4}
+                  paddingBottom={4}
+                  paddingLeft={6}
+                  paddingRight={11}
+                >
+                  <Box paddingRight={5}>
+                    <Typography textColor="neutral200" variant="alpha">
+                      {index + 1}
+                    </Typography>
+                  </Box>
+                  <Box position="relative">
+                    <Preview src={onboardingPreview} alt="" />
+                    <IconWrapper
+                      position="absolute"
+                      top="50%"
+                      left="50%"
+                      background="primary600"
+                      borderRadius="50%"
+                      justifyContent="center"
+                      width={6}
+                      height={6}
+                    >
+                      <Icon as={Play} color="buttonNeutral0" width={3} height={3} />
+                    </IconWrapper>
+                  </Box>
+                  <Flex direction="column" alignItems="start" paddingLeft={4}>
+                    <Typography fontWeight="bold">{formatMessage(label)}</Typography>
+                    <VisuallyHidden>:</VisuallyHidden>
+                    <Typography textColor="neutral600" variant="pi">
+                      {duration}
+                    </Typography>
+                  </Flex>
+                </VideoLinkWrapper>
+              ))}
+              <Stack spacing={2} paddingLeft={5} paddingTop={2} paddingBottom={5}>
+                {DOCUMENTATION_LINKS.map(({ label, href, icon }) => (
+                  <Stack horizontal spacing={3} key={href}>
+                    <Icon as={icon} color="primary600" />
+                    <TextLink
+                      as="a"
+                      href={href}
+                      target="_blank"
+                      rel="noreferrer noopener"
+                      variant="sigma"
+                      textColor="primary700"
+                    >
+                      {formatMessage(label)}
+                    </TextLink>
+                  </Stack>
+                ))}
+              </Stack>
+            </FocusTrap>
+          </PopoverPrimitives.Content>
+        </Portal>
       )}
-    </OnboardingWrapper>
+    </Box>
   );
 };
 

package/admin/src/pages/Admin/index.js

@@ -10,10 +10,11 @@ import { useTracking, LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-
 import { useDispatch, useSelector } from 'react-redux';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+
 import GuidedTourModal from '../../components/GuidedTour/Modal';
 import LeftMenu from '../../components/LeftMenu';
 import AppLayout from '../../layouts/AppLayout';
-import { useMenu } from '../../hooks';
+import { useMenu, useConfigurations } from '../../hooks';
 import { createRoute } from '../../utils';
 import { SET_APP_RUNTIME_STATUS } from '../App/constants';
 import Onboarding from './Onboarding';
@@ -65,6 +66,7 @@ const Admin = () => {
   useTrackUsage();
   const { isLoading, generalSectionLinks, pluginsSectionLinks } = useMenu();
   const { menu } = useStrapiApp();
+  const { showTutorials } = useConfigurations();
 
   const routes = useMemo(() => {
     return menu
@@ -106,7 +108,8 @@ const Admin = () => {
           </Switch>
         </Suspense>
         <GuidedTourModal />
-        <Onboarding />
+
+        {showTutorials && <Onboarding />}
       </AppLayout>
     </DndProvider>
   );