pixel-react-excel-sheet 1.0.11 → 1.0.13

package/src/components/AddVariables/AddVariables.tsx

@@ -0,0 +1,113 @@
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import VariableDropdown from '../Editor/VariableDropdown';
+import Icon from '../Icon';
+import Input from '../Input';
+import { AddVariableProps, dynamicObject } from './types';
+import './AddVariables.scss';
+import React, { useState, useRef, useEffect } from 'react';
+
+const AddVariables: React.FC<AddVariableProps> = ({
+  label = '',
+  variableList = [],
+  placeholder = 'Enter text',
+  onChange,
+  onCreateVariableClick,
+  value = '',
+  dropdownWidth = 'inherit',
+}) => {
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+  const [cursorPosition, setCursorPosition] = useState<number | null>(null);
+  const [showCreateVariableIcon, setShowCreateVariableIcon] =
+    useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (cursorPosition !== null && inputRef.current) {
+      inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
+      inputRef.current.focus();
+    }
+  }, [cursorPosition]);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    onChange?.(value);
+
+    // Show dropdown only if the last character typed is `$`
+    const cursorPos = inputRef.current?.selectionStart || 0;
+    const isDollarTyped = value[cursorPos - 1] === '$';
+
+    if (isDollarTyped) {
+      setShowDropdown(true);
+    } else {
+      setShowDropdown(false); // Close if it's a space or other characters
+    }
+    if (value?.includes('$')) {
+      setShowCreateVariableIcon(false);
+    } else {
+      setShowCreateVariableIcon(true);
+    }
+  };
+
+  const handleDropdownClick = (item: dynamicObject) => {
+    if (inputRef.current) {
+      const { selectionStart, selectionEnd } = inputRef.current;
+      const dollarSyntax = `{${
+        item.type === 'LOCAL'
+          ? 'LV'
+          : item.type === 'GLOBAL'
+          ? 'GV'
+          : item.type === 'GROUP'
+          ? 'SG'
+          : 'PEV'
+      }_${item.name}}`;
+
+      const newValue =
+        value.slice(0, selectionStart || 0) +
+        dollarSyntax +
+        value.slice(selectionEnd || 0);
+
+      onChange(newValue);
+      setCursorPosition((selectionStart || 0) + dollarSyntax.length);
+
+      // Close the dropdown after inserting the variable
+      setShowDropdown(false);
+      onChange?.(newValue);
+    }
+  };
+
+  return (
+    <div className="ff-add-variable-container">
+      <div className="ff-add-variable-input">
+        <Input
+          name="add_variable"
+          ref={inputRef}
+          type="text"
+          value={value}
+          onChange={handleChange}
+          variant="primary"
+          label={label}
+          placeholder={placeholder}
+        />
+        {!checkEmpty(value) && showCreateVariableIcon && (
+          <Icon
+            onClick={onCreateVariableClick}
+            name="add_variable"
+            width={24}
+            height={24}
+            hoverEffect
+          />
+        )}
+      </div>
+      {showDropdown && (
+        <VariableDropdown
+          position="relative"
+          width={dropdownWidth}
+          optionsList={variableList}
+          onSelectVariable={handleDropdownClick}
+        />
+      )}
+    </div>
+  );
+};
+
+export default AddVariables;

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}