pixel-react-excel-sheet 1.0.11 → 1.0.12

package/src/components/AddVariables/index.ts

@@ -0,0 +1 @@
+export { default } from './AddVariables';

package/src/components/AddVariables/types.ts

@@ -0,0 +1,36 @@
+export type dynamicObject = {
+  [key: string]: any;
+};
+
+export interface AddVariableProps {
+  /**
+   * Label for the field
+   */
+  label?: string;
+  /**
+   * List of variables
+   */
+  variableList?: dynamicObject[];
+  /**
+   * Place holder for the input field
+   */
+  placeholder?: string;
+  /**
+   * Function to handle input change
+   * @param value
+   * @returns
+   */
+  onChange: (value: string) => void;
+  /**
+   * Function to handle create variable icon click
+   */
+  onCreateVariableClick?: () => void;
+  /**
+   * Value of the input field
+   */
+  value: string;
+  /**
+   * Width of the dropdown
+   */
+  dropdownWidth?: string;
+}

package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss

@@ -7,7 +7,7 @@
   .ff-all-project-dropdown {
     width: fit-content;
     border-radius: 16px;
-    background-color: var(--ff-all-projects-default-color);
+    // background-color: var(--ff-all-projects-default-color);
     color: var(--expandable-menu-default-bg);
     line-height: 18px;
     @include mixins.center-content();

package/src/components/AppHeader/AppHeader.scss

@@ -17,6 +17,7 @@
     .ff-app-header-nav-bar {
       display: flex;
       align-items: center;
+      justify-content: center;
       background-color: var(--brand-color);
       transform: translateY(12px);
       border-radius: 20px;
@@ -32,6 +33,10 @@
           cursor: pointer;
           display: flex;
           position: relative;
+          flex: 1 1 auto;
+          overflow: hidden;
+          transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;
+          max-width: 100px; /* Initial max-width */
           &:not(.ff-app-header-nav-bar-item--selected):hover::after {
             animation: oscillate-border-width 0.5s ease-in-out forwards;
           }
@@ -54,7 +59,9 @@
             padding: 3px;
             background-color: var(--primary-icon-color);
             border-radius: 20px;
-            transition: width 3s ease-in-out;
+            flex-grow: 12; /* Increase size on hover */
+            max-width: 550px;
+            opacity: 1;
             .ff-app-header-nav-bar-item-label {
               box-shadow: 0px 4px 4px 0px #00000040 inset;
               background: linear-gradient(
@@ -114,6 +121,7 @@
             .ff-app-header-quickmenu-container {
               display: flex;
               align-items: center;
+              overflow: hidden;
               .ff-app-header-nav-bar-quickmenu-item {
                 margin-right: 6px;
                 .ff-tooltip-container {
@@ -136,6 +144,15 @@
             }
           }
         }
+        .ff-app-header-nav-bar-item--selected
+          .ff-app-header-quickmenu-container {
+          animation: quickmenu-expand 1s ease forwards;
+        }
+
+        .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected)
+          .ff-app-header-quickmenu-container {
+          animation: quickmenu-collapse 1s ease forwards;
+        }
       }
       .more-menu {
         width: 40px;
@@ -174,3 +191,25 @@
     left: 25%;
   }
 }
+
+@keyframes quickmenu-expand {
+  from {
+    max-height: 0;
+    opacity: 0;
+  }
+  to {
+    max-height: 500px; /* Ensure this value covers the full height of your quick menu */
+    opacity: 1;
+  }
+}
+
+@keyframes quickmenu-collapse {
+  from {
+    max-height: 500px;
+    opacity: 1;
+  }
+  to {
+    max-height: 0;
+    opacity: 0;
+  }
+}

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

@@ -4,6 +4,7 @@ import {
   appHeaderMenuItemProps,
   appHeaderSubMenuItemProps,
   appHeaderQuickMenuItemProps,
+  appHeaderHiddenMenuItemProps,
 } from './types';
 import Icon from '../Icon';
 import React, { useState } from 'react';
@@ -135,6 +136,27 @@ const headerMenuItems = [
             icon: 'approval_pending',
           },
         ],
