pixel-react 1.6.0 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (112) hide show
  1. package/lib/components/AppHeader/AppHeader.d.ts +1 -0
  2. package/lib/components/AppHeader/types.d.ts +18 -6
  3. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  4. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  5. package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +0 -1
  6. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
  7. package/lib/components/MachineInputField/types.d.ts +1 -1
  8. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
  9. package/lib/components/PopUpModal/PopUpModal.d.ts +5 -0
  10. package/lib/components/PopUpModal/types.d.ts +14 -0
  11. package/lib/components/RadioGroup/radioGroupTypes.d.ts +20 -0
  12. package/lib/components/Select/Select.stories.d.ts +0 -1
  13. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.d.ts +2 -1
  14. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  15. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +3 -2
  16. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  17. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +3 -2
  18. package/lib/components/SequentialConnectingBranch/types.d.ts +11 -3
  19. package/lib/components/TableTree/data.d.ts +36 -2
  20. package/lib/components/TableTree/types.d.ts +2 -3
  21. package/lib/index.d.ts +55 -16
  22. package/lib/index.esm.js +918 -553
  23. package/lib/index.esm.js.map +1 -1
  24. package/lib/index.js +918 -552
  25. package/lib/index.js.map +1 -1
  26. package/lib/tsconfig.tsbuildinfo +1 -1
  27. package/package.json +1 -1
  28. package/src/assets/Themes/BaseTheme.scss +5 -14
  29. package/src/assets/Themes/DarkTheme.scss +5 -2
  30. package/src/assets/icons/approval_pending.svg +8 -8
  31. package/src/assets/icons/arrow_up.svg +1 -1
  32. package/src/assets/icons/configuration.svg +3 -3
  33. package/src/assets/icons/defects.svg +8 -8
  34. package/src/assets/icons/element.svg +4 -4
  35. package/src/assets/icons/project_element.svg +4 -4
  36. package/src/assets/icons/step_group.svg +10 -10
  37. package/src/assets/icons/variable.svg +3 -3
  38. package/src/assets/icons/web_service_icon.svg +3 -3
  39. package/src/assets/styles/_fonts.scss +4 -2
  40. package/src/components/AppHeader/AppHeader.stories.tsx +242 -39
  41. package/src/components/AppHeader/AppHeader.tsx +158 -139
  42. package/src/components/AppHeader/types.ts +19 -6
  43. package/src/components/Charts/BarChart/BarChart.scss +34 -34
  44. package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -2
  45. package/src/components/Charts/BarChart/BarChart.tsx +79 -55
  46. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +25 -18
  47. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +31 -11
  48. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  49. package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +3 -0
  50. package/src/components/Charts/LineChart/LineChart.scss +13 -4
  51. package/src/components/Charts/LineChart/LineChart.stories.tsx +100 -102
  52. package/src/components/Charts/LineChart/LineChart.tsx +143 -131
  53. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +23 -2
  54. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +109 -24
  55. package/src/components/Charts/PieChart/PieChart.scss +5 -3
  56. package/src/components/Charts/PieChart/PieChart.tsx +1 -2
  57. package/src/components/DatePicker/DatePicker.scss +15 -1
  58. package/src/components/Excel/ExcelFile/ExcelFile.scss +1 -1
  59. package/src/components/Excel/ExcelFile/ExcelFile.tsx +34 -20
  60. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +0 -1
  61. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +44 -15
  62. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +47 -4
  63. package/src/components/Icon/Icons.scss +1 -1
  64. package/src/components/MachineInputField/MachineInputField.scss +15 -2
  65. package/src/components/MachineInputField/MachineInputField.tsx +17 -3
  66. package/src/components/MachineInputField/types.ts +1 -1
  67. package/src/components/PopUpModal/PopUpModal.scss +36 -0
  68. package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -0
  69. package/src/components/PopUpModal/PopUpModal.tsx +85 -0
  70. package/src/components/PopUpModal/types.ts +14 -0
  71. package/src/components/RadioGroup/RadioGroup.scss +7 -0
  72. package/src/components/RadioGroup/RadioGroup.stories.tsx +26 -0
  73. package/src/components/RadioGroup/RadioGroup.tsx +16 -0
  74. package/src/components/RadioGroup/radioGroupTypes.tsx +24 -0
  75. package/src/components/Select/Select.tsx +3 -4
  76. package/src/components/Select/components/Dropdown.tsx +34 -34
  77. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +9 -0
  78. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +74 -43
  79. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +9 -3
  80. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -14
  81. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +9 -2
  82. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +3 -1
  83. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +9 -2
  84. package/src/components/SequentialConnectingBranch/types.ts +18 -3
  85. package/src/components/TableTree/TableTree.stories.tsx +145 -98
  86. package/src/components/TableTree/TableTree.tsx +49 -14
  87. package/src/components/TableTree/data.ts +32 -391
  88. package/src/components/TableTree/types.ts +2 -3
  89. package/src/index.ts +3 -0
  90. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  91. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  92. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  93. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  94. package/lib/components/AddButton/AddButton.d.ts +0 -5
  95. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  96. package/lib/components/AddButton/index.d.ts +0 -1
  97. package/lib/components/AddButton/types.d.ts +0 -4
  98. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  99. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  100. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  101. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  102. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  103. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  104. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  105. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  106. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  107. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  108. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  109. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  110. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  111. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  112. /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -67,34 +67,72 @@ const projectList = [
67
67
  },
