pixel-react 1.7.7 → 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.
Files changed (173) hide show
  1. package/lib/1fb4472b34e4fe07.css +1 -0
  2. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
  3. package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
  4. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
  5. package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
  6. package/lib/components/Button/Button.d.ts +2 -2
  7. package/lib/components/Button/Button.stories.d.ts +1 -0
  8. package/lib/components/Button/types.d.ts +17 -0
  9. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
  10. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  11. package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -0
  12. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
  13. package/lib/components/ChooseFile/ChooseFile.d.ts +3 -0
  14. package/lib/components/ChooseFile/types.d.ts +68 -0
  15. package/lib/components/ConnectingBranch/ConnectingBranch.d.ts +2 -1
  16. package/lib/components/ConnectingBranch/data.d.ts +19 -33
  17. package/lib/components/ConnectingBranch/types.d.ts +10 -0
  18. package/lib/components/Drawer/Drawer.stories.d.ts +5 -0
  19. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +7 -1
  20. package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +8 -0
  21. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -0
  22. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
  23. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
  24. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
  25. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
  26. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
  27. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
  28. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
  29. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
  30. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
  31. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
  32. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
  33. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
  34. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
  35. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
  36. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
  37. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
  38. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
  39. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
  40. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
  41. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
  42. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
  43. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
  44. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
  45. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
  46. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
  47. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
  48. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
  49. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
  50. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
  51. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
  52. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
  53. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
  54. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
  55. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
  56. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
  57. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
  58. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
  59. package/lib/components/ExcelFile/Types.d.ts +129 -0
  60. package/lib/components/ExcelFile/index.d.ts +1 -0
  61. package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
  62. package/lib/components/Form/Form.stories.d.ts +6 -5
  63. package/lib/components/Icon/Icon.stories.d.ts +1 -0
  64. package/lib/components/IconButton/IconButton.stories.d.ts +1 -0
  65. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
  66. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +11 -0
  67. package/lib/components/LabelEditTextField/types.d.ts +2 -0
  68. package/lib/components/MachineInputField/MachineInputField.d.ts +4 -1
  69. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
  70. package/lib/components/MenuOption/MenuOption.stories.d.ts +1 -0
  71. package/lib/components/MiniModal/MiniModal.stories.d.ts +2 -1
  72. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
  73. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +1 -0
  74. package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
  75. package/lib/components/NLPInput/type.d.ts +70 -0
  76. package/lib/components/Paper/Paper.stories.d.ts +11 -0
  77. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +2 -1
  78. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +1 -1
  79. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +2 -0
  80. package/lib/components/Select/types.d.ts +1 -1
  81. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
  82. package/lib/components/StatusCard/types.d.ts +2 -0
  83. package/lib/components/Table/Table.stories.d.ts +2 -0
  84. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  85. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  86. package/lib/components/TableTree/data.d.ts +74 -0
  87. package/lib/components/TableTree/types.d.ts +4 -0
  88. package/lib/components/TextArea/Textarea.d.ts +1 -1
  89. package/lib/components/TextArea/Types.d.ts +1 -0
  90. package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
  91. package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
  92. package/lib/index.d.ts +174 -63
  93. package/lib/index.esm.js +478 -287
  94. package/lib/index.esm.js.map +1 -1
  95. package/lib/index.js +478 -286
  96. package/lib/index.js.map +1 -1
  97. package/lib/tsconfig.tsbuildinfo +1 -1
  98. package/lib/utils/ffID/ffID.stories.d.ts +1 -1
  99. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
  100. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
  101. package/lib/utils/validateFile/validateFile.d.ts +2 -0
  102. package/package.json +1 -1
  103. package/src/assets/Themes/BaseTheme.scss +1 -0
  104. package/src/assets/Themes/BlueTheme.scss +44 -44
  105. package/src/assets/Themes/DarkTheme.scss +1 -0
  106. package/src/assets/icons/failed_status_icon.svg +1 -1
  107. package/src/assets/icons/flaky_status_icon.svg +1 -1
  108. package/src/assets/icons/settings.svg +3 -0
  109. package/src/assets/icons/skipped_status_icon.svg +1 -1
  110. package/src/assets/icons/warning_status_icon.svg +1 -1
  111. package/src/components/AppHeader/AppHeader.tsx +4 -2
  112. package/src/components/Button/Button.scss +12 -0
  113. package/src/components/Button/Button.tsx +29 -11
  114. package/src/components/Button/types.ts +21 -0
  115. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +83 -30
  116. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +3 -0
  117. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +39 -16
  118. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  119. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -1
  120. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +2 -1
  121. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +18 -4
  122. package/src/components/Charts/MultiRadialChart/types.ts +4 -1
  123. package/src/components/ChooseFile/ChooseFile.stories.tsx +190 -0
  124. package/src/components/ChooseFile/ChooseFile.tsx +46 -0
  125. package/src/components/ChooseFile/types.ts +78 -0
  126. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +94 -79
  127. package/src/components/ConnectingBranch/ConnectingBranch.scss +183 -195
  128. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +33 -1
  129. package/src/components/ConnectingBranch/ConnectingBranch.tsx +121 -107
  130. package/src/components/ConnectingBranch/{data.ts → data.tsx} +106 -17
  131. package/src/components/ConnectingBranch/types.ts +21 -0
  132. package/src/components/Excel/ExcelFile/ExcelFile.tsx +1 -1
  133. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +13 -8
  134. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +6 -1
  135. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +30 -11
  136. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +65 -19
  137. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +14 -0
  138. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +16 -0
  139. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +6 -5
  140. package/src/components/Icon/iconList.ts +2 -0
  141. package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -1
  142. package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +8 -3
  143. package/src/components/LabelEditTextField/LabelEditTextField.tsx +28 -11
  144. package/src/components/LabelEditTextField/types.ts +2 -0
  145. package/src/components/MachineInputField/MachineInputField.tsx +67 -70
  146. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +1 -1
  147. package/src/components/Select/Select.tsx +4 -4
  148. package/src/components/Select/types.ts +1 -1
  149. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +1 -0
  150. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +2 -8
  151. package/src/components/StatusCard/StatusCard.scss +2 -1
  152. package/src/components/StatusCard/StatusCard.stories.tsx +59 -1
  153. package/src/components/StatusCard/StatusCard.tsx +10 -2
  154. package/src/components/StatusCard/types.ts +2 -0
  155. package/src/components/TableTree/Components/TableBody.tsx +19 -15
  156. package/src/components/TableTree/Components/TableCell.tsx +47 -31
  157. package/src/components/TableTree/Components/TableRow.tsx +4 -0
  158. package/src/components/TableTree/TableTree.scss +122 -109
  159. package/src/components/TableTree/data.ts +16 -1
  160. package/src/components/TableTree/types.ts +4 -0
  161. package/src/components/TextArea/Textarea.tsx +2 -0
  162. package/src/components/TextArea/Types.ts +3 -0
  163. package/src/index.ts +3 -0
  164. package/src/utils/validateFile/validateFile.stories.tsx +49 -0
  165. package/src/utils/validateFile/validateFile.ts +39 -0
  166. package/lib/components/ThemeProvider/CustomThemeProvider.d.ts +0 -8
  167. package/lib/hooks/useCustomThemeProvider.d.ts +0 -11
  168. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss +0 -51
  169. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx +0 -107
  170. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts +0 -5
  171. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss +0 -31
  172. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx +0 -85
  173. package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts +0 -4