+        quickMenuItems: [
+          { label: 'Elements', path: '#elements', iconName: 'element' },
+          {
+            label: 'Project Elements',
+            path: '#project-element',
+            iconName: 'project_element',
+          },
+          { label: 'Test Data', path: '#test-data', iconName: 'test_data' },
+          { label: 'Variables', path: '#variable', iconName: 'variable' },
+          { label: 'Parameters', path: '#parameters', iconName: 'parameters' },
+          {
+            label: 'Data Provider',
+            path: '#data-provider',
+            iconName: 'data_provider',
+          },
+          {
+            label: 'Web Service',
+            path: '#web-service',
+            iconName: 'web_service_icon',
+          },
+        ],
       },
     ],
   },
@@ -162,6 +184,42 @@ const headerMenuItems = [
             icon: 'approval_pending',
           },
         ],
+        quickMenuItems: [
+          { label: 'Elements', path: '#elements', iconName: 'element' },
+          {
+            label: 'Project Elements',
+            path: '#project-element',
+            iconName: 'project_element',
+          },
+          { label: 'Step Groups', path: '#step-group', iconName: 'step_group' },
+          { label: 'Test Data', path: '#test-data', iconName: 'test_data' },
+          { label: 'Variables', path: '#variable', iconName: 'variable' },
+          {
+            label: 'Pre-post Conditions',
+            path: '#pre-post-conditions',
+            iconName: 'pre_post_condition',
+          },
+          {
+            label: 'Data Provider',
+            path: '#data-provider',
+            iconName: 'data_provider',
+          },
+          {
+            label: 'Depends on script',
+            path: '#depends-on-script',
+            iconName: 'depends_on_script',
+          },
+          {
+            label: 'Web Service',
+            path: '#web-service',
+            iconName: 'web_service_icon',
+          },
+          {
+            label: 'Authorization',
+            path: '#authorization',
+            iconName: 'authorization_icon',
+          },
+        ],
       },
       {
         label: 'Executions',
@@ -183,6 +241,24 @@ const headerMenuItems = [
             icon: 'approval_pending',
           },
         ],
+        quickMenuItems: [
+          {
+            label: 'Test Data Set',
+            path: '#test-data-set',
+            iconName: 'test_data_set',
+          },
+          {
+            label: 'Variable Set',
+            path: '#variable-set',
+            iconName: 'variable_set',
+          },
+          {
+            label: 'Email Group',
+            path: '#email-group',
+            iconName: 'email_group',
+          },
+          { label: 'Labels', path: '#labels', iconName: 'label_icon' },
+        ],
       },
       {
         label: 'Scheduled Executions',
@@ -198,11 +274,8 @@ const headerMenuItems = [
         label: 'Rest API',
         path: '/webservice/restapi',
         quickMenuItems: [
-          {
-            label: 'variables',
-            path: '/webservice/restapi/variable',
-            iconName: 'variable',
-          },
+          { label: 'Variables', path: '#variable', iconName: 'variable' },
+          { label: 'History', path: '#history', iconName: 'history' },
         ],
       },
       {
@@ -309,6 +382,24 @@ const headerMenuItems = [
             icon: 'configuration',
           },
         ],
+        quickMenuItems: [
+          { label: 'Variables', path: '#variable', iconName: 'variable' },
+          {
+            label: 'Data Provider',
+            path: '#data-provider',
+            iconName: 'data_provider',
+          },
+          {
+            label: 'Depends on script',
+            path: '#depends-on-script',
+            iconName: 'depends_on_script',
+          },
+          {
+            label: 'Web Service',
+            path: '#web-service',
+            iconName: 'web_service_icon',
+          },
+        ],
       },
       {
         label: 'Elements',
@@ -335,6 +426,20 @@ const headerMenuItems = [
             icon: 'configuration',
           },
         ],
