feat: Form design changes

splunk · Mar 18, 2021 · 3f34bfa · 3f34bfa
1 parent 9e9a0b6
commit 3f34bfa
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 35 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
@@ -1,8 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ControlGroup from '@splunk/react-ui/ControlGroup';
+import styled from 'styled-components';
+
 import CONTROL_TYPE_MAP from '../constants/ControlTypeMap';
 
+const CustomElement = styled.div`
+    margin-left: 30px;
+    div {
+        width: 100% !important;
+    }
+`;
+
+const ControlGroupWrapper = styled(ControlGroup)`
+    > * {
+        &:first-child {
+            width: 170px !important;
+        }
+        &:nth-child(3) {
+            margin-left: 200px !important;
+        }
+    }
+`;
+
 class ControlWrapper extends React.PureComponent {
 
     constructor(props){
@@ -16,8 +36,7 @@ class ControlWrapper extends React.PureComponent {
 
     render(){
 
-        const {field, options, type,label,tooltip, helptext,encrypted=false} = this.props.entity;
-        const {handleChange, addCustomValidator, utilCustomFunctions} = this.props.utilityFuncts;
+        const { field, options, type, label, tooltip, help, encrypted = false } = this.props.entity;
 
         let rowView;
         if(this.props.entity.type==="custom"){
@@ -57,14 +76,16 @@ class ControlWrapper extends React.PureComponent {
         }
 
         return (
-        this.props.display && 
-            <ControlGroup 
+            this.props.display &&
+            <ControlGroupWrapper
                 label={label}
-                help={helptext}
+                help={help}
                 tooltip={tooltip}
-                error={this.props.error}  >
-                {rowView}
-            </ControlGroup>
+                error={this.props.error}>
+                <CustomElement>
+                    {rowView}
+                </CustomElement>
+            </ControlGroupWrapper>
         )
     }
 }

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
@@ -2,8 +2,14 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Button from '@splunk/react-ui/Button';
 import Modal from '@splunk/react-ui/Modal';
+import styled from 'styled-components';
+
 import BaseFormView from './BaseFormView';
 
+const ModalWrapper = styled(Modal)`
+    width: 800px
+`;
+
 class EntityModal extends Component {
     constructor(props) {
         super(props);
@@ -29,7 +35,7 @@ class EntityModal extends Component {
     render() {
         return (
             <div>
-                <Modal onRequestClose={this.handleRequestClose} open={this.props.open}>
+                <ModalWrapper onRequestClose={this.handleRequestClose} open={this.props.open}>
                     <Modal.Header
                         title={this.props.formLabel}
                         onRequestClose={this.handleRequestClose}
@@ -51,7 +57,7 @@ class EntityModal extends Component {
                         />
                         <Button appearance="primary" label="Submit" onClick={this.handleSubmit} />
                     </Modal.Footer>
-                </Modal>
+                </ModalWrapper>
             </div>
         );
     }

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/SingleInputComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/SingleInputComponent.jsx
@@ -29,7 +29,7 @@ function SingleInputComponent(props) {
     }
 
     return (
-        <Select value={value} name={field} disabled={disabled} onChange={handleChange}>
+        <Select value={value} name={field} disabled={disabled} onChange={handleChange} style={{ "minWidth": "200px" }}>
             {generateOptions()}
         </Select>
     );

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/CustomTable.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/CustomTable.jsx
@@ -39,7 +39,7 @@ function CustomTable({ isInput, serviceName, data, handleToggleActionClick }) {
         return column;
     };
 
-    const [columns, setColumns] = useState(() => generateColumns());
+    const columns = generateColumns();
 
     const handleSort = (e, val) => {
         const prevSortKey = sortKey;
@@ -70,15 +70,15 @@ function CustomTable({ isInput, serviceName, data, handleToggleActionClick }) {
         );
     };
 
-    const handleEditActionClick = () => {};
+    const handleEditActionClick = () => { };
 
-    const handleCloneActionClick = () => {};
+    const handleCloneActionClick = () => { };
 
-    const handleDeleteActionClick = () => {};
+    const handleDeleteActionClick = () => { };
 
     const rowActionsPrimaryButton = (row) => {
         return (
-            <Table.Cell key={row.id}>
+            <Table.Cell key={row.id} style={{ padding: '2px' }}>
                 <ButtonGroup>
                     <Tooltip content={_('Edit')}>
                         <ActionButtonComponent

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
@@ -14,22 +14,15 @@ import EntityModal from '../../components/EntityModal'
 import { MODE_CREATE } from "../../constants/modes";
 import ErrorBoundary from '../../components/ErrorBoundary';
 
-
 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 { title, description, 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 getInputMenu = () => {
         let arr = [];
         arr = services.map((service) => {
@@ -60,33 +53,33 @@ function InputPage() {
                 />
             );
         }
-            return null;
+        return null;
     }
 
     return (
         <>
             <ColumnLayout gutter={8}>
                 <ColumnLayout.Row style={{ padding: '5px 0px' }}>
                     <ColumnLayout.Column span={9}>
-                        <TitleComponent>{title}</TitleComponent>
-                        <SubTitleComponent>{description}</SubTitleComponent>
+                        <TitleComponent>{_(title)}</TitleComponent>
+                        <SubTitleComponent>{_(description)}</SubTitleComponent>
                     </ColumnLayout.Column>
                     {services && services.length > 1 &&
                         (<ColumnLayout.Column span={3} style={{ 'textAlign': 'right' }}>
                             <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();
-                                        }
+                                <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"