68
68
  ];
69
69
  const headerMenuItems = [
70
- { label: 'Dashboard', path: 'Dashboard', subMenuItems: [] },
70
+ {
71
+ label: 'Dashboard',
72
+ path: '/dashboard',
73
+ subMenuItems: [
74
+ {
75
+ label: 'Dashboard',
76
+ path: '',
77
+ },
78
+ {
79
+ label: 'Analytics',
80
+ path: '',
81
+ },
82
+ ],
83
+ },
71
84
  {
72
85
  label: 'Repo',
73
- path: 'Repo',
86
+ path: '/repository/elements',
74
87
  subMenuItems: [
75
88
  {
76
89
  label: 'Elements',
77
- path: 'Elements',
90
+ path: '/repository/elements',
91
+ hiddenMenuItems: [
92
+ { label: 'Defects', value: 'Defects', icon: 'defects' },
93
+ {
94
+ label: 'Configuration',
95
+ value: 'Configuration',
96
+ icon: 'configuration',
97
+ },
98
+ {
99
+ label: 'Approval Request',
100
+ value: 'Approval Request',
101
+ icon: 'approval_pending',
102
+ },
103
+ ],
78
104
  },
79
105
  {
80
106
  label: 'Program Elements',
81
- path: 'Program Elements',
107
+ path: '/repository/program-elements',
108
+ hiddenMenuItems: [
109
+ { label: 'Defects', value: 'Defects', icon: 'defects' },
110
+ {
111
+ label: 'Configuration',
112
+ value: 'Configuration',
113
+ icon: 'configuration',
114
+ },
115
+ {
116
+ label: 'Approval Request',
117
+ value: 'Approval Request',
118
+ icon: 'approval_pending',
119
+ },
120
+ ],
82
121
  },
83
122
  {
84
123
  label: 'Step Groups',
85
- path: 'Step Groups',
86
- quickMenuItems: [
87
- {
88
- quickMenuName: 'Success Icon',
89
- iconName: 'success',
90
- },
124
+ path: '/repository/step-group',
125
+ hiddenMenuItems: [
126
+ { label: 'Defects', value: 'Defects', icon: 'defects' },
91
127
  {
92
- quickMenuName: 'Warning Icon',
93
- iconName: 'warning',
128
+ label: 'Configuration',
129
+ value: 'Configuration',
130
+ icon: 'configuration',
94
131
  },
95
132
  {
96
- quickMenuName: 'Info Icon',
97
- iconName: 'info',
133
+ label: 'Approval Request',
134
+ value: 'Approval Request',
135
+ icon: 'approval_pending',
98
136
  },
99
137
  ],
100
138
  },
@@ -102,52 +140,219 @@ const headerMenuItems = [
102
140
  },
103
141
  {
104
142
  label: 'Test Data',
105
- path: 'Test Data',
143
+ path: '/test-data',
106
144
  },
107
145
  {
108
146
  label: 'Test Dev',
109
- path: 'Test Dev',
147
+ path: '/test-dev/scripts',
110
148
  subMenuItems: [
111
149
  {
112
150
  label: 'Scripts',
113
- path: 'Scripts',
151
+ path: '/test-dev/scripts',
152
+ hiddenMenuItems: [
153
+ { label: 'Defects', value: 'Defects', icon: 'defects' },
154
+ {
155
+ label: 'Configuration',
156
+ value: 'Configuration',
157
+ icon: 'configuration',
158
+ },
159
+ {
160
+ label: 'Approval Request',
161
+ value: 'Approval Request',
162
+ icon: 'approval_pending',
163
+ },
164
+ ],
165
+ },
166
+ {
167
+ label: 'Executions',
168
+ path: '/test-dev/execution-dashboard',
169
+ },
170
+ ],
171
+ },
172
+ {
173
+ label: 'Suites',
174
+ path: '/suites/suites',
175
+ subMenuItems: [
176
+ {
177
+ label: 'Suites',
178
+ path: '/suites/suites',
179
+ hiddenMenuItems: [
180
+ {
181
+ label: 'Approval Request',
182
+ value: 'Approval Request',
183
+ icon: 'approval_pending',
184
+ },
185
+ ],
186
+ },
187
+ {
188
+ label: 'Scheduled Executions',
189
+ path: '',
190
+ },
191
+ ],
192
+ },
193
+ {
194
+ label: 'Web Service',
195
+ path: '/webservice/restapi',
196
+ subMenuItems: [
197
+ {
198
+ label: 'Rest API',
199
+ path: '/webservice/restapi',
114
200
  quickMenuItems: [
115
201
  {
116
- label:'Element',
117
- quickMenuName: 'Element',
118
- iconName: 'element',
202
+ label: 'variables',
203
+ path: '/webservice/restapi/variable',
204
+ iconName: 'variable',
119
205
  },
206
+ ],
207
+ },
208
+ {
209
+ label: 'Snippets',
210
+ path: '/webservice/snippets',
211
+ },
212
+ {
213
+ label: 'Executions',
214
+ path: '/webservice/executions',
215
+ },
216
+ ],
217
+ },
218
+ {
219
+ label: 'Defects',
220
+ path: '/defects',
221
+ },
222
+ {
223
+ label: 'Configuration',
224
+ path: '/configuration',
225
+ subMenuItems: [
226
+ {
227
+ label: 'Environment Config.',
228
+ path: '',
229
+ hiddenMenuItems: [
230
+ { label: 'Web Service', value: 'Web Service', icon: 'defects' },
120
231
  {
121
- label:'Project Element',
122
- quickMenuName: 'Project Element',
123
- iconName: 'project_element',
232
+ label: 'Configuration',
233
+ value: 'Configuration',
234
+ icon: 'configuration',
124
235
  },
125
236
  {
126
- quickMenuName: 'Sun Icon',
127
- iconName: 'sun_icon',
237
+ label: 'Approval Request',
238
+ value: 'Approval Request',
239
+ icon: 'approval_pending',
128
240
  },
241
+ ],
242
+ },
243
+ {
244
+ label: 'Execution Config.',
245
+ path: '',
246
+ hiddenMenuItems: [
247
+ { label: 'Web Service', value: 'Web Service', icon: 'defects' },
129
248
  {
130
- quickMenuName: 'Moon Stars Icon',
131
- iconName: 'moon_stars_icon',
249
+ label: 'Configuration',
250
+ value: 'Configuration',
251
+ icon: 'configuration',
132
252
  },
133
253
  {
134
- quickMenuName: 'Impact List Icon',
135
- iconName: 'impactList',
254
+ label: 'Approval Request',
255
+ value: 'Approval Request',
256
+ icon: 'approval_pending',
136
257
  },
137
258
  ],
138
259
  },
139
260
  {
140
- label: 'Executions',
141
- path: 'Executions',
261
+ label: 'User Management',
262
+ path: '',
263
+ hiddenMenuItems: [
264
+ { label: 'Web Service', value: 'Web Service', icon: 'defects' },
265
+ {
266
+ label: 'Configuration',
267
+ value: 'Configuration',
268
+ icon: 'configuration',
269
+ },
270
+ {
271
+ label: 'Approval Request',
272
+ value: 'Approval Request',
273
+ icon: 'approval_pending',
274
+ },
275
+ ],
276
+ },
277
+ {
278
+ label: 'Templates',
279
+ path: '',
280
+ hiddenMenuItems: [
281
+ { label: 'Web Service', value: 'Web Service', icon: 'defects' },
282
+ {
283
+ label: 'Configuration',
284
+ value: 'Configuration',
285
+ icon: 'configuration',
286
+ },
287
+ {
288
+ label: 'Approval Request',
289
+ value: 'Approval Request',
290
+ icon: 'approval_pending',
291
+ },
292
+ ],
293
+ },
294
+ ],
295
+ },
296
+ {
297
+ label: 'Approval Request',
298
+ path: '/approval-request',
299
+ subMenuItems: [
300
+ {
301
+ label: 'Scripts',
302
+ path: '',
303
+ hiddenMenuItems: [
304
+ { label: 'Web Service', value: 'Web Service', icon: 'defects' },
305
+ { label: 'Defects', value: 'Defects', icon: 'defects' },
306
+ {
307
+ label: 'Configuration',
308
+ value: 'Configuration',
309
+ icon: 'configuration',
310
+ },
311
+ ],
312
+ },
313
+ {
314
+ label: 'Elements',
315
+ path: '',
316
+ hiddenMenuItems: [
317
+ { label: 'Web Service', value: 'Web Service', icon: 'defects' },
318
+ { label: 'Defects', value: 'Defects', icon: 'defects' },
319
+ {
320
+ label: 'Configuration',
321
+ value: 'Configuration',
322
+ icon: 'configuration',
323
+ },
324
+ ],
325
+ },
326
+ {
327
+ label: 'Step Groups',
328
+ path: '',
329
+ hiddenMenuItems: [
330
+ { label: 'Web Service', value: 'Web Service', icon: 'defects' },
331
+ { label: 'Defects', value: 'Defects', icon: 'defects' },
332
+ {
333
+ label: 'Configuration',
334
+ value: 'Configuration',
335
+ icon: 'configuration',
336
+ },
337
+ ],
338
+ },
339
+ {
340
+ label: 'Variables',
341
+ path: '',
342
+ hiddenMenuItems: [
343
+ { label: 'Web Service', value: 'Web Service', icon: 'defects' },
344
+ { label: 'Defects', value: 'Defects', icon: 'defects' },
345
+ {
346
+ label: 'Configuration',
347
+ value: 'Configuration',
348
+ icon: 'configuration',
349
+ },
350
+ ],
142
351
  },
143
352
  ],
144
353
  },
145
354
  ];
146
- const headerHiddenMenuItems = [
147
- { label: 'Defects', value: 'Defects', icon: 'defects' },
148
- { label: 'Approval Request', value: 'Approval Request', icon: 'approval_pending' },
149
- { label: 'Configuration', value: 'Configuration', icon: 'configuration' },
150
- ];
355
+
151
356
  const headerRightSideContent = (
152
357
  <div>
153
358
  <Icon name="logo" />
@@ -163,7 +368,6 @@ export const SampleAppHeader: Story = {
163
368
  </div>
164
369
  ),
165
370
  appHeaderMenuItems: headerMenuItems,
166
- appHeaderHiddenMenuItems: headerHiddenMenuItems,
167
371
  selectedMenu: 'Repo',
168
372
  },
169
373
  };
@@ -191,7 +395,7 @@ export const Controlled: Story = {
191
395
  };
192
396
  const handleProjectDropdownLabelClick = () => {
193
397
  setSelectedMenuItem('Projects');
194
- }
398
+ };
195
399
 
196
400
  return (
197
401
  <>
@@ -201,7 +405,6 @@ export const Controlled: Story = {
201
405
  leftContent={headerRightSideContent}
202
406
  rightContent={headerRightSideContent}
203
407
  appHeaderMenuItems={headerMenuItems}
204
- appHeaderHiddenMenuItems={headerHiddenMenuItems}
205
408
  projectsList={projectList}
206
409
  selectedMenu={selectedMenuItem}
207
410
  selectedSubMenu={selectedSubMenuItem}
@@ -1,4 +1,8 @@
1
- import { AppHeaderProps } from './types';
1
+ import {
2
+ appHeaderHiddenMenuItemProps,
3
+ AppHeaderProps,
4
+ appHeaderSubMenuItemProps,
5
+ } from './types';
2
6
  import Icon from '../Icon';
3
7
  import './AppHeader.scss';
4
8
  import classNames from 'classnames';
@@ -7,6 +11,7 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
7
11
  import AllProjectsDropdown from '../AllProjectsDropdown';
8
12
  import MenuOption from '../MenuOption';
9
13
  import Tooltip from '../Tooltip';
14
+ import React, { useState } from 'react';
10
15
 
11
16
  const AppHeader: React.FC<AppHeaderProps> = ({
12
17
  logoIconName = 'fireflink_icon',
@@ -14,7 +19,6 @@ const AppHeader: React.FC<AppHeaderProps> = ({
14
19
  rightContent,
15
20
  projectsList,
16
21
  appHeaderMenuItems,
17
- appHeaderHiddenMenuItems,
18
22
  selectedMenu,
19
23
  selectedSubMenu,
20
24
  selectedQuickMenu,
@@ -26,153 +30,168 @@ const AppHeader: React.FC<AppHeaderProps> = ({
26
30
  onProjectDropdownLabelClick = () => {},
27
31
  onMoreMenuOptionClick = () => {},
28
32
  }) => {
33
+ const [appHeaderHiddenMenuItems, setAppHeaderHiddenMenuItems] = useState<
34
+ appHeaderHiddenMenuItemProps[]
35
+ >([]);
36
+ const onSubMenuClickHandler = (subMenu: appHeaderSubMenuItemProps) => {
37
+ setAppHeaderHiddenMenuItems(
38
+ subMenu.hiddenMenuItems ? subMenu.hiddenMenuItems : []
39
+ );
40
+ onSubMenuClick(subMenu);
41
+ };
29
42
  return (
30
43
  <div className="ff-app-header-main">
31
- <div className="ff-app-header">
32
- <div className="ff-app-header-left-container">
33
- <div className="ff-app-header-logo-icon">
34
- <Icon color="" name={logoIconName} height={24} width={21} />
35
- </div>
36
- {leftContent && (
37
- <div className="ff-app-header-left-content">{leftContent}</div>
38
- )}
39
- </div>
40
- {!checkEmpty(appHeaderMenuItems) && (
41
- <div className="ff-app-header-nav-bar">
42
- {projectsList && !checkEmpty(projectsList) && (
43
- <div>
44
- {
45
- <AllProjectsDropdown
46
- onClick={onProjectMenuClick}
47
- options={projectsList}
48
- selectedOption={selectedProject}
49
- onMenuClick={onProjectDropdownLabelClick}
50
- selected={selectedMenu === 'Projects'}
51
- />
52
- }
53
- </div>
44
+ <div className="ff-app-header">
45
+ <div className="ff-app-header-left-container">
46
+ <div className="ff-app-header-logo-icon">
47
+ <Icon color="" name={logoIconName} height={24} width={21} />
48
+ </div>
49
+ {leftContent && (
50
+ <div className="ff-app-header-left-content">{leftContent}</div>
54
51
  )}
55
- <div className="ff-app-header-nav-bar-items fontSm">
56
- {appHeaderMenuItems.map((menuItem) => {
57
- return (
58
- <div
59
- className={classNames('ff-app-header-nav-bar-item', {
60
- ['ff-app-header-nav-bar-item--selected']:
61
- menuItem.label === selectedMenu,
62
- })}
63
- key={menuItem.label}
64
- >
65
- <Typography
66
- as="div"
67
- className="ff-app-header-nav-bar-item-label"
68
- lineHeight="18px"
69
- onClick={() => onMenuClick(menuItem)}
52
+ </div>
53
+ {!checkEmpty(appHeaderMenuItems) && (
54
+ <div className="ff-app-header-nav-bar">
55
+ {projectsList && !checkEmpty(projectsList) && (
56
+ <div>
57
+ {
58
+ <AllProjectsDropdown
59
+ onClick={onProjectMenuClick}
60
+ options={projectsList}
61
+ selectedOption={selectedProject}
62
+ onMenuClick={onProjectDropdownLabelClick}
63
+ selected={selectedMenu === 'Projects'}
64
+ />
65
+ }
66
+ </div>
67
+ )}
68
+ <div className="ff-app-header-nav-bar-items fontSm">
69
+ {appHeaderMenuItems.map((menuItem) => {
70
+ return (
71
+ <div
72
+ className={classNames('ff-app-header-nav-bar-item', {
73
+ ['ff-app-header-nav-bar-item--selected']:
74
+ menuItem.label === selectedMenu,
75
+ })}
76
+ key={menuItem.label}
70
77
  >
71
- {menuItem.label}
72
- </Typography>
73
- {menuItem.label === selectedMenu &&
74
- menuItem?.subMenuItems && (
75
- <>
76
- {menuItem.subMenuItems.map((subMenuItem) => {
77
- return (
78
- <div
79
- key={subMenuItem.label}
80
- className="ff-app-header-submenu-container"
81
- >
82
- <Typography
83
- as="div"
84
- className={classNames(
85
- 'ff-app-header-nav-bar-submenu-item',
86
- {
87
- ['ff-app-header-nav-bar-submenu-item--selected']:
88
- subMenuItem.label === selectedSubMenu,
78
+ <Typography
79
+ as="div"
80
+ className="ff-app-header-nav-bar-item-label"
81
+ lineHeight="18px"
82
+ onClick={() => onMenuClick(menuItem)}
83
+ >
84
+ {menuItem.label}
85
+ </Typography>
86
+ {menuItem.label === selectedMenu &&
87
+ menuItem?.subMenuItems && (
88
+ <>
89
+ {menuItem.subMenuItems.map((subMenuItem) => {
90
+ return (
91
+ <div
92
+ key={subMenuItem.label}
93
+ className="ff-app-header-submenu-container"
94
+ >
95
+ <Typography
96
+ as="div"
97
+ className={classNames(
98
+ 'ff-app-header-nav-bar-submenu-item',
99
+ {
100
+ ['ff-app-header-nav-bar-submenu-item--selected']:
101
+ subMenuItem.label === selectedSubMenu,
102
+ }
103
+ )}
104
+ lineHeight="18px"
105
+ onClick={() =>
106
+ onSubMenuClickHandler(subMenuItem)
89
107
  }
90
- )}
91
- lineHeight="18px"
92
- onClick={() => onSubMenuClick(subMenuItem)}
108
+ >
109
+ {subMenuItem.label}
110
+ </Typography>
111
+ </div>
112
+ );
113
+ })}
114
+ {menuItem.subMenuItems.map((subMenuItem) => {
115
+ return (
116
+ <div
117
+ key={subMenuItem.label}
118
+ className="ff-app-header-submenu-container"
93
119
  >
94
- {subMenuItem.label}
95
- </Typography>
96
- </div>
97
- );
98
- })}
99
- {menuItem.subMenuItems.map((subMenuItem) => {
100
- return (
101
- <div
102
- key={subMenuItem.label}
103
- className="ff-app-header-submenu-container"
104
- >
105
- {subMenuItem.label === selectedSubMenu &&
106
- subMenuItem?.quickMenuItems && (
107
- <div className="ff-app-header-quickmenu-container">
108
- <div>
109
- <Icon name="vertical_separator" />
110
- </div>
111
- {subMenuItem.quickMenuItems.map(
112
- (quickMenuItem) => {
113
- return (
114
- <>
115
- <div
116
- key={quickMenuItem.iconName}
117
- onClick={() =>
118
- onQuickMenuClick(quickMenuItem)
119
- }
120
- className={classNames(
121
- 'ff-app-header-nav-bar-quickmenu-item',
122
- {
123
- ['ff-app-header-nav-bar-quickmenu-item--selected']:
124
- quickMenuItem.iconName ===
125
- selectedQuickMenu,
120
+ {subMenuItem.label === selectedSubMenu &&
121
+ subMenuItem?.quickMenuItems && (
122
+ <div className="ff-app-header-quickmenu-container">
123
+ <div>
124
+ <Icon name="vertical_separator" />
125
+ </div>
126
+ {subMenuItem.quickMenuItems.map(
127
+ (quickMenuItem) => {
128
+ return (
129
+ <>
130
+ <div
131
+ key={quickMenuItem.iconName}
132
+ onClick={() =>
133
+ onQuickMenuClick(
134
+ quickMenuItem
135
+ )
126
136
  }
127
- )}
128
- >
129
- <Tooltip
130
- title={quickMenuItem?.label}
137
+ className={classNames(
138
+ 'ff-app-header-nav-bar-quickmenu-item',
139
+ {
140
+ ['ff-app-header-nav-bar-quickmenu-item--selected']:
141
+ quickMenuItem.iconName ===
142
+ selectedQuickMenu,
143
+ }
144
+ )}
131
145
  >
132
- <Icon
133
- name={quickMenuItem.iconName}
134
- height={16}
135
- width={16}
136
- hoverEffect={true}
137
- />
138
- </Tooltip>
139
- </div>
140
- </>
141
- );
142
- }
143
- )}
144
- </div>
145
- )}
146
- </div>
147
- );
148
- })}
149
- </>
150
- )}
146
+ <Tooltip
147
+ title={quickMenuItem?.label}
148
+ >
149
+ <Icon
150
+ name={
151
+ quickMenuItem.iconName
152
+ }
153
+ height={16}
154
+ width={16}
155
+ hoverEffect={true}
156
+ />
157
+ </Tooltip>
158
+ </div>
159
+ </>
160
+ );
161
+ }
162
+ )}
163
+ </div>
164
+ )}
165
+ </div>
166
+ );
167
+ })}
168
+ </>
169
+ )}
170
+ </div>
171
+ );
172
+ })}
173
+ </div>
174
+ {appHeaderHiddenMenuItems &&
175
+ !checkEmpty(appHeaderHiddenMenuItems) && (
176
+ <div className="more-menu">
177
+ <MenuOption
178
+ iconName="more"
179
+ options={appHeaderHiddenMenuItems}
180
+ onOptionClick={onMoreMenuOptionClick}
181
+ variant="dark"
182
+ dropdownPlacement="down"
183
+ zIndex={1001}
184
+ tooltipTitle="More"
185
+ optionCardVariant="primary"
186
+ />
151
187
  </div>
152
- );
153
- })}
188
+ )}
154
189
  </div>
155
- {appHeaderHiddenMenuItems &&
156
- !checkEmpty(appHeaderHiddenMenuItems) && (
157
- <div className="more-menu">
158
- <MenuOption
159
- iconName="more"
160
- options={appHeaderHiddenMenuItems}
161
- onOptionClick={onMoreMenuOptionClick}
162
- variant="dark"
163
- dropdownPlacement="down"
164
- zIndex={1001}
165
- tooltipTitle="More"
166
- optionCardVariant="primary"
167
- />
168
- </div>
169
- )}
170
- </div>
171
- )}
172
- {rightContent && (
173
- <div className="ff-app-header-right-content">{rightContent}</div>
174
- )}
175
- </div>
190
+ )}
191
+ {rightContent && (
192
+ <div className="ff-app-header-right-content">{rightContent}</div>
193
+ )}
194
+ </div>
176
195
  </div>
177
196
  );
178
197
  };