feat: release v1.19.0 (#218)

* feat(CODE): ADDON-58505 Added support of style to page in the global config file (#201) * feat(CODE): ADDON-58505 Added support of style to page in the global config file * feat(CODE): ADDON-58505 Fixed title issue * feat(CODE): ADDON-58505 Remove extra code * ADDON-58896 Setup es-lint & prettier and configured pre-commit hook (#207) * feat(CODE): ADDON-58896 Updated coniguration or JS linter * added js linter in github workflow * ci: run pipeline for release branches as well (#208) * ci: run pipeline for release branches as well * ci: fix pipeline * fix ADDON-58867: Fixed dropdown reset value while clicking on X button (#209) * fix(CODE): ADDON-58867 Fixed value of drop-down field with cancelling button * fix(CODE): ADDON-58867 Added comments * fix(CODE): ADDON-58867 Added discriptive comments * fix: ADDON-57046: Sending file content as a string in the payload (#210) * fix(CODE): ADDON-57046 change datatype of file input from object to stringify-object * feat(CODE): ADDON-57046 Sending file content as a sting in payload * style: ADDON-59062: Fixed JS linter failures (#211) * feat(CODE): ADDON-59062 added auto fix failures * feat(CODE): ADDON-59062 resolved js linter failures manually * feat(CODE): ADDON-59062 resolved js linter failures * style: run eslint --fix Co-authored-by: Artem Rys <rysartem@gmail.com> * fix: follow up fix after the rebase (#212) * feat: ADDON-58758: Implement multilevel dropdown component (#217) * feat(CODE): ADDON-58758 Implement multilevel dropdown in inputs page * feat(CODE): ADDON-58758 refactor the logic to displaying menu-items in custom sequence Co-authored-by: Tushar Balar <62089106+tbalar-splunk@users.noreply.github.com>
splunk · Dec 30, 2022 · e23fbc6 · e23fbc6
1 parent 873be9a
commit e23fbc6
Show file tree

Hide file tree

Showing 41 changed files with 1,144 additions and 703 deletions.
diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
@@ -1,6 +1,14 @@
 module.exports = {
-    extends: '@splunk/eslint-config/browser-prettier',
+    parser: '@babel/eslint-parser',
+    extends: ['@splunk/eslint-config/browser', 'prettier'],
+    plugins: ['prettier'],
     globals: {
-        __non_webpack_require__: true,
+        __DEV__: true,
+        window: true,
+        __non_webpack_require__: 'readonly',
     },
+    rules: {
+        'prettier/prettier': 2,
+        indent: 'off',
+    }
 };
diff --git a/ui/.github/workflows/build-test-release.yml b/ui/.github/workflows/build-test-release.yml
@@ -4,10 +4,11 @@ on:
     branches:
       - "main"
       - "develop"
+      - "release/**"
     tags:
       - "v[0-9]+.[0-9]+.[0-9]+"
   pull_request:
-    branches: [main, develop]
+    branches: [main, develop, "release/**"]
 
 jobs:
   fossa-scan:
@@ -105,7 +106,8 @@ jobs:
         with:
           name: THIRDPARTY
 
-      - run: yarn run setup
+      - run: yarn
+      - run: yarn run eslint
       - run: yarn run build
       - run: |
             yarn list --prod --depth 0 | python .github/scripts/format_yarn_deps.py --output-file=dist/package/appserver/static/js/dependencies.txt

diff --git a/ui/.husky/pre-commit b/ui/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint-staged
diff --git a/ui/.licenserc.yaml b/ui/.licenserc.yaml
@@ -41,4 +41,5 @@ header:
     - "**/*.jsx"
     - "package.json"
     - "src/main/webapp/schema/schema.json"
+    - ".husky/pre-commit"
   comment: on-failure
diff --git a/ui/package.json b/ui/package.json
@@ -15,7 +15,8 @@
     "lint:ci": "yarn run eslint:ci && yarn run stylelint",
     "start": "webpack --watch",
     "setup": "yarn && yarn run build",
-    "stylelint": "stylelint \"src/**/*.{js,jsx}\" --config stylelint.config.js"
+    "stylelint": "stylelint \"src/**/*.{js,jsx}\" --config stylelint.config.js",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@splunk/react-page": "^6.0.2",
@@ -35,6 +36,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/runtime": "^7.20.1",
     "@semantic-release/exec": "semantic-release/exec",
@@ -57,16 +59,27 @@
     "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.2",
     "prettier": "^2.7.1",
     "semantic-release": "^19.0.5",
     "style-loader": "^3.3.1",
     "stylelint": "^14.15.0",
     "url": "^0.11.0",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0",
-    "webpack-merge": "^5.8.0"
+    "webpack-merge": "^5.8.0",
+    "lint-staged": "^12.4.0"
+  },
+  "lint-staged": {
+    "*.{jsx,js}": [
+      "eslint --fix"
+    ],
+    "*.{json, html, css}": [
+      "prettier --write"
+    ]
   },
   "resolutions": {
     "glob-parent": "^5.1.2",

diff --git a/ui/src/main/webapp/components/BaseFormView.jsx b/ui/src/main/webapp/components/BaseFormView.jsx
@@ -70,9 +70,7 @@ class BaseFormView extends PureComponent {
         this.util = {
             setState: (callback) => {
                 this.onSavePromise = new Promise((resolve) => {
-                    this.setState((previousState) => {
-                        return callback(previousState);
-                    }, resolve);
+                    this.setState((previousState) => callback(previousState), resolve);
                 });
             },
             setErrorFieldMsg: this.setErrorFieldMsg,
@@ -172,9 +170,10 @@ class BaseFormView extends PureComponent {
                         };
                         entity.options = {};
                         entity.options.hideClearBtn = true;
-                        entity.options.autoCompleteFields = authType.map((type) => {
-                            return { label: content[type], value: type };
-                        });
+                        entity.options.autoCompleteFields = authType.map((type) => ({
+                            label: content[type],
+                            value: type,
+                        }));
                         temEntities.push(entity);
                     } else {
                         this.isSingleOauth = authType.includes('oauth');
@@ -346,9 +345,7 @@ class BaseFormView extends PureComponent {
             let load = true;
 
             values.forEach((dependency) => {
-                const required = !!this.entities.find((e) => {
-                    return e.field === dependency;
-                }).required;
+                const required = !!this.entities.find((e) => e.field === dependency).required;
 
                 const currentValue = temState[dependency].value;
                 if (required && !currentValue) {
@@ -407,6 +404,7 @@ class BaseFormView extends PureComponent {
         }
     };
 
+    // eslint-disable-next-line react/no-unused-class-component-methods
     handleSubmit = () => {
         this.clearErrorMsg();
         this.props.handleFormSubmit(/* isSubmitting */ true, /* closeEntity */ false);
@@ -591,7 +589,14 @@ class BaseFormView extends PureComponent {
         const body = new URLSearchParams();
         Object.keys(this.datadict).forEach((key) => {
             if (this.datadict[key] != null) {
-                body.append(key, this.datadict[key]);
+                if (
+                    typeof this.datadict[key] === 'object' &&
+                    this.entities.find((x) => x.field === key).type === 'file'
+                ) {
+                    body.append(key, this.datadict[key].fileContent);
+                } else {
+                    body.append(key, this.datadict[key]);
+                }
             }
         });
 
@@ -689,9 +694,7 @@ class BaseFormView extends PureComponent {
                 let load = true;
 
                 value[loadField].forEach((dependency) => {
-                    const required = !!this.entities.find((e) => {
-                        return e.field === dependency;
-                    }).required;
+                    const required = !!this.entities.find((e) => e.field === dependency).required;
 
                     const currentValue =
                         dependency === field ? targetValue : this.state.data[dependency].value;
@@ -714,9 +717,14 @@ class BaseFormView extends PureComponent {
             });
         }
 
-        // This is the custom logic to handle the dropdown's reset value, and we are setting null value
-        const target_value = targetValue === 'RESET_DROPDOWN_VALUE' ? null : targetValue;
-        changes[field] = { value: { $set: target_value } };
+        /*
+         * Custom logic to handle the dropdown's reset value by clicking "X" button.
+         * DO NOT CHANGE: value of targetValue to null or any other value. Keep it as blank string only.
+         * Reason: We are sending a blank string value in the API, and this validation is inside the saveData().
+         */
+
+        const updatedTargetValue = targetValue === 'RESET_DROPDOWN_VALUE' ? '' : targetValue;
+        changes[field] = { value: { $set: updatedTargetValue } };
 
         const newFields = update(this.state, { data: changes });
         const tempState = this.clearAllErrorMsg(newFields);
@@ -725,7 +733,7 @@ class BaseFormView extends PureComponent {
         if (this.hookDeferred) {
             this.hookDeferred.then(() => {
                 if (typeof this.hook.onChange === 'function') {
-                    this.hook.onChange(field, target_value, tempState);
+                    this.hook.onChange(field, updatedTargetValue, tempState);
                 }
             });
         }
@@ -749,26 +757,23 @@ class BaseFormView extends PureComponent {
     };
 
     // Set error in perticular field
+    // eslint-disable-next-line react/no-unused-class-component-methods
     setErrorField = (field) => {
-        this.setState((previousState) => {
-            return update(previousState, { data: { [field]: { error: { $set: true } } } });
-        });
+        this.setState((previousState) =>
+            update(previousState, { data: { [field]: { error: { $set: true } } } })
+        );
     };
 
     // Clear error message
     clearErrorMsg = () => {
         if (this.state.errorMsg) {
-            this.setState((previousState) => {
-                return { ...previousState, errorMsg: '' };
-            });
+            this.setState((previousState) => ({ ...previousState, errorMsg: '' }));
         }
     };
 
     // Set error message
     setErrorMsg = (msg) => {
-        this.setState((previousState) => {
-            return { ...previousState, errorMsg: msg };
-        });
+        this.setState((previousState) => ({ ...previousState, errorMsg: msg }));
     };
 
     // Clear error/warning message and errors from fields
@@ -824,7 +829,8 @@ class BaseFormView extends PureComponent {
                             this.props.serviceName,
                             this.state,
                             this.props.mode,
-                            this.util
+                            this.util,
+                            this.props.groupName
                         );
                         resolve(Hook);
                     }
@@ -967,18 +973,17 @@ class BaseFormView extends PureComponent {
     /*
      * This function will resolve the promise once the provided timeout occurs
      */
-    timeout = (ms) => {
-        return new Promise((resolve) => setTimeout(resolve, ms));
-    };
+    // eslint-disable-next-line class-methods-use-this
+    timeout = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); // eslint-disable-line no-promise-executor-return
 
     renderGroupElements = () => {
         let el = null;
         if (this.groups && this.groups.length) {
             el = this.groups.map((group) => {
                 const collpsibleElement =
                     group.fields?.length &&
-                    group.fields.map((fieldName) => {
-                        return this.entities.map((e) => {
+                    group.fields.map((fieldName) =>
+                        this.entities.map((e) => {
                             if (e.field === fieldName) {
                                 const temState = this.state.data[e.field];
                                 return (
@@ -998,8 +1003,8 @@ class BaseFormView extends PureComponent {
                                 );
                             }
                             return null;
-                        });
-                    });
+                        })
+                    );
 
                 return group.options.isExpandable ? (
                     <CollapsiblePanelWrapper title={group.label}>
@@ -1112,6 +1117,7 @@ BaseFormView.propTypes = {
     currentServiceState: PropTypes.object,
     mode: PropTypes.string,
     handleFormSubmit: PropTypes.func,
+    groupName: PropTypes.string,
 };
 
 export default BaseFormView;