@strapi/admin 4.12.6 → 4.13.0-alpha.0

package/utils/create-cache-dir.js

@@ -9,20 +9,29 @@ const getCustomAppConfigFile = require('./get-custom-app-config-file');
 const getPkgPath = (name) => path.dirname(require.resolve(`${name}/package.json`));
 
 async function createPluginsJs(plugins, dest) {
-  const pluginsArray = plugins.map(({ pathToPlugin, name }) => {
+  const pluginsArray = plugins.map(({ pathToPlugin, name, info }) => {
     const shortName = _.camelCase(name);
 
+    let realPath = '';
+
     /**
-     * path.join, on windows, it uses backslashes to resolve path.
-     * The problem is that Webpack does not windows paths
-     * With this tool, we need to rely on "/" and not "\".
-     * This is the reason why '..\\..\\..\\node_modules\\@strapi\\plugin-content-type-builder/strapi-admin.js' was not working.
-     * The regexp at line 105 aims to replace the windows backslashes by standard slash so that webpack can deal with them.
-     * Backslash looks to work only for absolute paths with webpack => https://webpack.js.org/concepts/module-resolution/#absolute-paths
+     * We're using a module here so we want to keep using the module resolution procedure.
      */
-    const realPath = path
-      .join(path.relative(path.resolve(dest, 'admin', 'src'), pathToPlugin), 'strapi-admin.js')
-      .replace(/\\/g, '/');
+    if (info?.packageName || info?.required) {
+      /**
+       * path.join, on windows, it uses backslashes to resolve path.
+       * The problem is that Webpack does not windows paths
+       * With this tool, we need to rely on "/" and not "\".
+       * This is the reason why '..\\..\\..\\node_modules\\@strapi\\plugin-content-type-builder/strapi-admin.js' was not working.
+       * The regexp at line 105 aims to replace the windows backslashes by standard slash so that webpack can deal with them.
+       * Backslash looks to work only for absolute paths with webpack => https://webpack.js.org/concepts/module-resolution/#absolute-paths
+       */
+      realPath = path.join(pathToPlugin, 'strapi-admin').replace(/\\/g, '/');
+    } else {
+      realPath = path
+        .join(path.relative(path.resolve(dest, 'admin', 'src'), pathToPlugin), 'strapi-admin')
+        .replace(/\\/g, '/');
+    }
 
     return {
       name,
@@ -76,12 +85,49 @@ async function createCacheDir({ appDir, plugins }) {
     'tsconfig.json'
   );
 
-  const pluginsWithFront = Object.keys(plugins)
-    .filter((pluginName) => {
-      const pluginInfo = plugins[pluginName];
-      return fs.existsSync(path.resolve(pluginInfo.pathToPlugin, 'strapi-admin.js'));
+  const pluginsWithFront = Object.entries(plugins)
+    .filter(([, plugin]) => {
+      /**
+       * There are two ways a plugin should be imported, either it's local to the strapi app,
+       * or it's an actual npm module that's installed and resolved via node_modules.
+       *
+       * We first check if the plugin is local to the strapi app, using a regular `resolve` because
+       * the pathToPlugin will be relative i.e. `/Users/my-name/strapi-app/src/plugins/my-plugin`.
+       *
+       * If the file doesn't exist well then it's probably a node_module, so instead we use `require.resolve`
+       * which will resolve the path to the module in node_modules. If it fails with the specific code `MODULE_NOT_FOUND`
+       * then it doesn't have an admin part to the package.
+       *
+       * NOTE: we should try to move to `./package.json[exports]` map with bundling of our own plugins,
+       * because these entry files are written in commonjs restricting features e.g. tree-shaking.
+       */
+      try {
+        const isLocalPluginWithLegacyAdminFile = fs.existsSync(
+          path.resolve(`${plugin.pathToPlugin}/strapi-admin.js`)
+        );
+
+        if (!isLocalPluginWithLegacyAdminFile) {
+          const isModulewithLegacyAdminFile = require.resolve(
+            `${plugin.pathToPlugin}/strapi-admin.js`
+          );
+
+          return isModulewithLegacyAdminFile;
+        }
+
+        return isLocalPluginWithLegacyAdminFile;
+      } catch (err) {
+        if (err.code === 'MODULE_NOT_FOUND') {
+          /**
+           * the plugin does not contain FE code, so we
+           * don't want to import it anyway
+           */
+          return false;
+        }
+
+        throw err;
+      }
     })
-    .map((name) => ({ name, ...plugins[name] }));
+    .map(([name, plugin]) => ({ name, ...plugin }));
 
   // create .cache dir
   await fs.emptyDir(cacheDir);
@@ -128,4 +174,4 @@ async function createCacheDir({ appDir, plugins }) {
   }
 }
 
-module.exports = createCacheDir;
+module.exports = { createCacheDir, createPluginsJs };

package/utils/create-plugins-exclude-path.js

@@ -1,40 +1,20 @@
 'use strict';
 
-const { sep, join } = require('path');
-
 const NODE_MODULES = 'node_modules';
 /**
  * @param {string[]} pluginsPath – an array of paths to the plugins from the user's directory
  * @returns {RegExp} a regex that will exclude _all_ node_modules except for the plugins in the pluginsPath array.
  */
 const createPluginsExcludePath = (pluginsPath = []) => {
-  /**
-   * converts the full path to just the plugin path
-   * e.g. `/Users/username/strapi/node_modules/@scope/plugin-name`
-   * to `@scope/plugin-name`
-   */
-  const tsxPlugins = pluginsPath.reduce((acc, curr) => {
-    const dirPaths = curr.split(sep);
-
-    const nodeModulePathIndex = dirPaths.findIndex((val) => val === NODE_MODULES);
-
-    if (nodeModulePathIndex > 0) {
-      const pluginNodeModulePath = dirPaths.slice(nodeModulePathIndex + 1);
-      return [...acc, join(...pluginNodeModulePath)];
-    }
-
-    return acc;
-  }, []);
-
   /**
    * If there aren't any plugins in the node_modules array, just return the node_modules regex
    * without complicating it.
    */
-  if (tsxPlugins.length === 0) {
+  if (pluginsPath.length === 0) {
     return /node_modules/;
   }
 
-  return new RegExp(`${NODE_MODULES}/(?!(${tsxPlugins.join('|')}))`);
+  return new RegExp(`${NODE_MODULES}/(?!(${pluginsPath.join('|')}))`);
 };
 
-module.exports = createPluginsExcludePath;
+module.exports = { createPluginsExcludePath };

package/utils/get-plugins.js

@@ -0,0 +1,110 @@
+'use strict';
+
+const { join, resolve, sep, posix } = require('path');
+const fs = require('fs');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const glob = require('glob');
+
+const getPlugins = (pluginsAllowlist) => {
+  const rootPath = resolve(__dirname, '..', join('..', '..', '..', 'packages'));
+  /**
+   * So `glob` only supports '/' as a path separator, so we need to replace
+   * the path separator for the current OS with '/'. e.g. on windows it's `\`.
+   *
+   * see https://github.com/isaacs/node-glob/#windows for more information
+   *
+   * and see https://github.com/isaacs/node-glob/issues/467#issuecomment-1114240501 for the recommended fix.
+   */
+  let corePath = join(rootPath, 'core', '*');
+  let pluginsPath = join(rootPath, 'plugins', '*');
+
+  if (process.platform === 'win32') {
+    corePath = corePath.split(sep).join(posix.sep);
+    pluginsPath = pluginsPath.split(sep).join(posix.sep);
+  }
+
+  const corePackageDirs = glob.sync(corePath);
+  const pluginsPackageDirs = glob.sync(pluginsPath);
+
+  const plugins = [...corePackageDirs, ...pluginsPackageDirs]
+    .map((directory) => {
+      const isCoreAdmin = directory.includes('packages/core/admin');
+
+      if (isCoreAdmin) {
+        return null;
+      }
+
+      const { name, strapi } = require(join(directory, 'package.json'));
+
+      /**
+       * this will remove any of our packages that are
+       * not actually plugins for the application
+       */
+      if (!strapi) {
+        return null;
+      }
+
+      /**
+       * we want the name of the node_module
+       */
+      return {
+        pathToPlugin: name,
+        name: strapi.name,
+        info: { ...strapi, packageName: name },
+        directory,
+      };
+    })
+    .filter((plugin) => {
+      if (!plugin) {
+        return false;
+      }
+
+      /**
+       * There are two ways a plugin should be imported, either it's local to the strapi app,
+       * or it's an actual npm module that's installed and resolved via node_modules.
+       *
+       * We first check if the plugin is local to the strapi app, using a regular `resolve` because
+       * the pathToPlugin will be relative i.e. `/Users/my-name/strapi-app/src/plugins/my-plugin`.
+       *
+       * If the file doesn't exist well then it's probably a node_module, so instead we use `require.resolve`
+       * which will resolve the path to the module in node_modules. If it fails with the specific code `MODULE_NOT_FOUND`
+       * then it doesn't have an admin part to the package.
+       *
+       * NOTE: we should try to move to `./package.json[exports]` map with bundling of our own plugins,
+       * because these entry files are written in commonjs restricting features e.g. tree-shaking.
+       */
+      try {
+        const isLocalPluginWithLegacyAdminFile = fs.existsSync(
+          resolve(`${plugin.pathToPlugin}/strapi-admin.js`)
+        );
+
+        if (!isLocalPluginWithLegacyAdminFile) {
+          const isModulewithLegacyAdminFile = require.resolve(
+            `${plugin.pathToPlugin}/strapi-admin.js`
+          );
+
+          return isModulewithLegacyAdminFile;
+        }
+
+        return isLocalPluginWithLegacyAdminFile;
+      } catch (err) {
+        if (err.code === 'MODULE_NOT_FOUND') {
+          /**
+           * the plugin does not contain FE code, so we
+           * don't want to import it anyway
+           */
+          return false;
+        }
+
+        throw err;
+      }
+    });
+
+  if (Array.isArray(pluginsAllowlist)) {
+    return plugins.filter((plugin) => pluginsAllowlist.includes(plugin.pathToPlugin));
+  }
+
+  return plugins;
+};
+
+module.exports = { getPlugins };

package/utils/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const createCacheDir = require('./create-cache-dir');
+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');

package/webpack.config.js

@@ -4,24 +4,23 @@ const path = require('path');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ForkTsCheckerPlugin = require('fork-ts-checker-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { ESBuildMinifyPlugin } = require('esbuild-loader');
 const WebpackBar = require('webpackbar');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const browserslist = require('browserslist');
 const browserslistToEsbuild = require('browserslist-to-esbuild');
 
 const alias = require('./webpack.alias');
 const getClientEnvironment = require('./env');
-const createPluginsExcludePath = require('./utils/create-plugins-exclude-path');
+const { createPluginsExcludePath } = require('./utils/create-plugins-exclude-path');
 
 module.exports = ({
-  cacheDir,
   dest,
   entry,
   env,
   optimize,
-  pluginsPath,
+  plugins,
   options = {
     backend: 'http://localhost:1337',
     adminPath: '/admin/',
@@ -45,7 +44,11 @@ module.exports = ({
       ]
     : [];
 
-  const excludeRegex = createPluginsExcludePath(pluginsPath);
+  const nodeModulePluginPaths = Object.values(plugins)
+    .filter((plugin) => plugin.info?.packageName || plugin.info?.required)
+    .map((plugin) => plugin.pathToPlugin);
+
+  const excludeRegex = createPluginsExcludePath(nodeModulePluginPaths);
 
   // Ensure we use the config in this directory, even if run with a different
   // working directory
@@ -84,7 +87,6 @@ module.exports = ({
         {
           test: /\.tsx?$/,
           loader: require.resolve('esbuild-loader'),
-          include: [cacheDir, ...pluginsPath],
           exclude: excludeRegex,
           options: {
             loader: 'tsx',
@@ -92,8 +94,8 @@ module.exports = ({
           },
         },
         {
-          test: /\.m?jsx?$/,
-          include: [cacheDir, ...pluginsPath],
+          test: /\.(js|jsx|mjs)$/,
+          exclude: excludeRegex,
           use: {
             loader: require.resolve('esbuild-loader'),
             options: {
@@ -150,10 +152,7 @@ module.exports = ({
     },
     resolve: {
       alias,
-      symlinks: false,
       extensions: ['.js', '.jsx', '.react.js', '.ts', '.tsx'],
-      mainFields: ['browser', 'module', 'jsnext:main', 'main'],
-      modules: ['node_modules', path.resolve(__dirname, 'node_modules')],
     },
     plugins: [
       new HtmlWebpackPlugin({
@@ -167,9 +166,7 @@ module.exports = ({
           configFile: tsConfigFilePath,
         },
       }),
-
       !isProduction && process.env.REACT_REFRESH !== 'false' && new ReactRefreshWebpackPlugin(),
-
       ...webpackPlugins,
     ].filter(Boolean),
   };

package/admin/src/components/AuthenticatedApp.js

@@ -1,229 +0,0 @@
-import * as React from 'react';
-
-import {
-  AppInfoProvider,
-  auth,
-  LoadingIndicatorPage,
-  useFetchClient,
-  useGuidedTour,
-  useNotification,
-  useStrapiApp,
-} from '@strapi/helper-plugin';
-import { useQueries } from 'react-query';
-import { valid, lt } from 'semver';
-
-import packageJSON from '../../../package.json';
-import { useConfigurations } from '../hooks';
-import { Admin } from '../pages/Admin';
-import { getFullName } from '../utils/getFullName';
-import { hashAdminUserEmail } from '../utils/uniqueAdminHash';
-
-import RBACProvider from './RBACProvider';
-
-const strapiVersion = packageJSON.version;
-
-const checkLatestStrapiVersion = (currentPackageVersion, latestPublishedVersion) => {
-  if (!valid(currentPackageVersion) || !valid(latestPublishedVersion)) {
-    return false;
-  }
-
-  return lt(currentPackageVersion, latestPublishedVersion);
-};
-
-export const AuthenticatedApp = () => {
-  const { setGuidedTourVisibility } = useGuidedTour();
-  const toggleNotification = useNotification();
-  const userInfo = auth.getUserInfo();
-  const { get } = useFetchClient();
-  // TODO: replace with getDisplayName()
-  const [userDisplayName, setUserDisplayName] = React.useState(
-    userInfo?.userName ?? getFullName(userInfo.firstname, userInfo.lastname)
-  );
-  const [userId, setUserId] = React.useState(null);
-  const { showReleaseNotification } = useConfigurations();
-  const { plugins: appPlugins = {} } = useStrapiApp();
-  const [plugins, setPlugins] = React.useState(appPlugins);
-  const [
-    { data: appInfos, isLoading: isLoadingAppInfos },
-    { data: tagName },
-    { data: permissions, isLoading: isLoadingPermissions, refetch },
-    { data: userRoles },
-  ] = useQueries([
-    {
-      queryKey: 'information',
-      async queryFn() {
-        const {
-          data: { data },
-        } = await get('/admin/information');
-
-        return data;
-      },
-    },
-
-    {
-      queryKey: 'strapi-release',
-      async queryFn() {
-        const res = await fetch('https://api.github.com/repos/strapi/strapi/releases/latest');
-
-        if (!res.ok) {
-          throw new Error('Failed to fetch latest Strapi version.');
-        }
-
-        const { tag_name } = await res.json();
-
-        return tag_name;
-      },
-      enabled: showReleaseNotification,
-      initialData: strapiVersion,
-      onSuccess(data) {
-        const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, data.tag_name);
-
-        if (shouldUpdateStrapi && !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'))) {
-          toggleNotification({
-            type: 'info',
-            message: { id: 'notification.version.update.message' },
-            link: {
-              url: `https://github.com/strapi/strapi/releases/tag/${data.tag_name}`,
-              label: {
-                id: 'global.see-more',
-              },
-            },
-            blockTransition: true,
-            onClose: () => localStorage.setItem('STRAPI_UPDATE_NOTIF', true),
-          });
-        }
-      },
-      retry: false,
-    },
-    {
-      queryKey: ['users', 'me', 'permissions'],
-      async queryFn() {
-        const {
-          data: { data },
-        } = await get('/admin/users/me/permissions');
-
-        return data;
-      },
-      initialData: [],
-    },
-
-    {
-      queryKey: ['users', 'me'],
-      async queryFn() {
-        const {
-          data: {
-            data: { roles },
-          },
-        } = await get('/admin/users/me');
-
-        return roles;
-      },
-    },
-  ]);
-
-  // Display the guided tour conditionally for super admins in development mode
-  React.useEffect(() => {
-    if (userRoles) {
-      const isUserSuperAdmin = userRoles.find(({ code }) => code === 'strapi-super-admin');
-
-      if (isUserSuperAdmin && appInfos?.currentEnvironment === 'development') {
-        setGuidedTourVisibility(true);
-      }
-    }
-  }, [userRoles, appInfos, setGuidedTourVisibility]);
-
-  // Create a hash of the users email adress and use it as ID for tracking
-  React.useEffect(() => {
-    const generateUserId = async (userInfo) => {
-      const userId = await hashAdminUserEmail(userInfo);
-      setUserId(userId);
-    };
-
-    if (userInfo) {
-      generateUserId(userInfo);
-    }
-  }, [userInfo]);
-
-  /**
-   *
-   * I have spent some time trying to understand what is happening here, and wanted to
-   * leave that knowledge for my future me:
-   *
-   * `initializer` is an undocumented property of the `registerPlugin` API. At the time
-   * of writing it seems only to be used by the i18n plugin.
-   *
-   * How does it work?
-   *
-   * Every plugin that has an `initializer` component defined, receives the
-   * `setPlugin` function as a component prop. In the case of i18n the plugin fetches locales
-   * first and calls `setPlugin` with `pluginId` once they are loaded, which then triggers the
-   * reducer of the admin app defined above.
-   *
-   * Once all plugins are set to `isReady: true` the app renders.
-   *
-   * This API is used to block rendering of the admin app. We should remove that in v5 completely
-   * and make sure plugins can inject data into the global store before they are initialized, to avoid
-   * having a new prop-callback based communication channel between plugins and the core admin app.
-   *
-   */
-
-  const hasApluginNotReady = Object.values(plugins).some((plugin) => plugin.isReady === false);
-
-  if (
-    !userDisplayName ||
-    !userId ||
-    isLoadingAppInfos ||
-    isLoadingPermissions ||
-    hasApluginNotReady
-  ) {
-    const initializers = Object.keys(plugins).reduce((acc, current) => {
-      const InitializerComponent = plugins[current].initializer;
-
-      if (InitializerComponent) {
-        const key = plugins[current].pluginId;
-
-        acc.push(
-          <InitializerComponent
-            key={key}
-            setPlugin={(pluginId) => {
-              setPlugins((prev) => ({
-                ...prev,
-                [pluginId]: {
-                  ...prev[pluginId],
-                  isReady: true,
-                },
-              }));
-            }}
-          />
-        );
-      }
-
-      return acc;
-    }, []);
-
-    return (
-      <>
-        {initializers}
-        <LoadingIndicatorPage />
-      </>
-    );
-  }
-
-  return (
-    <AppInfoProvider
-      {...appInfos}
-      userId={userId}
-      latestStrapiReleaseTag={tagName}
-      // TODO: setUserDisplayName should not exist and be removed, as it is only used
-      // to update the displayName immediately, in case a user updates their profile.
-      // This information should be derived from the state.
-      setUserDisplayName={setUserDisplayName}
-      shouldUpdateStrapi={checkLatestStrapiVersion(strapiVersion, tagName)}
-      userDisplayName={userDisplayName}
-    >
-      <RBACProvider permissions={permissions} refetchPermissions={refetch}>
-        <Admin />
-      </RBACProvider>
-    </AppInfoProvider>
-  );
-};

package/admin/src/content-manager/components/AttributeFilter/Filters.js

@@ -1,58 +0,0 @@
-import React, { useRef, useState } from 'react';
-
-import { Box, Button } from '@strapi/design-system';
-import { FilterListURLQuery, FilterPopoverURLQuery, useTracking } from '@strapi/helper-plugin';
-import { Filter } from '@strapi/icons';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-const Filters = ({ displayedFilters }) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const { formatMessage } = useIntl();
-  const buttonRef = useRef();
-  const { trackUsage } = useTracking();
-
-  const handleToggle = () => {
-    if (!isVisible) {
-      trackUsage('willFilterEntries');
-    }
-    setIsVisible((prev) => !prev);
-  };
-
-  return (
-    <>
-      <Box paddingTop={1} paddingBottom={1}>
-        <Button
-          variant="tertiary"
-          ref={buttonRef}
-          startIcon={<Filter />}
-          onClick={handleToggle}
-          size="S"
-        >
-          {formatMessage({ id: 'app.utils.filters', defaultMessage: 'Filters' })}
-        </Button>
-        {isVisible && (
-          <FilterPopoverURLQuery
-            displayedFilters={displayedFilters}
-            isVisible={isVisible}
-            onToggle={handleToggle}
-            source={buttonRef}
-          />
-        )}
-      </Box>
-      <FilterListURLQuery filtersSchema={displayedFilters} />
-    </>
-  );
-};
-
-Filters.propTypes = {
-  displayedFilters: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      metadatas: PropTypes.shape({ label: PropTypes.string }),
-      fieldSchema: PropTypes.shape({ type: PropTypes.string }),
-    })
-  ).isRequired,
-};
-
-export default Filters;

package/admin/src/content-manager/components/AttributeFilter/hooks/useAllowedAttributes.js

@@ -1,42 +0,0 @@
-import { findMatchingPermissions, useRBACProvider } from '@strapi/helper-plugin';
-import get from 'lodash/get';
-
-const NOT_ALLOWED_FILTERS = ['json', 'component', 'media', 'richtext', 'dynamiczone', 'password'];
-const TIMESTAMPS = ['createdAt', 'updatedAt'];
-
-const useAllowedAttributes = (contentType, slug) => {
-  const { allPermissions } = useRBACProvider();
-
-  const readPermissionsForSlug = findMatchingPermissions(allPermissions, [
-    {
-      action: 'plugin::content-manager.explorer.read',
-      subject: slug,
-    },
-  ]);
-
-  const readPermissionForAttr = get(readPermissionsForSlug, ['0', 'properties', 'fields'], []);
-  const attributesArray = Object.keys(get(contentType, ['attributes']), {});
-  const allowedAttributes = attributesArray
-    .filter((attr) => {
-      const current = get(contentType, ['attributes', attr], {});
-
-      if (!current.type) {
-        return false;
-      }
-
-      if (NOT_ALLOWED_FILTERS.includes(current.type)) {
-        return false;
-      }
-
-      if (!readPermissionForAttr.includes(attr) && attr !== 'id' && !TIMESTAMPS.includes(attr)) {
-        return false;
-      }
-
-      return true;
-    })
-    .sort();
-
-  return allowedAttributes;
-};
-
-export default useAllowedAttributes;