Enable CTB

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

packages/core/admin/admin/src/plugins.js

@@ -4,12 +4,12 @@
 import i18nPlugin from '../../../../plugins/i18n/admin/src';
 // import sentryPlugin from '../../../../plugins/sentry/admin/src';
 import usersPermissionsPlugin from '../../../../plugins/users-permissions/admin/src';
-// import ctbPlugin from '../../../content-type-builder/admin/src';
+import ctbPlugin from '../../../content-type-builder/admin/src';
 // import emailPlugin from '../../../email/admin/src';
 import uploadPlugin from '../../../upload/admin/src';
 
 const plugins = {
-  // '@strapi/plugin-content-type-builder': ctbPlugin,
+  '@strapi/plugin-content-type-builder': ctbPlugin,
   // '@strapi/plugin-documentation': documentationPlugin,
   '@strapi/plugin-i18n': i18nPlugin,
   // '@strapi/plugin-email': emailPlugin,

packages/core/content-type-builder/admin/src/components/DataManagerProvider/index.js

@@ -5,7 +5,7 @@ import {
   request,
   LoadingIndicatorPage,
   useTracking,
-  PopUpWarning,
+  // PopUpWarning,
   useNotification,
   useStrapiApp,
   useAutoReloadOverlayBlocker,
@@ -20,7 +20,7 @@ import DataManagerContext from '../../contexts/DataManagerContext';
 import getTrad from '../../utils/getTrad';
 import makeUnique from '../../utils/makeUnique';
 import pluginId from '../../pluginId';
-import FormModal from '../FormModal';
+// import FormModal from '../FormModal';
 import createDataObject from './utils/createDataObject';
 import createModifiedDataSchema from './utils/createModifiedDataSchema';
 import retrieveSpecificInfoFromComponents from './utils/retrieveSpecificInfoFromComponents';
@@ -30,14 +30,15 @@ import { retrieveComponentsThatHaveComponents } from './utils/retrieveComponents
 import {
   getComponentsToPost,
   formatMainDataType,
-  getCreatedAndModifiedComponents,
+  // FIXME
+  // getCreatedAndModifiedComponents,
   sortContentType,
 } from './utils/cleanData';
 
 import {
   ADD_ATTRIBUTE,
   ADD_CREATED_COMPONENT_TO_DYNAMIC_ZONE,
-  CANCEL_CHANGES,
+  // CANCEL_CHANGES,
   CHANGE_DYNAMIC_ZONE_COMPONENTS,
   CREATE_SCHEMA,
   CREATE_COMPONENT_SCHEMA,
@@ -72,7 +73,9 @@ const DataManagerProvider = ({
   const { getPlugin } = useStrapiApp();
 
   const { apis } = getPlugin(pluginId);
-  const [infoModals, toggleInfoModal] = useState({ cancel: false });
+  // FIXME
+  const [, toggleInfoModal] = useState({ cancel: false });
+  // const [infoModals, toggleInfoModal] = useState({ cancel: false });
   const { autoReload } = useAppInfos();
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
@@ -156,8 +159,9 @@ const DataManagerProvider = ({
     }
   }, [autoReload, toggleNotification]);
 
-  const didModifiedComponents =
-    getCreatedAndModifiedComponents(modifiedData.components || {}, components).length > 0;
+  // FIXME
+  // const didModifiedComponents =
+  //   getCreatedAndModifiedComponents(modifiedData.components || {}, components).length > 0;
 
   const addAttribute = (
     attributeToSet,
@@ -187,10 +191,11 @@ const DataManagerProvider = ({
     });
   };
 
-  const cancelChanges = () => {
-    toggleModalCancel();
-    dispatch({ type: CANCEL_CHANGES });
-  };
+  // FIXME
+  // const cancelChanges = () => {
+  //   toggleModalCancel();
+  //   dispatch({ type: CANCEL_CHANGES });
+  // };
 
   const createSchema = (
     data,
@@ -568,8 +573,8 @@ const DataManagerProvider = ({
           {children}
           {isInDevelopmentMode && (
             <>
-              <FormModal />
-              <PopUpWarning
+              {/* <FormModal /> */}
+              {/* <PopUpWarning
                 isOpen={infoModals.cancel}
                 toggleModal={toggleModalCancel}
                 content={{
@@ -583,7 +588,7 @@ const DataManagerProvider = ({
                 onConfirm={() => {
                   cancelChanges();
                 }}
-              />
+              /> */}
             </>
           )}
         </>

packages/core/content-type-builder/admin/src/index.js

@@ -19,7 +19,7 @@ const name = pluginPkg.strapi.name;
 export default {
   register(app) {
     app.addReducers(reducers);
-    app.addCorePluginMenuLink({
+    app.addMenuLink({
       to: `/plugins/${pluginId}`,
       icon,
       intlLabel: {
@@ -27,6 +27,11 @@ export default {
         defaultMessage: 'Content-Types Builder',
       },
       permissions: pluginPermissions.main,
+      Component: async () => {
+        const component = await import(/* webpackChunkName: "documentation-page" */ './pages/App');
+
+        return component;
+      },
     });
 
     app.registerPlugin({

packages/core/content-type-builder/admin/src/pages/App/TempTP.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+const theme = {
+  main: {
+    colors: {
+      black: '#333740',
+      white: '#ffffff',
+      red: '#ff203c',
+      orange: '#ff5d00',
+      lightOrange: '#f64d0a',
+      yellow: '#ffd500',
+      green: '#6dbb1a',
+      blue: '#0097f7',
+      teal: '#5bc0de',
+      pink: '#ff5b77',
+      purple: '#613d7c',
+      gray: '#464a4c',
+      border: '#e3e9f3',
+      'gray-dark': '#292b2c',
+      grayLight: '#636c72',
+      'gray-lighter': '#eceeef',
+      'gray-lightest': '#f7f7f9',
+      brightGrey: '#f0f3f8',
+      darkGrey: '#e3e9f3',
+      lightGrey: '#fafafa',
+      lightestGrey: '#fbfbfb',
+      mediumGrey: '#f2f3f4',
+      grey: '#9ea7b8',
+      greyDark: '#292b2c',
+      greyAlpha: 'rgba(227, 233, 243, 0.5)',
+      lightestBlue: '#e4f0fc',
+      lightBlue: '#e6f0fb',
+      mediumBlue: '#007eff',
+      darkBlue: '#aed4fb',
+      pale: '#f7f8f8',
+      content: {
+        background: '#fafafb',
+        'background-alpha': 'rgba(14, 22, 34, 0.02)',
+      },
+      leftMenu: {
+        'link-hover': '#1c2431',
+        'link-color': '#919bae',
+        'title-color': '#5b626f',
+        'background-header-link': '#007eff',
+      },
+      strapi: {
+        'gray-light': '#eff3f6',
+        gray: '#535f76',
+        'blue-darker': '#18202e',
+        'blue-dark': '#151c2e',
+        blue: '#0097f7',
+      },
+    },
+    fontWeights: {
+      regular: 400,
+      semiBold: 500,
+      bold: 600,
+      black: 900,
+    },
+    sizes: {
+      borderRadius: '2px',
+      header: {
+        height: '6rem',
+      },
+      leftMenu: {
+        height: '6rem',
+        width: '24rem',
+      },
+      margins: {
+        // TODO:
+        sm: '10px',
+      },
+      paddings: {
+        // TODO
+        xs: '5px',
+        sm: '10px',
+        smd: '20px',
+        md: '30px',
+        lg: '40px',
+      },
+      fonts: {
+        xs: '11px',
+        sm: '12px',
+        md: '13px',
+        lg: '18px',
+        xl: '24px',
+      },
+    },
+  },
+};
+
+// eslint-disable-next-line react/prop-types
+const TempTP = ({ children }) => <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+
+export default TempTP;

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

@@ -12,27 +12,30 @@ import pluginId from '../../pluginId';
 import DataManagerProvider from '../../components/DataManagerProvider';
 import RecursivePath from '../RecursivePath';
 import icons from './utils/icons.json';
+import TempTP from './TempTP';
 import Wrapper from './Wrapper';
 
 const ListView = lazy(() => import('../ListView'));
 
 const App = () => {
   return (
-    <CheckPagePermissions permissions={pluginPermissions.main}>
-      <Wrapper>
-        <DataManagerProvider allIcons={icons}>
-          <Suspense fallback={<LoadingIndicatorPage />}>
-            <Switch>
-              <Route path={`/plugins/${pluginId}/content-types/:uid`} component={ListView} />
-              <Route
-                path={`/plugins/${pluginId}/component-categories/:categoryUid`}
-                component={RecursivePath}
-              />
-            </Switch>
-          </Suspense>
-        </DataManagerProvider>
-      </Wrapper>
-    </CheckPagePermissions>
+    <TempTP>
+      <CheckPagePermissions permissions={pluginPermissions.main}>
+        <Wrapper>
+          <DataManagerProvider allIcons={icons}>
+            <Suspense fallback={<LoadingIndicatorPage />}>
+              <Switch>
+                <Route path={`/plugins/${pluginId}/content-types/:uid`} component={ListView} />
+                <Route
+                  path={`/plugins/${pluginId}/component-categories/:categoryUid`}
+                  component={RecursivePath}
+                />
+              </Switch>
+            </Suspense>
+          </DataManagerProvider>
+        </Wrapper>
+      </CheckPagePermissions>
+    </TempTP>
   );
 };