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

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

@@ -1,58 +1,190 @@
-import React, { memo } from 'react';
+import React, { useRef, useState } from 'react';
+import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { BaselineAlignment } from '@strapi/helper-plugin';
-import { Footer, Header, LinksContainer, LinksSection, SectionTitle } from './compos';
-import LeftMenuLink from './compos/Link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useIntl } from 'react-intl';
+import { NavLink as Link } from 'react-router-dom';
+import { Divider } from '@strapi/parts/Divider';
+import {
+  MainNav,
+  NavBrand,
+  NavSections,
+  NavLink,
+  NavSection,
+  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';
 
-import Wrapper from './Wrapper';
+// TODO: remove when font-awesome will be removed
+const IconWrapper = styled.span`
+  svg.svg-inline--fa.fa-w-20 {
+    width: 1rem;
+  }
+`;
+
+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 [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 (
-    <Wrapper>
-      <Header />
-
-      <LinksContainer>
-        <BaselineAlignment top size="16px" />
-        <LeftMenuLink
-          to="/content-manager"
-          icon="book-open"
-          intlLabel={{
-            id: `content-manager.plugin.name`,
-            defaultMessage: 'Content manager',
-          }}
-        />
-        <BaselineAlignment bottom size="2px" />
-
-        {pluginsSectionLinks.length > 0 && (
-          <>
-            <SectionTitle>
-              <FormattedMessage
-                id="app.components.LeftMenuLinkContainer.listPlugins"
-                defaultMessage="Plugins"
-              />
-            </SectionTitle>
-            <LinksSection
-              links={pluginsSectionLinks}
-              searchable={false}
-              emptyLinksListMessage="app.components.LeftMenuLinkContainer.noPluginsInstalled"
-            />
-          </>
-        )}
-        {generalSectionLinks.length > 0 && (
-          <>
-            <SectionTitle>
-              <FormattedMessage
-                id="app.components.LeftMenuLinkContainer.general"
-                defaultMessage="General"
-              />
-            </SectionTitle>
-            <LinksSection links={generalSectionLinks} searchable={false} />
-          </>
-        )}
-      </LinksContainer>
-      <Footer key="footer" />
-    </Wrapper>
+    <MainNav condensed={condensed}>
+      <NavBrand
+        workplace="Workplace"
+        title="Strapi Dashboard"
+        icon={<img src={menuLogo} alt="" />}
+      />
+
+      <Divider />
+
+      <NavSections>
+        <NavLink to="/content-manager" icon={<ContentIcon />}>
+          {formatMessage({ id: 'content-manager.plugin.name', defaultMessage: 'Content manager' })}
+        </NavLink>
+
+        {pluginsSectionLinks.length > 0 ? (
+          <NavSection label="Plugins">
+            {pluginsSectionLinks.map(link => (
+              <NavLink
+                to={link.to}
+                key={link.to}
+                icon={
+                  <IconWrapper>
+                    <FontAwesomeIcon icon={link.icon} />
+                  </IconWrapper>
+                }
+              >
+                {formatMessage(link.intlLabel)}
+              </NavLink>
+            ))}
+          </NavSection>
+        ) : null}
+
+        {generalSectionLinks.length > 0 ? (
+          <NavSection label="General">
+            {generalSectionLinks.map(link => (
+              <NavLink
+                badgeContent={
+                  (link.notificationsCount > 0 && link.notificationsCount.toString()) || undefined
+                }
+                to={link.to}
+                key={link.to}
+                icon={<FontAwesomeIcon icon={link.icon} />}
+              >
+                {formatMessage(link.intlLabel)}
+              </NavLink>
+            ))}
+          </NavSection>
+        ) : null}
+      </NavSections>
+
+      <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
+          ? formatMessage({
+              id: 'app.components.LeftMenu.expand',
+              defaultMessage: 'Expand the navbar',
+            })
+          : formatMessage({
+              id: 'app.components.LeftMenu.collapse',
+              defaultMessage: 'Collapse the navbar',
+            })}
+      </NavCondense>
+    </MainNav>
   );
 };
 
@@ -61,4 +193,4 @@ LeftMenu.propTypes = {
   pluginsSectionLinks: PropTypes.array.isRequired,
 };
 
-export default memo(LeftMenu);
+export default LeftMenu;

