build/utils.js

+// SPDX-FileCopyrightText: 2017-2018 PanJiaChen <https://github.com/PanJiaChen/vue-element-admin>
+// SPDX-License-Identifier: MIT
+//
+// SPDX-FileCopyrightText: 2022 Pleroma Authors <https://pleroma.social>
+// SPDX-License-Identifier: AGPL-3.0-only
+
 'use strict'
 const path = require('path')
 const config = require('../config')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const packageConfig = require('../package.json')
 
-exports.assetsPath = function (_path) {
-  const assetsSubDirectory = process.env.NODE_ENV === 'production'
-    ? config.build.assetsSubDirectory
-    : config.dev.assetsSubDirectory
+exports.assetsPath = function(_path) {
+  const assetsSubDirectory =
+    process.env.NODE_ENV === 'production'
+      ? config.build.assetsSubDirectory
+      : config.dev.assetsSubDirectory
 
   return path.posix.join(assetsSubDirectory, _path)
 }
 
-exports.cssLoaders = function (options) {
+exports.cssLoaders = function(options) {
   options = options || {}
 
   const cssLoader = {
@@ -30,8 +37,22 @@ exports.cssLoaders = function (options) {
   }
 
   // generate loader string to be used with extract text plugin
-  function generateLoaders (loader, loaderOptions) {
-    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+  function generateLoaders(loader, loaderOptions) {
+    const loaders = []
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      loaders.push(MiniCssExtractPlugin.loader)
+    } else {
+      loaders.push('vue-style-loader')
+    }
+
+    loaders.push(cssLoader)
+
+    if (options.usePostCSS) {
+      loaders.push(postcssLoader)
+    }
 
     if (loader) {
       loaders.push({
@@ -42,24 +63,16 @@ exports.cssLoaders = function (options) {
       })
     }
 
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: 'vue-style-loader'
-      })
-    } else {
-      return ['vue-style-loader'].concat(loaders)
-    }
+    return loaders
   }
-
   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),
     less: generateLoaders('less'),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
+    sass: generateLoaders('sass', {
+      indentedSyntax: true
+    }),
     scss: generateLoaders('sass'),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
@@ -67,7 +80,7 @@ exports.cssLoaders = function (options) {
 }
 
 // Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
+exports.styleLoaders = function(options) {
   const output = []
   const loaders = exports.cssLoaders(options)
 
@@ -81,21 +94,3 @@ exports.styleLoaders = function (options) {
 
   return output
 }
-
-exports.createNotifierCallback = () => {
-  const notifier = require('node-notifier')
-
-  return (severity, errors) => {
-    if (severity !== 'error') return
-
-    const error = errors[0]
-    const filename = error.file && error.file.split('!').pop()
-
-    notifier.notify({
-      title: packageConfig.name,
-      message: severity + ': ' + error.name,
-      subtitle: filename || '',
-      icon: path.join(__dirname, 'logo.png')
-    })
-  }
-}

build/vue-loader.conf.js

+// SPDX-FileCopyrightText: 2017-2018 PanJiaChen <https://github.com/PanJiaChen/vue-element-admin>
+// SPDX-License-Identifier: MIT
+
 'use strict'
-const utils = require('./utils')
-const config = require('../config')
-const isProduction = process.env.NODE_ENV === 'production'
-const sourceMapEnabled = isProduction
-  ? config.build.productionSourceMap
-  : config.dev.cssSourceMap
 
 module.exports = {
-  loaders: utils.cssLoaders({
-    sourceMap: sourceMapEnabled,
-    extract: isProduction
-  }),
-  cssSourceMap: sourceMapEnabled,
-  cacheBusting: config.dev.cacheBusting,
-  transformToRequire: {
-    video: ['src', 'poster'],
-    source: 'src',
-    img: 'src',
-    image: 'xlink:href'
-  }
+  //You can set the vue-loader configuration by yourself.
 }

build/webpack.base.conf.js

+// SPDX-FileCopyrightText: 2017-2018 PanJiaChen <https://github.com/PanJiaChen/vue-element-admin>
+// SPDX-License-Identifier: MIT
+//
+// SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+// SPDX-License-Identifier: AGPL-3.0-only
+
 'use strict'
 const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
+const { VueLoaderPlugin } = require('vue-loader')
 const vueLoaderConfig = require('./vue-loader.conf')
 
-function resolve (dir) {
+function resolve(dir) {
   return path.join(__dirname, '..', dir)
 }
 
@@ -27,15 +34,16 @@ module.exports = {
   output: {
     path: config.build.assetsRoot,
     filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production'
-      ? config.build.assetsPublicPath
-      : config.dev.assetsPublicPath
+    publicPath:
+      process.env.NODE_ENV === 'production'
+        ? config.build.assetsPublicPath
+        : config.dev.assetsPublicPath,
+    hashFunction: 'sha512'
   },
   resolve: {
     extensions: ['.js', '.vue', '.json'],
     alias: {
-      'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src'),
+      '@': resolve('src')
     }
   },
   module: {
@@ -49,7 +57,11 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader?cacheDirectory',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+        include: [
+          resolve('src'),
+          resolve('test'),
+          resolve('node_modules/webpack-dev-server/client')
+        ]
       },
       {
         test: /\.svg$/,
@@ -60,32 +72,24 @@ module.exports = {
         }
       },
       {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
+        test: /\.(png|jpe?g|gif)(\?.*)?$/,
+        loader: 'file-loader',
         exclude: [resolve('src/icons')],
         options: {
           limit: 10000,
           name: utils.assetsPath('img/[name].[hash:7].[ext]')
         }
       },
-      {
-        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('media/[name].[hash:7].[ext]')
-        }
-      },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
+        loader: 'file-loader',
         options: {
-          limit: 10000,
           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
         }
       }
     ]
   },
