IBX-1007: [Admin UI] As a developer I want to have js code style used in code

.eslintrc.json

@@ -1,34 +1,3 @@
 {
-    "plugins": ["react"],
-    "extends": ["eslint:recommended", "plugin:react/recommended"],
-    "env": {
-        "browser": true,
-        "commonjs": true,
-        "es6": true,
-        "node": true
-    },
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "sourceType": "module",
-        "ecmaVersion": 9
-    },
-    "rules": {
-        "no-const-assign": "warn",
-        "no-this-before-super": "warn",
-        "no-undef": "warn",
-        "no-unreachable": "warn",
-        "no-unused-vars": "warn",
-        "constructor-super": "warn",
-        "valid-typeof": "warn",
-        "no-extra-semi": "error",
-        "no-extra-boolean-cast": "off",
-        "react/jsx-uses-react": "error",
-        "react/jsx-uses-vars": "error",
-        "jsx-quotes": ["error", "prefer-double"],
-        "quotes": ["error", "single", { "allowTemplateLiterals": true }],
-        "eqeqeq": ["error", "always"],
-        "indent": ["error", 4]
-    }
+    "extends": "eslint-config-ibexa"
 }

.github/workflows/frontend-ci.yaml

@@ -0,0 +1,26 @@
+name: Frontend build
+
+on:
+    push:
+        paths:
+            - "**.js"
+        branches:
+            - main
+            - '[0-9]+.[0-9]+'
+    pull_request:
+        paths:
+            - "**.js"
+
+jobs:
+    frontend-test:
+        name: Frontend build test
+        runs-on: "ubuntu-20.04"
+        timeout-minutes: 5
+
+        steps:
+            -   uses: actions/checkout@v2
+            -   uses: actions/setup-node@v2
+                with:
+                    node-version: '14'
+            -   run: yarn install
+            -   run: yarn test

package.json

@@ -1,31 +1,13 @@
 {
-  "name": "PlatformAdminUIBundle",
-  "version": "1.0.0",
-  "description": "Platform Admin UI Bundle",
-  "repository": "https://github.com/ezsystems/ezplatform-admin-ui.git",
-  "dependencies": {
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-scripts": "1.0.13",
-    "alloyeditor": "^1.4"
-  },
-  "devDependencies": {
-    "babel": "^6.23.0",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.8",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "clean-webpack-plugin": "^0.1.16",
-    "css-loader": "^0.28.5",
-    "eslint-plugin-react": "^7.3.0",
-    "prop-types": "^15.5.10",
-    "style-loader": "^0.18.2",
-    "uglifyjs-webpack-plugin": "^0.4.6",
-    "webpack": "^3.5.5"
-  },
-  "scripts": {
-    "componentize": "webpack"
-  }
+    "name": "admin-ui",
+    "repository": "[email protected]:ibexa/admin-ui.git",
+    "private": true,
+    "dependencies": {},
+    "devDependencies": {
+        "eslint-config-ibexa": "https://github.com/ibexa/eslint-config-ibexa.git"
+    },
+    "scripts": {
+        "test": "yarn eslint-test",
+        "eslint-test": "eslint \"./src/bundle/Resources/**/*.js\" \"./src/bundle/ui-dev/**/*.js\""
+    }
 }

src/bundle/Resources/encore/ibexa.config.js

@@ -1,4 +1,3 @@
-const path = require('path');
 const addJSEntries = require('./ibexa.js.config.js');
 const addCSSEntries = require('./ibexa.css.config.js');
 

src/bundle/Resources/encore/ibexa.js.config.js