package/admin/src/components/Notifications/Notification/index.js

@@ -1,40 +1,12 @@
 import React, { useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { Padded, Text, Flex } from '@buffetjs/core';
 import { useIntl } from 'react-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Remove } from '@buffetjs/icons';
-import { NotificationWrapper, IconWrapper, LinkArrow, RemoveWrapper } from './styledComponents';
-
-const types = {
-  success: {
-    icon: 'check',
-    color: 'green',
-  },
-  warning: {
-    icon: 'exclamation',
-    color: 'orange',
-  },
-  info: {
-    icon: 'info',
-    color: 'blue',
-  },
-};
+import { Alert } from '@strapi/parts/Alert';
+import { Link } from '@strapi/parts/Link';
 
 const Notification = ({ dispatch, notification }) => {
   const { formatMessage } = useIntl();
-
-  const {
-    title,
-    message,
-    link,
-    type,
-    id,
-    onClose,
-    timeout,
-    blockTransition,
-    centered,
-  } = notification;
+  const { message, link, type, id, onClose, timeout, blockTransition } = notification;
 
   const formattedMessage = msg => (typeof msg === 'string' ? msg : formatMessage(msg, msg.values));
   const handleClose = useCallback(() => {
@@ -61,62 +33,53 @@ const Notification = ({ dispatch, notification }) => {
     return () => clearTimeout(timeoutToClear);
   }, [blockTransition, handleClose, timeout]);
 
+  let variant;
+  let alertTitle;
+
+  if (type === 'info') {
+    variant = 'default';
+    alertTitle = formatMessage({
+      id: 'notification.default.title',
+      defaultMessage: 'Information Alert:',
+    });
+  } else if (type === 'warning') {
+    alertTitle = formatMessage({
+      id: 'notification.warning.title',
+      defaultMessage: 'Warning Alert:',
+    });
+    variant = 'danger';
+  } else {
+    alertTitle = formatMessage({
+      id: 'notification.success.title',
+      defaultMessage: 'Success Alert:',
+    });
+    variant = 'success';
+  }
+
   return (
-    <NotificationWrapper centered={centered} color={types[type].color}>
-      <Padded top left right bottom size="smd">
-        <Flex alignItems="center" justifyContent="space-between">
-          <IconWrapper>
-            <FontAwesomeIcon icon={types[type].icon} />
-          </IconWrapper>
-          <Padded left size="sm" style={{ width: '80%', flex: 1 }}>
-            {title && (
-              <Text
-                fontSize="xs"
-                textTransform="uppercase"
-                color="grey"
-                title={formattedMessage(title)}
-              >
-                {formattedMessage(title)}
-              </Text>
-            )}
-            <Flex justifyContent="space-between">
-              {message && (
-                <Text title={formattedMessage(message)}>{formattedMessage(message)}</Text>
-              )}
-              {link && (
-                <a
-                  href={link.url}
-                  target={link.target || '_blank'}
-                  rel={!link.target || link.target === '_blank' ? 'noopener noreferrer' : ''}
-                >
-                  <Padded right left size="xs">
-                    <Flex alignItems="center">
-                      <Text
-                        style={{ maxWidth: '100px' }}
-                        ellipsis
-                        fontWeight="bold"
-                        color="blue"
-                        title={formattedMessage(link.label)}
-                      >
-                        {formattedMessage(link.label)}
-                      </Text>
-                      {link.target === '_blank' && (
-                        <Padded left size="xs">
-                          <LinkArrow />
-                        </Padded>
-                      )}
-                    </Flex>
-                  </Padded>
-                </a>
-              )}
-            </Flex>
-          </Padded>
-          <RemoveWrapper>
-            <Remove onClick={handleClose} />
-          </RemoveWrapper>
-        </Flex>
-      </Padded>
-    </NotificationWrapper>
+    <Alert
+      action={
+        link ? (
+          <Link href={link.url} target="_blank">
+            {formatMessage({
+              id: link.label?.id || link.label,
+              defaultMessage: link.label?.defaultMessage || link.label?.id || link.label,
+            })}
+          </Link>
+        ) : (
+          undefined
+        )
+      }
+      onClose={handleClose}
+      closeLabel="Close"
+      title={alertTitle}
+      variant={variant}
+    >
+      {formattedMessage({
+        id: message?.id || message,
+        defaultMessage: message?.defaultMessage || message?.id || message,
+      })}
+    </Alert>
   );
 };
 
@@ -131,7 +94,6 @@ Notification.defaultProps = {
     onClose: () => null,
     timeout: 2500,
     blockTransition: false,
-    centered: false,
   },
 };
 
@@ -147,14 +109,6 @@ Notification.propTypes = {
         values: PropTypes.object,
       }),
     ]),
