pixel-react 1.6.0 → 1.6.1

package/src/components/AppHeader/AppHeader.stories.tsx

@@ -67,34 +67,72 @@ const projectList = [
   },
 ];
 const headerMenuItems = [
-  { label: 'Dashboard', path: 'Dashboard', subMenuItems: [] },
+  {
+    label: 'Dashboard',
+    path: '/dashboard',
+    subMenuItems: [
+      {
+        label: 'Dashboard',
+        path: '',
+      },
+      {
+        label: 'Analytics',
+        path: '',
+      },
+    ],
+  },
   {
     label: 'Repo',
-    path: 'Repo',
+    path: '/repository/elements',
     subMenuItems: [
       {
         label: 'Elements',
-        path: 'Elements',
+        path: '/repository/elements',
+        hiddenMenuItems: [
+          { label: 'Defects', value: 'Defects', icon: 'defects' },
+          {
+            label: 'Configuration',
+            value: 'Configuration',
+            icon: 'configuration',
+          },
+          {
+            label: 'Approval Request',
+            value: 'Approval Request',
+            icon: 'approval_pending',
+          },
+        ],
       },
       {
         label: 'Program Elements',
-        path: 'Program Elements',
+        path: '/repository/program-elements',
+        hiddenMenuItems: [
+          { label: 'Defects', value: 'Defects', icon: 'defects' },
+          {
+            label: 'Configuration',
+            value: 'Configuration',
+            icon: 'configuration',
+          },
+          {
+            label: 'Approval Request',
+            value: 'Approval Request',
+            icon: 'approval_pending',
+          },
+        ],
       },
       {
         label: 'Step Groups',
-        path: 'Step Groups',
-        quickMenuItems: [
-          {
-            quickMenuName: 'Success Icon',
-            iconName: 'success',
-          },
+        path: '/repository/step-group',
+        hiddenMenuItems: [
+          { label: 'Defects', value: 'Defects', icon: 'defects' },
           {
-            quickMenuName: 'Warning Icon',
-            iconName: 'warning',
+            label: 'Configuration',
+            value: 'Configuration',
+            icon: 'configuration',
           },
           {
-            quickMenuName: 'Info Icon',
-            iconName: 'info',
+            label: 'Approval Request',
+            value: 'Approval Request',
+            icon: 'approval_pending',
           },
         ],
       },
@@ -102,52 +140,219 @@ const headerMenuItems = [
   },
   {
     label: 'Test Data',
-    path: 'Test Data',
+    path: '/test-data',
   },
   {
     label: 'Test Dev',
-    path: 'Test Dev',
+    path: '/test-dev/scripts',
     subMenuItems: [
       {
         label: 'Scripts',
-        path: 'Scripts',
+        path: '/test-dev/scripts',
+        hiddenMenuItems: [
+          { label: 'Defects', value: 'Defects', icon: 'defects' },
+          {
+            label: 'Configuration',
+            value: 'Configuration',
+            icon: 'configuration',
+          },
+          {
+            label: 'Approval Request',
+            value: 'Approval Request',
+            icon: 'approval_pending',
+          },
+        ],
+      },
+      {
+        label: 'Executions',
+        path: '/test-dev/execution-dashboard',
+      },
+    ],
+  },
+  {
+    label: 'Suites',
+    path: '/suites/suites',
+    subMenuItems: [
+      {
+        label: 'Suites',
+        path: '/suites/suites',
+        hiddenMenuItems: [
+          {
+            label: 'Approval Request',
+            value: 'Approval Request',
+            icon: 'approval_pending',
+          },
+        ],
+      },
+      {
+        label: 'Scheduled Executions',
+        path: '',
+      },
+    ],
+  },
+  {
+    label: 'Web Service',
+    path: '/webservice/restapi',
+    subMenuItems: [
+      {
+        label: 'Rest API',
+        path: '/webservice/restapi',
         quickMenuItems: [
           {
-            label:'Element',
-            quickMenuName: 'Element',
-            iconName: 'element',
+            label: 'variables',
+            path: '/webservice/restapi/variable',
+            iconName: 'variable',
           },
+        ],
+      },
+      {
+        label: 'Snippets',
+        path: '/webservice/snippets',
+      },
+      {
+        label: 'Executions',
+        path: '/webservice/executions',
+      },
+    ],
+  },
+  {
+    label: 'Defects',
+    path: '/defects',
+  },
+  {
+    label: 'Configuration',
+    path: '/configuration',
+    subMenuItems: [
+      {
+        label: 'Environment Config.',
+        path: '',
+        hiddenMenuItems: [
+          { label: 'Web Service', value: 'Web Service', icon: 'defects' },
           {
-            label:'Project Element',
-            quickMenuName: 'Project Element',
-            iconName: 'project_element',
+            label: 'Configuration',
+            value: 'Configuration',
+            icon: 'configuration',
           },
           {
-            quickMenuName: 'Sun Icon',
-            iconName: 'sun_icon',
+            label: 'Approval Request',
+            value: 'Approval Request',
+            icon: 'approval_pending',
           },
+        ],
+      },
+      {
+        label: 'Execution Config.',
+        path: '',
+        hiddenMenuItems: [
+          { label: 'Web Service', value: 'Web Service', icon: 'defects' },
           {
-            quickMenuName: 'Moon Stars Icon',
-            iconName: 'moon_stars_icon',
+            label: 'Configuration',
+            value: 'Configuration',
+            icon: 'configuration',
           },
           {
-            quickMenuName: 'Impact List Icon',
-            iconName: 'impactList',
+            label: 'Approval Request',
+            value: 'Approval Request',
+            icon: 'approval_pending',
           },
         ],
       },
       {
-        label: 'Executions',
-        path: 'Executions',
+        label: 'User Management',
+        path: '',
+        hiddenMenuItems: [
+          { label: 'Web Service', value: 'Web Service', icon: 'defects' },
+          {
+            label: 'Configuration',
+            value: 'Configuration',
+            icon: 'configuration',
+          },
+          {
+            label: 'Approval Request',
+            value: 'Approval Request',
+            icon: 'approval_pending',
+          },
+        ],
+      },
+      {
+        label: 'Templates',
+        path: '',
+        hiddenMenuItems: [
+          { label: 'Web Service', value: 'Web Service', icon: 'defects' },
+          {
+            label: 'Configuration',
+            value: 'Configuration',
+            icon: 'configuration',
+          },
+          {
+            label: 'Approval Request',
+            value: 'Approval Request',
+            icon: 'approval_pending',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: 'Approval Request',
+    path: '/approval-request',
+    subMenuItems: [
+      {
+        label: 'Scripts',
+        path: '',
+        hiddenMenuItems: [
+          { label: 'Web Service', value: 'Web Service', icon: 'defects' },
+          { label: 'Defects', value: 'Defects', icon: 'defects' },
+          {
+            label: 'Configuration',
+            value: 'Configuration',
+            icon: 'configuration',
+          },
+        ],
+      },
+      {
+        label: 'Elements',
+        path: '',
+        hiddenMenuItems: [
+          { label: 'Web Service', value: 'Web Service', icon: 'defects' },
+          { label: 'Defects', value: 'Defects', icon: 'defects' },
+          {
+            label: 'Configuration',
+            value: 'Configuration',
+            icon: 'configuration',
+          },
+        ],
+      },
+      {
+        label: 'Step Groups',
+        path: '',
+        hiddenMenuItems: [
+          { label: 'Web Service', value: 'Web Service', icon: 'defects' },
+          { label: 'Defects', value: 'Defects', icon: 'defects' },
+          {
+            label: 'Configuration',
+            value: 'Configuration',
+            icon: 'configuration',
+          },
+        ],
+      },
+      {
+        label: 'Variables',
+        path: '',
+        hiddenMenuItems: [
+          { label: 'Web Service', value: 'Web Service', icon: 'defects' },
+          { label: 'Defects', value: 'Defects', icon: 'defects' },
+          {
+            label: 'Configuration',
+            value: 'Configuration',
+            icon: 'configuration',
+          },
+        ],
       },
     ],
   },
 ];
-const headerHiddenMenuItems = [
-  { label: 'Defects', value: 'Defects', icon: 'defects' },
-  { label: 'Approval Request', value: 'Approval Request', icon: 'approval_pending' },
-  { label: 'Configuration', value: 'Configuration', icon: 'configuration' },
-];
+
 const headerRightSideContent = (
   <div>
     <Icon name="logo" />
@@ -163,7 +368,6 @@ export const SampleAppHeader: Story = {
       </div>
     ),
     appHeaderMenuItems: headerMenuItems,
-    appHeaderHiddenMenuItems: headerHiddenMenuItems,
     selectedMenu: 'Repo',
   },
 };
@@ -191,7 +395,7 @@ export const Controlled: Story = {
     };
     const handleProjectDropdownLabelClick = () => {
       setSelectedMenuItem('Projects');
-    }
+    };
 
     return (
       <>
@@ -201,7 +405,6 @@ export const Controlled: Story = {
             leftContent={headerRightSideContent}
             rightContent={headerRightSideContent}
             appHeaderMenuItems={headerMenuItems}
-            appHeaderHiddenMenuItems={headerHiddenMenuItems}
             projectsList={projectList}
             selectedMenu={selectedMenuItem}
             selectedSubMenu={selectedSubMenuItem}

package/src/components/AppHeader/AppHeader.tsx

@@ -1,4 +1,8 @@
-import { AppHeaderProps } from './types';
+import {
+  appHeaderHiddenMenuItemProps,
+  AppHeaderProps,
+  appHeaderSubMenuItemProps,
+} from './types';
 import Icon from '../Icon';
 import './AppHeader.scss';
 import classNames from 'classnames';
@@ -7,6 +11,7 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 import AllProjectsDropdown from '../AllProjectsDropdown';
 import MenuOption from '../MenuOption';
 import Tooltip from '../Tooltip';
+import React, { useState } from 'react';
 
 const AppHeader: React.FC<AppHeaderProps> = ({
   logoIconName = 'fireflink_icon',
@@ -14,7 +19,6 @@ const AppHeader: React.FC<AppHeaderProps> = ({
   rightContent,
   projectsList,
   appHeaderMenuItems,
-  appHeaderHiddenMenuItems,
   selectedMenu,
   selectedSubMenu,
   selectedQuickMenu,
@@ -26,153 +30,168 @@ const AppHeader: React.FC<AppHeaderProps> = ({
   onProjectDropdownLabelClick = () => {},
   onMoreMenuOptionClick = () => {},
 }) => {
+  const [appHeaderHiddenMenuItems, setAppHeaderHiddenMenuItems] = useState<
+    appHeaderHiddenMenuItemProps[]
+  >([]);
+  const onSubMenuClickHandler = (subMenu: appHeaderSubMenuItemProps) => {
+    setAppHeaderHiddenMenuItems(
+      subMenu.hiddenMenuItems ? subMenu.hiddenMenuItems : []
+    );
+    onSubMenuClick(subMenu);
+  };
   return (
     <div className="ff-app-header-main">
-    <div className="ff-app-header">
-      <div className="ff-app-header-left-container">
-        <div className="ff-app-header-logo-icon">
-          <Icon color="" name={logoIconName} height={24} width={21} />
-        </div>
-        {leftContent && (
-          <div className="ff-app-header-left-content">{leftContent}</div>
-        )}
-      </div>
-      {!checkEmpty(appHeaderMenuItems) && (
-        <div className="ff-app-header-nav-bar">
-          {projectsList && !checkEmpty(projectsList) && (
-            <div>
-              {
-                <AllProjectsDropdown
-                  onClick={onProjectMenuClick}
-                  options={projectsList}
-                  selectedOption={selectedProject}
-                  onMenuClick={onProjectDropdownLabelClick}
-                  selected={selectedMenu === 'Projects'}
-                />
-              }
-            </div>
+      <div className="ff-app-header">
+        <div className="ff-app-header-left-container">
+          <div className="ff-app-header-logo-icon">
+            <Icon color="" name={logoIconName} height={24} width={21} />
+          </div>
+          {leftContent && (
+            <div className="ff-app-header-left-content">{leftContent}</div>
           )}
-          <div className="ff-app-header-nav-bar-items fontSm">
-            {appHeaderMenuItems.map((menuItem) => {
-              return (
-                <div
-                  className={classNames('ff-app-header-nav-bar-item', {
-                    ['ff-app-header-nav-bar-item--selected']:
-                      menuItem.label === selectedMenu,
-                  })}
-                  key={menuItem.label}
-                >
-                  <Typography
-                    as="div"
-                    className="ff-app-header-nav-bar-item-label"
-                    lineHeight="18px"
-                    onClick={() => onMenuClick(menuItem)}
+        </div>
+        {!checkEmpty(appHeaderMenuItems) && (
+          <div className="ff-app-header-nav-bar">
+            {projectsList && !checkEmpty(projectsList) && (
+              <div>
+                {
+                  <AllProjectsDropdown
+                    onClick={onProjectMenuClick}
+                    options={projectsList}
+                    selectedOption={selectedProject}
+                    onMenuClick={onProjectDropdownLabelClick}
+                    selected={selectedMenu === 'Projects'}
+                  />
+                }
+              </div>
+            )}
+            <div className="ff-app-header-nav-bar-items fontSm">
+              {appHeaderMenuItems.map((menuItem) => {
+                return (
+                  <div
+                    className={classNames('ff-app-header-nav-bar-item', {
+                      ['ff-app-header-nav-bar-item--selected']:
+                        menuItem.label === selectedMenu,
+                    })}
+                    key={menuItem.label}
                   >
-                    {menuItem.label}
-                  </Typography>
-                  {menuItem.label === selectedMenu &&
-                    menuItem?.subMenuItems && (
-                      <>
-                        {menuItem.subMenuItems.map((subMenuItem) => {
-                          return (
-                            <div
-                              key={subMenuItem.label}
-                              className="ff-app-header-submenu-container"
-                            >
-                              <Typography
-                                as="div"
-                                className={classNames(
-                                  'ff-app-header-nav-bar-submenu-item',
-                                  {
-                                    ['ff-app-header-nav-bar-submenu-item--selected']:
-                                      subMenuItem.label === selectedSubMenu,
+                    <Typography
+                      as="div"
+                      className="ff-app-header-nav-bar-item-label"
+                      lineHeight="18px"
+                      onClick={() => onMenuClick(menuItem)}
+                    >
+                      {menuItem.label}
+                    </Typography>
+                    {menuItem.label === selectedMenu &&
+                      menuItem?.subMenuItems && (
+                        <>
+                          {menuItem.subMenuItems.map((subMenuItem) => {
+                            return (
+                              <div
+                                key={subMenuItem.label}
+                                className="ff-app-header-submenu-container"
+                              >
+                                <Typography
+                                  as="div"
+                                  className={classNames(
+                                    'ff-app-header-nav-bar-submenu-item',
+                                    {
+                                      ['ff-app-header-nav-bar-submenu-item--selected']:
+                                        subMenuItem.label === selectedSubMenu,
+                                    }
+                                  )}
+                                  lineHeight="18px"
+                                  onClick={() =>
+                                    onSubMenuClickHandler(subMenuItem)
                                   }
-                                )}
-                                lineHeight="18px"
-                                onClick={() => onSubMenuClick(subMenuItem)}
+                                >
+                                  {subMenuItem.label}
+                                </Typography>
+                              </div>
+                            );
+                          })}
+                          {menuItem.subMenuItems.map((subMenuItem) => {
+                            return (
+                              <div
+                                key={subMenuItem.label}
+                                className="ff-app-header-submenu-container"
                               >
-                                {subMenuItem.label}
-                              </Typography>
-                            </div>
-                          );
-                        })}
-                        {menuItem.subMenuItems.map((subMenuItem) => {
-                          return (
-                            <div
-                              key={subMenuItem.label}
-                              className="ff-app-header-submenu-container"
-                            >
-                              {subMenuItem.label === selectedSubMenu &&
-                                subMenuItem?.quickMenuItems && (
-                                  <div className="ff-app-header-quickmenu-container">
-                                    <div>
-                                      <Icon name="vertical_separator" />
-                                    </div>
-                                    {subMenuItem.quickMenuItems.map(
-                                      (quickMenuItem) => {
-                                        return (
-                                          <>
-                                            <div
-                                              key={quickMenuItem.iconName}
-                                              onClick={() =>
-                                                onQuickMenuClick(quickMenuItem)
-                                              }
-                                              className={classNames(
-                                                'ff-app-header-nav-bar-quickmenu-item',
-                                                {
-                                                  ['ff-app-header-nav-bar-quickmenu-item--selected']:
-                                                    quickMenuItem.iconName ===
-                                                    selectedQuickMenu,
+                                {subMenuItem.label === selectedSubMenu &&
+                                  subMenuItem?.quickMenuItems && (
+                                    <div className="ff-app-header-quickmenu-container">
+                                      <div>
+                                        <Icon name="vertical_separator" />
+                                      </div>
+                                      {subMenuItem.quickMenuItems.map(
+                                        (quickMenuItem) => {
+                                          return (
+                                            <>
+                                              <div
+                                                key={quickMenuItem.iconName}
+                                                onClick={() =>
+                                                  onQuickMenuClick(
+                                                    quickMenuItem
+                                                  )
                                                 }
-                                              )}
-                                            >
-                                              <Tooltip
-                                                title={quickMenuItem?.label}
+                                                className={classNames(
+                                                  'ff-app-header-nav-bar-quickmenu-item',
+                                                  {
+                                                    ['ff-app-header-nav-bar-quickmenu-item--selected']:
+                                                      quickMenuItem.iconName ===
+                                                      selectedQuickMenu,
+                                                  }
+                                                )}
                                               >
-                                                <Icon
-                                                  name={quickMenuItem.iconName}
-                                                  height={16}
-                                                  width={16}
-                                                  hoverEffect={true}
-                                                />
-                                              </Tooltip>
-                                            </div>
-                                          </>
-                                        );
-                                      }
-                                    )}
-                                  </div>
-                                )}
-                            </div>
-                          );
-                        })}
-                      </>
-                    )}
+                                                <Tooltip
+                                                  title={quickMenuItem?.label}
+                                                >
+                                                  <Icon
+                                                    name={
+                                                      quickMenuItem.iconName
+                                                    }
+                                                    height={16}
+                                                    width={16}
+                                                    hoverEffect={true}
+                                                  />
+                                                </Tooltip>
+                                              </div>
+                                            </>
+                                          );
+                                        }
+                                      )}
+                                    </div>
+                                  )}
+                              </div>
+                            );
+                          })}
+                        </>
+                      )}
+                  </div>
+                );
+              })}
+            </div>
+            {appHeaderHiddenMenuItems &&
+              !checkEmpty(appHeaderHiddenMenuItems) && (
+                <div className="more-menu">
+                  <MenuOption
+                    iconName="more"
+                    options={appHeaderHiddenMenuItems}
+                    onOptionClick={onMoreMenuOptionClick}
+                    variant="dark"
+                    dropdownPlacement="down"
+                    zIndex={1001}
+                    tooltipTitle="More"
+                    optionCardVariant="primary"
+                  />
                 </div>
-              );
-            })}
+              )}
           </div>
-          {appHeaderHiddenMenuItems &&
-            !checkEmpty(appHeaderHiddenMenuItems) && (
-              <div className="more-menu">
-                <MenuOption
-                  iconName="more"
-                  options={appHeaderHiddenMenuItems}
-                  onOptionClick={onMoreMenuOptionClick}
-                  variant="dark"
-                  dropdownPlacement="down"
-                  zIndex={1001}
-                  tooltipTitle="More"
-                  optionCardVariant="primary"
-                />
-              </div>
-            )}
-        </div>
-      )}
-      {rightContent && (
-        <div className="ff-app-header-right-content">{rightContent}</div>
-      )}
-    </div>
+        )}
+        {rightContent && (
+          <div className="ff-app-header-right-content">{rightContent}</div>
+        )}
+      </div>
     </div>
   );
 };