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.
- package/lib/components/AppHeader/AppHeader.d.ts +1 -0
- package/lib/components/AppHeader/types.d.ts +18 -6
- package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
- package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +0 -1
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
- package/lib/components/MachineInputField/types.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
- package/lib/components/PopUpModal/PopUpModal.d.ts +5 -0
- package/lib/components/PopUpModal/types.d.ts +14 -0
- package/lib/components/RadioGroup/radioGroupTypes.d.ts +20 -0
- package/lib/components/Select/Select.stories.d.ts +0 -1
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.d.ts +2 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +3 -2
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +3 -2
- package/lib/components/SequentialConnectingBranch/types.d.ts +11 -3
- package/lib/components/TableTree/data.d.ts +36 -2
- package/lib/components/TableTree/types.d.ts +2 -3
- package/lib/index.d.ts +55 -16
- package/lib/index.esm.js +918 -553
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +918 -552
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +5 -14
- package/src/assets/Themes/DarkTheme.scss +5 -2
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/arrow_up.svg +1 -1
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/assets/styles/_fonts.scss +4 -2
- package/src/components/AppHeader/AppHeader.stories.tsx +242 -39
- package/src/components/AppHeader/AppHeader.tsx +158 -139
- package/src/components/AppHeader/types.ts +19 -6
- package/src/components/Charts/BarChart/BarChart.scss +34 -34
- package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -2
- package/src/components/Charts/BarChart/BarChart.tsx +79 -55
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +25 -18
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +31 -11
- package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
- package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +3 -0
- package/src/components/Charts/LineChart/LineChart.scss +13 -4
- package/src/components/Charts/LineChart/LineChart.stories.tsx +100 -102
- package/src/components/Charts/LineChart/LineChart.tsx +143 -131
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +23 -2
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +109 -24
- package/src/components/Charts/PieChart/PieChart.scss +5 -3
- package/src/components/Charts/PieChart/PieChart.tsx +1 -2
- package/src/components/DatePicker/DatePicker.scss +15 -1
- package/src/components/Excel/ExcelFile/ExcelFile.scss +1 -1
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +34 -20
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +0 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +44 -15
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +47 -4
- package/src/components/Icon/Icons.scss +1 -1
- package/src/components/MachineInputField/MachineInputField.scss +15 -2
- package/src/components/MachineInputField/MachineInputField.tsx +17 -3
- package/src/components/MachineInputField/types.ts +1 -1
- package/src/components/PopUpModal/PopUpModal.scss +36 -0
- package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -0
- package/src/components/PopUpModal/PopUpModal.tsx +85 -0
- package/src/components/PopUpModal/types.ts +14 -0
- package/src/components/RadioGroup/RadioGroup.scss +7 -0
- package/src/components/RadioGroup/RadioGroup.stories.tsx +26 -0
- package/src/components/RadioGroup/RadioGroup.tsx +16 -0
- package/src/components/RadioGroup/radioGroupTypes.tsx +24 -0
- package/src/components/Select/Select.tsx +3 -4
- package/src/components/Select/components/Dropdown.tsx +34 -34
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +9 -0
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +74 -43
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +9 -3
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -14
- package/src/components/SequentialConnectingBranch/components/Branches/types.ts +9 -2
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +3 -1
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +9 -2
- package/src/components/SequentialConnectingBranch/types.ts +18 -3
- package/src/components/TableTree/TableTree.stories.tsx +145 -98
- package/src/components/TableTree/TableTree.tsx +49 -14
- package/src/components/TableTree/data.ts +32 -391
- package/src/components/TableTree/types.ts +2 -3
- package/src/index.ts +3 -0
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
- package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- /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
|
-
{
|
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: '
|
86
|
+
path: '/repository/elements',
|
74
87
|
subMenuItems: [
|
75
88
|
{
|
76
89
|
label: 'Elements',
|
77
|
-
path: '
|
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: '
|
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: '
|
86
|
-
|
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
|
-
|
93
|
-
|
128
|
+
label: 'Configuration',
|
129
|
+
value: 'Configuration',
|
130
|
+
icon: 'configuration',
|
94
131
|
},
|
95
132
|
{
|
96
|
-
|
97
|
-
|
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: '
|
143
|
+
path: '/test-data',
|
106
144
|
},
|
107
145
|
{
|
108
146
|
label: 'Test Dev',
|
109
|
-
path: '
|
147
|
+
path: '/test-dev/scripts',
|
110
148
|
subMenuItems: [
|
111
149
|
{
|
112
150
|
label: 'Scripts',
|
113
|
-
path: '
|
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:'
|
117
|
-
|
118
|
-
iconName: '
|
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:
|
122
|
-
|
123
|
-
|
232
|
+
label: 'Configuration',
|
233
|
+
value: 'Configuration',
|
234
|
+
icon: 'configuration',
|
124
235
|
},
|
125
236
|
{
|
126
|
-
|
127
|
-
|
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
|
-
|
131
|
-
|
249
|
+
label: 'Configuration',
|
250
|
+
value: 'Configuration',
|
251
|
+
icon: 'configuration',
|
132
252
|
},
|
133
253
|
{
|
134
|
-
|
135
|
-
|
254
|
+
label: 'Approval Request',
|
255
|
+
value: 'Approval Request',
|
256
|
+
icon: 'approval_pending',
|
136
257
|
},
|
137
258
|
],
|
138
259
|
},
|
139
260
|
{
|
140
|
-
label: '
|
141
|
-
path: '
|
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
|
-
|
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 {
|
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
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
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
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
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
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
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
|
-
|
92
|
-
|
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
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
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
|
-
|
130
|
-
|
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
|
-
<
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
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
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
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
|
};
|