@strapi/admin 4.1.4-alpha.2 → 4.2.0-alpha.5

package/utils/get-custom-webpack-config.js

@@ -0,0 +1,38 @@
+'use strict';
+
+const path = require('path');
+const chalk = require('chalk');
+const _ = require('lodash');
+const webpack = require('webpack');
+const fs = require('fs-extra');
+const getWebpackConfig = require('../webpack.config');
+
+const getCustomWebpackConfig = (dir, config) => {
+  const adminConfigPath = path.join(dir, 'src', 'admin', 'webpack.config.js');
+
+  let webpackConfig = getWebpackConfig(config);
+
+  if (fs.existsSync(adminConfigPath)) {
+    const webpackAdminConfig = require(path.resolve(adminConfigPath));
+
+    if (_.isFunction(webpackAdminConfig)) {
+      // Expose the devServer configuration
+      if (config.devServer) {
+        webpackConfig.devServer = config.devServer;
+      }
+
+      webpackConfig = webpackAdminConfig(webpackConfig, webpack);
+
+      if (!webpackConfig) {
+        console.error(
+          `${chalk.red('Error:')} Nothing was returned from your custom webpack configuration`
+        );
+        process.exit(1);
+      }
+    }
+  }
+
+  return webpackConfig;
+};
+
+module.exports = getCustomWebpackConfig;

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,51 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs-extra');
+
+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, useTypeScript) => {
+  const customAdminPath = path.join(dir, 'src', 'admin');
+  const customAdminConfigFileExtension = useTypeScript ? 'app.tsx' : 'app.js';
+  const customAdminConfigFile = path.join(customAdminPath, customAdminConfigFileExtension);
+  const customAdminWebpackFile = path.join(customAdminPath, 'webpack.config.js');
+
+  const hasCustomConfigFile = await fs.pathExists(customAdminConfigFile);
+  const hasCustomWebpackFile = await fs.pathExists(customAdminWebpackFile);
+
+  return hasCustomConfigFile || hasCustomWebpackFile;
+};
+
+const shouldBuildAdmin = async ({ appDir, plugins, useTypeScript }) => {
+  const appHasCustomAdminCode = await hasCustomAdminCode(appDir, useTypeScript);
+  const appHasNonDefaultPlugins = hasNonDefaultPlugins(plugins);
+
+  return appHasCustomAdminCode || appHasNonDefaultPlugins;
+};
+
+module.exports = shouldBuildAdmin;

package/utils/watch-admin-files.js

