pixel-react 1.6.8 → 1.7.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 (173) hide show
  1. package/lib/components/Charts/LineChart/types.d.ts +1 -0
  2. package/lib/components/Chip/types.d.ts +1 -1
  3. package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
  4. package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
  5. package/lib/components/ConditionalDropdown/index.d.ts +1 -0
  6. package/lib/components/ConditionalDropdown/types.d.ts +145 -0
  7. package/lib/components/CreateVariable/types.d.ts +2 -2
  8. package/lib/components/DownloadClient/type.d.ts +19 -27
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  11. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  12. package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
  13. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  14. package/lib/components/MachineInputField/types.d.ts +1 -0
  15. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  16. package/lib/components/MenuOption/types.d.ts +2 -1
  17. package/lib/components/MiniModal/types.d.ts +1 -0
  18. package/lib/components/Modal/types.d.ts +1 -1
  19. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  20. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  21. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  22. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  23. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  24. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  25. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  26. package/lib/components/NLPInput/types.d.ts +80 -0
  27. package/lib/components/PopUpModal/types.d.ts +2 -1
  28. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  29. package/lib/components/ProgressBar/index.d.ts +1 -0
  30. package/lib/components/ProgressBar/types.d.ts +12 -0
  31. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  32. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  33. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  34. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  35. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  36. package/lib/components/TableTree/TableTree.d.ts +2 -2
  37. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  38. package/lib/components/TableTree/types.d.ts +1 -1
  39. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  40. package/lib/index.d.ts +183 -65
  41. package/lib/index.esm.js +1281 -674
  42. package/lib/index.esm.js.map +1 -1
  43. package/lib/index.js +1282 -674
  44. package/lib/index.js.map +1 -1
  45. package/lib/tsconfig.tsbuildinfo +1 -1
  46. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  47. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  48. package/package.json +1 -1
  49. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  50. package/src/assets/Themes/BaseTheme.scss +20 -2
  51. package/src/assets/Themes/DarkTheme.scss +19 -2
  52. package/src/assets/icons/add_file.svg +4 -4
  53. package/src/assets/icons/ai_search.svg +9 -0
  54. package/src/assets/icons/authorization.svg +4 -4
  55. package/src/assets/icons/depends_on_script.svg +7 -7
  56. package/src/assets/icons/email_group.svg +3 -3
  57. package/src/assets/icons/help_icon.svg +10 -0
  58. package/src/assets/icons/import_icon.svg +4 -0
  59. package/src/assets/icons/ios_icon.svg +11 -0
  60. package/src/assets/icons/labels.svg +8 -8
  61. package/src/assets/icons/parameters.svg +3 -3
  62. package/src/assets/icons/plus_round_icon.svg +38 -0
  63. package/src/assets/icons/pre_post_condition.svg +8 -8
  64. package/src/assets/icons/program_element.svg +8 -8
  65. package/src/assets/icons/test_data.svg +5 -5
  66. package/src/assets/icons/test_data_set.svg +7 -7
  67. package/src/assets/icons/tick_icon.svg +2 -2
  68. package/src/assets/icons/variable_set.svg +5 -5
  69. package/src/assets/styles/_colors.scss +1 -1
  70. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  71. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  72. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  73. package/src/components/Charts/LineChart/types.ts +1 -0
  74. package/src/components/Checkbox/Checkbox.scss +3 -1
  75. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  76. package/src/components/Checkbox/Checkbox.tsx +3 -4
  77. package/src/components/Chip/Chip.scss +15 -5
  78. package/src/components/Chip/Chip.stories.tsx +10 -1
  79. package/src/components/Chip/Chip.tsx +5 -1
  80. package/src/components/Chip/types.ts +1 -1
  81. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  82. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
  83. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
  84. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  85. package/src/components/ConditionalDropdown/index.ts +1 -0
  86. package/src/components/ConditionalDropdown/types.ts +160 -0
  87. package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
  88. package/src/components/CreateVariable/types.ts +2 -2
  89. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  90. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  91. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  92. package/src/components/DownloadClient/type.ts +32 -40
  93. package/src/components/EditTextField/EditTextField.scss +1 -1
  94. package/src/components/EditTextField/EditTextField.tsx +14 -20
  95. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  96. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  97. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  98. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  99. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  100. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  101. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  102. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  103. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  104. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  105. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  106. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  107. package/src/components/Excel/dataConversion.ts +43 -20
  108. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  109. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  110. package/src/components/Form/Forms.tsx +0 -2
  111. package/src/components/Icon/iconList.ts +12 -0
  112. package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
  113. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  114. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  115. package/src/components/LabelEditTextField/types.ts +1 -0
  116. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  117. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  118. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  119. package/src/components/MachineInputField/types.ts +2 -0
  120. package/src/components/MenuOption/MenuOption.scss +7 -7
  121. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  122. package/src/components/MenuOption/MenuOption.tsx +9 -13
  123. package/src/components/MenuOption/types.ts +3 -2
  124. package/src/components/MiniModal/MiniModal.scss +0 -1
  125. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  126. package/src/components/MiniModal/MiniModal.tsx +3 -1
  127. package/src/components/MiniModal/types.ts +1 -0
  128. package/src/components/Modal/types.ts +1 -1
  129. package/src/components/MultiSelect/Dropdown.scss +3 -4
  130. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  131. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  132. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  133. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  134. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  135. package/src/components/NLPInput/NLPInput.scss +77 -21
  136. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  137. package/src/components/NLPInput/NlpInput.tsx +95 -59
  138. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  139. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  140. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  141. package/src/components/NLPInput/sampleData.ts +162 -0
  142. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  143. package/src/components/PopUpModal/PopUpModal.stories.tsx +15 -10
  144. package/src/components/PopUpModal/PopUpModal.tsx +5 -4
  145. package/src/components/PopUpModal/types.ts +2 -1
  146. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  147. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  148. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  149. package/src/components/ProgressBar/index.ts +1 -0
  150. package/src/components/ProgressBar/types.ts +12 -0
  151. package/src/components/Search/Search.tsx +9 -1
  152. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  153. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  154. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  155. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  156. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  157. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  158. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  159. package/src/components/Table/Table.scss +1 -0
  160. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  161. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  162. package/src/components/TableTree/TableTree.tsx +27 -181
  163. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  164. package/src/components/TableTree/data.ts +45 -0
  165. package/src/components/TableTree/types.ts +4 -4
  166. package/src/hooks/useIntersectionObserver.tsx +56 -0
  167. package/src/index.ts +4 -3
  168. package/src/utils/functionCheck/functionCheck.ts +8 -0
  169. package/src/utils/getSequentialPayload/types.ts +1 -0
  170. package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
  171. package/src/components/AddVariables/AddVariables.tsx +0 -113
  172. package/src/components/AddVariables/index.ts +0 -1
  173. package/src/components/AddVariables/types.ts +0 -36