+  plugins: [new VueLoaderPlugin()],
   node: {
     // prevent webpack from injecting useless setImmediate polyfill because Vue
     // source contains it (although only uses it if it's native).

build/webpack.dev.conf.js

+// SPDX-FileCopyrightText: 2017-2018 PanJiaChen <https://github.com/PanJiaChen/vue-element-admin>
+// SPDX-License-Identifier: MIT
+//
+// SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+// SPDX-License-Identifier: AGPL-3.0-only
+
 'use strict'
 const path = require('path')
 const utils = require('./utils')
@@ -6,19 +12,23 @@ const config = require('../config')
 const merge = require('webpack-merge')
 const baseWebpackConfig = require('./webpack.base.conf')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
-const portfinder = require('portfinder')
 
-function resolve (dir) {
+function resolve(dir) {
   return path.join(__dirname, '..', dir)
 }
 
 const HOST = process.env.HOST
 const PORT = process.env.PORT && Number(process.env.PORT)
 
+const devEnv = require('../config/dev.env')
+
 const devWebpackConfig = merge(baseWebpackConfig, {
+  mode: 'development',
   module: {
-    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+    rules: utils.styleLoaders({
+      sourceMap: config.dev.cssSourceMap,
+      usePostCSS: true
+    })
   },
   // cheap-module-eval-source-map is faster for development
   devtool: config.dev.devtool,
@@ -35,11 +45,13 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     overlay: config.dev.errorOverlay
       ? { warnings: false, errors: true }
       : false,
-    publicPath: config.dev.assetsPublicPath,
+    publicPath: devEnv.ASSETS_PUBLIC_PATH,
     proxy: config.dev.proxyTable,
-    quiet: true, // necessary for FriendlyErrorsPlugin
     watchOptions: {
-      poll: config.dev.poll,
+      poll: config.dev.poll
+    },
+    headers: {
+      'content-security-policy': "base-uri 'self'; frame-ancestors 'none'; img-src 'self' data: https: http:; media-src 'self' https:; style-src 'self' 'unsafe-inline'; font-src 'self'; manifest-src 'self'; script-src 'self';"
     }
   },
   plugins: [
@@ -47,42 +59,20 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       'process.env': require('../config/dev.env')
     }),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
-    new webpack.NoEmitOnErrorsPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'index.html',
       inject: true,
       favicon: resolve('favicon.ico'),
-      title: 'vue-element-admin',
-      path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
+      title: 'Admin FE',
+      templateParameters: {
+        BASE_URL: devEnv.ASSETS_PUBLIC_PATH + config.dev.assetsSubDirectory,
+      },
     }),
   ]
 })
 
 module.exports = new Promise((resolve, reject) => {
-  portfinder.basePort = process.env.PORT || config.dev.port
-  portfinder.getPort((err, port) => {
-    if (err) {
-      reject(err)
-    } else {
-      // publish the new Port, necessary for e2e tests
-      process.env.PORT = port
-      // add port to devServer config
-      devWebpackConfig.devServer.port = port
-
-      // Add FriendlyErrorsPlugin
-      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
-        compilationSuccessInfo: {
-          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
-        },
-        onErrors: config.dev.notifyOnErrors
-        ? utils.createNotifierCallback()
-        : undefined
-      }))
-
-      resolve(devWebpackConfig)
-    }
-  })
+  resolve(devWebpackConfig)
 })

build/webpack.prod.conf.js

+// SPDX-FileCopyrightText: 2017-2018 PanJiaChen <https://github.com/PanJiaChen/vue-element-admin>
+// SPDX-License-Identifier: MIT
+//
+// SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+// SPDX-License-Identifier: AGPL-3.0-only
+
 'use strict'
 const path = require('path')
 const utils = require('./utils')
@@ -5,19 +11,23 @@ const webpack = require('webpack')
 const config = require('../config')
 const merge = require('webpack-merge')
 const baseWebpackConfig = require('./webpack.base.conf')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
