fix: removed multiple calls to endpoint in tab navigation for configu…

…ration page, addded conditional rendering of moreInfo based on globalConfig and fixed single input type dropdown filter
splunk · Mar 22, 2021 · f1c2545 · f1c2545
1 parent 0c386de
commit f1c2545
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 176 deletions.
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/BaseFormView.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/BaseFormView.jsx
@@ -1,25 +1,24 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Message from '@splunk/react-ui/Message';
-import Button from '@splunk/react-ui/Button';
-import ControlGroup from '@splunk/react-ui/ControlGroup';
 import update from 'immutability-helper';
+
+import Message from '@splunk/react-ui/Message';
+
 import ControlWrapper from './ControlWrapper';
 import { getUnifiedConfigs } from '../util/util';
 import { MODE_CLONE, MODE_CREATE, MODE_EDIT } from '../constants/modes';
 
 class BaseFormView extends Component {
     constructor(props) {
         super(props);
-
         // flag for to render hook method for once
         this.flag = true;
         this.state = {};
         const globalConfig = getUnifiedConfigs();
         this.appName = globalConfig.meta.name;
 
         this.util = {
-            SetState: (state) => {
+            setState: (state) => {
                 this.setState(state);
             },
             setErrorFieldMsg: this.setErrorFieldMsg,
@@ -32,7 +31,7 @@ class BaseFormView extends Component {
             utilCustomFunctions: this.util,
         };
 
-        if (props.isInput) {
+        if (props.page === 'inputs') {
             globalConfig.pages.inputs.services.forEach((service) => {
                 if (service.name === props.serviceName) {
                     this.entities = service.entity;
@@ -256,51 +255,32 @@ class BaseFormView extends Component {
         }
 
         return (
-            <>
-                {this.props.renderSave ? (
-                    <Message appearance="banner" type="info" onRequestRemove={() => {}}>
-                        <span>
-                            Your trial <strong>will expire soon</strong>. This message should
-                            include
-                            <Message.Link to="http://duckduckgo.com">inline links</Message.Link>
-                            for recovery.
-                        </span>
-                    </Message>
-                ) : null}
-                <div className="form-horizontal" style={{ marginTop: '10px' }}>
-                    {this.generateErrorMessage()}
-                    {this.entities.map((e) => {
-                        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.disbled}
-                            />
-                        );
-                    })}
-                    {this.props.renderSave ? (
-                        <ControlGroup label="">
-                            <div style={{ flexGrow: 0 }}>
-                                <Button appearance="primary" label="Save" />
-                            </div>
-                        </ControlGroup>
-                    ) : null}
-                </div>
-            </>
+            <div className="form-horizontal" style={{ marginTop: '10px' }}>
+                {this.generateErrorMessage()}
+                {this.entities.map((e) => {
+                    const tmpState = this.state.data[e.field];
+
+                    return (
+                        <ControlWrapper
+                            key={e.field}
+                            utilityFuncts={this.utilControlWrapper}
+                            value={tmpState.value}
+                            display={tmpState.display}
+                            error={tmpState.error}
+                            entity={e}
+                            serviceName={this.props.serviceName}
+                            mode={this.props.mode}
+                            disabled={tmpState.disbled}
+                        />
+                    );
+                })}
+            </div>
         );
     }
 }
 
 BaseFormView.propTypes = {
-    isInput: PropTypes.bool,
+    page: PropTypes.string,
     serviceName: PropTypes.string,
     mode: PropTypes.string,
     currentInput: PropTypes.object,

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ConfigurationFormView.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ConfigurationFormView.jsx
@@ -1,6 +1,9 @@
 import React, { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
+import Button from '@splunk/react-ui/Button';
+import ControlGroup from '@splunk/react-ui/ControlGroup';
+
 import BaseFormView from './BaseFormView';
 import { axiosCallWrapper } from '../util/axiosCallWrapper';
 import { MODE_EDIT } from '../constants/modes';
@@ -10,17 +13,19 @@ function ConfigurationFormView({ serviceName }) {
     const [error, setError] = useState(null);
     const [currentServiceState, setCurrentServiceState] = useState({});
 
+    // TODO: move this logic to BaseFormView
     useEffect(() => {
         axiosCallWrapper({
             serviceName: `settings/${serviceName}`,
             handleError: true,
             callbackOnError: (error) => {
+                error.uccErrorCode = 'ERR0004';
                 setError(error);
             },
         }).then((response) => {
             setCurrentServiceState(response.data.entry[0].content);
         });
-    }, []);
+    }, [serviceName]);
 
     const handleSubmit = () => {
         const { result, data } = form.current.handleSubmit();
@@ -33,15 +38,22 @@ function ConfigurationFormView({ serviceName }) {
     if (error?.uccErrorCode) {
         throw error;
     }
+
     return (
-        <BaseFormView
-            ref={form}
-            page="configuration"
-            serviceName={serviceName}
-            mode={MODE_EDIT}
-            currentInput={currentServiceState}
-            renderSave
-        />
+        <>
+            <BaseFormView
+                ref={form}
+                page="configuration"
+                serviceName={serviceName}
+                mode={MODE_EDIT}
+                currentInput={currentServiceState}
+            />
+            <ControlGroup label="">
+                <div style={{ flexGrow: 0 }}>
+                    <Button appearance="primary" label="Save" />
+                </div>
+            </ControlGroup>
+        </>
     );
 }
 

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ConfigurationTable.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/ConfigurationTable.jsx
@@ -5,7 +5,6 @@ import ToastMessages from '@splunk/react-toast-notifications/ToastMessages';
 
 import { TableContextProvider } from '../context/TableContext';
 import TableWrapper from './table/TableWrapper';
-import ErrorBoundary from './ErrorBoundary';
 import EntityModal from './EntityModal';
 import { MODE_CREATE } from '../constants/modes';
 
@@ -39,13 +38,11 @@ function ConfigurationTable({ serviceName, serviceTitle, handleSaveData }) {
     return (
         <>
             <TableContextProvider value={null}>
-                <ErrorBoundary>
-                    <TableWrapper
-                        page="configuration"
-                        serviceName={serviceName}
-                        handleRequestModalOpen={() => handleRequestOpen()}
-                    />
-                </ErrorBoundary>
+                <TableWrapper
+                    page="configuration"
+                    serviceName={serviceName}
+                    handleRequestModalOpen={() => handleRequestOpen()}
+                />
                 <ToastMessages />
             </TableContextProvider>
             {generateModalDialog()}

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
@@ -37,7 +37,7 @@ class EntityModal extends Component {
                     <Modal.Body>
                         <BaseFormView
                             ref={this.form}
-                            isInput={this.props.isInput}
+                            page={this.props.page}
                             serviceName={this.props.serviceName}
                             mode={this.props.mode}
                             currentInput={this.props.currentInput}
@@ -58,7 +58,7 @@ class EntityModal extends Component {
 }
 
 EntityModal.propTypes = {
-    isInput: PropTypes.bool,
+    page: PropTypes.string,
     open: PropTypes.bool,
     handleRequestClose: PropTypes.func,
     serviceName: PropTypes.string,

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
@@ -115,7 +115,12 @@ function CustomTable({ tableConfig, data, handleToggleActionClick }) {
             statusContent = <WaitSpinner />;
         }
         return (
-            <Table.Row key={row.id} expansionRow={getExpansionRow(columns.length, row)}>
+            <Table.Row
+                key={row.id}
+                {...(moreInfo
+                    ? { expansionRow: getExpansionRow(columns.length, row, moreInfo) }
+                    : {})}
+            >
                 {columns &&
                     columns.length &&
                     columns.map((header) => {
@@ -181,7 +186,7 @@ function CustomTable({ tableConfig, data, handleToggleActionClick }) {
     return (
         <>
             {columns && columns.length && (
-                <Table stripeRows rowExpansion="single">
+                <Table stripeRows {...(moreInfo ? { rowExpansion: 'single' } : {})}>
                     {getTableHeaders()}
                     {getTableBody()}
                 </Table>
@@ -191,6 +196,7 @@ function CustomTable({ tableConfig, data, handleToggleActionClick }) {
 }
 
 CustomTable.propTypes = {
+    tableConfig: PropTypes.object.isRequired,
     data: PropTypes.array.isRequired,
     handleToggleActionClick: PropTypes.func,
 };

diff --git a/...nk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableExpansionRow.jsx b/...nk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableExpansionRow.jsx
@@ -3,25 +3,21 @@ import DL from '@splunk/react-ui/DefinitionList';
 import Table from '@splunk/react-ui/Table';
 import { _ } from '@splunk/ui-utils/i18n';
 
-import { getUnifiedConfigs } from '../../util/util';
-
-function getExpansionRowData(row) {
-
-    const unifiedConfigs = getUnifiedConfigs();
-    const { moreInfo } = unifiedConfigs.pages.inputs.table;
-
+function getExpansionRowData(row, moreInfo) {
     return (
         moreInfo &&
         moreInfo.length &&
         moreInfo.map((val) => {
             const label = _(val.label);
             return (
                 <>
-                    {(row[val.field]) && (
+                    {row[val.field] && (
                         <>
                             <DL.Term>{label}</DL.Term>
                             <DL.Description>
-                                {val.field === 'disabled' ? val.mapping[row[val.field]] : `${row[val.field]}`}
+                                {val.field === 'disabled'
+                                    ? val.mapping[row[val.field]]
+                                    : `${row[val.field]}`}
                             </DL.Description>
                         </>
                     )}
@@ -31,11 +27,11 @@ function getExpansionRowData(row) {
     );
 }
 
-export function getExpansionRow(colSpan, row) {
+export function getExpansionRow(colSpan, row, moreInfo) {
     return (
         <Table.Row key={`${row.id}-expansion`}>
             <Table.Cell style={{ borderTop: 'none' }} colSpan={colSpan}>
-                <DL>{getExpansionRowData(row)}</DL>
+                <DL>{getExpansionRowData(row, moreInfo)}</DL>
             </Table.Cell>
         </Table.Row>
     );