feat: Added Create Input button in input_page

splunk · Mar 16, 2021 · b2b3562 · b2b3562
1 parent afe5241
commit b2b3562
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 32 deletions.
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ControlWrapper.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ControlWrapper.jsx
@@ -16,8 +16,10 @@ class ControlWrapper extends React.PureComponent {
 
     render(){
 
-        const {field, controlOptions, type,label,tooltip, helptext,encrypted=false} = this.props.entity;
+        const {field, options, type,label,tooltip, helptext,encrypted=false} = this.props.entity;
         const {handleChange, addCustomValidator, utilCustomFunctions} = this.props.utilityFuncts;
+
+        console.log("options :",options);
         let rowView;
         if(this.props.entity.type==="custom"){
 
@@ -26,6 +28,7 @@ class ControlWrapper extends React.PureComponent {
                 mode:this.props.mode,
                 serviceName:this.props.serviceName
             }
+
             rowView = this.controlType ? (
                     React.createElement(this.controlType,
                         { 
@@ -34,7 +37,7 @@ class ControlWrapper extends React.PureComponent {
                             handleChange,
                             addCustomValidator,
                             utilCustomFunctions,
-                            controlOptions
+                            controlOptions:options
                         })
                     ): `No View Found for ${type} type`;
             }
@@ -45,7 +48,7 @@ class ControlWrapper extends React.PureComponent {
                         handleChange,
                         value:this.props.value,
                         field,
-                        controlOptions,
+                        controlOptions:options,
                         error:this.props.error,
                         disabled:this.props.disabled,
                         encrypted

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/EntityModal.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/EntityModal.jsx
@@ -7,16 +7,10 @@ import BaseFormView from './BaseFormView';
 class EntityModal extends Component {
     constructor(props) {
         super(props);
-        this.state = { open: props.open };
         this.form = React.createRef();
     }
 
-    handleRequestOpen = () => {
-        this.setState({ open: true });
-    };
-
     handleRequestClose = () => {
-        this.setState({ open: false });
         this.props.handleRequestClose();
     };
 
@@ -39,7 +33,7 @@ class EntityModal extends Component {
             <div>
                 <Modal
                     onRequestClose={this.handleRequestClose}
-                    open={this.state.open}
+                    open={this.props.open}
                 >
                     <Modal.Header title={this.props.formLabel} onRequestClose={this.handleRequestClose} />
                     <Modal.Body>

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/HelpLinkComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/HelpLinkComponent.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from '@splunk/react-ui/Link';
+
+function HelpLinkComponent(props) {
+    const { text, link } = props.controlOptions;
+
+    return (
+        <Link to={link}>
+            {text}
+        </Link>
+    );
+}
+
+HelpLinkComponent.propTypes = {
+    field: PropTypes.string,
+    controlOptions: PropTypes.object
+};
+
+export default HelpLinkComponent;
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TextComponent.jsx
@@ -12,7 +12,7 @@ class TextComponent extends Component {
         return (
             <Text
                 inline
-                placeholder={this.props.controlOptions.placeholder}
+                placeholder={this.props?.controlOptions?.placeholder}
                 className={this.props.field}
                 disabled={this.props.disabled}
                 value={this.props.value}

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/constants/ControlTypeMap.js b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/constants/ControlTypeMap.js
@@ -1,4 +1,4 @@
-import Link from '@splunk/react-ui/Link';
+import HelpLinkComponent from '../components/HelpLinkComponent';
 import TextComponent from '../components/TextComponent';
 import SingleInputComponent from '../components/SingleInputComponent';
 import MultiInputComponent from '../components/MultiInputComponent';
@@ -9,7 +9,7 @@ import CustomControl from '../components/CustomControl';
 export default {
     'text': TextComponent,
     'singleSelect': SingleInputComponent,
-    'helpLink':Link,
+    'helpLink':HelpLinkComponent,
     'multipleSelect':MultiInputComponent,
     'checkbox':CheckBoxComponent,
     'radio':RadioComponent,

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPage.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPage.jsx
@@ -1,37 +1,67 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import Select from '@splunk/react-ui/Select';
 import ColumnLayout from '@splunk/react-ui/ColumnLayout';
 import Button from '@splunk/react-ui/Button';
 import { _ } from '@splunk/ui-utils/i18n';
+import Dropdown from '@splunk/react-ui/Dropdown';
+import Menu from '@splunk/react-ui/Menu';
 
 import { getUnifiedConfigs } from '../../util/util';
 import { TitleComponent, SubTitleComponent } from './InputPageStyle';
 import { InputRowContextProvider } from '../../context/InputRowContext';
 import TableWrapper from '../../components/table/TableWrapper';
+import EntityModal from '../../components/EntityModal'
+import { MODE_CREATE } from "../../constants/modes";
 
-function InputPage({ isInput, serviceName }) {
+function InputPage() {
 
     const [title, setTitle] = useState(null);
     const [description, setDescription] = useState(null);
-
+    const [open, setOpen] = useState(false);
+    const [serviceName, setserviceName] = useState(null);
+    const [serviceLabel, setserviceLabel] = useState(null);
     const unifiedConfigs = getUnifiedConfigs();
     const { services } = unifiedConfigs.pages.inputs;
+    const toggle = <Button appearance="toggle" label="Create New Input" isMenu />;
 
     useEffect(() => {
         setTitle(_(unifiedConfigs.pages.inputs.title));
         setDescription(_(unifiedConfigs.pages.inputs.description));
     }, []);
 
-    const getSearchTypeDropdown = () => {
+    const getInputMenu = () => {
         let arr = [];
         arr = services.map((service) => {
-            return <Select.Option key={service.name} label={service.title} value={service.name} />;
+            return (<Menu.Item key={service.name}>{service.title}</Menu.Item>);
         });
-        arr.unshift(<Select.Option key="createNew" value="" selected disabled hidden label="Create New Input" />);
         return arr;
     };
 
+
+    const handleRequestOpen = () => {
+        setOpen(true);
+    };
+
+    const handleRequestClose = () => {
+        setOpen(false);
+    };
+    const generateModalDialog = () => {
+        if (open) {
+            return (
+                < EntityModal
+                    isInput
+                    open={open}
+                    handleRequestClose={handleRequestClose}
+                    handleSavedata={null}
+                    serviceName={serviceName}
+                    mode={MODE_CREATE}
+                    formLabel={serviceLabel}
+                />
+            );
+        }
+            return null;
+    }
+
     return (
         <>
             <ColumnLayout gutter={8}>
@@ -42,36 +72,42 @@ function InputPage({ isInput, serviceName }) {
                     </ColumnLayout.Column>
                     {services && services.length > 1 &&
                         <ColumnLayout.Column span={3} style={{ 'textAlign': 'right' }}>
-                            <Select onChange={(e, { value }) => {
-                                console.log("On create new", value);
-                            }}>
-                                {getSearchTypeDropdown()}
-                            </Select>
+
+                            <Dropdown toggle={toggle}>
+                                <Menu onClick={ (event) => {
+                                        const findname =  services[services.findIndex(x => x.title ===event.target.innerText)].name;
+                                        setserviceLabel(`Add ${event.target.innerText}`)
+                                        setserviceName(findname);
+                                        handleRequestOpen();
+                                        }
+} >
+                                    {getInputMenu()}
+                                </Menu>
+                            </Dropdown>
+
                         </ColumnLayout.Column>
                     }
                     {services && services.length === 1 &&
                         <Button
                             label="Create New Input"
                             appearance="flat"
                             onClick={() => {
-                                console.log("On create new", services[0].name);
+                                setserviceName(services[0].name)
+                                setserviceLabel(`Add ${services[0].title}`)
+                                handleRequestOpen();
                             }}
                         />
                     }
 
                 </ColumnLayout.Row>
             </ColumnLayout>
             <InputRowContextProvider value={null}>
-                <TableWrapper isInput={isInput} serviceName={serviceName} />
+                <TableWrapper isInput serviceName={serviceName} />
             </InputRowContextProvider>
+            {generateModalDialog()}
         </>
     );
 }
 
-InputPage.propTypes = {
-    isInput: PropTypes.bool,
-    serviceName: PropTypes.string.isRequired,
-};
-
 export default InputPage;
 
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/entry_page.jsx
@@ -40,7 +40,7 @@ const page = urlParts[urlParts.length - 1];
 
 if (page === 'inputs') {
     layout(
-        <InputPageComponent isInput serviceName="" />,
+        <InputPageComponent />,
         { pageTitle: 'Inputs' }
     );
 } else if (page === 'configuration') {