@strapi/admin 4.6.0-beta.2 → 4.6.0

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

@@ -1,45 +1,48 @@
-import React, { useMemo, useReducer, useRef } from 'react';
+import React, { useCallback, useMemo, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { ConfigurationsContext } from '../../contexts';
 import reducer, { initialState } from './reducer';
 
 const ConfigurationsProvider = ({
   children,
-  authLogo,
+  authLogo: defaultAuthLogo,
   menuLogo: defaultMenuLogo,
   showReleaseNotification,
   showTutorials,
 }) => {
-  const [{ menuLogo }, dispatch] = useReducer(reducer, initialState);
+  const [{ menuLogo, authLogo }, dispatch] = useReducer(reducer, initialState);
 
-  const updateProjectSettings = ({ menuLogo }) => {
-    return dispatch({
-      type: 'UPDATE_PROJECT_SETTINGS',
-      values: {
-        menuLogo: menuLogo || defaultMenuLogo,
-      },
-    });
-  };
-
-  const updateProjectSettingsRef = useRef(updateProjectSettings);
+  const updateProjectSettings = useCallback(
+    ({ menuLogo, authLogo }) => {
+      return dispatch({
+        type: 'UPDATE_PROJECT_SETTINGS',
+        values: {
+          menuLogo: menuLogo || defaultMenuLogo,
+          authLogo: authLogo || defaultAuthLogo,
+        },
+      });
+    },
+    [defaultAuthLogo, defaultMenuLogo]
+  );
 
   const configurationValue = useMemo(() => {
     return {
       logos: {
         menu: { custom: menuLogo, default: defaultMenuLogo },
-        auth: { custom: null, default: authLogo },
+        auth: { custom: authLogo, default: defaultAuthLogo },
       },
-      updateProjectSettings: updateProjectSettingsRef.current,
+      updateProjectSettings,
       showReleaseNotification,
       showTutorials,
     };
   }, [
-    authLogo,
     menuLogo,
+    defaultMenuLogo,
+    authLogo,
+    defaultAuthLogo,
+    updateProjectSettings,
     showReleaseNotification,
     showTutorials,
-    updateProjectSettingsRef,
-    defaultMenuLogo,
   ]);
 
   return (

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

@@ -9,6 +9,7 @@ import produce from 'immer';
 
 const initialState = {
   menuLogo: null,
+  authLogo: null,
 };
 
 const reducer = (state = initialState, action) =>

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

@@ -12,6 +12,7 @@ import {
   NavSection,
   NavUser,
   NavCondense,
+  NavFooter,
 } from '@strapi/design-system/v2/MainNav';
 import { FocusTrap } from '@strapi/design-system/FocusTrap';
 import { Box } from '@strapi/design-system/Box';
@@ -183,57 +184,59 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
         ) : 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"
-          hasRadius
+      <NavFooter>
+        <NavUser
+          id="main-nav-user-button"
+          ref={buttonRef}
+          onClick={handleToggleUserLinks}
+          initials={initials}
         >
-          <FocusTrap onEscape={handleToggleUserLinks}>
-            <Stack spacing={0}>
-              <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
-                <Typography>
-                  {formatMessage({
-                    id: 'global.profile',
-                    defaultMessage: 'Profile',
-                  })}
-                </Typography>
-              </LinkUser>
-              <LinkUser as="button" tabIndex={0} onClick={handleLogout} logout="logout">
-                <Typography textColor="danger600">
-                  {formatMessage({
-                    id: 'app.components.LeftMenu.logout',
-                    defaultMessage: 'Logout',
-                  })}
-                </Typography>
-                <Exit />
-              </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>
+          {userDisplayName}
+        </NavUser>
+        {userLinksVisible && (
+          <LinkUserWrapper
+            onBlur={handleBlur}
+            padding={1}
+            shadow="tableShadow"
+            background="neutral0"
+            hasRadius
+          >
+            <FocusTrap onEscape={handleToggleUserLinks}>
+              <Stack spacing={0}>
+                <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
+                  <Typography>
+                    {formatMessage({
+                      id: 'global.profile',
+                      defaultMessage: 'Profile',
+                    })}
+                  </Typography>
+                </LinkUser>
+                <LinkUser tabIndex={0} onClick={handleLogout} logout="logout" to="/auth/login">
+                  <Typography textColor="danger600">
+                    {formatMessage({
+                      id: 'app.components.LeftMenu.logout',
+                      defaultMessage: 'Logout',
+                    })}
+                  </Typography>
+                  <Exit />
+                </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>
+      </NavFooter>
     </MainNav>
   );
 };

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

@@ -11,7 +11,7 @@ const Logo = () => {
     logos: { auth },
   } = useConfigurations();
 
-  return <Img src={auth.default} aria-hidden alt="" />;
+  return <Img src={auth?.custom ?? auth.default} aria-hidden alt="" />;
 };
 
 export default Logo;

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

@@ -1,18 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
 import { Typography } from '@strapi/design-system/Typography';
 
-export const Hint = ({ id, error, name, description }) => {
-  const { formatMessage } = useIntl();
-  const hint = description
-    ? formatMessage(
-        { id: description.id, defaultMessage: description.defaultMessage },
-        { ...description.values }
-      )
-    : '';
-
-  if (!hint || error) {
+export const Hint = ({ id, error, name, hint }) => {
+  if (hint.length === 0 || error) {
     return null;
   }
 
@@ -25,16 +16,12 @@ export const Hint = ({ id, error, name, description }) => {
 
 Hint.defaultProps = {
   id: undefined,
-  description: undefined,
   error: undefined,
+  hint: '',
 };
 
 Hint.propTypes = {
-  description: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   error: PropTypes.string,
   id: PropTypes.string,
   name: PropTypes.string.isRequired,

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

@@ -23,7 +23,7 @@ import {
 const InputUID = ({
   attribute,
   contentTypeUID,
-  description,
+  hint,
   disabled,
   error,
   intlLabel,
@@ -54,13 +54,6 @@ const InputUID = ({
       )
     : name;
 
-  const hint = description
-    ? formatMessage(
-        { id: description.id, defaultMessage: description.defaultMessage },
-        { ...description.values }
-      )
-    : '';
-
   const formattedPlaceholder = placeholder
     ? formatMessage(
         { id: placeholder.id, defaultMessage: placeholder.defaultMessage },
@@ -251,11 +244,6 @@ InputUID.propTypes = {
     required: PropTypes.bool,
   }).isRequired,
   contentTypeUID: PropTypes.string.isRequired,
-  description: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
   disabled: PropTypes.bool,
   error: PropTypes.string,
   intlLabel: PropTypes.shape({
@@ -273,16 +261,17 @@ InputUID.propTypes = {
     values: PropTypes.object,
   }),
   required: PropTypes.bool,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
 };
 
 InputUID.defaultProps = {
-  description: undefined,
   disabled: false,
   error: undefined,
   labelAction: undefined,
   placeholder: undefined,
   value: '',
   required: false,
+  hint: '',
 };
 
 export default InputUID;

package/admin/src/content-manager/components/PreviewWysiwyg/Wrapper.js

@@ -9,9 +9,8 @@ const Wrapper = styled.div`
   padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};
   font-size: ${14 / 16}rem;
   background-color: ${({ theme }) => theme.colors.neutral0};
-  z-index: 2;
-  cursor: not-allowed;
   color: ${({ theme }) => theme.colors.neutral800};
+  line-height: ${({ theme }) => theme.lineHeights[6]};
 
   h1,
   h2,
@@ -19,12 +18,12 @@ const Wrapper = styled.div`
   h4,
   h5,
   h6 {
-    margin-block-start: 10px;
-    margin-block-end: 10px;
+    margin-block-start: ${({ theme }) => theme.spaces[2]};
+    margin-block-end: ${({ theme }) => theme.spaces[2]};
   }
 
   p {
-    margin-bottom: 10px;
+    margin-bottom: ${({ theme }) => theme.spaces[2]};
   }
 
   h1 {
@@ -56,13 +55,13 @@ const Wrapper = styled.div`
   }
 
   blockquote {
-    margin-top: 41px;
-    margin-bottom: 34px;
+    margin-top: ${({ theme }) => theme.spaces[8]};
+    margin-bottom: ${({ theme }) => theme.spaces[7]};
     font-size: ${14 / 16}rem;
     font-weight: 400;
-    border-left: 5px solid #eee;
+    border-left: 4px solid ${({ theme }) => theme.colors.neutral150};
     font-style: italic;
-    padding: 10px 20px;
+    padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[5]};
   }
 
   img {
@@ -91,9 +90,18 @@ const Wrapper = styled.div`
 
   pre,
   code {
-    font-size: 13px;
-    border-radius: 3px;
-    background-color: #002b36;
+    font-size: ${14 / 16}rem;
+    border-radius: 4px;
+    /* 
+      Hard coded since the color is the same between themes,
+      theme.colors.neutral800 changes between themes.
+
+      Matches the color of the JSON Input component.
+    */
+    background-color: #32324d;
+    max-width: 100%;
+    overflow: auto;
+    padding: ${({ theme }) => theme.spaces[2]};
   }
 
   /* Inline code */
@@ -105,21 +113,6 @@ const Wrapper = styled.div`
     }
   }
 
-  .warning {
-    background-color: #faa684;
-    padding: 30px;
-    border-radius: 3px;
-  }
-  .tip {
-    padding: 30px;
-    border-radius: 3px;
-  }
-
-  .footnote-ref,
-  .footnote-backref {
-    color: #007bff;
-  }
-
   ol {
     list-style-type: decimal;
     margin-block-start: ${({ theme }) => theme.spaces[4]};
@@ -127,6 +120,7 @@ const Wrapper = styled.div`
     margin-inline-start: 0px;
     margin-inline-end: 0px;
     padding-inline-start: ${({ theme }) => theme.spaces[4]};
+
     ol,
     ul {
       margin-block-start: 0px;
@@ -141,6 +135,7 @@ const Wrapper = styled.div`
     margin-inline-start: 0px;
     margin-inline-end: 0px;
     padding-inline-start: ${({ theme }) => theme.spaces[4]};
+
     ul,
     ol {
       margin-block-start: 0px;

package/admin/src/content-manager/components/Wysiwyg/EditorLayout.js

@@ -1,15 +1,11 @@
-import React, { useEffect } from 'react';
+import React from 'react';
+import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Flex } from '@strapi/design-system/Flex';
-import { Box } from '@strapi/design-system/Box';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
-import { Portal } from '@strapi/design-system/Portal';
-import { BaseButton } from '@strapi/design-system/BaseButton';
-import { Typography } from '@strapi/design-system/Typography';
-import { pxToRem } from '@strapi/helper-plugin';
-import Collapse from '@strapi/icons/Collapse';
-import { useIntl } from 'react-intl';
+import { BaseButton, Box, Flex, FocusTrap, Portal, Typography } from '@strapi/design-system';
+import { Collapse } from '@strapi/icons';
+import { pxToRem, useLockScroll } from '@strapi/helper-plugin';
+
 import PreviewWysiwyg from '../PreviewWysiwyg';
 
 const setOpacity = (hex, alpha) =>
@@ -32,6 +28,7 @@ export const ExpandButton = styled(BaseButton)`
 
   svg {
     margin-left: ${({ theme }) => `${theme.spaces[2]}`};
+
     path {
       fill: ${({ theme }) => theme.colors.neutral700};
       width: ${12 / 16}rem;
@@ -42,19 +39,8 @@ export const ExpandButton = styled(BaseButton)`
 
 export const EditorLayout = ({ children, isExpandMode, error, previewContent, onCollapse }) => {
   const { formatMessage } = useIntl();
-  useEffect(() => {
-    const body = document.body;
-
-    if (isExpandMode) {
-      body.classList.add('lock-body-scroll');
-    }
 
-    return () => {
-      if (isExpandMode) {
-        body.classList.remove('lock-body-scroll');
-      }
-    };
-  }, [isExpandMode]);
+  useLockScroll(isExpandMode);
 
   if (isExpandMode) {
     return (
@@ -71,7 +57,6 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
             onClick={onCollapse}
           >
             <Box
-              id="wysiwyg-expand"
               background="neutral0"
               hasRadius
               shadow="popupShadow"
@@ -84,9 +69,15 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
                 <BoxWithBorder flex="1" height="100%">
                   {children}
                 </BoxWithBorder>
-                <Box flex="1" height="100%">
-                  <Flex height={pxToRem(48)} background="neutral100" justifyContent="flex-end">
-                    <ExpandButton id="collapse" onClick={onCollapse}>
+                <Flex alignItems="start" direction="column" flex={1} height="100%" width="100%">
+                  <Flex
+                    height={pxToRem(48)}
+                    background="neutral100"
+                    justifyContent="flex-end"
+                    shrink={0}
+                    width="100%"
+                  >
+                    <ExpandButton onClick={onCollapse}>
                       <Typography>
                         {formatMessage({
                           id: 'components.Wysiwyg.collapse',
@@ -97,10 +88,10 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
                     </ExpandButton>
                   </Flex>
 
-                  <Box position="relative" height="100%">
+                  <Box position="relative" height="100%" width="100%">
                     <PreviewWysiwyg data={previewContent} />
                   </Box>
-                </Box>
+                </Flex>
               </Flex>
             </Box>
           </ExpandWrapper>

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

@@ -31,7 +31,7 @@ const TypographyAsterisk = styled(Typography)`
 `;
 
 const Wysiwyg = ({
-  description,
+  hint,
   disabled,
   error,
   intlLabel,
@@ -167,7 +167,7 @@ const Wysiwyg = ({
 
           {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}
         </EditorLayout>
-        <Hint description={description} name={name} error={error} />
+        <Hint hint={hint} name={name} error={error} />
       </Stack>
 
       {error && (
@@ -186,21 +186,17 @@ const Wysiwyg = ({
 };
 
 Wysiwyg.defaultProps = {
-  description: null,
   disabled: false,
   error: '',
   labelAction: undefined,
   placeholder: null,
   required: false,
   value: '',
+  hint: '',
 };
 
 Wysiwyg.propTypes = {
-  description: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   disabled: PropTypes.bool,
   error: PropTypes.string,
   intlLabel: PropTypes.shape({

package/admin/src/content-manager/pages/App/LeftMenu/index.js

@@ -7,10 +7,8 @@
 import React, { useMemo, useState } from 'react';
 import { useSelector, shallowEqual } from 'react-redux';
 import { useIntl } from 'react-intl';
-import matchSorter from 'match-sorter';
-import sortBy from 'lodash/sortBy';
-import toLower from 'lodash/toLower';
 import { NavLink } from 'react-router-dom';
+
 import {
   SubNav,
   SubNavHeader,
@@ -18,14 +16,11 @@ import {
   SubNavSections,
   SubNavLink,
 } from '@strapi/design-system/v2/SubNav';
+
+import { matchByTitle } from './utils';
 import getTrad from '../../../utils/getTrad';
 import { makeSelectModelLinks } from '../selectors';
 
-const matchByTitle = (links, search) =>
-  search
-    ? matchSorter(links, toLower(search), { keys: [(item) => toLower(item.title)] })
-    : sortBy(links, (object) => object.title.toLowerCase());
-
 const LeftMenu = () => {
   const [search, setSearch] = useState('');
   const { formatMessage } = useIntl();

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

@@ -0,0 +1 @@
+export { default as matchByTitle } from './matchByTitle';

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

@@ -0,0 +1,24 @@
+import matchSorter from 'match-sorter';
+import camelCase from 'lodash/camelCase';
+
+/**
+ * @type {(links: array, search? : string) => array }
+ */
+const matchByTitle = (links, search) =>
+  search
+    ? matchSorter(links, search.toLowerCase(), { keys: [(item) => item.title.toLowerCase()] })
+    : links.sort((link, nextLink) => {
+        const title = camelCase(link.title);
+        const nextTitle = camelCase(nextLink.title);
+
+        if (title < nextTitle) {
+          return -1;
+        }
+        if (title > nextTitle) {
+          return 1;
+        }
+
+        return 0;
+      });
+
+export default matchByTitle;