pixel-react 1.9.5 → 1.9.7
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/.yarn/install-state.gz +0 -0
- package/lib/ComponentProps/TreeNodeProps.d.ts +31 -0
- 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/Components/TableBody.d.ts +1 -1
- package/lib/components/TableTree/types.d.ts +5 -32
- package/lib/index.d.ts +46 -75
- package/lib/index.esm.js +292 -98
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +292 -98
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/getSequentialPayload/types.d.ts +6 -0
- package/lib/utils/getTreeDetails/getTreeDetails.d.ts +1 -29
- package/lib/utils/handleTreeNodeSelect/handleTreeNodeSelect.d.ts +1 -30
- package/package.json +1 -1
- package/src/ComponentProps/TreeNodeProps.ts +31 -0
- 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 +22 -20
- package/src/components/TableTree/Components/TableCell.tsx +18 -6
- package/src/components/TableTree/Components/TableHead.tsx +5 -3
- package/src/components/TableTree/Components/TableRow.tsx +0 -3
- package/src/components/TableTree/TableTree.scss +88 -51
- package/src/components/TableTree/TableTree.stories.tsx +8 -7
- package/src/components/TableTree/TableTree.tsx +7 -2
- package/src/components/TableTree/data.ts +1 -1
- package/src/components/TableTree/types.ts +5 -33
- package/src/components/Tabs/Tabs.scss +1 -1
- package/src/index.ts +7 -0
- 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 +1 -29
- package/src/utils/handleTreeNodeSelect/handleTreeNodeSelect.ts +1 -30
@@ -9,6 +9,7 @@ import {
|
|
9
9
|
EntireColumnsSelection,
|
10
10
|
EntireRowsSelection,
|
11
11
|
} from './selection';
|
12
|
+
import { createFormulaParser, Model } from './engine';
|
12
13
|
|
13
14
|
export function applyBoldToCells(
|
14
15
|
currentData: Matrix.Matrix<Types.CellBase<any>>,
|
@@ -557,19 +558,47 @@ export function edit(state: Types.StoreState): Types.StoreState {
|
|
557
558
|
return { ...state, mode: 'edit' };
|
558
559
|
}
|
559
560
|
|
561
|
+
|
562
|
+
const canClearCell = (cell: Types.CellBase | undefined) =>
|
563
|
+
cell && !cell.readOnly;
|
564
|
+
const clearCell = (cell: Types.CellBase | undefined) => {
|
565
|
+
if (!canClearCell(cell)) {
|
566
|
+
return cell;
|
567
|
+
}
|
568
|
+
return Object.assign({}, cell, { value: '', style: cell?.style });
|
569
|
+
};
|
570
|
+
|
560
571
|
export function clear(state: Types.StoreState): Types.StoreState {
|
561
572
|
if (!state.active) {
|
562
573
|
return state;
|
563
574
|
}
|
564
575
|
|
565
|
-
const
|
566
|
-
|
567
|
-
const
|
568
|
-
|
569
|
-
|
570
|
-
|
571
|
-
|
576
|
+
const selectedRange = state.selected.toRange(state.model.data);
|
577
|
+
|
578
|
+
const changes: Types.CommitChanges = [];
|
579
|
+
let newData = state.model.data;
|
580
|
+
|
581
|
+
for (const point of selectedRange || []) {
|
582
|
+
const cell = Matrix.get(point, state.model.data);
|
583
|
+
const clearedCell = clearCell(cell);
|
584
|
+
changes.push({
|
585
|
+
prevCell: cell || null,
|
586
|
+
nextCell: clearedCell || null,
|
587
|
+
});
|
588
|
+
newData = Matrix.set(point, clearedCell, newData);
|
589
|
+
}
|
590
|
+
|
591
|
+
return {
|
592
|
+
...state,
|
593
|
+
model: new Model(createFormulaParser, newData),
|
594
|
+
...commit(changes),
|
572
595
|
};
|
596
|
+
}
|
597
|
+
|
598
|
+
export function clearEditMode(state: Types.StoreState): Types.StoreState {
|
599
|
+
if (!state.active) {
|
600
|
+
return state;
|
601
|
+
}
|
573
602
|
|
574
603
|
const selectedRange = state.selected.toRange(state.model.data);
|
575
604
|
|
@@ -588,6 +617,8 @@ export function clear(state: Types.StoreState): Types.StoreState {
|
|
588
617
|
|
589
618
|
return {
|
590
619
|
...state,
|
620
|
+
mode: 'edit',
|
621
|
+
model: new Model(createFormulaParser, newData),
|
591
622
|
...commit(changes),
|
592
623
|
};
|
593
624
|
}
|
@@ -655,7 +686,7 @@ const keyDownHandlers: KeyDownHandlers = {
|
|
655
686
|
ArrowRight: go(0, +1),
|
656
687
|
Tab: go(0, +1),
|
657
688
|
Enter: edit,
|
658
|
-
Backspace:
|
689
|
+
Backspace: clearEditMode,
|
659
690
|
Delete: clear,
|
660
691
|
Escape: blur,
|
661
692
|
};
|
@@ -29,6 +29,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
29
29
|
transparentBackground = false,
|
30
30
|
size = 'small',
|
31
31
|
isLabelRequired = true,
|
32
|
+
onClick,
|
33
|
+
onKeyUp,
|
32
34
|
...props
|
33
35
|
},
|
34
36
|
ref
|
@@ -101,6 +103,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
101
103
|
autoFocus={autoFocus}
|
102
104
|
min={minValue}
|
103
105
|
max={maxValue}
|
106
|
+
onClick={onClick}
|
107
|
+
onKeyUp={onKeyUp}
|
104
108
|
{...props}
|
105
109
|
/>
|
106
110
|
|
@@ -57,6 +57,11 @@ export interface InputProps {
|
|
57
57
|
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
58
58
|
|
59
59
|
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
60
|
+
|
61
|
+
onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
|
62
|
+
|
63
|
+
onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
64
|
+
|
60
65
|
/**
|
61
66
|
* id to select the input field uniquely
|
62
67
|
*/
|
@@ -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
|
)}
|