@strapi/admin 4.0.0-next.15 → 4.0.0-next.16

package/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js

@@ -1,16 +1,37 @@
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useIntl } from 'react-intl';
+import styled, { keyframes } from 'styled-components';
+import Time from '@strapi/icons/Time';
+import Reload from '@strapi/icons/Reload';
+import { Link } from '@strapi/parts/Link';
+import { Box } from '@strapi/parts/Box';
+import { Stack } from '@strapi/parts/Stack';
+import { Row } from '@strapi/parts/Row';
+import { H1, H2 } from '@strapi/parts/Text';
 import PropTypes from 'prop-types';
-import Content from './Content';
 import Overlay from './Overlay';
-import Wrapper from './Wrapper';
 
 const overlayContainer = document.createElement('div');
 const ID = 'autoReloadOverlayBlocker';
 overlayContainer.setAttribute('id', ID);
 
-const Blocker = ({ className, displayedIcon, description, title, elapsed, isOpen }) => {
+const rotation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`;
+
+const LoaderReload = styled(Reload)`
+  animation: ${rotation} 1s infinite linear;
+  ${({ small }) => small && `width: 25px; height: 25px;`}
+`;
+
+const Blocker = ({ displayedIcon, description, title, elapsed, isOpen }) => {
+  const { formatMessage } = useIntl();
   useEffect(() => {
     document.body.appendChild(overlayContainer);
 
@@ -22,26 +43,38 @@ const Blocker = ({ className, displayedIcon, description, title, elapsed, isOpen
   if (isOpen) {
     return ReactDOM.createPortal(
       <Overlay>
-        <Wrapper>
-          <div className={className}>
-            <FontAwesomeIcon icon={displayedIcon} />
-          </div>
-          <div>
-            <Content description={description} title={title} />
-            {elapsed < 15 && (
-              <div className="buttonContainer">
-                <a
-                  className="primary btn"
-                  href="https://strapi.io/documentation"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Read the documentation
-                </a>
-              </div>
+        <Box>
+          <Row>
+            {displayedIcon === 'reload' && (
+              <Box paddingRight={3} style={{ alignSelf: 'baseline' }}>
+                <LoaderReload width="4rem" height="4rem" />
+              </Box>
+            )}
+            {displayedIcon === 'time' && (
+              <Box paddingRight={3} style={{ alignSelf: 'center' }}>
+                <Time width="3.8rem" height="3.8rem" />
+              </Box>
             )}
-          </div>
-        </Wrapper>
+            <Stack size={2}>
+              <H1>{formatMessage(title)}</H1>
+              <H2 textColor="neutral600">{formatMessage(description)}</H2>
+              <Row>
+                {elapsed < 15 && (
+                  <Link
+                    href="https://strapi.io/documentation"
+                    target="_blank"
+                    onClick={e => {
+                      e.preventDefault();
+                      window.open('https://strapi.io/documentation', '_blank');
+                    }}
+                  >
+                    Read the documentation
+                  </Link>
+                )}
+              </Row>
+            </Stack>
+          </Row>
+        </Box>
       </Overlay>,
       overlayContainer
     );
@@ -51,7 +84,6 @@ const Blocker = ({ className, displayedIcon, description, title, elapsed, isOpen
 };
 
 Blocker.propTypes = {
-  className: PropTypes.string.isRequired,
   displayedIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
   description: PropTypes.object.isRequired,
   elapsed: PropTypes.number.isRequired,

package/admin/src/components/AutoReloadOverlayBlockerProvider/Overlay.js

@@ -11,24 +11,12 @@ const Overlay = styled.div`
   &:before {
     content: '';
     position: fixed;
-    top: 6rem;
+    top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    background: linear-gradient(rgba(0, 0, 0, 15) 0%, rgba(0, 0, 0, 0) 100%);
-    opacity: 0.5;
-  }
-
-  &:after {
-    content: '';
-    position: fixed;
-    top: 6rem;
-    right: 0;
-    bottom: 0;
-    left: 24rem;
-    background: linear-gradient(#fbfbfb 20%, rgba(0, 0, 100, 0) 100%);
-    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1);
-    box-shadow: inset 0 1px 2px 0 rgba(40, 42, 49, 0.16);
+    background: ${({ theme }) => theme.colors.neutral200};
+    opacity: 0.8;
   }
 
   > div {

package/admin/src/components/AutoReloadOverlayBlockerProvider/index.js

@@ -28,7 +28,8 @@ const AutoReloadOverlayBlockerProvider = ({ children }) => {
 
     if (isOpen) {
       timer = setInterval(() => {
-        if (elapsed > 15) {
+        // if (elapsed > 15) {
+        if (elapsed > 30) {
           clearInterval(timer);
 
           return null;
@@ -47,8 +48,8 @@ const AutoReloadOverlayBlockerProvider = ({ children }) => {
     };
   }, [isOpen, elapsed]);
 
-  let displayedIcon = config?.icon || 'sync-alt';
-  let className = 'icoContainer spinner';
+  let displayedIcon = config?.icon || 'reload';
+
   let description = {
     id: config?.description || 'components.OverlayBlocker.description',
     defaultMessage:
@@ -60,8 +61,8 @@ const AutoReloadOverlayBlockerProvider = ({ children }) => {
   };
 
   if (elapsed > 15) {
-    displayedIcon = ['far', 'clock'];
-    className = 'icoContainer';
+    displayedIcon = 'time';
+
     description = {
       id: 'components.OverlayBlocker.description.serverError',
       defaultMessage: 'The server should have restarted, please check your logs in the terminal.',
@@ -81,7 +82,6 @@ const AutoReloadOverlayBlockerProvider = ({ children }) => {
         displayedIcon={displayedIcon}
         isOpen={isOpen}
         elapsed={elapsed}
-        className={className}
         description={description}
         title={title}
       />

package/admin/src/components/LeftMenu/index.js

@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
+import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
-import { Button } from '@strapi/parts/Button';
+import { NavLink as Link } from 'react-router-dom';
 import { Divider } from '@strapi/parts/Divider';
 import {
   MainNav,
@@ -15,7 +14,12 @@ import {
   NavUser,
   NavCondense,
 } from '@strapi/parts/MainNav';
+import { FocusTrap } from '@strapi/parts/FocusTrap';
+import { Box } from '@strapi/parts/Box';
+import { Text } from '@strapi/parts/Text';
+import { Stack } from '@strapi/parts/Stack';
 import ContentIcon from '@strapi/icons/ContentIcon';
+import Logout from '@strapi/icons/Logout';
 import { auth, usePersistentState, useAppInfos } from '@strapi/helper-plugin';
 import useConfigurations from '../../hooks/useConfigurations';
 
@@ -26,13 +30,64 @@ const IconWrapper = styled.span`
   }
 `;
 
+const LinkUserWrapper = styled(Box)`
+  width: ${150 / 16}rem;
+  position: absolute;
+  bottom: ${({ theme }) => theme.spaces[9]};
+  left: ${({ theme }) => theme.spaces[5]};
+`;
+
+const LinkUser = styled(Link)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-decoration: none;
+  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};
+  border-radius: ${({ theme }) => theme.spaces[1]};
+
+  &:hover {
+    background: ${({ theme, logout }) =>
+      logout ? theme.colors.danger100 : theme.colors.primary100};
+    text-decoration: none;
+  }
+
+  svg {
+    path {
+      fill: ${({ theme }) => theme.colors.danger600};
+    }
+  }
+`;
+
 const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
+  const buttonRef = useRef();
+  const [userLinksVisible, setUserLinksVisible] = useState(false);
   const { menuLogo } = useConfigurations();
-  const { push } = useHistory();
   const [condensed, setCondensed] = usePersistentState('navbar-condensed', false);
   const { userDisplayName } = useAppInfos();
   const { formatMessage } = useIntl();
 
+  const initials = userDisplayName
+    .split(' ')
+    .map(name => name.substring(0, 1))
+    .join('')
+    .substring(0, 2);
+
+  const handleToggleUserLinks = () => setUserLinksVisible(prev => !prev);
+
+  const handleLogout = () => {
+    auth.clearAppStorage();
+    handleToggleUserLinks();
+  };
+
+  const handleBlur = e => {
+    if (
+      !e.currentTarget.contains(e.relatedTarget) &&
+      e.relatedTarget?.parentElement?.id !== 'main-nav-user-button'
+    ) {
+      setUserLinksVisible(false);
+    }
+  };
+
   return (
     <MainNav condensed={condensed}>
       <NavBrand
@@ -80,23 +135,43 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
                 {formatMessage(link.intlLabel)}
               </NavLink>
             ))}
-            {/* This is temporary */}
-            <Button
-              type="button"
-              onClick={() => {
-                auth.clearAppStorage();
-                push('/auth/login');
-              }}
-            >
-              Logout
-            </Button>
           </NavSection>
         ) : null}
       </NavSections>
 
-      <NavUser src="https://avatars.githubusercontent.com/u/3874873?v=4" to="/me">
+      <NavUser
+        id="main-nav-user-button"
+        ref={buttonRef}
+        onClick={handleToggleUserLinks}
+        initials={initials}
+      >
         {userDisplayName}
       </NavUser>
+      {userLinksVisible && (
+        <LinkUserWrapper onBlur={handleBlur} padding={1} shadow="tableShadow" background="neutral0">
+          <FocusTrap onEscape={handleToggleUserLinks}>
+            <Stack size={0}>
+              <LinkUser onClick={handleToggleUserLinks} to="/me">
+                <Text>
+                  {formatMessage({
+                    id: 'app.components.LeftMenu.profile',
+                    defaultMessage: 'Profile',
+                  })}
+                </Text>
+              </LinkUser>
+              <LinkUser onClick={handleLogout} logout="logout" to="/auth/login">
+                <Text textColor="danger600">
+                  {formatMessage({
+                    id: 'app.components.LeftMenu.logout',
+                    defaultMessage: 'Logout',
+                  })}
+                </Text>
+                <Logout />
+              </LinkUser>
+            </Stack>
+          </FocusTrap>
+        </LinkUserWrapper>
+      )}
 
       <NavCondense onClick={() => setCondensed(s => !s)}>
         {condensed

package/admin/src/content-manager/components/DynamicTable/CellContent/Media/FileWrapper.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Row } from '@strapi/parts/Row';
@@ -12,7 +12,6 @@ const Wrapper = styled(Row)`
   border: 1px solid ${({ theme }) => theme.colors.neutral200};
   background: ${({ theme }) => theme.colors.neutral150};
   padding-left: 1px;
-  z-index: ${({ hovering }) => (hovering ? 1 : undefined)};
 
   span {
     line-height: 0.6rem;
@@ -20,29 +19,16 @@ const Wrapper = styled(Row)`
   }
 `;
 
-const FileWrapper = ({ children, preview }) => {
-  const [previewVisible, setPreviewVisible] = useState(false);
-
+const FileWrapper = ({ children, ...props }) => {
   return (
-    <Wrapper
-      justifyContent="center"
-      alignItems="center"
-      hovering={preview && previewVisible}
-      onMouseEnter={() => setPreviewVisible(true)}
-      onMouseLeave={() => setPreviewVisible(false)}
-    >
+    <Wrapper justifyContent="center" alignItems="center" as="span" {...props}>
       <TableLabel textColor="neutral600">{children}</TableLabel>
     </Wrapper>
   );
 };
 
-FileWrapper.defaultProps = {
-  preview: true,
-};
-
 FileWrapper.propTypes = {
   children: PropTypes.string.isRequired,
-  preview: PropTypes.bool,
 };
 
 export default FileWrapper;

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

@@ -280,4 +280,7 @@ Inputs.propTypes = {
 
 const Memoized = memo(Inputs, isEqual);
 
-export default connect(Memoized, select);
+export default connect(
+  Memoized,
+  select
+);

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

@@ -437,4 +437,7 @@ SelectWrapper.propTypes = {
 
 const Memoized = memo(SelectWrapper);
 
-export default connect(Memoized, select);
+export default connect(
+  Memoized,
+  select
+);

package/admin/src/content-manager/pages/EditView/DeleteLink/index.js

@@ -46,7 +46,7 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
 
   return (
     <>
-      <Button onClick={toggleWarningDelete} size="S" startIcon={<Delete />} variant="danger">
+      <Button onClick={toggleWarningDelete} size="S" startIcon={<Delete />} variant="danger-light">
         {formatMessage({
           id: getTrad('containers.Edit.delete-entry'),
           defaultMessage: 'Delete this entry',
@@ -71,4 +71,7 @@ DeleteLink.propTypes = {
 
 const Memoized = memo(DeleteLink, isEqual);
 
-export default connect(Memoized, select);
+export default connect(
+  Memoized,
+  select
+);

package/admin/src/pages/AuthPage/components/ForgotPassword/index.js

@@ -40,8 +40,8 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                   <Box paddingTop={6} paddingBottom={7}>
                     <H1>
                       {formatMessage({
-                        id: 'Auth.form.button.password-forgotten',
-                        defaultMessage: 'Password forgotten',
+                        id: 'Auth.form.button.password-recovery',
+                        defaultMessage: 'Password Recovery',
                       })}
                     </H1>
                   </Box>

package/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -44,7 +44,7 @@ const Login = ({ onSubmit, schema, children }) => {
                   <H1>
                     {formatMessage({
                       id: 'Auth.form.welcome.title',
-                      defaultMessage: 'Welcome back!',
+                      defaultMessage: 'Welcome!',
                     })}
                   </H1>
                 </Box>

package/admin/src/pages/AuthPage/components/Register/index.js

@@ -110,7 +110,7 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
                     <H1>
                       {formatMessage({
                         id: 'Auth.form.welcome.title',
-                        defaultMessage: 'Welcome back!',
+                        defaultMessage: 'Welcome!',
                       })}
                     </H1>
                   </Box>

package/admin/src/pages/HomePage/ContentBlocks.js

@@ -53,7 +53,11 @@ const ContentBlocks = () => {
           iconBackground="warning100"
         />
       </BlockLink>
-      <BlockLink href="https://strapi.io/blog" target="_blank" rel="noopener noreferrer nofollow">
+      <BlockLink
+        href="https://strapi.io/blog/categories/tutorials"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+      >
         <ContentBox
           title={formatMessage({
             id: 'app.components.BlockLink.tutorial',

package/admin/src/pages/HomePage/SocialLinks.js

@@ -16,10 +16,57 @@ import ExternalLink from '@strapi/icons/ExternalLink';
 import Github from '@strapi/icons/Github';
 import Slack from '@strapi/icons/Slack';
 import Reddit from '@strapi/icons/Reddit';
+import Strapi from '@strapi/icons/Strapi';
 import Twitter from '@strapi/icons/Twitter';
-import Medium from '@strapi/icons/Medium';
 import Discourse from '@strapi/icons/Discourse';
 
+const StyledReddit = styled(Reddit)`
+  > path:first-child {
+    fill: #ff4500;
+  }
+  > path:last-child {
+    fill: ${({ theme }) => theme.colors.neutral0};
+  }
+`;
+const StyledStrapi = styled(Strapi)`
+  > path:first-child {
+    fill: #8e75ff;
+  }
+  > path:nth-child(2) {
+    fill: #8e75ff;
+  }
+  > path:nth-child(3) {
+    fill: #8e75ff;
+  }
+`;
+
+const StyledTwitter = styled(Twitter)`
+  path {
+    fill: #1da1f2 !important;
+  }
+`;
+
+const StyledDiscourse = styled(Discourse)`
+  > path:first-child {
+    fill: #231f20;
+  }
+  > path:nth-child(2) {
+    fill: #fff9ae;
+  }
+  > path:nth-child(3) {
+    fill: #00aeef;
+  }
+  > path:nth-child(4) {
+    fill: #00a94f;
+  }
+  > path:nth-child(5) {
+    fill: #f15d22;
+  }
+  > path:nth-child(6) {
+    fill: #e31b23;
+  }
+`;
+
 const socialLinks = [
   {
     name: 'Github',
@@ -36,27 +83,33 @@ const socialLinks = [
   {
     name: 'Reddit',
     link: 'https://www.reddit.com/r/Strapi/',
-    icon: <Reddit />,
+    icon: <StyledReddit />,
     alt: 'reddit',
   },
   {
     name: 'Twitter',
     link: 'https://twitter.com/strapijs',
-    icon: <Twitter />,
+    icon: <StyledTwitter />,
     alt: 'twitter',
   },
   {
     name: 'Medium',
     link: 'https://medium.com/@strapi',
-    icon: <Medium />,
+    icon: <StyledStrapi />,
     alt: 'medium',
   },
   {
     name: 'Forum',
     link: 'https://forum.strapi.io',
-    icon: <Discourse />,
+    icon: <StyledDiscourse />,
     alt: 'forum',
   },
+  {
+    name: 'Career',
+    link: 'https://strapi.io/careers',
+    icon: <StyledStrapi />,
+    alt: 'career',
+  },
 ];
 
 const LinkCustom = styled(LinkButton)`
@@ -115,7 +168,10 @@ const SocialLinks = () => {
               })}
             </WordWrap>
           </Stack>
-          <Link href="https://strapi.io/" endIcon={<ExternalLink />}>
+          <Link
+            href="https://portal.productboard.com/strapi/1-roadmap/tabs/2-under-consideration"
+            endIcon={<ExternalLink />}
+          >
             {formatMessage({
               id: 'app.components.HomePage.roadmap',
               defaultMessage: 'See our road map',

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/index.js

@@ -73,9 +73,9 @@ const ConditionsModal = ({ actions, headerBreadCrumbs, isFormDisabled, onClosed,
   };
 
   return (
-    <ModalLayout onClose={onClosed}>
+    <ModalLayout labelledBy="condition-modal-breadcrumbs" onClose={onClosed}>
       <ModalHeader>
-        <Breadcrumbs label={headerBreadCrumbs.join(', ')}>
+        <Breadcrumbs id="condition-modal-breadcrumbs" label={headerBreadCrumbs.join(', ')}>
           {headerBreadCrumbs.map(label => (
             <Crumb key={label}>
               {upperFirst(

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/index.js

@@ -18,6 +18,7 @@ import { cellWidth, rowHeight } from '../../Permissions/utils/constants';
 import RowLabelWithCheckbox from '../../RowLabelWithCheckbox';
 import { getCheckboxState } from '../../utils';
 import generateCheckboxesActions from './utils/generateCheckboxesActions';
+import activeStyle from '../utils/activeStyle';
 
 const activeRowStyle = (theme, isActive) => `
   ${Wrapper} {
@@ -31,6 +32,10 @@ const activeRowStyle = (theme, isActive) => `
   ${ConditionsButton} {
     display: block;
   }
+  &:hover {
+   ${activeStyle(theme)}
+  }
+  
 `;
 
 const Wrapper = styled.div`
@@ -75,7 +80,7 @@ const Chevron = styled(Box)`
   }
 `;
 
-const TinyDot = styled(Box)`
+const TinyDot = styled.span`
   position: absolute;
   top: -6px;
   left: 37px;
@@ -228,7 +233,6 @@ const Collapse = ({
             }
           )}
         </Row>
-        <Box style={{ width: 120 }} />
         {isModalOpen && (
           <ConditionsModal
             headerBreadCrumbs={[label, 'app.components.LeftMenuLinkContainer.settings']}

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypes/index.js

@@ -2,6 +2,7 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '@strapi/parts/Box';
 import styled from 'styled-components';
+import sortBy from 'lodash/sortBy';
 import ContentTypeCollapses from '../ContentTypeCollapses';
 import GlobalActions from '../GlobalActions';
 
@@ -10,7 +11,7 @@ const StyledBox = styled(Box)`
 `;
 
 const ContentTypes = ({ isFormDisabled, kind, layout: { actions, subjects } }) => {
-  const sortedSubjects = [...subjects].sort((a, b) => a.label > b.label);
+  const sortedSubjects = sortBy([...subjects], 'label');
 
   return (
     <StyledBox background="neutral0">

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RoleForm/index.js

@@ -6,19 +6,9 @@ import { Stack } from '@strapi/parts/Stack';
 import { Text } from '@strapi/parts/Text';
 import { Textarea } from '@strapi/parts/Textarea';
 import { TextInput } from '@strapi/parts/TextInput';
+import { Button } from '@strapi/parts/Button';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-
-const UsersRoleNumber = styled.div`
-  border: 1px solid ${({ theme }) => theme.colors.primary200};
-  background: ${({ theme }) => theme.colors.primary100};
-  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};
-  color: ${({ theme }) => theme.colors.primary600};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  font-size: ${12 / 16}rem;
-  font-weight: bold;
-`;
 
 const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
   const { formatMessage } = useIntl();
@@ -50,7 +40,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
                 </Text>
               </Box>
             </Box>
-            <UsersRoleNumber>
+            <Button disabled variant="secondary">
               {formatMessage(
                 {
                   id: 'Settings.roles.form.button.users-with-role',
@@ -59,7 +49,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
                 },
                 { number: role.usersCount }
               )}
-            </UsersRoleNumber>
+            </Button>
           </Row>
           <Grid gap={4}>
             <GridItem col={6}>

package/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js

@@ -310,8 +310,8 @@ const ListView = () => {
                         icon={<AddIcon />}
                       >
                         {formatMessage({
-                          id: 'Settings.webhooks.list.field.add',
-                          defaultMessage: 'Add another field to this collection type',
+                          id: 'Settings.webhooks.list.button.add',
+                          defaultMessage: 'Add new webhook',
                         })}
                       </TFooter>
                     }