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.
Files changed (173) 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/CreateVariable/types.d.ts +2 -2
  8. package/lib/components/DownloadClient/type.d.ts +19 -27
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  11. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  12. package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
  13. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  14. package/lib/components/MachineInputField/types.d.ts +1 -0
  15. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  16. package/lib/components/MenuOption/types.d.ts +2 -1
  17. package/lib/components/MiniModal/types.d.ts +1 -0
  18. package/lib/components/Modal/types.d.ts +1 -1
  19. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  20. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  21. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  22. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  23. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  24. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  25. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  26. package/lib/components/NLPInput/types.d.ts +80 -0
  27. package/lib/components/PopUpModal/types.d.ts +2 -1
  28. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  29. package/lib/components/ProgressBar/index.d.ts +1 -0
  30. package/lib/components/ProgressBar/types.d.ts +12 -0
  31. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  32. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  33. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  34. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  35. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  36. package/lib/components/TableTree/TableTree.d.ts +2 -2
  37. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  38. package/lib/components/TableTree/types.d.ts +1 -1
  39. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  40. package/lib/index.d.ts +183 -65
  41. package/lib/index.esm.js +1281 -674
  42. package/lib/index.esm.js.map +1 -1
  43. package/lib/index.js +1282 -674
  44. package/lib/index.js.map +1 -1
  45. package/lib/tsconfig.tsbuildinfo +1 -1
  46. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  47. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  48. package/package.json +1 -1
  49. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  50. package/src/assets/Themes/BaseTheme.scss +20 -2
  51. package/src/assets/Themes/DarkTheme.scss +19 -2
  52. package/src/assets/icons/add_file.svg +4 -4
  53. package/src/assets/icons/ai_search.svg +9 -0
  54. package/src/assets/icons/authorization.svg +4 -4
  55. package/src/assets/icons/depends_on_script.svg +7 -7
  56. package/src/assets/icons/email_group.svg +3 -3
  57. package/src/assets/icons/help_icon.svg +10 -0
  58. package/src/assets/icons/import_icon.svg +4 -0
  59. package/src/assets/icons/ios_icon.svg +11 -0
  60. package/src/assets/icons/labels.svg +8 -8
  61. package/src/assets/icons/parameters.svg +3 -3
  62. package/src/assets/icons/plus_round_icon.svg +38 -0
  63. package/src/assets/icons/pre_post_condition.svg +8 -8
  64. package/src/assets/icons/program_element.svg +8 -8
  65. package/src/assets/icons/test_data.svg +5 -5
  66. package/src/assets/icons/test_data_set.svg +7 -7
  67. package/src/assets/icons/tick_icon.svg +2 -2
  68. package/src/assets/icons/variable_set.svg +5 -5
  69. package/src/assets/styles/_colors.scss +1 -1
  70. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  71. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  72. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  73. package/src/components/Charts/LineChart/types.ts +1 -0
  74. package/src/components/Checkbox/Checkbox.scss +3 -1
  75. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  76. package/src/components/Checkbox/Checkbox.tsx +3 -4
  77. package/src/components/Chip/Chip.scss +15 -5
  78. package/src/components/Chip/Chip.stories.tsx +10 -1
  79. package/src/components/Chip/Chip.tsx +5 -1
  80. package/src/components/Chip/types.ts +1 -1
  81. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  82. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
  83. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
  84. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  85. package/src/components/ConditionalDropdown/index.ts +1 -0
  86. package/src/components/ConditionalDropdown/types.ts +160 -0
  87. package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
  88. package/src/components/CreateVariable/types.ts +2 -2
  89. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  90. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  91. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  92. package/src/components/DownloadClient/type.ts +32 -40
  93. package/src/components/EditTextField/EditTextField.scss +1 -1
  94. package/src/components/EditTextField/EditTextField.tsx +14 -20
  95. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  96. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  97. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  98. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  99. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  100. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  101. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  102. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  103. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  104. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  105. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  106. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  107. package/src/components/Excel/dataConversion.ts +43 -20
  108. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  109. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  110. package/src/components/Form/Forms.tsx +0 -2
  111. package/src/components/Icon/iconList.ts +12 -0
  112. package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
  113. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  114. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  115. package/src/components/LabelEditTextField/types.ts +1 -0
  116. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  117. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  118. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  119. package/src/components/MachineInputField/types.ts +2 -0
  120. package/src/components/MenuOption/MenuOption.scss +7 -7
  121. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  122. package/src/components/MenuOption/MenuOption.tsx +9 -13
  123. package/src/components/MenuOption/types.ts +3 -2
  124. package/src/components/MiniModal/MiniModal.scss +0 -1
  125. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  126. package/src/components/MiniModal/MiniModal.tsx +3 -1
  127. package/src/components/MiniModal/types.ts +1 -0
  128. package/src/components/Modal/types.ts +1 -1
  129. package/src/components/MultiSelect/Dropdown.scss +3 -4
  130. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  131. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  132. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  133. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  134. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  135. package/src/components/NLPInput/NLPInput.scss +77 -21
  136. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  137. package/src/components/NLPInput/NlpInput.tsx +95 -59
  138. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  139. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  140. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  141. package/src/components/NLPInput/sampleData.ts +162 -0
  142. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  143. package/src/components/PopUpModal/PopUpModal.stories.tsx +15 -10
  144. package/src/components/PopUpModal/PopUpModal.tsx +5 -4
  145. package/src/components/PopUpModal/types.ts +2 -1
  146. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  147. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  148. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  149. package/src/components/ProgressBar/index.ts +1 -0
  150. package/src/components/ProgressBar/types.ts +12 -0
  151. package/src/components/Search/Search.tsx +9 -1
  152. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  153. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  154. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  155. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  156. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  157. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  158. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  159. package/src/components/Table/Table.scss +1 -0
  160. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  161. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  162. package/src/components/TableTree/TableTree.tsx +27 -181
  163. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  164. package/src/components/TableTree/data.ts +45 -0
  165. package/src/components/TableTree/types.ts +4 -4
  166. package/src/hooks/useIntersectionObserver.tsx +56 -0
  167. package/src/index.ts +4 -3
  168. package/src/utils/functionCheck/functionCheck.ts +8 -0
  169. package/src/utils/getSequentialPayload/types.ts +1 -0
  170. package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
  171. package/src/components/AddVariables/AddVariables.tsx +0 -113
  172. package/src/components/AddVariables/index.ts +0 -1
  173. 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
- colorForTitleMessage = 'var(--status-button-bg-warning)'
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 fontSize={16}>{footerMessage}</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="420px"
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) => 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
  );