pixel-react 1.5.9 → 1.6.1

package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -7,10 +7,11 @@ import Select from '../../Select';
 import { CellBase } from '../ExcelFile/ExcelFileComponents';
 import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
 import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
+import useSelector from '../ExcelFile/ExcelFileComponents/use-selector';
+import { convertStyleToBackend } from '../dataConversion';
 
 interface ExcelToolBarProps {
   toolbar?: 'show' | 'disable' | 'hide';
-  data: Matrix.Matrix<CellBase>;
   onBold: (data: Matrix.Matrix<CellBase>) => void;
   onItalic: (data: Matrix.Matrix<CellBase>) => void;
   setUnderlineType: (
@@ -33,7 +34,6 @@ interface ExcelToolBarProps {
 
 const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   toolbar = 'show',
-  data,
   onBold,
   onItalic,
   setUnderlineType,
@@ -45,6 +45,42 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   setBorderType,
   setFormatePainter,
 }) => {
+  const cell = useSelector((state) =>
+    state.active ? Matrix.get(state.active, state.model.data) : null
+  );
+  const data = useSelector((state) => state.model.data);
+  const formattedStyle = useSelector((state) => state.formattedStyle.open);
+
+  const [cellStyle, setCellStyle] = useState(
+    cell?.style || {
+      color: 'var(--text-color)',
+      backgroundColor: 'var(--drawer-footer-bg)',
+      borderColor: 'var(--toggle-strip-color)',
+    }
+  );
+
+  useEffect(() => {
+    setCellStyle(
+      cell?.style || {
+        color: 'var(--text-color)',
+        backgroundColor: 'var(--drawer-footer-bg)',
+        borderColor: 'var(--toggle-strip-color)',
+      }
+    );
+  }, [cell]);
+
+  useEffect(() => {
+    if (
+      cell?.style &&
+      JSON.stringify(cell.style) !== JSON.stringify(cellStyle)
+    ) {
+      setCellStyle(cell.style);
+    }
+  }, [cell]);
+
+  const styleBackend = convertStyleToBackend(cellStyle);
+  
+
   const [border, setBorder] = useState<string>('border-none');
   const [underLine, setUnderLine] = useState<string>('underline');
   const [selectedFontFamily, setSelectedFontFamily] = useState<{
@@ -167,13 +203,13 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Font Family'}>
           <div className="ff-excel-toolbar-font-family">
             <Select
+              showLabel={false}
               onChange={(e) => {
                 setSelectedFontFamily({ label: e.label, value: e.value });
                 setFontFamily(data, e.label);
               }}
               required={false}
               optionsList={fontFamily}
-              label=""
               selectedOption={selectedFontFamily}
             />
           </div>
@@ -181,8 +217,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Font Size'}>
           <div className="ff-excel-toolbar-font-size">
             <Select
+              showLabel={false}
               required={false}
-              label=""
               onChange={(e) => setFontSize(data, e.value)}
               optionsList={fontSize}
               selectedOption={{
@@ -197,6 +233,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       <div className="ff-excel-toolbar-icon">
         <Tooltip placement="top" title={'Text Left'}>
           <Icon
+            variant={cellStyle.textAlign === 'left' ? 'dark' : 'light'}
             hoverEffect
             disabled={toolbar === 'disable'}
             onClick={() => setTextAlign(data, 'left')}
@@ -205,6 +242,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         </Tooltip>
         <Tooltip placement="top" title={'Text Center'}>
           <Icon
+            variant={cellStyle.textAlign === 'center' ? 'dark' : 'light'}
             hoverEffect
             disabled={toolbar === 'disable'}
             onClick={() => setTextAlign(data, 'center')}
@@ -214,6 +252,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
 
         <Tooltip placement="top" title={'Text Right'}>
           <Icon
+            variant={cellStyle.textAlign === 'right' ? 'dark' : 'light'}
             hoverEffect
             disabled={toolbar === 'disable'}
             onClick={() => setTextAlign(data, 'right')}
@@ -225,6 +264,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       <div className="ff-excel-toolbar-text">
         <Tooltip placement="top" title={'Bold'}>
           <Icon
+            variant={styleBackend.bold ? 'dark' : 'light'}
             hoverEffect
             disabled={toolbar === 'disable'}
             onClick={() => onBold(data)}
@@ -234,6 +274,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Italic'}>
           <Icon
             hoverEffect
+            variant={styleBackend.italic ? 'dark' : 'light'}
             disabled={toolbar === 'disable'}
             onClick={() => onItalic(data)}
             name="italic"
@@ -242,6 +283,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Underline Type'}>
           <div className="ff-excel-toolbar-icon-underline">
             <Icon
+              variant={cellStyle.textDecoration===underLine?'dark' : 'light'}
               hoverEffect
               disabled={toolbar === 'disable'}
               onClick={() => setUnderlineType(data, underLine, true)}
@@ -266,6 +308,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       <div className="ff-excel-toolbar-icon">
         <Tooltip placement="top" title={'Format Painter'}>
           <Icon
+          variant={formattedStyle?'dark':'light'}
             hoverEffect
             disabled={toolbar === 'disable'}
             onClick={() => {

package/src/components/FieldSet/FieldSet.scss

@@ -0,0 +1,9 @@
+.ff_fieldSet_container {
+  .ff_fieldSet {
+    border-color: var(--ff-connecting-branch-modal-border);
+    border-radius: 5px;
+    .ff_legend_container{
+        display: flex;
+    }
+  }
+}

package/src/components/FieldSet/FieldSet.stories.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import FieldSet from './FieldSet';
+
+const meta: Meta<typeof FieldSet> = {
+  title: 'Components/FieldSet',
+  component: FieldSet,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof FieldSet>;
+
+const defaultArgs = {
+  legendName: 'Default Legend',
+  height: '200px',
+  width: '300px',
+  children: 'Default content inside the FieldSet.',
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const CustomDimensions: Story = {
+  args: {
+    ...defaultArgs,
+    height: '300px',
+    width: '400px',
+    legendName: 'Custom Dimensions',
+  },
+};
+
+export const WithNestedChildren: Story = {
+  args: {
+    ...defaultArgs,
+    legendName: 'Nested Content',
+    children: (
+      <div>
+        <p>This is some nested content inside the FieldSet.</p>
+        <button>Click Me</button>
+      </div>
+    ),
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [legend, setLegend] = useState('Controlled FieldSet');
+    const [content, setContent] = useState('Initial Content');
+
+    const handleLegendChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+      setLegend(event.target.value);
+
+    const handleContentChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+      setContent(event.target.value);
+
+    return (
+      <>
+        <div style={{ marginBottom: '1rem' }}>
+          <label>
+            Legend:
+            <input
+              type="text"
+              value={legend}
+              onChange={handleLegendChange}
+              style={{ marginLeft: '0.5rem' }}
+            />
+          </label>
+        </div>
+        <div style={{ marginBottom: '1rem' }}>
+          <label>
+            Content:
+            <input
+              type="text"
+              value={content}
+              onChange={handleContentChange}
+              style={{ marginLeft: '0.5rem' }}
+            />
+          </label>
+        </div>
+        <FieldSet legendName={legend} height="250px" width="350px">
+          {content}
+        </FieldSet>
+      </>
+    );
+  },
+};
+
+export const EmptyFieldSet: Story = {
+  args: {
+    legendName: 'Empty FieldSet',
+    height: '32px',
+    width: '317px',
+    children: null,
+  },
+};
+
+export default meta;

package/src/components/FieldSet/FieldSet.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import './FieldSet.scss';
+import { fieldSetProps } from './types';
+import Typography from '../Typography';
+const FieldSet: FC<fieldSetProps> = ({
+  legendName,
+  height,
+  width,
+  children,
+}) => {
+  return (
+    <div className="ff_fieldSet_container">
+      <fieldset className="ff_fieldSet" style={{ height, width }}>
+        <legend className="ff_legend_container">
+          <Typography
+            color="var(--license_header_text_color)"
+            fontSize={8}
+            lineHeight="12px"
+          >
+            {legendName}
+          </Typography>
+        </legend>
+        <div className="ff_children_container">{children}</div>
+      </fieldset>
+    </div>
+  );
+};
+
+export default FieldSet;

package/src/components/FieldSet/index.ts

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

package/src/components/FieldSet/types.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export interface fieldSetProps {
+  legendName: string;
+  height: string;
+  width: string;
+  children: ReactNode | string;
+}

package/src/components/FileDropzone/FileDropzone.scss

@@ -94,7 +94,7 @@
           display: flex;
           align-items: center;
           gap: 4px;
-          width: 90%;
+          width: 87%;
 
           .ff-file-info__icon {
             @include center;

package/src/components/FileDropzone/FileDropzone.stories.tsx

@@ -1,8 +1,8 @@
+import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import FileDropzone from './FileDropzone';
 import Toaster from '../Toast';
 import { useState } from 'react';
-import React from 'react';
 
 const meta: Meta<typeof FileDropzone> = {
   title: 'Components/FileDropzone',
@@ -23,8 +23,8 @@ const defaultArgs = {
   maxSizeErrorMessage: 'Max file size limit of 5MB exceeded',
   invalidFileMessage: 'Invalid file format',
   fileExistMessage: 'File already exist with same name and type',
-  width: 700,
-  height: 350,
+  width: 640,
+  height: 188,
 };
 
 export const Primary: Story = {
@@ -49,6 +49,8 @@ export const withMIMEValidation: Story = {
 export const Controlled: Story = {
   render: () => {
     const [showToaster, setShowToaster] = useState<boolean>(false);
+    const [acceptedFiles, setAcceptedFiles] = useState([]);
+    const [rejectedFiles, setRejectedFiles] = useState([]);
 
     const showMaxFilesError = () => {
       setShowToaster(true);
@@ -57,6 +59,14 @@ export const Controlled: Story = {
       }, 2000);
     };
 
+    const getAcceptedFiles = (files) => { 
+      setAcceptedFiles(files);
+    }
+
+    const getRejectedFiles = (files) => {
+      setRejectedFiles(files);
+    }
+
     return (
       <>
         <FileDropzone
@@ -69,6 +79,8 @@ export const Controlled: Story = {
           ]}
           validateMIMEType={true}
           onMaxFilesError={showMaxFilesError}
+          getAcceptedFiles={getAcceptedFiles}
+          getRejectedFiles={getRejectedFiles}
         />
         {showToaster && (
           <Toaster

package/src/components/FileDropzone/FileDropzone.tsx

@@ -25,6 +25,8 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   validateMIMEType = false,
   width = 640,
   height = 188,
+  getAcceptedFiles = () => {},
+  getRejectedFiles = () => {},
 }) => {
   const {
     getRootProps,
@@ -47,6 +49,9 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
     // onDrop: (accepted, rejected, event) => {}, //onDrop function to handle dropped or selected files explicitly.
   });
 
+  getAcceptedFiles(acceptedFiles);
+  getRejectedFiles(rejectedFiles);
+
   const acceptedFilesList = useMemo(
     () =>
       acceptedFiles.map((file) => (

package/src/components/FileDropzone/FilePreview.tsx

@@ -48,7 +48,7 @@ const FilePreview: React.FC<FilePreviewProps> = ({
         <div className="ff-file-actions__icon-replace">
           <Tooltip title="Replace">
             <Icon
-              name="replace"
+              name="replace_file"
               color={'var(--icons-default-color)'}
               height={16}
               width={16}

package/src/components/FileDropzone/types.ts

@@ -57,6 +57,14 @@ export interface FileDropzoneProps {
   width?: number | string;
 
   height?: number | string;
+  /**
+   *  Returns the accepted files in the state
+   **/
+  getAcceptedFiles?: (files: File[]) => void;
+  /**
+   *  Returns the rejected files in the state
+   **/
+  getRejectedFiles?: (files: FileRejection[]) => void;
 }
 export interface FileState {
   accepted: File[];

package/src/components/Icon/Icons.scss

@@ -12,9 +12,9 @@
   }
   &.ff-icon-dark {
     background-color: var(--brand-color);
+    border-radius: 4px;
     &.ff-icon-click {
       &:hover {
-        border-radius: 4px;
         background-color: white;
         svg path {
           fill: var(--brand-color);

package/src/components/Icon/iconList.ts

@@ -31,7 +31,7 @@ import Tick from '../../assets/Icons/tick_icon.svg?react';
 import Search from '../../assets/icons/search.svg?react';
 import Filter from '../../assets/icons/filter.svg?react';
 import Alert from '../../assets/icons/alert.svg?react';
-
+import ReplaceFile from '../../assets/icons/replace_file.svg?react';
 import RightArrow from '../../assets/icons/right_arrow_icon.svg?react';
 import LeftArrow from '../../assets/icons/left_arrow_icon.svg?react';
 import ClockIcon from '../../assets/icons/clock_icon.svg?react';
@@ -46,7 +46,7 @@ import LicenseIcon from '../../assets/icons/active_license_icon.svg?react';
 import DeleteIcon from '../../assets/icons/delete.svg?react';
 import DetailsIcon from '../../assets/icons/details.svg?react';
 import ImpactListIcon from '../../assets/icons/impactList.svg?react';
-
+import Export from '../../assets/icons/export.svg?react';
 import FormatePainter from '../../assets/icons/formate_painter.svg?react';
 import Bold from '../../assets/icons/bold.svg?react';
 import Italic from '../../assets/icons/italic.svg?react';
@@ -191,7 +191,7 @@ import SystemWarning from '../../assets/icons/system_warning.svg?react';
 import UserPasswordLock from '../../assets/icons/user_password_lock.svg?react';
 import UserWarning from '../../assets/icons/user_warning.svg?react';
 import UserWithSystem from '../../assets/icons/user_with_system.svg?react';
-
+import Import from '../../assets/icons/import.svg?react';
 import dashboardWebIcon from '../../assets/icons/dashboard_web_icon.svg?react';
 import dashboardMobileIcon from '../../assets/icons/dashboard_mobile_icon.svg?react';
 import dashboardWebMobileIcon from '../../assets/icons/web_mobile_icon.svg?react';
@@ -221,9 +221,11 @@ import RemoveUser from '../../assets/icons/remove_user.svg?react';
 import AddToArchive from '../../assets/icons/add_archive.svg?react';
 import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
 import InfoUser from '../../assets/icons/info_user.svg?react';
+import WebServiceIcon from '../../assets/icons/web_service_icon.svg?react';
 
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
+Components['alert'] = Alert;
 Components['delete_info'] = DeleteInfoIcon;
 Components['warning'] = WarningIcon;
 Components['toast_info'] = ToastInfoIcon;
@@ -266,7 +268,7 @@ Components['details'] = DetailsIcon;
 Components['impactList'] = ImpactListIcon;
 Components['beautify_icon'] = BeautifyIcon;
 Components['add_variable'] = AddVariable;
-
+Components['replace_file'] = ReplaceFile;
 Components['formate_painter'] = FormatePainter;
 Components['bold'] = Bold;
 Components['italic'] = Italic;
@@ -286,7 +288,7 @@ Components['text_color'] = TextColor;
 Components['fill_color'] = FillColor;
 Components['formula_icon'] = FormulaIcon;
 Components['excel_corner_menu'] = ExcelCornerMenu;
-
+Components['export'] = Export;
 Components['apk_file_type'] = ApkFileType;
 Components['csv_file_type'] = CsvFileType;
 Components['compressed_file_type'] = CompressedFileType;
@@ -301,7 +303,7 @@ Components['ipk_file_type'] = IpkFileType;
 Components['txt_file_type'] = TxtFileType;
 Components['gif_file_type'] = GifFileType;
 Components['jpg_file_type'] = JpgFileType;
-
+Components['import'] = Import;
 Components['info'] = InfoIcon;
 Components['calendar_icon'] = CalendarIcon;
 Components['hide_icon'] = HideIcon;
@@ -424,6 +426,7 @@ Components['run_manual_testcase'] = RunManualTestcaseIcon;
 Components['run_automation_scripts'] = RunAutomationScriptsIcon;
 Components['eye_open_icon'] = EyeOpenIcon;
 Components['replace_icon'] = ReplaceIcon;
+Components['replace_icon'] = ReplaceIcon;
 Components['header_preset'] = HeaderPreset;
 Components['project_element'] = ProjectElement;
 Components['element'] = Element;
@@ -436,7 +439,8 @@ Components['no_data'] = NoData;
 Components['add_user'] = AddUser;
 Components['add_to_archive'] = AddToArchive;
 Components['remove_user'] = RemoveUser;
-Components['dashboard_icon'] = DashboardIcon;//TODO:this is temporary icon
+Components['dashboard_icon'] = DashboardIcon; //TODO:this is temporary icon
 Components['info_user'] = InfoUser;
+Components['web_service_icon'] = WebServiceIcon;
 
 export default Components;

package/src/components/MachineInputField/MachineInputField.scss

@@ -13,7 +13,7 @@
     border-radius: 4px;
     display: flex;
     align-items: center;
-    justify-content: space-around;
+    justify-content: space-between;
 
     .ff-machine-icon-text-wrapper,
     .ff-machine-icon-text-wrapper-reverse {
@@ -23,8 +23,21 @@
       .ff-machine-icon {
         margin-left: 4px;
       }
+
+      .ff-machine-text-reverse,
+      .ff-machine-text {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        min-width: 30px;
+        max-width: 70px;
+      }
+
+      .ff-machine-text-reverse {
+        direction: ltr;
+      }
     }
-    
+
     .ff-machine-icon-text-wrapper-reverse {
       flex-direction: row-reverse;
     }

package/src/components/MachineInputField/MachineInputField.tsx

@@ -18,10 +18,19 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
     ref
   ) => {
     const getIcon: Record<MachineType['type'], string> = {
-      Local: 'browser_stack_icon',
+      Local: 'local',
+      Browserstack: 'browserstack_icon',
+      SauceLabs: 'sause_lab',
+      LambdaTest: 'lambda_icon',
       mac: 'mac_icon',
       android: 'android_icon',
+      linux: 'linux',
       'Google Chrome': 'chrome_icon',
+      'Mozilla Firefox': 'fire_fox',
+      'Microsoft Edge': 'edge',
+      'Internet Explorer': 'internet_explorer',
+      Safari: 'safari_icon',
+      Opera: 'opera',
     };
 
     return (
@@ -53,9 +62,14 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
                 'ff-machine-icon-text-wrapper-reverse': contentReverse,
               })}
             >
-              <Icon name={getIcon[type]} className="ff-machine-icon" />
+              <Icon
+                name={getIcon[type] || 'local'}
+                className="ff-machine-icon"
+              />
               <Typography
-                className="ff-machine-text"
+                className={classNames('ff-machine-text', {
+                  'ff-machine-text-reverse': contentReverse,
+                })}
                 color="var(--ff-machine-input-field-text-color)"
               >
                 {label}

package/src/components/MachineInputField/types.ts

@@ -1,5 +1,5 @@
 export interface MachineType {
-  type: 'Local' | 'mac' | 'android' | 'Google Chrome';
+  type: string;
   label: string;
 }
 

package/src/components/MultiSelect/Dropdown.tsx

@@ -91,15 +91,19 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
                 role="option"
                 className={`dropdown-option-container`}
                 key={getLabel(info, labelAccessor)}
-                onClick={() =>
-                  !info?.isDisabled && handleOptionChange(info, !info.isChecked)
+                onClick={(e:React.MouseEvent<HTMLDivElement>) =>{
+                  const target = e.target as HTMLInputElement;
+                  if(target.type==='checkbox'){
+                    return
+                  }
+                  !info?.isDisabled && handleOptionChange(info, !info.isChecked);
+                }
                 }
               >
                 <Checkbox
                   checked={info.isChecked}
                   disabled={info?.isDisabled}
                 />
-
                 <Tooltip
                   zIndex={zIndex + 1}
                   title={

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -87,7 +87,7 @@ export const Default3: Story = {
 };
 export const EmailGroup: Story = {
   render: () => {
-    const [options] = useState([
+    const [options,setOptions] = useState([
       {
         label: 'Sample1@gmail.com',
         value: 'sample1@gmail.com',
@@ -109,6 +109,10 @@ export const EmailGroup: Story = {
     ) => {
       setSelectedOptions(options);
     };
+    const onEnter=(newOption:string)=>{
+setOptions(prev=>[...prev,{label:newOption,value:newOption}])
+setSelectedOptions(prev=>[...prev,{label:newOption,value:newOption}])
+    }
     return (
       <MultiSelect
         label={'Enter Email'}
@@ -120,6 +124,7 @@ export const EmailGroup: Story = {
         acceptNewOption={true}
         displayCount={true}
         labelAccessor="label"
+        onEnter={onEnter}
       />
     );
   },

package/src/components/MultiSelect/MultiSelect.tsx

@@ -76,8 +76,9 @@ const MultiSelect = ({
   highlightedMachine = '',
   onSelectButtonClick = () => {},
   labelAccessor = '',
-  valueAccessor = '',
+  valueAccessor = labelAccessor,
   withSelectButton = variant === 'machines' ? true : false,
+  onEnter=()=>{}
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [allOptions, setAllOptions] = useState(options);
@@ -168,25 +169,8 @@ const MultiSelect = ({
           return;
         }
       }
-
-      const newOption = {
-        [labelAccessor]: searchedKeyword,
-        [valueAccessor]: searchedKeyword.toLowerCase(),
-        isChecked: true,
-      };
-      const filteredOptions = [...allOptions].filter(
-        (option) => option.isChecked === true
-      );
-
-      setAllOptions([...allOptions, newOption]);
+     onEnter?.(searchedKeyword)
       setSearchedKeyword('');
-      onChange?.([
-        ...filteredOptions,
-        {
-          [labelAccessor]: searchedKeyword,
-          [valueAccessor]: searchedKeyword.toLocaleLowerCase(),
-        },
-      ]);
       setIsOpen(false);
     }
   };
@@ -447,7 +431,7 @@ const MultiSelect = ({
               className="error-text"
             />
           )}
-          {displayIcon && (
+          {displayIcon && variant==='labels' && (
             <Typography
               onClick={onManageLabelsClick}
               fontSize={8}