Update deps 3 (#5624)

* optimize code

* update deps

* optimize code

* optimize code

* optimize code

* optimize code

* repair code bug

.gitignore

@@ -51,7 +51,7 @@ deps
 seahub/thumbnail/thumb/*
 
 .virtualenv
-.env
+# .env
 .dumbjump
 .projectile
 .pytest_cache/

frontend/.env

@@ -0,0 +1,3 @@
+HOST = '0.0.0.0'
+PORT = '3000'
+PUBLIC_PATH = '/assets/bundles/'

frontend/config/jest/babelTransform.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const babelJest = require('babel-jest').default;
+
+const hasJsxRuntime = (() => {
+  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+    return false;
+  }
+
+  try {
+    require.resolve('react/jsx-runtime');
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();
+
+module.exports = babelJest.createTransformer({
+  presets: [
+    [
+      require.resolve('babel-preset-react-app'),
+      {
+        runtime: hasJsxRuntime ? 'automatic' : 'classic',
+      },
+    ],
+  ],
+  babelrc: false,
+  configFile: false,
+});

frontend/config/paths.js

@@ -15,11 +15,18 @@ const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
 // single-page apps that may serve index.html for nested URLs like /todos/42.
 // We can't use a relative path in HTML because we don't want to load something
 // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
-const publicUrlOrPath = getPublicUrlOrPath(
+// const publicUrlOrPath = getPublicUrlOrPath(
-  process.env.NODE_ENV === 'development',
+//   process.env.NODE_ENV === 'development',
-  require(resolveApp('package.json')).homepage,
+//   require(resolveApp('package.json')).homepage,
-  process.env.PUBLIC_URL
+//   process.env.PUBLIC_URL
-);
+// );
+
+const HOST = process.env.HOST || '0.0.0.0';
+const PORT = process.env.PORT || '3000';
+const publicPath = process.env.PUBLIC_PATH || '/assets/bundles/';
+const publicUrlOrPath = `http://${HOST}:${PORT}${publicPath}`;
+
+const buildPath = process.env.BUILD_PATH || 'build';
 
 const moduleFileExtensions = [
   'web.mjs',
@@ -52,7 +59,7 @@ const resolveModule = (resolveFn, filePath) => {
 module.exports = {
   dotenv: resolveApp('.env'),
   appPath: resolveApp('.'),
-  appBuild: resolveApp('build/frontend'),
+  appBuild: resolveApp('build/frontend'), // seafile custom defined
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
@@ -64,6 +71,8 @@ module.exports = {
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
+  appWebpackCache: resolveApp('node_modules/.cache'),
+  appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
   swSrc: resolveModule(resolveApp, 'src/service-worker'),
   publicUrlOrPath,
 };

frontend/config/server.js

@@ -1,35 +1,54 @@
 'use strict';
 // https://github.com/webpack/webpack-dev-server/blob/master/examples/api/simple/server.js
+const dotenv = require('dotenv');
+
+dotenv.config();
 
 process.env.NODE_ENV = 'development';
 process.env.BABEL_ENV = 'development';
 
-var Webpack = require('webpack')
+const Webpack = require('webpack')
-var WebpackDevServer = require('webpack-dev-server')
+const WebpackDevServer = require('webpack-dev-server')
-var configFactory = require('./webpack.config')
+const ignoredFiles = require('react-dev-utils/ignoredFiles');
-var config = configFactory('development');
+const configFactory = require('./webpack.config')
+const paths = require('./paths');
+const getHttpsConfig = require('./getHttpsConfig');
 
-const compiler = Webpack(config);
+const HOST = process.env.HOST || '0.0.0.0';
-const devServerOptions = Object.assign({}, config.devServer, {
+const PORT = process.env.PORT || '3000';
-  stats: {
+const publicPath = process.env.PUBLIC_PATH || '/assets/bundles/';
-    colors: true
+
-  },
+const devServerOptions = {
+  allowedHosts: 'all',
   hot: true,
-  // Use 'ws' instead of 'sockjs-node' on server since we're using native
+  static: {
-  // websockets in `webpackHotDevClient`.
+    directory: paths.appBuild,
-  transportMode: 'ws',
+    publicPath: publicPath,
-  // Prevent a WS client from getting injected as we're already including
+    watch: {
-  // `webpackHotDevClient`.
+      ignored: ignoredFiles(paths.appSrc),
-  injectClient: false,
+    },
-});
+  },
+  client: {
+    overlay: false,
+  },
+  headers: {
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': '*',
+    'Access-Control-Allow-Headers': '*',
+  },
+  // Enable gzip compression of generated files.
+  compress: true,
+  https: getHttpsConfig(),
+  host: HOST,
+  port: PORT,
+};
 
 console.log('Dev server options:', devServerOptions);
 
-const server = new WebpackDevServer(compiler, devServerOptions);
+const config = configFactory('development');
-server.listen(3000, '0.0.0.0', function (err, result) {
+const compiler = Webpack(config);
-  if (err) {
+const server = new WebpackDevServer(devServerOptions, compiler);
-    console.log(err)
-  }
 
-  console.log('Listening at 0.0.0.0:3000')
+server.startCallback(() => {
-})
+  console.log(`Listening at http://${HOST}:${PORT}${publicPath}`);
+});

frontend/config/webpack.config.js

@@ -4,16 +4,15 @@ const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const resolve = require('resolve');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
-const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const ESLintPlugin = require('eslint-webpack-plugin');
@@ -22,28 +21,40 @@ const paths = require('./paths');
 const modules = require('./modules');
 const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
+
+const ForkTsCheckerWebpackPlugin =
+  process.env.TSC_COMPILE_ON_ERROR === 'true'
+    ? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
+    : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
-const postcssNormalize = require('postcss-normalize');
+const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
 const getEntries = require('./webpack.entry');
 
-const appPackageJson = require(paths.appPackageJson);
-
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 
-const webpackDevClientEntry = require.resolve(
+const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');
-  'react-dev-utils/webpackHotDevClient'
+const reactRefreshWebpackPluginRuntimeEntry = require.resolve(
+  '@pmmmwh/react-refresh-webpack-plugin'
 );
-const reactRefreshOverlayEntry = require.resolve(
+const babelRuntimeEntry = require.resolve('babel-preset-react-app');
-  'react-dev-utils/refreshOverlayInterop'
+const babelRuntimeEntryHelpers = require.resolve(
+  '@babel/runtime/helpers/esm/assertThisInitialized',
+  { paths: [babelRuntimeEntry] }
 );
+const babelRuntimeRegenerator = require.resolve('@babel/runtime/regenerator', {
+  paths: [babelRuntimeEntry],
+});
 
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
 const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 
+const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
+const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
+
 const imageInlineSizeLimit = parseInt(
   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
 );
@@ -51,6 +62,11 @@ const imageInlineSizeLimit = parseInt(
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
 
+// Check if Tailwind config exists
+const useTailwind = fs.existsSync(
+  path.join(paths.appPath, 'tailwind.config.js')
+);
+
 // Get the path to the uncompiled service worker (if it exists).
 const swSrc = paths.swSrc;
 
@@ -100,7 +116,6 @@ module.exports = function (webpackEnv) {
         loader: MiniCssExtractPlugin.loader,
         // css is located in `static/css`, use '../../' to locate index.html folder
         // in production `paths.publicUrlOrPath` can be a relative path
-        //! important
         options: { publicPath: '../../' }
       },
       {
@@ -113,22 +128,42 @@ module.exports = function (webpackEnv) {
         // package.json
         loader: require.resolve('postcss-loader'),
         options: {
-          // Necessary for external CSS imports to work
+          postcssOptions: {
-          // https://github.com/facebook/create-react-app/issues/2677
+            // Necessary for external CSS imports to work
-          ident: 'postcss',
+            // https://github.com/facebook/create-react-app/issues/2677
-          plugins: () => [
+            ident: 'postcss',
-            require('postcss-flexbugs-fixes'),
+            config: false,
-            require('postcss-preset-env')({
+            plugins: !useTailwind
-              autoprefixer: {
+              ? [
-                flexbox: 'no-2009',
+                  'postcss-flexbugs-fixes',
-              },
+                  [
-              stage: 3,
+                    'postcss-preset-env',
-            }),
+                    {
-            // Adds PostCSS Normalize as the reset css with default options,
+                      autoprefixer: {
-            // so that it honors browserslist config in package.json
+                        flexbox: 'no-2009',
-            // which in turn let's users customize the target behavior as per their needs.
+                      },
-            postcssNormalize(),
+                      stage: 3,
-          ],
+                    },
+                  ],
+                  // Adds PostCSS Normalize as the reset css with default options,
+                  // so that it honors browserslist config in package.json
+                  // which in turn let's users customize the target behavior as per their needs.
+                  'postcss-normalize',
+                ]
+              : [
+                  'tailwindcss',
+                  'postcss-flexbugs-fixes',
+                  [
+                    'postcss-preset-env',
+                    {
+                      autoprefixer: {
+                        flexbox: 'no-2009',
+                      },
+                      stage: 3,
+                    },
+                  ],
+                ],
+          },
           sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
         },
       },
@@ -153,47 +188,10 @@ module.exports = function (webpackEnv) {
     return loaders;
   };
 
-  const getOutput = (isEnvDevelopment) => {
-    let output = {
-      // The build folder.
-      path: isEnvProduction ? paths.appBuild : undefined,
-      // Add /* filename */ comments to generated require()s in the output.
-      pathinfo: isEnvDevelopment,
-      // There will be one main bundle, and one file per asynchronous chunk.
-      // In development, it does not produce real files.
-      filename: isEnvProduction
-        ? 'static/js/[name].js'
-        : isEnvDevelopment && 'static/js/[name].bundle.js',
-      // TODO: remove this when upgrading to webpack 5
-      futureEmitAssets: true,
-      // There are also additional JS chunk files if you use code splitting.
-      chunkFilename: 'static/js/[name].chunk.js',
-      // Point sourcemap entries to original disk location (format as URL on Windows)
-      devtoolModuleFilenameTemplate: isEnvProduction
-        ? info =>
-          path
-            .relative(paths.appSrc, info.absoluteResourcePath)
-            .replace(/\\/g, '/')
-        : isEnvDevelopment &&
-          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
-      // Prevents conflicts when multiple webpack runtimes (from different apps)
-      // are used on the same page.
-      jsonpFunction: `webpackJsonp${appPackageJson.name}`,
-      // this defaults to 'window', but by setting it to 'this' then
-      // module chunks which are built will work in web workers as well.
-      globalObject: 'this',
-    };
-    if (isEnvDevelopment) {
-      // webpack uses `publicPath` to determine where the app is being served from.
-      // It requires a trailing slash, or the file assets will get an incorrect path.
-      // We inferred the "public path" (such as / or /my-project) from homepage.
-      output = Object.assign({}, output, {publicPath: 'http://127.0.0.1:3000/assets/bundles/'});
-    }
-    return output;
-  };
-
-
   return {
+    target: ['browserslist'],
+    // Webpack noise constrained to errors and warnings
+    stats: 'errors-warnings',
     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
     // Stop compilation early in production
     bail: isEnvProduction,
@@ -204,14 +202,56 @@ module.exports = function (webpackEnv) {
       : isEnvDevelopment && 'cheap-module-source-map',
     // These are the "entry points" to our application.
     // This means they will be the "root" imports that are included in JS bundle.
-    entry: getEntries(isEnvDevelopment),
+    entry: getEntries(),
-    output: getOutput(isEnvDevelopment),
+    output: {
+      // The build folder.
+      path: paths.appBuild,
+      // Add /* filename */ comments to generated require()s in the output.
+      pathinfo: isEnvDevelopment,
+      // There will be one main bundle, and one file per asynchronous chunk.
+      // In development, it does not produce real files.
+      filename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].js'
+        : isEnvDevelopment && 'static/js/[name].bundle.js',
+      // There are also additional JS chunk files if you use code splitting.
+      chunkFilename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].chunk.js'
+        : isEnvDevelopment && 'static/js/[name].chunk.js',
+      assetModuleFilename: 'static/media/[name].[hash][ext]',
+      // webpack uses `publicPath` to determine where the app is being served from.
+      // It requires a trailing slash, or the file assets will get an incorrect path.
+      // We inferred the "public path" (such as / or /my-project) from homepage.
+      ...(isEnvDevelopment && {publicPath: paths.publicUrlOrPath}), // The deployment environment does not require this parameter
+      // Point sourcemap entries to original disk location (format as URL on Windows)
+      devtoolModuleFilenameTemplate: isEnvProduction
+        ? info =>
+          path
+            .relative(paths.appSrc, info.absoluteResourcePath)
+            .replace(/\\/g, '/')
+        : isEnvDevelopment &&
+          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+    },
+    cache: {
+      type: 'filesystem',
+      version: createEnvironmentHash(env.raw),
+      cacheDirectory: paths.appWebpackCache,
+      store: 'pack',
+      buildDependencies: {
+        defaultWebpack: ['webpack/lib/'],
+        config: [__filename],
+        tsconfig: [paths.appTsConfig, paths.appJsConfig].filter(f =>
+          fs.existsSync(f)
+        ),
+      },
+    },
+    infrastructureLogging: {
+      level: 'none',
+    },
     optimization: {
       minimize: isEnvProduction,
       minimizer: [
         // This is only used in production mode
         new TerserPlugin({
-          extractComments: false,
           terserOptions: {
             parse: {
               // We want terser to parse ecma 8 code. However, we don't want it
@@ -249,27 +289,9 @@ module.exports = function (webpackEnv) {
               ascii_only: true,
             },
           },
-          sourceMap: shouldUseSourceMap,
         }),
         // This is only used in production mode
-        new OptimizeCSSAssetsPlugin({
+        new CssMinimizerPlugin(),
-          cssProcessorOptions: {
-            parser: safePostCssParser,
-            map: shouldUseSourceMap
-              ? {
-                // `inline: false` forces the sourcemap to be output into a
-                // separate file
-                inline: false,
-                // `annotation: true` appends the sourceMappingURL to the end of
-                // the css file, helping the browser find the sourcemap
-                annotation: true,
-              }
-              : false,
-          },
-          cssProcessorPluginOptions: {
-            preset: ['default', { minifyFontValues: { removeQuotes: false } }],
-          },
-        }),
       ],
       // Automatically split vendor and commons
       // https://twitter.com/wSokra/status/969633336732905474
@@ -277,10 +299,9 @@ module.exports = function (webpackEnv) {
       splitChunks: {
         chunks: 'all',
         automaticNameDelimiter: '-',
-        name: true,
         cacheGroups: {
-          vendors: false,
           default: false,
+          defaultVendors: false,
           commons: {
             name: 'commons',
             minChunks: 3,
@@ -325,9 +346,6 @@ module.exports = function (webpackEnv) {
         ...(modules.webpackAliases || {}),
       },
       plugins: [
-        // Adds support for installing with Plug'n'Play, leading to faster installs and adding
-        // guards against forgotten dependencies and such.
-        PnpWebpackPlugin,
         // Prevents users from importing files from outside of src/ (or node_modules/).
         // This often causes confusion because we only process files within src/ with babel.
         // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
@@ -335,22 +353,24 @@ module.exports = function (webpackEnv) {
         // Make sure your source files are compiled, as they will not be processed in any way.
         new ModuleScopePlugin(paths.appSrc, [
           paths.appPackageJson,
-          reactRefreshOverlayEntry,
+          reactRefreshRuntimeEntry,
+          reactRefreshWebpackPluginRuntimeEntry,
+          babelRuntimeEntry,
+          babelRuntimeEntryHelpers,
+          babelRuntimeRegenerator,
         ]),
       ],
     },
-    resolveLoader: {
-      plugins: [
-        // Also related to Plug'n'Play, but this time it tells webpack to load its loaders
-        // from the current package.
-        PnpWebpackPlugin.moduleLoader(module),
-      ],
-    },
     module: {
       strictExportPresence: true,
       rules: [
-        // Disable require.ensure as it's not a standard language feature.
+        // Handle node_modules packages that contain sourcemaps
-        { parser: { requireEnsure: false } },
+        shouldUseSourceMap && {
+          enforce: 'pre',
+          exclude: /@babel(?:\/|\\{1,2})runtime/,
+          test: /\.(js|mjs|jsx|ts|tsx|css)$/,
+          loader: require.resolve('source-map-loader'),
+        },
         {
           // "oneOf" will traverse all following loaders until one will
           // match the requirements. When no loader matches it will fall
@@ -360,11 +380,12 @@ module.exports = function (webpackEnv) {
             // https://github.com/jshttp/mime-db
             {
               test: [/\.avif$/],
-              loader: require.resolve('url-loader'),
+              type: 'asset',
-              options: {
+              mimetype: 'image/avif',
-                limit: imageInlineSizeLimit,
+              parser: {
-                mimetype: 'image/avif',
+                dataUrlCondition: {
-                name: 'static/media/[name].[hash:8].[ext]',
+                  maxSize: imageInlineSizeLimit,
+                },
               },
             },
             // "url" loader works like "file" loader except that it embeds assets
@@ -372,10 +393,37 @@ module.exports = function (webpackEnv) {
             // A missing `test` is equivalent to a match.
             {
               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-              loader: require.resolve('url-loader'),
+              type: 'asset',
-              options: {
+              parser: {
-                limit: imageInlineSizeLimit,
+                dataUrlCondition: {
-                name: 'static/media/[name].[hash:8].[ext]',
+                  maxSize: imageInlineSizeLimit,
+                },
+              },
+            },
+            {
+              test: /\.svg$/,
+              use: [
+                {
+                  loader: require.resolve('@svgr/webpack'),
+                  options: {
+                    prettier: false,
+                    svgo: false,
+                    svgoConfig: {
+                      plugins: [{ removeViewBox: false }],
+                    },
+                    titleProp: true,
+                    ref: true,
+                  },
+                },
+                {
+                  loader: require.resolve('file-loader'),
+                  options: {
+                    name: 'static/media/[name].[hash].[ext]',
+                  },
+                },
+              ],
+              issuer: {
+                and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
               },
             },
             // Process application JS with Babel.
@@ -396,20 +444,8 @@ module.exports = function (webpackEnv) {
                     },
                   ],
                 ],
-
+                
                 plugins: [
-                  [
-                    require.resolve('babel-plugin-named-asset-import'),
-                    {
-                      loaderMap: {
-                        svg: {
-                          ReactComponent:
-                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
-                        },
-                      },
-                    },
-                  ],
-                  //! error
                   // isEnvDevelopment &&
                   //   shouldUseReactRefresh &&
                   //   require.resolve('react-refresh/babel'),
@@ -442,7 +478,7 @@ module.exports = function (webpackEnv) {
                 cacheDirectory: true,
                 // See #6846 for context on why cacheCompression is disabled
                 cacheCompression: false,
-
+                
                 // Babel sourcemaps are needed for debugging into node_modules
                 // code.  Without the options below, debuggers like VSCode
                 // show incorrect code and set breakpoints on the wrong lines.
@@ -465,6 +501,9 @@ module.exports = function (webpackEnv) {
                 sourceMap: isEnvProduction
                   ? shouldUseSourceMap
                   : isEnvDevelopment,
+                modules: {
+                  mode: 'icss',
+                },
               }),
               // Don't consider CSS imports dead code even if the
               // containing package claims to have no side effects.
@@ -482,6 +521,7 @@ module.exports = function (webpackEnv) {
                   ? shouldUseSourceMap
                   : isEnvDevelopment,
                 modules: {
+                  mode: 'local',
                   getLocalIdent: getCSSModuleLocalIdent,
                 },
               }),
@@ -498,6 +538,9 @@ module.exports = function (webpackEnv) {
                   sourceMap: isEnvProduction
                     ? shouldUseSourceMap
                     : isEnvDevelopment,
+                  modules: {
+                    mode: 'icss',
+                  },
                 },
                 'sass-loader'
               ),
@@ -518,12 +561,14 @@ module.exports = function (webpackEnv) {
                     ? shouldUseSourceMap
                     : isEnvDevelopment,
                   modules: {
+                    mode: 'local',
                     getLocalIdent: getCSSModuleLocalIdent,
                   },
                 },
                 'sass-loader'
               ),
             },
+            // Handle svg icons
             {
               test: /\.svg$/,
               use: [
@@ -548,23 +593,26 @@ module.exports = function (webpackEnv) {
             // This loader doesn't use a "test" so it will catch all modules
             // that fall through the other loaders.
             {
-              loader: require.resolve('file-loader'),
               // Exclude `js` files to keep "css" loader working as it injects
               // its runtime that would otherwise be processed through "file" loader.
               // Also exclude `html` and `json` extensions so they get processed
               // by webpacks internal loaders.
-              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+              exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-              options: {
+              type: 'asset/resource',
-                name: 'static/media/[name].[hash:8].[ext]',
-              },
             },
             // ** STOP ** Are you adding a new loader?
             // Make sure to add the new loader(s) before the "file" loader.
           ],
         },
-      ],
+      ].filter(Boolean),
     },
     plugins: [
+      new webpack.ProvidePlugin({
+        process: "process/browser.js",
+      }),
+      new NodePolyfillPlugin({
+        excludeAliases: ['console'],
+      }),
       // Generates an `index.html` file with the <script> injected.
       // new HtmlWebpackPlugin(
       //   Object.assign(
@@ -614,25 +662,12 @@ module.exports = function (webpackEnv) {
       new webpack.DefinePlugin(env.stringified),
       // This is necessary to emit hot updates (CSS and Fast Refresh):
       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
-      isEnvDevelopment && new webpack.DefinePlugin({
-        'process.env': Object.assign({
-          SOCKETIO_HOST: JSON.stringify('https://dev.seafile.com'),
-        }, env.stringified['process.env'])
-      }),
       // Experimental hot reloading for React .
-      // https://github.com/facebook/react/tree/master/packages/react-refresh
+      // https://github.com/facebook/react/tree/main/packages/react-refresh
       // isEnvDevelopment &&
       //   shouldUseReactRefresh &&
       //   new ReactRefreshWebpackPlugin({
-      //     overlay: {
+      //     overlay: false,
-      //       entry: webpackDevClientEntry,
-      //       // The expected exports are slightly different from what the overlay exports,
-      //       // so an interop is included here to enable feedback on module-level errors.
-      //       module: reactRefreshOverlayEntry,
-      //       // Since we ship a custom dev client and overlay integration,
-      //       // the bundled socket handling logic can be eliminated.
-      //       sockIntegration: false,
-      //     },
       //   }),
       // Watcher doesn't work well if you mistype casing in a path so we use
       // a plugin that prints an error when you attempt to do this.
@@ -644,7 +679,7 @@ module.exports = function (webpackEnv) {
           // both options are optional
           filename: 'static/css/[name].css',
           chunkFilename: 'static/css/[name].chunk.css',
-          ignoreOrder: true
+          ignoreOrder: true,
         }),
       // Generate an asset manifest file with the following content:
       // - "files" key: Mapping of all asset filenames to their corresponding
@@ -652,7 +687,7 @@ module.exports = function (webpackEnv) {
       //   `index.html`
       // - "entrypoints" key: Array of files which are included in `index.html`,
       //   can be used to reconstruct the HTML if necessary
-      // new ManifestPlugin({
+      // new WebpackManifestPlugin({
       //   fileName: 'asset-manifest.json',
       //   publicPath: paths.publicUrlOrPath,
       //   generate: (seed, files, entrypoints) => {
@@ -675,8 +710,10 @@ module.exports = function (webpackEnv) {
       // solution that requires the user to opt into importing specific locales.
       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
       // You can remove this if you don't use Moment.js:
-      // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      new webpack.IgnorePlugin({
-
+        resourceRegExp: /^\.\/locale$/,
+        contextRegExp: /moment$/,
+      }),
       new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn|zh-tw|en|cs|nl_NL|fi|fr|de|hu|it|ko|lv|pl|ru|es|es_MX|sv/),
       // Generate a service worker script that will precache, and keep up to date,
       // the HTML & assets that are part of the webpack build.
@@ -691,53 +728,84 @@ module.exports = function (webpackEnv) {
       //     // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
       //     maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
       //   }),
-      isEnvDevelopment && new ESLintPlugin({
+      // TypeScript type checking
-        // Plugin options
+      // useTypeScript &&
-        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
+      //   new ForkTsCheckerWebpackPlugin({
-        formatter: require.resolve('react-dev-utils/eslintFormatter'),
+      //     async: isEnvDevelopment,
-        eslintPath: require.resolve('eslint'),
+      //     typescript: {
-        context: paths.appSrc,
+      //       typescriptPath: resolve.sync('typescript', {
-        cache: true,
+      //         basedir: paths.appNodeModules,
-        // ESLint class options
+      //       }),
-        cwd: paths.appPath,
+      //       configOverwrite: {
-        resolvePluginsRelativeTo: __dirname,
+      //         compilerOptions: {
-        baseConfig: {
+      //           sourceMap: isEnvProduction
-          extends: [require.resolve('eslint-config-react-app/base')],
+      //             ? shouldUseSourceMap
-          rules: {
+      //             : isEnvDevelopment,
-            ...(!hasJsxRuntime && {
+      //           skipLibCheck: true,
-              'react/react-in-jsx-scope': 'error',
+      //           inlineSourceMap: false,
-            }),
+      //           declarationMap: false,
+      //           noEmit: true,
+      //           incremental: true,
+      //           tsBuildInfoFile: paths.appTsBuildInfoFile,
+      //         },
+      //       },
+      //       context: paths.appPath,
+      //       diagnosticOptions: {
+      //         syntactic: true,
+      //       },
+      //       mode: 'write-references',
+      //       // profile: true,
+      //     },
+      //     issue: {
+      //       // This one is specifically to match during CI tests,
+      //       // as micromatch doesn't match
+      //       // '../cra-template-typescript/template/src/App.tsx'
+      //       // otherwise.
+      //       include: [
+      //         { file: '../**/src/**/*.{ts,tsx}' },
+      //         { file: '**/src/**/*.{ts,tsx}' },
+      //       ],
+      //       exclude: [
+      //         { file: '**/src/**/__tests__/**' },
+      //         { file: '**/src/**/?(*.){spec|test}.*' },
+      //         { file: '**/src/setupProxy.*' },
+      //         { file: '**/src/setupTests.*' },
+      //       ],
+      //     },
+      //     logger: {
+      //       infrastructure: 'silent',
+      //     },
+      //   }),
+      !disableESLintPlugin &&
+        new ESLintPlugin({
+          // Plugin options
+          extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
+          formatter: require.resolve('react-dev-utils/eslintFormatter'),
+          eslintPath: require.resolve('eslint'),
+          failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
+          context: paths.appSrc,
+          cache: true,
+          cacheLocation: path.resolve(
+            paths.appNodeModules,
+            '.cache/.eslintcache'
+          ),
+          // ESLint class options
+          cwd: paths.appPath,
+          resolvePluginsRelativeTo: __dirname,
+          baseConfig: {
+            extends: [require.resolve('eslint-config-react-app/base')],
+            rules: {
+              ...(!hasJsxRuntime && {
+                'react/react-in-jsx-scope': 'error',
+              }),
+            },
           },
-        },
+        }),
-      }),
+      // integrated into python
       new webpackBundleTracker({filename: isEnvProduction ? './webpack-stats.pro.json' : './webpack-stats.dev.json'}),
     ].filter(Boolean),
-    // Some libraries import Node modules but don't use them in the browser.
-    // Tell webpack to provide empty mocks for them so importing them works.
-    node: {
-      module: 'empty',
-      dgram: 'empty',
-      dns: 'mock',
-      fs: 'empty',
-      http2: 'empty',
-      net: 'empty',
-      tls: 'empty',
-      child_process: 'empty',
-    },
     // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter
     performance: false,
-    devServer: {
-      publicPath: getOutput(isEnvDevelopment).publicPath,
-      hot: true,
-      contentBase: '../assets',
-      historyApiFallback: true,
-      headers: {
-        'Access-Control-Allow-Origin': '*',
-        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
-        'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
-      }
-    },
-
   };
 };

frontend/config/webpack.entry.js

@@ -44,7 +44,6 @@ const getEntries = (isEnvDevelopment) => {
   let entries = {};
   Object.keys(entryFiles).forEach(key => {
     let entry = [];
-    entry.push(require.resolve('./polyfills'));
     if (isEnvDevelopment) {
       entry.push(require.resolve('react-dev-utils/webpackHotDevClient'));
     }

frontend/config/webpack/persistentCache/createEnvironmentHash.js

@@ -0,0 +1,9 @@
+'use strict';
+const { createHash } = require('crypto');
+
+module.exports = env => {
+  const hash = createHash('md5');
+  hash.update(JSON.stringify(env));
+
+  return hash.digest('hex');
+};

frontend/config/webpackDevServer.config.js

@@ -1,7 +1,6 @@
 'use strict';
 
 const fs = require('fs');
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 const ignoredFiles = require('react-dev-utils/ignoredFiles');
@@ -11,10 +10,12 @@ const getHttpsConfig = require('./getHttpsConfig');
 
 const host = process.env.HOST || '0.0.0.0';
 const sockHost = process.env.WDS_SOCKET_HOST;
-const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
+const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
 const sockPort = process.env.WDS_SOCKET_PORT;
 
 module.exports = function (proxy, allowedHost) {
+  const disableFirewall =
+    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
   return {
     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
     // websites from potentially accessing local content through DNS rebinding:
@@ -32,99 +33,95 @@ module.exports = function (proxy, allowedHost) {
     // So we will disable the host check normally, but enable it if you have
     // specified the `proxy` setting. Finally, we let you override it if you
     // really know what you're doing with a special environment variable.
-    disableHostCheck:
+    // Note: ["localhost", ".localhost"] will support subdomains - but we might
-      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+    // want to allow setting the allowedHosts manually for more complex setups
+    allowedHosts: disableFirewall ? 'all' : [allowedHost],
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': '*',
+      'Access-Control-Allow-Headers': '*',
+    },
     // Enable gzip compression of generated files.
     compress: true,
-    // Silence WebpackDevServer's own logs since they're generally not useful.
+    static: {
-    // It will still show compile warnings and errors with this setting.
+      // By default WebpackDevServer serves physical files from current directory
-    clientLogLevel: 'none',
+      // in addition to all the virtual build products that it serves from memory.
-    // By default WebpackDevServer serves physical files from current directory
+      // This is confusing because those files won’t automatically be available in
-    // in addition to all the virtual build products that it serves from memory.
+      // production build folder unless we copy them. However, copying the whole
-    // This is confusing because those files won’t automatically be available in
+      // project directory is dangerous because we may expose sensitive files.
-    // production build folder unless we copy them. However, copying the whole
+      // Instead, we establish a convention that only files in `public` directory
-    // project directory is dangerous because we may expose sensitive files.
+      // get served. Our build script will copy `public` into the `build` folder.
-    // Instead, we establish a convention that only files in `public` directory
+      // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-    // get served. Our build script will copy `public` into the `build` folder.
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+      // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-    // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+      // Note that we only recommend to use `public` folder as an escape hatch
-    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+      // for files like `favicon.ico`, `manifest.json`, and libraries that are
-    // Note that we only recommend to use `public` folder as an escape hatch
+      // for some reason broken when imported through webpack. If you just want to
-    // for files like `favicon.ico`, `manifest.json`, and libraries that are
+      // use an image, put it in `src` and `import` it from JavaScript instead.
-    // for some reason broken when imported through webpack. If you just want to
+      directory: paths.appPublic,
-    // use an image, put it in `src` and `import` it from JavaScript instead.
+      publicPath: [paths.publicUrlOrPath],
-    contentBase: paths.appPublic,
+      // By default files from `contentBase` will not trigger a page reload.
-    contentBasePublicPath: paths.publicUrlOrPath,
+      watch: {
-    // By default files from `contentBase` will not trigger a page reload.
+        // Reportedly, this avoids CPU overload on some systems.
-    watchContentBase: true,
+        // https://github.com/facebook/create-react-app/issues/293
-    // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
+        // src/node_modules is not ignored to support absolute imports
-    // for the WebpackDevServer client so it can learn when the files were
+        // https://github.com/facebook/create-react-app/issues/1065
-    // updated. The WebpackDevServer client is included as an entry point
+        ignored: ignoredFiles(paths.appSrc),
-    // in the webpack development configuration. Note that only changes
+      },
-    // to CSS are currently hot reloaded. JS changes will refresh the browser.
-    hot: true,
-    // Use 'ws' instead of 'sockjs-node' on server since we're using native
-    // websockets in `webpackHotDevClient`.
-    transportMode: 'ws',
-    // Prevent a WS client from getting injected as we're already including
-    // `webpackHotDevClient`.
-    injectClient: false,
-    // Enable custom sockjs pathname for websocket connection to hot reloading server.
-    // Enable custom sockjs hostname, pathname and port for websocket connection
-    // to hot reloading server.
-    sockHost,
-    sockPath,
-    sockPort,
-    // It is important to tell WebpackDevServer to use the same "publicPath" path as
-    // we specified in the webpack config. When homepage is '.', default to serving
-    // from the root.
-    // remove last slash so user can land on `/test` instead of `/test/`
-    publicPath: paths.publicUrlOrPath.slice(0, -1),
-    // WebpackDevServer is noisy by default so we emit custom message instead
-    // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
-    quiet: true,
-    // Reportedly, this avoids CPU overload on some systems.
-    // https://github.com/facebook/create-react-app/issues/293
-    // src/node_modules is not ignored to support absolute imports
-    // https://github.com/facebook/create-react-app/issues/1065
-    watchOptions: {
-      ignored: ignoredFiles(paths.appSrc),
     },
+    client: {
+      webSocketURL: {
+        // Enable custom sockjs pathname for websocket connection to hot reloading server.
+        // Enable custom sockjs hostname, pathname and port for websocket connection
+        // to hot reloading server.
+        hostname: sockHost,
+        pathname: sockPath,
+        port: sockPort,
+      },
+      overlay: {
+        errors: true,
+        warnings: false,
+      },
+    },
+    devMiddleware: {
+      // It is important to tell WebpackDevServer to use the same "publicPath" path as
+      // we specified in the webpack config. When homepage is '.', default to serving
+      // from the root.
+      // remove last slash so user can land on `/test` instead of `/test/`
+      publicPath: paths.publicUrlOrPath.slice(0, -1),
+    },
+
     https: getHttpsConfig(),
     host,
-    overlay: false,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
       index: paths.publicUrlOrPath,
     },
-    public: allowedHost,
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
-    before(app, server) {
+    onBeforeSetupMiddleware(devServer) {
-      // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
+      // Keep `evalSourceMapMiddleware`
       // middlewares before `redirectServedPath` otherwise will not have any effect
       // This lets us fetch source contents from webpack for the error overlay
-      app.use(evalSourceMapMiddleware(server));
+      devServer.app.use(evalSourceMapMiddleware(devServer));
-      // This lets us open files from the runtime error overlay.
-      app.use(errorOverlayMiddleware());
 
       if (fs.existsSync(paths.proxySetup)) {
         // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(app);
+        require(paths.proxySetup)(devServer.app);
       }
     },
-    after(app) {
+    onAfterSetupMiddleware(devServer) {
       // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
-      app.use(redirectServedPath(paths.publicUrlOrPath));
+      devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
 
       // This service worker file is effectively a 'no-op' that will reset any
       // previous service worker registered for the same host:port combination.
       // We do this in development to avoid hitting the production cache if
       // it used the same host and port.
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+      devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
     },
   };
 };

frontend/package.json

@@ -38,7 +38,7 @@
     "react-select": "5.7.0",
     "react-transition-group": "4.4.5",
     "reactstrap": "8.9.0",
-    "seafile-js": "0.2.208",
+    "seafile-js": "0.2.209",
     "socket.io-client": "^2.2.0",
     "svg-sprite-loader": "^6.0.11",
     "svgo-loader": "^3.0.1",
@@ -102,67 +102,63 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "7.12.3",
+    "@babel/core": "^7.16.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
-    "@svgr/webpack": "5.4.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@testing-library/jest-dom": "^5.11.4",
+    "@svgr/webpack": "^5.5.0",
+    "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
+    "@testing-library/user-event": "13.5.0",
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
     "babel-eslint": "10.1.0",
-    "babel-jest": "^26.6.0",
+    "babel-jest": "^27.4.2",
-    "babel-loader": "8.1.0",
+    "babel-loader": "^8.2.3",
     "babel-plugin-dynamic-import-node": "2.3.3",
     "babel-plugin-named-asset-import": "^0.3.7",
     "babel-preset-react-app": "^10.0.0",
     "bfj": "^7.0.2",
-    "camelcase": "^6.1.0",
+    "browserslist": "^4.18.1",
-    "case-sensitive-paths-webpack-plugin": "2.3.0",
+    "camelcase": "^6.2.1",
-    "css-loader": "4.3.0",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "dotenv": "8.2.0",
+    "css-loader": "^6.5.1",
-    "dotenv-expand": "5.1.0",
+    "css-minimizer-webpack-plugin": "^3.2.0",
-    "eslint": "^7.11.0",
+    "dotenv": "^10.0.0",
-    "eslint-config-react-app": "^6.0.0",
+    "dotenv-expand": "^5.1.0",
-    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint": "^8.3.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-jest": "^24.1.0",
+    "eslint-webpack-plugin": "^3.1.1",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "file-loader": "^6.2.0",
-    "eslint-plugin-react": "^7.21.5",
+    "fs-extra": "^10.0.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
-    "eslint-plugin-testing-library": "^3.9.2",
+    "identity-obj-proxy": "^3.0.0",
-    "eslint-webpack-plugin": "^2.1.0",
+    "jest": "^27.4.3",
-    "file-loader": "6.1.1",
+    "jest-resolve": "^27.4.2",
-    "fs-extra": "^9.0.1",
+    "jest-watch-typeahead": "^1.0.0",
-    "html-webpack-plugin": "4.5.0",
+    "mini-css-extract-plugin": "^2.4.5",
-    "identity-obj-proxy": "3.0.0",
+    "node-polyfill-webpack-plugin": "2.0.1",
-    "jest": "26.6.0",
+    "postcss": "^8.4.4",
-    "jest-circus": "26.6.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
-    "jest-resolve": "26.6.0",
+    "postcss-loader": "^6.2.1",
-    "jest-watch-typeahead": "0.6.1",
+    "postcss-normalize": "^10.0.1",
-    "mini-css-extract-plugin": "0.11.3",
+    "postcss-preset-env": "^7.0.1",
-    "optimize-css-assets-webpack-plugin": "5.0.4",
+    "prompts": "^2.4.2",
-    "pnp-webpack-plugin": "1.6.4",
+    "react-app-polyfill": "^3.0.0",
-    "postcss-flexbugs-fixes": "4.2.1",
+    "react-dev-utils": "^12.0.1",
-    "postcss-loader": "3.0.0",
+    "react-refresh": "^0.11.0",
-    "postcss-normalize": "8.0.1",
+    "resolve": "^1.20.0",
-    "postcss-preset-env": "6.7.0",
+    "resolve-url-loader": "^4.0.0",
-    "postcss-safe-parser": "5.0.2",
+    "sass-loader": "^12.3.0",
-    "prompts": "2.4.0",
+    "semver": "6.3.1",
-    "react-dev-utils": "12.0.1",
+    "source-map-loader": "^3.0.0",
-    "react-refresh": "^0.8.3",
+    "style-loader": "^3.3.1",
-    "resolve": "1.18.1",
+    "tailwindcss": "^3.0.2",
-    "resolve-url-loader": "^3.1.2",
+    "terser-webpack-plugin": "^5.2.5",
-    "sass-loader": "8.0.2",
-    "semver": "7.3.2",
-    "style-loader": "1.3.0",
-    "terser-webpack-plugin": "4.2.3",
     "ts-pnp": "1.2.0",
     "url-loader": "4.1.1",
-    "web-vitals": "^0.2.4",
+    "web-vitals": "2.1.4",
-    "webpack": "4.44.2",
+    "webpack": "^5.64.4",
     "webpack-bundle-tracker": "1.7.0",
-    "webpack-dev-server": "3.11.0",
+    "webpack-dev-server": "^4.6.0",
-    "webpack-manifest-plugin": "2.2.0"
+    "webpack-manifest-plugin": "^4.0.2",
+    "workbox-webpack-plugin": "^6.4.1"
   }
 }

frontend/src/components/dialog/add-reviewer-dialog.js

@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { seafileAPI } from '../../utils/seafile-api.js';
+import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
-import UserSelect from '../user-select.js';
+import UserSelect from '../user-select';
 import '../../css/add-reviewer-dialog.css';
 
 const propTypes = {

frontend/src/components/dialog/lib-history-setting-dialog.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
 import { gettext, enableRepoHistorySetting } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api.js';
+import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 

frontend/src/components/dialog/lib-old-files-auto-del-dialog.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
 import { gettext } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api.js';
+import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 

frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
 import Select from 'react-select';
 import { gettext, isPro, siteRoot } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api.js';
+import { seafileAPI } from '../../utils/seafile-api';
-import { Utils } from '../../utils/utils.js';
+import { Utils } from '../../utils/utils';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
 import FileChooser from '../file-chooser/file-chooser';
 

frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js

@@ -2,8 +2,8 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext, isPro, siteRoot } from '../../utils/constants';
 import { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
-import { seafileAPI } from '../../utils/seafile-api.js';
+import { seafileAPI } from '../../utils/seafile-api';
-import { Utils } from '../../utils/utils.js';
+import { Utils } from '../../utils/utils';
 import UserSelect from '../user-select';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
 import FileChooser from '../file-chooser/file-chooser';

frontend/src/components/dialog/org-add-member-dialog.js

@@ -5,7 +5,7 @@ import { gettext, orgID } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
-import UserSelect from '../user-select.js';
+import UserSelect from '../user-select';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,

frontend/src/components/dialog/search-file-dialog.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
 import { Utils } from '../../utils/utils';
-import { seafileAPI } from '../../utils/seafile-api.js';
+import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot } from '../../utils/constants';
 
 const propTypes = {

frontend/src/components/dialog/share-to-group.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
 import Select from 'react-select';
 import { gettext, isPro, enableShareToDepartment } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api.js';
+import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import SharePermissionEditor from '../select-editor/share-permission-editor';

frontend/src/components/dialog/share-to-invite-people.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { gettext, siteRoot } from '../../utils/constants';
 import moment from 'moment';
 import { Button, Input } from 'reactstrap';
-import { seafileAPI } from '../../utils/seafile-api.js';
+import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import Loading from '../loading';

frontend/src/components/dialog/share-to-other-server.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { gettext, ocmRemoteServers } from '../../utils/constants';
 import { Input } from 'reactstrap';
 import { Button } from 'reactstrap';
-import { seafileAPI } from '../../utils/seafile-api.js';
+import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import OpIcon from '../op-icon';

frontend/src/components/dialog/share-to-user.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext, isPro } from '../../utils/constants';
 import { Button } from 'reactstrap';
-import { seafileAPI } from '../../utils/seafile-api.js';
+import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import UserSelect from '../user-select';

frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-member-dialog.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
-import UserSelect from '../../user-select.js';
+import UserSelect from '../../user-select';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,

frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-member-dialog.js

@@ -5,7 +5,7 @@ import { gettext, orgID } from '../../../utils/constants';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
-import UserSelect from '../../user-select.js';
+import UserSelect from '../../user-select';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,

frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
-import { seafileAPI } from '../../../utils/seafile-api.js';
+import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
 

frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
 import Select from 'react-select';
 import { isPro, gettext } from '../../../utils/constants';
-import { seafileAPI } from '../../../utils/seafile-api.js';
+import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
 import SharePermissionEditor from '../../select-editor/share-permission-editor';

frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { isPro, gettext, siteRoot } from '../../../utils/constants';
 import { Button } from 'reactstrap';
-import { seafileAPI } from '../../../utils/seafile-api.js';
+import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
 import UserSelect from '../../user-select';

frontend/src/components/dialog/transfer-dialog.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import Select from 'react-select';
 import makeAnimated from 'react-select/animated';
-import { seafileAPI } from '../../utils/seafile-api.js';
+import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, isPro } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';

frontend/src/components/dialog/transfer-group-dialog.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api.js';
+import { seafileAPI } from '../../utils/seafile-api';
 import UserSelect from '../user-select';
 import { Utils } from '../../utils/utils';
 

frontend/src/components/review-list-view/review-comments.js

@@ -4,7 +4,7 @@ import { processor } from '../../utils/seafile-markdown2html';
 import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, draftFilePath, draftRepoID } from '../../utils/constants';
-import { username } from '../../utils/constants.js';
+import { username } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 

frontend/src/components/search/search-by-name.js

@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
-import SearchFileDialog from '../dialog/search-file-dialog.js';
+import SearchFileDialog from '../dialog/search-file-dialog';
 
 import '../../css/top-search-by-name.css';
 

frontend/src/components/user-select.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import AsyncSelect from 'react-select/async';
-import { seafileAPI } from '../utils/seafile-api.js';
+import { seafileAPI } from '../utils/seafile-api';
 import { gettext, enableShowContactEmailWhenSearchUser } from '../utils/constants';
-import { Utils } from '../utils/utils.js';
+import { Utils } from '../utils/utils';
 import toaster from './toast';
 
 import '../css/user-select.css';

frontend/src/draft.js

@@ -11,15 +11,15 @@ import { seafileAPI } from './utils/seafile-api';
 import axios from 'axios';
 import Loading from './components/loading';
 import ReviewComments from './components/review-list-view/review-comments';
-import ReviewCommentDialog from './components/review-list-view/review-comment-dialog.js';
+import ReviewCommentDialog from './components/review-list-view/review-comment-dialog';
 import { Tooltip } from 'reactstrap';
-import AddReviewerDialog from './components/dialog/add-reviewer-dialog.js';
+import AddReviewerDialog from './components/dialog/add-reviewer-dialog';
 import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
 import classnames from 'classnames';
 import HistoryList from './pages/review/history-list';
 import { Range, Editor } from 'slate';
 import ModalPortal from './components/modal-portal';
-import reviewComment from './models/review-comment.js';
+import reviewComment from './models/review-comment';
 
 import './css/layout.css';
 import './css/toolbar.css';

frontend/src/pages/org-admin/index.js

@@ -9,9 +9,9 @@ import OrgStatisticStorage from './statistic/statistic-storage';
 import OrgStatisticTraffic from './statistic/statistic-traffic';
 import OrgStatisticUsers from './statistic/statistic-users';
 import OrgStatisticReport from './statistic/statistic-reports';
-import OrgDesktopDevices from './devices/desktop-devices.js';
+import OrgDesktopDevices from './devices/desktop-devices';
-import OrgMobileDevices from './devices/mobile-devices.js';
+import OrgMobileDevices from './devices/mobile-devices';
-import OrgDevicesErrors from './devices/devices-errors.js';
+import OrgDevicesErrors from './devices/devices-errors';
 import OrgWebSettings from './web-settings/web-settings';
 import OrgUsers from './org-users-users';
 import OrgUsersSearchUsers from './org-users-search-users';

frontend/src/pages/org-admin/org-department-item.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Link } from '@gatsbyjs/reach-router';
 import { seafileAPI } from '../../utils/seafile-api';
-import { Utils } from '../../utils/utils.js';
+import { Utils } from '../../utils/utils';
 import toaster from '../../components/toast';
 import MainPanelTopbar from './main-panel-topbar';
 import ModalPortal from '../../components/modal-portal';

frontend/src/pages/org-admin/org-departments-list.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Link } from '@gatsbyjs/reach-router';
-import { Utils } from '../../utils/utils.js';
+import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import MainPanelTopbar from './main-panel-topbar';
 import ModalPortal from '../../components/modal-portal';

frontend/src/pages/review/history-list.js

@@ -1,6 +1,5 @@
 /* eslint-disable linebreak-style */
 import React from 'react';
-import axios from 'axios';
 import Loading from '../../components/loading';
 import moment from 'moment';
 import { seafileAPI } from '../../utils/seafile-api';

frontend/src/pages/sys-admin/departments/department-libraries.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { seafileAPI } from '../../../utils/seafile-api';
-import { Utils } from '../../../utils/utils.js';
+import { Utils } from '../../../utils/utils';
 import toaster from '../../../components/toast';
 import ModalPortal from '../../../components/modal-portal';
 import DeleteRepoDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-delete-repo-dialog';

frontend/src/pages/sys-admin/departments/department-members.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 import Paginator from '../../../components/paginator';
 import { seafileAPI } from '../../../utils/seafile-api';
-import { Utils } from '../../../utils/utils.js';
+import { Utils } from '../../../utils/utils';
 import ModalPortal from '../../../components/modal-portal';
 import DeleteMemberDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-delete-member-dialog';
 import { gettext, lang } from '../../../utils/constants';

frontend/src/pages/sys-admin/departments/department.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Link } from '@gatsbyjs/reach-router';
 import { seafileAPI } from '../../../utils/seafile-api';
-import { Utils } from '../../../utils/utils.js';
+import { Utils } from '../../../utils/utils';
 import toaster from '../../../components/toast';
 import MainPanelTopbar from '../main-panel-topbar';
 import ModalPortal from '../../../components/modal-portal';

frontend/src/pages/sys-admin/departments/group-item.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Link } from '@gatsbyjs/reach-router';
-import { Utils } from '../../../utils/utils.js';
+import { Utils } from '../../../utils/utils';
 import { siteRoot, gettext } from '../../../utils/constants';
 import OpMenu from '../../../components/dialog/op-menu';
 import ModalPortal from '../../../components/modal-portal';

frontend/src/pages/sys-admin/departments/member-item.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { seafileAPI } from '../../../utils/seafile-api';
-import { Utils } from '../../../utils/utils.js';
+import { Utils } from '../../../utils/utils';
 import toaster from '../../../components/toast';
 import RoleEditor from '../../../components/select-editor/role-editor';
 import UserLink from '../user-link';

frontend/src/pages/sys-admin/departments/repo-item.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Utils } from '../../../utils/utils.js';
+import { Utils } from '../../../utils/utils';
 import { siteRoot, gettext } from '../../../utils/constants';
 
 const { enableSysAdminViewRepo } = window.sysadmin.pageOptions;

frontend/src/pages/sys-admin/departments/sub-departments.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { seafileAPI } from '../../../utils/seafile-api';
-import { Utils } from '../../../utils/utils.js';
+import { Utils } from '../../../utils/utils';
 import toaster from '../../../components/toast';
 import { gettext, lang } from '../../../utils/constants';
 import GroupItem from './group-item';

frontend/src/pages/sys-admin/orgs/orgs-content.js

@@ -6,7 +6,7 @@ import { siteRoot, gettext } from '../../../utils/constants';
 import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
 import Paginator from '../../../components/paginator';
-import { seafileAPI } from '../../../utils/seafile-api.js';
+import { seafileAPI } from '../../../utils/seafile-api';
 import SysAdminUserRoleEditor from '../../../components/select-editor/sysadmin-user-role-editor';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import UserLink from '../user-link';