@@ -10,14 +10,18 @@ import Typography from '../../../Typography';
10
10
  import { ffid } from '../../../../utils/ffID/ffid';
11
11
  import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
12
12
  import classNames from 'classnames';
13
+ import Icon from '../../../Icon';
14
+ import IconButton from '../../../IconButton';
13
15
 
14
16
  type OptionType = {
15
- label: ReactNode;
16
- value: string;
17
+ label?: ReactNode;
18
+ value?: string;
17
19
  displayName?: string;
20
+ videoSrc?: string;
18
21
  description?: string;
19
22
  nlpType?: string;
20
23
  path?: string;
24
+ platform?: string;
21
25
  stepInputs?: { type?: string; name?: string }[];
22
26
  returnType?: string;
23
27
  };
@@ -29,9 +33,11 @@ const NlpDropdown = ({
29
33
  options = [],
30
34
  optionZIndex = 100,
31
35
  inputRef,
36
+ webServiceClick = () => {},
37
+ containerWidth,
32
38
  }: NlpDropDownListProps) => {
33
- // const [nlpData, setNlpData] = useState<OptionType | null>(null); need to add setNlpData
34
- const [nlpData] = useState<OptionType | null>(null);
39
+ const [nlpData, setNlpData] = useState<OptionType | null>(null);
40
+ const [showNlpDetails, setShowNlpDetails] = useState('');
35
41
  const themeContext = useContext(ThemeContext);
36
42
  const currentTheme = themeContext?.currentTheme;
37
43
  const optionsWrapperRef = useRef<HTMLDivElement>(null);
@@ -69,107 +75,241 @@ const NlpDropdown = ({
69
75
  };
70
76
  };
71
77
 
78
+ const getNLPType = (nlpType: string): JSX.Element => {
79
+ let label = '';
80
+ let className = '';
81
+
82
+ if (nlpType === 'NLP') {
83
+ label = 'NLP';
84
+ className = 'ff-nlp'; // red color
85
+ } else if (nlpType === 'STEP_GROUP') {
86
+ label = 'SG';
87
+ className = 'ff-sg'; // green color
88
+ } else if (nlpType === 'PROGRAM_ELEMENTS') {
89
+ label = 'PE';
90
+ className = 'ff-pe'; // yellow color
91
+ } else {
92
+ label = '--';
93
+ className = 'nlp-default'; // default black color
94
+ }
95
+
96
+ return <span className={className}>{label}</span>;
97
+ };
98
+
99
+ const getPlatformIcon = (platform: string): JSX.Element | string => {
100
+ if (platform === 'Web') {
101
+ return <Icon name="web_icon" height={8} width={8} />;
102
+ } else if (platform === 'android') {
103
+ return <Icon name="android_icon" height={8} width={8} />;
104
+ } else if (platform === 'ios') {
105
+ return (
106
+ <Icon
107
+ name="ios_icon"
108
+ height={8}
109
+ width={8}
110
+ color="var(--dotted-border-color)"
111
+ />
112
+ );
113
+ } else if (platform === 'Generic') {
114
+ return <b className="platform-ios">Generic</b>;
115
+ } else {
116
+ return '--';
117
+ }
118
+ };
119
+
72
120
  return (
73
121
  <div className="ff-nlp-dropdown-wrapper">
74
122
  <div
75
123
  ref={optionsWrapperRef}
76
- style={updateDropdownPosition()}
124
+ style={{ ...updateDropdownPosition(), width: containerWidth }}
77
125
  className={classNames('ff-nlp-options-wrapper', currentTheme)}
126
+ onMouseLeave={() => setShowNlpDetails('hide')}
78
127
  >
79
- <div className="ff-nlp-options-wrapper1">
80
- {!checkEmpty(options) ? (
81
- options.map((option) => (
82
- // <div key={ffid()} onMouseEnter={() => setNlpData(option)}> need to add onMouseEnter
83
- <div key={ffid()}>
84
- <Typography
85
- as="div"
86
- lineHeight="30px"
87
- className={classNames('ff-nlp-option', currentTheme)}
88
- color="var(--ff-nlp-text-color)"
89
- onClick={() => onSelectOptionSelector(option)}
128
+ <div className="ff-nlp-options-wrapper-main">
129
+ <div className="ff-nlp-options-primary-wrapper">
130
+ {!checkEmpty(options) ? (
131
+ options.map((option) => (
132
+ <div
133
+ key={ffid()}
134
+ onMouseEnter={() => {
135
+ setNlpData(option as OptionType);
136
+ setShowNlpDetails('show');
137
+ }}
90
138
  >
91
- <span className="mr-2 fontPoppinsRegularMd">
92
- {option?.nlpType === 'NLP' ? (
93
- <b className="nlp-type-NLP">NLP</b>
94
- ) : option?.nlpType === 'STEP_GROUP' ? (
95
- <b className="nlp-type-step-group">SG</b>
96
- ) : option?.nlpType === 'PROGRAM_ELEMENTS' ? (
97
- <b className="nlp-type-program-elements">PE</b>
98
- ) : (
99
- '--'
100
- )}
101
- </span>
102
- <span className="mr-2 fontPoppinsRegularMd">
103
- {option?.platform === 'web' ? (
104
- <b className="platform-web">Web</b>
105
- ) : option?.platform === 'android' ? (
106
- <b className="platform-android">Android</b>
107
- ) : option?.platform === 'ios' ? (
108
- <b className="platform-ios">iOS</b>
109
- ) : option?.platform === 'Generic' ? (
110
- <b className="platform-ios">Generic</b>
111
- ) : (
112
- '--'
113
- )}
114
- </span>
115
- {option?.displayName}
116
- </Typography>
117
- </div>
118
- ))
119
- ) : (
139
+ <Typography
140
+ as="div"
141
+ lineHeight="30px"
142
+ fontSize={12}
143
+ className={classNames('ff-nlp-option', currentTheme)}
144
+ onClick={() => onSelectOptionSelector(option)}
145
+ >
146
+ <span>
147
+ <Typography
148
+ className="nlp-categories"
149
+ fontWeight="regular"
150
+ fontSize={8}
151
+ >
152
+ {getNLPType(option.nlpType)}
153
+ </Typography>
154
+ </span>
155
+
156
+ <span>{getPlatformIcon(option.platform)}</span>
157
+ {option?.displayName}
158
+ </Typography>
159
+ </div>
160
+ ))
161
+ ) : (
162
+ <Typography
163
+ textAlign="center"
164
+ lineHeight="32px"
165
+ as="p"
166
+ color="var(--ff-nlp-text-color)"
167
+ className="ff-nlp-no-option"
168
+ >
169
+ No Results Found
170
+ </Typography>
171
+ )}
172
+ </div>
173
+ <div>
174
+ <div className="ff-nlp-web-service-div ">
175
+ <IconButton
176
+ iconName="plus_user_icon"
177
+ label="Web Service"
178
+ onClick={webServiceClick}
179
+ />
180
+ </div>
181
+ </div>
182
+ </div>
183
+ <div
184
+ className={
185
+ showNlpDetails === 'show' ? 'ff-nlp-data-show' : 'ff-nlp-data-hide'
186
+ }
187
+ >
188
+ <div className="ff-nlp-data-side-menu">
189
+ {nlpData?.videoSrc && (
190
+ <Typography
191
+ className="nlp-details-header"
192
+ fontWeight="semi-bold"
193
+ fontSize={10}
194
+ >
195
+ Video
196
+ <div className="nlp-details ">
197
+ <video
198
+ src={nlpData.videoSrc}
199
+ controls
200
+ className="nlp-video-player"
201
+ width="100%"
202
+ >
203
+ Your browser does not support the video tag.
204
+ </video>
205
+ </div>
206
+ </Typography>
207
+ )}
208
+
120
209
  <Typography
121
- textAlign="center"
122
- lineHeight="32px"
123
- as="p"
124
- color="var(--ff-nlp-text-color)"
125
- className="ff-nlp-no-option"
210
+ className="nlp-details-header"
211
+ fontWeight="semi-bold"
212
+ fontSize={10}
126
213
  >
127
- No Results Found
214
+ NLP Details
215
+ <Typography
216
+ className="nlp-details"
217
+ fontWeight="regular"
218
+ fontSize={10}
219
+ >
220
+ {nlpData?.displayName || '--'}
221
+ </Typography>
128
222
  </Typography>
129
- )}
130
- <button>+ Web Services</button>
131
- </div>
132
- <div className="ff-nlp-data">
133
- <div>
134
- <div className="nlp-details-header mt-4">Name:</div>
135
- <div className="nlp-details nlpdiv-check">
136
- {nlpData?.displayName || '--'}
137
- </div>
138
- <div className="nlp-details-header mt-4">Description:</div>
139
- <div className="nlp-details nlpdiv-check">
140
- {nlpData?.description || '--'}
141
- </div>
223
+
224
+ <Typography
225
+ className="nlp-details-header"
226
+ fontWeight="semi-bold"
227
+ fontSize={10}
228
+ >
229
+ Description
230
+ <Typography
231
+ className="nlp-details"
232
+ fontWeight="regular"
233
+ fontSize={10}
234
+ >
235
+ {nlpData?.description || '--'}
236
+ </Typography>
237
+ </Typography>
238
+
142
239
  {nlpData?.nlpType === 'STEP_GROUP' && (
143
240
  <>
144
- <div className="nlp-details-header mt-4">Path:</div>
145
- <div className="nlp-details nlpdiv-check">
146
- {nlpData?.path ? nlpData?.path.slice(6) : '--'}
147
- </div>
241
+ <Typography
242
+ className="nlp-details-header"
243
+ fontWeight="semi-bold"
244
+ fontSize={10}
245
+ >
246
+ Path
247
+ <Typography
248
+ className="nlp-details"
249
+ fontWeight="regular"
250
+ fontSize={10}
251
+ >
252
+ {nlpData?.path ? nlpData?.path.slice(6) : '--'}
253
+ </Typography>
254
+ </Typography>
148
255
  </>
149
256
  )}
150
- <div className="nlp-details-header mt-4">Inputs:</div>
257
+ <Typography
258
+ className="nlp-details-header"
259
+ fontWeight="semi-bold"
260
+ fontSize={10}
261
+ >
262
+ Inputs
263
+ </Typography>
151
264
  {nlpData?.stepInputs?.length ? (
152
265
  nlpData.stepInputs.map((stepInput, index) => {
153
266
  const stepInputType = stepInput.type
154
- ? stepInput.type.split('.').pop()
267
+ ? stepInput?.type?.split('.')?.pop()
155
268
  : '--';
156
269
  return (
157
270
  <div key={index}>
158
- <div className="nlp-details-header">Input{index + 1}:</div>
159
- <div className="nlp-details">type: {stepInputType}</div>
160
- <div className="nlp-details mb-4">
161
- name: {stepInput.name || '--'}
162
- </div>
271
+ <Typography
272
+ className="nlp-details-header"
273
+ fontWeight="semi-bold"
274
+ fontSize={10}
275
+ >
276
+ Input{index + 1}
277
+ <Typography
278
+ className="nlp-details"
279
+ fontWeight="regular"
280
+ fontSize={10}
281
+ >
282
+ type: {stepInputType}
283
+ </Typography>
284
+ <Typography
285
+ className="nlp-details"
286
+ fontWeight="regular"
287
+ fontSize={10}
288
+ >
289
+ name: {stepInput.name || '--'}
290
+ </Typography>
291
+ </Typography>
163
292
  </div>
164
293
  );
165
294
  })
166
295
  ) : (
167
- <div className="nlp-details mb-4">--</div>
296
+ <div className="nlp-details">--</div>
168
297
  )}
169
- <div className="nlp-details-header">Output:</div>
170
- <div className="nlp-details mb-4">
171
- {nlpData?.returnType || '--'}
172
- </div>
298
+
299
+ <Typography
300
+ className="nlp-details-header"
301
+ fontWeight="semi-bold"
302
+ fontSize={10}
303
+ >
304
+ Output
305
+ <Typography
306
+ className="nlp-details "
307
+ fontWeight="regular"
308
+ fontSize={10}
309
+ >
310
+ {nlpData?.returnType || '--'}
311
+ </Typography>
312
+ </Typography>
173
313
  </div>
174
314
  </div>
175
315
  </div>
@@ -0,0 +1,162 @@
1
+ export const nlpList=
2
+ [
3
+ {
4
+ desc: 'randomNumber',
5
+ displayName:
6
+ 'PostgreSQL : Update value *setValues* into *tableName* table',
7
+ failMessage: 'randomNumber has failed',
8
+ isNonPE: false,
9
+ platform: 'Web',
10
+ name: 'randomNumber',
11
+ nlpName: 'randomNumber',
12
+ videoSrc: '',
13
+ nlpType: 'NLP',
14
+ packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
15
+ parentId: 'PKJ1017',
16
+ passMessage: 'randomNumber has passed',
17
+ programElementId: 'PRG_ELE1001',
18
+ projectId: 'PJT1001',
19
+ returnType: 'java.lang.Integer',
20
+ searchName: 'randomNumber',
21
+ stepInputs: [{}],
22
+ toolTip: 'Logics : randomNumber',
23
+ _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
24
+ _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
25
+ },
26
+ {
27
+ desc: 'randomNumber',
28
+ displayName: 'Wait for *element* until text contains *text*',
29
+ platform: 'android',
30
+
31
+ failMessage: 'randomNumber has failed',
32
+ isNonPE: false,
33
+ name: 'randomNumber',
34
+ nlpName: 'randomNumber',
35
+ nlpType: 'PROGRAM_ELEMENTS',
36
+ packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
37
+ parentId: 'PKJ1017',
38
+ passMessage: 'randomNumber has passed',
39
+ programElementId: 'PRG_ELE1001',
40
+ projectId: 'PJT1001',
41
+ returnType: 'java.lang.Integer',
42
+ searchName: 'randomNumber',
43
+ stepInputs: [{}],
44
+ toolTip: 'Logics : randomNumber',
45
+ _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
46
+ _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
47
+ },
48
+ {
49
+ desc: 'randomNumber',
50
+ platform: 'ios',
51
+
52
+ displayName:
53
+ 'String : Verify if string *string1* is equal to string *string2*',
54
+ failMessage: 'randomNumber has failed',
55
+ isNonPE: false,
56
+ name: 'randomNumber',
57
+ nlpName: 'randomNumber',
58
+ nlpType: 'STEP_GROUP',
59
+ packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
60
+ parentId: 'PKJ1017',
61
+ passMessage: 'randomNumber has passed',
62
+ programElementId: 'PRG_ELE1001',
63
+ projectId: 'PJT1001',
64
+ returnType: 'java.lang.Integer',
65
+ searchName: 'randomNumber',
66
+ stepInputs: [{}],
67
+ toolTip: 'Logics : randomNumber',
68
+ _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
69
+ _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
70
+ },
71
+ {
72
+ desc: 'randomNumber',
73
+ displayName:
74
+ 'Wait for page to load for maximum time limit of *time* second',
75
+ failMessage: 'randomNumber has failed',
76
+ isNonPE: false,
77
+ platform: 'android',
78
+
79
+ name: 'randomNumber',
80
+ nlpName: 'randomNumber',
81
+ nlpType: 'PROGRAM_ELEMENTS',
82
+ packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
83
+ parentId: 'PKJ1017',
84
+ passMessage: 'randomNumber has passed',
85
+ programElementId: 'PRG_ELE1001',
86
+ projectId: 'PJT1001',
87
+ returnType: 'java.lang.Integer',
88
+ searchName: 'randomNumber',
89
+ stepInputs: [
90
+ { name: 'Range Of The Number', type: 'java.lang.Integer' },
91
+ ],
92
+ toolTip: 'Logics : randomNumber',
93
+ _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
94
+ _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
95
+ },
96
+ {
97
+ description: '',
98
+ displayName:
99
+ 'Excel : Get string cell data for given *uniqueData* and *header* for single row table',
100
+ failMessage: 'Open Browser is failed',
101
+ imported: false,
102
+ libraryId: 'LIB1002',
103
+ name: 'Open Browser',
104
+ nlpName: 'Open Browser',
105
+ nlpType: 'STEP_GROUP',
106
+ parentId: 'STP_GRP1001',
107
+ passMessage: 'Open Browser is passed',
108
+ path: '/Root/Open and Close Browser/Open Browser',
109
+ platform: 'Web',
110
+ projectId: 'PJT1001',
111
+ returnType: 'void',
112
+ searchName: 'Open Browser',
113
+ stepInputs: [],
114
+ toolTip: 'Open and Close Browser : Open Browser : Web',
115
+ _class: 'com.tyss.optimize.data.models.db.model.StepGroupNlp',
116
+ _id: 'SG_NLP1001',
117
+ },
118
+ {
119
+ desc: 'randomNumber',
120
+ displayName:
121
+ 'PostgreSQL : Update value *setValues* into *tableName* table',
122
+ failMessage: 'randomNumber has failed',
123
+ isNonPE: false,
124
+ platform: 'Web',
125
+
126
+ name: 'randomNumber',
127
+ nlpName: 'randomNumber',
128
+ nlpType: 'PROGRAM_ELEMENTS',
129
+ packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
130
+ parentId: 'PKJ1017',
131
+ passMessage: 'randomNumber has passed',
132
+ programElementId: 'PRG_ELE1001',
133
+ projectId: 'PJT1001',
134
+ returnType: 'java.lang.Integer',
135
+ searchName: 'randomNumber',
136
+ stepInputs: [{}],
137
+ toolTip: 'Logics : randomNumber',
138
+ _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
139
+ _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
140
+ },
141
+ {
142
+ desc: 'randomNumber',
143
+ displayName: 'randomNumber',
144
+ failMessage: 'randomNumber has failed',
145
+ isNonPE: false,
146
+ name: 'randomNumber',
147
+ platform: 'Web',
148
+ nlpName: 'randomNumber',
149
+ nlpType: 'PROGRAM_ELEMENTS',
150
+ packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
151
+ parentId: 'PKJ1017',
152
+ passMessage: 'randomNumber has passed',
153
+ programElementId: 'PRG_ELE1001',
154
+ projectId: 'PJT1001',
155
+ returnType: 'java.lang.Integer',
156
+ searchName: 'randomNumber',
157
+ stepInputs: [{}],
158
+ toolTip: 'Logics : randomNumber',
159
+ _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
160
+ _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
161
+ }
162
+ ]
@@ -6,11 +6,18 @@ export interface SelectProps {
6
6
  */
7
7
  label?: string;
8
8
 
9
+ rightIcon?: string;
10
+
11
+ leftIcon?: string;
12
+
9
13
  /*
10
14
  * If true, the NLP select dropdown will have a label
11
15
  */
12
16
  showLabel?: boolean;
13
-
17
+ onHelpIconClick?: () => void;
18
+ webServiceClick?: () => void;
19
+ aiIconClick?: () => void;
20
+ rightIconColor: string;
14
21
  /*
15
22
  * Options for the NLP select dropdown
16
23
  */
@@ -19,12 +26,13 @@ export interface SelectProps {
19
26
  /*
20
27
  * Selected option for the NLP select dropdown
21
28
  */
22
- selectedOption?: Option;
29
+ selectedOption?: NlpRenderOption;
30
+ containerWidth?:string | number,
23
31
 
24
32
  /*
25
33
  * onChange callback function for handling selected option changes
26
34
  */
27
- onChange: (option: Option) => void;
35
+ onChange: (option: NlpRenderOption) => void;
28
36
 
29
37
  /*
30
38
  * If error is true, this message will be displayed
@@ -54,12 +62,15 @@ export interface SelectProps {
54
62
  /*
55
63
  * Provide boolean value to show border or not
56
64
  */
65
+
57
66
  showBorder?: boolean;
58
67
 
59
68
  /*
60
69
  * Provide the boolean value if the select component is required or not
61
70
  */
62
71
  required?: boolean;
72
+ value: string;
73
+ onSelect: (e: any) => void;
63
74
  }
64
75
 
65
76
  export interface DrowdownPosition {
@@ -84,8 +95,8 @@ export type SelectAction =
84
95
  | {
85
96
  type: 'BLUR_INPUT';
86
97
  payload: {
87
- optionsList: Option[];
88
- option: Option['projectId'];
98
+ optionsList: NlpRenderOption[];
99
+ option: NlpRenderOption['projectId'];
89
100
  };
90
101
  }
91
102
  | { type: 'MOUSE_ENTER' }
@@ -111,14 +122,15 @@ export type SelectAction =
111
122
  type: 'SHOW_ERROR';
112
123
  payload: {
113
124
  optionsList: any[];
114
- option: Option['projectId'];
125
+ option: NlpRenderOption['projectId'];
115
126
  };
116
127
  };
117
128
 
118
- export interface Option {
119
- displayName: string | ReactNode;
120
- projectId: string;
121
- nlpType: string;
122
- platform:string;
129
+ export interface NlpRenderOption {
130
+ displayName: string | ReactNode;
131
+ projectId: string;
132
+ nlpType: string;
133
+ platform: string;
123
134
  disabled?: boolean;
135
+ videoSrc?: string;
124
136
  }
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
2
2
  import type { Meta, StoryObj } from '@storybook/react';
3
3
  import PopUpModal from './PopUpModal';
4
4
  import Button from '../Button';
5
+ import Typography from '../Typography';
5
6
 
6
7
  const meta: Meta<typeof PopUpModal> = {
7
8
  title: 'Components/PopUpModal',
@@ -15,16 +16,17 @@ const meta: Meta<typeof PopUpModal> = {
15
16
  type Story = StoryObj<typeof PopUpModal>;
16
17
 
17
18
  const defaultArgs = {
18
- iconName: "license_warning",
19
- titleMessage: "Warning!",
20
- subTitleMessage: "Unsaved Changes.",
21
- modalMessage: "Your web service data will be lost. Are you sure you want to exit?",
22
- footerMessage: "How do you want to proceed?",
23
- firstButtonLabel: "Cancel",
24
- secondButtonLabel: "Continue",
25
- buttonVariant: "warning",
26
- border: '1px solid var(--warning-modal-border-color)',
27
- colorForTitleMessage: 'var(--status-button-bg-warning)'
19
+ iconName:"license_warning",
20
+ titleMessage:"Warning!",
21
+ subTitleMessage:"Unsaved Changes.",
22
+ modalMessage:"Your web service data will be lost. Are you sure you want to exit?",
23
+ firstButtonLabel:"Cancel",
24
+ secondButtonLabel:"Continue",
25
+ buttonVariant:"warning",
26
+ border:'1px solid var(--warning-modal-border-color)',
27
+ colorForTitleMessage: 'var(--status-button-bg-warning)',
28
+ popupWidth:'420',
29
+ footerContent:<Typography children='How do you want to proceed?' fontSize={16}/>
28
30
  }
29
31
 
30
32
  export const DefaultModal: Story = {
@@ -35,6 +37,8 @@ export const DefaultModal: Story = {
35
37
  iconName: 'license_warning',
36
38
  titleMessage: 'Warning!',
37
39
  subTitleMessage: 'Unsaved Changes.',
40
+ popupWidth: "420",
41
+ footerContent:<Typography children='How do you want to proceed?' fontSize={16}/>,
38
42
  },
39
43
  };
40
44
 
@@ -53,6 +57,7 @@ export const ControlledPopUp: Story = {
53
57
  isOpen={isOpen}
54
58
  onClose={() => setIsOpen(false)}
55
59
  onContinue={handleContinue}
60
+ footerContent={<Typography children='How do you want to proceed?' fontSize={16}/>}
56
61
  />
57
62
  </>
58
63
  );