Skip to content

Commit

Permalink
feat: allow esm JS modules as custom ui extensions to support externa…
Browse files Browse the repository at this point in the history 
…l deps
  • Loading branch information
@harshpatel-crest
harshpatel-crest committed May 24, 2021
1 parent 7b3f349 commit a2cc734
Show file tree
Hide file tree
Showing 8 changed files with 122 additions and 50 deletions.
14 changes: 7 additions & 7 deletions ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@
"@splunk/splunk-utils": "^2.0.0",
"@splunk/themes": "^0.7.0",
"axios": "^0.21.1",
"jsonschema": "^1.4.0",
"immutability-helper": "^3.1.1",
"jsonschema": "^1.4.0",
"react": "^16.12.0",
"styled-components": "^5.1.1",
"react-router-dom": "^5.2.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.2.0",
"styled-components": "^5.1.1",
"uuid": "^8.3.2"
},
"devDependencies": {
Expand All @@ -41,13 +41,13 @@
"@splunk/babel-preset": "^3.0.0",
"@splunk/eslint-config": "^4.0.0",
"@splunk/stylelint-config": "^4.0.0",
"postcss": "^8.2.10",
"@splunk/webpack-configs": "^5.0.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.0.4",
"chai": "^3.5.0",
"copy-webpack-plugin": "^4.5.2",
"cross-env": "^7.0.3",
"css-loader": "^5.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^7.14.0",
Expand All @@ -59,14 +59,14 @@
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"postcss": "^8.2.10",
"prettier": "^2.0.5",
"semantic-release": "^17.4.2",
"style-loader": "^2.0.0",
"stylelint": "^13.0.0",
"webpack": "^4.16.2",
"webpack-cli": "^3.1.0",
"webpack-merge": "^4.1.3",
"css-loader": "^5.2.0",
"style-loader": "^2.0.0"
"webpack-merge": "^4.1.3"
},
"engines": {
"node": ">=6"
Expand Down
70 changes: 52 additions & 18 deletions ui/src/main/webapp/components/BaseFormView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,11 @@ class BaseFormView extends PureComponent {
this.updateEntitiesForGroup(service);
this.options = service.options;
if (service.hook) {
this.hookDeferred = this.loadHook(service.hook.src, globalConfig);
this.hookDeferred = this.loadHook(
service.hook.src,
service.hook.type,
globalConfig
);
}
if (props.mode === MODE_EDIT || props.mode === MODE_CLONE) {
this.currentInput = context.rowData[props.serviceName][props.stanzaName];
Expand All @@ -110,7 +114,11 @@ class BaseFormView extends PureComponent {
this.entities = tab.entity;
this.options = tab.options;
if (tab.hook) {
this.hookDeferred = this.loadHook(tab.hook.src, globalConfig);
this.hookDeferred = this.loadHook(
tab.hook.src,
tab.hook.type,
globalConfig
);
}
if (tab.table && (props.mode === MODE_EDIT || props.mode === MODE_CLONE)) {
this.currentInput = context.rowData[props.serviceName][props.stanzaName];
Expand Down Expand Up @@ -333,6 +341,7 @@ class BaseFormView extends PureComponent {
if (this.hookDeferred) {
this.hookDeferred.then(() => {
if (typeof this.hook.onCreate === 'function') {
// TODO: try catch to stop UI break
this.hook.onCreate();
}
});
Expand Down Expand Up @@ -734,21 +743,37 @@ class BaseFormView extends PureComponent {
};

// generatesubmitMessage
loadHook = (module, globalConfig) => {
loadHook = (module, type, globalConfig) => {
const myPromise = new Promise((resolve) => {
import(/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${module}.js`).then(
(external) => {
const Hook = external.default;
this.hook = new Hook(
globalConfig,
this.props.serviceName,
this.state,
this.props.mode,
this.util
);
resolve(Hook);
}
);
if (type === 'external') {
import(/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${module}.js`).then(
(external) => {
const Hook = external.default;
this.hook = new Hook(
globalConfig,
this.props.serviceName,
this.state,
this.props.mode,
this.util
);
resolve(Hook);
}
);
} else {
__non_webpack_require__(
[`app/${this.appName}/js/build/custom/${module}`],
(Hook) => {
this.hook = new Hook(
globalConfig,
this.props.serviceName,
this.state,
this.props.mode,
this.util
);
resolve(Hook);
}
);
}
});
return myPromise;
};
Expand Down Expand Up @@ -927,7 +952,11 @@ class BaseFormView extends PureComponent {
if (this.hookDeferred) {
this.hookDeferred.then(() => {
if (typeof this.hook.onRender === 'function') {
this.hook.onRender();
try {
this.hook.onRender();
} catch (err) {
console.error(err);
}
}
});
}
Expand All @@ -936,7 +965,11 @@ class BaseFormView extends PureComponent {
if (this.hookDeferred) {
this.hookDeferred.then(() => {
if (typeof this.hook.onEditLoad === 'function') {
this.hook.onEditLoad();
try {
this.hook.onEditLoad();
} catch (err) {
console.error(err);
}
}
});
}
Expand All @@ -957,6 +990,7 @@ class BaseFormView extends PureComponent {
const temState = this.state.data[e.field];

if (temState.placeholder) {
// eslint-disable-next-line no-param-reassign
e = {
...e,
options: { ...e.options, placeholder: temState.placeholder },
Expand Down
28 changes: 19 additions & 9 deletions ui/src/main/webapp/components/CustomControl.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,13 @@ class CustomControl extends Component {

componentDidMount() {
const globalConfig = getUnifiedConfigs();
const appName = globalConfig.meta.name;

this.loadCustomControl(this.props.controlOptions.src).then((Control) => {
this.loadCustomControl(
this.props.controlOptions.src,
this.props.controlOptions.type,
appName
).then((Control) => {
const customControl = new Control(
globalConfig,
this.el,
Expand All @@ -42,16 +47,21 @@ class CustomControl extends Component {
return false;
}

loadCustomControl = (module) => {
const myPromise = new Promise((resolve) => {
import(/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${module}.js`).then(
(external) => {
const Control = external.default;
loadCustomControl = (module, type, appName) => {
return new Promise((resolve) => {
if (type === 'external') {
import(/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${module}.js`).then(
(external) => {
const Control = external.default;
resolve(Control);
}
);
} else {
__non_webpack_require__([`app/${appName}/js/build/custom/${module}`], (Control) => {
resolve(Control);
}
);
});
}
});
return myPromise;
};

setValue = (newValue) => {
Expand Down
26 changes: 18 additions & 8 deletions ui/src/main/webapp/components/CustomMenu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,24 @@ class CustomMenu extends Component {
};

loadCustomMenu = () => {
const globalConfig = getUnifiedConfigs();
const appName = globalConfig.meta.name;
return new Promise((resolve) => {
import(
/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${this.props.fileName}.js`
).then((external) => {
const Control = external.default;
resolve(Control);
});
if (this.props.type === 'external') {
import(
/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${
this.props.fileName
}.js`
).then((external) => {
const Control = external.default;
resolve(Control);
});
} else {
const globalConfig = getUnifiedConfigs();
const appName = globalConfig.meta.name;
__non_webpack_require__(
[`app/${appName}/js/build/custom/${this.props.fileName}`],
(Control) => resolve(Control)
);
}
});
};

Expand All @@ -67,6 +76,7 @@ class CustomMenu extends Component {

CustomMenu.propTypes = {
fileName: PropTypes.string.isRequired,
type: PropTypes.string,
handleChange: PropTypes.func,
};

Expand Down
30 changes: 23 additions & 7 deletions ui/src/main/webapp/components/table/CustomTableControl.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,18 +42,33 @@ class CustomTableControl extends Component {

loadCustomControl = () => {
return new Promise((resolve) => {
import(
/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${this.props.fileName}.js`
).then((external) => {
const Control = external.default;
resolve(Control);
});
if (this.props.type === 'external') {
import(
/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${
this.props.fileName
}.js`
).then((external) => {
const Control = external.default;
resolve(Control);
});
} else {
const globalConfig = getUnifiedConfigs();
const appName = globalConfig.meta.name;
__non_webpack_require__(
[`app/${appName}/js/build/custom/${this.props.fileName}`],
(Control) => resolve(Control)
);
}
});
};

render() {
if (!this.state.loading) {
this.customControl.render(this.props.row, this.props.field);
try {
this.customControl.render(this.props.row, this.props.field);
} catch (err) {
console.error(err);
}
}
return (
<>
Expand All @@ -76,6 +91,7 @@ CustomTableControl.propTypes = {
row: PropTypes.object.isRequired,
field: PropTypes.string,
fileName: PropTypes.string.isRequired,
type: PropTypes.string,
};

export default CustomTableControl;
1 change: 1 addition & 0 deletions ui/src/main/webapp/components/table/CustomTableRow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ function CustomTableRow(props) {
field: header.field,
row: customRow,
fileName: header.customCell.src,
type: header.customCell.type,
});
};

Expand Down
1 change: 1 addition & 0 deletions ui/src/main/webapp/pages/Input/InputPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@ function InputPage() {
<ColumnLayout.Column span={3} className="input_button">
{React.createElement(CustomMenu, {
fileName: customMenuField.src,
type: customMenuField.type,
handleChange: changeRoute,
})}
</ColumnLayout.Column>
Expand Down
2 changes: 1 addition & 1 deletion ui/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,5 @@ module.exports = webpackMerge(baseConfig, {
},
]),
],
devtool: 'eval-source-map',
devtool: 'inline-source-map',
});

0 comments on commit a2cc734

Please sign in to comment.