pixel-react 1.9.6 → 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.
Files changed (59) hide show
  1. package/lib/components/ConditionalDropdown/types.d.ts +4 -3
  2. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +1 -0
  3. package/lib/components/Input/types.d.ts +2 -0
  4. package/lib/components/MobileSkin/MobileSkinInterface.d.ts +2 -2
  5. package/lib/components/MobileSkin/types.d.ts +9 -8
  6. package/lib/components/Select/types.d.ts +4 -0
  7. package/lib/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.d.ts +4 -0
  8. package/lib/components/SequentialConnectingBranch/components/DatasetTooltip/types.d.ts +8 -0
  9. package/lib/components/SequentialConnectingBranch/types.d.ts +17 -4
  10. package/lib/components/TableTree/types.d.ts +4 -3
  11. package/lib/index.d.ts +34 -7
  12. package/lib/index.esm.js +291 -96
  13. package/lib/index.esm.js.map +1 -1
  14. package/lib/index.js +291 -96
  15. package/lib/index.js.map +1 -1
  16. package/lib/tsconfig.tsbuildinfo +1 -1
  17. package/lib/utils/getSequentialPayload/types.d.ts +6 -0
  18. package/package.json +1 -1
  19. package/src/assets/Themes/BaseTheme.scss +3 -0
  20. package/src/assets/Themes/DarkTheme.scss +3 -0
  21. package/src/assets/styles/_colors.scss +5 -0
  22. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +149 -30
  23. package/src/components/ConditionalDropdown/types.ts +27 -25
  24. package/src/components/Drawer/Drawer.scss +1 -1
  25. package/src/components/Drawer/Drawer.tsx +1 -1
  26. package/src/components/Editor/VariableDropdown.tsx +1 -1
  27. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +39 -8
  28. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +0 -4
  29. package/src/components/Input/Input.tsx +4 -0
  30. package/src/components/Input/types.ts +5 -0
  31. package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -0
  32. package/src/components/MobileSkin/MobileSkin.scss +0 -8
  33. package/src/components/MobileSkin/MobileSkin.stories.tsx +10 -9
  34. package/src/components/MobileSkin/MobileSkin.tsx +16 -31
  35. package/src/components/MobileSkin/MobileSkinInterface.ts +2 -2
  36. package/src/components/MobileSkin/types.ts +9 -8
  37. package/src/components/RadioButton/RadioButton.tsx +5 -1
  38. package/src/components/Select/Select.stories.tsx +2 -0
  39. package/src/components/Select/Select.tsx +4 -1
  40. package/src/components/Select/components/Dropdown.tsx +1 -2
  41. package/src/components/Select/types.ts +6 -1
  42. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +35 -28
  43. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +58 -14
  44. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -20
  45. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx +41 -0
  46. package/src/components/SequentialConnectingBranch/components/DatasetTooltip/types.ts +9 -0
  47. package/src/components/SequentialConnectingBranch/types.ts +19 -5
  48. package/src/components/TableTree/Components/TableBody.tsx +2 -2
  49. package/src/components/TableTree/Components/TableCell.tsx +16 -4
  50. package/src/components/TableTree/Components/TableHead.tsx +5 -3
  51. package/src/components/TableTree/TableTree.scss +88 -51
  52. package/src/components/TableTree/TableTree.stories.tsx +8 -7
  53. package/src/components/TableTree/TableTree.tsx +9 -6
  54. package/src/components/TableTree/data.ts +1 -1
  55. package/src/components/TableTree/types.ts +4 -3
  56. package/src/components/Tabs/Tabs.scss +1 -1
  57. package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx +1 -0
  58. package/src/utils/getSequentialPayload/getSequentialPayload.ts +1 -1
  59. package/src/utils/getSequentialPayload/types.ts +6 -0