-function resolve (dir) {
+function resolve(dir) {
   return path.join(__dirname, '..', dir)
 }
 
-const env = require('../config/'+process.env.env_config+'.env')
+const env = require('../config/' + process.env.env_config + '.env')
+
+// For NamedChunksPlugin
+const seen = new Set()
+const nameLength = 4
 
 const webpackConfig = merge(baseWebpackConfig, {
+  mode: 'production',
   module: {
     rules: utils.styleLoaders({
       sourceMap: config.build.productionSourceMap,
@@ -28,37 +38,18 @@ const webpackConfig = merge(baseWebpackConfig, {
   devtool: config.build.productionSourceMap ? config.build.devtool : false,
   output: {
     path: config.build.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+    filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
+    chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].js')
   },
   plugins: [
     // http://vuejs.github.io/vue-loader/en/workflow/production.html
     new webpack.DefinePlugin({
       'process.env': env
     }),
-    new UglifyJsPlugin({
-      uglifyOptions: {
-        compress: {
-          warnings: false
-        }
-      },
-      sourceMap: config.build.productionSourceMap,
-      parallel: true
-    }),
     // extract css into its own file
-    new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css'),
-      // Setting the following option to `false` will not extract CSS from codesplit chunks.
-      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
-      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
-      allChunks: false,
-    }),
-    // Compress extracted CSS. We are using this plugin so that possible
-    // duplicated CSS from different components can be deduped.
-    new OptimizeCSSPlugin({
-      cssProcessorOptions: config.build.productionSourceMap
-        ? { safe: true, map: { inline: false } }
-        : { safe: true }
+    new MiniCssExtractPlugin({
+      filename: '[name].[contenthash:8].css',
+      chunkFilename: '[name].[contenthash:8].css'
     }),
     // generate dist index.html with correct asset hash for caching.
     // you can customize output by editing /index.html
@@ -68,85 +59,82 @@ const webpackConfig = merge(baseWebpackConfig, {
       template: 'index.html',
       inject: true,
       favicon: resolve('favicon.ico'),
-      title: 'vue-element-admin',
-      path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
+      title: 'Admin FE',
+      templateParameters: {
+        BASE_URL: env.ASSETS_PUBLIC_PATH + config.build.assetsSubDirectory,
+      },
       minify: {
         removeComments: true,
         collapseWhitespace: true,
         removeAttributeQuotes: true
         // more options:
         // https://github.com/kangax/html-minifier#options-quick-reference
-      },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
-    }),
-    // keep module.id stable when vender modules does not change
-    new webpack.HashedModuleIdsPlugin(),
-    // enable scope hoisting
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks (module) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
-            path.join(__dirname, '../node_modules')
-          ) === 0
-        )
       }
+      // default sort mode uses toposort which cannot handle cyclic deps
+      // in certain cases, and in webpack 4, chunk order in HTML doesn't
+      // matter anyway
     }),
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      minChunks: Infinity
-    }),
-    // This instance extracts shared chunks from code splitted chunks and bundles them
-    // in a separate chunk, similar to the vendor chunk
-    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'app',
-      async: 'vendor-async',
-      children: true,
-      minChunks: 3
-    }),
-    // split echarts into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      async: 'echarts',
-      minChunks(module) {
-        var context = module.context;
-        return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0);
-      }
-    }),
-    // split xlsx into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      async: 'xlsx',
-      minChunks(module) {
-        var context = module.context;
-        return context && (context.indexOf('xlsx') >= 0);
+    // keep chunk.id stable when chunk has no name
+    new webpack.NamedChunksPlugin(chunk => {
+      if (chunk.name) {
+        return chunk.name
       }
-    }),
-     // split codemirror into its own file
-     new webpack.optimize.CommonsChunkPlugin({
-      async: 'codemirror',
-      minChunks(module) {
-        var context = module.context;
-        return context && (context.indexOf('codemirror') >= 0);
+      const modules = Array.from(chunk.modulesIterable)
+      if (modules.length > 1) {
+        const hash = require('hash-sum')
+        const joinedHash = hash(modules.map(m => m.id).join('_'))
+        let len = nameLength
+        while (seen.has(joinedHash.substr(0, len))) len++
+        seen.add(joinedHash.substr(0, len))
+        return `chunk-${joinedHash.substr(0, len)}`
+      } else {
+        return modules[0].id
       }
     }),
-
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../static'),
-        to: config.build.assetsSubDirectory,
-        ignore: ['.*']
+    // keep module.id stable when vender modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+  ],
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      cacheGroups: {
+        libs: {
+          name: 'chunk-libs',
+          test: /[\\/]node_modules[\\/]/,
+          priority: 10,
+          chunks: 'initial' // 只打包初始时依赖的第三方
+        },
+        elementUI: {
+          name: 'chunk-elementUI', // 单独将 elementUI 拆包
+          priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
+          test: /[\\/]node_modules[\\/]element-ui[\\/]/
+        },
+        commons: {
+          name: 'chunk-commons',
+          test: resolve('src/components'), // 可自定义拓展你的规则
+          minChunks: 3, // 最小公用次数
+          priority: 5,
+          reuseExistingChunk: true
+        }
       }
-    ])
-  ]
+    },
+    runtimeChunk: 'single',
+    minimizer: [
+      new UglifyJsPlugin({
+        uglifyOptions: {
+          mangle: {
+            safari10: true
+          }
+        },
+        sourceMap: config.build.productionSourceMap,
+        cache: true,
+        parallel: true
+      }),
+      // Compress extracted CSS. We are using this plugin so that possible
+      // duplicated CSS from different components can be deduped.
+      new OptimizeCSSAssetsPlugin()
+    ]
+  }
 })
 
 if (config.build.productionGzip) {
@@ -154,12 +142,9 @@ if (config.build.productionGzip) {
 
   webpackConfig.plugins.push(
     new CompressionWebpackPlugin({
-      asset: '[path].gz[query]',
       algorithm: 'gzip',
       test: new RegExp(
-        '\\.(' +
-        config.build.productionGzipExtensions.join('|') +
-        ')$'
+        '\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
       ),
       threshold: 10240,
       minRatio: 0.8
@@ -167,9 +152,4 @@ if (config.build.productionGzip) {
   )
 }
 
-if (config.build.bundleAnalyzerReport) {
-  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
-}
-
 module.exports = webpackConfig

config/dev.env.js

+// SPDX-FileCopyrightText: 2017-2019 PanJiaChen <https://github.com/PanJiaChen/vue-element-admin>
+// SPDX-License-Identifier: MIT
+//
+// SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+// SPDX-License-Identifier: AGPL-3.0-only
+
 module.exports = {
   NODE_ENV: '"development"',
   ENV_CONFIG: '"dev"',
-  BASE_API: '"https://api-dev"'
+  DISABLED_FEATURES: '[""]',
+  ASSETS_PUBLIC_PATH: '/'
 }

config/index.js

+// SPDX-FileCopyrightText: 2017-2019 PanJiaChen <https://github.com/PanJiaChen/vue-element-admin>
+// SPDX-License-Identifier: MIT
+//
+// SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+// SPDX-License-Identifier: AGPL-3.0-only
+
 'use strict'
 // Template version: 1.2.6
 // see http://vuejs-templates.github.io/webpack for documentation.
@@ -6,14 +12,16 @@ const path = require('path')
 
 module.exports = {
   dev: {
-
     // Paths
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    // assetsPublicPath: '', // To configure assetsPublicPath set ASSETS_PUBLIC_PATH in dev/prod.env.js
     proxyTable: {},
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+
+    // can be overwritten by process.env.HOST
+    // if you want dev by ip, please set host: '0.0.0.0'
+    host: 'localhost',
     port: 9527, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
@@ -33,19 +41,14 @@ module.exports = {
      */
 
     // https://webpack.js.org/configuration/devtool/#development
-    devtool: '#cheap-source-map',
-
-    // If you have problems debugging vue-files in devtools,
-    // set this to false - it *may* help
-    // https://vue-loader.vuejs.org/en/options.html#cachebusting
-    cacheBusting: true,
+    devtool: 'cheap-source-map',
 
     // CSS Sourcemaps off by default because relative paths are "buggy"
     // with this option, according to the CSS-Loader README
     // (https://github.com/webpack/css-loader#sourcemaps)
     // In our experience, they generally work as expected,
     // just be aware of this issue when enabling this option.
-    cssSourceMap: false,
+    cssSourceMap: false
   },
 
   build: {
@@ -63,14 +66,14 @@ module.exports = {
      * then assetsPublicPath should be set to "/bar/".
      * In most cases please use '/' !!!
      */
-    assetsPublicPath: '/vue-element-admin/', // If you are deployed on the root path, please use '/'
+    // assetsPublicPath: '', // To configure assetsPublicPath set ASSETS_PUBLIC_PATH in dev/prod.env.js
 
     /**
      * Source Maps
      */
-    productionSourceMap: false,
+    productionSourceMap: true,
     // https://webpack.js.org/configuration/devtool/#production
-    devtool: '#source-map',
+    devtool: 'source-map',
 
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.
@@ -81,8 +84,11 @@ module.exports = {
 
     // Run the build command with an extra argument to
     // View the bundle analyzer report after build finishes:
-    // `npm run build --report`
+    // `npm run build:prod --report`
     // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report
+    bundleAnalyzerReport: process.env.npm_config_report || false,
+
+    // `npm run build:prod --generate_report`
+    generateAnalyzerReport: process.env.npm_config_generate_report || false
   }
 }

config/prod.env.js

+// SPDX-FileCopyrightText: 2017-2019 PanJiaChen <https://github.com/PanJiaChen/vue-element-admin>
+// SPDX-License-Identifier: MIT
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+
 module.exports = {
   NODE_ENV: '"production"',
   ENV_CONFIG: '"prod"',
-  BASE_API: '"https://api-prod"'
+  BASE_API: '"https://api-prod"',
+  DISABLED_FEATURES: '[""]',
+  ASSETS_PUBLIC_PATH: '/pleroma/admin/'
 }

config/sit.env.js

+// SPDX-FileCopyrightText: 2017-2019 PanJiaChen <https://github.com/PanJiaChen/vue-element-admin>
+// SPDX-License-Identifier: MIT
+
 module.exports = {
   NODE_ENV: '"production"',
   ENV_CONFIG: '"sit"',

docker/docker-entrypoint.sh

+#!/bin/sh
+
+# SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+# SPDX-License-Identifier: AGPL-3.0-only
+
+set -e
+envsubst "$(env | sed -e 's/=.*//' -e 's/^/\$/g')" < "/etc/nginx/nginx.conf.tpl" > "/etc/nginx/nginx.conf"
+exec "$@"

docker/nginx.conf.tpl

+# SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+# SPDX-License-Identifier: AGPL-3.0-only
+
+user  nginx;
+worker_processes  1;
+error_log  /var/log/nginx/error.log warn;
+pid        /tmp/nginx.pid;
+events {
+    worker_connections  1024;
+}
+http {
+    client_body_temp_path /tmp/client_temp;
+    proxy_temp_path       /tmp/proxy_temp_path;
+    fastcgi_temp_path     /tmp/fastcgi_temp;
+    uwsgi_temp_path       /tmp/uwsgi_temp;
+    scgi_temp_path        /tmp/scgi_temp;
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+    access_log  /var/log/nginx/access.log  main;
+    sendfile        on;
+    keepalive_timeout  65;
+    proxy_cache_path /tmp/pleroma-media-cache levels=1:2 keys_zone=pleroma_media_cache:10m max_size=10g
+                     inactive=720m use_temp_path=off;
+    server {
+        listen 80;
+        server_name _;
+        root /usr/share/nginx/html;
+        location / {
+        try_files $uri $uri/ /index.html;
+      }
+    }
+}

index.html

+<!--
+SPDX-FileCopyrightText: 2017-2019 PanJiaChen <https://github.com/PanJiaChen/vue-element-admin>
+SPDX-License-Identifier: MIT
+-->
+
 <!DOCTYPE html>
 <html>
   <head>
@@ -5,10 +10,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title>vue-element-admin</title>
+    <title>Admin FE</title>
   </head>
   <body>
-    <script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>

package.json

 {
   "name": "vue-element-admin",
-  "version": "3.7.0",
+  "version": "3.10.0",
   "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
   "author": "Pan <panfree23@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
-    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
-    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
+    "dev": "cross-env BABEL_ENV=development NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "build:prod": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production env_config=prod node build/build.js",
+    "build:sit": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production env_config=sit node build/build.js",
     "lint": "eslint --ext .js,.vue src",
-    "test": "npm run lint"
+    "test": "jest",
+    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.json"
   },
   "keywords": [
     "vue",
@@ -20,97 +22,117 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
+    "url": "git+https://git.pleroma.social/pleroma/admin-fe.git"
+  },
+  "resolutions": {
+    "prosemirror-model": "1.18.3"
   },
   "bugs": {
-    "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
+    "url": "https://git.pleroma.social/pleroma/admin-fe/-/issues"
   },
   "dependencies": {
-    "axios": "0.17.1",
-    "clipboard": "1.7.1",
-    "codemirror": "5.32.0",
-    "driver.js": "0.5.2",
-    "dropzone": "5.2.0",
-    "echarts": "3.8.5",
-    "element-ui": "2.3.2",
-    "file-saver": "1.3.3",
-    "font-awesome": "4.7.0",
-    "js-cookie": "2.2.0",
-    "jsonlint": "1.6.3",
-    "jszip": "3.1.5",
-    "mockjs": "1.0.1-beta3",
+    "@babel/runtime": "7.19.0",
+    "axios": "0.27.2",
+    "clipboard": "2.0.11",
+    "element-ui": "2.15.12",
+    "js-cookie": "2.2.1",
+    "localforage": "1.10.0",
+    "lodash": "4.17.21",
+    "lodash.debounce": "4.0.8",
+    "marked": "0.8.2",
+    "luxon": "3.1.1",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
-    "screenfull": "3.3.2",
-    "showdown": "1.8.5",
-    "simplemde": "1.11.2",
-    "sortablejs": "1.7.0",
-    "vue": "2.5.10",
-    "vue-count-to": "1.0.13",
-    "vue-i18n": "7.3.2",
-    "vue-multiselect": "2.0.8",
-    "vue-router": "3.0.1",
-    "vue-splitpane": "1.0.2",
-    "vuedraggable": "^2.16.0",
-    "vuex": "3.0.1",
-    "xlsx": "^0.11.16"
+    "numeral": "2.0.6",
+    "tiptap": "1.32.2",
+    "tiptap-extensions": "1.35.2",
+    "vue": "2.7.8",
+    "vue-i18n": "8.28.2",
+    "vue-router": "3.6.5",
+    "vuex": "3.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "7.2.3",
-    "babel-core": "6.26.0",
-    "babel-eslint": "8.0.3",
+    "@babel/core": "7.19.1",
+    "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@babel/plugin-transform-runtime": "7.19.1",
+    "@babel/preset-env": "7.19.1",
+    "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
+    "@vue/babel-preset-jsx": "1.4.0",
+    "@vue/test-utils": "1.3.3",
+    "autoprefixer": "10.4.16",
+    "babel-eslint": "8.2.6",
     "babel-helper-vue-jsx-merge-props": "2.0.3",
-    "babel-loader": "7.1.2",
-    "babel-plugin-dynamic-import-node": "^1.2.0",
-    "babel-plugin-syntax-jsx": "6.18.0",
-    "babel-plugin-transform-runtime": "6.23.0",
-    "babel-plugin-transform-vue-jsx": "3.5.0",
-    "babel-preset-env": "1.6.1",
-    "babel-preset-stage-2": "6.24.1",
-    "chalk": "2.3.0",
-    "copy-webpack-plugin": "4.3.0",
-    "cross-env": "5.1.1",
-    "css-loader": "0.28.7",
-    "eslint": "4.13.1",
-    "eslint-friendly-formatter": "3.0.0",
-    "eslint-loader": "1.9.0",
-    "eslint-plugin-html": "4.0.1",
-    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "1.1.5",
-    "friendly-errors-webpack-plugin": "1.6.1",
-    "html-webpack-plugin": "2.30.1",
-    "node-notifier": "5.1.2",
-    "node-sass": "^4.7.2",
-    "optimize-css-assets-webpack-plugin": "3.2.0",
-    "ora": "1.3.0",
-    "portfinder": "1.0.13",
-    "postcss-import": "11.0.0",
-    "postcss-loader": "2.0.9",
-    "postcss-url": "7.3.0",
-    "pushstate-server": "3.0.1",
-    "rimraf": "2.6.2",
-    "sass-loader": "6.0.6",
+    "babel-jest": "25.5.1",
+    "babel-loader": "8.2.5",
+    "babel-plugin-dynamic-import-node-babel-7": "2.0.7",
+    "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
+    "compression-webpack-plugin": "2.0.0",
+    "connect": "3.7.0",
+    "cross-env": "7.0.3",
+    "css-loader": "1.0.1",
+    "eslint": "4.19.1",
+    "eslint-friendly-formatter": "4.0.1",
+    "eslint-loader": "2.2.1",
+    "eslint-plugin-vue": "4.7.1",
+    "file-loader": "1.1.11",
+    "flush-promises": "1.0.2",
+    "hash-sum": "1.0.2",
+    "html-webpack-plugin": "3.2.0",
+    "jest": "25.5.4",
+    "jest-transform-stub": "2.0.0",
+    "mini-css-extract-plugin": "0.12.0",
+    "sass": "1.57.1",
+    "optimize-css-assets-webpack-plugin": "5.0.8",
+    "ora": "3.4.0",
+    "path-to-regexp": "2.4.0",
+    "postcss": "8.4.20",
+    "postcss-loader": "4.3.0",
+    "postcss-url": "10.1.3",
+    "rimraf": "2.7.1",
+    "sass-loader": "7.3.1",
     "script-loader": "0.7.2",
-    "semver": "5.4.1",
-    "shelljs": "0.7.8",
-    "svg-sprite-loader": "3.5.2",
-    "uglifyjs-webpack-plugin": "1.1.3",
-    "url-loader": "0.6.2",
-    "vue-loader": "13.7.2",
-    "vue-style-loader": "3.0.3",
-    "vue-template-compiler": "2.5.10",
-    "webpack": "3.10.0",
-    "webpack-bundle-analyzer": "2.9.1",
-    "webpack-dev-server": "2.9.7",
-    "webpack-merge": "4.1.1"
+    "semver": "5.7.1",
+    "serve-static": "1.15.0",
+    "svg-sprite-loader": "3.9.2",
+    "svgo": "2.8.0",
+    "uglifyjs-webpack-plugin": "1.3.0",
+    "vue-jest": "4.0.1",
+    "vue-loader": "15.10.1",
+    "vue-style-loader": "4.1.3",
+    "vue-template-compiler": "2.7.8",
+    "webpack": "4.46.0",
+    "webpack-cli": "3.3.12",
+    "webpack-dev-server": "3.11.3",
+    "webpack-merge": "4.2.2"
   },
   "engines": {
-    "node": ">= 4.0.0",
+    "node": ">= 6.0.0",
     "npm": ">= 3.0.0"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
-  ]
+  ],
+  "jest": {
+    "coverageReporters": ["cobertura", "text-summary"],
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "vue"
+    ],
+    "moduleDirectories": [
+      "node_modules",
+      "src"
+    ],
+    "transform": {
+      "^.+\\.vue$": "vue-jest",
+      "^.+\\.js$": "babel-jest",
+      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$'": "jest-transform-stub"
+    },
+    "moduleNameMapper": {
+      "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
+      "^@/(.*)$": "<rootDir>/src/$1"
+    }
+  }
 }

renovate.json

+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ]
+}

src/App.vue

+<!--
+SPDX-FileCopyrightText: 2017-2019 PanJiaChen <https://github.com/PanJiaChen/vue-element-admin>
+SPDX-License-Identifier: MIT
+-->
+
 <template>
   <div id="app">
-    <router-view></router-view>
+    <router-view/>
   </div>
 </template>
 
 <script>
-  export default{
-    name: 'App'
-  }
+export default{
+  name: 'App'
+}
 </script>

src/api/__mocks__/app.js

+// SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+// SPDX-License-Identifier: AGPL-3.0-only
+
+export async function needReboot(authHost, token) {
+  return Promise.resolve({ data: false })
+}
+
+export async function restartApp(authHost, token) {
+  return Promise.resolve()
+}

src/api/__mocks__/chat.js

+// SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+// SPDX-License-Identifier: AGPL-3.0-only
+
+export async function fetchChat(id, authHost, token) {
+  return Promise.resolve({ data: userChats[0] })
+}
+
+export async function fetchChatMessages(id, max_id, authHost, token) {
+  return Promise.resolve({ data: chatMessages })
+}
+
+export async function deleteChat(chat_id, message_id, authHost, token) {
+  return Promise.resolve({ data: userChats[0] })
+}
+
+export const userChats = [
+  {
+    id: '9y8e7ESoVUiKVMAoCW',
+    last_message: {
+      account_id: '9xUIiQfGrdPJDZe39s',
+      attachment: null,
+      card: null,
+      chat_id: '9y8e7ESoVUiKVMAoCW',
+      content: 'heyy',
+      created_at: '2020-09-11T00:07:13.000Z',
+      emojis: [],
+      id: '9z22Q9MzWiAk7GZnNY',
+      unread: false
+    },
+    receiver: {
+      acct: 'test10',
+      avatar: 'http://localhost:4000/images/avi.png',
+      avatar_static: 'http://localhost:4000/images/avi.png',
+      bot: false,
+      created_at: '2020-07-27T00:33:02.000Z',
+      display_name: 'test10',
+      emojis: [],
+      fields: [],
+      followers_count: 2,
+      following_count: 1,
+      header: 'http://localhost:4000/images/banner.png',
+      header_static: 'http://localhost:4000/images/banner.png',
+      id: '9xUj5WTmzSlFPN6OLg',
+      locked: false,
+      note: '',
+      pleroma: {
+        accepts_chat_messages: true,
+        ap_id: 'http://localhost:4000/users/test10',
+        background_image: null,
+        is_confirmed: true,
+        favicon: null,
+        hide_favorites: true,
+        hide_followers: false,
+        hide_followers_count: false,
+        hide_follows: false,
+        hide_follows_count: false,
+        is_admin: false,
+        is_moderator: true,
+        relationship: {},
+        skip_thread_containment: false,
+        tags: [
+          'mrf_tag:media-force-nsfw',
+          'mrf_tag:media-strip',
+          'mrf_tag:force-unlisted'
+        ]
+      },
+      source: {
+        fields: [],
+        note: '',
+        pleroma: {
+          actor_type: 'Person',
+          discoverable: false
+        },
+        sensitive: false
+      },
+      statuses_count: 20,
+      url: 'http://localhost:4000/users/test10',
+      username: 'test10'
+    },
+    sender: {
+      acct: 'mk',
+      avatar: 'http://localhost:4000/media/9051960b674309674f2f1a3a0e05916013260af13f672df32c869cb841958a44.gif',
+      avatar_static: 'http://localhost:4000/media/9051960b674309674f2f1a3a0e05916013260af13f672df32c869cb841958a44.gif',
+      bot: false,
+      created_at: '2020-07-26T19:37:31.000Z',
+      display_name: 'mk',
+      emojis: [],
+      fields: [
+        {
+          name: 'website',
+          value: '<a href="http://marykatefain.com" rel="ugc">marykatefain.com</a>'
+        }
+      ],
+      followers_count: 2,
+      following_count: 1,
+      header: 'http://localhost:4000/media/139889433c4085dcf219171fdcc48659fa3fb5090a748ca37513fda051226b12.gif',
+      header_static: 'http://localhost:4000/media/139889433c4085dcf219171fdcc48659fa3fb5090a748ca37513fda051226b12.gif',
+      id: '9xUIiQfGrdPJDZe39s',
+      locked: false,
+      note: 'a bio about me',
+      pleroma: {
+        accepts_chat_messages: true,
+        ap_id: 'https://localhost/users/mk',
+        background_image: null,
+        is_confirmed: true,
+        favicon: null,
+        hide_favorites: true,
+        hide_followers: false,
+        hide_followers_count: false,
+        hide_follows: false,
+        hide_follows_count: false,
+        is_admin: true,
+        is_moderator: false,
+        relationship: {},
+        skip_thread_containment: false,
+        tags: [
+          'verified'
+        ]
+      },
+      source: {
+        fields: [
+          {
+            name: 'website',
+            value: 'marykatefain.com'
+          }
+        ],
+        note: 'a bio about me',
+        pleroma: {
+          actor_type: 'Person',
+          discoverable: false
+        },
+        sensitive: false
+      },
+      statuses_count: 77,
+      url: 'https://localhost/users/mk',
+      username: 'mk'
+    },
+    unread: 0,
+    updated_at: '2020-09-11T00:07:13.000Z'
+  },
+  {
+    id: '9y8dwDAQzFBZIZJzEG',
+    last_message: {
+      account_id: '9xUIiQfGrdPJDZe39s',
+      attachment: null,
+      card: null,
+      chat_id: '9y8dwDAQzFBZIZJzEG',
+      content: 'hiiiiiiiiiiiiiiiiiii',
+      created_at: '2020-08-15T06:45:13.000Z',
+      emojis: [],
+      id: '9y8e4EZndDmfzA0lGa',
+      unread: false
+    },
+    receiver: {
+      acct: 'user2',
+      avatar: 'http://localhost:4000/media/5a702176cd5181f81532a42fafa87953db1586ca39a3c83cd3df1bc9b5cb7d07.png',
+      avatar_static: 'http://localhost:4000/media/5a702176cd5181f81532a42fafa87953db1586ca39a3c83cd3df1bc9b5cb7d07.png',
+      bot: false,
+      created_at: '2020-08-01T19:23:57.000Z',
+      display_name: 'User2',
+      emojis: [],
+      fields: [],
+      followers_count: 0,
+      following_count: 2,
+      header: 'http://localhost:4000/media/1b1fc87d56e4f94b0ca8eb23100c92f67371bfa37b2898cd804341ed1a2d5c84.jpg',
+      header_static: 'http://localhost:4000/media/1b1fc87d56e4f94b0ca8eb23100c92f67371bfa37b2898cd804341ed1a2d5c84.jpg',
+      id: '9xfhRuCIyydruc0Sh6',
+      locked: false,
+      note: 'Just me!',
+      pleroma: {
+        accepts_chat_messages: true,
+        ap_id: 'http://localhost:4000/users/user2',
+        background_image: null,
+        is_confirmed: false,
+        favicon: null,
+        hide_favorites: true,
+        hide_followers: false,
+        hide_followers_count: false,
+        hide_follows: false,
+        hide_follows_count: false,
+        is_admin: false,
+        is_moderator: false,
+        relationship: {},
+        skip_thread_containment: false,
+        tags: [
+          'mrf_tag:force-unlisted',
+          'mrf_tag:media-strip'
+        ]
+      },
+      source: {
+        fields: [],
+        note: 'Just me!',
+        pleroma: {
+          actor_type: 'Person',
+          discoverable: false
+        },
+        sensitive: false
+      },
+      statuses_count: 69,
+      url: 'http://localhost:4000/users/user2',
+      username: 'user2'
+    },
+    sender: {
+      acct: 'mk',
+      avatar: 'http://localhost:4000/media/9051960b674309674f2f1a3a0e05916013260af13f672df32c869cb841958a44.gif',
+      avatar_static: 'http://localhost:4000/media/9051960b674309674f2f1a3a0e05916013260af13f672df32c869cb841958a44.gif',
+      bot: false,
+      created_at: '2020-07-26T19:37:31.000Z',
+      display_name: 'mk',
+      emojis: [],
+      fields: [
+        {
+          name: 'website',
+          value: '<a href="http://marykatefain.com" rel="ugc">marykatefain.com</a>'
+        }
+      ],
+      followers_count: 2,
+      following_count: 1,
+      header: 'http://localhost:4000/media/139889433c4085dcf219171fdcc48659fa3fb5090a748ca37513fda051226b12.gif',
+      header_static: 'http://localhost:4000/media/139889433c4085dcf219171fdcc48659fa3fb5090a748ca37513fda051226b12.gif',
+      id: '9xUIiQfGrdPJDZe39s',
+      locked: false,
+      note: 'a bio about me',
+      pleroma: {
+        accepts_chat_messages: true,
+        ap_id: 'https://localhost/users/mk',
+        background_image: null,
+        is_confirmed: true,
+        favicon: null,
+        hide_favorites: true,
+        hide_followers: false,
+        hide_followers_count: false,
+        hide_follows: false,
+        hide_follows_count: false,
+        is_admin: true,
+        is_moderator: false,
+        relationship: {},
+        skip_thread_containment: false,
+        tags: [
+          'verified'
+        ]
+      },
+      source: {
+        fields: [
+          {
+            name: 'website',
+            value: 'marykatefain.com'
+          }
+        ],
+        note: 'a bio about me',
+        pleroma: {
+          actor_type: 'Person',
+          discoverable: false
+        },
+        sensitive: false
+      },
+      statuses_count: 77,
+      url: 'https://localhost/users/mk',
+      username: 'mk'
+    },
+    unread: 0,
+    updated_at: '2020-08-15T06:45:13.000Z'
+  },
+  {
+    id: '9y8dubemxq32fkkoeu',
+    last_message: null,
+    receiver: {
+      acct: 'mk',
+      avatar: 'http://localhost:4000/media/9051960b674309674f2f1a3a0e05916013260af13f672df32c869cb841958a44.gif',
+      avatar_static: 'http://localhost:4000/media/9051960b674309674f2f1a3a0e05916013260af13f672df32c869cb841958a44.gif',
+      bot: false,
+      created_at: '2020-07-26T19:37:31.000Z',
+      display_name: 'mk',
+      emojis: [],
+      fields: [
+        {
+          name: 'website',
+          value: '<a href="http://marykatefain.com" rel="ugc">marykatefain.com</a>'
+        }
+      ],
+      followers_count: 2,
+      following_count: 1,
+      header: 'http://localhost:4000/media/139889433c4085dcf219171fdcc48659fa3fb5090a748ca37513fda051226b12.gif',
+      header_static: 'http://localhost:4000/media/139889433c4085dcf219171fdcc48659fa3fb5090a748ca37513fda051226b12.gif',
+      id: '9xUIiQfGrdPJDZe39s',
+      locked: false,
+      note: 'a bio about me',
+      pleroma: {
+        accepts_chat_messages: true,
+        ap_id: 'https://localhost/users/mk',
+        background_image: null,
+        is_confirmed: true,
+        favicon: null,
+        hide_favorites: true,
+        hide_followers: false,
+        hide_followers_count: false,
+        hide_follows: false,
+        hide_follows_count: false,
+        is_admin: true,
+        is_moderator: false,
+        relationship: {},
+        skip_thread_containment: false,
+        tags: [
+          'verified'
+        ]
+      },
+      source: {
+        fields: [
+          {
+            name: 'website',
+            value: 'marykatefain.com'
+          }
+        ],
+        note: 'a bio about me',
+        pleroma: {
+          actor_type: 'Person',
+          discoverable: false
+        },
+        sensitive: false
+      },
+      statuses_count: 77,
+      url: 'https://localhost/users/mk',
+      username: 'mk'
+    },
+    sender: {
+      acct: 'mk',
+      avatar: 'http://localhost:4000/media/9051960b674309674f2f1a3a0e05916013260af13f672df32c869cb841958a44.gif',
+      avatar_static: 'http://localhost:4000/media/9051960b674309674f2f1a3a0e05916013260af13f672df32c869cb841958a44.gif',
+      bot: false,
+      created_at: '2020-07-26T19:37:31.000Z',
+      display_name: 'mk',
+      emojis: [],
+      fields: [
+        {
+          name: 'website',
+          value: '<a href="http://marykatefain.com" rel="ugc">marykatefain.com</a>'
+        }
+      ],
+      followers_count: 2,
+      following_count: 1,
+      header: 'http://localhost:4000/media/139889433c4085dcf219171fdcc48659fa3fb5090a748ca37513fda051226b12.gif',
+      header_static: 'http://localhost:4000/media/139889433c4085dcf219171fdcc48659fa3fb5090a748ca37513fda051226b12.gif',
+      id: '9xUIiQfGrdPJDZe39s',
+      locked: false,
+      note: 'a bio about me',
+      pleroma: {
+        accepts_chat_messages: true,
+        ap_id: 'https://localhost/users/mk',
+        background_image: null,
+        is_confirmed: true,
+        favicon: null,
+        hide_favorites: true,
+        hide_followers: false,
+        hide_followers_count: false,
+        hide_follows: false,
+        hide_follows_count: false,
+        is_admin: true,
+        is_moderator: false,
+        relationship: {},
+        skip_thread_containment: false,
+        tags: [
+          'verified'
+        ]
+      },
+      source: {
+        fields: [
+          {
+            name: 'website',
+            value: 'marykatefain.com'
+          }
+        ],
+        note: 'a bio about me',
+        pleroma: {
+          actor_type: 'Person',
+          discoverable: false
+        },
+        sensitive: false
+      },
+      statuses_count: 77,
+      url: 'https://localhost/users/mk',
+      username: 'mk'
+    },
+    unread: 0,
+    updated_at: '2020-08-15T06:43:29.000Z'
+  }
+]
+
+export const chatMessages = [
+  {
+    account_id: '9xUIiQfGrdPJDZe39s',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'heyy',
+    created_at: '2020-09-11T00:07:13.000Z',
+    emojis: [],
+    id: '9z22Q9MzWiAk7GZnNY',
+    unread: false
+  },
+  {
+    account_id: '9xUIiQfGrdPJDZe39s',
+    attachment: {
+      description: null,
+      id: '-1990764178',
+      pleroma: {
+        mime_type: 'image/png'
+      },
+      preview_url: 'http://localhost:4000/media/b087b890b39aa8301f736e8b45c02213183986c8a994c2c99e921ae85afa17e4.png',
+      remote_url: 'http://localhost:4000/media/b087b890b39aa8301f736e8b45c02213183986c8a994c2c99e921ae85afa17e4.png',
+      text_url: 'http://localhost:4000/media/b087b890b39aa8301f736e8b45c02213183986c8a994c2c99e921ae85afa17e4.png',
+      type: 'image',
+      url: 'http://localhost:4000/media/b087b890b39aa8301f736e8b45c02213183986c8a994c2c99e921ae85afa17e4.png'
+    },
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: null,
+    created_at: '2020-09-10T20:35:33.000Z',
+    emojis: [],
+    id: '9z1jWuQNaq8Ef6fdOS',
+    unread: false
+  },
+  {
+    account_id: '9xUIiQfGrdPJDZe39s',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'probably',
+    created_at: '2020-09-10T16:57:33.000Z',
+    emojis: [],
+    id: '9z1Q4eXb9kBYA8rNT6',
+    unread: false
+  },
+  {
+    account_id: '9xUj5WTmzSlFPN6OLg',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'That has got to be 20 by now',
+    created_at: '2020-09-10T16:57:29.000Z',
+    emojis: [],
+    id: '9z1Q4LQAF9wuraEfk8',
+    unread: false
+  },
+  {
+    account_id: '9xUIiQfGrdPJDZe39s',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'I miss bars :(',
+    created_at: '2020-09-10T16:57:22.000Z',
+    emojis: [],
+    id: '9z1Q3gmlKEfEpnUdm4',
+    unread: false
+  },
+  {
+    account_id: '9xUIiQfGrdPJDZe39s',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'Yeah tying to!',
+    created_at: '2020-09-10T16:57:15.000Z',
+    emojis: [],
+    id: '9z1Q307VxCiKVhs6eO',
+    unread: false
+  },
+  {
+    account_id: '9xUj5WTmzSlFPN6OLg',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'staying safe with covid and such?',
+    created_at: '2020-09-10T16:57:10.000Z',
+    emojis: [],
+    id: '9z1Q2Z56U3k6ePXIe1',
+    unread: false
+  },
+  {
+    account_id: '9xUj5WTmzSlFPN6OLg',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'how have you been?',
+    created_at: '2020-09-10T16:57:06.000Z',
+    emojis: [],
+    id: '9z1Q29XvQHLfSGowxU',
+    unread: false
+  },
+  {
+    account_id: '9xUj5WTmzSlFPN6OLg',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'so what are you doing?',
+    created_at: '2020-09-10T16:57:02.000Z',
+    emojis: [],
+    id: '9z1Q1lPb9aQYbUjxeD',
+    unread: false
+  },
+  {
+    account_id: '9xUIiQfGrdPJDZe39s',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'crazy',
+    created_at: '2020-09-10T16:56:55.000Z',
+    emojis: [],
+    id: '9z1Q19zQHwVMXbD2DA',
+    unread: false
+  },
+  {
+    account_id: '9xUIiQfGrdPJDZe39s',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'omg yeah same',
+    created_at: '2020-09-10T16:56:54.000Z',
+    emojis: [],
+    id: '9z1Q12zWJBQIpsCVtI',
+    unread: false
+  },
+  {
+    account_id: '9xUIiQfGrdPJDZe39s',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'hahahaha',
+    created_at: '2020-09-10T16:56:51.000Z',
+    emojis: [],
+    id: '9z1Q0pyKiHkWSQXsjg',
+    unread: false
+  },
+  {
+    account_id: '9xUj5WTmzSlFPN6OLg',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'I think this is 13',
+    created_at: '2020-09-10T16:56:45.000Z',
+    emojis: [],
+    id: '9z1Q0Ft6sEBGXnpCb3',
+    unread: false
+  },
+  {
+    account_id: '9xUj5WTmzSlFPN6OLg',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'We need to keep typing until we hit 20',
+    created_at: '2020-09-10T16:56:42.000Z',
+    emojis: [],
+    id: '9z1PzywjrTyy08OMOO',
+    unread: false
+  },
+  {
+    account_id: '9xUIiQfGrdPJDZe39s',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'That&#39;s nice',
+    created_at: '2020-09-10T16:56:03.000Z',
+    emojis: [],
+    id: '9z1PwOkJzs8orKsJDU',
+    unread: false
+  },
+  {
+    account_id: '9xUj5WTmzSlFPN6OLg',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'I&#39;ve been good! Keeping busy',
+    created_at: '2020-09-10T16:56:00.000Z',
+    emojis: [],
+    id: '9z1Pw7qmoaDASSljQv',
+    unread: false
+  },
+  {
+    account_id: '9xUIiQfGrdPJDZe39s',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: '*been',
+    created_at: '2020-09-10T16:55:55.000Z',
+    emojis: [],
+    id: '9z1PvcWVHwZFIa2b0y',
+    unread: false
+  },
+  {
+    account_id: '9xUIiQfGrdPJDZe39s',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'How have you ben?',
+    created_at: '2020-09-10T16:55:52.000Z',
+    emojis: [],
+    id: '9z1PvK4BuTE03YejNw',
+    unread: false
+  },
+  {
+    account_id: '9xUIiQfGrdPJDZe39s',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'Oh it&#39;s okay! No worries!',
+    created_at: '2020-09-10T16:55:44.000Z',
+    emojis: [],
+    id: '9z1Puc4hTDUJcOYW4O',
+    unread: false
+  },
+  {
+    account_id: '9xUj5WTmzSlFPN6OLg',
+    attachment: null,
+    card: null,
+    chat_id: '9y8e7ESoVUiKVMAoCW',
+    content: 'didn&#39;t mean to ignore you',
+    created_at: '2020-09-10T16:55:32.000Z',
+    emojis: [],
+    id: '9z1PtWGNamQTIvUspk',
+    unread: false
+  }
+]

src/api/__mocks__/emojiPacks.js

+// SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+// SPDX-License-Identifier: AGPL-3.0-only
+
+export async function addNewEmojiFile(packName, file, shortcode, filename, host, token) {
+  return Promise.resolve()
+}
+
+export function addressOfEmojiInPack(host, packName, name) {
+  return Promise.resolve()
+}
+
+export async function createPack(host, token, packName) {
+  return Promise.resolve()
+}
+
+export async function deleteEmojiFile(packName, shortcode, host, token) {
+  return Promise.resolve()
+}
+
+export async function deletePack(host, token, packName) {
+  return Promise.resolve()
+}
+
+export async function downloadFrom(instanceAddress, packName, as, host, token) {
+  return Promise.resolve()
+}
+
+export async function fetchPack(packName, page, pageSize, host, token) {
+  return Promise.resolve()
+}
+
+export async function importFromFS(host, token) {
+  return Promise.resolve()
+}
+
+export async function listPacks(page, pageSize, host, token) {
+  return Promise.resolve()
+}
+
+export async function listRemotePacks(instance, page, pageSize, host, token) {
+  return Promise.resolve()
+}
+
+export async function reloadEmoji(host, token) {
+  return Promise.resolve()
+}
+
+export async function savePackMetadata(host, token, packName, metadata) {
+  return Promise.resolve()
+}
+
+export async function updateEmojiFile(packName, shortcode, newShortcode, newFilename, force, host, token) {
+  return Promise.resolve()
+}

src/api/__mocks__/invites.js

+// SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+// SPDX-License-Identifier: AGPL-3.0-only
+
+let inviteTokens = [
+  { expires_at: '01-01-2020', id: 1, invite_type: 'one_time', max_use: 3, token: 'DCN8XyTsVEuz9_KuxPlkbH1RgMsMHepwmZE2gyX07Jw=', used: false, uses: 1 },
+  { expires_at: '02-02-2020', id: 2, invite_type: 'one_time', max_use: 1, token: 'KnJTHNedj2Mh14ckx06t-VfOuFL8oNA0nVAK1HLeLf4=', used: true, uses: 1 },
+  { expires_at: '03-03-2020', id: 3, invite_type: 'one_time', max_use: 5, token: 'P6F5ayP-rAMbxtmtGJwFJcd7Yk_D2g6UZRfh8EskRUc=', used: false, uses: 0 }
+]
+
+export async function generateInviteToken(max_use, expires_at, authHost, token) {
+  const newToken = {
+    expires_at: '2019-04-10',
+    id: 4,
+    invite_type: 'one_time',
+    max_use: 3,
+    token: 'JYl0SjXW8t-t-pLSZBnZLf6PwjCW-qy6Dq70jfUOuqk=',
+    used: false,
+    uses: 0
+  }
+  inviteTokens = [...inviteTokens, newToken]
+  return Promise.resolve({ data: newToken })
+}
+
+export async function inviteViaEmail(email, name, authHost, token) {
+  return Promise.resolve()
+}
+
+export async function listInviteTokens(authHost, token) {
+  return Promise.resolve({ data: {
+    invites: inviteTokens
+  }})
+}
+
+export async function revokeToken(tokenToRevoke, authHost, token) {
+  inviteTokens.splice(3, 1, { ...inviteTokens[3], used: true })
+  return Promise.resolve()
+}
+