+        quickMenuItems: [
+          { label: 'Parameters', path: '#parameters', iconName: 'parameters' },
+          { label: 'Variables', path: '#variable', iconName: 'variable' },
+          {
+            label: 'Data Provider',
+            path: '#data-provider',
+            iconName: 'data_provider',
+          },
+          {
+            label: 'Web Service',
+            path: '#web-service',
+            iconName: 'web_service_icon',
+          },
+        ],
       },
       {
         label: 'Variables',
@@ -376,6 +481,9 @@ export const Controlled: Story = {
     const [selectedMenuItem, setSelectedMenuItem] = useState('Projects');
     const [selectedSubMenuItem, setSelectedSubMenuItem] = useState('');
     const [selectedQuickMenuItem, setSelectedQuickMenuItem] = useState('');
+    const [selectedHiddenMenuItems, setSelectedHiddenMenuItems] = useState<
+      appHeaderHiddenMenuItemProps[]
+    >([]);
     const [selectedProject, setSelectedProject] = useState({
       label: 'All Projects',
       value: 'All Projects',
@@ -384,9 +492,27 @@ export const Controlled: Story = {
     const handleMenuClick = (item: appHeaderMenuItemProps) => {
       setSelectedMenuItem(item.label);
     };
+
     const handleSubMenuClick = (item: appHeaderSubMenuItemProps) => {
       setSelectedSubMenuItem(item.label);
+      const selectedMainMenu = headerMenuItems.find(
+        (menu) => menu.label === selectedMenuItem
+      );
+
+      if (selectedMainMenu?.subMenuItems) {
+        const selectedSubMenu = selectedMainMenu.subMenuItems.find(
+          (subMenu) => subMenu.label === item.label
+        ) as appHeaderSubMenuItemProps;
+        let hiddenMenuArray: appHeaderHiddenMenuItemProps[] = [];
+        if (selectedSubMenu?.hiddenMenuItems) {
+          hiddenMenuArray = selectedSubMenu.hiddenMenuItems;
+          console.log('Hidden menu items:', hiddenMenuArray);
+        }
+        setSelectedHiddenMenuItems(hiddenMenuArray);
+        console.log('Selected main menu:', selectedSubMenu);
+      }
     };
+
     const handleQuickMenuClick = (item: appHeaderQuickMenuItemProps) => {
       setSelectedQuickMenuItem(item.iconName);
     };
@@ -401,10 +527,12 @@ export const Controlled: Story = {
       <>
         <div>
           <AppHeader
+            width='1120px'
             logoIconName="fireflink_icon"
             leftContent={headerRightSideContent}
             rightContent={headerRightSideContent}
             appHeaderMenuItems={headerMenuItems}
+            appHeaderHiddenMenuItems={selectedHiddenMenuItems}
             projectsList={projectList}
             selectedMenu={selectedMenuItem}
             selectedSubMenu={selectedSubMenuItem}

package/src/components/AppHeader/AppHeader.tsx

@@ -1,8 +1,4 @@
-import {
-  appHeaderHiddenMenuItemProps,
-  AppHeaderProps,
-  appHeaderSubMenuItemProps,
-} from './types';
+import { AppHeaderProps } from './types';
 import Icon from '../Icon';
 import './AppHeader.scss';
 import classNames from 'classnames';
@@ -11,14 +7,16 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 import AllProjectsDropdown from '../AllProjectsDropdown';
 import MenuOption from '../MenuOption';
 import Tooltip from '../Tooltip';
-import React, { useState } from 'react';
+import React from 'react';
 
 const AppHeader: React.FC<AppHeaderProps> = ({
   logoIconName = 'fireflink_icon',
+  width,
   leftContent,
   rightContent,
   projectsList,
   appHeaderMenuItems,
+  appHeaderHiddenMenuItems,
   selectedMenu,
   selectedSubMenu,
   selectedQuickMenu,
@@ -30,15 +28,6 @@ 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">
@@ -51,7 +40,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
           )}
         </div>
         {!checkEmpty(appHeaderMenuItems) && (
-          <div className="ff-app-header-nav-bar">
+          <div className="ff-app-header-nav-bar" style={{ width: width }}>
             {projectsList && !checkEmpty(projectsList) && (
               <div>
                 {
@@ -68,106 +57,116 @@ const AppHeader: React.FC<AppHeaderProps> = ({
             <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)}
+                  !appHeaderHiddenMenuItems?.find(
+                    (menu) => menu.label === menuItem.label
+                  ) && (
+                    <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,
-                                    }
-                                  )}
-                                  lineHeight="18px"
-                                  onClick={() =>
-                                    onSubMenuClickHandler(subMenuItem)
-                                  }
+                      <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"
                                 >
-                                  {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,
+                                  <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={() => onSubMenuClick(subMenuItem)}
+                                  >
+                                    {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"
+                                        className={classNames(
+                                          'ff-app-header-quickmenu-container',
+                                          subMenuItem.quickMenuItems?.length
+                                            ? 'visible'
+                                            : ''
+                                        )}
+                                      >
+                                        <div>
+                                          <Icon name="vertical_separator" />
+                                        </div>
+                                        {subMenuItem.quickMenuItems.map(
+                                          (quickMenuItem) => {
+                                            return (
+                                              <>
+                                                <div
+                                                  key={quickMenuItem.iconName}
+                                                  onClick={() =>
+                                                    onQuickMenuClick(
+                                                      quickMenuItem
+                                                    )
                                                   }
-                                                )}
-                                              >
-                                                <Tooltip
-                                                  title={quickMenuItem?.label}
-                                                >
-                                                  <Icon
-                                                    name={
-                                                      quickMenuItem.iconName
+                                                  className={classNames(
+                                                    'ff-app-header-nav-bar-quickmenu-item',
+                                                    {
+                                                      ['ff-app-header-nav-bar-quickmenu-item--selected']:
+                                                        quickMenuItem.iconName ===
+                                                        selectedQuickMenu,
                                                     }
-                                                    height={16}
-                                                    width={16}
-                                                    hoverEffect={true}
-                                                  />
-                                                </Tooltip>
-                                              </div>
-                                            </>
-                                          );
-                                        }
-                                      )}
-                                    </div>
-                                  )}
-                              </div>
-                            );
-                          })}
-                        </>
-                      )}
-                  </div>
+                                                  )}
+                                                >
+                                                  <Tooltip
+                                                    title={quickMenuItem?.label}
+                                                  >
+                                                    <Icon
+                                                      name={
+                                                        quickMenuItem.iconName
+                                                      }
+                                                      height={16}
+                                                      width={16}
+                                                      hoverEffect={true}
+                                                    />
+                                                  </Tooltip>
+                                                </div>
+                                              </>
+                                            );
+                                          }
+                                        )}
+                                      </div>
+                                    )}
+                                </div>
+                              );
+                            })}
+                          </>
+                        )}
+                    </div>
+                  )
                 );
               })}
             </div>

