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.
Files changed (147) hide show
  1. package/lib/components/Charts/LineChart/types.d.ts +1 -0
  2. package/lib/components/Chip/types.d.ts +1 -1
  3. package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
  4. package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
  5. package/lib/components/ConditionalDropdown/index.d.ts +1 -0
  6. package/lib/components/ConditionalDropdown/types.d.ts +145 -0
  7. package/lib/components/DownloadClient/type.d.ts +19 -27
  8. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  11. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  12. package/lib/components/MachineInputField/types.d.ts +1 -0
  13. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  14. package/lib/components/MenuOption/types.d.ts +2 -1
  15. package/lib/components/MiniModal/types.d.ts +1 -0
  16. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  17. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  18. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  19. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  20. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  21. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  22. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  23. package/lib/components/NLPInput/types.d.ts +80 -0
  24. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  25. package/lib/components/ProgressBar/index.d.ts +1 -0
  26. package/lib/components/ProgressBar/types.d.ts +12 -0
  27. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  28. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  29. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  30. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  31. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  32. package/lib/components/TableTree/TableTree.d.ts +2 -2
  33. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  34. package/lib/components/TableTree/types.d.ts +1 -1
  35. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  36. package/lib/index.d.ts +112 -59
  37. package/lib/index.esm.js +1251 -662
  38. package/lib/index.esm.js.map +1 -1
  39. package/lib/index.js +1252 -662
  40. package/lib/index.js.map +1 -1
  41. package/lib/tsconfig.tsbuildinfo +1 -1
  42. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  43. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  44. package/package.json +1 -1
  45. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  46. package/src/assets/Themes/BaseTheme.scss +20 -2
  47. package/src/assets/Themes/DarkTheme.scss +19 -2
  48. package/src/assets/icons/ai_search.svg +9 -0
  49. package/src/assets/icons/help_icon.svg +10 -0
  50. package/src/assets/icons/ios_icon.svg +11 -0
  51. package/src/assets/icons/plus_round_icon.svg +38 -0
  52. package/src/assets/icons/tick_icon.svg +2 -2
  53. package/src/assets/styles/_colors.scss +1 -1
  54. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  55. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  56. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  57. package/src/components/Charts/LineChart/types.ts +1 -0
  58. package/src/components/Checkbox/Checkbox.scss +3 -1
  59. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  60. package/src/components/Checkbox/Checkbox.tsx +3 -4
  61. package/src/components/Chip/Chip.scss +15 -5
  62. package/src/components/Chip/Chip.stories.tsx +10 -1
  63. package/src/components/Chip/Chip.tsx +5 -1
  64. package/src/components/Chip/types.ts +1 -1
  65. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  66. package/src/components/{AddVariables/AddVariables.stories.tsx → ConditionalDropdown/ConditionalDropdown.stories.tsx} +75 -10
  67. package/src/components/{AddVariables/AddVariables.tsx → ConditionalDropdown/ConditionalDropdown.tsx} +63 -33
  68. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  69. package/src/components/ConditionalDropdown/index.ts +1 -0
  70. package/src/components/{AddVariables → ConditionalDropdown}/types.ts +62 -5
  71. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  72. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  73. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  74. package/src/components/DownloadClient/type.ts +32 -40
  75. package/src/components/EditTextField/EditTextField.scss +1 -1
  76. package/src/components/EditTextField/EditTextField.tsx +14 -20
  77. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  78. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  79. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  80. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  81. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  82. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  83. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  84. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  85. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  86. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  87. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  88. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  89. package/src/components/Excel/dataConversion.ts +43 -20
  90. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  91. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  92. package/src/components/Form/Forms.tsx +0 -2
  93. package/src/components/Icon/iconList.ts +9 -0
  94. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  95. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  96. package/src/components/LabelEditTextField/types.ts +1 -0
  97. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  98. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  99. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  100. package/src/components/MachineInputField/types.ts +2 -0
  101. package/src/components/MenuOption/MenuOption.scss +7 -7
  102. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  103. package/src/components/MenuOption/MenuOption.tsx +9 -13
  104. package/src/components/MenuOption/types.ts +3 -2
  105. package/src/components/MiniModal/MiniModal.scss +0 -1
  106. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  107. package/src/components/MiniModal/MiniModal.tsx +3 -1
  108. package/src/components/MiniModal/types.ts +1 -0
  109. package/src/components/MultiSelect/Dropdown.scss +3 -4
  110. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  111. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  112. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  113. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  114. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  115. package/src/components/NLPInput/NLPInput.scss +77 -21
  116. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  117. package/src/components/NLPInput/NlpInput.tsx +95 -59
  118. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  119. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  120. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  121. package/src/components/NLPInput/sampleData.ts +162 -0
  122. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  123. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  124. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  125. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  126. package/src/components/ProgressBar/index.ts +1 -0
  127. package/src/components/ProgressBar/types.ts +12 -0
  128. package/src/components/Search/Search.tsx +9 -1
  129. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  130. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  131. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  132. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  133. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  134. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  135. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  136. package/src/components/Table/Table.scss +1 -0
  137. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  138. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  139. package/src/components/TableTree/TableTree.tsx +27 -181
  140. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  141. package/src/components/TableTree/data.ts +45 -0
  142. package/src/components/TableTree/types.ts +4 -4
  143. package/src/hooks/useIntersectionObserver.tsx +56 -0
  144. package/src/index.ts +4 -2
  145. package/src/utils/functionCheck/functionCheck.ts +8 -0
  146. package/src/utils/getSequentialPayload/types.ts +1 -0
  147. 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) => setSearchValue(e.target.value)}
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
- setMachineInstances([...machineInstances, {}]);
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
- const isMachineSelected = checkEmpty(selectedMachine.value?.clientId);
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
- <div
122
- id="ff-sequential-machine-datalist"
123
- onClick={() =>
124
- onUpdateDataSetList(
125
- 'ff-sequential-machine-datalist',
126
- dataSetValues
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
- Dataset List
138
- </Typography>
139
- </div>
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
- { label: executionEnv, type: executionEnv },
122
- { label: browserVersion, type: browserName },
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
- <div
134
- id={`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`}
135
- className="ff-dataset-list-branch"
136
- onClick={() =>
137
- onUpdateDataSetList(
138
- `ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
139
- {
140
- peVariableSetId: peVariableSetId,
141
- globalVariableSetId: globalVariableSetId,
142
- testDataSetId: testDataSetId,
143
- },
144
- true,
145
- numberOfRuns,
146
- machineInstanceId
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
- Dataset List
156
- </Typography>
157
- </div>
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="Add Environrment"
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?: () => void;
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
- // Define properties as needed; assuming it can have various structures.
35
- // For example:
36
- // deviceName: string;
37
- // deviceType: string;
38
+ name: string;
39
+ platform: string;
38
40
  }
39
41
 
40
42
  export interface ExecutionContext {
@@ -9,6 +9,7 @@
9
9
  z-index: 100;
10
10
  cursor: pointer;
11
11
  }
12
+
12
13
  .ff-table {
13
14
  width: 100%;
14
15
  th,
@@ -13,7 +13,8 @@ const TableBody = React.memo(
13
13
  onCheckBoxChange,
14
14
  }: TableBodyProps) => (
15
15
  <tbody>
16
- {flattenedTreeData.map(({ node, level }) => {
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
- onPagination: (node) => {
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
- onPagination={(direction) => {
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
  }}