Add no content type view

Signed-off-by: soupette <cyril@strapi.io>

jest.config.front.js

@@ -64,6 +64,7 @@ module.exports = {
   testPathIgnorePatterns: [
     '/node_modules/',
     '<rootDir>/examples/getstarted/',
+    '<rootDir>/examples/kitchensink/',
     '<rootDir>/packages/strapi-helper-plugin/dist/',
     '/OLD/',
     '__tests__',

jsconfig.json

@@ -14,6 +14,7 @@
     "**/build/*",
     "**/*.test.js",
     "**/*.test.e2e.js",
-    "**/examples/getstarted/*"
+    "**/examples/getstarted/*",
+    "**/examples/kitchensink/*"
   ]
 }

packages/core/admin/admin/src/content-manager/pages/App/index.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import { Switch, Route, useRouteMatch, Redirect, useLocation } from 'react-router-dom';
 import { CheckPagePermissions, LoadingIndicatorPage, NotFound } from '@strapi/helper-plugin';
-import { Layout } from '@strapi/parts/Layout';
+import { Layout, HeaderLayout } from '@strapi/parts/Layout';
+import { Main } from '@strapi/parts';
+import { useIntl } from 'react-intl';
 import sortBy from 'lodash/sortBy';
 import permissions from '../../../permissions';
+import getTrad from '../../utils/getTrad';
 import DragLayer from '../../components/DragLayer';
 import ModelsContext from '../../contexts/ModelsContext';
 import CollectionTypeRecursivePath from '../CollectionTypeRecursivePath';
@@ -20,9 +23,22 @@ const App = () => {
   const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } = useModels();
   const authorisedModels = sortBy([...collectionTypeLinks, ...singleTypeLinks], 'title');
   const { pathname } = useLocation();
+  const { formatMessage } = useIntl();
 
+  // Check with @mfrachet if ok with a11y
   if (status === 'loading') {
-    return <LoadingIndicatorPage />;
+    return (
+      <Main labelledBy="title">
+        <HeaderLayout
+          id="title"
+          title={formatMessage({
+            id: getTrad('header.name'),
+            defaultMessage: 'Content',
+          })}
+        />
+        <LoadingIndicatorPage />
+      </Main>
+    );
   }
 
   // Redirect the user to the 403 page

packages/core/admin/admin/src/content-manager/pages/App/useModels.js

@@ -1,10 +1,12 @@
 import { useNotification, useRBACProvider, useStrapiApp } from '@strapi/helper-plugin';
 import { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useNotifyAT } from '@strapi/parts/LiveRegions';
 import axios from 'axios';
+import { useIntl } from 'react-intl';
 import { axiosInstance } from '../../../core/utils';
 import { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } from '../../../exposedHooks';
-import { getRequestUrl } from '../../utils';
+import { getRequestUrl, getTrad } from '../../utils';
 import { getData, resetProps, setContentTypeLinks } from './actions';
 import { selectAppDomain } from './selectors';
 import getContentTypeLinks from './utils/getContentTypeLinks';
