pixel-react 1.9.6 → 1.9.8

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 (60) hide show
  1. package/lib/components/ConditionalDropdown/types.d.ts +4 -3
  2. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +1 -0
  3. package/lib/components/Input/types.d.ts +2 -0
  4. package/lib/components/MobileSkin/MobileSkinInterface.d.ts +2 -2
  5. package/lib/components/MobileSkin/types.d.ts +9 -8
  6. package/lib/components/Select/types.d.ts +4 -0
  7. package/lib/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.d.ts +4 -0
  8. package/lib/components/SequentialConnectingBranch/components/DatasetTooltip/types.d.ts +8 -0
  9. package/lib/components/SequentialConnectingBranch/types.d.ts +17 -4
  10. package/lib/components/TableTree/types.d.ts +4 -3
  11. package/lib/index.d.ts +34 -7
  12. package/lib/index.esm.js +299 -106
  13. package/lib/index.esm.js.map +1 -1
  14. package/lib/index.js +299 -106
  15. package/lib/index.js.map +1 -1
  16. package/lib/tsconfig.tsbuildinfo +1 -1
  17. package/lib/utils/getSequentialPayload/types.d.ts +6 -0
  18. package/package.json +1 -1
  19. package/src/assets/Themes/BaseTheme.scss +3 -0
  20. package/src/assets/Themes/DarkTheme.scss +3 -0
  21. package/src/assets/styles/_colors.scss +5 -0
  22. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +149 -30
  23. package/src/components/ConditionalDropdown/types.ts +27 -25
  24. package/src/components/Drawer/Drawer.scss +1 -1
  25. package/src/components/Drawer/Drawer.tsx +1 -1
  26. package/src/components/Editor/VariableDropdown.tsx +1 -1
  27. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +39 -8
  28. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +0 -4
  29. package/src/components/Input/Input.tsx +4 -0
  30. package/src/components/Input/types.ts +5 -0
  31. package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -0
  32. package/src/components/MobileSkin/MobileSkin.scss +0 -8
  33. package/src/components/MobileSkin/MobileSkin.stories.tsx +10 -9
  34. package/src/components/MobileSkin/MobileSkin.tsx +16 -31
  35. package/src/components/MobileSkin/MobileSkinInterface.ts +2 -2
  36. package/src/components/MobileSkin/types.ts +9 -8
  37. package/src/components/RadioButton/RadioButton.tsx +5 -1
  38. package/src/components/Select/Select.stories.tsx +2 -0
  39. package/src/components/Select/Select.tsx +4 -1
  40. package/src/components/Select/components/Dropdown.tsx +1 -2
  41. package/src/components/Select/types.ts +6 -1
  42. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +35 -28
  43. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +58 -14
  44. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -20
  45. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx +41 -0
  46. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/types.ts +9 -0
  47. package/src/components/SequentialConnectingBranch/types.ts +19 -5
  48. package/src/components/TableTree/Components/TableBody.tsx +2 -2
  49. package/src/components/TableTree/Components/TableCell.tsx +18 -5
  50. package/src/components/TableTree/Components/TableHead.tsx +5 -3
  51. package/src/components/TableTree/TableTree.scss +88 -51
  52. package/src/components/TableTree/TableTree.stories.tsx +8 -7
  53. package/src/components/TableTree/TableTree.tsx +12 -11
  54. package/src/components/TableTree/data.ts +1 -1
  55. package/src/components/TableTree/types.ts +4 -3
  56. package/src/components/Tabs/Tabs.scss +1 -1
  57. package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx +1 -0
  58. package/src/utils/getSequentialPayload/getSequentialPayload.ts +1 -1
  59. package/src/utils/getSequentialPayload/types.ts +6 -0
  60. package/src/utils/getTreeDetails/getTreeDetails.ts +3 -3
@@ -55,6 +55,7 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
55
55
  showBorder={false}
56
56
  onChange={onDropdownChangeHandler}
57
57
  disabled={disabled || !optionsRequired}
58
+ optionZIndex={999999}
58
59
  optionsRequired={optionsRequired}
