sync with ucc_ui_lib migration

splunk_add_on_ucc_framework/ucc_ui_lib/package.json

@@ -31,6 +31,7 @@
     "@splunk/stylelint-config": "^4.0.0",
     "@splunk/themes": "^0.7.0",
     "@splunk/webpack-configs": "^5.0.0",
+    "axios": "^0.21.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.4",
     "chai": "^3.5.0",

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/nav/default.xml

@@ -1,5 +1,5 @@
 <nav>
     <view name="inputs" />
-    <view name="configuration" default="true"/>
+    <view name="configuration" default="true" />
     <view name="search" />
 </nav>

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/CheckBoxComponent.jsx

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Switch from '@splunk/react-ui/Switch';
+
+class CheckBoxComponent extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    handleChange = (e) => {
+        this.props.handleChange(this.props.id, 1 - this.props.value);
+    };
+
+    render() {
+        return (
+            <Switch
+                key={this.props.field}
+                value={this.props.field}
+                onClick={this.handleChange}
+                disabled={this.props.disabled}
+                selected={this.props.value ? true : false}
+                appearance="checkbox"
+            ></Switch>
+        );
+    }
+}
+
+CheckBoxComponent.propTypes = {
+    id: PropTypes.number.isRequired,
+    value: PropTypes.string,
+    handleClick: PropTypes.func.isRequired,
+    field: PropTypes.string,
+    controlOptions: PropTypes.object,
+};
+
+export default CheckBoxComponent;

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/MultiInputControl.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Multiselect from '@splunk/react-ui/Multiselect';
+
+function MultiInputControl(props) {
+    const { id, field, disabled = false, value, controlOptions, ...restProps } = props;
+    const { items, placeholder, createSearchChoice, delimiter = ',' } = controlOptions;
+
+    function handleChange(e, { values }) {
+        restProps.handleChange(id, values.join(delimiter));
+    }
+
+    const valueList = value ? value.split(delimiter) : [];
+
+    return (
+        <Multiselect
+            values={valueList}
+            name={field}
+            placeholder={placeholder}
+            disabled={disabled}
+            allowNewValues={createSearchChoice}
+            onChange={handleChange}
+        >
+            {items.map((item) => (
+                <Multiselect.Option label={item.label} value={item.value} key={item.value} />
+            ))}
+        </Multiselect>
+    );
+}
+
+MultiInputControl.propTypes = {
+    id: PropTypes.number.isRequired,
+    disabled: PropTypes.bool,
+    value: PropTypes.string,
+    handleChange: PropTypes.func.isRequired,
+    field: PropTypes.string,
+    controlOptions: PropTypes.shape({
+        delimiter: PropTypes.string,
+        placeholder: PropTypes.string,
+        createSearchChoice: PropTypes.bool,
+        items: PropTypes.arrayOf(
+            PropTypes.shape({
+                label: PropTypes.string.isRequired,
+                value: PropTypes.string.isRequired,
+            })
+        ).isRequired,
+    }),
+};
+
+export default MultiInputControl;

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/RadioComponent.jsx

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import RadioBar from '@splunk/react-ui/RadioBar';
+
+class RadioComponent extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    handleChange = (e, { value }) => {
+        this.props.handleChange(this.props.id, value);
+    };
+
+    render() {
+        return (
+            <RadioBar
+                inline
+                onChange={this.handleChange}
+                value={this.props.value}
+                key={this.props.field}
+            >
+                {this.props.controlOptions.items.map(item => (
+                    <RadioBar.Option key={item.value} value={item.value} label={item.label} />
+                ))}
+            </RadioBar>
+        );
+    }
+}
+
+RadioComponent.propTypes = {
+    id: PropTypes.number.isRequired,
+    value: PropTypes.string,
+    handleChange: PropTypes.func.isRequired,
+    field: PropTypes.string,
+    controlOptions: PropTypes.object
+};
+
+
+export default RadioComponent;
+

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/SingleInputControl.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from '@splunk/react-ui/Select';
+
+function SingleInputControl(props) {
+    const { id, field, disabled = false, value, controlOptions, ...restProps } = props;
+    const { autoCompleteFields } = controlOptions;
+
+    function handleChange(e, { value }) {
+        restProps.handleChange(id, value);
+    }
+
+    function generateOptions() {
+        const data = [];
+        autoCompleteFields.forEach((item) => {
+            if (item.value && item.label) {
+                data.push(<Select.Option label={item.label} value={item.value} key={item.value} />);
+            }
+            if (item.children && item.label) {
+                data.push(<Select.Heading key={item.label}>{item.label}</Select.Heading>);
+                item.children.forEach((child) => {
+                    data.push(
+                        <Select.Option label={child.label} value={child.value} key={child.value} />
+                    );
+                });
+            }
+        });
+        return data;
+    }
+
+    return (
+        <Select value={value} name={field} disabled={disabled} onChange={handleChange}>
+            {generateOptions()}
+        </Select>
+    );
+}
+
+SingleInputControl.propTypes = {
+    id: PropTypes.number.isRequired,
+    disabled: PropTypes.bool,
+    value: PropTypes.string,
+    handleChange: PropTypes.func.isRequired,
+    field: PropTypes.string,
+    controlOptions: PropTypes.shape({
+        autoCompleteFields: PropTypes.array.isRequired,
+    }),
+};
+
+export default SingleInputControl;

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TestComponent.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Button from '@splunk/react-ui/Button';
 import { StyledContainer, StyledGreeting } from './TestComponentStyles';
 import { getUnifiedConfigs } from '../util/util';