package/src/components/AppHeader/types.ts

@@ -1,12 +1,13 @@
 import { ReactNode } from 'react';
 import { optionsType } from '../AllProjectsDropdown/types';
 export interface AppHeaderProps {
+  width?: string;
   logoIconName: string;
   leftContent?: ReactNode;
   rightContent?: ReactNode;
   projectsList?: optionsType[];
   appHeaderMenuItems: appHeaderMenuItemProps[];
-
+  appHeaderHiddenMenuItems?: appHeaderHiddenMenuItemProps[];
   selectedMenu: string;
   selectedSubMenu?: string;
   selectedQuickMenu?: string;
@@ -22,16 +23,16 @@ export interface appHeaderMenuItemProps {
   label: string;
   path?: string;
   disable?: boolean;
-  disableText?:string;
-  hide?:boolean;
+  disableText?: string;
+  hide?: boolean;
   subMenuItems?: appHeaderSubMenuItemProps[];
 }
 export interface appHeaderSubMenuItemProps {
   label: string;
   path?: string;
   disable?: boolean;
-  disableText?:string;
-  hide?:boolean;
+  disableText?: string;
+  hide?: boolean;
   quickMenuItems?: appHeaderQuickMenuItemProps[];
   hiddenMenuItems?: appHeaderHiddenMenuItemProps[];
 }
@@ -40,14 +41,14 @@ export interface appHeaderQuickMenuItemProps {
   path?: string;
   iconName: string;
   disable?: boolean;
-  disableText?:string;
-  hide?:boolean;
+  disableText?: string;
+  hide?: boolean;
 }
 export interface appHeaderHiddenMenuItemProps {
   label: string;
   value: string | string[];
   icon: string;
   disable?: boolean;
-  disableText?:string;
-  hide?:boolean;
+  disableText?: string;
+  hide?: boolean;
 }

package/src/components/AttachImage/AttachImage.stories.tsx

@@ -18,5 +18,7 @@ export const Default: Story = {
     onExpandClick: () => alert('Expand clicked'),
     onDeleteClick: () => alert('Delete clicked'),
     onDownloadClick: () => alert('Download clicked'),
+    height: '80px',
+    width: '80px',
   },
 };