feat: ADDON-62948 Added support for subTitle field in service (#402)

splunk · Jun 22, 2023 · c58a5ba · c58a5ba
1 parent 7ff06e9
commit c58a5ba
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 5 deletions.
diff --git a/src/main/webapp/components/CustomMenu.jsx b/src/main/webapp/components/CustomMenu.jsx
@@ -14,11 +14,14 @@ class CustomMenu extends Component {
     }
 
     componentDidMount() {
-        const globalConfig = getUnifiedConfigs();
+        const unifiedConfigs = getUnifiedConfigs();
+        const { services, menu: customMenuField, groupsMenu } = unifiedConfigs.pages.inputs;
         this.setState({ loading: true });
         this.loadCustomMenu().then((Control) => {
-            const customControl = new Control(globalConfig, this.el, this.setValue);
-            customControl.render();
+            const customControl = new Control(unifiedConfigs, this.el, this.setValue);
+            if (services && customMenuField && !groupsMenu) {
+                customControl.render();
+            }
             this.setState({ loading: false });
         });
     }

diff --git a/src/main/webapp/components/MenuInput.jsx b/src/main/webapp/components/MenuInput.jsx
@@ -6,11 +6,19 @@ import Menu from '@splunk/react-ui/Menu';
 import SlidingPanels from '@splunk/react-ui/SlidingPanels';
 import ChevronLeft from '@splunk/react-icons/ChevronLeft';
 import { _ } from '@splunk/ui-utils/i18n';
+import styled from 'styled-components';
+import { variables } from '@splunk/themes';
 import { getFormattedMessage } from '../util/messageUtil';
 import { getUnifiedConfigs } from '../util/util';
 import CustomMenu from './CustomMenu';
 import { StyledButton } from '../pages/EntryPageStyle';
 
+const CustomSubTitle = styled.span`
+    color: ${variables.brandColorD20};
+    font-size: ${variables.fontSizeSmall};
+    font-weight: 500;
+`;
+
 function MenuInput({ handleRequestOpen }) {
     const [activePanelId, setActivePanelId] = useState('main_panel');
     const [slidingPanelsTransition, setSlidingPanelsTransition] = useState('forward');
@@ -67,6 +75,7 @@ function MenuInput({ handleRequestOpen }) {
                     }}
                 >
                     {service.title}
+                    <CustomSubTitle>&nbsp;{service.subTitle}</CustomSubTitle>
                 </Menu.Item>
             )
         );
@@ -105,13 +114,17 @@ function MenuInput({ handleRequestOpen }) {
                     group.groupServices.forEach((serviceName) => {
                         servicesGroup[group.groupName].push({
                             name: serviceName,
-                            title: services.find((service) => service.name === serviceName).title,
                             hasSubmenu: false,
+                            title: services.find((service) => service.name === serviceName).title,
+                            subTitle: services.find((service) => service.name === serviceName)
+                                .subTitle,
                         });
                     });
                     servicesGroup.main_panel.push({
                         name: group.groupName,
                         title: group.groupTitle,
+                        subTitle: services.find((service) => service.name === group.groupName)
+                            .subTitle,
                         hasSubmenu: true,
                     });
                 } else {
@@ -126,6 +139,7 @@ function MenuInput({ handleRequestOpen }) {
             servicesGroup.main_panel = services.map((service) => ({
                 name: service.name,
                 title: service.title,
+                subTitle: service.subTitle,
                 hasSubmenu: false,
             }));
         }
@@ -143,7 +157,7 @@ function MenuInput({ handleRequestOpen }) {
             <SlidingPanels
                 activePanelId={activePanelId}
                 transition={slidingPanelsTransition}
-                style={{ width: '200px' }}
+                style={{ width: '210px' }}
             >
                 {getInputMenu}
             </SlidingPanels>
@@ -173,9 +187,26 @@ function MenuInput({ handleRequestOpen }) {
         </>
     );
 
+    const getCustomMenuAndGroupsMenu = () => (
+        <>
+            {React.createElement(CustomMenu, {
+                fileName: customMenuField.src,
+                type: customMenuField.type,
+                handleChange: handleChangeCustomMenu,
+            })}
+            {services.length === 1 ? makeInputButton() : makeSingleSelectDropDown()}
+        </>
+    );
+
     if (services && !customMenuField?.src) {
         return services.length === 1 ? makeInputButton() : makeSingleSelectDropDown();
     }
+
+    // Introducing a condition to enable simultaneous support for custom menu src and Groups Menu.
+    // ADDON-62948
+    if (services && customMenuField?.src && groupsMenu) {
+        return getCustomMenuAndGroupsMenu();
+    }
     return makeCustomMenu();
 }
 

diff --git a/src/main/webapp/schema/schema.json b/src/main/webapp/schema/schema.json
@@ -814,6 +814,10 @@
                     "type": "string",
                     "maxLength": 100
                   },
+                  "subTitle": {
+                    "type": "string",
+                    "maxLength": 50
+                  },
                   "entity": {
                     "type": "array",
                     "items": {
@@ -910,6 +914,10 @@
                     "type": "string",
                     "maxLength": 100
                   },
+                  "subTitle": {
+                    "type": "string",
+                    "maxLength": 50
+                  },
                   "description": {
                     "type": "string",
                     "maxLength": 200