fix: bugs

- ESLint/PropTypes failure fixes - Fix `axiosCallWrapper` displaying undefined variable in some cases - Fix table filter using all the fields received from endpoint response - Clear encrypted fields at edit/clone action on entities - Handle form save when no response received from server or parsing fails - Add message when no records found in table - Revert to default Splunk background color and rename file extension from `.scss` to `.css` - Remove toast messages on toggle action - Consume `messageDict` for constants - Fix message displayed in `DeleteModal` based on page
splunk · Apr 19, 2021 · 56f5a79 · 56f5a79
1 parent f9a08a6
commit 56f5a79
Show file tree

Hide file tree

Showing 15 changed files with 76 additions and 48 deletions.
diff --git a/ui/src/main/webapp/components/BaseFormView.jsx b/ui/src/main/webapp/components/BaseFormView.jsx
@@ -243,6 +243,8 @@ class BaseFormView extends PureComponent {
                 }
             } else {
                 const tempEntity = {};
+                e.encrypted = typeof e.encrypted !== 'undefined' ? e.encrypted : false;
+
                 if (props.mode === MODE_CREATE) {
                     tempEntity.value =
                         typeof e.defaultValue !== 'undefined' ? e.defaultValue : null;
@@ -256,6 +258,7 @@ class BaseFormView extends PureComponent {
                         typeof this.currentInput[e.field] !== 'undefined'
                             ? this.currentInput[e.field]
                             : null;
+                    tempEntity.value = e.encrypted ? '' : tempEntity.value;
 
                     tempEntity.display =
                         typeof e?.options?.display !== 'undefined' ? e.options.display : true;
@@ -268,7 +271,8 @@ class BaseFormView extends PureComponent {
                     }
                     temState[e.field] = tempEntity;
                 } else if (props.mode === MODE_CLONE) {
-                    tempEntity.value = e.field === 'name' ? '' : this.currentInput[e.field];
+                    tempEntity.value =
+                        e.field === 'name' || e.encrypted ? '' : this.currentInput[e.field];
                     tempEntity.display =
                         typeof e?.options?.display !== 'undefined' ? e.options.display : true;
                     tempEntity.error = false;
@@ -280,6 +284,7 @@ class BaseFormView extends PureComponent {
                         typeof this.currentInput[e.field] !== 'undefined'
                             ? this.currentInput[e.field]
                             : e.defaultValue;
+                    tempEntity.value = e.encrypted ? '' : tempEntity.value;
                     tempEntity.display =
                         typeof e?.options?.display !== 'undefined' ? e.options.display : true;
                     tempEntity.error = false;
@@ -553,7 +558,7 @@ class BaseFormView extends PureComponent {
                 this.props.handleFormSubmit(/* isSubmititng */ false, /* closeEntity */ true);
             })
             .catch((err) => {
-                const errorSubmitMsg = parseErrorMsg(err?.response?.data?.messages[0]?.text);
+                const errorSubmitMsg = parseErrorMsg(err);
                 this.setState({ errorMsg: errorSubmitMsg });
                 if (this.hook && typeof this.hook.onSaveFail === 'function') {
                     this.hook.onSaveFail();

diff --git a/ui/src/main/webapp/components/DeleteModal.jsx b/ui/src/main/webapp/components/DeleteModal.jsx
@@ -11,7 +11,8 @@ import { generateToast } from '../util/util';
 
 import { axiosCallWrapper } from '../util/axiosCallWrapper';
 import TableContext from '../context/TableContext';
-import { parseErrorMsg } from '../util/messageUtil';
+import { parseErrorMsg, getFormattedMessage } from '../util/messageUtil';
+import { PAGE_INPUT } from '../constants/pages';
 
 const ModalWrapper = styled(Modal)`
     width: 800px;
@@ -78,20 +79,15 @@ class DeleteModal extends Component {
 
     render() {
         let deleteMsg;
-        if (this.props.isInput) {
-            deleteMsg = _(`Are you sure you want to delete "`) + this.props.stanzaName + _(`" ?`);
+        if (this.props.page === PAGE_INPUT) {
+            deleteMsg = getFormattedMessage(103, [this.props.stanzaName]);
         } else {
-            deleteMsg =
-                _(`Are you sure you want to delete "`) +
-                this.props.stanzaName +
-                _(`" ? Ensure that no input is configured with "`) +
-                this.props.stanzaName +
-                _(`" as this will stop data collection for that input.`);
+            deleteMsg = getFormattedMessage(102, [this.props.stanzaName]);
         }
         return (
             <ModalWrapper open={this.props.open}>
                 <Modal.Header
-                    title={_('Delete Confirmation')}
+                    title={getFormattedMessage(101)}
                     onRequestClose={this.handleRequestClose}
                 />
                 <Modal.Body>
@@ -118,7 +114,7 @@ class DeleteModal extends Component {
 }
 
 DeleteModal.propTypes = {
-    isInput: PropTypes.bool,
+    page: PropTypes.string.isRequired,
     open: PropTypes.bool,
     handleRequestClose: PropTypes.func,
     serviceName: PropTypes.string,

diff --git a/ui/src/main/webapp/components/MultiInputComponent.jsx b/ui/src/main/webapp/components/MultiInputComponent.jsx
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import Multiselect from '@splunk/react-ui/Multiselect';
 import styled from 'styled-components';
 import axios from 'axios';
-import { _ } from '@splunk/ui-utils/i18n';
 
 import { axiosCallWrapper } from '../util/axiosCallWrapper';
 import { filterResponse } from '../util/util';
+import { getFormattedMessage } from '../util/messageUtil';
 
 const MultiSelectWrapper = styled(Multiselect)`
     width: 300px !important;
@@ -96,7 +96,7 @@ function MultiInputComponent(props) {
     }, [dependencyValues]);
 
     const effectiveDisabled = loading ? true : disabled;
-    const effectivePlaceholder = loading ? _('Loading') : placeholder;
+    const effectivePlaceholder = loading ? getFormattedMessage(115) : placeholder;
 
     const valueList = value ? value.split(delimiter) : [];
 

diff --git a/ui/src/main/webapp/components/SingleInputComponent.jsx b/ui/src/main/webapp/components/SingleInputComponent.jsx
@@ -35,8 +35,8 @@ function SingleInputComponent(props) {
         autoCompleteFields,
     } = controlOptions;
 
-    function handleChange(e, { value }) {
-        restProps.handleChange(field, value);
+    function handleChange(e, { value: currentValue }) {
+        restProps.handleChange(field, currentValue);
     }
 
     function generateOptions(items) {

diff --git a/ui/src/main/webapp/components/TextComponent.jsx b/ui/src/main/webapp/components/TextComponent.jsx
@@ -20,7 +20,7 @@ class TextComponent extends Component {
                 placeholder={this.props?.controlOptions?.placeholder}
                 className={this.props.field}
                 disabled={this.props.disabled}
-                value={this.props.value}
+                value={this.props.value === null ? '' : this.props.value}
                 onChange={this.handleChange}
                 type={this.props.encrypted ? 'password' : 'text'}
             />

diff --git a/ui/src/main/webapp/components/table/CustomTable.jsx b/ui/src/main/webapp/components/table/CustomTable.jsx
@@ -3,6 +3,7 @@ import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import Table from '@splunk/react-ui/Table';
+import { _ } from '@splunk/ui-utils/i18n';
 
 import useQuery from '../../hooks/useQuery';
 import { MODE_CLONE, MODE_EDIT } from '../../constants/modes';
@@ -14,6 +15,7 @@ import CustomTableRow from './CustomTableRow';
 import EntityModal from '../EntityModal';
 import DeleteModal from '../DeleteModal';
 import TableContext from '../../context/TableContext';
+import { NoRecordsDiv } from './CustomTableStyle';
 
 function CustomTable({
     page,
@@ -39,7 +41,6 @@ function CustomTable({
     const { moreInfo } = tableConfig;
     const headers = tableConfig.header;
 
-    // TODO: add multi field mapping support
     const statusMapping = moreInfo?.filter((a) => a.mapping);
 
     const serviceToStyleMap = {};
@@ -51,6 +52,7 @@ function CustomTable({
     const query = useQuery();
 
     // Run only once when component is mounted to load component based on initial query params
+    // and when query params are updated
     useEffect(() => {
         // Only run when tab matches serviceName or if in input page where serviceName is undefined
         if (query && (query.get('tab') === serviceName || typeof serviceName === 'undefined')) {
@@ -80,6 +82,7 @@ function CustomTable({
             query.delete('record');
             history.push({ search: query.toString() });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [history.location.search]);
 
     const handleEntityClose = () => {
@@ -108,6 +111,7 @@ function CustomTable({
                 history.push({ search: query.toString() });
             }
         },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         [entityModal]
     );
 
@@ -129,6 +133,7 @@ function CustomTable({
                 });
             }
         },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         [entityModal]
     );
 
@@ -174,7 +179,7 @@ function CustomTable({
     const generateDeleteDialog = () => {
         return (
             <DeleteModal
-                isInput
+                page={page}
                 open={deleteModal.open}
                 handleRequestClose={handleDeleteClose}
                 serviceName={deleteModal.serviceName}
@@ -262,6 +267,7 @@ function CustomTable({
                     {getTableBody()}
                 </Table>
             )}
+            {!data.length ? <NoRecordsDiv>No records found</NoRecordsDiv> : null}
             {generateModalDialog()}
             {generateDeleteDialog()}
         </>

diff --git a/ui/src/main/webapp/components/table/CustomTableStyle.jsx b/ui/src/main/webapp/components/table/CustomTableStyle.jsx
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import Button from '@splunk/react-ui/Button';
+import { variables } from '@splunk/themes';
 import WaitSpinner from '@splunk/react-ui/WaitSpinner';
 
 export const ActionButtonComponent = styled(Button)`
@@ -23,3 +24,8 @@ export const TableSelectBoxWrapper = styled.span`
         min-width: 100px;
     }
 `;
+
+export const NoRecordsDiv = styled.div`
+    font-size: ${variables.fontSize};
+    text-align: center;
+`;
diff --git a/ui/src/main/webapp/components/table/TableHeader.jsx b/ui/src/main/webapp/components/table/TableHeader.jsx
@@ -24,10 +24,6 @@ const TableFilterWrapper = styled.div`
     width: 100%;
 `;
 
-const PaginatorWrapper = styled(Paginator)`
-    margin-right: 30px;
-`;
-
 function TableHeader({ page, services, totalElement, handleRequestModalOpen }) {
     const {
         pageSize,
@@ -96,7 +92,7 @@ function TableHeader({ page, services, totalElement, handleRequestModalOpen }) {
             </TableFilterWrapper>
             <div>
                 <Paginator
-                    onChange={(e, val) => setCurrentPage(val.page - 1)}
+                    onChange={(e, { page: pageNumber }) => setCurrentPage(pageNumber - 1)}
                     current={currentPage + 1}
                     alwaysShowLastPageLink
                     totalPages={Math.ceil(totalElement / pageSize)}

diff --git a/ui/src/main/webapp/components/table/TableWrapper.jsx b/ui/src/main/webapp/components/table/TableWrapper.jsx
@@ -9,6 +9,7 @@ import { getUnifiedConfigs, generateToast } from '../../util/util';
 import CustomTable from './CustomTable';
 import TableHeader from './TableHeader';
 import TableContext from '../../context/TableContext';
+import { PAGE_INPUT } from '../../constants/pages';
 
 function TableWrapper({ page, serviceName, handleRequestModalOpen, handleOpenPageStyleDialog }) {
     const [sortKey, setSortKey] = useState('name');
@@ -21,6 +22,13 @@ function TableWrapper({ page, serviceName, handleRequestModalOpen, handleOpenPag
     );
 
     const unifiedConfigs = getUnifiedConfigs();
+    const tableConfig =
+        page === PAGE_INPUT
+            ? unifiedConfigs.pages.inputs.table
+            : unifiedConfigs.pages.configuration.tabs.filter((x) => x.name === serviceName)[0]
+                  .table;
+    const headers = tableConfig.header;
+    const { moreInfo } = tableConfig;
     const services =
         page === 'inputs'
             ? unifiedConfigs.pages.inputs.services
@@ -99,7 +107,9 @@ function TableWrapper({ page, serviceName, handleRequestModalOpen, handleOpenPag
         setRowData((currentRowData) => {
             return update(currentRowData, {
                 [row.serviceName]: {
-                    [row.name]: { __toggleShowSpinner: { $set: true } },
+                    [row.name]: {
+                        __toggleShowSpinner: { $set: true },
+                    },
                 },
             });
         });
@@ -115,7 +125,9 @@ function TableWrapper({ page, serviceName, handleRequestModalOpen, handleOpenPag
                 setRowData((currentRowData) => {
                     return update(currentRowData, {
                         [row.serviceName]: {
-                            [row.name]: { __toggleShowSpinner: { $set: false } },
+                            [row.name]: {
+                                __toggleShowSpinner: { $set: false },
+                            },
                         },
                     });
                 });
@@ -131,11 +143,6 @@ function TableWrapper({ page, serviceName, handleRequestModalOpen, handleOpenPag
                     },
                 });
             });
-            if (response.data.entry[0].content.disabled === true) {
-                generateToast(`Disabled ${response.data.entry[0].name}`, "success");
-            } else {
-                generateToast(`Enabled ${response.data.entry[0].name}`, "success");
-            }
         });
     };
 
@@ -155,18 +162,26 @@ function TableWrapper({ page, serviceName, handleRequestModalOpen, handleOpenPag
      */
     const findByMatchingValue = (data) => {
         const arr = [];
+        const tableFields = [];
+
+        headers.forEach((headData) => {
+            tableFields.push(headData.field);
+        });
+        moreInfo?.forEach((moreInfoData) => {
+            tableFields.push(moreInfoData.field);
+        });
+
         Object.keys(data).forEach((v) => {
             let found = false;
             Object.keys(data[v]).forEach((vv) => {
                 if (
-                    data[v].id === '' &&
+                    tableFields.includes(vv) &&
                     typeof data[v][vv] === 'string' &&
-                    data[v][vv].toLowerCase().includes(searchText.toLowerCase())
+                    data[v][vv].toLowerCase().includes(searchText.toLowerCase()) &&
+                    !found
                 ) {
-                    if (!found) {
-                        arr.push(data[v]);
-                        found = true;
-                    }
+                    arr.push(data[v]);
+                    found = true;
                 }
             });
         });

diff --git a/ui/src/main/webapp/pages/Configuration/ConfigurationPage.jsx b/ui/src/main/webapp/pages/Configuration/ConfigurationPage.jsx
@@ -50,6 +50,7 @@ function ConfigurationPage() {
         ) {
             setActiveTabId(query.get('tab'));
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [history.location.search]);
 
     // Run only once to set initial default tab query param
@@ -58,6 +59,7 @@ function ConfigurationPage() {
             query.set('tab', activeTabId);
             history.push({ search: query.toString() });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     const handleChange = useCallback(
@@ -66,6 +68,7 @@ function ConfigurationPage() {
             query.set('tab', selectedTabId);
             history.push({ search: query.toString() });
         },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         [activeTabId]
     );
 

diff --git a/ui/src/main/webapp/pages/Input/InputPage.jsx b/ui/src/main/webapp/pages/Input/InputPage.jsx
@@ -8,7 +8,7 @@ import Menu from '@splunk/react-ui/Menu';
 import styled from 'styled-components';
 import ToastMessages from '@splunk/react-toast-notifications/ToastMessages';
 import { _ } from '@splunk/ui-utils/i18n';
-
+import { getFormattedMessage} from '../../util/messageUtil';
 import { getUnifiedConfigs } from '../../util/util';
 import { TitleComponent, SubTitleComponent } from './InputPageStyle';
 import { TableContextProvider } from '../../context/TableContext';
@@ -20,7 +20,6 @@ import EntityModal from '../../components/EntityModal';
 import ErrorBoundary from '../../components/ErrorBoundary';
 import EntityPage from '../../components/EntityPage';
 import useQuery from '../../hooks/useQuery';
-import '../style.scss';
 
 const Row = styled(ColumnLayout.Row)`
     padding: 5px 0px;
@@ -165,6 +164,7 @@ function InputPage() {
             // Close page when any of the required query params are not provided
             setEntity({ ...entity, open: false });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [history.location.search]);
 
     return (
@@ -207,7 +207,7 @@ function InputPage() {
                             {services && services.length === 1 && (
                                 <ColumnLayout.Column span={3} className="input_button">
                                     <Button
-                                        label="Create New Input"
+                                        label= {getFormattedMessage(100)}
                                         appearance="primary"
                                         onClick={() => {
                                             handleRequestOpen(services[0].name, services[0].title);

diff --git a/ui/src/main/webapp/pages/entry_page.jsx b/ui/src/main/webapp/pages/entry_page.jsx
@@ -9,6 +9,7 @@ import { PAGE_CONF, PAGE_INPUT } from '../constants/pages';
 import ConfigManager from '../util/configManager';
 import messageDict from '../constants/messageDict';
 import { getBuildDirPath } from '../util/script';
+import './style.css';
 
 // eslint-disable-next-line no-undef,camelcase
 __webpack_public_path__ = `${getBuildDirPath()}/`;

diff --git a/ui/src/main/webapp/pages/style.scss → ui/src/main/webapp/pages/style.css b/ui/src/main/webapp/pages/style.scss → ui/src/main/webapp/pages/style.css
@@ -1,4 +1,3 @@
 body {
     min-width: 960px;
-    background-color: #eee;
 }