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.
- package/lib/components/Charts/LineChart/types.d.ts +1 -0
- package/lib/components/Chip/types.d.ts +1 -1
- package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/index.d.ts +1 -0
- package/lib/components/ConditionalDropdown/types.d.ts +145 -0
- package/lib/components/CreateVariable/types.d.ts +2 -2
- package/lib/components/DownloadClient/type.d.ts +19 -27
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
- package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
- package/lib/components/LabelEditTextField/types.d.ts +1 -0
- package/lib/components/MachineInputField/types.d.ts +1 -0
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +2 -1
- package/lib/components/MiniModal/types.d.ts +1 -0
- package/lib/components/Modal/types.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
- package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
- package/lib/components/NLPInput/NlpInput.d.ts +2 -2
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
- package/lib/components/NLPInput/sampleData.d.ts +104 -0
- package/lib/components/NLPInput/types.d.ts +80 -0
- package/lib/components/PopUpModal/types.d.ts +2 -1
- package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
- package/lib/components/ProgressBar/index.d.ts +1 -0
- package/lib/components/ProgressBar/types.d.ts +12 -0
- package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
- package/lib/components/TableTree/TableTree.d.ts +2 -2
- package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
- package/lib/components/TableTree/types.d.ts +1 -1
- package/lib/hooks/useIntersectionObserver.d.ts +9 -0
- package/lib/index.d.ts +183 -65
- package/lib/index.esm.js +1281 -674
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1282 -674
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
- package/lib/utils/getSequentialPayload/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
- package/src/assets/Themes/BaseTheme.scss +20 -2
- package/src/assets/Themes/DarkTheme.scss +19 -2
- package/src/assets/icons/add_file.svg +4 -4
- package/src/assets/icons/ai_search.svg +9 -0
- package/src/assets/icons/authorization.svg +4 -4
- package/src/assets/icons/depends_on_script.svg +7 -7
- package/src/assets/icons/email_group.svg +3 -3
- package/src/assets/icons/help_icon.svg +10 -0
- package/src/assets/icons/import_icon.svg +4 -0
- package/src/assets/icons/ios_icon.svg +11 -0
- package/src/assets/icons/labels.svg +8 -8
- package/src/assets/icons/parameters.svg +3 -3
- package/src/assets/icons/plus_round_icon.svg +38 -0
- package/src/assets/icons/pre_post_condition.svg +8 -8
- package/src/assets/icons/program_element.svg +8 -8
- package/src/assets/icons/test_data.svg +5 -5
- package/src/assets/icons/test_data_set.svg +7 -7
- package/src/assets/icons/tick_icon.svg +2 -2
- package/src/assets/icons/variable_set.svg +5 -5
- package/src/assets/styles/_colors.scss +1 -1
- package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
- package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
- package/src/components/Charts/LineChart/LineChart.tsx +10 -1
- package/src/components/Charts/LineChart/types.ts +1 -0
- package/src/components/Checkbox/Checkbox.scss +3 -1
- package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
- package/src/components/Checkbox/Checkbox.tsx +3 -4
- package/src/components/Chip/Chip.scss +15 -5
- package/src/components/Chip/Chip.stories.tsx +10 -1
- package/src/components/Chip/Chip.tsx +5 -1
- package/src/components/Chip/types.ts +1 -1
- package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
- package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
- package/src/components/ConditionalDropdown/index.ts +1 -0
- package/src/components/ConditionalDropdown/types.ts +160 -0
- package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
- package/src/components/CreateVariable/types.ts +2 -2
- package/src/components/DownloadClient/DownloadClient.scss +51 -64
- package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
- package/src/components/DownloadClient/DownloadClient.tsx +60 -51
- package/src/components/DownloadClient/type.ts +32 -40
- package/src/components/EditTextField/EditTextField.scss +1 -1
- package/src/components/EditTextField/EditTextField.tsx +14 -20
- package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
- package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
- package/src/components/Excel/ExcelFile.stories.tsx +4 -4
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
- package/src/components/Excel/dataConversion.ts +43 -20
- package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
- package/src/components/FileDropzone/FileDropzone.tsx +24 -4
- package/src/components/Form/Forms.tsx +0 -2
- package/src/components/Icon/iconList.ts +12 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
- package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
- package/src/components/LabelEditTextField/types.ts +1 -0
- package/src/components/MachineInputField/MachineInputField.scss +1 -5
- package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
- package/src/components/MachineInputField/MachineInputField.tsx +14 -14
- package/src/components/MachineInputField/types.ts +2 -0
- package/src/components/MenuOption/MenuOption.scss +7 -7
- package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
- package/src/components/MenuOption/MenuOption.tsx +9 -13
- package/src/components/MenuOption/types.ts +3 -2
- package/src/components/MiniModal/MiniModal.scss +0 -1
- package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
- package/src/components/MiniModal/MiniModal.tsx +3 -1
- package/src/components/MiniModal/types.ts +1 -0
- package/src/components/Modal/types.ts +1 -1
- package/src/components/MultiSelect/Dropdown.scss +3 -4
- package/src/components/MultiSelect/Dropdown.tsx +34 -7
- package/src/components/MultiSelect/MultiSelect.scss +1 -0
- package/src/components/MultiSelect/MultiSelect.tsx +3 -0
- package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
- package/src/components/MultiSelect/dropdownTypes.ts +2 -0
- package/src/components/NLPInput/NLPInput.scss +77 -21
- package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
- package/src/components/NLPInput/NlpInput.tsx +95 -59
- package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
- package/src/components/NLPInput/sampleData.ts +162 -0
- package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
- package/src/components/PopUpModal/PopUpModal.stories.tsx +15 -10
- package/src/components/PopUpModal/PopUpModal.tsx +5 -4
- package/src/components/PopUpModal/types.ts +2 -1
- package/src/components/ProgressBar/ProgressBar.scss +46 -0
- package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
- package/src/components/ProgressBar/ProgressBar.tsx +61 -0
- package/src/components/ProgressBar/index.ts +1 -0
- package/src/components/ProgressBar/types.ts +12 -0
- package/src/components/Search/Search.tsx +9 -1
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
- package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/types.ts +7 -5
- package/src/components/Table/Table.scss +1 -0
- package/src/components/TableTree/Components/TableBody.tsx +3 -1
- package/src/components/TableTree/TableTree.stories.tsx +4 -7
- package/src/components/TableTree/TableTree.tsx +27 -181
- package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
- package/src/components/TableTree/data.ts +45 -0
- package/src/components/TableTree/types.ts +4 -4
- package/src/hooks/useIntersectionObserver.tsx +56 -0
- package/src/index.ts +4 -3
- package/src/utils/functionCheck/functionCheck.ts +8 -0
- package/src/utils/getSequentialPayload/types.ts +1 -0
- package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
- package/src/components/AddVariables/AddVariables.tsx +0 -113
- package/src/components/AddVariables/index.ts +0 -1
- 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
|
16
|
-
value
|
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
|
-
|
34
|
-
const [
|
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-
|
80
|
-
|
81
|
-
options
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
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
|
-
<
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
)
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
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
|
-
|
122
|
-
|
123
|
-
|
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
|
-
|
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
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
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
|
-
<
|
145
|
-
|
146
|
-
|
147
|
-
|
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
|
-
<
|
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
|
267
|
+
? stepInput?.type?.split('.')?.pop()
|
155
268
|
: '--';
|
156
269
|
return (
|
157
270
|
<div key={index}>
|
158
|
-
<
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
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
|
296
|
+
<div className="nlp-details">--</div>
|
168
297
|
)}
|
169
|
-
|
170
|
-
<
|
171
|
-
|
172
|
-
|
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?:
|
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:
|
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:
|
88
|
-
option:
|
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:
|
125
|
+
option: NlpRenderOption['projectId'];
|
115
126
|
};
|
116
127
|
};
|
117
128
|
|
118
|
-
export interface
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
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
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
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
|
);
|