feat: ADDON-57152 added tabs feature in the Inputs page (#133)

splunk · Nov 16, 2022 · a3d9cb1 · a3d9cb1
1 parent 8d964ad
commit a3d9cb1
Show file tree

Hide file tree

Showing 7 changed files with 438 additions and 209 deletions.
diff --git a/ui/src/main/webapp/components/table/CustomTable.jsx b/ui/src/main/webapp/components/table/CustomTable.jsx
@@ -25,18 +25,14 @@ function CustomTable({
     handleSort,
     sortDir,
     sortKey,
+    tableConfig
 }) {
     const unifiedConfigs = getUnifiedConfigs();
     const [entityModal, setEntityModal] = useState({ open: false });
     const [deleteModal, setDeleteModal] = useState({ open: false });
 
     const { rowData } = useContext(TableContext);
 
-    const tableConfig =
-        page === PAGE_INPUT
-            ? unifiedConfigs.pages.inputs.table
-            : unifiedConfigs.pages.configuration.tabs.filter((x) => x.name === serviceName)[0]
-                  .table;
     const { moreInfo, header } = tableConfig;
     const headers = tableConfig.header;
 
@@ -237,12 +233,12 @@ function CustomTable({
                                 handleToggleActionClick={handleToggleActionClick}
                                 {...(moreInfo
                                     ? {
-                                          expansionRow: getExpansionRow(
-                                              columns.length,
-                                              row,
-                                              moreInfo
-                                          ),
-                                      }
+                                        expansionRow: getExpansionRow(
+                                            columns.length,
+                                            row,
+                                            moreInfo
+                                        ),
+                                    }
                                     : {})}
                             />
                         );

diff --git a/ui/src/main/webapp/components/table/TableExpansionRow.jsx b/ui/src/main/webapp/components/table/TableExpansionRow.jsx
@@ -34,7 +34,12 @@ function getExpansionRowData(row, moreInfo) {
 }
 
 export function getExpansionRow(colSpan, row, moreInfo) {
-    const { customRow } = getUnifiedConfigs().pages.inputs.table;
+
+    const inputs = getUnifiedConfigs().pages?.inputs;
+
+    const customRow = inputs?.table
+        ? (inputs.table.customRow)
+        : (inputs.services.find((service) => service.name === row.serviceName).table?.customRow);
 
     return (
         <Table.Row key={`${row.id}-expansion`}>

diff --git a/ui/src/main/webapp/components/table/TableFilter.jsx b/ui/src/main/webapp/components/table/TableFilter.jsx
@@ -1,8 +1,13 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Text from '@splunk/react-ui/Text';
 import PropTypes from 'prop-types';
+import TableContext from '../../context/TableContext';
 
 function TableFilter(props) {
+
+    const { searchText } = useContext(TableContext);
+
+    // We need to remove this function later
     const debounce = (func, wait) => {
         let timeout;
 
@@ -34,7 +39,8 @@ function TableFilter(props) {
         <Text
             appearance="search"
             placeholder="filter"
-            onChange={debounce(props.handleChange, 200)}
+            onChange={props.handleChange}
+            value={searchText}
         />
     );
 }

diff --git a/ui/src/main/webapp/components/table/TableHeader.jsx b/ui/src/main/webapp/components/table/TableHeader.jsx
@@ -24,7 +24,7 @@ const TableFilterWrapper = styled.div`
     width: 100%;
 `;
 
-function TableHeader({ page, services, totalElement, handleRequestModalOpen }) {
+function TableHeader({ page, isOuterTable, services, totalElement, handleRequestModalOpen }) {
     const {
         pageSize,
         currentPage,
@@ -82,7 +82,7 @@ function TableHeader({ page, services, totalElement, handleRequestModalOpen }) {
                             <Select.Option key="25" label={_('25 Per Page')} value={25} />
                             <Select.Option key="50" label={_('50 Per Page')} value={50} />
                         </Select>
-                        {getSearchTypeDropdown()}
+                        {isOuterTable ? getSearchTypeDropdown() : null}
                     </TableSelectBoxWrapper>
                 ) : null}
             </div>
@@ -101,7 +101,7 @@ function TableHeader({ page, services, totalElement, handleRequestModalOpen }) {
                     alwaysShowLastPageLink
                     totalPages={Math.ceil(totalElement / pageSize)}
                 />
-                {page === PAGE_INPUT ? null : (
+                {page === PAGE_INPUT && isOuterTable ? null : (
                     <Button
                         label={_('Add')}
                         appearance="primary"

diff --git a/ui/src/main/webapp/components/table/TableWrapper.jsx b/ui/src/main/webapp/components/table/TableWrapper.jsx
@@ -23,18 +23,24 @@ 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 outerTable = unifiedConfigs.pages.inputs?.table;
+
     const services =
         page === PAGE_INPUT
             ? unifiedConfigs.pages.inputs.services
             : unifiedConfigs.pages.configuration.tabs.filter((x) => x.name === serviceName);
 
+    const tableConfig =
+        page === PAGE_INPUT
+            ? (outerTable ? outerTable : services.find((x) => x.name === serviceName).table)
+            : unifiedConfigs.pages.configuration.tabs.find((x) => x.name === serviceName)
+                .table;
+
+    const { moreInfo } = tableConfig;
+    const headers = tableConfig.header;
+    const isOuterTable = outerTable ? true : false;
+
     const modifyAPIResponse = (data) => {
         const obj = {};
         services.forEach((service, index) => {
@@ -209,6 +215,11 @@ function TableWrapper({ page, serviceName, handleRequestModalOpen, handleOpenPag
             arr = findByMatchingValue(rowData[searchType]);
         }
 
+        // For Inputs page, filter the data when tab change
+        if (!isOuterTable) {
+            arr = arr.filter((v) => v.serviceName === serviceName);
+        }
+
         const _sortKey = isCustomMapping ? 'serviceTitle' : sortKey;
 
         // Sort the array based on the sort value
@@ -252,6 +263,7 @@ function TableWrapper({ page, serviceName, handleRequestModalOpen, handleOpenPag
                 services={services}
                 totalElement={totalElement}
                 handleRequestModalOpen={handleRequestModalOpen}
+                isOuterTable={isOuterTable}
             />
             <CustomTable
                 page={page}
@@ -262,6 +274,8 @@ function TableWrapper({ page, serviceName, handleRequestModalOpen, handleOpenPag
                 sortDir={sortDir}
                 sortKey={sortKey}
                 handleOpenPageStyleDialog={handleOpenPageStyleDialog}
+                tableConfig={tableConfig}
+                services={services}
             />
         </>
     );