feat(CODE): ADDON-58505 Added support of style to page in the global …

…config file (#201) * feat(CODE): ADDON-58505 Added support of style to page in the global config file * feat(CODE): ADDON-58505 Fixed title issue * feat(CODE): ADDON-58505 Remove extra code
splunk · Dec 15, 2022 · c0b6e77 · c0b6e77
1 parent 283d5ab
commit c0b6e77
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 51 deletions.
diff --git a/src/main/webapp/components/ConfigurationTable.jsx b/src/main/webapp/components/ConfigurationTable.jsx
@@ -4,53 +4,103 @@ import PropTypes from 'prop-types';
 import { TableContextProvider } from '../context/TableContext';
 import TableWrapper from './table/TableWrapper';
 import EntityModal from './EntityModal';
-import { MODE_CREATE } from '../constants/modes';
+import EntityPage from './EntityPage';
+import { MODE_CREATE, MODE_CLONE } from '../constants/modes';
 import { PAGE_CONF } from '../constants/pages';
+import { STYLE_PAGE } from '../constants/dialogStyles';
 
-function ConfigurationTable({ serviceName, serviceTitle }) {
-    const [open, setOpen] = useState(false);
-    const serviceLabel = `Add ${serviceTitle}`;
+function ConfigurationTable({ selectedTab, updateIsPageOpen }) {
+
+    const [entity, setEntity] = useState({ open: false });
+
+    const isConfigurationPageStyle = selectedTab.style === STYLE_PAGE;
 
     const handleRequestOpen = () => {
-        setOpen(true);
+        setEntity({
+            ...entity,
+            open: true,
+            mode: MODE_CREATE,
+            formLabel: `Add ${selectedTab.title}`,
+        });
     };
 
-    const handleRequestClose = () => {
-        setOpen(false);
+    // handle close request for modal style dialog
+    const handleModalDialogClose = () => {
+        setEntity({ ...entity, open: false });
     };
+
+    // generate modal style dialog
     const generateModalDialog = () => {
-        if (open) {
-            return (
-                <EntityModal
-                    page={PAGE_CONF}
-                    open={open}
-                    handleRequestClose={handleRequestClose}
-                    handleSaveData={() => {}}
-                    serviceName={serviceName}
-                    mode={MODE_CREATE}
-                    formLabel={serviceLabel}
-                />
-            );
-        }
-        return null;
+        return (
+            <EntityModal
+                page={PAGE_CONF}
+                open={entity.open}
+                handleRequestClose={handleModalDialogClose}
+                serviceName={selectedTab.name}
+                mode={MODE_CREATE}
+                formLabel={entity.formLabel}
+            />
+        );
+    };
+
+    // handle clone/edit request per row from table for page style dialog
+    const handleOpenPageStyleDialog = (row, mode) => {
+        setEntity({
+            ...entity,
+            open: true,
+            stanzaName: row.name,
+            formLabel: mode === MODE_CLONE ? `Clone ${selectedTab.title}` : `Update ${selectedTab.title}`,
+            mode,
+        });
+    };
+
+    // handle close request for page style dialog
+    const handlePageDialogClose = () => {
+        setEntity({ ...entity, open: false });
+        updateIsPageOpen(false);
+    };
+
+    // generate page style dialog
+    const generatePageDialog = () => {
+        updateIsPageOpen(true);
+        return (
+            <EntityPage
+                open={entity.open}
+                handleRequestClose={handlePageDialogClose}
+                serviceName={selectedTab.name}
+                stanzaName={entity.stanzaName}
+                mode={entity.mode}
+                formLabel={entity.formLabel}
+                page={PAGE_CONF}
+            />
+        );
     };
+
+    const getTableWrapper = () => {
+        return (
+            <TableWrapper
+                page={PAGE_CONF}
+                serviceName={selectedTab.name}
+                handleRequestModalOpen={() => handleRequestOpen()}
+                handleOpenPageStyleDialog={handleOpenPageStyleDialog}
+            />
+        );
+    };
+
     return (
         <>
             <TableContextProvider value={null}>
-                <TableWrapper
-                    page={PAGE_CONF}
-                    serviceName={serviceName}
-                    handleRequestModalOpen={() => handleRequestOpen()}
-                />
-                {generateModalDialog()}
+                {isConfigurationPageStyle && entity.open ? generatePageDialog() : null}
+                {!(isConfigurationPageStyle && entity.open) ? getTableWrapper() : null}
+                {!isConfigurationPageStyle && entity.open ? generateModalDialog() : null}
             </TableContextProvider>
         </>
     );
 }
 
 ConfigurationTable.propTypes = {
-    serviceName: PropTypes.string.isRequired,
-    serviceTitle: PropTypes.string.isRequired,
+    selectedTab: PropTypes.object,
+    updateIsPageOpen: PropTypes.func
 };
 
 export default memo(ConfigurationTable);
diff --git a/src/main/webapp/components/EntityPage.jsx b/src/main/webapp/components/EntityPage.jsx
@@ -9,11 +9,11 @@ import { _ } from '@splunk/ui-utils/i18n';
 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 { SubTitleComponent } from '../pages/Input/InputPageStyle';
+import { PAGE_INPUT } from '../constants/pages';
 
-function EntityPage({ handleRequestClose, serviceName, mode, stanzaName, formLabel }) {
+function EntityPage({ handleRequestClose, serviceName, mode, stanzaName, formLabel, page }) {
     // Ref is used here to call submit method of form only
     const form = useRef(); // nosemgrep: typescript.react.security.audit.react-no-refs.react-no-refs
     const [isSubmitting, setIsSubmitting] = useState(false);
@@ -52,7 +52,7 @@ function EntityPage({ handleRequestClose, serviceName, mode, stanzaName, formLab
             <ColumnLayout.Row style={{ padding: '5px 0px' }}>
                 <ColumnLayout.Column>
                     <SubTitleComponent>
-                        <Link onClick={handleRequestClose}>{_('Inputs')}</Link>
+                        <Link onClick={handleRequestClose}>{page === PAGE_INPUT ? _('Inputs') : _('Configuration')}</Link>
                         {' > '}
                         {_(formLabel)}
                     </SubTitleComponent>
@@ -63,7 +63,7 @@ function EntityPage({ handleRequestClose, serviceName, mode, stanzaName, formLab
                 <ColumnLayout.Column span={8} style={colStyle}>
                     <BaseFormView // nosemgrep: typescript.react.security.audit.react-no-refs.react-no-refs
                         ref={form}
-                        page={PAGE_INPUT}
+                        page={page}
                         serviceName={serviceName}
                         mode={mode}
                         stanzaName={stanzaName}
@@ -80,12 +80,14 @@ function EntityPage({ handleRequestClose, serviceName, mode, stanzaName, formLab
                         onClick={handleRequestClose}
                         label={_('Cancel')}
                         disabled={isSubmitting}
+                        style={{"width": "80px"}}
                     />
                     <Button
                         appearance="primary"
                         label={isSubmitting ? <WaitSpinner /> : buttonText}
                         onClick={handleSubmit}
                         disabled={isSubmitting}
+                        style={{"width": "80px"}}
                     />
                 </ColumnLayout.Column>
                 <ColumnLayout.Column span={2} />
@@ -100,6 +102,7 @@ EntityPage.propTypes = {
     mode: PropTypes.string,
     stanzaName: PropTypes.string,
     formLabel: PropTypes.string,
+    page: PropTypes.string,
 };
 
 export default memo(EntityPage);
diff --git a/src/main/webapp/components/table/CustomTable.jsx b/src/main/webapp/components/table/CustomTable.jsx
@@ -46,6 +46,10 @@ function CustomTable({
         unifiedConfigs.pages.inputs.services.forEach((x) => {
             serviceToStyleMap[x.name] = x.style === STYLE_PAGE ? STYLE_PAGE : STYLE_MODAL;
         });
+    } else {
+        unifiedConfigs.pages.configuration.tabs.forEach((x) => {
+            serviceToStyleMap[x.name] = x.style === STYLE_PAGE ? STYLE_PAGE : STYLE_MODAL;
+        });
     }
 
     const query = useQuery();
@@ -86,7 +90,7 @@ function CustomTable({
 
     const handleEditActionClick = useCallback(
         (selectedRow) => {
-            if (serviceToStyleMap[selectedRow.serviceName] === 'page') {
+            if (serviceToStyleMap[selectedRow.serviceName] === STYLE_PAGE) {
                 handleOpenPageStyleDialog(selectedRow, MODE_EDIT);
             } else {
                 setEntityModal({
@@ -108,7 +112,7 @@ function CustomTable({
 
     const handleCloneActionClick = useCallback(
         (selectedRow) => {
-            if (serviceToStyleMap[selectedRow.serviceName] === 'page') {
+            if (serviceToStyleMap[selectedRow.serviceName] === STYLE_PAGE) {
                 handleOpenPageStyleDialog(selectedRow, MODE_CLONE);
             } else {
                 setEntityModal({

diff --git a/src/main/webapp/pages/Configuration/ConfigurationPage.jsx b/src/main/webapp/pages/Configuration/ConfigurationPage.jsx
@@ -34,6 +34,7 @@ function ConfigurationPage() {
     });
 
     const [activeTabId, setActiveTabId] = useState(tabs[0].name);
+    const [isPageOpen, setIsPageOpen] = useState(false);
 
     const query = useQuery();
 
@@ -55,26 +56,33 @@ function ConfigurationPage() {
     const handleChange = useCallback(
         (e, { selectedTabId }) => {
             setActiveTabId(selectedTabId);
+            setIsPageOpen(false);
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [activeTabId]
     );
 
+    const updateIsPageOpen = (data) => {
+        setIsPageOpen(data);
+    };
+
     return (
         <ErrorBoundary>
-            <ColumnLayout gutter={8}>
-                <Row>
-                    <ColumnLayout.Column span={9}>
-                        <TitleComponent>{_(title)}</TitleComponent>
-                        <SubTitleComponent>{_(description || '')}</SubTitleComponent>
-                    </ColumnLayout.Column>
-                </Row>
-            </ColumnLayout>
-            <TabBar activeTabId={activeTabId} onChange={handleChange}>
-                {tabs.map((tab) => (
-                    <TabBar.Tab key={tab.name} label={_(tab.title)} tabId={tab.name} />
-                ))}
-            </TabBar>
+            <div style={isPageOpen ? { display: 'none' } : { display: 'block' }}>
+                <ColumnLayout gutter={8}>
+                    <Row>
+                        <ColumnLayout.Column span={9}>
+                            <TitleComponent>{_(title)}</TitleComponent>
+                            <SubTitleComponent>{_(description || '')}</SubTitleComponent>
+                        </ColumnLayout.Column>
+                    </Row>
+                </ColumnLayout>
+                <TabBar activeTabId={activeTabId} onChange={handleChange}>
+                    {tabs.map((tab) => (
+                        <TabBar.Tab key={tab.name} label={_(tab.title)} tabId={tab.name} />
+                    ))}
+                </TabBar>
+            </div>
             {tabs.map((tab) => {
                 return tab.table ? (
                     <div
@@ -86,8 +94,8 @@ function ConfigurationPage() {
                     >
                         <ConfigurationTable
                             key={tab.name}
-                            serviceName={tab.name}
-                            serviceTitle={tab.title}
+                            selectedTab={tab}
+                            updateIsPageOpen={updateIsPageOpen}
                         />
                     </div>
                 ) : (

diff --git a/src/main/webapp/pages/Input/InputPage.jsx b/src/main/webapp/pages/Input/InputPage.jsx
@@ -57,7 +57,7 @@ function InputPage() {
         return service.name;
     });
 
-    let navigate = useNavigate();
+    const navigate = useNavigate();
     const query = useQuery();
 
     useEffect(() => {
@@ -187,6 +187,7 @@ function InputPage() {
                 stanzaName={entity.stanzaName}
                 mode={entity.mode}
                 formLabel={entity.formLabel}
+                page={PAGE_INPUT}
             />
         );
     };

diff --git a/src/main/webapp/schema/schema.json b/src/main/webapp/schema/schema.json
@@ -1300,6 +1300,10 @@
         "table": {
           "$ref": "#/definitions/ConfigurationTable"
         },
+        "style": {
+          "type": "string",
+          "enum": ["page", "dialog"]
+        },
         "conf": {
           "type": "string",
           "maxLength": 100