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.
- package/lib/components/ConditionalDropdown/types.d.ts +4 -3
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +1 -0
- package/lib/components/Input/types.d.ts +2 -0
- package/lib/components/MobileSkin/MobileSkinInterface.d.ts +2 -2
- package/lib/components/MobileSkin/types.d.ts +9 -8
- package/lib/components/Select/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/DatasetTooltip/types.d.ts +8 -0
- package/lib/components/SequentialConnectingBranch/types.d.ts +17 -4
- package/lib/components/TableTree/types.d.ts +4 -3
- package/lib/index.d.ts +34 -7
- package/lib/index.esm.js +299 -106
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +299 -106
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/getSequentialPayload/types.d.ts +6 -0
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +3 -0
- package/src/assets/Themes/DarkTheme.scss +3 -0
- package/src/assets/styles/_colors.scss +5 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +149 -30
- package/src/components/ConditionalDropdown/types.ts +27 -25
- package/src/components/Drawer/Drawer.scss +1 -1
- package/src/components/Drawer/Drawer.tsx +1 -1
- package/src/components/Editor/VariableDropdown.tsx +1 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +39 -8
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +0 -4
- package/src/components/Input/Input.tsx +4 -0
- package/src/components/Input/types.ts +5 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -0
- package/src/components/MobileSkin/MobileSkin.scss +0 -8
- package/src/components/MobileSkin/MobileSkin.stories.tsx +10 -9
- package/src/components/MobileSkin/MobileSkin.tsx +16 -31
- package/src/components/MobileSkin/MobileSkinInterface.ts +2 -2
- package/src/components/MobileSkin/types.ts +9 -8
- package/src/components/RadioButton/RadioButton.tsx +5 -1
- package/src/components/Select/Select.stories.tsx +2 -0
- package/src/components/Select/Select.tsx +4 -1
- package/src/components/Select/components/Dropdown.tsx +1 -2
- package/src/components/Select/types.ts +6 -1
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +35 -28
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +58 -14
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -20
- package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx +41 -0
- package/src/components/SequentialConnectingBranch/components/DatasetTooltip/types.ts +9 -0
- package/src/components/SequentialConnectingBranch/types.ts +19 -5
- package/src/components/TableTree/Components/TableBody.tsx +2 -2
- package/src/components/TableTree/Components/TableCell.tsx +18 -5
- package/src/components/TableTree/Components/TableHead.tsx +5 -3
- package/src/components/TableTree/TableTree.scss +88 -51
- package/src/components/TableTree/TableTree.stories.tsx +8 -7
- package/src/components/TableTree/TableTree.tsx +12 -11
- package/src/components/TableTree/data.ts +1 -1
- package/src/components/TableTree/types.ts +4 -3
- package/src/components/Tabs/Tabs.scss +1 -1
- package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx +1 -0
- package/src/utils/getSequentialPayload/getSequentialPayload.ts +1 -1
- package/src/utils/getSequentialPayload/types.ts +6 -0
- 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,
|
@@ -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:
|
60
|
+
children: <p>No Data Found</p>,
|
60
61
|
};
|
61
62
|
|
62
|
-
export const
|
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
|
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
|
77
|
+
export const PortraitViewWithNavbar: Story = {
|
79
78
|
args: {
|
80
79
|
...defaultArgs,
|
81
80
|
orientation: 'portrait',
|
82
|
-
|
81
|
+
UtilityBar: true,
|
82
|
+
navBarIcons: navBarIcons,
|
83
83
|
},
|
84
84
|
};
|
85
85
|
|
86
|
-
export const
|
86
|
+
export const LandscapeViewWithNavbar: Story = {
|
87
87
|
args: {
|
88
88
|
...defaultArgs,
|
89
89
|
orientation: 'landscape',
|
90
|
-
|
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
|
-
|
10
|
-
navBarIcons
|
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:
|
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
|
-
*
|
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
|
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 &&
|
36
|
+
{showTooltip && (
|
37
|
+
<Tooltip title={tooltipTitle} placement="right">
|
38
|
+
{tooltipChildren}
|
39
|
+
</Tooltip>
|
40
|
+
)}
|
37
41
|
</div>
|
38
42
|
);
|
39
43
|
};
|
@@ -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
|
-
<
|
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
|
-
|
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
|
20
|
-
|
21
|
-
|
22
|
-
|
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: '
|
30
|
-
value:
|
31
|
+
label: 'ffe-Ganesh',
|
32
|
+
value: {
|
33
|
+
status: 'running',
|
34
|
+
},
|
35
|
+
name: 'ffe-Ganesh',
|
31
36
|
},
|
32
37
|
{
|
33
|
-
label: '
|
34
|
-
value:
|
38
|
+
label: 'ffe-Mahesh',
|
39
|
+
value: {
|
40
|
+
status: 'running',
|
41
|
+
},
|
42
|
+
name: 'ffe-Mahesh',
|
35
43
|
},
|
36
44
|
];
|
37
|
-
|
38
|
-
const
|
45
|
+
|
46
|
+
const onMachineHandleSelect = (option: Option) => {
|
47
|
+
setMachineSelect(option);
|
48
|
+
};
|
49
|
+
|
50
|
+
const onAddMachine = () => {};
|
51
|
+
|
39
52
|
return (
|
40
53
|
<>
|
41
54
|
<SequentialConnectingBranch
|
42
|
-
|
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
|
-
|
59
|
-
|
60
|
-
|
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 {
|
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 =
|
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
|
-
|
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
|
-
|
125
|
-
color={getMachineStatusColor(selectedMachine.values?.status)}
|
154
|
+
color={getMachineStatusColor(selectedMachine.value?.status)}
|
126
155
|
className="ff-scope-text"
|
127
156
|
>
|
128
|
-
{selectedMachine.
|
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
|
-
<
|
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
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
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
|
-
|
167
|
-
? machineInstance.
|
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={
|
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}-${
|
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}-${
|
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
|
-
<
|
234
|
-
|
235
|
-
|
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
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
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>
|
package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx
ADDED
@@ -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;
|