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

package/admin/src/pages/Admin/Onboarding/index.js

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faQuestion, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { Box } from '@strapi/parts/Box';
+import { Text } from '@strapi/parts/Text';
+import { FocusTrap } from '@strapi/parts/FocusTrap';
+import { useConfigurations } from '../../../hooks';
+
+const OnboardingWrapper = styled(Box)`
+  position: fixed;
+  bottom: ${({ theme }) => theme.spaces[2]};
+  right: ${({ theme }) => theme.spaces[2]};
+`;
+
+const Button = styled.button`
+  width: ${({ theme }) => theme.spaces[8]};
+  height: ${({ theme }) => theme.spaces[8]};
+  background: ${({ theme }) => theme.colors.primary600};
+  box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+  border-radius: 50%;
+  svg {
+    color: ${({ theme }) => theme.colors.neutral0};
+  }
+`;
+
+const LinksWrapper = styled(Box)`
+  position: absolute;
+  bottom: ${({ theme }) => `${theme.spaces[9]}`};
+  right: 0;
+  width: ${200 / 16}rem;
+`;
+
+const StyledLink = styled.a`
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  padding: ${({ theme }) => theme.spaces[2]};
+  padding-left: ${({ theme }) => theme.spaces[5]};
+
+  svg {
+    color: ${({ theme }) => theme.colors.neutral600};
+    margin-right: ${({ theme }) => theme.spaces[2]};
+  }
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.neutral100};
+    color: ${({ theme }) => theme.colors.neutral500};
+
+    svg {
+      color: ${({ theme }) => theme.colors.neutral700};
+    }
+
+    ${[Text]} {
+      color: ${({ theme }) => theme.colors.neutral700};
+    }
+  }
+
+  ${[Text]} {
+    color: ${({ theme }) => theme.colors.neutral600};
+  }
+`;
+
+const Onboarding = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { formatMessage } = useIntl();
+  const { showTutorials } = useConfigurations();
+
+  if (!showTutorials) {
+    return null;
+  }
+
+  const staticLinks = [
+    {
+      icon: 'book',
+      label: formatMessage({
+        id: 'app.components.LeftMenuFooter.documentation',
+        defaultMessage: 'Documentation',
+      }),
+      destination: 'https://strapi.io/documentation',
+    },
+    {
+      icon: 'file',
+      label: formatMessage({ id: 'app.static.links.cheatsheet', defaultMessage: 'CheatSheet' }),
+      destination: 'https://strapi-showcase.s3-us-west-2.amazonaws.com/CheatSheet.pdf',
+    },
+  ];
+
+  const handleClick = () => {
+    setIsOpen(prev => !prev);
+  };
+
+  return (
+    <OnboardingWrapper>
+      <Button
+        id="onboarding"
+        aria-label={formatMessage({
+          id: 'app.components.Onboarding.help.button',
+          defaultMessage: 'Help button',
+        })}
+        onClick={handleClick}
+      >
+        {!isOpen && <FontAwesomeIcon icon={faQuestion} />}
+        {isOpen && <FontAwesomeIcon icon={faTimes} />}
+      </Button>
+
+      {/* 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"
+            paddingBottom={2}
+            paddingTop={2}
+          >
+            {staticLinks.map(link => (
+              <StyledLink
+                key={link.label}
+                rel="nofollow noreferrer noopener"
+                target="_blank"
+                href={link.destination}
+              >
+                <FontAwesomeIcon icon={link.icon} />
+                <Text>{link.label}</Text>
+              </StyledLink>
+            ))}
+          </LinksWrapper>
+        </FocusTrap>
+      )}
+    </OnboardingWrapper>
+  );
+};
+
+export default Onboarding;

package/admin/src/pages/Admin/index.js

@@ -7,23 +7,13 @@
 import React, { Suspense, useEffect, useMemo, lazy } from 'react';
 import { Switch, Route } from 'react-router-dom';
 // Components from @strapi/helper-plugin
-import {
-  CheckPagePermissions,
-  useTracking,
-  LoadingIndicatorPage,
-  useStrapiApp,
-} from '@strapi/helper-plugin';
+import { useTracking, LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import adminPermissions from '../../permissions';
-import Header from '../../components/Header/index';
-import NavTopRightWrapper from '../../components/NavTopRightWrapper';
 import LeftMenu from '../../components/LeftMenu';
-import Onboarding from '../../components/Onboarding';
+import AppLayout from '../../layouts/AppLayout';
 import { useMenu, useReleaseNotification } from '../../hooks';
-import Logout from './Logout';
-import Wrapper from './Wrapper';
-import Content from './Content';
+import Onboarding from './Onboarding';
 import { createRoute } from '../../utils';
 
 const CM = lazy(() =>
@@ -74,44 +64,34 @@ const Admin = () => {
 
   return (
     <DndProvider backend={HTML5Backend}>
-      <Wrapper>
-        <LeftMenu
-          generalSectionLinks={generalSectionLinks}
-          pluginsSectionLinks={pluginsSectionLinks}
-        />
-        <NavTopRightWrapper>
-          <Logout />
-        </NavTopRightWrapper>
-        <div className="adminPageRightWrapper">
-          <Header />
-          <Content>
-            <Suspense fallback={<LoadingIndicatorPage />}>
-              <Switch>
-                <Route path="/" component={HomePage} exact />
-                <Route path="/me" component={ProfilePage} exact />
-
-                <Route path="/content-manager" component={CM} />
-                {routes}
-                <Route path="/settings/:settingId" component={SettingsPage} />
-                <Route path="/settings" component={SettingsPage} exact />
-                <Route path="/marketplace">
-                  <CheckPagePermissions permissions={adminPermissions.marketplace.main}>
-                    <MarketplacePage />
-                  </CheckPagePermissions>
-                </Route>
-                <Route path="/list-plugins" exact>
-                  <CheckPagePermissions permissions={adminPermissions.marketplace.main}>
-                    <InstalledPluginsPage />
-                  </CheckPagePermissions>
-                </Route>
-                <Route path="/404" component={NotFoundPage} />
-                <Route path="" component={NotFoundPage} />
-              </Switch>
-            </Suspense>
-          </Content>
-        </div>
+      <AppLayout
+        sideNav={
+          <LeftMenu
+            generalSectionLinks={generalSectionLinks}
+            pluginsSectionLinks={pluginsSectionLinks}
+          />
+        }
+      >
+        <Suspense fallback={<LoadingIndicatorPage />}>
+          <Switch>
+            <Route path="/" component={HomePage} exact />
+            <Route path="/me" component={ProfilePage} exact />
+            <Route path="/content-manager" component={CM} />
+            {routes}
+            <Route path="/settings/:settingId" component={SettingsPage} />
+            <Route path="/settings" component={SettingsPage} exact />
+            <Route path="/marketplace">
+              <MarketplacePage />
+            </Route>
+            <Route path="/list-plugins" exact>
+              <InstalledPluginsPage />
+            </Route>
+            <Route path="/404" component={NotFoundPage} />
+            <Route path="" component={NotFoundPage} />
+          </Switch>
+        </Suspense>
         <Onboarding />
-      </Wrapper>
+      </AppLayout>
     </DndProvider>
   );
 };

package/admin/src/pages/App/index.js

@@ -13,12 +13,13 @@ import {
   useNotification,
   TrackingContext,
 } from '@strapi/helper-plugin';
+import { SkipToContent } from '@strapi/parts/Main';
+import { useIntl } from 'react-intl';
 import PrivateRoute from '../../components/PrivateRoute';
 import { createRoute, makeUniqueRoutes } from '../../utils';
 import AuthPage from '../AuthPage';
 import NotFoundPage from '../NotFoundPage';
 import { getUID } from './utils';
-import { Content, Wrapper } from './components';
 import routes from './utils/routes';
 
 const AuthenticatedApp = lazy(() =>
@@ -27,6 +28,7 @@ const AuthenticatedApp = lazy(() =>
 
 function App() {
   const toggleNotification = useNotification();
+  const { formatMessage } = useIntl();
   const [{ isLoading, hasAdmin, uuid }, setState] = useState({ isLoading: true, hasAdmin: false });
 
   const authRoutes = useMemo(() => {
@@ -106,23 +108,20 @@ function App() {
 
   return (
     <Suspense fallback={<LoadingIndicatorPage />}>
+      <SkipToContent>{formatMessage({ id: 'skipToContent' })}</SkipToContent>
       <TrackingContext.Provider value={uuid}>
-        <Wrapper>
-          <Content>
-            <Switch>
-              {authRoutes}
-              <Route
-                path="/auth/:authType"
-                render={routerProps => (
-                  <AuthPage {...routerProps} setHasAdmin={setHasAdmin} hasAdmin={hasAdmin} />
-                )}
-                exact
-              />
-              <PrivateRoute path="/" component={AuthenticatedApp} />
-              <Route path="" component={NotFoundPage} />
-            </Switch>
-          </Content>
-        </Wrapper>
+        <Switch>
+          {authRoutes}
+          <Route
+            path="/auth/:authType"
+            render={routerProps => (
+              <AuthPage {...routerProps} setHasAdmin={setHasAdmin} hasAdmin={hasAdmin} />
+            )}
+            exact
+          />
+          <PrivateRoute path="/" component={AuthenticatedApp} />
+          <Route path="" component={NotFoundPage} />
+        </Switch>
       </TrackingContext.Provider>
     </Suspense>
   );

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { FieldAction } from '@strapi/parts/Field';
+
+const FieldActionWrapper = styled(FieldAction)`
+  svg {
+    height: 1rem;
+    width: 1rem;
+    path {
+      fill: ${({ theme }) => theme.colors.neutral600};
+    }
+  }
+`;
+
+export default FieldActionWrapper;

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

@@ -1,53 +1,102 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { Padded } from '@buffetjs/core';
 import PropTypes from 'prop-types';
-import { BaselineAlignment } from '@strapi/helper-plugin';
-import Button from '../../../../components/FullWidthButton';
-import AuthLink from '../AuthLink';
-import Input from '../Input';
+import { Form } from '@strapi/helper-plugin';
+import { Box } from '@strapi/parts/Box';
+import { Stack } from '@strapi/parts/Stack';
+import { Main } from '@strapi/parts/Main';
+import { Row } from '@strapi/parts/Row';
+import { Link } from '@strapi/parts/Link';
+import { Button } from '@strapi/parts/Button';
+import { TextInput } from '@strapi/parts/TextInput';
+import { H1, Text } from '@strapi/parts/Text';
+import { Formik } from 'formik';
+import UnauthenticatedLayout, {
+  Column,
+  LayoutContent,
+} from '../../../../layouts/UnauthenticatedLayout';
 import Logo from '../Logo';
-import Section from '../Section';
-import Box from '../Box';
 
-const ForgotPassword = ({ formErrors, modifiedData, onChange, onSubmit }) => {
+const ForgotPassword = ({ onSubmit, schema }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <>
-      <Section textAlign="center">
-        <Logo />
-      </Section>
-      <Section withBackground>
-        {/* FIXME IN BUFFET.JS */}
-        <BaselineAlignment top size="20px">
-          <Padded top size="xs">
-            <Box>
-              <form onSubmit={onSubmit}>
-                <Input
-                  autoFocus
-                  error={formErrors.email}
-                  label="Auth.form.email.label"
-                  name="email"
-                  onChange={onChange}
-                  placeholder="Auth.form.email.placeholder"
-                  type="email"
-                  validations={{ required: true }}
-                  value={modifiedData.email}
-                />
-                <BaselineAlignment top size="3px" />
-                <Padded top>
-                  <Button type="submit" color="primary" textTransform="uppercase">
-                    {formatMessage({ id: 'Auth.form.button.forgot-password' })}
+    <UnauthenticatedLayout>
+      <Main>
+        <LayoutContent>
+          <Formik
+            enableReinitialize
+            initialValues={{
+              email: '',
+            }}
+            onSubmit={onSubmit}
+            validationSchema={schema}
+            validateOnChange={false}
+          >
+            {({ values, errors, handleChange }) => (
+              <Form noValidate>
+                <Column>
+                  <Logo />
+                  <Box paddingTop={6} paddingBottom={7}>
+                    <H1>
+                      {formatMessage({
+                        id: 'Auth.form.button.password-recovery',
+                        defaultMessage: 'Password Recovery',
+                      })}
+                    </H1>
+                  </Box>
+                  {errors.errorMessage && (
+                    <Text id="global-form-error" role="alert" tabIndex={-1} textColor="danger600">
+                      {formatMessage({
+                        id: errors.errorMessage,
+                        defaultMessage: 'An error occurred',
+                      })}
+                    </Text>
+                  )}
+                </Column>
+
+                <Stack size={6}>
+                  <TextInput
+                    error={
+                      errors.email
+                        ? formatMessage({
+                            id: errors.email,
+                            defaultMessage: 'This email is invalid.',
+                          })
+                        : ''
+                    }
+                    value={values.email}
+                    onChange={handleChange}
+                    label={formatMessage({ id: 'Auth.form.email.label', defaultMessage: 'Email' })}
+                    placeholder={formatMessage({
+                      id: 'Auth.form.email.placeholder',
+                      defaultMessage: 'kai@doe.com',
+                    })}
+                    name="email"
+                    required
+                  />
+                  <Button type="submit" fullWidth>
+                    {formatMessage({
+                      id: 'Auth.form.button.forgot-password',
+                      defaultMessage: 'Send Email',
+                    })}
                   </Button>
-                </Padded>
-              </form>
-            </Box>
-          </Padded>
-        </BaselineAlignment>
-        <AuthLink label="Auth.link.ready" to="/auth/login" />
-      </Section>
-    </>
+                </Stack>
+              </Form>
+            )}
+          </Formik>
+        </LayoutContent>
+        <Row justifyContent="center">
+          <Box paddingTop={4}>
+            <Link to="/auth/login">
+              <Text small>
+                {formatMessage({ id: 'Auth.link.ready', defaultMessage: 'Ready to sign in?' })}
+              </Text>
+            </Link>
+          </Box>
+        </Row>
+      </Main>
+    </UnauthenticatedLayout>
   );
 };
 
