pixel-react 1.7.8 → 1.7.9
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/Button/Button.d.ts +2 -2
- package/lib/components/Button/types.d.ts +17 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
- package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -0
- package/lib/components/ChooseFile/ChooseFile.d.ts +3 -0
- package/lib/components/ChooseFile/types.d.ts +68 -0
- package/lib/components/ConnectingBranch/ConnectingBranch.d.ts +2 -1
- package/lib/components/ConnectingBranch/data.d.ts +19 -33
- package/lib/components/ConnectingBranch/types.d.ts +10 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +7 -1
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
- package/lib/components/LabelEditTextField/types.d.ts +2 -0
- package/lib/components/MachineInputField/MachineInputField.d.ts +4 -1
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
- package/lib/components/Select/Select.stories.d.ts +0 -1
- package/lib/components/Select/types.d.ts +1 -1
- package/lib/components/StatusCard/types.d.ts +2 -0
- package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
- package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
- package/lib/components/TableTree/data.d.ts +74 -0
- package/lib/components/TableTree/types.d.ts +4 -0
- package/lib/components/TextArea/Textarea.d.ts +1 -1
- package/lib/components/TextArea/Types.d.ts +1 -0
- package/lib/index.d.ts +174 -63
- package/lib/index.esm.js +474 -286
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +474 -285
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/validateFile/validateFile.d.ts +2 -0
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +1 -0
- package/src/assets/Themes/BlueTheme.scss +44 -44
- package/src/assets/Themes/DarkTheme.scss +1 -0
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/failed_status_icon.svg +1 -1
- package/src/assets/icons/flaky_status_icon.svg +1 -1
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/settings.svg +3 -0
- package/src/assets/icons/skipped_status_icon.svg +1 -1
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/warning_status_icon.svg +1 -1
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/Button/Button.scss +12 -0
- package/src/components/Button/Button.tsx +29 -11
- package/src/components/Button/types.ts +21 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +83 -30
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +3 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +39 -16
- package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -1
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +2 -1
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +18 -4
- package/src/components/Charts/MultiRadialChart/types.ts +4 -1
- package/src/components/ChooseFile/ChooseFile.stories.tsx +190 -0
- package/src/components/ChooseFile/ChooseFile.tsx +46 -0
- package/src/components/ChooseFile/types.ts +78 -0
- package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +94 -79
- package/src/components/ConnectingBranch/ConnectingBranch.scss +183 -195
- package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +33 -1
- package/src/components/ConnectingBranch/ConnectingBranch.tsx +121 -107
- package/src/components/ConnectingBranch/{data.ts → data.tsx} +106 -17
- package/src/components/ConnectingBranch/types.ts +21 -0
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +1 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +13 -8
- package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +6 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +30 -11
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +65 -19
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +14 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +16 -0
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +6 -5
- package/src/components/Icon/iconList.ts +2 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -1
- package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +8 -3
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +28 -11
- package/src/components/LabelEditTextField/types.ts +2 -0
- package/src/components/MachineInputField/MachineInputField.tsx +67 -70
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +1 -1
- package/src/components/Select/Select.tsx +4 -4
- package/src/components/Select/types.ts +1 -1
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +1 -0
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +2 -8
- package/src/components/StatusCard/StatusCard.scss +2 -1
- package/src/components/StatusCard/StatusCard.stories.tsx +59 -1
- package/src/components/StatusCard/StatusCard.tsx +10 -2
- package/src/components/StatusCard/types.ts +2 -0
- package/src/components/TableTree/Components/TableBody.tsx +19 -15
- package/src/components/TableTree/Components/TableCell.tsx +47 -31
- package/src/components/TableTree/Components/TableRow.tsx +4 -0
- package/src/components/TableTree/TableTree.scss +122 -109
- package/src/components/TableTree/data.ts +16 -1
- package/src/components/TableTree/types.ts +4 -0
- package/src/components/TextArea/Textarea.tsx +2 -0
- package/src/components/TextArea/Types.ts +3 -0
- package/src/index.ts +3 -0
- package/src/utils/validateFile/validateFile.stories.tsx +49 -0
- package/src/utils/validateFile/validateFile.ts +39 -0
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
- package/lib/components/AddVariables/AddVariables.d.ts +0 -5
- package/lib/components/AddVariables/index.d.ts +0 -1
- package/lib/components/AddVariables/types.d.ts +0 -35
- package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss +0 -51
- package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx +0 -107
- package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts +0 -5
- package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss +0 -31
- package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx +0 -85
- package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts +0 -4
- /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -30,6 +30,8 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
30
30
|
labelHeading,
|
31
31
|
legendType = 'numberLegend',
|
32
32
|
isLegendDetails = true,
|
33
|
+
labelFontSize = 12,
|
34
|
+
subLabelFontSize = 8,
|
33
35
|
}) => {
|
34
36
|
const [tooltip, setTooltip] = useState<{
|
35
37
|
visible: boolean;
|
@@ -53,7 +55,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
53
55
|
const svgSize = 2 * (maxRadius + lineWidth);
|
54
56
|
const reversedBarValues = [...barValues].reverse();
|
55
57
|
|
56
|
-
const labelLines = labelHeading.split(' ');
|
58
|
+
const labelLines = labelHeading.trim().split(' ');
|
57
59
|
|
58
60
|
const renderLegend = (legendData: ChartItem[], legendType: LegendType) => {
|
59
61
|
switch (legendType) {
|
@@ -85,7 +87,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
85
87
|
case 'pillLegend':
|
86
88
|
return (
|
87
89
|
<div className={`ff-legend-container ff-pill-legend`}>
|
88
|
-
{legendData.map((item, index) => (
|
90
|
+
{legendData.reverse().map((item, index) => (
|
89
91
|
<div className="ff-legend-item" key={index}>
|
90
92
|
<span
|
91
93
|
className="ff-legend-capsule"
|
@@ -178,6 +180,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
178
180
|
0,
|
179
181
|
2 * Math.PI
|
180
182
|
);
|
183
|
+
|
181
184
|
const foregroundArcPath = calculateArc(
|
182
185
|
0,
|
183
186
|
0,
|
@@ -238,10 +241,20 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
238
241
|
const [firstWord, ...restWords] = line.split(' ');
|
239
242
|
return (
|
240
243
|
<tspan key={index}>
|
241
|
-
<tspan
|
244
|
+
<tspan
|
245
|
+
x="0"
|
246
|
+
dy="0"
|
247
|
+
style={{ fontSize: `${labelFontSize}px` }}
|
248
|
+
className="ff-center-first-text"
|
249
|
+
>
|
242
250
|
{firstWord}
|
243
251
|
</tspan>
|
244
|
-
<tspan
|
252
|
+
<tspan
|
253
|
+
x="0"
|
254
|
+
dy={18}
|
255
|
+
style={{ fontSize: `${subLabelFontSize}px` }}
|
256
|
+
className="ff-center-text"
|
257
|
+
>
|
245
258
|
{restWords.join(' ')}
|
246
259
|
</tspan>
|
247
260
|
</tspan>
|
@@ -253,6 +266,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
|
|
253
266
|
x="0"
|
254
267
|
dy={index === 0 ? 0 : 18}
|
255
268
|
className="ff-center-text"
|
269
|
+
style={{ fontSize: `${subLabelFontSize}px` }}
|
256
270
|
>
|
257
271
|
{line}
|
258
272
|
</tspan>
|
@@ -15,7 +15,10 @@ export interface MultiRadialChartProps {
|
|
15
15
|
lineCap: 'square' | 'round';
|
16
16
|
barValues: BarValue[];
|
17
17
|
legendType?: LegendType;
|
18
|
-
isLegendDetails?: boolean;
|
18
|
+
isLegendDetails?: boolean;
|
19
|
+
labelFontSize?: number,
|
20
|
+
subLabelFontSize?: number
|
21
|
+
gapAngle?:number;
|
19
22
|
}
|
20
23
|
export interface ChartItem extends BarValue{
|
21
24
|
label: string;
|
@@ -0,0 +1,190 @@
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import React, { useEffect, useState } from 'react';
|
3
|
+
import ChooseFile from './ChooseFile';
|
4
|
+
import Drawer from '../Drawer/Drawer';
|
5
|
+
import FileDropzone from '../FileDropzone/FileDropzone';
|
6
|
+
import { RadioOption } from '../FileDropzone/types';
|
7
|
+
import { DynamicObj } from '../CreateVariable/types';
|
8
|
+
import Button from '../Button';
|
9
|
+
import ConditionalDropdown from '../ConditionalDropdown/ConditionalDropdown';
|
10
|
+
|
11
|
+
const meta: Meta<typeof ChooseFile> = {
|
12
|
+
title: 'Components/ChooseFile',
|
13
|
+
component: ChooseFile,
|
14
|
+
parameters: {
|
15
|
+
layout: 'centered',
|
16
|
+
},
|
17
|
+
tags: ['autodocs'],
|
18
|
+
};
|
19
|
+
|
20
|
+
type Story = StoryObj<typeof ChooseFile>;
|
21
|
+
|
22
|
+
const defaultArgs = {
|
23
|
+
disabled: false,
|
24
|
+
};
|
25
|
+
|
26
|
+
export const ChooseFileDisplay: Story = {
|
27
|
+
render: () => {
|
28
|
+
const [isOpen, setIsOpen] = useState(false);
|
29
|
+
const [showModal, setShowModal] = useState(false);
|
30
|
+
const [selectedRadioOption, setSelectedRadioOption] =
|
31
|
+
useState<RadioOption>();
|
32
|
+
const [selectedFile, setSelectedFile] = useState<File | DynamicObj | null>(
|
33
|
+
null
|
34
|
+
);
|
35
|
+
const [testDataSelectedFile, setTestDataSelectedFile] = useState<
|
36
|
+
DynamicObj | File | null
|
37
|
+
>(null);
|
38
|
+
|
39
|
+
const testData = [
|
40
|
+
{
|
41
|
+
_id: '1',
|
42
|
+
name: 'File1.txt',
|
43
|
+
actualPath: '/documents/File1.txt',
|
44
|
+
searchKey: 'file1',
|
45
|
+
parentId: 'root',
|
46
|
+
},
|
47
|
+
{
|
48
|
+
_id: '2',
|
49
|
+
name: 'File2.doc',
|
50
|
+
actualPath: '/documents/File2.doc',
|
51
|
+
searchKey: 'file2',
|
52
|
+
parentId: 'root',
|
53
|
+
},
|
54
|
+
{
|
55
|
+
_id: '3',
|
56
|
+
name: 'Image1.png',
|
57
|
+
actualPath: '/images/Image1.png',
|
58
|
+
searchKey: 'image1',
|
59
|
+
parentId: 'folder1',
|
60
|
+
},
|
61
|
+
{
|
62
|
+
_id: '4',
|
63
|
+
name: 'Presentation.ppt',
|
64
|
+
actualPath: '/presentations/Presentation.ppt',
|
65
|
+
searchKey: 'presentation',
|
66
|
+
parentId: 'folder2',
|
67
|
+
},
|
68
|
+
];
|
69
|
+
|
70
|
+
const radioOptions: RadioOption[] = [
|
71
|
+
{ value: 'Test Data', label: 'Test Data' },
|
72
|
+
{ value: 'Local File', label: 'Local File' },
|
73
|
+
];
|
74
|
+
|
75
|
+
const handleOptionChange = (option: RadioOption) => {
|
76
|
+
setSelectedRadioOption(option);
|
77
|
+
setShowModal(option.value === 'Test Data');
|
78
|
+
};
|
79
|
+
|
80
|
+
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
81
|
+
const file = event.target.files?.[0];
|
82
|
+
setSelectedFile(file || null);
|
83
|
+
};
|
84
|
+
|
85
|
+
const handleRemoveFile = () => setSelectedFile(null);
|
86
|
+
|
87
|
+
const handleSaveButton = () => {
|
88
|
+
setSelectedFile(testDataSelectedFile);
|
89
|
+
setShowModal(false);
|
90
|
+
};
|
91
|
+
|
92
|
+
const handleCloseIcon = () => {
|
93
|
+
setSelectedFile(null);
|
94
|
+
setIsOpen(false);
|
95
|
+
};
|
96
|
+
|
97
|
+
const handleSaveChooseFile = () => {
|
98
|
+
setIsOpen(false);
|
99
|
+
|
100
|
+
};
|
101
|
+
|
102
|
+
const renderFooterButtons = (onSave: () => void, onCancel: () => void) => (
|
103
|
+
<div className="footer_basic_button">
|
104
|
+
<Button
|
105
|
+
type="button"
|
106
|
+
variant="secondary"
|
107
|
+
size="small"
|
108
|
+
onClick={onCancel}
|
109
|
+
label="Cancel"
|
110
|
+
/>
|
111
|
+
<Button
|
112
|
+
type="button"
|
113
|
+
variant="primary"
|
114
|
+
size="small"
|
115
|
+
onClick={onSave}
|
116
|
+
label="Save"
|
117
|
+
/>
|
118
|
+
</div>
|
119
|
+
);
|
120
|
+
|
121
|
+
useEffect(() => {
|
122
|
+
setSelectedFile(testDataSelectedFile);
|
123
|
+
}, [testDataSelectedFile]);
|
124
|
+
|
125
|
+
return (
|
126
|
+
<>
|
127
|
+
<ChooseFile
|
128
|
+
label={selectedFile?.name || 'Choose File'}
|
129
|
+
variant="secondary"
|
130
|
+
buttonWidth="308px"
|
131
|
+
isChooseFile
|
132
|
+
iconName={selectedFile?.name ? 'close' : 'attachment_icon'}
|
133
|
+
onClick={() => setIsOpen(true)}
|
134
|
+
selectedFile={selectedFile}
|
135
|
+
handleCloseIcon={handleCloseIcon}
|
136
|
+
/>
|
137
|
+
|
138
|
+
<Drawer
|
139
|
+
isOpen={isOpen}
|
140
|
+
onClose={() => setIsOpen(false)}
|
141
|
+
isFooterRequired={false}
|
142
|
+
_isExpanded={false}
|
143
|
+
size="medium"
|
144
|
+
>
|
145
|
+
<FileDropzone
|
146
|
+
{...defaultArgs}
|
147
|
+
accept={[
|
148
|
+
'image/png',
|
149
|
+
'image/jpeg',
|
150
|
+
'application/x-zip-compressed',
|
151
|
+
'application/zip',
|
152
|
+
]}
|
153
|
+
validateMIMEType
|
154
|
+
isWebServiceFileDropZone
|
155
|
+
selectedRadioOption={selectedRadioOption}
|
156
|
+
radioOptions={radioOptions}
|
157
|
+
handleOptionChange={handleOptionChange}
|
158
|
+
setSelectedFile={setSelectedFile}
|
159
|
+
selectedFile={selectedFile}
|
160
|
+
handleFileChange={handleFileChange}
|
161
|
+
handleRemoveFile={handleRemoveFile}
|
162
|
+
setShowDrawer={setShowModal}
|
163
|
+
/>
|
164
|
+
{selectedRadioOption?.value === 'Test Data' && (
|
165
|
+
<Drawer
|
166
|
+
isOpen={showModal}
|
167
|
+
onClose={() => setShowModal(false)}
|
168
|
+
isFooterRequired={false}
|
169
|
+
_isExpanded={false}
|
170
|
+
size="small"
|
171
|
+
>
|
172
|
+
<ConditionalDropdown
|
173
|
+
label="Select Path Using #"
|
174
|
+
placeholder="Enter # to search files"
|
175
|
+
isHash
|
176
|
+
dataFiles={testData}
|
177
|
+
dropdownWidth="auto"
|
178
|
+
setHashInputValue={setTestDataSelectedFile}
|
179
|
+
/>
|
180
|
+
{renderFooterButtons(handleSaveButton, () => setShowModal(false))}
|
181
|
+
</Drawer>
|
182
|
+
)}
|
183
|
+
{renderFooterButtons(handleSaveChooseFile, () => setIsOpen(false))}
|
184
|
+
</Drawer>
|
185
|
+
</>
|
186
|
+
);
|
187
|
+
},
|
188
|
+
};
|
189
|
+
|
190
|
+
export default meta;
|
@@ -0,0 +1,46 @@
|
|
1
|
+
import { memo, type FC } from 'react'
|
2
|
+
import { ChooseFileProps } from './types'
|
3
|
+
import Button from '../Button'
|
4
|
+
|
5
|
+
const areEqual = (prevProps: ChooseFileProps, nextProps: ChooseFileProps) =>
|
6
|
+
prevProps.selectedFile?.name === nextProps.selectedFile?.name;
|
7
|
+
|
8
|
+
const ChooseFile:FC<ChooseFileProps> = ({
|
9
|
+
variant = 'primary',
|
10
|
+
size = 'small',
|
11
|
+
onClick,
|
12
|
+
label='Choose File',
|
13
|
+
disabled = false,
|
14
|
+
type = 'button',
|
15
|
+
className = '',
|
16
|
+
style = {},
|
17
|
+
iconName,
|
18
|
+
isChooseFile=false,
|
19
|
+
buttonWidth='auto',
|
20
|
+
selectedFile = {},
|
21
|
+
handleCloseIcon,
|
22
|
+
}) => {
|
23
|
+
|
24
|
+
return (
|
25
|
+
<div>
|
26
|
+
<Button
|
27
|
+
variant={variant}
|
28
|
+
label={label}
|
29
|
+
type={type}
|
30
|
+
onClick={onClick}
|
31
|
+
buttonWidth={buttonWidth}
|
32
|
+
isChooseFile={isChooseFile}
|
33
|
+
size={size}
|
34
|
+
disabled={disabled}
|
35
|
+
className={className}
|
36
|
+
iconName={iconName}
|
37
|
+
style={style}
|
38
|
+
iconPosition='right'
|
39
|
+
selectedFile={selectedFile}
|
40
|
+
handleCloseIcon={handleCloseIcon}
|
41
|
+
/>
|
42
|
+
</div>
|
43
|
+
)
|
44
|
+
}
|
45
|
+
|
46
|
+
export default memo(ChooseFile, areEqual);
|
@@ -0,0 +1,78 @@
|
|
1
|
+
import { DynamicObj } from '../CreateVariable/types';
|
2
|
+
|
3
|
+
export interface ChooseFileProps {
|
4
|
+
/**
|
5
|
+
* Variant of the button
|
6
|
+
*/
|
7
|
+
variant: 'primary' | 'secondary' | 'tertiary' | 'delete' | 'warning';
|
8
|
+
/**
|
9
|
+
* What background color to use
|
10
|
+
*/
|
11
|
+
backgroundColor?: string;
|
12
|
+
|
13
|
+
/**
|
14
|
+
* Width in string format can be sent for needed width
|
15
|
+
*/
|
16
|
+
buttonWidth?: string;
|
17
|
+
|
18
|
+
/**
|
19
|
+
* How large should the button be?
|
20
|
+
*/
|
21
|
+
size?: 'small' | 'medium' | 'large';
|
22
|
+
/**
|
23
|
+
* Button contents
|
24
|
+
*/
|
25
|
+
label?: string;
|
26
|
+
/**
|
27
|
+
* Type of the button
|
28
|
+
*/
|
29
|
+
|
30
|
+
type?: 'button' | 'submit';
|
31
|
+
|
32
|
+
disabled?: boolean;
|
33
|
+
/**
|
34
|
+
* Optional click handler
|
35
|
+
*/
|
36
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
37
|
+
|
38
|
+
/**
|
39
|
+
* Button id
|
40
|
+
*/
|
41
|
+
id?: string;
|
42
|
+
/**
|
43
|
+
* onSubmit function handler
|
44
|
+
*/
|
45
|
+
onSubmit?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
46
|
+
/**
|
47
|
+
* react ref for the button
|
48
|
+
*/
|
49
|
+
ref?: any;
|
50
|
+
/**
|
51
|
+
* Classname for the button
|
52
|
+
*/
|
53
|
+
className?: string;
|
54
|
+
/**
|
55
|
+
* Additional styles for the button
|
56
|
+
*/
|
57
|
+
style?: React.CSSProperties;
|
58
|
+
|
59
|
+
/**
|
60
|
+
* Give icon name availble in storybook that to be on left side of button
|
61
|
+
*/
|
62
|
+
iconName?: string;
|
63
|
+
|
64
|
+
/**
|
65
|
+
* isChooseFile is a Boolean prop
|
66
|
+
*/
|
67
|
+
isChooseFile?: boolean;
|
68
|
+
|
69
|
+
/**
|
70
|
+
* selectedfile object will be send.
|
71
|
+
*/
|
72
|
+
selectedFile?: File | DynamicObj | null;
|
73
|
+
|
74
|
+
/**
|
75
|
+
* handleCloseIcon function will set to the initial state .
|
76
|
+
*/
|
77
|
+
handleCloseIcon?: () => void;
|
78
|
+
}
|
@@ -1,8 +1,9 @@
|
|
1
|
-
import Button from '../../Button';
|
2
1
|
import Typography from '../../Typography';
|
3
2
|
import { indexType, MachineData, MachineInstancesProps } from '../types';
|
4
3
|
|
5
4
|
const MachineInstances: React.FC<MachineInstancesProps> = ({
|
5
|
+
getChildNodeComponent,
|
6
|
+
parentNode,
|
6
7
|
data,
|
7
8
|
verticalLineHeight,
|
8
9
|
datasetHeight,
|
@@ -20,106 +21,120 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
|
|
20
21
|
<div className="ff-right-icon"></div>
|
21
22
|
</div>
|
22
23
|
</div>
|
23
|
-
<div className="ff-machine-instance">
|
24
|
-
|
25
|
-
className="ff-add-browser-device"
|
26
|
-
variant="secondary"
|
27
|
-
label="Add Machine"
|
28
|
-
/>
|
24
|
+
<div className="ff-machine-instance ff-machine-env-button">
|
25
|
+
{getChildNodeComponent(true, data, parentNode)}
|
29
26
|
</div>
|
30
27
|
</>
|
31
28
|
) : (
|
32
|
-
data?.machineInstances?.map(
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
className="ff-machine-instance-row"
|
37
|
-
key={instance.clientId || idx}
|
38
|
-
>
|
29
|
+
data?.machineInstances?.map(
|
30
|
+
(instance: MachineData, machineInstanceIndex: indexType) => {
|
31
|
+
const isFirstLine = machineInstanceIndex === 0;
|
32
|
+
return (
|
39
33
|
<div
|
40
|
-
className=
|
41
|
-
|
42
|
-
}`}
|
34
|
+
className="ff-machine-instance-row"
|
35
|
+
key={instance.clientId || machineInstanceIndex}
|
43
36
|
>
|
44
|
-
<div
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
className="ff-
|
52
|
-
|
53
|
-
></div>
|
54
|
-
)}
|
55
|
-
</div>
|
37
|
+
<div
|
38
|
+
className={`ff-selectedMachines-connecting-line ${
|
39
|
+
!isFirstLine ? 'ff-second-line' : ''
|
40
|
+
}`}
|
41
|
+
>
|
42
|
+
<div className="ff-line">
|
43
|
+
<div className="ff-left-icon"></div>
|
44
|
+
<div className="ff-right-icon"></div>
|
45
|
+
</div>
|
56
46
|
|
57
|
-
|
58
|
-
{instance.runLevelExecutionDataSets.map(
|
59
|
-
(dataSet: MachineData, index: indexType) => (
|
47
|
+
{isFirstLine && (
|
60
48
|
<div
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
49
|
+
className="ff-vertical-line"
|
50
|
+
style={{ height: `${verticalLineHeight}px` }}
|
51
|
+
></div>
|
52
|
+
)}
|
53
|
+
</div>
|
54
|
+
|
55
|
+
<div className="ff-machine-instance">
|
56
|
+
{instance.runLevelExecutionDataSets.map(
|
57
|
+
(
|
58
|
+
dataSet: MachineData,
|
59
|
+
runLevelExecutionDataIndex: indexType
|
60
|
+
) => (
|
65
61
|
<div
|
66
|
-
|
67
|
-
|
68
|
-
ref={
|
62
|
+
key={runLevelExecutionDataIndex}
|
63
|
+
className="ff-run-level-execution-dataset"
|
64
|
+
ref={
|
65
|
+
runLevelExecutionDataIndex === 0 ? datasetRef : null
|
66
|
+
}
|
69
67
|
>
|
70
68
|
<div
|
71
|
-
className="ff-
|
72
|
-
|
69
|
+
className="ff-execution-item"
|
70
|
+
key={dataSet.executionDataSetId}
|
71
|
+
ref={(element) =>
|
72
|
+
(itemRefs.current[runLevelExecutionDataIndex] =
|
73
|
+
element)
|
74
|
+
}
|
73
75
|
>
|
74
76
|
<div
|
75
|
-
className=
|
76
|
-
style={{
|
77
|
-
height: `${curveHeights[index]}px`,
|
78
|
-
}}
|
77
|
+
className="ff-curved-connector"
|
78
|
+
style={{ top: `${-datasetHeight}px` }}
|
79
79
|
>
|
80
80
|
<div
|
81
|
-
className={`ff-curve
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
81
|
+
className={`ff-curve ff-connector-${runLevelExecutionDataIndex}`}
|
82
|
+
style={{
|
83
|
+
height: `${curveHeights[runLevelExecutionDataIndex]}px`,
|
84
|
+
}}
|
85
|
+
>
|
86
|
+
<div
|
87
|
+
className={`ff-curve-right-icon ff-curve-right-icon-${runLevelExecutionDataIndex}`}
|
88
|
+
></div>
|
89
|
+
{dataSet?.runScriptCount && (
|
90
|
+
<div className="ff-selectedMachines-connecting-line-text">
|
91
|
+
<Typography fontSize={8} fontWeight="regular">
|
92
|
+
{dataSet.runScriptCount} Script
|
93
|
+
</Typography>
|
94
|
+
</div>
|
95
|
+
)}
|
96
|
+
</div>
|
97
|
+
</div>
|
98
|
+
|
99
|
+
<div className="ff-run-data-box">
|
100
|
+
{getChildNodeComponent(
|
101
|
+
false,
|
102
|
+
instance,
|
103
|
+
machineInstanceIndex,
|
104
|
+
dataSet,
|
105
|
+
runLevelExecutionDataIndex,
|
106
|
+
parentNode
|
89
107
|
)}
|
90
108
|
</div>
|
91
109
|
</div>
|
110
|
+
</div>
|
111
|
+
)
|
112
|
+
)}
|
113
|
+
</div>
|
92
114
|
|
93
|
-
|
94
|
-
|
95
|
-
|
115
|
+
{machineInstanceIndex === data.machineInstances.length - 1 && (
|
116
|
+
<>
|
117
|
+
<div className="ff-selectedMachines-connecting-line ff-second-line">
|
118
|
+
<div className="ff-line">
|
119
|
+
<div className="ff-left-icon"></div>
|
120
|
+
<div className="ff-right-icon"></div>
|
96
121
|
</div>
|
97
122
|
</div>
|
98
|
-
)
|
99
|
-
)}
|
100
|
-
</div>
|
101
123
|
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
124
|
+
<div className="ff-machine-instance ff-machine-env-button">
|
125
|
+
{getChildNodeComponent(
|
126
|
+
true,
|
127
|
+
data,
|
128
|
+
parentNode,
|
129
|
+
machineInstanceIndex + 1
|
130
|
+
)}
|
108
131
|
</div>
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
label="Browser/Devices"
|
116
|
-
/>
|
117
|
-
</div>
|
118
|
-
</>
|
119
|
-
)}
|
120
|
-
</div>
|
121
|
-
);
|
122
|
-
})
|
132
|
+
</>
|
133
|
+
)}
|
134
|
+
</div>
|
135
|
+
);
|
136
|
+
}
|
137
|
+
)
|
123
138
|
)}
|
124
139
|
</>
|
125
140
|
);
|