@strapi/admin 4.2.0-alpha.O → 4.2.0-beta.2

package/utils/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+const createCacheDir = require('./create-cache-dir');
+const getCustomWebpackConfig = require('./get-custom-webpack-config');
+const shouldBuildAdmin = require('./should-build-admin');
+const watchAdminFiles = require('./watch-admin-files');
+
+module.exports = {
+  createCacheDir,
+  getCustomWebpackConfig,
+  shouldBuildAdmin,
+  watchAdminFiles,
+};

package/utils/should-build-admin.js

@@ -0,0 +1,52 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs-extra');
+const getCustomAppConfigFile = require('./get-custom-app-config-file');
+
+const DEFAULT_PLUGINS = [
+  'content-type-builder',
+  'content-manager',
+  'upload',
+  'email',
+  'i18n',
+  'users-permissions',
+];
+
+/**
+ * Checks if the project's installed plugins are not the same as a default one.
+ * @param {Object} plugins
+ * @returns {boolean}
+ */
+const hasNonDefaultPlugins = plugins => {
+  // List of plugins that are not the ones installed in a generated app
+  const installedPlugins = Object.keys(plugins).filter(x => !DEFAULT_PLUGINS.includes(x));
+
+  // List of default plugins uninstalled from a generated app
+  const missingPlugins = DEFAULT_PLUGINS.filter(x => !Object.keys(plugins).includes(x));
+
+  const diff = [...installedPlugins, ...missingPlugins];
+
+  return diff.length > 0;
+};
+
+const hasCustomAdminCode = async dir => {
+  const customAdminPath = path.join(dir, 'src', 'admin');
+
+  const customAdminAppConfigFile = await getCustomAppConfigFile(dir);
+  const customAdminWebpackFile = path.join(customAdminPath, 'webpack.config.js');
+
+  const hasCustomConfigFile = !!customAdminAppConfigFile;
+  const hasCustomWebpackFile = await fs.pathExists(customAdminWebpackFile);
+
+  return hasCustomConfigFile || hasCustomWebpackFile;
+};
+
+const shouldBuildAdmin = async ({ appDir, plugins }) => {
+  const appHasCustomAdminCode = await hasCustomAdminCode(appDir);
+  const appHasNonDefaultPlugins = hasNonDefaultPlugins(plugins);
+
+  return appHasCustomAdminCode || appHasNonDefaultPlugins;
+};
+
+module.exports = shouldBuildAdmin;

package/utils/watch-admin-files.js