@@ -0,0 +1,9 @@
1
+ export interface DataSetTooltipProps {
2
+ datSetToolTip: DataSetToolTip;
3
+ }
4
+
5
+ export interface DataSetToolTip {
6
+ testDataSetName: string;
7
+ globalVariableSetName: string;
8
+ peVariableSetName: string;
9
+ }
@@ -1,32 +1,38 @@
1
1
  import { Option } from '../Select/types';
2
2
 
3
3
  export interface SequentialConnectingBranchProps {
4
- machineInstances?: ExecutionContext[] | {}[];
4
+ machineInstances: ExecutionContext[] | {}[];
5
5
  machineColumnWidth?: number;
6
6
  machineColumnCount?: number;
7
7
  selectedMachine?: Option;
8
8
  machineOptionsList?: Option[];
9
9
  onHandleSelect?: (option: Option) => void;
10
10
  onAddBrowserInstance?: (modalId: string) => void;
11
- onUpdateAddBrowserInstance: (
11
+ onUpdateAddBrowserInstance?: (
12
12
  modalId: string,
13
13
  machineInstance: ExecutionContext
14
14
  ) => void;
15
15
  onDeleteBrowserInstance?: (id: string, runCount: number) => void;
16
16
  onAddRunBrowserInstance?: (machineInstanceId: string) => void;
17
17
  onDeleteMachineInstance?: () => void;
18
- onUpdateDataSetList: (
18
+ onUpdateDataSetList?: (
19
19
  id: string,
20
- dataSetObject: dataSetValues,
20
+ dataSetObject?: dataSetValues,
21
21
  isInstance?: boolean,
22
22
  noOfRuns?: number,
23
23
  machineInstanceId?: string
24
24
  ) => void;
25
- dataSetValues: dataSetValues;
25
+ dataSetValues?: dataSetValues;
26
26
  addInstanceLabel?: string;
27
27
  scriptType?: string;
28
28
  projectType?: string;
29
29
  readOnly?: boolean;
30
+ integrationInstance?: IntegrationInstance
31
+ }
32
+
33
+ export interface IntegrationInstance {
34
+ usename: string,
35
+ accessKey: string
30
36
  }
31
37
 
32
38
  // Type for machine information
@@ -47,6 +53,7 @@ export interface ExecutionContext {
47
53
  machineInstanceId: string;
48
54
  clientId: string;
49
55
  numberOfRuns: number;
56
+ runCount: number;
50
57
  executionEnv?: 'Local'; // Change to specific enum if more environments exist
51
58
  browserName?: 'Local' | 'mac' | 'android' | 'Google Chrome';
52
59
  browserVersion: string;
@@ -55,12 +62,19 @@ export interface ExecutionContext {
55
62
  deviceInfo: DeviceInfo[];
56
63
  headless: boolean;
57
64
  peVariableSetId: string;
65
+ testDataSetName: string;
66
+ globalVariableSetName: string;
67
+ peVariableSetName: string;
58
68
  globalVariableSetId: string;
59
69
  testDataSetId: string;
70
+ integrationInstance: IntegrationInstance;
60
71
  }
61
72
 
62
73
  export interface dataSetValues {
63
74
  peVariableSetId: string;
64
75
  globalVariableSetId: string;
65
76
  testDataSetId: string;
77
+ testDataSetName: string;
78
+ globalVariableSetName: string;
79
+ peVariableSetName: string;
66
80
  }
@@ -16,7 +16,7 @@ const TableBody = React.memo(
16
16
  checkEmpty(flattenedTreeData) ? null : (
17
17
  <tbody className="ff-table-tree-body">
18
18
  <tr id="ff-table-tree-first-node" />
19
- {flattenedTreeData?.map((node) => {
19
+ {flattenedTreeData?.map((node, index) => {
20
20
  return (
21
21
  <TableRow
22
22
  key={node.searchKey}
@@ -25,7 +25,7 @@ const TableBody = React.memo(
25
25
  selected={selected}
26
26
  select={select}
27
27
  onRowClick={onRowClick}
28
- onToggleExpand={onToggleExpand}
28
+ onToggleExpand={(node) => onToggleExpand(node, index)}
29
29
  onCheckBoxChange={onCheckBoxChange}
30
30
  />
31
31
  );
@@ -44,7 +44,7 @@ const TableCell = React.memo(
44
44
  onCheckBoxChange,
45
45
  onToggleExpand,
46
46
  }: TableCellProps) => (
47
- <td>
47
+ <td className={`${col.isTree && node.folder ? 'folder' : ''}`}>
48
48
  {col.isTree &&
49
49
  renderSpaces(node.hierarchy + 1, node.parentSiblings, node.last)}
50
50
  <div className="tree-title-container">
@@ -55,10 +55,20 @@ const TableCell = React.memo(
55
55
  } ${node.container ? '' : 'no-folder'}`}
56
56
  onClick={() => onToggleExpand(node)}
57
57
  >
58
- {node.container && node?.totalResourceCount > 0 && <Arrow />}
58
+ {node.container &&
59
+ node?.resourceCount + node?.subContainerCount > 0 && (
60
+ <span onClick={() => onToggleExpand(node)}>
61
+ {' '}
62
+ <Arrow />
63
+ </span>
64
+ )}
59
65
  </span>
60
66
  )}
61
- <span className="tree-table-td-content">
67
+ <span
68
+ className={`tree-table-td-content ${
69
+ col.isTree && node.folder ? 'folder' : ''
70
+ }`}
71
+ >
62
72
  {col.isTree && select === 'checkbox' && (
63
73
  <Checkbox
64
74
  checked={selected.includes(node.id)}
@@ -73,7 +83,9 @@ const TableCell = React.memo(
73
83
  onChange={(e) => onCheckBoxChange(e, node)}
74
84
  />
75
85
  )}
76
- {prepareData(node, col)}
86
+ <span className="tree-table-td-content-text">
87
+ {prepareData(node, col)}
88
+ </span>
77
89
  </span>
78
90
  </div>
79
91
  {col.actions && (
@@ -10,8 +10,10 @@ const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
10
10
  return (
11
11
  <thead>
12
12
  <tr>
13
- {columnsData.map(({ name }) => (
14
- <th key={name}>{name}</th>
13
+ {columnsData.map(({ name, width }) => (
14
+ <th key={name} style={{ width: width }}>
15
+ {name}
16
+ </th>
15
17
  ))}
16
18
  </tr>
17
19
  {hasDefaultValues && (
@@ -19,7 +21,7 @@ const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
19
21
  {columnsData.map(({ defaultValue, defaultActions }, index) => (
20
22
  <td key={index}>
21
23
  {defaultValue && (
22
- <span className="">
24
+ <span className="tree-table-default-content">
23
25
  {defaultValue}
24
26
  {defaultActions && (
25
27
  <div className="table-tree-row-action">
@@ -99,107 +99,144 @@
99
99
 
100
100
  .tree-table-wrap {
101
101
  width: 100%;
102
+ padding-left: 4px; // padding size need to check
102
103
  overflow: hidden;
103
104
  overflow-x: auto;
104
105
  }
105
106
 
106
107
  .table-scrollable {
107
- max-height: var(--table-height); /* Adjust height as needed */
108
+ height: var(--table-height); /* Adjust height as needed */
108
109
  overflow-y: auto;
110
+ position: relative;
109
111
  }
110
112
 
111
113
  .ff-table-tree-body {
112
114
  overflow: scroll;
113
115
  }
114
116
 
117
+ tr {
118
+ &:hover {
119
+ background-color: var(--hover-color);
120
+ }
121
+ }
122
+
115
123
  .tree-table {
116
- border: 1px solid #f1f1f1;
124
+ // border: 1px solid #f1f1f1;
117
125
  table-layout: fixed;
118
126
  width: 100%;
119
127
  border-collapse: collapse;
120
128
  overflow: scroll;
121
129
 
130
+ thead {
131
+ position: sticky;
132
+ top: 0;
133
+ z-index: 2;
134
+ }
135
+
122
136
  tr {
137
+ background-color: var(--base-bg-color);
123
138
  .table-tree-row-action {
124
139
  display: none;
125
140
  }
126
141
 
127
- &:hover {
128
- background-color: var(--hover-color);
129
- td {
130
- &:first-child {
131
- background-color: var(--hover-color);
132
- }
133
- }
142
+ // &:hover {
143
+ // background-color: var(--hover-color);
144
+ // td {
145
+ // &:first-child {
146
+ // background-color: var(--hover-color);
147
+ // }
148
+ // }
134
149
 
135
- .table-tree-row-action {
136
- display: inline-flex;
137
- align-items: center;
138
- }
150
+ .table-tree-row-action {
151
+ display: inline-flex;
152
+ align-items: center;
139
153
  }
154
+ }
140
155
 
141
- &::after {
142
- content: '';
143
- display: block;
144
- visibility: hidden;
145
- clear: both;
146
- }
156
+ &::after {
157
+ content: '';
158
+ display: block;
159
+ visibility: hidden;
160
+ clear: both;
147
161
  }
162
+ }
148
163
 
149
- th,
150
- td {
151
- text-align: left;
152
- white-space: nowrap;
153
- text-overflow: ellipsis;
154
- overflow: hidden;
164
+ th,
165
+ td {
166
+ text-align: left;
167
+ white-space: nowrap;
168
+ text-overflow: ellipsis;
169
+ overflow: hidden;
170
+ }
171
+
172
+ th {
173
+ color: var(--brand-color);
174
+ background: var(--slider-table-color);
175
+ font-size: 13px;
176
+ width: 400px;
177
+ height: 32px;
178
+ box-sizing: border-box;
179
+
180
+ &:first-child {
181
+ width: 400px !important;
182
+ position: sticky;
183
+ left: 0;
155
184
  }
185
+ }
156
186
 
157
- th {
158
- color: var(--brand-color);
159
- background: var(--slider-table-color);
160
- font-size: 13px;
161
- width: 400px;
187
+ td {
188
+ font-size: 14px;
189
+ color: var(--brand-color);
190
+ height: 18px;
162
191
 
163
- &:first-child {
164
- position: sticky;
165
- left: 0;
192
+ &:first-child {
193
+ overflow: initial;
194
+ position: sticky;
195
+ left: 0;
196
+ background-color: white;
197
+
198
+ &:hover {
199
+ background-color: var(--hover-color);
166
200
  }
167
- }
168
201
 
169
- td {
170
- font-size: 14px;
171
- color: var(--brand-color);
172
- height: 18px;
202
+ .tree-table-default-content {
203
+ margin-left: 8px;
204
+ }
173
205
 
174
- &:first-child {
175
- overflow: initial;
176
- position: sticky;
177
- left: 0;
178
- background-color: white;
206
+ .tree-table-td-content {
207
+ padding-left: 4px;
179
208
 
180
- &:hover {
181
- background-color: var(--hover-color);
209
+ .tree-table-td-content-text {
210
+ margin-left: 4px;
182
211
  }
183
212
  }
184
213
  }
214
+ &.folder {
215
+ height: 28px;
216
+ }
185
217
  }
186
218
 
187
219
  .tree-table-td-content {
188
220
  display: inline-flex;
189
221
  align-items: center;
190
- padding-left: 8px;
191
222
  font-size: 12px;
192
223
  font-family: 'Poppins', sans-serif;
224
+
225
+ &.folder {
226
+ font-weight: 600;
227
+ }
193
228
  }
194
229
 
195
230
  .tree-row-expanded,
196
231
  .tree-row-collapsed {
197
- svg {
198
- height: 12px;
199
- width: 12px;
232
+ span {
233
+ svg {
234
+ height: 12px;
235
+ width: 12px;
200
236
 
201
- path {
202
- fill: var(--brand-color);
237
+ path {
238
+ fill: var(--brand-color);
239
+ }
203
240
  }
204
241
  }
205
242
  }
@@ -37,7 +37,7 @@ const colData = [
37
37
  {
38
38
  name: 'Module Path',
39
39
  accessor: 'createdBy',
40
- width: '200px',
40
+ width: '300px',
41
41
  isClickable: true,
42
42
  },
43
43
 
@@ -109,8 +109,8 @@ export const Default: Story = {
109
109
  loadMore: (node) => {
110
110
  console.log(node);
111
111
  },
112
- onExpand: (isExpand, node) => {
113
- console.log(isExpand, node);
112
+ onExpand: (node, index) => {
113
+ console.log(node, index);
114
114
  },
115
115
  select: 'checkbox',
116
116
  onChange: (node: string[]) => {
@@ -130,8 +130,8 @@ export const ControlledCheckBox: Story = {
130
130
  const [selected, setSelected] = useState<string[]>([]);
131
131
  return (
132
132
  <TableTree
133
- onExpand={(isExpand, node) => {
134
- console.log(isExpand, node);
133
+ onExpand={(node, index) => {
134
+ console.log(node, index);
135
135
  }}
136
136
  select="checkbox"
137
137
  onChange={(e, nodes: string[]) => {
@@ -146,6 +146,7 @@ export const ControlledCheckBox: Story = {
146
146
  loadMore={(direction) => {
147
147
  console.log(direction, '-------------------');
148
148
  }}
149
+ tableBorder="1px solid #f1f1f1"
149
150
  />
150
151
  );
151
152
  },
@@ -155,8 +156,8 @@ export const ControlledRadio: Story = {
155
156
  const [selected, setSelected] = useState<string[]>([]);
156
157
  return (
157
158
  <TableTree
158
- onExpand={(isExpand, node) => {
159
- console.log(isExpand, node);
159
+ onExpand={(node, index) => {
160
+ console.log(node, index);
160
161
  }}
161
162
  select="radio"
162
163
  onChange={(nodes: string[]) => {
@@ -1,10 +1,11 @@
1
- import React, { useCallback, memo, useRef } from 'react';
1
+ import React, { useCallback, memo } from 'react';
2
2
  import './TableTree.scss';
3
3
  import { TreeTableProps } from './types';
4
4
  import TableHead from './Components/TableHead';
5
5
  import TableBody from './Components/TableBody';
6
6
  import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
7
7
  import functionCheck from '../../utils/functionCheck/functionCheck';
8
+ import { TreeNodeProps } from '../../ComponentProps/TreeNodeProps';
8
9
 
9
10
  const TreeTable: React.FC<TreeTableProps> = ({
10
11
  treeData,
@@ -15,14 +16,15 @@ const TreeTable: React.FC<TreeTableProps> = ({
15
16
  onClick,
16
17
  onExpand,
17
18
  loadMore = () => {},
19
+ tableBorder,
18
20
  height = 'auto',
19
21
  }) => {
20
- const treeRef = useRef(null);
22
+ // const treeRef = useRef(null);
21
23
  useIntersectionObserver(
22
24
  ['ff-table-tree-last-node', 'ff-table-tree-first-node'],
23
25
  {
24
- root: treeRef?.current || null,
25
- rootMargin: '0px',
26
+ root: document.getElementById('ff-table-tree-scroll-container'),
27
+ rootMargin: '8px',
26
28
  threshold: 0.1,
27
29
  onIntersect: (entry) => {
28
30
  if (entry.isIntersecting) {
@@ -40,7 +42,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
40
42
  );
41
43
 
42
44
  const handleToggleExpand = useCallback(
43
- (node: any) => onExpand?.(node),
45
+ (node: TreeNodeProps, index: number) => onExpand?.(node, index),
44
46
  [onExpand]
45
47
  );
46
48
 
@@ -61,10 +63,11 @@ const TreeTable: React.FC<TreeTableProps> = ({
61
63
  <div
62
64
  className="table-scrollable"
63
65
  id="ff-table-tree-scroll-container"
64
- ref={treeRef}
66
+ // ref={treeRef}
65
67
  style={
66
68
  {
67
69
  '--table-height': `${height !== 'auto' ? height + 'px' : height}`,
70
+ border: tableBorder,
68
71
  } as React.CSSProperties
69
72
  }
70
73
  >
@@ -133,7 +133,7 @@ const data = [
133
133
  totalResourceCount: 4,
134
134
  totalProjectElementCount: 0,
135
135
  totalSharedElementCount: 0,
136
- container: false,
136
+ container: true,
137
137
  localDelete: false,
138
138
  defaultEntity: false,
139
139
  lastResource: true,
@@ -22,7 +22,7 @@ export interface TableBodyProps {
22
22
  selected: string[];
23
23
  select: string | null;
24
24
  onRowClick: (e: any, node: any) => void;
25
- onToggleExpand: (node: any) => void;
25
+ onToggleExpand: (node: TreeNode, _index: number) => void;
26
26
  onCheckBoxChange: (e: any, node: string[] | any) => void;
27
27
  }
28
28
 
@@ -32,7 +32,7 @@ export interface TableRowProps {
32
32
  selected: string[];
33
33
  select: string | null;
34
34
  onRowClick: (e: any, node: any) => void;
35
- onToggleExpand: (node: any) => void;
35
+ onToggleExpand: (node: TreeNode) => void;
36
36
  onCheckBoxChange: (e: any, node: string[] | any) => void;
37
37
  }
38
38
 
@@ -55,7 +55,8 @@ export interface TreeTableProps {
55
55
  select?: 'radio' | 'checkbox' | 'none';
56
56
  onChange?: (e: any, node: string[] | any) => void;
57
57
  onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
58
- onExpand?: (node: TreeNode) => void;
58
+ onExpand?: (node: TreeNode, _index: number) => void;
59
59
  loadMore?: (_direction?: string) => void;
60
+ tableBorder?: string;
60
61
  height?: number | string;
61
62
  }
@@ -17,7 +17,7 @@
17
17
  position: relative;
18
18
  border: none;
19
19
  background: none;
20
- padding: 0 4px;
20
+ padding: 0 8px;
21
21
  display: flex;
22
22
  flex-direction: column;
23
23
  gap: 4px;
@@ -44,6 +44,7 @@ export const Primary: Story = {
44
44
  osName: 'Windows 11 Home Single Language',
45
45
  osVersion: '10.0.22000',
46
46
  hostName: 'LAPTOP-T793RVQN',
47
+ iconName: 'chrome'
47
48
  },
48
49
  deviceInfo: [],
49
50
  headless: false,
@@ -9,7 +9,7 @@ export const getSequentialPayload = (
9
9
  return {
10
10
  ...rest,
11
11
  ...runLevel,
12
- numberOfRuns: index + 1,
12
+ runCount: index + 1,
13
13
  };
14
14
  })
15
15
  );
@@ -7,8 +7,11 @@ export interface OperatingSystemInfo {
7
7
 
8
8
  export interface RunLevelExecutionDataSet {
9
9
  peVariableSetId: string;
10
+ peVariableSetName: string;
10
11
  globalVariableSetId: string;
12
+ globalVariableSetName: string;
11
13
  testDataSetId: string;
14
+ testDataSetName: string;
12
15
  }
13
16
 
14
17
  export interface MachineExecutionInstance {
@@ -30,4 +33,7 @@ export interface SequentialMachineInstance
30
33
  peVariableSetId: string;
31
34
  globalVariableSetId: string;
32
35
  testDataSetId: string;
36
+ peVariableSetName: string;
37
+ globalVariableSetName: string;
38
+ testDataSetName: string;
33
39
  }