pixel-react 1.6.8 → 1.7.0
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/Charts/LineChart/types.d.ts +1 -0
- package/lib/components/Chip/types.d.ts +1 -1
- package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/index.d.ts +1 -0
- package/lib/components/ConditionalDropdown/types.d.ts +145 -0
- package/lib/components/CreateVariable/types.d.ts +2 -2
- package/lib/components/DownloadClient/type.d.ts +19 -27
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
- package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
- package/lib/components/LabelEditTextField/types.d.ts +1 -0
- package/lib/components/MachineInputField/types.d.ts +1 -0
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +2 -1
- package/lib/components/MiniModal/types.d.ts +1 -0
- package/lib/components/Modal/types.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
- package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
- package/lib/components/NLPInput/NlpInput.d.ts +2 -2
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
- package/lib/components/NLPInput/sampleData.d.ts +104 -0
- package/lib/components/NLPInput/types.d.ts +80 -0
- package/lib/components/PopUpModal/types.d.ts +2 -1
- package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
- package/lib/components/ProgressBar/index.d.ts +1 -0
- package/lib/components/ProgressBar/types.d.ts +12 -0
- package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
- package/lib/components/TableTree/TableTree.d.ts +2 -2
- package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
- package/lib/components/TableTree/types.d.ts +1 -1
- package/lib/hooks/useIntersectionObserver.d.ts +9 -0
- package/lib/index.d.ts +183 -65
- package/lib/index.esm.js +1281 -674
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1282 -674
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
- package/lib/utils/getSequentialPayload/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
- package/src/assets/Themes/BaseTheme.scss +20 -2
- package/src/assets/Themes/DarkTheme.scss +19 -2
- package/src/assets/icons/add_file.svg +4 -4
- package/src/assets/icons/ai_search.svg +9 -0
- package/src/assets/icons/authorization.svg +4 -4
- package/src/assets/icons/depends_on_script.svg +7 -7
- package/src/assets/icons/email_group.svg +3 -3
- package/src/assets/icons/help_icon.svg +10 -0
- package/src/assets/icons/import_icon.svg +4 -0
- package/src/assets/icons/ios_icon.svg +11 -0
- package/src/assets/icons/labels.svg +8 -8
- package/src/assets/icons/parameters.svg +3 -3
- package/src/assets/icons/plus_round_icon.svg +38 -0
- package/src/assets/icons/pre_post_condition.svg +8 -8
- package/src/assets/icons/program_element.svg +8 -8
- package/src/assets/icons/test_data.svg +5 -5
- package/src/assets/icons/test_data_set.svg +7 -7
- package/src/assets/icons/tick_icon.svg +2 -2
- package/src/assets/icons/variable_set.svg +5 -5
- package/src/assets/styles/_colors.scss +1 -1
- package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
- package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
- package/src/components/Charts/LineChart/LineChart.tsx +10 -1
- package/src/components/Charts/LineChart/types.ts +1 -0
- package/src/components/Checkbox/Checkbox.scss +3 -1
- package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
- package/src/components/Checkbox/Checkbox.tsx +3 -4
- package/src/components/Chip/Chip.scss +15 -5
- package/src/components/Chip/Chip.stories.tsx +10 -1
- package/src/components/Chip/Chip.tsx +5 -1
- package/src/components/Chip/types.ts +1 -1
- package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
- package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
- package/src/components/ConditionalDropdown/index.ts +1 -0
- package/src/components/ConditionalDropdown/types.ts +160 -0
- package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
- package/src/components/CreateVariable/types.ts +2 -2
- package/src/components/DownloadClient/DownloadClient.scss +51 -64
- package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
- package/src/components/DownloadClient/DownloadClient.tsx +60 -51
- package/src/components/DownloadClient/type.ts +32 -40
- package/src/components/EditTextField/EditTextField.scss +1 -1
- package/src/components/EditTextField/EditTextField.tsx +14 -20
- package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
- package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
- package/src/components/Excel/ExcelFile.stories.tsx +4 -4
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
- package/src/components/Excel/dataConversion.ts +43 -20
- package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
- package/src/components/FileDropzone/FileDropzone.tsx +24 -4
- package/src/components/Form/Forms.tsx +0 -2
- package/src/components/Icon/iconList.ts +12 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
- package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
- package/src/components/LabelEditTextField/types.ts +1 -0
- package/src/components/MachineInputField/MachineInputField.scss +1 -5
- package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
- package/src/components/MachineInputField/MachineInputField.tsx +14 -14
- package/src/components/MachineInputField/types.ts +2 -0
- package/src/components/MenuOption/MenuOption.scss +7 -7
- package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
- package/src/components/MenuOption/MenuOption.tsx +9 -13
- package/src/components/MenuOption/types.ts +3 -2
- package/src/components/MiniModal/MiniModal.scss +0 -1
- package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
- package/src/components/MiniModal/MiniModal.tsx +3 -1
- package/src/components/MiniModal/types.ts +1 -0
- package/src/components/Modal/types.ts +1 -1
- package/src/components/MultiSelect/Dropdown.scss +3 -4
- package/src/components/MultiSelect/Dropdown.tsx +34 -7
- package/src/components/MultiSelect/MultiSelect.scss +1 -0
- package/src/components/MultiSelect/MultiSelect.tsx +3 -0
- package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
- package/src/components/MultiSelect/dropdownTypes.ts +2 -0
- package/src/components/NLPInput/NLPInput.scss +77 -21
- package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
- package/src/components/NLPInput/NlpInput.tsx +95 -59
- package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
- package/src/components/NLPInput/sampleData.ts +162 -0
- package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
- package/src/components/PopUpModal/PopUpModal.stories.tsx +15 -10
- package/src/components/PopUpModal/PopUpModal.tsx +5 -4
- package/src/components/PopUpModal/types.ts +2 -1
- package/src/components/ProgressBar/ProgressBar.scss +46 -0
- package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
- package/src/components/ProgressBar/ProgressBar.tsx +61 -0
- package/src/components/ProgressBar/index.ts +1 -0
- package/src/components/ProgressBar/types.ts +12 -0
- package/src/components/Search/Search.tsx +9 -1
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
- package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/types.ts +7 -5
- package/src/components/Table/Table.scss +1 -0
- package/src/components/TableTree/Components/TableBody.tsx +3 -1
- package/src/components/TableTree/TableTree.stories.tsx +4 -7
- package/src/components/TableTree/TableTree.tsx +27 -181
- package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
- package/src/components/TableTree/data.ts +45 -0
- package/src/components/TableTree/types.ts +4 -4
- package/src/hooks/useIntersectionObserver.tsx +56 -0
- package/src/index.ts +4 -3
- package/src/utils/functionCheck/functionCheck.ts +8 -0
- package/src/utils/getSequentialPayload/types.ts +1 -0
- package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
- package/src/components/AddVariables/AddVariables.tsx +0 -113
- package/src/components/AddVariables/index.ts +0 -1
- package/src/components/AddVariables/types.ts +0 -36
@@ -14,12 +14,13 @@ const PopUpModal: FC<PopUpModalProps> = ({
|
|
14
14
|
subTitleMessage = 'Unsaved Changes.',
|
15
15
|
iconName,
|
16
16
|
modalMessage = 'Your web service data will be lost. Are you sure you want to exit?',
|
17
|
-
footerMessage = 'How do you want to proceed?',
|
18
17
|
firstButtonLabel = 'Cancel',
|
19
18
|
secondButtonLabel = 'Continue',
|
20
19
|
buttonVariant = 'warning',
|
21
20
|
border = '1px solid var(--warning-modal-border-color)',
|
22
|
-
|
21
|
+
popupWidth = '420',
|
22
|
+
colorForTitleMessage = 'var(--status-button-bg-warning)',
|
23
|
+
footerContent,
|
23
24
|
}) => {
|
24
25
|
return (
|
25
26
|
<Modal
|
@@ -55,7 +56,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
|
|
55
56
|
</Typography>
|
56
57
|
<div className="warning_modal_message_wrapper">
|
57
58
|
<Typography fontSize={16}>{modalMessage}</Typography>
|
58
|
-
<Typography
|
59
|
+
<Typography as='div'>{footerContent}</Typography>
|
59
60
|
</div>
|
60
61
|
</div>
|
61
62
|
</div>
|
@@ -75,7 +76,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
|
|
75
76
|
}
|
76
77
|
ariaHideApp
|
77
78
|
isFooterDisplayed={false}
|
78
|
-
customWidth=
|
79
|
+
customWidth={`${popupWidth}px`}
|
79
80
|
customHeight="226px"
|
80
81
|
boxShadow="0px 1px 4px 0px var(--toaster-boxshadow)"
|
81
82
|
border={border}
|
@@ -6,10 +6,11 @@ export interface PopUpModalProps {
|
|
6
6
|
subTitleMessage?: string;
|
7
7
|
iconName: string;
|
8
8
|
modalMessage: string;
|
9
|
-
footerMessage: string;
|
10
9
|
firstButtonLabel?: string;
|
11
10
|
secondButtonLabel: string;
|
12
11
|
buttonVariant: any;
|
13
12
|
border: string;
|
13
|
+
popupWidth?:string,
|
14
14
|
colorForTitleMessage?: string;
|
15
|
+
footerContent?:React.ReactNode;
|
15
16
|
}
|
@@ -0,0 +1,46 @@
|
|
1
|
+
.ff-progress-bar-container {
|
2
|
+
width: 100%;
|
3
|
+
min-width: 200px;
|
4
|
+
display: flex;
|
5
|
+
align-items: center;
|
6
|
+
gap: 5px;
|
7
|
+
|
8
|
+
&.ff-has-label {
|
9
|
+
justify-content: space-between;
|
10
|
+
}
|
11
|
+
|
12
|
+
&:not(.ff-has-label) {
|
13
|
+
.ff-progress-bar-track {
|
14
|
+
flex: 1;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
}
|
18
|
+
|
19
|
+
.ff-progress-bar-track {
|
20
|
+
flex: 1;
|
21
|
+
background-color: var(--ff-progress-bar-bg-color);
|
22
|
+
border-radius: 5px;
|
23
|
+
overflow: hidden;
|
24
|
+
position: relative;
|
25
|
+
}
|
26
|
+
|
27
|
+
.ff-progress-bar {
|
28
|
+
border-radius: 5px;
|
29
|
+
transition: width 0.3s ease;
|
30
|
+
}
|
31
|
+
|
32
|
+
.ff-progress-bar-percentage {
|
33
|
+
position: absolute;
|
34
|
+
top: 50%;
|
35
|
+
left: 50%;
|
36
|
+
transform: translate(-50%, -50%);
|
37
|
+
}
|
38
|
+
|
39
|
+
.ff-progress-bar-label {
|
40
|
+
max-width: 50px;
|
41
|
+
font-size: 14px;
|
42
|
+
color: var(--ff-card-status-text-color);
|
43
|
+
white-space: nowrap;
|
44
|
+
overflow: hidden;
|
45
|
+
text-overflow: ellipsis;
|
46
|
+
}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import ProgressBar from './ProgressBar';
|
3
|
+
|
4
|
+
const meta: Meta<typeof ProgressBar> = {
|
5
|
+
title: 'Components/ProgressBar',
|
6
|
+
component: ProgressBar,
|
7
|
+
parameters: {
|
8
|
+
layout: 'centered',
|
9
|
+
},
|
10
|
+
tags: ['autodocs'],
|
11
|
+
};
|
12
|
+
|
13
|
+
export default meta;
|
14
|
+
type Story = StoryObj<typeof ProgressBar>;
|
15
|
+
|
16
|
+
export const DashBoardProgressBar: Story = {
|
17
|
+
args: {
|
18
|
+
progressPercentage: 75,
|
19
|
+
color: 'var(--brand-color)',
|
20
|
+
label: '200 MB',
|
21
|
+
},
|
22
|
+
};
|
@@ -0,0 +1,61 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import type { ProgressBarProps } from './types';
|
3
|
+
import './ProgressBar.scss';
|
4
|
+
import Typography from '../Typography';
|
5
|
+
|
6
|
+
const ProgressBar: React.FC<ProgressBarProps> = ({
|
7
|
+
progressPercentage,
|
8
|
+
color = 'var(--brand-color)',
|
9
|
+
trackColor = '#f0f0f0',
|
10
|
+
height = 10,
|
11
|
+
label,
|
12
|
+
labelFontSize = 12,
|
13
|
+
labelTextColor = 'var(--ff-card-status-text-color)',
|
14
|
+
showPercentage = false,
|
15
|
+
percentageFontSize = 10,
|
16
|
+
percentageTextColor = 'var(--tooltip-text-color)',
|
17
|
+
}) => {
|
18
|
+
// Ensure progress is between 0 and 100
|
19
|
+
const validProgress = Math.max(0, Math.min(progressPercentage, 100));
|
20
|
+
|
21
|
+
// Bar style for the filled part
|
22
|
+
const barStyle = {
|
23
|
+
width: `${validProgress}%`,
|
24
|
+
backgroundColor: color,
|
25
|
+
height: `${height}px`,
|
26
|
+
};
|
27
|
+
|
28
|
+
// Track style for the empty part of the progress bar
|
29
|
+
const trackStyle = {
|
30
|
+
backgroundColor: trackColor,
|
31
|
+
height: `${height}px`,
|
32
|
+
};
|
33
|
+
|
34
|
+
return (
|
35
|
+
<div className={`ff-progress-bar-container ${label ? 'ff-has-label' : ''}`}>
|
36
|
+
<div className="ff-progress-bar-track" style={trackStyle}>
|
37
|
+
<div className="ff-progress-bar" style={barStyle}>
|
38
|
+
{showPercentage && (
|
39
|
+
<Typography
|
40
|
+
className="ff-progress-bar-percentage"
|
41
|
+
fontSize={percentageFontSize}
|
42
|
+
color={percentageTextColor}
|
43
|
+
>{`${validProgress}%`}</Typography>
|
44
|
+
)}
|
45
|
+
</div>
|
46
|
+
</div>
|
47
|
+
{label && (
|
48
|
+
<Typography
|
49
|
+
as="div"
|
50
|
+
className="ff-progress-bar-label"
|
51
|
+
fontSize={labelFontSize}
|
52
|
+
color={labelTextColor}
|
53
|
+
>
|
54
|
+
{label}
|
55
|
+
</Typography>
|
56
|
+
)}
|
57
|
+
</div>
|
58
|
+
);
|
59
|
+
};
|
60
|
+
|
61
|
+
export default ProgressBar;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {default} from './ProgressBar';
|
@@ -0,0 +1,12 @@
|
|
1
|
+
export interface ProgressBarProps {
|
2
|
+
progressPercentage: number; // The current progress value (0-100)
|
3
|
+
color?: string; // Custom color of the progress bar
|
4
|
+
trackColor?: string; // Custom color of the track (empty part)
|
5
|
+
height?: number;
|
6
|
+
label?: string; // Optional label to display inside or outside the progress bar
|
7
|
+
showPercentage?: boolean; // Whether to show the percentage inside the bar
|
8
|
+
percentageFontSize?: number;
|
9
|
+
percentageTextColor?: string;
|
10
|
+
labelFontSize?: number; // Font size of the label
|
11
|
+
labelTextColor?: string;
|
12
|
+
}
|
@@ -55,6 +55,12 @@ const Search = ({
|
|
55
55
|
onExpand?.(!isExpand);
|
56
56
|
}
|
57
57
|
};
|
58
|
+
const handleChange = (data: string) => {
|
59
|
+
setSearchValue(data);
|
60
|
+
if (data === '') {
|
61
|
+
onSearch('');
|
62
|
+
}
|
63
|
+
};
|
58
64
|
|
59
65
|
return (
|
60
66
|
<div
|
@@ -90,7 +96,9 @@ const Search = ({
|
|
90
96
|
disabled={disabled}
|
91
97
|
ref={inputRef}
|
92
98
|
autoComplete="off"
|
93
|
-
onChange={(e) =>
|
99
|
+
onChange={(e) => {
|
100
|
+
handleChange(e.target.value);
|
101
|
+
}}
|
94
102
|
onKeyDown={handleKeyDown}
|
95
103
|
/>
|
96
104
|
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
2
2
|
import SequentialConnectingBranch from './SequentialConnectingBranch';
|
3
3
|
import { useState } from 'react';
|
4
|
+
import React from 'react';
|
4
5
|
|
5
6
|
const meta: Meta<typeof SequentialConnectingBranch> = {
|
6
7
|
title: 'Components/SequentialConnectingBranch',
|
@@ -44,9 +45,19 @@ export const Primary: Story = {
|
|
44
45
|
onHandleSelect={(option) => {
|
45
46
|
setSelectedMachine(option);
|
46
47
|
}}
|
47
|
-
onAddBrowserInstance={() => {
|
48
|
-
|
48
|
+
onAddBrowserInstance={() => {}}
|
49
|
+
onUpdateAddBrowserInstance={() => {}}
|
50
|
+
onAddRunBrowserInstance={() => {}}
|
51
|
+
onDeleteMachineInstance={() => {}}
|
52
|
+
onDeleteBrowserInstance={() => {}}
|
53
|
+
dataSetValues={{
|
54
|
+
peVariableSetId: 'Test dev',
|
55
|
+
globalVariableSetId: 'Test dev',
|
56
|
+
testDataSetId: 'Test dev',
|
49
57
|
}}
|
58
|
+
onUpdateDataSetList={() => {}}
|
59
|
+
machineColumnWidth={500}
|
60
|
+
machineColumnCount={3}
|
50
61
|
/>
|
51
62
|
</>
|
52
63
|
);
|
@@ -26,6 +26,10 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
|
|
26
26
|
globalVariableSetId: '',
|
27
27
|
peVariableSetId: '',
|
28
28
|
},
|
29
|
+
onUpdateAddBrowserInstance = () => {},
|
30
|
+
addInstanceLabel = 'Add Environment',
|
31
|
+
scriptType = 'Automation',
|
32
|
+
projectType = 'Web',
|
29
33
|
}) => {
|
30
34
|
const [selectedMachineInstance, setSelectedMachineInstance] = useState({});
|
31
35
|
const selectButtonRef = useRef<HTMLButtonElement>(null);
|
@@ -37,7 +41,11 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
|
|
37
41
|
>([]);
|
38
42
|
|
39
43
|
const isMachineInstances = checkEmpty(machineInstances);
|
40
|
-
|
44
|
+
let isMachineSelected = checkEmpty(selectedMachine.value?.clientId);
|
45
|
+
|
46
|
+
if (scriptType === 'Manual') {
|
47
|
+
isMachineSelected = checkEmpty(selectedMachine.value);
|
48
|
+
}
|
41
49
|
|
42
50
|
const getMachineStatusColor = (machineStatus: string = '') => {
|
43
51
|
if (machineStatus.toLowerCase().includes('inactive'))
|
@@ -56,6 +64,9 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
|
|
56
64
|
useEffect(() => {
|
57
65
|
setMachineBranchInstances([...machineInstances, {}]);
|
58
66
|
}, [machineInstances]);
|
67
|
+
|
68
|
+
const hideDataSet = scriptType.toLowerCase() !== 'manual';
|
69
|
+
|
59
70
|
return (
|
60
71
|
<div className="ff-sequential-connecting-branch-wrapper">
|
61
72
|
<div className="ff-connecting-select-branch-wrapper">
|
@@ -118,25 +129,27 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
|
|
118
129
|
</div>
|
119
130
|
|
120
131
|
<div className="ff-datalist-wrapper">
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
<Icon name="datalist_icon" className="ff-dataset-icon" />
|
131
|
-
<Typography
|
132
|
-
as="span"
|
133
|
-
fontSize={12}
|
134
|
-
color="var(--ff-connecting-branch-color)"
|
135
|
-
className="ff-datalist-text"
|
132
|
+
{hideDataSet && (
|
133
|
+
<div
|
134
|
+
id="ff-sequential-machine-datalist"
|
135
|
+
onClick={() =>
|
136
|
+
onUpdateDataSetList(
|
137
|
+
'ff-sequential-machine-datalist',
|
138
|
+
dataSetValues
|
139
|
+
)
|
140
|
+
}
|
136
141
|
>
|
137
|
-
|
138
|
-
|
139
|
-
|
142
|
+
<Icon name="datalist_icon" className="ff-dataset-icon" />
|
143
|
+
<Typography
|
144
|
+
as="span"
|
145
|
+
fontSize={12}
|
146
|
+
color="var(--ff-connecting-branch-color)"
|
147
|
+
className="ff-datalist-text"
|
148
|
+
>
|
149
|
+
Dataset List
|
150
|
+
</Typography>
|
151
|
+
</div>
|
152
|
+
)}
|
140
153
|
<Icon
|
141
154
|
name="delete"
|
142
155
|
className="ff-run-delete-icon"
|
@@ -157,6 +170,10 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
|
|
157
170
|
onDeleteBrowser={onDeleteBrowserInstance}
|
158
171
|
onAddRunBrowser={onAddRunBrowserInstance}
|
159
172
|
onUpdateDataSetList={onUpdateDataSetList}
|
173
|
+
onUpdateAddBrowserInstance={onUpdateAddBrowserInstance}
|
174
|
+
addInstanceLabel={addInstanceLabel}
|
175
|
+
scriptType={scriptType}
|
176
|
+
projectType={projectType}
|
160
177
|
/>
|
161
178
|
)}
|
162
179
|
</div>
|
@@ -9,6 +9,7 @@ import Icon from '../../../Icon';
|
|
9
9
|
import Typography from '../../../Typography';
|
10
10
|
import Button from '../../../Button';
|
11
11
|
import './Branches.scss';
|
12
|
+
import { MachineType } from '../../../MachineInputField/types';
|
12
13
|
|
13
14
|
const Branches = ({
|
14
15
|
machineInstances,
|
@@ -21,6 +22,10 @@ const Branches = ({
|
|
21
22
|
onDeleteBrowser,
|
22
23
|
onAddRunBrowser,
|
23
24
|
onUpdateDataSetList,
|
25
|
+
onUpdateAddBrowserInstance,
|
26
|
+
addInstanceLabel = '',
|
27
|
+
scriptType = '',
|
28
|
+
projectType = '',
|
24
29
|
}: BranchesProps) => {
|
25
30
|
const evenRow = rowIndex % 2 === 0;
|
26
31
|
const lastMachineInstance = checkEmpty(
|
@@ -56,6 +61,78 @@ const Branches = ({
|
|
56
61
|
}, 40px ${machineColumnWidth}px) 24px`;
|
57
62
|
};
|
58
63
|
|
64
|
+
const getMachineLabelOptionList = (
|
65
|
+
type: string = '',
|
66
|
+
machineInstance: ExecutionContext | {}
|
67
|
+
) => {
|
68
|
+
const {
|
69
|
+
executionEnv,
|
70
|
+
browserName,
|
71
|
+
browserVersion,
|
72
|
+
machineInfo: { osVersion, iconName },
|
73
|
+
deviceInfo,
|
74
|
+
} = machineInstance as ExecutionContext;
|
75
|
+
// Helper to handle device info safely
|
76
|
+
const getDeviceOption = (platform: string, defaultType: string = '', index = 0) =>
|
77
|
+
deviceInfo?.[index]?.platform?.toLowerCase().includes(platform ?? '')
|
78
|
+
? defaultType
|
79
|
+
: undefined;
|
80
|
+
|
81
|
+
const getEnvironment = (environment: string = '') => {
|
82
|
+
if (environment.toLowerCase().includes('browserstack'))
|
83
|
+
return 'Browserstack';
|
84
|
+
if (environment.toLowerCase().includes('lambdatest')) return 'LambdaTest';
|
85
|
+
if (environment.toLowerCase().includes('saucelabs')) return 'SauceLabs';
|
86
|
+
return '';
|
87
|
+
};
|
88
|
+
|
89
|
+
// Base options
|
90
|
+
const baseOptions = [
|
91
|
+
{
|
92
|
+
label: executionEnv,
|
93
|
+
type: getEnvironment(executionEnv),
|
94
|
+
},
|
95
|
+
];
|
96
|
+
|
97
|
+
// Web-specific options
|
98
|
+
const webOptions = [
|
99
|
+
{
|
100
|
+
label: osVersion,
|
101
|
+
type: iconName,
|
102
|
+
},
|
103
|
+
{
|
104
|
+
label: browserVersion,
|
105
|
+
type: browserName,
|
106
|
+
},
|
107
|
+
];
|
108
|
+
|
109
|
+
// Mobile-specific options
|
110
|
+
const mobileOptions = [
|
111
|
+
{
|
112
|
+
label: deviceInfo?.[0]?.name,
|
113
|
+
type: getDeviceOption('android', 'android_icon', 0),
|
114
|
+
},
|
115
|
+
{
|
116
|
+
label: deviceInfo?.[1]?.name,
|
117
|
+
type: getDeviceOption('ios', 'mac_icon', 1),
|
118
|
+
},
|
119
|
+
];
|
120
|
+
|
121
|
+
// Determine options based on the type
|
122
|
+
switch (type.toLowerCase()) {
|
123
|
+
case 'web':
|
124
|
+
return [...baseOptions, ...webOptions];
|
125
|
+
case 'web & mobile':
|
126
|
+
return [...baseOptions, ...webOptions, ...mobileOptions];
|
127
|
+
case 'mobile':
|
128
|
+
return [...baseOptions, ...mobileOptions];
|
129
|
+
default:
|
130
|
+
return [];
|
131
|
+
}
|
132
|
+
};
|
133
|
+
|
134
|
+
const hideDataSet = scriptType.toLowerCase() !== 'manual';
|
135
|
+
|
59
136
|
return (
|
60
137
|
<div
|
61
138
|
className={classNames({
|
@@ -91,9 +168,6 @@ const Branches = ({
|
|
91
168
|
</div>
|
92
169
|
{machineInstances?.map((machineInstance, index) => {
|
93
170
|
const {
|
94
|
-
executionEnv = 'Local',
|
95
|
-
browserName = 'Local',
|
96
|
-
browserVersion = '1',
|
97
171
|
numberOfRuns = 'numberOfRuns' in machineInstance
|
98
172
|
? machineInstance.numberOfRuns
|
99
173
|
: 0,
|
@@ -117,11 +191,20 @@ const Branches = ({
|
|
117
191
|
width={`${machineColumnWidth}px`}
|
118
192
|
runCount={numberOfRuns}
|
119
193
|
key={ffid()}
|
120
|
-
options={
|
121
|
-
|
122
|
-
|
123
|
-
|
194
|
+
options={
|
195
|
+
getMachineLabelOptionList(
|
196
|
+
projectType,
|
197
|
+
machineInstance
|
198
|
+
) as MachineType[]
|
199
|
+
}
|
124
200
|
contentReverse={!evenRow}
|
201
|
+
modalId={`${machineInstanceId}-runCount-${numberOfRuns}`}
|
202
|
+
onClick={() =>
|
203
|
+
onUpdateAddBrowserInstance(
|
204
|
+
`${machineInstanceId}-runCount-0`,
|
205
|
+
machineInstance as ExecutionContext
|
206
|
+
)
|
207
|
+
}
|
125
208
|
/>
|
126
209
|
</div>
|
127
210
|
<div
|
@@ -130,31 +213,36 @@ const Branches = ({
|
|
130
213
|
'ff-connecting-branch-datalist-reverse': !evenRow,
|
131
214
|
})}
|
132
215
|
>
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
<Icon name="datalist_icon" className="ff-connecting-icon" />
|
151
|
-
<Typography
|
152
|
-
className="ff-connecting-text"
|
153
|
-
color="var(--ff-connecting-branch-color)"
|
216
|
+
{hideDataSet && (
|
217
|
+
<div
|
218
|
+
id={`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`}
|
219
|
+
className="ff-dataset-list-branch"
|
220
|
+
onClick={() =>
|
221
|
+
onUpdateDataSetList(
|
222
|
+
`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
|
223
|
+
{
|
224
|
+
peVariableSetId: peVariableSetId,
|
225
|
+
globalVariableSetId: globalVariableSetId,
|
226
|
+
testDataSetId: testDataSetId,
|
227
|
+
},
|
228
|
+
true,
|
229
|
+
numberOfRuns,
|
230
|
+
machineInstanceId
|
231
|
+
)
|
232
|
+
}
|
154
233
|
>
|
155
|
-
|
156
|
-
|
157
|
-
|
234
|
+
<Icon
|
235
|
+
name="datalist_icon"
|
236
|
+
className="ff-connecting-icon"
|
237
|
+
/>
|
238
|
+
<Typography
|
239
|
+
className="ff-connecting-text"
|
240
|
+
color="var(--ff-connecting-branch-color)"
|
241
|
+
>
|
242
|
+
Dataset List
|
243
|
+
</Typography>
|
244
|
+
</div>
|
245
|
+
)}
|
158
246
|
<Icon
|
159
247
|
name="plus_icon"
|
160
248
|
className="ff-connecting-icon"
|
@@ -182,7 +270,7 @@ const Branches = ({
|
|
182
270
|
<Button
|
183
271
|
id={`ff-sequential-branch-add-${machineInstanceId}`}
|
184
272
|
variant="tertiary"
|
185
|
-
label=
|
273
|
+
label={addInstanceLabel}
|
186
274
|
onClick={() =>
|
187
275
|
onAddBrowser(
|
188
276
|
`ff-sequential-branch-add-${machineInstanceId}`
|
@@ -17,6 +17,13 @@ export interface BranchesProps {
|
|
17
17
|
noOfRuns?: number,
|
18
18
|
machineInstanceId?: string
|
19
19
|
) => void;
|
20
|
+
addInstanceLabel?: string;
|
21
|
+
scriptType?: string;
|
22
|
+
onUpdateAddBrowserInstance: (
|
23
|
+
modalId: string,
|
24
|
+
machineInstance: ExecutionContext
|
25
|
+
) => void;
|
26
|
+
projectType?: string;
|
20
27
|
}
|
21
28
|
|
22
29
|
export interface branchTypeProps {
|
@@ -14,6 +14,10 @@ const ConnectingBranches = ({
|
|
14
14
|
onDeleteBrowser,
|
15
15
|
onAddRunBrowser,
|
16
16
|
onUpdateDataSetList,
|
17
|
+
onUpdateAddBrowserInstance,
|
18
|
+
addInstanceLabel = '',
|
19
|
+
scriptType = '',
|
20
|
+
projectType = 'Web',
|
17
21
|
}: ConnectingBranchesProps) => {
|
18
22
|
const [machineInstance, setMachineInstance] = useState<
|
19
23
|
ExecutionContext[] | {}[]
|
@@ -58,6 +62,10 @@ const ConnectingBranches = ({
|
|
58
62
|
machineInstancesRow[index - 1]?.[machineColumnCount - 1]
|
59
63
|
}
|
60
64
|
onUpdateDataSetList={onUpdateDataSetList}
|
65
|
+
onUpdateAddBrowserInstance={onUpdateAddBrowserInstance}
|
66
|
+
addInstanceLabel={addInstanceLabel}
|
67
|
+
scriptType={scriptType}
|
68
|
+
projectType={projectType}
|
61
69
|
/>
|
62
70
|
</Fragment>
|
63
71
|
))}
|
@@ -14,4 +14,11 @@ export interface ConnectingBranchesProps {
|
|
14
14
|
noOfRuns?: number,
|
15
15
|
machineInstanceId?: string
|
16
16
|
) => void;
|
17
|
+
addInstanceLabel?: string;
|
18
|
+
scriptType?: string;
|
19
|
+
projectType?: string;
|
20
|
+
onUpdateAddBrowserInstance: (
|
21
|
+
modalId: string,
|
22
|
+
machineInstance: ExecutionContext
|
23
|
+
) => void;
|
17
24
|
}
|
@@ -8,7 +8,7 @@ export interface SequentialConnectingBranchProps {
|
|
8
8
|
machineOptionsList?: Option[];
|
9
9
|
onHandleSelect?: (option: Option) => void;
|
10
10
|
onAddBrowserInstance?: (modalId: string) => void;
|
11
|
-
onUpdateAddBrowserInstance
|
11
|
+
onUpdateAddBrowserInstance: (modalId: string, machineInstance: ExecutionContext) => void;
|
12
12
|
onDeleteBrowserInstance?: (id: string, runCount: number) => void;
|
13
13
|
onAddRunBrowserInstance?: (machineInstanceId: string) => void;
|
14
14
|
onDeleteMachineInstance?: () => void;
|
@@ -20,6 +20,9 @@ export interface SequentialConnectingBranchProps {
|
|
20
20
|
machineInstanceId?: string
|
21
21
|
) => void;
|
22
22
|
dataSetValues: dataSetValues;
|
23
|
+
addInstanceLabel?: string;
|
24
|
+
scriptType?: string;
|
25
|
+
projectType?: string;
|
23
26
|
}
|
24
27
|
|
25
28
|
// Type for machine information
|
@@ -27,14 +30,13 @@ export interface MachineInfo {
|
|
27
30
|
osName: string;
|
28
31
|
osVersion: string;
|
29
32
|
hostName: string;
|
33
|
+
iconName: string;
|
30
34
|
}
|
31
35
|
|
32
36
|
// Type for device information
|
33
37
|
export interface DeviceInfo {
|
34
|
-
|
35
|
-
|
36
|
-
// deviceName: string;
|
37
|
-
// deviceType: string;
|
38
|
+
name: string;
|
39
|
+
platform: string;
|
38
40
|
}
|
39
41
|
|
40
42
|
export interface ExecutionContext {
|
@@ -13,7 +13,8 @@ const TableBody = React.memo(
|
|
13
13
|
onCheckBoxChange,
|
14
14
|
}: TableBodyProps) => (
|
15
15
|
<tbody>
|
16
|
-
|
16
|
+
<tr id="ff-table-tree-first-node" />
|
17
|
+
{flattenedTreeData?.map(({ node, level }) => {
|
17
18
|
return (
|
18
19
|
<TableRow
|
19
20
|
key={node.id}
|
@@ -28,6 +29,7 @@ const TableBody = React.memo(
|
|
28
29
|
/>
|
29
30
|
);
|
30
31
|
})}
|
32
|
+
<tr id="ff-table-tree-last-node" />
|
31
33
|
</tbody>
|
32
34
|
)
|
33
35
|
);
|