@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/scripts/getDefaultWebpackConfig.js

@@ -5,12 +5,24 @@ const webpack = require('webpack');
 
 const createMockMiddleware = require('./middlewares/mockMiddleware');
 const createProxyMiddleware = (options = {}) => {
-    const proxy = require('http-proxy-middleware');
-    return proxy({
+    const { createProxyMiddleware } = require('http-proxy-middleware');
+    const proxyMiddleware = createProxyMiddleware({
         changeOrigin: true,
         proxyTimeout: 60000,
+        logger: console,
         ...options,
     });
+    return (req, res, next) => {
+        // use proxy for (non local) files and api requests
+        // let history api fallback serve the local index.html
+        // for directly opened pages like http://localhost:3000/designer
+        const accept = req.get('Accept') || req.get('accept');
+        if (!accept.includes('html') || /(\.[^/]{3,4})|(^\/(frontend)?api\/)/.test(req.path)) {
+            proxyMiddleware(req, res, next);
+        } else {
+            next();
+        }
+    };
 };
 
 const entry = ['@babel/polyfill', 'url-search-params-polyfill'];
@@ -23,11 +35,19 @@ const moduleRules = [
     },
     {
         test: /\.(png|jpg|gif|svg)$/,
-        loader: 'url-loader?limit=16384&name=images/[name].[hash].[ext]',
+        loader: 'url-loader',
+        options: {
+            limit: 16384,
+            name: 'images/[name].[hash].[ext]',
+        },
     },
     {
         test: /\.ttf$/,
-        loader: 'url-loader?limit=16384&name=fonts/[name].[hash].[ext]',
+        loader: 'url-loader',
+        options: {
+            limit: 16384,
+            name: 'images/[name].[hash].[ext]',
+        },
     },
 ];
 
@@ -47,6 +67,8 @@ function getDevConfig(dirname, options = {}) {
     const BUILD_DIR = path.resolve(dirname, 'public');
     const APP_DIR = path.resolve(dirname, 'src');
 
+    const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
     let proxyMiddleware;
     if (options.proxy && options.proxy.target) {
         proxyMiddleware = createProxyMiddleware(options.proxy);
@@ -65,17 +87,26 @@ function getDevConfig(dirname, options = {}) {
             filename: 'bundle.js',
             publicPath: '/',
         },
-        devtool: 'cheap-module-eval-source-map',
+        devtool: 'eval-cheap-module-source-map',
         devServer: {
-            hot: true,
-            contentBase: BUILD_DIR,
-            publicPath: '/',
-            historyApiFallback: true,
-            after: function(app) {
-                if (proxyMiddleware) {
-                    mockMiddleware && app.use(mockMiddleware);
-                    app.use(proxyMiddleware);
+            hot: 'only',
+            historyApiFallback: {
+                disableDotRule: true,
+            },
+            setupMiddlewares: (middlewares, devServer) => {
+                if (!devServer) {
+                    throw new Error('webpack-dev-server is not defined');
                 }
+                const origMiddlewares = middlewares;
+                middlewares = [];
+                for (const middleware of origMiddlewares) {
+                    middlewares.push(middleware);
+                    if (middleware.name === 'express-static' && proxyMiddleware) {
+                        mockMiddleware && middlewares.push(mockMiddleware);
+                        middlewares.push(proxyMiddleware);
+                    }
+                }
+                return middlewares;
             },
         },
         module: {
@@ -104,7 +135,7 @@ function getDevConfig(dirname, options = {}) {
             'react/lib/ExecutionEnvironment': true,
             'react/lib/ReactContext': true,
         },
-        plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), monaco],
+        plugins: [monaco, new ReactRefreshPlugin()],
     };
 }
 
@@ -112,18 +143,12 @@ function importPluginsForBuild() {
     try {
         const TerserPlugin = require('terser-webpack-plugin');
         const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-        const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
         return {
             TerserPlugin,
             MiniCssExtractPlugin,
-            OptimizeCSSAssetsPlugin,
         };
     } catch (e) {
-        const packages = [
-            'terser-webpack-plugin',
-            'mini-css-extract-plugin',
-            'optimize-css-assets-webpack-plugin',
-        ];
+        const packages = ['terser-webpack-plugin', 'mini-css-extract-plugin'];
         console.error(
             'To use the build script, please install the following packages: ' + packages.join(', ')
         );
@@ -135,15 +160,13 @@ function getProdConfig(dirname) {
     const BUILD_DIR = path.resolve(dirname, 'public');
     const APP_DIR = path.resolve(dirname, 'src');
 
-    const { TerserPlugin, MiniCssExtractPlugin, OptimizeCSSAssetsPlugin } = importPluginsForBuild();
+    const { TerserPlugin, MiniCssExtractPlugin } = importPluginsForBuild();
 
     const extractSass = new MiniCssExtractPlugin({
         filename: 'bundle.css',
         chunkFilename: 'bundle.[name].css',
     });
 
-    const optimizeCss = new OptimizeCSSAssetsPlugin({});
-
     const minimizer = new TerserPlugin({
         extractComments: true,
         parallel: true,
@@ -188,7 +211,7 @@ function getProdConfig(dirname) {
             ],
             noParse: moduleNoParse,
         },
-        plugins: [env, extractSass, optimizeCss, monaco],
+        plugins: [env, extractSass, monaco],
         optimization: {
             minimizer: [minimizer],
         },

package/src/App/Api.js

@@ -1,196 +0,0 @@
-import axios from 'axios';
-import qs from 'qs';
-import _ from 'lodash';
-
-import networkConf from './Config/network';
-
-const CancelToken = axios.CancelToken;
-let source = CancelToken.source();
-
-/**
- * axios instance to handle API requests
- * @type {AxiosInstance}
- */
-const ax = axios.create({
-    baseURL: networkConf.baseURL,
-    timeout: networkConf.timeout,
-    cancelToken: source.token,
-    //headers: {'X-Custom-Header': 'foobar'}
-
-    paramsSerializer: function(params) {
-        return qs.stringify(params, { arrayFormat: 'brackets' });
-    },
-});
-
-/**
- * The Api class to make all the calls in the entire App
- *  - provides a cancel() method to close running requests
- */
-export class Api {
-    /**
-     * @param {string|object} config
-     * @return {AxiosPromise<any>}
-     */
-    static request(config) {
-        return ax.request(config);
-    }
-
-    static cancel() {
-        source.cancel();
-        source = CancelToken.source();
-        ax.defaults.cancelToken = source.token;
-    }
-
-    /**
-     * Creates a container object for isolated cancellable requests
-     * @return {{}}
-     */
-    static create() {
-        let cancelSource = CancelToken.source();
-        return {
-            /**
-             * @param {string|object} config
-             * @return {AxiosPromise<any>}
-             */
-            request: config => {
-                config = typeof config === 'string' ? { url: config } : config;
-                return axios.request({
-                    ...ax.defaults,
-                    ...config,
-                    cancelToken: cancelSource.token,
-                });
-            },
-            cancel: () => {
-                cancelSource.cancel();
-                cancelSource = CancelToken.source();
-            },
-        };
-    }
-
-    /**
-     * @param {string} language
-     * @return {number}
-     */
-    static setLanguage(language) {
-        if (ax.defaults.params && ax.defaults.params._language === language) {
-            // already set, nothing to do
-            return 0;
-        } else {
-            ax.defaults.params = {
-                ...ax.defaults.params,
-                _language: language || 'en_GB',
-            };
-            return 1;
-        }
-    }
-
-    /**
-     * @param {string} token
-     */
-    static setToken(token) {
-        if (token) {
-            ax.defaults.headers = {
-                ...ax.defaults.headers,
-                Authorization: 'Bearer ' + token,
-            };
-        } else {
-            delete ax.defaults.headers['Authorization'];
-        }
-    }
-}
-
-/**
- * A simple function to match a Cancel error
- *  - useful for identifying manual cancels in the promise catch
- * @param {*} error
- * @returns {boolean}
- */
-export const isCancelError = error => {
-    return error instanceof axios.Cancel;
-};
-
-/**
- *
- */
-export class ObjectFormData {
-    constructor(object) {
-        const data = new FormData();
-        for (let p in object) {
-            data.append(p, object[p]);
-        }
-        Object.defineProperty(data, 'source', {
-            get: function() {
-                return object;
-            },
-        });
-        return data;
-    }
-
-    static getSource(formData) {
-        if (!(formData instanceof FormData)) {
-            throw new Error('Not a FormData instance!');
-        }
-        if ('source' in formData) {
-            return formData.source;
-        }
-        throw new Error('No source stored for FormData!');
-    }
-}
-
-/**
- * Simulating Api calls by returning a single promise
- *  - made only for testing purposes
- *  - the requsetMappings must be populated first by calling addRequestMapping()
- */
-export class ApiSimulator extends Api {
-    static requestMappings = [];
-
-    /**
-     * Add a request (config => response or error) mapping
-     * @param {Object} config - The config to match the response
-     * @param {Object} response - The response object
-     * @param {Object} error - The response error
-     */
-    static addRequestMapping({ config, response, error }) {
-        ApiSimulator.requestMappings.push({ config, response, error });
-    }
-
-    static request(config) {
-        if (config.data instanceof FormData) {
-            config.data = ObjectFormData.getSource(config.data);
-        }
-        const rm = _.find(ApiSimulator.requestMappings, { config });
-        const promise = new Promise((resolve, reject) => {
-            if (!rm) {
-                // eslint-disable-next-line no-console
-                console.log('NO MOCK', config);
-                reject({ error: { message: 'No mock for request', config } });
-            }
-            if (rm.error) {
-                reject(rm);
-            } else {
-                resolve(rm.response);
-            }
-        });
-        return promise;
-    }
-
-    static init() {
-        Api.request = ApiSimulator.request;
-    }
-}
-
-export default Api;
-
-export const setTokenFromStore = store => {
-    // memoize the token so we can detect changes
-    let token = '';
-    const handleChange = () => {
-        const previousToken = token;
-        token = _.get(store.getState(), 'loginData.token');
-        if (token !== previousToken) {
-            Api.setToken(token || false);
-        }
-    };
-    store.subscribe(handleChange);
-};

package/src/App/Config/app.js

@@ -1,57 +0,0 @@
-import defaultConfig from './defaultConfig';
-
-const flattenFeatures = featuresRoot => {
-    const features = [];
-    featuresRoot.forEach(feature => {
-        if (feature.items instanceof Array) {
-            const sub = flattenFeatures(feature.items);
-            for (let si = 0; si < sub.length; si++) {
-                features.push(sub[si]);
-            }
-        } else {
-            // add it only when it is not a group
-            features.push(feature);
-        }
-    });
-    return features;
-};
-
-export const getFlattenedFeatures = () => flattenFeatures(config.features);
-
-export const isFeatureAvailable = featureName => {
-    const ff = getFlattenedFeatures();
-    for (let f of ff) {
-        if (f.name === featureName) {
-            return true;
-        }
-    }
-    return false;
-};
-
-export const config = {
-    ...defaultConfig,
-    ...(window.config || {}),
-};
-
-export default config;
-
-export const locales = [
-    {
-        code: 'en-GB',
-        label: 'English (GB)',
-    },
-    {
-        code: 'de-DE',
-        label: 'Deutsch (DE)',
-    },
-];
-
-/**
- * Updates the config object with custom values
- * Use this function in custom client projects to modify the default configuration
- * @param {object|function} customAppConf
- * @return {object}
- */
-export function setConfiguration(customAppConf) {
-    return Object.assign(config, customAppConf instanceof Function ? customAppConf(config) : customAppConf);
-}

package/src/App/Config/defaultConfig.js

@@ -1,183 +0,0 @@
-export default {
-    language: 'de_DE',
-    features: [
-        {
-            name: 'items',
-            items: [
-                {
-                    name: 'items',
-                    label: 'productdata',
-                },
-                {
-                    name: 'inspirations',
-                    label: 'inspirations.menuLabel',
-                },
-                {
-                    name: 'coredata',
-                    items: [
-                        {
-                            name: 'attributes',
-                        },
-                        {
-                            name: 'attribute_values',
-                        },
-                        {
-                            name: 'groups',
-                        },
-                        {
-                            name: 'group_entries',
-                        },
-                        {
-                            name: 'item_classifications',
-                            label: 'itemclassifications.menuLabel',
-                        },
-                    ],
-                },
-                {
-                    name: 'configuration_variants',
-                },
-            ],
-        },
-        {
-            name: 'creatoritems',
-            credentials: ['items_creator'],
-            items: [
-                {
-                    name: 'creator',
-                    label: 'creator_data',
-                },
-                {
-                    name: 'option_classifications',
-                    pathName: 'components',
-                },
-                {
-                    name: 'options',
-                },
-                {
-                    name: 'option_pools',
-                },
-            ],
-        },
-        {
-            name: 'designeritems',
-            credentials: ['items_designer'],
-            items: [
-                {
-                    name: 'designer',
-                    label: 'designer_data',
-                },
-                {
-                    name: 'design_templates',
-                },
-                {
-                    name: 'image_gallery',
-                },
-                {
-                    name: 'designer_global_item_prices',
-                },
-                {
-                    name: 'coredata',
-                    items: [
-                        {
-                            name: 'design_production_methods',
-                            label: 'design_production_methods',
-                        },
-                        {
-                            name: 'fonts',
-                        },
-                        {
-                            name: 'color_palettes',
-                        },
-                        {
-                            name: 'designer_global_calculation_types',
-                        },
-                        {
-                            name: 'tags',
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            name: 'finderitems',
-            label: 'finder',
-            credentials: ['question_trees'],
-            items: [
-                {
-                    name: 'finder',
-                    label: 'question_trees',
-                },
-            ],
-        },
-        {
-            name: 'configurations',
-            label: 'user_configuration',
-            items: [
-                {
-                    name: 'configurations',
-                },
-                {
-                    name: 'receive_offer_requests',
-                },
-                {
-                    name: 'release_workflow',
-                },
-            ],
-        },
-        {
-            name: 'basic_settings',
-            items: [
-                {
-                    name: 'default_client',
-                },
-                {
-                    name: 'current_client',
-                },
-                {
-                    name: 'channels',
-                },
-                {
-                    name: 'trackingCodes',
-                },
-                {
-                    name: 'licenses',
-                },
-                {
-                    name: 'users',
-                    label: 'access_rights',
-                    items: [
-                        {
-                            name: 'users',
-                        },
-                        {
-                            name: 'roles',
-                        },
-                        {
-                            name: 'api_keys',
-                        },
-                    ],
-                },
-                {
-                    name: 'settings',
-                },
-                {
-                    name: 'translation_file_handling',
-                },
-                {
-                    name: 'softwareupdates',
-                    label: 'Updates',
-                },
-            ],
-        },
-        {
-            name: 'clients',
-        },
-        {
-            name: 'changepassword',
-        },
-    ],
-    basePath: '/',
-    baseURL: 'api/',
-    //timeout: 30000, // The timeout of the Api requests
-    //configuratorBasePath: 'http://localhost:3001/',
-};

package/src/App/Config/icons.js

@@ -1,17 +0,0 @@
-/**
- * Map for menupoint name => material ui icon to use
- * see the list @ https://material.io/tools/icons/
- */
-const iconMap = {
-    items: 'local_offer',
-    creatoritems: 'perm_data_setting',
-    designeritems: 'create',
-    finderitems: 'filter_alt',
-    configurations: 'format_list_bulleted',
-    basic_settings: 'settings',
-    clients: 'filter_9_plus',
-};
-
-export default iconMap;
-
-export const addIconMap = iconMapObj => Object.assign(iconMap, iconMapObj);

package/src/App/Config/network.js

@@ -1,19 +0,0 @@
-const isProduction = process.env.NODE_ENV === 'production';
-
-import { config } from './app';
-
-const basePath = config.basePath || '/';
-
-export default {
-    basePath: basePath,
-
-    baseURL: basePath + (!isProduction ? 'api/' : config.baseURL || 'api/'),
-
-    frontendBaseURL: basePath + (!isProduction ? 'frontendapi/' : config.frontendBaseURL || 'frontendapi/'),
-
-    timeout: config.timeout || 60000,
-
-    assemblyPointEditorBaseURL: basePath + 'images/configuratorimages/defaultview/',
-
-    configuratorBasePath: config.configuratorBasePath || basePath,
-};