@@ -202,17 +202,17 @@ module.exports = (Encore) => {
             path.resolve(__dirname, '../../ui-dev/src/modules/universal-discovery/content.meta.preview.module.js'),
             path.resolve(
                 __dirname,
-                '../../ui-dev/src/modules/universal-discovery/components/content-create-button/content.create.button.js'
+                '../../ui-dev/src/modules/universal-discovery/components/content-create-button/content.create.button.js',
             ),
             path.resolve(
                 __dirname,
-                '../../ui-dev/src/modules/universal-discovery/components/content-edit-button/selected.item.edit.button.js'
+                '../../ui-dev/src/modules/universal-discovery/components/content-edit-button/selected.item.edit.button.js',
             ),
             path.resolve(__dirname, '../../ui-dev/src/modules/universal-discovery/components/sort-switcher/sort.switcher.js'),
             path.resolve(__dirname, '../../ui-dev/src/modules/universal-discovery/components/view-switcher/view.switcher.js'),
             path.resolve(
                 __dirname,
-                '../../ui-dev/src/modules/universal-discovery/components/tree-item-toggle-selection/tree.item.toggle.selection.js'
+                '../../ui-dev/src/modules/universal-discovery/components/tree-item-toggle-selection/tree.item.toggle.selection.js',
             ),
         ])
         .addEntry('ibexa-admin-ui-mfu-js', [

src/bundle/Resources/public/js/scripts/admin.anchor.navigation.js

@@ -1,4 +1,4 @@
-(function(global, doc, ibexa) {
+(function (global, doc) {
     const scrollOffset = 300;
     const formContainerNode = doc.querySelector('.ibexa-edit-content');
     const allSections = [...doc.querySelectorAll('.ibexa-anchor-navigation-sections__section')];
@@ -17,7 +17,7 @@
     const navigateTo = (event) => {
         const { anchorTargetSectionId } = event.currentTarget.dataset;
         const targetSection = [...doc.querySelectorAll('.ibexa-anchor-navigation-sections__section')].find(
-            (section) => section.dataset.anchorSectionId == anchorTargetSectionId
+            (section) => section.dataset.anchorSectionId === anchorTargetSectionId,
         );
 
         if (isVerticalScrollVisible()) {
@@ -51,4 +51,4 @@
             }
         });
     }
-})(window, window.document, window.ibexa);
+})(window, window.document);

src/bundle/Resources/public/js/scripts/admin.card.toggle.group.js

