feat: Added support of group fields

ui/src/main/webapp/components/BaseFormView.jsx

@@ -1,8 +1,9 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import update from 'immutability-helper';
-
+import CollapsiblePanel from '@splunk/react-ui/CollapsiblePanel';
 import Message from '@splunk/react-ui/Message';
+import styled from 'styled-components';
 
 import ControlWrapper from './ControlWrapper';
 import { getUnifiedConfigs, generateToast } from '../util/util';
@@ -13,6 +14,32 @@ import { axiosCallWrapper } from '../util/axiosCallWrapper';
 import TableContext from '../context/TableContext';
 import { parseErrorMsg } from '../util/messageUtil';
 
+const CollapsiblePanelWrapper = styled(CollapsiblePanel)`
+    span {
+        button {
+            background-color: transparent;
+            font-size: 16px;
+            margin: 10px 0;
+
+            &:hover:not([disabled]),
+            &:focus:not([disabled]),
+            &:active:not([disabled]) {
+                background-color: transparent;
+                box-shadow: none;
+            }
+        }
+    }
+
+    .collapsible-element {
+        padding-top: 15px;
+    }
+`;
+
+const customGroupLabel = styled.div`
+    padding: 6px 10px;
+    background-color: #f2f4f5;
+`;
+
 class BaseFormView extends PureComponent {
     static contextType = TableContext;
 
@@ -48,7 +75,9 @@ class BaseFormView extends PureComponent {
         if (props.page === PAGE_INPUT) {
             globalConfig.pages.inputs.services.forEach((service) => {
                 if (service.name === props.serviceName) {
+                    this.groups = service.groups;
                     this.entities = service.entity;
+                    this.groupWiseEntities(service);
                     this.options = service.options;
                     if (service.hook) {
                         this.hookDeferred = this.loadHook(service.hook.src, globalConfig);
@@ -168,6 +197,24 @@ class BaseFormView extends PureComponent {
         }
     }
 
+    groupWiseEntities = (service) => {
+        if (this.groups && this.groups.length) {
+            this.groups.forEach((group) => {
+                if (group && group.fields?.length) {
+                    group.fields.forEach((fieldName) => {
+                        const index = service.entity.findIndex((e) => e.field === fieldName);
+
+                        if (index !== -1) {
+                            const updatedObj = JSON.parse(JSON.stringify(service.entity[index]));
+                            updatedObj.isGrouping = true;
+                            this.entities.splice(index, 1, updatedObj);
+                        }
+                    });
+                }
+            });
+        }
+    };
+
     handleSubmit = () => {
         this.props.handleFormSubmit(/* isSubmititng */true, /* closeEntity */false);
         const datadict = {};
@@ -393,6 +440,50 @@ class BaseFormView extends PureComponent {
         return myPromise;
     };
 
+    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) => {
+                            if (e.field === fieldName) {
+                                const temState = this.state.data[e.field];
+                                return (
+                                    <ControlWrapper
+                                        key={e.field}
+                                        utilityFuncts={this.utilControlWrapper}
+                                        value={temState.value}
+                                        display={temState.display}
+                                        error={temState.error}
+                                        entity={e}
+                                        serviceName={this.props.serviceName}
+                                        mode={this.props.mode}
+                                        disabled={temState.disabled}
+                                        dependencyValues={temState.dependencyValues || null}
+                                    />
+                                );
+                            }
+                            return null;
+                        });
+                    });
+
+                return group.options.isExpandable ? (
+                    <CollapsiblePanelWrapper title={group.label}>
+                        <div className="collapsible-element">{collpsibleElement}</div>
+                    </CollapsiblePanelWrapper>
+                ) : (
+                    <>
+                        <customGroupLabel>{group.label}</customGroupLabel>
+                        <div>{collpsibleElement}</div>
+                    </>
+                );
+            });
+        }
+        return el;
+    };
+
     render() {
         // onRender method of Hook
         if (this.flag) {
@@ -423,7 +514,11 @@ class BaseFormView extends PureComponent {
             >
                 {this.generateWarningMessage()}
                 {this.generateErrorMessage()}
+                {this.renderGroupElements()}
                 {this.entities.map((e) => {
+                    if (e.isGrouping) {
+                        return null;
+                    }
                     const temState = this.state.data[e.field];
 
                     return (

ui/src/main/webapp/components/EntityPage.jsx

@@ -11,7 +11,7 @@ import { useSplunkTheme } from '@splunk/themes';
 import { MODE_CLONE, MODE_CREATE, MODE_EDIT } from '../constants/modes';
 import { PAGE_INPUT } from '../constants/pages';
 import BaseFormView from './BaseFormView';
-import { TitleComponent } from '../pages/Input/InputPageStyle';
+import { SubTitleComponent } from '../pages/Input/InputPageStyle';
 
 function EntityPage({ handleRequestClose, serviceName, mode, stanzaName, formLabel }) {
     const form = useRef();
@@ -29,7 +29,8 @@ function EntityPage({ handleRequestClose, serviceName, mode, stanzaName, formLab
     const { embossShadow } = useSplunkTheme();
     const colStyle = {
         boxShadow: embossShadow,
-        padding: '5%',
+        padding: '1%',
+        backgroundColor: 'white',
     };
 
     const handleSubmit = () => {
@@ -49,11 +50,11 @@ function EntityPage({ handleRequestClose, serviceName, mode, stanzaName, formLab
         <ColumnLayout gutter={8}>
             <ColumnLayout.Row style={{ padding: '5px 0px' }}>
                 <ColumnLayout.Column>
-                    <TitleComponent>
+                    <SubTitleComponent>
                         <Link onClick={handleRequestClose}>{_('Inputs')}</Link>
                         {' > '}
                         {_(formLabel)}
-                    </TitleComponent>
+                    </SubTitleComponent>
                 </ColumnLayout.Column>
             </ColumnLayout.Row>
             <ColumnLayout.Row>

ui/src/main/webapp/pages/entry_page.jsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
-
 import layout from '@splunk/react-page';
+import { BrowserRouter as Router } from 'react-router-dom';
 import { SplunkThemeProvider } from '@splunk/themes';
 
 import { StyledContainer, ThemeProviderSettings } from './EntryPageStyle';
+import { PAGE_CONF, PAGE_INPUT } from '../constants/pages';
 import ConfigManager from '../util/configManager';
 import InputPage from './Input/InputPage';
 import ConfigurationPage from './Configuration/ConfigurationPage';
-import { PAGE_CONF, PAGE_INPUT } from '../constants/pages';
 import messageDict from '../constants/messageDict';
 
 // Take in a component as argument WrappedComponent

ui/src/main/webapp/pages/style.scss

@@ -1,8 +1,4 @@
-// @import '@splunk/themes/variables' as variable;
-@use '@splunk/themes/variables' as contentColorDefault;
-
 body {
-    // @include variables.contentColorDefault;
     min-width: 960px;
-    background-color: contentColorDefault;
+    background-color: #eee;
 }