pixel-react 1.6.9 → 1.7.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/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/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/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/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/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 +112 -59
- package/lib/index.esm.js +1251 -662
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1252 -662
- 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/ai_search.svg +9 -0
- package/src/assets/icons/help_icon.svg +10 -0
- package/src/assets/icons/ios_icon.svg +11 -0
- package/src/assets/icons/plus_round_icon.svg +38 -0
- package/src/assets/icons/tick_icon.svg +2 -2
- 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/{AddVariables/AddVariables.stories.tsx → ConditionalDropdown/ConditionalDropdown.stories.tsx} +75 -10
- package/src/components/{AddVariables/AddVariables.tsx → ConditionalDropdown/ConditionalDropdown.tsx} +63 -33
- package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
- package/src/components/ConditionalDropdown/index.ts +1 -0
- package/src/components/{AddVariables → ConditionalDropdown}/types.ts +62 -5
- 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 +9 -0
- 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/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/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 -2
- package/src/utils/functionCheck/functionCheck.ts +8 -0
- package/src/utils/getSequentialPayload/types.ts +1 -0
- package/src/components/AddVariables/index.ts +0 -1
@@ -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
|
);
|
@@ -106,10 +106,9 @@ const colData = [
|
|
106
106
|
|
107
107
|
export const Default: Story = {
|
108
108
|
args: {
|
109
|
-
|
109
|
+
loadMore: (node) => {
|
110
110
|
console.log(node);
|
111
111
|
},
|
112
|
-
expandedNodes: ['MOD1102'],
|
113
112
|
onExpand: (isExpand, node) => {
|
114
113
|
console.log(isExpand, node);
|
115
114
|
},
|
@@ -131,12 +130,11 @@ export const ControlledCheckBox: Story = {
|
|
131
130
|
const [selected, setSelected] = useState<string[]>([]);
|
132
131
|
return (
|
133
132
|
<TableTree
|
134
|
-
expandedNodes={['MOD1102']}
|
135
133
|
onExpand={(isExpand, node) => {
|
136
134
|
console.log(isExpand, node);
|
137
135
|
}}
|
138
136
|
select="checkbox"
|
139
|
-
onChange={(nodes: string[]) => {
|
137
|
+
onChange={(e, nodes: string[]) => {
|
140
138
|
setSelected(nodes);
|
141
139
|
}}
|
142
140
|
selected={selected}
|
@@ -145,8 +143,8 @@ export const ControlledCheckBox: Story = {
|
|
145
143
|
onClick={(e, data) => {
|
146
144
|
console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
|
147
145
|
}}
|
148
|
-
|
149
|
-
console.log(direction,'-------------------');
|
146
|
+
loadMore={(direction) => {
|
147
|
+
console.log(direction, '-------------------');
|
150
148
|
}}
|
151
149
|
/>
|
152
150
|
);
|
@@ -157,7 +155,6 @@ export const ControlledRadio: Story = {
|
|
157
155
|
const [selected, setSelected] = useState<string[]>([]);
|
158
156
|
return (
|
159
157
|
<TableTree
|
160
|
-
expandedNodes={['MOD1102']}
|
161
158
|
onExpand={(isExpand, node) => {
|
162
159
|
console.log(isExpand, node);
|
163
160
|
}}
|