+import { axiosCallWrapper } from '../util/axiosCallWrapper';
 
 class TestComponent extends Component {
     static propTypes = {
@@ -11,6 +12,7 @@ class TestComponent extends Component {
 
     static defaultProps = {
         name: 'User',
+        serviceName: 'example_input_one',
     };
 
     constructor(props) {
@@ -19,7 +21,14 @@ class TestComponent extends Component {
     }
 
     componentDidMount() {
-        console.log("getUnifiedConfigs: ", getUnifiedConfigs());
+        console.log('getUnifiedConfigs: ', getUnifiedConfigs());
+        axiosCallWrapper(this.props.serviceName)
+            .then((response) => {
+                console.log(response.data);
+            })
+            .catch((error) => {
+                console.log(error);
+            });
     }
 
     render() {
@@ -30,13 +39,6 @@ class TestComponent extends Component {
             counter === 0
                 ? 'You should try clicking the button.'
                 : `You've clicked the button ${counter} time${counter > 1 ? 's' : ''}.`;
-        // const requireFunc = typeof __webpack_require__ === "function" ? __non_webpack_require__ : require;
-        function requireDynamically(path) {
-            return eval(`require`); // Ensure Webpack does not analyze the require statement
-        }
-        requireDynamically(['custom/' + module], (CustomRow) => {
-            this.CustomRow = CustomRow;
-        });
 
         return (
             <StyledContainer>

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Text from '@splunk/react-ui/Text';
+
+class TextComponent extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    handleChange = (e, {value}) => {
+        this.props.handleChange(this.props.id, value);
+    };
+
+    render() {
+        return (
+            <Text
+                inline
+                placeholder={this.props.controlOptions.placeholder}
+                className={this.props.field}
+                disabled={this.props.disabled}
+                value={this.props.value}
+                onChange={this.handleChange}
+                type={this.props.encrypted ? 'password' : 'text'}
+            />
+        );
+    }
+}
+
+TextComponent.propTypes = {
+    id: PropTypes.number.isRequired,
+    value: PropTypes.string,
+    handleChange: PropTypes.func.isRequired,
+    field: PropTypes.string,
+    controlOptions: PropTypes.object,
+};
+
+export default TextComponent;