@@ -0,0 +1,59 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs-extra');
+const chokidar = require('chokidar');
+const { isUsingTypeScript } = require('@strapi/typescript-utils');
+
+/**
+ * Listen to files change and copy the changed files in the .cache/admin folder
+ * when using the dev mode
+ * @param {string} dir
+ */
+async function watchAdminFiles(dir) {
+  const useTypeScript = await isUsingTypeScript(path.join(dir, 'src', 'admin'), 'tsconfig.json');
+
+  const cacheDir = path.join(dir, '.cache');
+  const targetExtensionFile = useTypeScript ? 'app.tsx' : 'app.js';
+  const appExtensionFile = path.join(dir, 'src', 'admin', targetExtensionFile);
+  const extensionsPath = path.join(dir, 'src', 'admin', 'extensions');
+
+  // Only watch the admin/app.js file and the files that are in the ./admin/extensions/folder
+  const filesToWatch = [appExtensionFile, extensionsPath];
+
+  const watcher = chokidar.watch(filesToWatch, {
+    ignoreInitial: true,
+    ignorePermissionErrors: true,
+  });
+
+  watcher.on('all', async (event, filePath) => {
+    const isAppFile = filePath.includes(appExtensionFile);
+
+    // The app.js file needs to be copied in the .cache/admin/src/app.js and the other ones needs to
+    // be copied in the .cache/admin/src/extensions folder
+    const targetPath = isAppFile
+      ? path.join(path.normalize(filePath.split(appExtensionFile)[1]), targetExtensionFile)
+      : path.join('extensions', path.normalize(filePath.split(extensionsPath)[1]));
+
+    const destFolder = path.join(cacheDir, 'admin', 'src');
+
+    if (event === 'unlink' || event === 'unlinkDir') {
+      // Remove the file or folder
+      // We need to copy the original files when deleting an override one
+      try {
+        fs.removeSync(path.join(destFolder, targetPath));
+      } catch (err) {
+        console.log('An error occured while deleting the file', err);
+      }
+    } else {
+      // In any other case just copy the file into the .cache/admin/src folder
+      try {
+        await fs.copy(filePath, path.join(destFolder, targetPath));
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  });
+}
+
+module.exports = watchAdminFiles;

package/webpack.config.js

@@ -1,23 +1,26 @@
 'use strict';
 
 const path = require('path');
+const fse = require('fs-extra');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ForkTsCheckerPlugin = require('fork-ts-checker-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
+const { ESBuildMinifyPlugin } = require('esbuild-loader');
 const WebpackBar = require('webpackbar');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
-const isWsl = require('is-wsl');
 const alias = require('./webpack.alias');
 const getClientEnvironment = require('./env');
 
+const EE_REGEX = /from.* ['"]ee_else_ce\//;
+
 module.exports = ({
-  entry,
   cacheDir,
-  pluginsPath,
   dest,
+  entry,
   env,
   optimize,
+  pluginsPath,
   options = {
     backend: 'http://localhost:1337',
     adminPath: '/admin/',
@@ -27,6 +30,7 @@ module.exports = ({
     eeRoot: './ee/admin',
     ceRoot: './admin/src',
   },
+  tsConfigFilePath,
 }) => {
   const isProduction = env === 'production';
 
@@ -47,6 +51,11 @@ module.exports = ({
       ]
     : [];
 
+  // Directly inject a polyfill in the webpack entry point before the entry point
+  // FIXME: I have noticed a bug regarding the helper-plugin and esbuild-loader
+  // The only I could fix it was to inject the babel polyfill
+  const babelPolyfill = '@babel/polyfill/dist/polyfill.min.js';
+
   return {
     mode: isProduction ? 'production' : 'development',
     bail: isProduction ? true : false,
@@ -54,7 +63,7 @@ module.exports = ({
     experiments: {
       topLevelAwait: true,
     },
-    entry,
+    entry: [babelPolyfill, entry],
     output: {
       path: dest,
       publicPath: options.adminPath,
@@ -66,28 +75,9 @@ module.exports = ({
     optimization: {
       minimize: optimize,
       minimizer: [
-        // Copied from react-scripts
-        new TerserPlugin({
-          terserOptions: {
-            parse: {
-              ecma: 8,
-            },
-            compress: {
-              ecma: 5,
-              warnings: false,
-              comparisons: false,
-              inline: 2,
-            },
-            mangle: {
-              safari10: true,
-            },
-            output: {
-              ecma: 5,
-              comments: false,
-              ascii_only: true,
-            },
-          },
-          parallel: !isWsl,
+        new ESBuildMinifyPlugin({
+          target: 'es2015',
+          css: true, // Apply minification to CSS assets
         }),
       ],
       runtimeChunk: true,
@@ -95,42 +85,90 @@ module.exports = ({
     module: {
       rules: [
         {
-          test: /\.m?js$/,
-          // TODO remove when plugins are built separately
+          test: /\.tsx?$/,
+          loader: require.resolve('esbuild-loader'),
           include: [cacheDir, ...pluginsPath],
+          exclude: /node_modules/,
+          options: {
+            loader: 'tsx',
+            target: 'es2015',
+          },
+        },
+        {
+          test: /\.m?jsx?$/,
+          include: cacheDir,
+          oneOf: [
+            // Use babel-loader for files that distinct the ee and ce code
+            // These files have an import Something from 'ee_else_ce/
+            {
+              test(filePath) {
+                if (!filePath) {
+                  return false;
+                }
+
+                try {
+                  const fileContent = fse.readFileSync(filePath).toString();
+
+                  if (fileContent.match(/from.* ['"]ee_else_ce\//)) {
+                    return true;
+                  }
+
+                  return EE_REGEX.test(fileContent);
+                } catch (e) {
+                  return false;
+                }
+              },
+              use: {
+                loader: require.resolve('babel-loader'),
+                options: {
+                  cacheDirectory: true,
+                  cacheCompression: isProduction,
+                  compact: isProduction,
+                  presets: [
+                    require.resolve('@babel/preset-env'),
+                    require.resolve('@babel/preset-react'),
+                  ],
+                  plugins: [
+                    [
+                      require.resolve('@strapi/babel-plugin-switch-ee-ce'),
+                      {
+                        // Imported this tells the custom plugin where to look for the ee folder
+                        roots,
+                      },
+                    ],
+
+                    [
+                      require.resolve('@babel/plugin-transform-runtime'),
+                      {
+                        helpers: true,
+                        regenerator: true,
+                      },
+                    ],
+                    [require.resolve('babel-plugin-styled-components'), { pure: true }],
+                  ],
+                },
+              },
+            },
+            // Use esbuild-loader for the other files
+            {
+              use: {
+                loader: require.resolve('esbuild-loader'),
+                options: {
+                  loader: 'jsx',
+                  target: 'es2015',
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /\.m?jsx?$/,
+          include: pluginsPath,
           use: {
-            loader: require.resolve('babel-loader'),
+            loader: require.resolve('esbuild-loader'),
             options: {
-              cacheDirectory: true,
-              cacheCompression: isProduction,
-              compact: isProduction,
-              presets: [
-                require.resolve('@babel/preset-env'),
-                require.resolve('@babel/preset-react'),
-              ],
-              plugins: [
-                [
-                  require.resolve('@strapi/babel-plugin-switch-ee-ce'),
-                  {
-                    // Imported this tells the custom plugin where to look for the ee folder
-                    roots,
-                  },
-                ],
-                require.resolve('@babel/plugin-proposal-class-properties'),
-                require.resolve('@babel/plugin-syntax-dynamic-import'),
-                require.resolve('@babel/plugin-transform-modules-commonjs'),
-                require.resolve('@babel/plugin-proposal-async-generator-functions'),
-
-                [
-                  require.resolve('@babel/plugin-transform-runtime'),
-                  {
-                    // absoluteRuntime: true,s
-                    helpers: true,
-                    regenerator: true,
-                  },
-                ],
-                [require.resolve('babel-plugin-styled-components'), { pure: true }],
-              ],
+              loader: 'jsx',
+              target: 'es2015',
             },
           },
         },
@@ -171,7 +209,7 @@ module.exports = ({
     resolve: {
       alias,
       symlinks: false,
-      extensions: ['.js', '.jsx', '.react.js'],
+      extensions: ['.js', '.jsx', '.react.js', '.ts', '.tsx'],
       mainFields: ['browser', 'jsnext:main', 'main'],
       modules: ['node_modules', path.resolve(__dirname, 'node_modules')],
     },
@@ -179,12 +217,16 @@ module.exports = ({
       new HtmlWebpackPlugin({
         inject: true,
         template: path.resolve(__dirname, 'index.html'),
-        // FIXME
-        // favicon: path.resolve(__dirname, 'admin/src/favicon.ico'),
       }),
       new webpack.DefinePlugin(envVariables),
 
       new NodePolyfillPlugin(),
+
+      new ForkTsCheckerPlugin({
+        typescript: {
+          configFile: tsConfigFilePath,
+        },
+      }),
       ...webpackPlugins,
     ],
   };

package/admin/src/content-manager/components/DynamicTable/CellContent/Relation/PopoverContent.js

@@ -1,87 +0,0 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Loader } from '@strapi/design-system/Loader';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { axiosInstance } from '../../../../../core/utils';
-import { getRequestUrl, getTrad } from '../../../../utils';
-import CellValue from '../CellValue';
-
-const fetchRelation = async (endPoint, notifyStatus) => {
-  const {
-    data: { results, pagination },
-  } = await axiosInstance.get(endPoint);
-
-  notifyStatus();
-
-  return { results, pagination };
-};
-
-const PopoverContent = ({ fieldSchema, name, rowId, targetModel, queryInfos }) => {
-  const requestURL = getRequestUrl(`${queryInfos.endPoint}/${rowId}/${name.split('.')[0]}`);
-  const { notifyStatus } = useNotifyAT();
-  const { formatMessage } = useIntl();
-
-  const notify = () => {
-    const message = formatMessage({
-      id: getTrad('DynamicTable.relation-loaded'),
-      defaultMessage: 'The relations have been loaded',
-    });
-    notifyStatus(message);
-  };
-
-  const { data, status } = useQuery([targetModel, rowId], () => fetchRelation(requestURL, notify), {
-    staleTime: 0,
-  });
-
-  if (status !== 'success') {
-    return (
-      <Box>
-        <Loader>Loading content</Loader>
-      </Box>
-    );
-  }
-
-  return (
-    <ul>
-      {data?.results.map(entry => {
-        const value = entry[fieldSchema.name];
-
-        return (
-          <Box as="li" key={entry.id} padding={3}>
-            <Typography>
-              {value ? (
-                <CellValue type={fieldSchema.schema.type} value={entry[fieldSchema.name]} />
-              ) : (
-                '-'
-              )}
-            </Typography>
-          </Box>
-        );
-      })}
-      {data?.pagination.total > 10 && (
-        <Box as="li" padding={3}>
-          <Typography>[...]</Typography>
-        </Box>
-      )}
-    </ul>
-  );
-};
-
-PopoverContent.propTypes = {
-  fieldSchema: PropTypes.shape({
-    name: PropTypes.string,
-    schema: PropTypes.shape({ type: PropTypes.string }).isRequired,
-  }).isRequired,
-  name: PropTypes.string.isRequired,
-  rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  targetModel: PropTypes.string.isRequired,
-  queryInfos: PropTypes.shape({
-    endPoint: PropTypes.string,
-  }).isRequired,
-};
-
-export default PopoverContent;

package/admin/src/content-manager/components/DynamicTable/CellContent/Relation/index.js

@@ -1,107 +0,0 @@
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Badge } from '@strapi/design-system/Badge';
-import { Flex } from '@strapi/design-system/Flex';
-import { Popover } from '@strapi/design-system/Popover';
-import { SortIcon, stopPropagation } from '@strapi/helper-plugin';
-import styled from 'styled-components';
-import PopoverContent from './PopoverContent';
-import CellValue from '../CellValue';
-
-const SINGLE_RELATIONS = ['oneToOne', 'manyToOne'];
-
-const ActionWrapper = styled.span`
-  svg {
-    height: ${4 / 16}rem;
-  }
-`;
-
-const RelationCountBadge = styled(Badge)`
-  display: flex;
-  align-items: center;
-  height: ${20 / 16}rem;
-  width: ${16 / 16}rem;
-`;
-
-const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) => {
-  const { formatMessage } = useIntl();
-  const [visible, setVisible] = useState(false);
-  const buttonRef = useRef();
-
-  if (SINGLE_RELATIONS.includes(fieldSchema.relation)) {
-    return (
-      <Typography textColor="neutral800">
-        <CellValue type={metadatas.mainField.schema.type} value={value[metadatas.mainField.name]} />
-      </Typography>
-    );
-  }
-
-  const handleTogglePopover = () => setVisible(prev => !prev);
-
-  return (
-    <Flex {...stopPropagation}>
-      <RelationCountBadge>{value.count}</RelationCountBadge>
-      <Box paddingLeft={2}>
-        <Typography textColor="neutral800">
-          {formatMessage(
-            {
-              id: 'content-manager.containers.ListPage.items',
-              defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
-            },
-            { number: value.count }
-          )}
-        </Typography>
-      </Box>
-      {value.count > 0 && (
-        <ActionWrapper>
-          <IconButton
-            onClick={handleTogglePopover}
-            ref={buttonRef}
-            noBorder
-            label={formatMessage({
-              id: 'content-manager.popover.display-relations.label',
-              defaultMessage: 'Display relations',
-            })}
-            icon={<SortIcon isUp={visible} />}
-          />
-          {visible && (
-            <Popover source={buttonRef} spacing={16} centered>
-              <PopoverContent
-                queryInfos={queryInfos}
-                name={name}
-                fieldSchema={metadatas.mainField}
-                targetModel={fieldSchema.targetModel}
-                rowId={rowId}
-                count={value.count}
-              />
-            </Popover>
-          )}
-        </ActionWrapper>
-      )}
-    </Flex>
-  );
-};
-
-Relation.propTypes = {
-  fieldSchema: PropTypes.shape({
-    relation: PropTypes.string,
-    targetModel: PropTypes.string,
-    type: PropTypes.string.isRequired,
-  }).isRequired,
-  metadatas: PropTypes.shape({
-    mainField: PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      schema: PropTypes.shape({ type: PropTypes.string.isRequired }).isRequired,
-    }),
-  }).isRequired,
-  name: PropTypes.string.isRequired,
-  rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  queryInfos: PropTypes.shape({ endPoint: PropTypes.string.isRequired }).isRequired,
-  value: PropTypes.object.isRequired,
-};
-
-export default Relation;

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/getYupInnerErrors.js

@@ -1,17 +0,0 @@
-import { get } from 'lodash';
-
-const getYupInnerErrors = error => {
-  return get(error, 'inner', []).reduce((acc, curr) => {
-    acc[
-      curr.path
-        .split('[')
-        .join('.')
-        .split(']')
-        .join('')
-    ] = { id: curr.message };
-
-    return acc;
-  }, {});
-};
-
-export default getYupInnerErrors;

package/admin/src/hooks/useFetchPluginsFromMarketPlace/index.js

@@ -1,49 +0,0 @@
-import { useEffect, useState } from 'react';
-import axios from 'axios';
-import { useIntl } from 'react-intl';
-
-const useFetchPluginsFromMarketPlace = () => {
-  const { locale: currentLocale } = useIntl();
-  const [state, setState] = useState({
-    error: false,
-    isLoading: true,
-    data: null,
-  });
-
-  useEffect(() => {
-    const CancelToken = axios.CancelToken;
-    const source = CancelToken.source();
-
-    const getData = async () => {
-      try {
-        const { data } = await axios.get('https://marketplace.strapi.io/plugins', {
-          cancelToken: source.token,
-          params: { lang: currentLocale },
-        });
-
-        setState({
-          isLoading: false,
-          data,
-          error: false,
-        });
-      } catch (err) {
-        if (axios.isCancel(err)) {
-          // Silent
-        } else {
-          // handle error
-          setState(prev => ({ ...prev, isLoading: false, error: true }));
-        }
-      }
-    };
-
-    getData();
-
-    return () => {
-      source.cancel();
-    };
-  }, [currentLocale]);
-
-  return state;
-};
-
-export default useFetchPluginsFromMarketPlace;

package/admin/src/pages/MarketplacePage/MarketplaceBanner/Wrapper.js

@@ -1,28 +0,0 @@
-import styled from 'styled-components';
-
-// TODO : To migrate with @strapi/design-system
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin-top: 2rem;
-  border-radius: 4px;
-  border-left: 4px solid ${({ theme }) => theme.main.colors.mediumBlue};
-  box-shadow: 0 2px 4px ${({ theme }) => theme.main.colors.darkGrey};
-  padding: 8px 16px;
-
-  .bannerImage {
-    width: 48px;
-    height: 48px;
-    margin-right: 16px;
-  }
-
-  .bannerLink {
-    color: ${({ theme }) => theme.main.colors.mediumBlue};
-    font-weight: ${({ theme }) => theme.main.fontWeights.bold};
-    svg {
-      margin-left: 4px;
-    }
-  }
-`;
-
-export default Wrapper;