@strapi/admin 4.6.1 → 4.7.0-beta.0

package/admin/src/content-manager/components/CollectionTypeFormWrapper/index.js

@@ -220,8 +220,6 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
   const onDelete = useCallback(
     async (trackerProperty) => {
-      console.log('onDelete');
-
       try {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 

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

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { get } from 'lodash';
 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();
@@ -13,7 +13,7 @@ const useRegenerate = (id, onRegenerate) => {
         data: {
           data: { accessKey },
         },
-      } = await post(`/admin/api-tokens/${id}/regenerate`);
+      } = await post(`${url}${id}/regenerate`);
       setIsLoadingConfirmation(false);
       onRegenerate(accessKey);
     } catch (error) {

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/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>
   );

package/admin/src/pages/SettingsPage/{pages/ApiTokens/EditView/components → components/Tokens}/FormHead/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { Link } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
+import { Link } from '@strapi/helper-plugin';
 import ArrowLeft from '@strapi/icons/ArrowLeft';
 import Check from '@strapi/icons/Check';
 import { Button } from '@strapi/design-system/Button';
@@ -9,29 +9,36 @@ import { HeaderLayout } from '@strapi/design-system/Layout';
 import { Stack } from '@strapi/design-system/Stack';
 import Regenerate from '../Regenerate';
 
-const FormHead = ({ apiToken, setApiToken, canEditInputs, canRegenerate, isSubmitting }) => {
+const FormHead = ({
+  title,
+  token,
+  setToken,
+  canEditInputs,
+  canRegenerate,
+  isSubmitting,
+  backUrl,
+  regenerateUrl,
+}) => {
   const { formatMessage } = useIntl();
   const handleRegenerate = (newKey) => {
-    setApiToken({
-      ...apiToken,
+    setToken({
+      ...token,
       accessKey: newKey,
     });
   };
 
   return (
     <HeaderLayout
-      title={
-        apiToken?.name ||
-        formatMessage({
-          id: 'Settings.apiTokens.createPage.title',
-          defaultMessage: 'Create API Token',
-        })
-      }
+      title={token?.name || formatMessage(title)}
       primaryAction={
         canEditInputs ? (
           <Stack horizontal spacing={2}>
-            {canRegenerate && apiToken?.id && (
-              <Regenerate onRegenerate={handleRegenerate} idToRegenerate={apiToken?.id} />
+            {canRegenerate && token?.id && (
+              <Regenerate
+                backUrl={regenerateUrl}
+                onRegenerate={handleRegenerate}
+                idToRegenerate={token?.id}
+              />
             )}
             <Button
               disabled={isSubmitting}
@@ -48,13 +55,17 @@ const FormHead = ({ apiToken, setApiToken, canEditInputs, canRegenerate, isSubmi
           </Stack>
         ) : (
           canRegenerate &&
-          apiToken?.id && (
-            <Regenerate onRegenerate={handleRegenerate} idToRegenerate={apiToken?.id} />
+          token?.id && (
+            <Regenerate
+              onRegenerate={handleRegenerate}
+              idToRegenerate={token?.id}
+              backUrl={regenerateUrl}
+            />
           )
         )
       }
       navigationAction={
-        <Link startIcon={<ArrowLeft />} to="/settings/api-tokens">
+        <Link startIcon={<ArrowLeft />} to={backUrl}>
           {formatMessage({
             id: 'global.back',
             defaultMessage: 'Back',
@@ -66,7 +77,7 @@ const FormHead = ({ apiToken, setApiToken, canEditInputs, canRegenerate, isSubmi
 };
 
 FormHead.propTypes = {
-  apiToken: PropTypes.shape({
+  token: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
     lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -78,12 +89,18 @@ FormHead.propTypes = {
   }),
   canEditInputs: PropTypes.bool.isRequired,
   canRegenerate: PropTypes.bool.isRequired,
-  setApiToken: PropTypes.func.isRequired,
+  setToken: PropTypes.func.isRequired,
   isSubmitting: PropTypes.bool.isRequired,
+  backUrl: PropTypes.string.isRequired,
+  title: PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string,
+  }).isRequired,
+  regenerateUrl: PropTypes.string.isRequired,
 };
 
 FormHead.defaultProps = {
-  apiToken: undefined,
+  token: undefined,
 };
 
 export default FormHead;

package/admin/src/pages/SettingsPage/components/Tokens/FormiTokenContainer/LifeSpanInput.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { usePersistentState } from '@strapi/helper-plugin';
+import { Select, Option } from '@strapi/design-system/Select';
+import { Typography } from '@strapi/design-system/Typography';
+import { getDateOfExpiration } from '../../../pages/ApiTokens/EditView/utils';
+
+const LifeSpanInput = ({ token, errors, values, onChange, disabled }) => {
+  const { formatMessage } = useIntl();
+  const [lang] = usePersistentState('strapi-admin-language', 'en');
+
+  return (
+    <>
+      <Select
+        name="lifespan"
+        label={formatMessage({
+          id: 'Settings.apiTokens.form.duration',
+          defaultMessage: 'Token duration',
+        })}
+        value={values.lifespan !== null ? values.lifespan : '0'}
+        error={
+          errors.lifespan
+            ? formatMessage(
+                errors.lifespan?.id
+                  ? errors.lifespan
+                  : { id: errors.lifespan, defaultMessage: errors.lifespan }
+              )
+            : null
+        }
+        onChange={(value) => {
+          onChange({ target: { name: 'lifespan', value } });
+        }}
+        required
+        disabled={disabled}
+        placeholder="Select"
+      >
+        <Option value="604800000">
+          {formatMessage({
+            id: 'Settings.apiTokens.duration.7-days',
+            defaultMessage: '7 days',
+          })}
+        </Option>
+        <Option value="2592000000">
+          {formatMessage({
+            id: 'Settings.apiTokens.duration.30-days',
+            defaultMessage: '30 days',
+          })}
+        </Option>
+        <Option value="7776000000">
+          {formatMessage({
+            id: 'Settings.apiTokens.duration.90-days',
+            defaultMessage: '90 days',
+          })}
+        </Option>
+        <Option value="0">
+          {formatMessage({
+            id: 'Settings.apiTokens.duration.unlimited',
+            defaultMessage: 'Unlimited',
+          })}
+        </Option>
+      </Select>
+      <Typography variant="pi" textColor="neutral600">
+        {disabled &&
+          `${formatMessage({
+            id: 'Settings.apiTokens.duration.expiration-date',
+            defaultMessage: 'Expiration date',
+          })}: ${getDateOfExpiration(token?.createdAt, parseInt(values.lifespan, 10, lang))}`}
+      </Typography>
+    </>
+  );
+};
+
+LifeSpanInput.propTypes = {
+  errors: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  values: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  disabled: PropTypes.bool.isRequired,
+  token: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.string,
+    lifespan: PropTypes.string,
+    name: PropTypes.string,
+    accessKey: PropTypes.string,
+    permissions: PropTypes.array,
+    description: PropTypes.string,
+    createdAt: PropTypes.string,
+  }),
+};
+
+LifeSpanInput.defaultProps = {
+  errors: {},
+  token: {},
+};
+
+export default LifeSpanInput;