@@ -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
- <Button
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((instance: MachineData, idx: indexType) => {
33
- const isFirstLine = idx === 0;
34
- return (
35
- <div
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={`ff-selectedMachines-connecting-line ${
41
- !isFirstLine ? 'ff-second-line' : ''
42
- }`}
34
+ className="ff-machine-instance-row"
35
+ key={instance.clientId || machineInstanceIndex}
43
36
  >
44
- <div className="ff-line">
45
- <div className="ff-left-icon"></div>
46
- <div className="ff-right-icon"></div>
47
- </div>
48
-
49
- {isFirstLine && (
50
- <div
51
- className="ff-vertical-line"
52
- style={{ height: `${verticalLineHeight}px` }}
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
- <div className="ff-machine-instance">
58
- {instance.runLevelExecutionDataSets.map(
59
- (dataSet: MachineData, index: indexType) => (
47
+ {isFirstLine && (
60
48
  <div
61
- key={index}
62
- className="ff-run-level-execution-dataset"
63
- ref={index === 0 ? datasetRef : null}
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
- className="ff-execution-item"
67
- key={dataSet.peVariableSetId}
68
- ref={(el) => (itemRefs.current[index] = el)}
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-curved-connector"
72
- style={{ top: `${-datasetHeight + 5}px` }}
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={`ff-curve ff-connector-${index}`}
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-right-icon ff-curve-right-icon-${index}`}
82
- ></div>
83
- {dataSet?.runScriptCount && (
84
- <div className="ff-selectedMachines-connecting-line-text">
85
- <Typography fontSize={8} fontWeight="regular">
86
- {dataSet.runScriptCount} Script
87
- </Typography>
88
- </div>
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
- <div className="ff-run-data-box">
94
- {/* Todo: this is data set container will add the components later */}
95
- </div>
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
- {idx === data.machineInstances.length - 1 && (
103
- <>
104
- <div className="ff-selectedMachines-connecting-line ff-second-line">
105
- <div className="ff-line">
106
- <div className="ff-left-icon"></div>
107
- <div className="ff-right-icon"></div>
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
- </div>
110
-
111
- <div className="ff-machine-instance">
112
- <Button
113
- className="ff-add-browser-device"
114
- variant="secondary"
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
  );