@@ -0,0 +1,56 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs-extra');
+const chokidar = require('chokidar');
+
+/**
+ * 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, useTypeScript) {
+  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

@@ -3,6 +3,7 @@
 const path = require('path');
 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 WebpackBar = require('webpackbar');
@@ -12,12 +13,13 @@ const alias = require('./webpack.alias');
 const getClientEnvironment = require('./env');
 
 module.exports = ({
-  entry,
+  appDir,
   cacheDir,
-  pluginsPath,
   dest,
+  entry,
   env,
   optimize,
+  pluginsPath,
   options = {
     backend: 'http://localhost:1337',
     adminPath: '/admin/',
@@ -27,6 +29,7 @@ module.exports = ({
     eeRoot: './ee/admin',
     ceRoot: './admin/src',
   },
+  useTypeScript,
 }) => {
   const isProduction = env === 'production';
 
@@ -47,6 +50,35 @@ module.exports = ({
       ]
     : [];
 
+  if (useTypeScript) {
+    const tsChecker = new ForkTsCheckerPlugin({
+      typescript: {
+        // FIXME
+        configFile: path.join(appDir, 'tsconfig-admin.json'),
+      },
+    });
+
+    webpackPlugins.push(tsChecker);
+  }
+
+  const rules = [];
+
+  // webpack is quite slow to compile so it is best not to use the ts loader when
+  // it is not needed in javascript apps.
+  // Users can still add it by using the custom webpack config.
+  if (useTypeScript) {
+    rules.push({
+      test: /\.tsx?$/,
+      loader: require.resolve('esbuild-loader'),
+      include: [cacheDir, ...pluginsPath],
+      exclude: /node_modules/,
+      options: {
+        loader: 'tsx',
+        target: 'es2015',
+      },
+    });
+  }
+
   return {
     mode: isProduction ? 'production' : 'development',
     bail: isProduction ? true : false,
@@ -166,12 +198,13 @@ module.exports = ({
             },
           },
         },
+        ...rules,
       ],
     },
     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')],
     },

package/admin/src/assets/images/icon_made-by-strapi.svg

@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="3" y="3" width="18" height="18" rx="4" fill="#4945FF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8075 7.625H9.03058V11.1792H12.2533C12.4977 11.1792 12.6958 11.3773 12.6958 11.6216V14.8444H16.25V8.06746C16.25 7.82309 16.0519 7.625 15.8075 7.625Z" fill="white"/>
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M9.0308 7.625V11.1792H6.01073C5.81364 11.1792 5.71494 10.9409 5.8543 10.8015L9.0308 7.625ZM13.0735 18.0209C12.9342 18.1603 12.6959 18.0616 12.6959 17.8645V14.8444H16.25L13.0735 18.0209ZM12.4746 11.1792H9.03058V14.4019C9.03058 14.6463 9.22868 14.8444 9.47304 14.8444H12.6958V11.4004C12.6958 11.2782 12.5968 11.1792 12.4746 11.1792Z" fill="#DAD9FF"/>
-</svg>

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

@@ -1,23 +0,0 @@
-import { useQuery } from 'react-query';
-import { useNotification } from '@strapi/helper-plugin';
-import { fetchInstalledPlugins } from './utils/api';
-
-const useFetchInstalledPlugins = notifyLoad => {
-  const toggleNotification = useNotification();
-
-  return useQuery('list-installed-plugins', () => fetchInstalledPlugins(), {
-    onSuccess: () => {
-      if (notifyLoad) {
-        notifyLoad();
-      }
-    },
-    onError: () => {
-      toggleNotification({
-        type: 'warning',
-        message: { id: 'notification.error', defaultMessage: 'An error occured' },
-      });
-    },
-  });
-};
-
-export default useFetchInstalledPlugins;

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

@@ -1,23 +0,0 @@
-import { useQuery } from 'react-query';
-import { useNotification } from '@strapi/helper-plugin';
-import { fetchMarketplacePlugins } from './utils/api';
-
-const useFetchMarketplacePlugins = notifyLoad => {
-  const toggleNotification = useNotification();
-
-  return useQuery('list-marketplace-plugins', () => fetchMarketplacePlugins(), {
-    onSuccess: () => {
-      if (notifyLoad) {
-        notifyLoad();
-      }
-    },
-    onError: () => {
-      toggleNotification({
-        type: 'warning',
-        message: { id: 'notification.error', defaultMessage: 'An error occured' },
-      });
-    },
-  });
-};
-
-export default useFetchMarketplacePlugins;

package/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js

@@ -1,17 +0,0 @@
-import axios from 'axios';
-
-const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
-
-const fetchMarketplacePlugins = async () => {
-  const { data: response } = await axios.get(`${MARKETPLACE_API_URL}/plugins`);
-
-  // Only keep v4 plugins
-  const filteredResponse = {
-    ...response,
-    data: response.data.filter(plugin => plugin.attributes.strapiCompatibility === 'v4'),
-  };
-
-  return filteredResponse;
-};
-
-export { fetchMarketplacePlugins };

package/admin/src/pages/MarketplacePage/components/EmptyPluginSearch/EmptyPluginGrid.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { GridLayout } from '@strapi/design-system/Layout';
-
-const EmptyPluginCard = styled(Box)`
-  background: ${({ theme }) =>
-    `linear-gradient(180deg, rgba(234, 234, 239, 0) 0%, ${theme.colors.neutral150} 100%)`};
-  opacity: 0.33;
-`;
-
-export const EmptyPluginGrid = () => {
-  return (
-    <GridLayout>
-      {Array(12)
-        .fill(null)
-        .map((_, idx) => (
-          <EmptyPluginCard
-            // eslint-disable-next-line react/no-array-index-key
-            key={`empty-plugin-card-${idx}`}
-            height="234px"
-            hasRadius
-          />
-        ))}
-    </GridLayout>
-  );
-};

package/admin/src/pages/MarketplacePage/components/EmptyPluginSearch/index.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Icon } from '@strapi/design-system/Icon';
-import EmptyStateDocument from '@strapi/icons/EmptyDocuments';
-import { EmptyPluginGrid } from './EmptyPluginGrid';
-
-export const EmptyPluginSearch = ({ content }) => {
-  return (
-    <Box position="relative">
-      <EmptyPluginGrid />
-      <Box position="absolute" top={11} width="100%">
-        <Flex alignItems="center" justifyContent="center" direction="column">
-          <Icon as={EmptyStateDocument} color="" width="160px" height="88px" />
-          <Box paddingTop={6}>
-            <Typography variant="delta" as="p" textColor="neutral600">
-              {content}
-            </Typography>
-          </Box>
-        </Flex>
-      </Box>
-    </Box>
-  );
-};
-
-EmptyPluginSearch.propTypes = {
-  content: PropTypes.string.isRequired,
-};

package/admin/src/pages/MarketplacePage/components/PluginCard/index.js

@@ -1,186 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
-import { LinkButton } from '@strapi/design-system/LinkButton';
-import { Flex } from '@strapi/design-system/Flex';
-import { Icon } from '@strapi/design-system/Icon';
-import { Tooltip } from '@strapi/design-system/Tooltip';
-import ExternalLink from '@strapi/icons/ExternalLink';
-import Duplicate from '@strapi/icons/Duplicate';
-import Check from '@strapi/icons/Check';
-import CheckCircle from '@strapi/icons/CheckCircle';
-import { useNotification, useTracking } from '@strapi/helper-plugin';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import madeByStrapiIcon from '../../../../assets/images/icon_made-by-strapi.svg';
-
-// Custom component to have an ellipsis after the 2nd line
-const EllipsisText = styled(Typography)`
-  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
-  overflow: hidden;
-`;
-
-const PluginCard = ({ plugin, installedPluginNames, useYarn }) => {
-  const { attributes } = plugin;
-  const { formatMessage } = useIntl();
-  const toggleNotification = useNotification();
-  const { trackUsage } = useTracking();
-
-  const isInstalled = installedPluginNames.includes(attributes.npmPackageName);
-
-  const commandToCopy = useYarn
-    ? `yarn add ${attributes.npmPackageName}`
-    : `npm install ${attributes.npmPackageName}`;
-
-  const madeByStrapiMessage = formatMessage({
-    id: 'admin.pages.MarketPlacePage.plugin.tooltip.madeByStrapi',
-    defaultMessage: 'Made by Strapi',
-  });
-
-  return (
-    <Flex
-      direction="column"
-      justifyContent="space-between"
-      paddingTop={4}
-      paddingRight={6}
-      paddingBottom={4}
-      paddingLeft={6}
-      hasRadius
-      background="neutral0"
-      shadow="tableShadow"
-      height="100%"
-      alignItems="normal"
-    >
-      <Box>
-        <Box
-          as="img"
-          src={attributes.logo.url}
-          alt={`${attributes.name} logo`}
-          hasRadius
-          width={11}
-          height={11}
-        />
-        <Box paddingTop={4}>
-          <Typography as="h3" variant="delta">
-            <Flex alignItems="center">
-              {attributes.name}
-              {attributes.validated && !attributes.madeByStrapi && (
-                <Tooltip
-                  description={formatMessage({
-                    id: 'admin.pages.MarketPlacePage.plugin.tooltip.verified',
-                    defaultMessage: 'Plugin verified by Strapi',
-                  })}
-                >
-                  <Flex>
-                    <Icon as={CheckCircle} marginLeft={2} color="success600" />
-                  </Flex>
-                </Tooltip>
-              )}
-              {attributes.madeByStrapi && (
-                <Tooltip description={madeByStrapiMessage}>
-                  <Flex>
-                    <Box
-                      as="img"
-                      src={madeByStrapiIcon}
-                      alt={madeByStrapiMessage}
-                      marginLeft={1}
-                      width={6}
-                      height="auto"
-                    />
-                  </Flex>
-                </Tooltip>
-              )}
-            </Flex>
-          </Typography>
-        </Box>
-        <Box paddingTop={2}>
-          <EllipsisText as="p" variant="omega" textColor="neutral600">
-            {attributes.description}
-          </EllipsisText>
-        </Box>
-      </Box>
-
-      <Stack horizontal spacing={2} style={{ alignSelf: 'flex-end' }} paddingTop={6}>
-        <LinkButton
-          size="S"
-          href={`https://market.strapi.io/plugins/${attributes.slug}`}
-          endIcon={<ExternalLink />}
-          aria-label={formatMessage(
-            {
-              id: 'admin.pages.MarketPlacePage.plugin.info.label',
-              defaultMessage: 'Learn more about {pluginName}',
-            },
-            { pluginName: attributes.name }
-          )}
-          variant="tertiary"
-          onClick={() => trackUsage('didPluginLearnMore')}
-        >
-          {formatMessage({
-            id: 'admin.pages.MarketPlacePage.plugin.info.text',
-            defaultMessage: 'Learn more',
-          })}
-        </LinkButton>
-        {isInstalled ? (
-          <Box paddingLeft={4}>
-            <Icon as={Check} marginRight={2} width={12} height={12} color="success600" />
-            <Typography variant="omega" textColor="success600" fontWeight="bold">
-              {formatMessage({
-                id: 'admin.pages.MarketPlacePage.plugin.installed',
-                defaultMessage: 'Installed',
-              })}
-            </Typography>
-          </Box>
-        ) : (
-          <CopyToClipboard
-            onCopy={() => {
-              trackUsage('willInstallPlugin');
-              toggleNotification({
-                type: 'success',
-                message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
-              });
-            }}
-            text={commandToCopy}
-          >
-            <Button size="S" startIcon={<Duplicate />} variant="secondary">
-              {formatMessage({
-                id: 'admin.pages.MarketPlacePage.plugin.copy',
-                defaultMessage: 'Copy install command',
-              })}
-            </Button>
-          </CopyToClipboard>
-        )}
-      </Stack>
-    </Flex>
-  );
-};
-
-PluginCard.propTypes = {
-  plugin: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    attributes: PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      description: PropTypes.string.isRequired,
-      slug: PropTypes.string.isRequired,
-      npmPackageName: PropTypes.string.isRequired,
-      npmPackageUrl: PropTypes.string.isRequired,
-      repositoryUrl: PropTypes.string.isRequired,
-      logo: PropTypes.object.isRequired,
-      developerName: PropTypes.string.isRequired,
-      validated: PropTypes.bool.isRequired,
-      madeByStrapi: PropTypes.bool.isRequired,
-      strapiCompatibility: PropTypes.oneOf(['v3', 'v4']).isRequired,
-    }).isRequired,
-  }).isRequired,
-  installedPluginNames: PropTypes.arrayOf(PropTypes.string).isRequired,
-  useYarn: PropTypes.bool.isRequired,
-};
-
-export default PluginCard;

package/admin/src/pages/MarketplacePage/utils/api.js

@@ -1,9 +0,0 @@
-import { axiosInstance } from '../../../core/utils';
-
-const fetchAppInformation = async () => {
-  const { data } = await axiosInstance.get('/admin/information');
-
-  return data;
-};
-
-export { fetchAppInformation };