@@ -56,10 +105,10 @@ ForgotPassword.defaultProps = {
 };
 
 ForgotPassword.propTypes = {
-  formErrors: PropTypes.object.isRequired,
-  modifiedData: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired,
   onSubmit: PropTypes.func,
+  schema: PropTypes.shape({
+    type: PropTypes.string.isRequired,
+  }).isRequired,
 };
 
 export default ForgotPassword;

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

@@ -1,76 +1,59 @@
 import React from 'react';
-import { Padded, Text } from '@buffetjs/core';
 import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
-import { BaselineAlignment } from '@strapi/helper-plugin';
-import Button from '../../../../components/FullWidthButton';
-import Box from '../Box';
+import { Box } from '@strapi/parts/Box';
+import { Main } from '@strapi/parts/Main';
+import { Row } from '@strapi/parts/Row';
+import { Link } from '@strapi/parts/Link';
+import { H1, Text } from '@strapi/parts/Text';
+import UnauthenticatedLayout, {
+  Column,
+  LayoutContent,
+} from '../../../../layouts/UnauthenticatedLayout';
 import Logo from '../Logo';
-import Section from '../Section';
-import Envelope from './Envelope';
 
 const ForgotPasswordSuccess = () => {
   const { formatMessage } = useIntl();
-  const { push } = useHistory();
-
-  const handleClick = () => {
-    push('/auth/login');
-  };
 
   return (
-    <>
-      <Section textAlign="center">
-        <Logo />
-      </Section>
-      <Section withBackground textAlign="center">
-        <Padded top size="smd">
-          <Padded top size="xs">
-            <Box withoutError>
-              <BaselineAlignment top size="3px">
-                <Envelope />
-              </BaselineAlignment>
-
-              <Padded top size="smd">
-                <Text fontWeight="bold" lineHeight="24px" fontSize="xl">
-                  {formatMessage({ id: 'app.containers.AuthPage.ForgotPasswordSuccess.title' })}
-                </Text>
-              </Padded>
-
-              <Padded right left size="lg">
-                <Padded top size="smd">
-                  <Text fontSize="md" style={{ textAlign: 'center' }} lineHeight="18px">
-                    {formatMessage({
-                      id: 'app.containers.AuthPage.ForgotPasswordSuccess.text.email',
-                    })}
-                  </Text>
-
-                  <Padded top>
-                    <BaselineAlignment top size="7px">
-                      <Text fontSize="md" style={{ textAlign: 'center' }} lineHeight="18px">
-                        {formatMessage({
-                          id: 'app.containers.AuthPage.ForgotPasswordSuccess.text.contact-admin',
-                        })}
-                      </Text>
-                    </BaselineAlignment>
-                  </Padded>
-                </Padded>
-              </Padded>
-
-              <Padded top size="md">
-                <Button
-                  type="button"
-                  color="primary"
-                  textTransform="uppercase"
-                  onClick={handleClick}
-                >
-                  {formatMessage({ id: 'Auth.link.signin' })}
-                </Button>
-              </Padded>
+    <UnauthenticatedLayout>
+      <Main>
+        <LayoutContent>
+          <Column>
+            <Logo />
+            <Box paddingTop={6} paddingBottom={7}>
+              <H1>
+                {formatMessage({
+                  id: 'app.containers.AuthPage.ForgotPasswordSuccess.title',
+                  defaultMessage: 'Email sent',
+                })}
+              </H1>
+            </Box>
+            <Text>
+              {formatMessage({
+                id: 'app.containers.AuthPage.ForgotPasswordSuccess.text.email',
+                defaultMessage: 'It can take a few minutes to receive your password recovery link.',
+              })}
+            </Text>
+            <Box paddingTop={4}>
+              <Text>
+                {formatMessage({
+                  id: 'app.containers.AuthPage.ForgotPasswordSuccess.text.contact-admin',
+                  defaultMessage:
+                    'If you do not receive this link, please contact your administrator.',
+                })}
+              </Text>
             </Box>
-          </Padded>
-        </Padded>
-      </Section>
-    </>
+          </Column>
+        </LayoutContent>
+        <Row justifyContent="center">
+          <Box paddingTop={4}>
+            <Link to="/auth/login">
+              <Text>{formatMessage({ id: 'Auth.link.signin', defaultMessage: 'Sign in' })}</Text>
+            </Link>
+          </Box>
+        </Row>
+      </Main>
+    </UnauthenticatedLayout>
   );
 };