59
60
  className={classNames('ff-floating-dropdown', {
60
61
  'ff-floating-dropdown--disabled': !!disabled,
@@ -37,14 +37,6 @@
37
37
  }
38
38
  }
39
39
 
40
- .ff-notch {
41
- background-color: var(--text-color);
42
- border-radius: 24px;
43
- position: absolute;
44
- &.android-notch {
45
- border-radius: 50%;
46
- }
47
- }
48
40
  .ff-nav-bar {
49
41
  height: 32px;
50
42
  padding: 8px;
@@ -1,5 +1,6 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react';
2
2
  import MobileSkin from './MobileSkin';
3
+ import React from 'react';
3
4
 
4
5
  const meta: Meta<typeof MobileSkin> = {
5
6
  title: 'Components/MobileSkin',
@@ -56,38 +57,38 @@ const defaultArgs = {
56
57
  navBarIcons: navBarIcons,
57
58
  mobileWidth: 220,
58
59
  mobileHeight: 448,
59
- children: randomImage,
60
+ children: <p>No Data Found</p>,
60
61
  };
61
62
 
62
- export const iosPortraitView: Story = {
63
+ export const PortraitView: Story = {
63
64
  args: {
64
65
  ...defaultArgs,
65
66
  orientation: 'portrait',
66
- type: 'ios',
67
67
  },
68
68
  };
69
69
 
70
- export const iosLandscapeView: Story = {
70
+ export const LandscapeView: Story = {
71
71
  args: {
72
72
  ...defaultArgs,
73
73
  orientation: 'landscape',
74
- type: 'ios',
75
74
  },
76
75
  };
77
76
 
78
- export const androidPortraitView: Story = {
77
+ export const PortraitViewWithNavbar: Story = {
79
78
  args: {
80
79
  ...defaultArgs,
81
80
  orientation: 'portrait',
82
- type: 'android',
81
+ UtilityBar: true,
82
+ navBarIcons: navBarIcons,
83
83
  },
84
84
  };
85
85
 
86
- export const androidLandscapeView: Story = {
86
+ export const LandscapeViewWithNavbar: Story = {
87
87
  args: {
88
88
  ...defaultArgs,
89
89
  orientation: 'landscape',
90
- type: 'android',
90
+ UtilityBar: true,
91
+ navBarIcons: navBarIcons,
91
92
  },
92
93
  };
93
94
  export default meta;
@@ -7,16 +7,12 @@ import { MobileSkinProps } from './MobileSkinInterface';
7
7
  const MobileSkin: React.FC<MobileSkinProps> = ({
8
8
  children,
9
9
  orientation = '',
10
- type = '',
11
10
  navBarIcons,
12
11
  mobileHeight = 448,
13
12
  mobileWidth = 220,
13
+ UtilityBar,
14
14
  }) => {
15
- const notchHeight = (mobileHeight / 448) * 20;
16
- const notchWidth = (mobileWidth / 220) * 60;
17
-
18
15
  const isPortrait = orientation === 'portrait';
19
- const isIos = type === 'ios';
20
16
  const containerHeight = isPortrait ? mobileHeight : mobileWidth;
21
17
  const containerWidth = isPortrait ? mobileWidth : mobileHeight;
22
18
 
@@ -55,33 +51,22 @@ const MobileSkin: React.FC<MobileSkinProps> = ({
55
51
  )}
56
52
  </div>
57
53
  </div>
58
-
59
- <div
60
- className={`ff-notch ${!isIos ? 'android-notch' : ''}`}
61
- style={{
62
- height: !isIos ? 15 : isPortrait ? notchHeight : notchWidth,
63
- width: !isIos ? 15 : isPortrait ? notchWidth : notchHeight,
64
- transform: isPortrait
65
- ? `translate(${mobileWidth * 0.01}px, ${mobileHeight * -0.43}px)`
66
- : `translate(${containerWidth * -0.46}px, ${
67
- containerHeight * -0.01
68
- }px)`,
69
- }}
70
- ></div>
71
- </div>
72
- <div className="ff-nav-bar">
73
- {navBarIcons.map((icon, index) => (
74
- <div
75
- key={index}
76
- className={`ff-nav-bar-icon ${icon?.className || ''} ${
77
- index === navBarIcons.length - 1 ? 'last-icon' : ''
78
- }`}
79
- onClick={icon.onClick}
80
- >
81
- <Tooltip title={icon?.title} children={<Icon {...icon} />} />
82
- </div>
83
- ))}
84
54
  </div>
55
+ {UtilityBar && (
56
+ <div className="ff-nav-bar">
57
+ {navBarIcons?.map((icon, index) => (
58
+ <div
59
+ key={index}
60
+ className={`ff-nav-bar-icon ${icon?.className || ''} ${
61
+ index === navBarIcons.length - 1 ? 'last-icon' : ''
62
+ }`}
63
+ onClick={icon.onClick}
64
+ >
65
+ <Tooltip title={icon?.title} children={<Icon {...icon} />} />
66
+ </div>
67
+ ))}
68
+ </div>
69
+ )}
85
70
  </div>
86
71
  );
87
72
  };
@@ -6,8 +6,8 @@ interface NavBarIcon {
6
6
  export interface MobileSkinProps {
7
7
  children: React.ReactNode | string;
8
8
  orientation?: 'portrait' | 'landscape';
9
- type: 'ios' | 'android';
10
- navBarIcons: NavBarIcon[];
9
+ UtilityBar?: boolean;
10
+ navBarIcons?: NavBarIcon[];
11
11
  mobileHeight?: number;
12
12
  mobileWidth?: number;
13
13
  }
@@ -1,7 +1,8 @@
1
1
  export interface iconDetails {
2
2
  /**
3
- * details of each icon
3
+ * details of each icon in which name must be there
4
4
  */
5
+ name: string;
5
6
  [key: string]: any;
6
7
  }
7
8
  export interface MobileSkinProps {
@@ -12,11 +13,7 @@ export interface MobileSkinProps {
12
13
  /**
13
14
  * Portrait or landScape View of the Mobile
14
15
  */
15
- orientation: "portrait" | "landscape";
16
- /**
17
- * type either it will be ios or android
18
- */
19
- type: string;
16
+ orientation: 'portrait' | 'landscape';
20
17
  /**
21
18
  * height of the MobileSkin
22
19
  */
@@ -26,7 +23,11 @@ export interface MobileSkinProps {
26
23
  */
27
24
  mobileWidth?: number;
28
25
  /**
29
- * takes the icons details like icon name , title, onClick event, height , width, etc
26
+ * if you need the lower navbar below the mobileSkin you pass this prop
27
+ */
28
+ UtilityBar?: boolean;
29
+ /**
30
+ * takes the icons details like icon name , title, onClick event, height , width, etc but name is must
30
31
  */
31
- navbarIcons: Array<iconDetails>;
32
+ navbarIcons?: Array<iconDetails>;
32
33
  }
@@ -33,7 +33,11 @@ const RadioButton: React.FC<RadioButtonProps> = ({
33
33
  <span className="ff-radio-custom" />
34
34
  <Typography color="var(--text-color)" children={label} />
35
35
  </label>
36
- {showTooltip && <Tooltip title={tooltipTitle}>{tooltipChildren}</Tooltip>}
36
+ {showTooltip && (
37
+ <Tooltip title={tooltipTitle} placement="right">
38
+ {tooltipChildren}
39
+ </Tooltip>
40
+ )}
37
41
  </div>
38
42
  );
39
43
  };
@@ -347,6 +347,8 @@ export const IconOptionSelection: Story = {
347
347
  onChange={handleChange}
348
348
  showIcon={true}
349
349
  width={200}
350
+ optionsRequired={false}
351
+ disabled
350
352
  />
351
353
  );
352
354
  },
@@ -9,6 +9,7 @@ import Dropdown from './components/Dropdown';
9
9
  import { getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
10
10
  import usePortalPosition from '../../hooks/usePortalPosition';
11
11
  import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
12
+ import Tooltip from '../Tooltip';
12
13
 
13
14
  const Select: FC<SelectProps> = ({
14
15
  label = 'Default Label',
@@ -192,7 +193,9 @@ const Select: FC<SelectProps> = ({
192
193
  })}
193
194
  >
194
195
  {showIcon && (
195
- <Icon name={searchedIcon} className="ff-select-input-icon" />
196
+ <Tooltip placement="bottom" title={searchedText}>
197
+ <Icon name={searchedIcon} className="ff-select-input-icon" />
198
+ </Tooltip>
196
199
  )}
197
200
  <input
198
201
  type="text"
@@ -8,7 +8,6 @@ import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
8
8
  import classNames from 'classnames';
9
9
  import {
10
10
  getLabel,
11
- getValue,
12
11
  } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
13
12
  import useClickOutside from '../../../hooks/useClickOutside';
14
13
  import Icon from '../../Icon';
@@ -113,7 +112,7 @@ const Dropdown: FC<DropdownProps> = ({
113
112
  'ff-select-dropdown-option',
114
113
  {
115
114
  'ff-select-dropdown-option__selected':
116
- getValue(option, valueAccessor) === selectedOption,
115
+ getLabel(option, valueAccessor) === selectedOption,
117
116
  },
118
117
  currentTheme
119
118
  )}
@@ -117,7 +117,12 @@ export interface SelectProps {
117
117
  /**
118
118
  * Provide the boolean value if tooltip is reuired or not
119
119
  */
120
- showToolTip?: boolean
120
+ showToolTip?: boolean;
121
+
122
+ /**
123
+ * Provide the background color for the select label on the hover state
124
+ */
125
+ labelBackgroundColor?: string;
121
126
  }
122
127
 
123
128
  export interface DropdownPosition {
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
2
2
  import SequentialConnectingBranch from './SequentialConnectingBranch';
3
3
  import { useState } from 'react';
4
4
  import React from 'react';
5
+ import { Option } from '../Select/types';
5
6
 
6
7
  const meta: Meta<typeof SequentialConnectingBranch> = {
7
8
  title: 'Components/SequentialConnectingBranch',
@@ -16,48 +17,54 @@ type Story = StoryObj<typeof SequentialConnectingBranch>;
16
17
 
17
18
  export const Primary: Story = {
18
19
  render: () => {
19
- const machineList = [
20
- {
21
- label: 'FFE 123',
22
- value: 'FFE 123',
23
- },
24
- {
25
- label: 'FFE 234',
26
- value: 'FFE 234',
20
+ const [machineSelect, setMachineSelect] = useState<Option>({
21
+ label: 'ffe-Mahesh',
22
+ value: {
23
+ status: 'running',
27
24
  },
25
+ name: 'ffe-Mahesh',
26
+ });
27
+ const [machineInstance, setMachineInstance] = useState<Option>({});
28
+
29
+ const machineOptionList = [
28
30
  {
29
- label: 'FFE 345',
30
- value: 'FFE 345',
31
+ label: 'ffe-Ganesh',
32
+ value: {
33
+ status: 'running',
34
+ },
35
+ name: 'ffe-Ganesh',
31
36
  },
32
37
  {
33
- label: 'FFE 456',
34
- value: 'FFE 456',
38
+ label: 'ffe-Mahesh',
39
+ value: {
40
+ status: 'running',
41
+ },
42
+ name: 'ffe-Mahesh',
35
43
  },
36
44
  ];
37
- const [selectedMachine, setSelectedMachine] = useState({});
38
- const [machineInstances, setMachineInstances] = useState<any>([]);
45
+
46
+ const onMachineHandleSelect = (option: Option) => {
47
+ setMachineSelect(option);
48
+ };
49
+
50
+ const onAddMachine = () => {};
51
+
39
52
  return (
40
53
  <>
41
54
  <SequentialConnectingBranch
42
- machineOptionsList={machineList}
43
- machineInstances={machineInstances}
44
- selectedMachine={selectedMachine}
45
- onHandleSelect={(option) => {
46
- setSelectedMachine(option);
47
- }}
48
- onAddBrowserInstance={() => {}}
49
- onUpdateAddBrowserInstance={() => {}}
50
- onAddRunBrowserInstance={() => {}}
51
- onDeleteMachineInstance={() => {}}
52
- onDeleteBrowserInstance={() => {}}
55
+ projectType="web"
53
56
  dataSetValues={{
54
57
  peVariableSetId: 'Test dev',
55
58
  globalVariableSetId: 'Test dev',
56
59
  testDataSetId: 'Test dev',
57
60
  }}
58
- onUpdateDataSetList={() => {}}
59
- machineColumnWidth={500}
60
- machineColumnCount={3}
61
+ machineColumnWidth={340}
62
+ machineColumnCount={2}
63
+ machineOptionsList={machineOptionList}
64
+ machineInstances={[]}
65
+ selectedMachine={machineSelect}
66
+ onHandleSelect={onMachineHandleSelect}
67
+ scriptType="Manual"
61
68
  />
62
69
  </>
63
70
  );
@@ -7,7 +7,14 @@ import Typography from '../Typography';
7
7
  import './SequentialConnectingBranch.scss';
8
8
  import { FC, useEffect, useRef, useState } from 'react';
9
9
  import ConnectingBranches from './components/ConnectingBranches/ConnectingBranches';
10
- import { ExecutionContext, SequentialConnectingBranchProps } from './types';
10
+ import {
11
+ dataSetValues,
12
+ ExecutionContext,
13
+ SequentialConnectingBranchProps,
14
+ } from './types';
15
+ import Tooltip from '../Tooltip';
16
+ import DataSetTooltip from './components/DatasetTooltip/DataSetTooltip';
17
+ import { DataSetToolTip } from './components/DatasetTooltip/types';
11
18
 
12
19
  const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
13
20
  machineInstances = [],
@@ -25,12 +32,15 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
25
32
  testDataSetId: '',
26
33
  globalVariableSetId: '',
27
34
  peVariableSetId: '',
35
+ globalVariableSetName: '',
36
+ peVariableSetName: '',
37
+ testDataSetName: '',
28
38
  },
29
39
  onUpdateAddBrowserInstance = () => {},
30
40
  addInstanceLabel = 'Add Environment',
31
41
  scriptType = 'Automation',
32
42
  projectType = 'Web',
33
- readOnly = true,
43
+ readOnly = false,
34
44
  }) => {
35
45
  const [selectedMachineInstance, setSelectedMachineInstance] = useState({});
36
46
  const selectButtonRef = useRef<HTMLButtonElement>(null);
@@ -63,11 +73,29 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
63
73
  }, [selectedMachine]);
64
74
 
65
75
  useEffect(() => {
66
- setMachineBranchInstances([...machineInstances, {}]);
76
+ if (readOnly) {
77
+ setMachineBranchInstances(machineInstances);
78
+ } else {
79
+ setMachineBranchInstances([...machineInstances, {}]);
80
+ }
67
81
  }, [machineInstances]);
68
82
 
69
83
  const hideDataSet = scriptType.toLowerCase() !== 'manual';
70
84
 
85
+ const removeKeysContainingSubstring = (
86
+ obj: dataSetValues,
87
+ substring: string
88
+ ) => {
89
+ return Object.fromEntries(
90
+ Object.entries(obj).filter(([key]) => !key.includes(substring))
91
+ );
92
+ };
93
+
94
+ const filteredDataSetValues = removeKeysContainingSubstring(
95
+ dataSetValues,
96
+ 'Id'
97
+ );
98
+
71
99
  return (
72
100
  <div className="ff-sequential-connecting-branch-wrapper">
73
101
  <div className="ff-connecting-select-branch-wrapper">
@@ -82,6 +110,8 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
82
110
  width={'240px'}
83
111
  selectedOption={selectedMachineInstance}
84
112
  valueAccessor={'name'}
113
+ optionsRequired={!readOnly}
114
+ disableInput={readOnly}
85
115
  />
86
116
  {!isMachineSelected && (
87
117
  <div
@@ -121,11 +151,10 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
121
151
  <div className="ff-scope-wrapper">
122
152
  <Typography
123
153
  as="span"
124
- fontSize={12}
125
- color={getMachineStatusColor(selectedMachine.values?.status)}
154
+ color={getMachineStatusColor(selectedMachine.value?.status)}
126
155
  className="ff-scope-text"
127
156
  >
128
- {selectedMachine.values?.status}
157
+ {selectedMachine.value?.status}
129
158
  </Typography>
130
159
  </div>
131
160
 
@@ -140,10 +169,22 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
140
169
  )
141
170
  }
142
171
  >
143
- <Icon name="datalist_icon" className="ff-dataset-icon" />
172
+ <Tooltip
173
+ placement="bottom"
174
+ title={
175
+ <DataSetTooltip
176
+ datSetToolTip={filteredDataSetValues as DataSetToolTip}
177
+ />
178
+ }
179
+ >
180
+ <Icon
181
+ name="datalist_icon"
182
+ className="ff-dataset-icon"
183
+ hoverEffect
184
+ />
185
+ </Tooltip>
144
186
  <Typography
145
187
  as="span"
146
- fontSize={12}
147
188
  color="var(--ff-connecting-branch-color)"
148
189
  className="ff-datalist-text"
149
190
  >
@@ -151,12 +192,15 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
151
192
  </Typography>
152
193
  </div>
153
194
  )}
154
- <Icon
155
- name="delete"
156
- className="ff-run-delete-icon"
157
- color="var(--ff-connecting-branch-delete-color)"
158
- onClick={onDeleteMachineInstance}
159
- />
195
+ {!readOnly && (
196
+ <Icon
197
+ name="delete"
198
+ className="ff-run-delete-icon"
199
+ color="var(--ff-connecting-branch-delete-color)"
200
+ onClick={onDeleteMachineInstance}
201
+ hoverEffect
202
+ />
203
+ )}
160
204
  </div>
161
205
  </div>
162
206
  )}
@@ -10,6 +10,8 @@ import Typography from '../../../Typography';
10
10
  import Button from '../../../Button';
11
11
  import './Branches.scss';
12
12
  import { MachineType } from '../../../MachineInputField/types';
13
+ import Tooltip from '../../../Tooltip';
14
+ import DataSetTooltip from '../DatasetTooltip/DataSetTooltip';
13
15
 
14
16
  const Branches = ({
15
17
  machineInstances,
@@ -163,13 +165,17 @@ const Branches = ({
163
165
  </div>
164
166
  {machineInstances?.map((machineInstance, index) => {
165
167
  const {
166
- numberOfRuns = 'numberOfRuns' in machineInstance
167
- ? machineInstance.numberOfRuns
168
+ runCount = 'runCount' in machineInstance
169
+ ? machineInstance.runCount
168
170
  : 0,
171
+ numberOfRuns = 0,
169
172
  machineInstanceId = '',
170
173
  peVariableSetId = '',
171
174
  globalVariableSetId = '',
172
175
  testDataSetId = '',
176
+ testDataSetName = '',
177
+ peVariableSetName = '',
178
+ globalVariableSetName = '',
173
179
  } = machineInstance as ExecutionContext;
174
180
  return (
175
181
  <Fragment key={ffid()}>
@@ -184,7 +190,7 @@ const Branches = ({
184
190
  ></div>
185
191
  <MachineInputField
186
192
  width={`${machineColumnWidth}px`}
187
- runCount={numberOfRuns}
193
+ runCount={runCount}
188
194
  key={ffid()}
189
195
  options={
190
196
  getMachineLabelOptionList(
@@ -193,9 +199,7 @@ const Branches = ({
193
199
  ) as MachineType[]
194
200
  }
195
201
  contentReverse={!evenRow}
196
- modalId={`${machineInstanceId}-runCount-${
197
- numberOfRuns - 1
198
- }`}
202
+ modalId={`${machineInstanceId}-runCount-${runCount - 1}`}
199
203
  onClick={() =>
200
204
  onUpdateAddBrowserInstance(
201
205
  `${machineInstanceId}-runCount-0`,
@@ -214,15 +218,18 @@ const Branches = ({
214
218
  {hideDataSet && (
215
219
  <>
216
220
  <div
217
- id={`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`}
221
+ id={`ff-sequential-branch-dataset-${machineInstanceId}-${runCount}`}
218
222
  className="ff-dataset-list-branch"
219
223
  onClick={() =>
220
224
  onUpdateDataSetList(
221
- `ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
225
+ `ff-sequential-branch-dataset-${machineInstanceId}-${runCount}`,
222
226
  {
223
227
  peVariableSetId: peVariableSetId,
224
228
  globalVariableSetId: globalVariableSetId,
225
229
  testDataSetId: testDataSetId,
230
+ testDataSetName: testDataSetName,
231
+ globalVariableSetName: globalVariableSetName,
232
+ peVariableSetName: peVariableSetName,
226
233
  },
227
234
  true,
228
235
  numberOfRuns,
@@ -230,10 +237,24 @@ const Branches = ({
230
237
  )
231
238
  }
232
239
  >
233
- <Icon
234
- name="datalist_icon"
235
- className="ff-connecting-icon"
236
- />
240
+ <Tooltip
241
+ placement="bottom"
242
+ title={
243
+ <DataSetTooltip
244
+ datSetToolTip={{
245
+ peVariableSetName,
246
+ globalVariableSetName,
247
+ testDataSetName,
248
+ }}
249
+ />
250
+ }
251
+ >
252
+ <Icon
253
+ name="datalist_icon"
254
+ className="ff-connecting-icon"
255
+ hoverEffect
256
+ />
257
+ </Tooltip>
237
258
  <Typography
238
259
  className="ff-connecting-text"
239
260
  color="var(--ff-connecting-branch-color)"
@@ -247,6 +268,7 @@ const Branches = ({
247
268
  className="ff-connecting-icon"
248
269
  onClick={() => onAddRunBrowser(machineInstanceId)}
249
270
  color="var(--ff-connecting-branch-color)"
271
+ hoverEffect
250
272
  />
251
273
  <Typography
252
274
  className="ff-connecting-text"
@@ -256,14 +278,17 @@ const Branches = ({
256
278
  </Typography>
257
279
  </>
258
280
  )}
259
- <Icon
260
- name="delete"
261
- className="ff-connecting-delete-icon"
262
- onClick={() =>
263
- onDeleteBrowser(machineInstanceId, numberOfRuns)
264
- }
265
- color="var(--ff-connecting-branch-delete-color)"
266
- />
281
+ {!readOnly && (
282
+ <Icon
283
+ name="delete"
284
+ className="ff-connecting-delete-icon"
285
+ onClick={() =>
286
+ onDeleteBrowser(machineInstanceId, runCount)
287
+ }
288
+ color="var(--ff-connecting-branch-delete-color)"
289
+ hoverEffect
290
+ />
291
+ )}
267
292
  </div>
268
293
  )}
269
294
  </div>
@@ -0,0 +1,41 @@
1
+ import { FC } from 'react';
2
+ import Tooltip from '../../../Tooltip';
3
+ import Typography from '../../../Typography';
4
+ import { DataSetTooltipProps } from './types';
5
+
6
+ const DataSetTooltip: FC<DataSetTooltipProps> = ({
7
+ datSetToolTip: {
8
+ globalVariableSetName = '',
9
+ peVariableSetName = '',
10
+ testDataSetName = '',
11
+ },
12
+ }) => {
13
+ const toolTipTitleValue = {
14
+ 'Test Data Set': testDataSetName,
15
+ 'Global Variable Set': globalVariableSetName,
16
+ 'Project Environment Set': peVariableSetName,
17
+ };
18
+
19
+ return (
20
+ <>
21
+ <Tooltip placement="bottom">
22
+ {Object.entries(toolTipTitleValue).map(([key, value], index) => (
23
+ <div key={index}>
24
+ <Typography
25
+ as="div"
26
+ fontSize={10}
27
+ lineHeight="15px"
28
+ >
29
+ {key}
30
+ </Typography>
31
+ <Typography as="div" lineHeight="18px">
32
+ {value}
33
+ </Typography>
34
+ </div>
35
+ ))}
36
+ </Tooltip>
37
+ </>
38
+ );
39
+ };
40
+
41
+ export default DataSetTooltip;