@@ -1,4 +1,4 @@
-(function(global, doc) {
+(function (global, doc) {
     const togglers = doc.querySelectorAll('.ibexa-card__body-display-toggler');
     const toggleFieldTypeView = (event) => {
         event.preventDefault();

src/bundle/Resources/public/js/scripts/admin.content.edit.js

@@ -1,4 +1,4 @@
-(function(global, doc, ibexa, Translator) {
+(function (global, doc, ibexa, Translator, moment) {
     const ENTER_KEY_CODE = 13;
     const SIMPLIFIED_MESSAGE_TIMEOUT = 3000;
     const STATUS_ERROR = 'error';
@@ -97,10 +97,10 @@
     const isFormValid = (btn) => {
         const validators = ibexa.fieldTypeValidators;
         const validationResults = validators.map(getValidationResults);
-        const isFormValid = validationResults.every((result) => result.isValid);
+        const isValid = validationResults.every((result) => result.isValid);
         const invalidSections = validators.map(getInvalidSections);
 
-        if (isFormValid) {
+        if (isValid) {
             btn.dataset.isFormValid = 1;
 
             return true;
@@ -236,4 +236,4 @@
     menuButtonsToValidate.forEach((btn) => {
         btn.addEventListener('click', validateHandler, false);
     });
-})(window, window.document, window.ibexa, window.Translator);
+})(window, window.document, window.ibexa, window.Translator, window.moment);

src/bundle/Resources/public/js/scripts/admin.content.tree.js

@@ -16,7 +16,7 @@
         }
 
         contentTreeContainer.style.width = null;
-    }
+    };
     const renderTree = () => {
         ReactDOM.render(
             React.createElement(ibexa.modules.ContentTree, {
@@ -25,9 +25,9 @@
                 rootLocationId: parseInt(treeRootLocationId, 10),
                 restInfo: { token, siteaccess },
             }),
-            contentTreeRootElement
+            contentTreeRootElement,
         );
-    }
+    };
 
     doc.body.addEventListener('ibexa-tb-rendered', removeContentTreeContainerWidth);
 

src/bundle/Resources/public/js/scripts/admin.contenttype.copy.js

@@ -1,4 +1,4 @@
-(function(global, doc, ibexa, Routing) {
+(function (global, doc, ibexa, Routing) {
     const copyButtons = doc.querySelectorAll('.ibexa-btn--copy-content-type');
     const copyContentType = ({ currentTarget }) => {
         const contentTypeCopyForm = doc.querySelector('form[name="content_type_copy"]');

src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js

@@ -1,4 +1,4 @@
-(function(global, doc, ibexa, Routing, Translator) {
+(function (global, doc, ibexa, Routing, Translator) {
     const TIMEOUT_REMOVE_PLACEHOLDERS = 1500;
     const SELECTOR_INPUTS_TO_VALIDATE = '.ibexa-input[required]:not([disabled]):not([hidden])';
     let targetContainer = null;
@@ -37,7 +37,7 @@
             contentType: 'application/vnd.ibexa.api.ContentTypeFieldDefinitionReorder+json',
         },
     };
-    const popupMenu = new ibexa.core.PopupMenu({
+    new ibexa.core.PopupMenu({
         popupMenuElement,
         triggerElement: addGroupTriggerBtn,
         onItemClick: (event) => {

src/bundle/Resources/public/js/scripts/admin.contenttype.relation.default.location.js

@@ -1,4 +1,4 @@
-(function(global, doc, ibexa, React, ReactDOM) {
+(function (global, doc, ibexa, React, ReactDOM) {
     const SELECTOR_RESET_STARTING_LOCATION_BTN = '.ibexa-btn--reset-starting-location';
     const resetStartingLocationBtns = doc.querySelectorAll(SELECTOR_RESET_STARTING_LOCATION_BTN);
     const udwBtns = doc.querySelectorAll('.ibexa-btn--udw-relation-default-location');
@@ -36,7 +36,7 @@
                 multiple: false,
                 ...config,
             }),
-            udwContainer
+            udwContainer,
         );
     };
     const toggleResetStartingLocationBtn = (button, isEnabled) => {
@@ -74,7 +74,7 @@
                 removeLocationBtns.forEach((btn) => btn.addEventListener('click', resetStartingLocation, false));
             });
         },
-        false
+        false,
     );
 
     resetStartingLocationBtns.forEach((btn) => btn.addEventListener('click', resetStartingLocation, false));

src/bundle/Resources/public/js/scripts/admin.contenttype.selection.js

@@ -1,4 +1,4 @@
-(function(global, doc) {
+(function (global, doc) {
     const SELECTOR_TEMPLATE = '.ezselection-settings-option-value-prototype';
     const SELECTOR_OPTION = '.ezselection-settings-option-value';
     const SELECTOR_OPTIONS_LIST = '.ezselection-settings-option-list';
@@ -45,6 +45,6 @@
                 }
             });
         },
-        false
+        false,
     );
 })(window, window.document);

src/bundle/Resources/public/js/scripts/admin.context.menu.js

@@ -1,4 +1,4 @@
-(function(global, doc, ibexa) {
+(function (global, doc, ibexa) {
     const adapatItemsContainer = doc.querySelector('.ibexa-context-menu');
 
     if (!adapatItemsContainer) {

src/bundle/Resources/public/js/scripts/admin.dropdown.js

@@ -1,4 +1,4 @@
-(function(global, doc, ibexa) {
+(function (global, doc, ibexa) {
     const dropdowns = doc.querySelectorAll('.ibexa-dropdown:not(.ibexa-dropdown--custom-init)');
 
     dropdowns.forEach((dropdownContainer) => {

src/bundle/Resources/public/js/scripts/admin.form.autosubmit.js

@@ -1,4 +1,4 @@
-(function(global, doc) {
+(function (global, doc) {
     const autosubmit = (event) => {
         const form = event.target.closest('form');
 

src/bundle/Resources/public/js/scripts/admin.format.date.js

@@ -1,10 +1,10 @@
-(function(moment) {
+(function (moment) {
     /*
         ([yqLdDeEcaZ])\1* -> find any pattern of one or repeated one of these characters
         or
         \'([^\']|(\'\'))*\' -> find any string in ' ' quotes
     */
-    const formatICUEx = /([yqLdDeEcaZ])\1*|\'([^\']|(\'\'))*\'/g;
+    const formatICUEx = /([yqLdDeEcaZ])\1*|'([^']|(''))*'/g;
     /*
         Allowed formats:
             y, yy, yyyy, Y, YY, YYYY,
@@ -54,74 +54,20 @@
         ZZZ: 'ZZ',
         ZZZZ: 'Z',
     };
-    const formatPHPEx = /[dDjlNSwzWFmMntLoYyaABgGhHisueIOPTZcrU]/g;
-    const formatPHPMap = {
-        d: 'DD',
-        D: 'ddd',
-        j: 'D',
-        l: 'dddd',
-        N: 'E',
-        S: function() {
-            return `[${this.format('Do').replace(/\d*/g, '')}]`;
-        },
-        w: 'd',
-        z: function() {
-            return this.format('DDD') - 1;
-        },
-        W: 'W',
-        F: 'MMMM',
-        m: 'MM',
-        M: 'MMM',
-        n: 'M',
-        t: function() {
-            return this.daysInMonth();
-        },
-        L: function() {
-            return this.isLeapYear() ? 1 : 0;
-        },
-        o: 'GGGG',
-        Y: 'YYYY',
-        y: 'YY',
-        a: 'a',
-        A: 'A',
-        B: function() {
-            var thisUTC = this.clone().utc(),
-                swatch = ((thisUTC.hours() + 1) % 24) + thisUTC.minutes() / 60 + thisUTC.seconds() / 3600;
-            return Math.floor((swatch * 1000) / 24);
-        },
-        g: 'h',
-        G: 'H',
-        h: 'hh',
-        H: 'HH',
-        i: 'mm',
-        s: 'ss',
-        u: '[u]',
-        e: '[e]',
-        I: function() {
-            return this.isDST() ? 1 : 0;
-        },
-        O: 'ZZ',
-        P: 'Z',
-        T: '[T]',
-        Z: function() {
-            return parseInt(this.format('ZZ'), 10) * 36;
-        },
-        c: 'YYYY-MM-DD[T]HH:mm:ssZ',
-        r: 'ddd, DD MMM YYYY HH:mm:ss ZZ',
-        U: 'X',
-    };
 
-    const formatEscapedString = function(icuStr) {
-        if (icuStr === '\'\'') {
-            return '[\']';
+    const formatEscapedString = function (icuStr) {
+        // eslint-disable-next-line quotes
+        if (icuStr === "''") {
+            return "[']"; // eslint-disable-line quotes
         }
 
-        return icuStr.replace(/\'(.*)\'/g, '[$1]').replace(/\'\'/g, '\'');
-    }
+        return icuStr.replace(/'(.*)'/g, '[$1]').replace(/''/g, "'"); // eslint-disable-line quotes
+    };
 
-    moment.fn.formatICU = function(format) {
+    moment.fn.formatICU = function (format) {
         const form = format.replace(formatICUEx, (icuStr) => {
-            if (icuStr[0] === '\'') {
+            // eslint-disable-next-line quotes
+            if (icuStr[0] === "'") {
                 return formatEscapedString(icuStr);
             }
 

src/bundle/Resources/public/js/scripts/admin.input.text.js

@@ -1,4 +1,4 @@
-(function(global, doc) {
+(function (global, doc) {
     const clearText = (event) => {
         const inputWrapper = event.target.closest('.ibexa-input-text-wrapper');
         const textInput = inputWrapper.querySelector('.ibexa-input--text');