-    title: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        defaultMessage: PropTypes.string,
-        values: PropTypes.object,
-      }),
-    ]),
     link: PropTypes.shape({
       target: PropTypes.string,
       url: PropTypes.string.isRequired,
@@ -171,7 +125,6 @@ Notification.propTypes = {
     onClose: PropTypes.func,
     timeout: PropTypes.number,
     blockTransition: PropTypes.bool,
-    centered: PropTypes.bool,
   }),
 };
 

package/admin/src/components/Notifications/Wrapper.js

@@ -1,19 +1,12 @@
 import styled from 'styled-components';
-import { TransitionGroup } from 'react-transition-group';
+import { Row } from '@strapi/parts/Row';
 
-const Wrapper = styled(TransitionGroup)`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
+const Wrapper = styled(Row)`
   position: fixed;
-  top: 72px;
-  left: 0;
+  top: 46px;
   right: 0;
+  left: 0;
   z-index: 1100;
-  list-style: none;
-  width: 100%;
-  overflow-y: hidden;
-  pointer-events: none;
 `;
 
 export default Wrapper;

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

@@ -1,8 +1,8 @@
 import { NotificationsProvider } from '@strapi/helper-plugin';
 import React, { useReducer } from 'react';
 import PropTypes from 'prop-types';
-import { CSSTransition } from 'react-transition-group';
-
+import { Box } from '@strapi/parts/Box';
+import { Stack } from '@strapi/parts/Stack';
 import Notification from './Notification';
 import reducer, { initialState } from './reducer';
 import NotificationsWrapper from './Wrapper';
@@ -19,19 +19,16 @@ const Notifications = ({ children }) => {
 
   return (
     <NotificationsProvider toggleNotification={displayNotification}>
-      <NotificationsWrapper>
-        {notifications.map(notification => (
-          <CSSTransition
-            key={notification.id}
-            classNames="notification"
-            timeout={{
-              enter: 500,
-              exit: 300,
-            }}
-          >
-            <Notification dispatch={dispatch} notification={notification} />
-          </CSSTransition>
-        ))}
+      <NotificationsWrapper justifyContent="space-around">
+        <Stack size={notifications.length}>
+          {notifications.map(notification => {
+            return (
+              <Box key={notification.id} style={{ width: 500 }}>
+                <Notification dispatch={dispatch} notification={notification} />
+              </Box>
+            );
+          })}
+        </Stack>
       </NotificationsWrapper>
       {children}
     </NotificationsProvider>

package/admin/src/components/Notifications/reducer.js

@@ -19,13 +19,10 @@ const notificationReducer = (state = initialState, action) =>
             id: 'notification.success.saved',
             defaultMessage: 'Saved',
           }),
-          title: get(action, ['config', 'title'], null),
           link: get(action, ['config', 'link'], null),
           timeout: get(action, ['config', 'timeout'], 2500),
           blockTransition: get(action, ['config', 'blockTransition'], false),
-          uid: get(action, ['config', 'uid'], null),
           onClose: get(action, ['config', 'onClose'], null),
-          centered: get(action, ['config', 'centered'], false),
         });
         draftState.notifId = state.notifId + 1;
         break;

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

@@ -1,20 +1,23 @@
 import React from 'react';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider } from '@strapi/parts/ThemeProvider';
 import PropTypes from 'prop-types';
+import { lightTheme } from '@strapi/parts/themes';
 import GlobalStyle from '../GlobalStyle';
-import Fonts from '../Fonts';
 
 const Theme = ({ children, theme }) => (
   <ThemeProvider theme={theme}>
-    <GlobalStyle />
-    <Fonts />
     {children}
+    <GlobalStyle />
   </ThemeProvider>
 );
 
 Theme.propTypes = {
   children: PropTypes.element.isRequired,
-  theme: PropTypes.object.isRequired,
+  theme: PropTypes.object,
+};
+
+Theme.defaultProps = {
+  theme: lightTheme,
 };
 
 export default Theme;

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { Portal } from '@strapi/parts/Portal';
+import { FocusTrap } from '@strapi/parts/FocusTrap';
+import { IconButton } from '@strapi/parts/IconButton';
+import { LinkButton } from '@strapi/parts/LinkButton';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+import { Text, H1 } from '@strapi/parts/Text';
+import { Stack } from '@strapi/parts/Stack';
+import ExternalLink from '@strapi/icons/ExternalLink';
+import CloseAlertIcon from '@strapi/icons/CloseAlertIcon';
+import { setHexOpacity, useLockScroll } from '@strapi/helper-plugin';
+import AirBalloon from '../../assets/images/hot-air-balloon.png';
+import BigArrow from '../../assets/images/upgrade-details.png';
+
+const UpgradeWrapper = styled.div`
+  position: absolute;
+  z-index: 3;
+  inset: 0;
+  background: ${({ theme }) => setHexOpacity(theme.colors.neutral800, 0.2)};
+  padding: 0 ${({ theme }) => theme.spaces[8]};
+`;
+
+const UpgradeContainer = styled(Row)`
+  position: relative;
+  max-width: ${830 / 16}rem;
+  height: ${415 / 16}rem;
+  margin: 0 auto;
+  overflow: hidden;
+  margin-top: 10%;
+  padding-left: ${64 / 16}rem;
+
+  img:first-of-type {
+    position: absolute;
+    right: 0;
+    top: 0;
+    max-width: ${360 / 16}rem;
+  }
+
+  img:not(:first-of-type) {
+    width: ${130 / 16}rem;
+    margin-left: 12%;
+    margin-right: ${20 / 16}rem;
+    z-index: 0;
+  }
+`;
+
+const TextBold = styled(Text)`
+  font-weight: 700;
+`;
+
+const StackFlexStart = styled(Stack)`
+  align-items: flex-start;
+  max-width: ${400 / 16}rem;
+  z-index: 0;
+`;
+
+const CloseButtonContainer = styled(Box)`
+  position: absolute;
+  right: ${({ theme }) => theme.spaces[4]};
+  top: ${({ theme }) => theme.spaces[4]};
+`;
+
+const UpgradePlanModal = ({ onClose, isOpen }) => {
+  useLockScroll(isOpen);
+  const { formatMessage } = useIntl();
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Portal>
+      <UpgradeWrapper>
+        <FocusTrap onEscape={onClose}>
+          <UpgradeContainer aria-labelledby="upgrade-plan" background="neutral0" hasRadius>
+            <img src={AirBalloon} alt="air-balloon" />
+            <CloseButtonContainer>
+              <IconButton onClick={onClose} aria-label="Close" icon={<CloseAlertIcon />} />
+            </CloseButtonContainer>
+            <StackFlexStart size={6}>
+              <TextBold textColor="primary600">
+                {formatMessage({
+                  id: 'app.components.UpgradePlanModal.text-ce',
+                  defaultMessage: 'COMMUNITY EDITION',
+                })}
+              </TextBold>
+              <Stack size={2}>
+                <H1 as="h2" id="upgrade-plan">
+                  {formatMessage({
+                    id: 'app.components.UpgradePlanModal.limit-reached',
+                    defaultMessage: 'You have reached the limit',
+                  })}
+                </H1>
+                <Text>
+                  {formatMessage({
+                    id: 'app.components.UpgradePlanModal.text-power',
+                    defaultMessage:
+                      'Unlock the full power of Strapi by upgrading your plan to the Enterprise Edition',
+                  })}
+                </Text>
+              </Stack>
+              <LinkButton href="https://strapi.io/pricing-self-hosted" endIcon={<ExternalLink />}>
+                {formatMessage({
+                  id: 'app.components.UpgradePlanModal.button',
+                  defaultMessage: 'Learn more',
+                })}
+              </LinkButton>
+            </StackFlexStart>
+            <img src={BigArrow} alt="upgrade-arrow" />
+          </UpgradeContainer>
+        </FocusTrap>
+      </UpgradeWrapper>
+    </Portal>
+  );
+};
+
+UpgradePlanModal.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+};
+
+export default UpgradePlanModal;