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

package/admin/src/StrapiApp.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
+import { lightTheme } from '@strapi/parts/themes';
 import merge from 'lodash/merge';
 import pick from 'lodash/pick';
 import isFunction from 'lodash/isFunction';
@@ -9,8 +10,8 @@ import { basename, createHook } from './core/utils';
 import configureStore from './core/store/configureStore';
 import { Plugin } from './core/apis';
 import App from './pages/App';
-import AuthLogo from './assets/images/logo_strapi_auth.png';
-import MenuLogo from './assets/images/logo_strapi_menu.png';
+import AuthLogo from './assets/images/logo_strapi_auth_v4.png';
+import MenuLogo from './assets/images/strapi-img.png';
 import Providers from './components/Providers';
 import Theme from './components/Theme';
 import languageNativeNames from './translations/languageNativeNames';
@@ -22,7 +23,6 @@ import {
 } from './exposedHooks';
 import injectionZones from './injectionZones';
 import favicon from './favicon.ico';
-import themes from './themes';
 
 class StrapiApp {
   constructor({ adminConfig, appPlugins, library, middlewares, reducers }) {
@@ -34,7 +34,7 @@ class StrapiApp {
       locales: ['en'],
       menuLogo: MenuLogo,
       notifications: { releases: true },
-      theme: themes,
+      theme: lightTheme,
       translations: {},
       tutorials: true,
     };

package/admin/src/app.js

@@ -1,9 +1,6 @@
 export default {
-  config: {},
-  bootstrap(app) {
-    app.injectContentManagerComponent('editView', 'informations', {
-      name: 'i18n-locale-filter-edit-view',
-      Component: () => 'test',
-    });
+  config: {
+    locales: ['fr'],
   },
+  bootstrap() {},
 };

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

@@ -1,6 +1,8 @@
-import React, { useMemo } from 'react';
-import { LoadingIndicatorPage, AppInfosContext } from '@strapi/helper-plugin';
+import React, { useMemo, useState } from 'react';
+//  TODO: DS add loader
+import { auth, LoadingIndicatorPage, AppInfosContext } from '@strapi/helper-plugin';
 import { useQueries } from 'react-query';
+import get from 'lodash/get';
 import packageJSON from '../../../../package.json';
 import { useConfigurations } from '../../hooks';
 import PluginsInitializer from '../PluginsInitializer';
@@ -11,6 +13,9 @@ import checkLatestStrapiVersion from './utils/checkLatestStrapiVersion';
 const strapiVersion = packageJSON.version;
 
 const AuthenticatedApp = () => {
+  const userInfo = auth.getUserInfo();
+  const userName = get(userInfo, 'username') || `${userInfo.firstname} ${userInfo.lastname}`;
+  const [userDisplayName, setUserDisplayName] = useState(userName);
   const { showReleaseNotification } = useConfigurations();
   const [
     { data: appInfos, status },
@@ -53,7 +58,13 @@ const AuthenticatedApp = () => {
 
   return (
     <AppInfosContext.Provider
-      value={{ ...appInfos, latestStrapiReleaseTag: tag_name, shouldUpdateStrapi }}
+      value={{
+        ...appInfos,
+        latestStrapiReleaseTag: tag_name,
+        setUserDisplayName,
+        shouldUpdateStrapi,
+        userDisplayName,
+      }}
     >
       <RBACProvider permissions={permissions} refetchPermissions={refetch}>
         <PluginsInitializer />

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/GlobalStyle/index.js

@@ -1,187 +1,15 @@
 import { createGlobalStyle } from 'styled-components';
 
 const loadCss = async () => {
-  await import(/* webpackChunkName: "sanitize-css" */ 'sanitize.css/sanitize.css');
   await import(/* webpackChunkName: "fontawesome-css" */ 'font-awesome/css/font-awesome.min.css');
   await import(
     /* webpackChunkName: "fontawesome-css-all" */ '@fortawesome/fontawesome-free/css/all.css'
   );
   await import(/* webpackChunkName: "fontawesome-js" */ '@fortawesome/fontawesome-free/js/all.min');
-  await import(/* webpackChunkName: "bootstrap" */ 'bootstrap/dist/css/bootstrap.css');
 };
 
 loadCss();
 
-const GlobalStyle = createGlobalStyle`
-  html {
-    font-size: 62.5%;
-  }
-
-  body {
-    font-family: 'Lato';
-    font-size: 1.4rem;
-    line-height: 1.5;
-    color: #292b2c;
-  }
-
-  * {
-    -webkit-font-smoothing: antialiased;
-    box-sizing: border-box;
-    font-family: 'Lato';
-  }
-
-  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-    line-height: 1.1;
-  }
-
-  .btn {
-    font-size: 1.4rem;
-    padding: 0;
-  }
-
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
-  /*
-   * Override
-   */
-
-  .modal {
-    background: transparent;
-    .modal-dialog {
-      max-width: 74.5rem;
-      margin: 16rem auto 3rem calc(50% - #{$left - menu - width});
-      position: relative;
-      z-index: 999;
-    }
-  }
-
-  .modal-backdrop.show {
-    opacity: 0.15;
-  }
-
-
-  .modal-content {
-    border-radius: .2rem;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    border: none;
-
-  }
-
-  .modal-header {
-    button {
-      &.close {
-        margin: 0;
-        padding: 2rem;
-      }
-    }
-  }
-
-  .modal-body {
-    .video-react {
-      background: transparent;
-    }
-  }
-  form .row {
-    text-align: left;
-  }
-
-  .form-check {
-    padding-left: 0;
-    .form-check-label {
-      padding-left: 1.25rem;
-    }
-  }
-
-  .form-control:focus {
-    outline: none;
-    box-shadow: none;
-  }
-
-  textarea.form-control {
-    height: 10.6rem;
-  }
-
-  .input-group-addon {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-  }
-
-  .btn-secondary:not(:disabled):not(.disabled):active:focus,
-  .btn-secondary:not(:disabled):not(.disabled).active:focus,
-  .btn-secondary,
-  .show > .btn-secondary.dropdown-toggle:focus {
-    &:focus, &:active, &:hover, &.focus {
-      box-shadow: 0 0 0 0px rgba(134,142,150,0.5);
-      color: rgb(51, 55, 64);
-      background-color: rgb(250, 250, 251) !important;
-
-    }
-  }
-
-  /*
-   * Notifications animation
-   */
-
-  .notification-enter {
-    opacity: 0;
-    top: -70px;
-  }
-
-  .notification-enter.notification-enter-active {
-    opacity: 1;
-    transition: all 400ms ease-in;
-    top: 0;
-  }
-
-  .notification-exit {
-    opacity: 1;
-  }
-
-  .notification-exit.notification-exit-active {
-    opacity: 0;
-    transition: all 400ms ease-in;
-  }
-
-
-  ::-webkit-scrollbar {
-    width: 9px;
-    height: 5px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: #eee;
-  }
-
-  ::-webkit-scrollbar-track:hover {
-    background-color: #ddd;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: #ccc;
-    border-radius: 0.5rem;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: #bbb;
-  }
-
-  ::-webkit-scrollbar-button {
-    display: none;
-  }
-
-  /* firefox scrollbar */
-  /* stylelint-disable */
-  * {
-    scrollbar-color: #bbb #eee;
-    scrollbar-width: thin;
-  }
-  /* stylelint-enable */
-
-  a::-moz-focus-inner {
-    border: 0;
-  }
-`;
+const GlobalStyle = createGlobalStyle``;
 
 export default GlobalStyle;