Merge pull request #10505 from strapi/chore/cm-no-ct-view

Created temporary no CT page in the CM

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

@@ -9,6 +9,7 @@ import DragLayer from '../../components/DragLayer';
 import ModelsContext from '../../contexts/ModelsContext';
 import CollectionTypeRecursivePath from '../CollectionTypeRecursivePath';
 import ComponentSettingsView from '../ComponentSetttingsView';
+import NoContentType from '../NoContentType';
 import SingleTypeRecursivePath from '../SingleTypeRecursivePath';
 import LeftMenu from './LeftMenu';
 import useModels from './useModels';
@@ -75,10 +76,9 @@ const App = () => {
                   path={`/plugins/${pluginId}/403`}
                   render={() => <div>TBD No rights to see the content types</div>}
                 />
-                <Route
-                  path={`/plugins/${pluginId}/no-content-types`}
-                  render={() => <div>TBD No ct</div>}
-                />
+                <Route path={`/plugins/${pluginId}/no-content-types`}>
+                  <NoContentType />
+                </Route>
                 <Route path="" component={NotFound} />
               </Switch>
             </div>

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

@@ -24,6 +24,8 @@ jest.mock('@fortawesome/react-fontawesome', () => ({
   FontAwesomeIcon: () => null,
 }));
 
+jest.mock('../../NoContentType', () => () => <div>NoContentType</div>);
+
 describe('Content manager | App | main', () => {
   beforeEach(() => {
     jest.resetModules(); // Most important - it clears the cache

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Button, Padded, Text } from '@buffetjs/core';
+import { useHistory } from 'react-router';
+import { BaselineAlignment, CheckPermissions } from '@strapi/helper-plugin';
+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/plugins::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'
+    );
+  };
+
+  return (
+    <Container>
+      <Block>
+        <Img src={Oops} />
+        <div>
+          <Padded top size="md">
+            <BaselineAlignment top size="5px" />
+            <Text>
+              {formatMessage({
+                id: getTrad('pages.NoContentType.text'),
+                defaultMessage:
+                  "You don't have any content yet, we recommend you to create your first Content-Type.",
+              })}
+            </Text>
+          </Padded>
+          <CheckPermissions
+            permissions={[{ action: 'plugins::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>
+  );
+};
+
+export default NoContentType;

packages/core/content-manager/admin/src/translations/en.json

@@ -159,6 +159,8 @@
   "notification.info.minimumFields": "You need to have at least one field displayed",
   "notification.upload.error": "An error has occurred while uploading your files",
   "pageNotFound": "Page not found",
+  "pages.NoContentType.text": "You don't have any content yet, we recommend you to create your first Content-Type.",
+  "pages.NoContentType.button": "Create your first Content-Type",
   "permissions.not-allowed.create": "You are not allowed to create a document",
   "permissions.not-allowed.update": "You are not allowed to see this document",
   "plugin.description.long": "Quick way to see, edit and delete the data in your database.",