@@ -18,6 +20,8 @@ const useModels = () => {
   const { runHookWaterfall } = useStrapiApp();
   const CancelToken = axios.CancelToken;
   const source = CancelToken.source();
+  const { notifyStatus } = useNotifyAT();
+  const { formatMessage } = useIntl();
 
   const fetchData = async () => {
     dispatch(getData());
@@ -36,6 +40,13 @@ const useModels = () => {
         )
       );
 
+      notifyStatus(
+        formatMessage({
+          id: getTrad('App.schemas.data-loaded'),
+          defaultMessage: 'The schemas have been successfully loaded.',
+        })
+      );
+
       const { authorizedCtLinks, authorizedStLinks } = await getContentTypeLinks(
         models,
         allPermissions,

packages/core/admin/admin/src/content-manager/pages/NoContentType/index.js

@@ -1,68 +1,51 @@
 import React from 'react';
-import { Button, Padded, Text } from '@buffetjs/core';
-import { useHistory } from 'react-router';
-import { BaselineAlignment, CheckPermissions } from '@strapi/helper-plugin';
+import { useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { Main } from '@strapi/parts';
+import { LinkButton } from '@strapi/parts/LinkButton';
+import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
+import { EmptyStateLayout } from '@strapi/parts/EmptyStateLayout';
+import { AddIcon, EmptyStateDocument } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import styled from 'styled-components';
 import { getTrad } from '../../utils';
-import Container from '../../components/Container';
-// TODO change pic when DS ready
-import Oops from './oops.png';
-
-const Block = styled.div`
-  padding: 48px 10px 50px 10px;
-  background: #ffffff;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px #e3e9f3;
-  margin-bottom: 17px;
-  text-align: center;
-`;
-
-const Img = styled.img`
-  max-height: 77px;
-`;
 
 const NoContentType = () => {
   const { formatMessage } = useIntl();
-  const { push } = useHistory();
-
-  const handleClick = () => {
-    // TODO change url when CTB ready
-    push(
-      '/plugins/content-type-builder/content-types/plugin::users-permissions.user?modalType=contentType&kind=collectionType&actionType=create&settingType=base&forTarget=contentType&headerId=content-type-builder.modalForm.contentType.header-create&header_icon_isCustom_1=false&header_icon_name_1=contentType&header_label_1=null'
-    );
-  };
+  useFocusWhenNavigate();
 
   return (
-    <Container>
-      <Block>
-        <Img src={Oops} />
-        <div>
-          <Padded top size="md">
-            <BaselineAlignment top size="5px" />
-            <Text>
+    <Main labelledBy="title">
+      <HeaderLayout
+        id="title"
+        title={formatMessage({
+          id: getTrad('header.name'),
+          defaultMessage: 'Content',
+        })}
+      />
+      <ContentLayout>
+        <EmptyStateLayout
+          action={
+            <LinkButton
+              variant="secondary"
+              startIcon={<AddIcon />}
+              to="/plugins/content-type-builder/content-types/plugin::users-permissions.user?modalType=contentType&kind=collectionType&actionType=create&settingType=base&forTarget=contentType&headerId=content-type-builder.modalForm.contentType.header-create&header_icon_isCustom_1=false&header_icon_name_1=contentType&header_label_1=null"
+            >
               {formatMessage({
-                id: getTrad('pages.NoContentType.text'),
-                defaultMessage:
-                  "You don't have any content yet, we recommend you to create your first Content-Type.",
+                id: 'app.components.HomePage.create',
+                defaultMessage: 'Create your first Content-type',
               })}
-            </Text>
-          </Padded>
-          <CheckPermissions
-            permissions={[{ action: 'plugin::content-type-builder.read', subject: null }]}
-          >
-            <BaselineAlignment top size="14px">
-              <Button color="primary" type="button" onClick={handleClick}>
-                {formatMessage({
-                  id: 'pages.NoContentType.button',
-                  defaultMessage: 'Create your first Content-Type',
-                })}
-              </Button>
-            </BaselineAlignment>
-          </CheckPermissions>
-        </div>
-      </Block>
-    </Container>
+            </LinkButton>
+          }
+          content={formatMessage({
+            id: 'content-manager.pages.NoContentType.text',
+            defaultMessage:
+              "You don't have any content yet, we recommend you to create your first Content-Type.",
+          })}
+          hasRadius
+          icon={<EmptyStateDocument width="10rem" />}
+          shadow="tableShadow"
+        />
+      </ContentLayout>
+    </Main>
   );
 };
 

packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js

@@ -0,0 +1,399 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import Theme from '../../../../components/Theme';
+import NoContentType from '../index';
+
+jest.mock('@strapi/helper-plugin', () => ({
+  useFocusWhenNavigate: jest.fn(),
+}));
+
+describe('CONTENT MANAGER | pages | NoContentType', () => {
+  it('renders and matches the snapshot', () => {
+    const {
+      container: { firstChild },
+    } = render(
+      <Router history={createMemoryHistory()}>
+        <IntlProvider messages={{ en: {} }} textComponent="span" locale="en">
+          <Theme>
+            <NoContentType />
+          </Theme>
+        </IntlProvider>
+      </Router>
+    );
+
+    expect(firstChild).toMatchInlineSnapshot(`
+      .c0 {
+        outline: none;
+      }
+
+      .c19 {
+        font-weight: 500;
+        font-size: 0.75rem;
+        line-height: 1.33;
+        color: #32324d;
+      }
+
+      .c17 {
+        padding-right: 8px;
+      }
+
+      .c14 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        cursor: pointer;
+        padding: 8px;
+        border-radius: 4px;
+        background: #ffffff;
+        border: 1px solid #dcdce4;
+      }
+
+      .c14 svg {
+        height: 12px;
+        width: 12px;
+      }
+
+      .c14 svg > g,
+      .c14 svg path {
+        fill: #ffffff;
+      }
+
+      .c14[aria-disabled='true'] {
+        pointer-events: none;
+      }
+
+      .c15 {
+        padding: 8px 16px;
+        background: #4945ff;
+        border: none;
+        border-radius: 4px;
+        border: 1px solid #d9d8ff;
+        background: #f0f0ff;
+        display: -webkit-inline-box;
+        display: -webkit-inline-flex;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        -webkit-text-decoration: none;
+        text-decoration: none;
+      }
+
+      .c15 .c16 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c15 .c18 {
+        color: #ffffff;
+      }
+
+      .c15[aria-disabled='true'] {
+        border: 1px solid #dcdce4;
+        background: #eaeaef;
+      }
+
+      .c15[aria-disabled='true'] .c18 {
+        color: #666687;
+      }
+
+      .c15[aria-disabled='true'] svg > g,
+      .c15[aria-disabled='true'] svg path {
+        fill: #666687;
+      }
+
+      .c15[aria-disabled='true']:active {
+        border: 1px solid #dcdce4;
+        background: #eaeaef;
+      }
+
+      .c15[aria-disabled='true']:active .c18 {
+        color: #666687;
+      }
+
+      .c15[aria-disabled='true']:active svg > g,
+      .c15[aria-disabled='true']:active svg path {
+        fill: #666687;
+      }
+
+      .c15:hover {
+        background-color: #ffffff;
+      }
+
+      .c15:active {
+        background-color: #ffffff;
+        border: 1px solid #4945ff;
+      }
+
+      .c15:active .c18 {
+        color: #4945ff;
+      }
+
+      .c15:active svg > g,
+      .c15:active svg path {
+        fill: #4945ff;
+      }
+
+      .c15 .c18 {
+        color: #271fe0;
+      }
+
+      .c15 svg > g,
+      .c15 svg path {
+        fill: #271fe0;
+      }
+
+      .c1 {
+        background: #f6f6f9;
+        padding-top: 56px;
+        padding-right: 56px;
+        padding-bottom: 56px;
+        padding-left: 56px;
+      }
+
+      .c7 {
+        padding-right: 56px;
+        padding-left: 56px;
+      }
+
+      .c2 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: justify;
+        -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+        justify-content: space-between;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c3 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c4 {
+        font-weight: 600;
+        font-size: 2rem;
+        line-height: 1.25;
+        color: #32324d;
+      }
+
+      .c5 {
+        font-weight: 400;
+        font-size: 0.875rem;
+        line-height: 1.43;
+        color: #666687;
+      }
+
+      .c6 {
+        font-size: 1rem;
+        line-height: 1.5;
+      }
+
+      .c13 {
+        font-weight: 500;
+        font-size: 1rem;
+        line-height: 1.25;
+        color: #666687;
+      }
+
+      .c8 {
+        background: #ffffff;
+        padding: 64px;
+        border-radius: 4px;
+        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+      }
+
+      .c10 {
+        padding-bottom: 24px;
+      }
+
+      .c12 {
+        padding-bottom: 16px;
+      }
+
+      .c9 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        text-align: center;
+      }
+
+      .c11 svg {
+        height: 5.5rem;
+      }
+
+      <main
+        aria-labelledby="title"
+        class="c0"
+        id="main-content"
+        tabindex="-1"
+      >
+        <div
+          class=""
+          style="height: 0px;"
+        >
+          <div
+            class="c1"
+            data-strapi-header="true"
+          >
+            <div
+              class="c2"
+            >
+              <div
+                class="c3"
+              >
+                <h1
+                  class="c4"
+                  id="title"
+                >
+                  Content
+                </h1>
+              </div>
+            </div>
+            <p
+              class="c5 c6"
+            />
+          </div>
+        </div>
+        <div
+          class="c7"
+        >
+          <div
+            class="c8 c9"
+          >
+            <div
+              aria-hidden="true"
+              class="c10 c11"
+            >
+              <svg
+                fill="none"
+                height="1em"
+                viewBox="0 0 216 120"
+                width="10rem"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M184 23.75a7 7 0 110 14h-40a7 7 0 110 14h22a7 7 0 110 14h-10.174c-4.874 0-8.826 3.134-8.826 7 0 2.577 2 4.91 6 7a7 7 0 110 14H70a7 7 0 110-14H31a7 7 0 110-14h40a7 7 0 100-14H46a7 7 0 110-14h40a7 7 0 110-14h98zm0 28a7 7 0 110 14 7 7 0 010-14z"
+                  fill="#DBDBFA"
+                  fill-rule="evenodd"
+                />
+                <path
+                  clip-rule="evenodd"
+                  d="M130.672 22.75l9.302 67.843.835 6.806a4 4 0 01-3.482 4.458l-58.56 7.19a4 4 0 01-4.458-3.483l-9.016-73.427a2 2 0 011.741-2.229l.021-.002 4.859-.545 58.758-6.61zm-54.83 6.17l4.587-.515-4.587.515z"
+                  fill="#fff"
+                  fill-rule="evenodd"
+                />
+                <path
+                  d="M75.842 28.92l4.587-.515m50.243-5.655l9.302 67.843.835 6.806a4 4 0 01-3.482 4.458l-58.56 7.19a4 4 0 01-4.458-3.483l-9.016-73.427a2 2 0 011.741-2.229l.021-.002 4.859-.545 58.758-6.61z"
+                  stroke="#7E7BF6"
+                  stroke-width="2.5"
+                />
+                <path
+                  clip-rule="evenodd"
+                  d="M128.14 27.02l8.42 61.483.757 6.168c.244 1.987-1.15 3.793-3.113 4.035l-52.443 6.439c-1.963.241-3.753-1.175-3.997-3.162l-8.15-66.376a2 2 0 011.742-2.23l6.487-.796"
+                  fill="#F0F0FF"
+                  fill-rule="evenodd"
+                />
+                <path
+                  clip-rule="evenodd"
+                  d="M133.229 10H87.672c-.76 0-1.447.308-1.945.806a2.741 2.741 0 00-.805 1.944v76c0 .76.308 1.447.805 1.945a2.741 2.741 0 001.945.805h59a2.74 2.74 0 001.944-.805 2.74 2.74 0 00.806-1.945V26.185c0-.73-.29-1.43-.806-1.945l-13.443-13.435a2.75 2.75 0 00-1.944-.805z"
+                  fill="#fff"
+                  fill-rule="evenodd"
+                  stroke="#7F7CFA"
+                  stroke-width="2.5"
+                />
+                <path
+                  d="M133.672 11.153V22.75a3 3 0 003 3h7.933"
+                  stroke="#807EFA"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2.5"
+                />
+                <path
+                  d="M95.672 76.75h26m-26-51h26-26zm0 12h43-43zm0 13h43-43zm0 13h43-43z"
+                  stroke="#817FFA"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2.5"
+                />
+              </svg>
+            </div>
+            <div
+              class="c12"
+            >
+              <p
+                class="c13"
+              >
+                You don't have any content yet, we recommend you to create your first Content-Type.
+              </p>
+            </div>
+            <a
+              aria-disabled="false"
+              class="c14 c15"
+              href="/plugins/content-type-builder/content-types/plugin::users-permissions.user?modalType=contentType&kind=collectionType&actionType=create&settingType=base&forTarget=contentType&headerId=content-type-builder.modalForm.contentType.header-create&header_icon_isCustom_1=false&header_icon_name_1=contentType&header_label_1=null"
+              variant="secondary"
+            >
+              <div
+                aria-hidden="true"
+                class="c16 c17"
+              >
+                <svg
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M24 13.604a.3.3 0 01-.3.3h-9.795V23.7a.3.3 0 01-.3.3h-3.21a.3.3 0 01-.3-.3v-9.795H.3a.3.3 0 01-.3-.3v-3.21a.3.3 0 01.3-.3h9.795V.3a.3.3 0 01.3-.3h3.21a.3.3 0 01.3.3v9.795H23.7a.3.3 0 01.3.3v3.21z"
+                    fill="#212134"
+                  />
+                </svg>
+              </div>
+              <span
+                class="c18 c19"
+              >
+                Create your first Content-type
+              </span>
+            </a>
+          </div>
+        </div>
+      </main>
+    `);
+  });
+});

packages/core/admin/admin/src/translations/en.json

@@ -405,6 +405,7 @@
   "content-manager.EditRelations.title": "Relational data",
   "content-manager.api.id": "API ID",
   "content-manager.header.name": "Content",
+  "content-manager.App.schemas.data-loaded": "The schemas have been successfully loaded",
   "content-manager.components.AddFilterCTA.add": "Filters",
   "content-manager.components.AddFilterCTA.hide": "Filters",
   "content-manager.components.DraggableAttr.edit": "Click to edit",