pixel-react 1.7.8 → 1.8.0

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 (99) hide show
  1. package/lib/components/AllProjectsDropdown/types.d.ts +2 -0
  2. package/lib/components/Button/Button.d.ts +2 -2
  3. package/lib/components/Button/types.d.ts +17 -0
  4. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  5. package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -0
  6. package/lib/components/ChooseFile/ChooseFile.d.ts +3 -0
  7. package/lib/components/ChooseFile/types.d.ts +68 -0
  8. package/lib/components/ConnectingBranch/ConnectingBranch.d.ts +2 -1
  9. package/lib/components/ConnectingBranch/data.d.ts +19 -33
  10. package/lib/components/ConnectingBranch/types.d.ts +10 -0
  11. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +7 -1
  12. package/lib/components/LabelEditTextField/types.d.ts +2 -0
  13. package/lib/components/MachineInputField/MachineInputField.d.ts +4 -1
  14. package/lib/components/Select/types.d.ts +1 -1
  15. package/lib/components/StatusCard/types.d.ts +2 -0
  16. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  17. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  18. package/lib/components/TableTree/data.d.ts +74 -0
  19. package/lib/components/TableTree/types.d.ts +4 -0
  20. package/lib/components/TextArea/Textarea.d.ts +1 -1
  21. package/lib/components/TextArea/Types.d.ts +1 -0
  22. package/lib/index.d.ts +176 -63
  23. package/lib/index.esm.js +458 -273
  24. package/lib/index.esm.js.map +1 -1
  25. package/lib/index.js +458 -272
  26. package/lib/index.js.map +1 -1
  27. package/lib/tsconfig.tsbuildinfo +1 -1
  28. package/lib/utils/validateFile/validateFile.d.ts +2 -0
  29. package/package.json +2 -2
  30. package/src/assets/Themes/BaseTheme.scss +1 -0
  31. package/src/assets/Themes/BlueTheme.scss +44 -44
  32. package/src/assets/Themes/DarkTheme.scss +1 -0
  33. package/src/assets/icons/failed_status_icon.svg +1 -1
  34. package/src/assets/icons/flaky_status_icon.svg +1 -1
  35. package/src/assets/icons/settings.svg +3 -0
  36. package/src/assets/icons/skipped_status_icon.svg +1 -1
  37. package/src/assets/icons/warning_status_icon.svg +1 -1
  38. package/src/components/AllProjectsDropdown/types.ts +2 -0
  39. package/src/components/AppHeader/AppHeader.scss +6 -2
  40. package/src/components/Button/Button.scss +12 -0
  41. package/src/components/Button/Button.tsx +29 -11
  42. package/src/components/Button/types.ts +21 -0
  43. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +83 -30
  44. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +3 -0
  45. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +39 -16
  46. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  47. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -1
  48. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +2 -1
  49. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +18 -4
  50. package/src/components/Charts/MultiRadialChart/types.ts +4 -1
  51. package/src/components/ChooseFile/ChooseFile.stories.tsx +190 -0
  52. package/src/components/ChooseFile/ChooseFile.tsx +46 -0
  53. package/src/components/ChooseFile/types.ts +78 -0
  54. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +94 -79
  55. package/src/components/ConnectingBranch/ConnectingBranch.scss +183 -195
  56. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +33 -1
  57. package/src/components/ConnectingBranch/ConnectingBranch.tsx +121 -107
  58. package/src/components/ConnectingBranch/{data.ts → data.tsx} +106 -17
  59. package/src/components/ConnectingBranch/types.ts +21 -0
  60. package/src/components/Excel/ExcelFile/ExcelFile.tsx +1 -1
  61. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +13 -8
  62. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +6 -1
  63. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +30 -11
  64. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +65 -19
  65. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +14 -0
  66. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +16 -0
  67. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +6 -5
  68. package/src/components/Icon/iconList.ts +2 -0
  69. package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -1
  70. package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +8 -3
  71. package/src/components/LabelEditTextField/LabelEditTextField.tsx +28 -11
  72. package/src/components/LabelEditTextField/types.ts +2 -0
  73. package/src/components/MachineInputField/MachineInputField.tsx +67 -70
  74. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +1 -1
  75. package/src/components/Select/Select.tsx +4 -4
  76. package/src/components/Select/types.ts +1 -1
  77. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +1 -0
  78. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +2 -8
  79. package/src/components/StatusCard/StatusCard.scss +2 -1
  80. package/src/components/StatusCard/StatusCard.stories.tsx +59 -1
  81. package/src/components/StatusCard/StatusCard.tsx +10 -2
  82. package/src/components/StatusCard/types.ts +2 -0
  83. package/src/components/TableTree/Components/TableBody.tsx +19 -15
  84. package/src/components/TableTree/Components/TableCell.tsx +47 -31
  85. package/src/components/TableTree/Components/TableRow.tsx +4 -0
  86. package/src/components/TableTree/TableTree.scss +122 -109
  87. package/src/components/TableTree/data.ts +16 -1
  88. package/src/components/TableTree/types.ts +4 -0
  89. package/src/components/TextArea/Textarea.tsx +2 -0
  90. package/src/components/TextArea/Types.ts +3 -0
  91. package/src/index.ts +3 -0
  92. package/src/utils/validateFile/validateFile.stories.tsx +49 -0
  93. package/src/utils/validateFile/validateFile.ts +39 -0
  94. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss +0 -51
  95. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx +0 -107
  96. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts +0 -5
  97. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss +0 -31
  98. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx +0 -85
  99. package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts +0 -4
@@ -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
  );