@integry/sdk 4.6.52 → 4.6.53
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/.vscode/launch.json +2 -2
- package/dist/esm/index.csm.d.ts +1 -0
- package/dist/esm/index.csm.js +1 -1
- package/dist/umd/index.umd.d.ts +1 -0
- package/dist/umd/index.umd.js +1 -1
- package/package.json +1 -1
- package/src/components/RadioGroup/Radio.ts +71 -72
- package/src/components/form/FunctionField/index.ts +19 -4
- package/src/components/form/FunctionField/styles.module.scss +19 -0
- package/src/features/common/ActionForm/index.ts +1 -0
- package/src/features/common/AuthSelectorV2/index.ts +6 -7
- package/src/index.ts +2 -0
- package/src/types/index.ts +1 -0
package/package.json
CHANGED
|
@@ -38,25 +38,68 @@ export const Radio = (props: RadioProps) => {
|
|
|
38
38
|
};
|
|
39
39
|
|
|
40
40
|
return html`
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
41
|
+
<${Hint} dismissOnClick=${false} position="fixed" deltaY=${15}>
|
|
42
|
+
${isReadOnly && html`<span class=${styles.readonlyHint}></span>`}
|
|
43
|
+
<div class=${`${styles.radio} ${className ? styles[className] : ''}`}>
|
|
44
|
+
<input
|
|
45
|
+
id=${value}
|
|
46
|
+
type="radio"
|
|
47
|
+
name=${id}
|
|
48
|
+
value=${value}
|
|
49
|
+
checked=${isChecked}
|
|
50
|
+
disabled=${isDisabled}
|
|
51
|
+
/>
|
|
52
|
+
<div class=${styles.labelDiv} onclick=${handleRadioChange}>
|
|
53
|
+
<label for=${value} class=${isDisabled ? styles.disabled : ''}>
|
|
54
|
+
<div class=${styles.button}>
|
|
55
|
+
${isChecked
|
|
56
|
+
? html`
|
|
57
|
+
${isDisabled
|
|
58
|
+
? html`
|
|
59
|
+
<svg
|
|
60
|
+
width="15"
|
|
61
|
+
height="15"
|
|
62
|
+
viewBox="0 0 15 15"
|
|
63
|
+
fill="none"
|
|
64
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
65
|
+
>
|
|
66
|
+
<path
|
|
67
|
+
d="M14 7.5C14 11.0899 11.0899 14 7.5 14C3.91015 14 1 11.0899 1 7.5C1 3.91015 3.91015 1 7.5 1C11.0899 1 14 3.91015 14 7.5Z"
|
|
68
|
+
fill="white"
|
|
69
|
+
stroke="#C8C8C8"
|
|
70
|
+
stroke-width="2"
|
|
71
|
+
/>
|
|
72
|
+
<path
|
|
73
|
+
fill-rule="evenodd"
|
|
74
|
+
clip-rule="evenodd"
|
|
75
|
+
d="M7.5 11C9.433 11 11 9.433 11 7.5C11 5.567 9.433 4 7.5 4C5.567 4 4 5.567 4 7.5C4 9.433 5.567 11 7.5 11Z"
|
|
76
|
+
fill="#C8C8C8"
|
|
77
|
+
/>
|
|
78
|
+
</svg>
|
|
79
|
+
`
|
|
80
|
+
: html`<svg
|
|
81
|
+
width="15"
|
|
82
|
+
height="15"
|
|
83
|
+
viewBox="0 0 15 15"
|
|
84
|
+
fill="none"
|
|
85
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
86
|
+
>
|
|
87
|
+
<path
|
|
88
|
+
d="M14 7.5C14 11.0899 11.0899 14 7.5 14C3.91015 14 1 11.0899 1 7.5C1 3.91015 3.91015 1 7.5 1C11.0899 1 14 3.91015 14 7.5Z"
|
|
89
|
+
fill="white"
|
|
90
|
+
stroke="#4250f0"
|
|
91
|
+
stroke-width="2"
|
|
92
|
+
/>
|
|
93
|
+
<path
|
|
94
|
+
fill-rule="evenodd"
|
|
95
|
+
clip-rule="evenodd"
|
|
96
|
+
d="M7.5 11C9.433 11 11 9.433 11 7.5C11 5.567 9.433 4 7.5 4C5.567 4 4 5.567 4 7.5C4 9.433 5.567 11 7.5 11Z"
|
|
97
|
+
fill="#4250f0"
|
|
98
|
+
/>
|
|
99
|
+
</svg> `}
|
|
100
|
+
`
|
|
101
|
+
: html`
|
|
102
|
+
<svg
|
|
60
103
|
width="15"
|
|
61
104
|
height="15"
|
|
62
105
|
viewBox="0 0 15 15"
|
|
@@ -66,64 +109,20 @@ export const Radio = (props: RadioProps) => {
|
|
|
66
109
|
<path
|
|
67
110
|
d="M14 7.5C14 11.0899 11.0899 14 7.5 14C3.91015 14 1 11.0899 1 7.5C1 3.91015 3.91015 1 7.5 1C11.0899 1 14 3.91015 14 7.5Z"
|
|
68
111
|
fill="white"
|
|
69
|
-
stroke="#
|
|
112
|
+
stroke="#E2E0DB"
|
|
70
113
|
stroke-width="2"
|
|
71
114
|
/>
|
|
72
|
-
<path
|
|
73
|
-
fill-rule="evenodd"
|
|
74
|
-
clip-rule="evenodd"
|
|
75
|
-
d="M7.5 11C9.433 11 11 9.433 11 7.5C11 5.567 9.433 4 7.5 4C5.567 4 4 5.567 4 7.5C4 9.433 5.567 11 7.5 11Z"
|
|
76
|
-
fill="#C8C8C8"
|
|
77
|
-
/>
|
|
78
|
-
</svg>
|
|
79
|
-
` :
|
|
80
|
-
html `<svg
|
|
81
|
-
width="15"
|
|
82
|
-
height="15"
|
|
83
|
-
viewBox="0 0 15 15"
|
|
84
|
-
fill="none"
|
|
85
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
86
|
-
>
|
|
87
|
-
<path
|
|
88
|
-
d="M14 7.5C14 11.0899 11.0899 14 7.5 14C3.91015 14 1 11.0899 1 7.5C1 3.91015 3.91015 1 7.5 1C11.0899 1 14 3.91015 14 7.5Z"
|
|
89
|
-
fill="white"
|
|
90
|
-
stroke="#4250f0"
|
|
91
|
-
stroke-width="2"
|
|
92
|
-
/>
|
|
93
|
-
<path
|
|
94
|
-
fill-rule="evenodd"
|
|
95
|
-
clip-rule="evenodd"
|
|
96
|
-
d="M7.5 11C9.433 11 11 9.433 11 7.5C11 5.567 9.433 4 7.5 4C5.567 4 4 5.567 4 7.5C4 9.433 5.567 11 7.5 11Z"
|
|
97
|
-
fill="#4250f0"
|
|
98
|
-
/>
|
|
99
115
|
</svg>
|
|
100
116
|
`}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
>
|
|
110
|
-
<path
|
|
111
|
-
d="M14 7.5C14 11.0899 11.0899 14 7.5 14C3.91015 14 1 11.0899 1 7.5C1 3.91015 3.91015 1 7.5 1C11.0899 1 14 3.91015 14 7.5Z"
|
|
112
|
-
fill="white"
|
|
113
|
-
stroke="#E2E0DB"
|
|
114
|
-
stroke-width="2"
|
|
115
|
-
/>
|
|
116
|
-
</svg>
|
|
117
|
-
`}
|
|
118
|
-
</div>
|
|
119
|
-
<div class=${styles.textDiv}>
|
|
120
|
-
<div class=${styles.text}>${value}</div>
|
|
121
|
-
${description &&
|
|
122
|
-
html`<div class=${styles.description}>${description}</div>`}
|
|
123
|
-
</div>
|
|
124
|
-
</label>
|
|
117
|
+
</div>
|
|
118
|
+
<div class=${styles.textDiv}>
|
|
119
|
+
<div class=${styles.text}>${value}</div>
|
|
120
|
+
${description &&
|
|
121
|
+
html`<div class=${styles.description}>${description}</div>`}
|
|
122
|
+
</div>
|
|
123
|
+
</label>
|
|
124
|
+
</div>
|
|
125
125
|
</div>
|
|
126
|
-
</div>
|
|
127
126
|
<//>
|
|
128
127
|
`;
|
|
129
128
|
};
|
|
@@ -23,10 +23,19 @@ type FunctionFieldProps = {
|
|
|
23
23
|
apiHandler?: any;
|
|
24
24
|
isArray?: boolean; // New prop for array support
|
|
25
25
|
tagsTree?: any;
|
|
26
|
+
isReadOnly?: boolean;
|
|
26
27
|
};
|
|
27
28
|
|
|
28
29
|
const FunctionField = (props: FunctionFieldProps) => {
|
|
29
|
-
const {
|
|
30
|
+
const {
|
|
31
|
+
value,
|
|
32
|
+
label,
|
|
33
|
+
description,
|
|
34
|
+
field,
|
|
35
|
+
isArray = false,
|
|
36
|
+
tagsTree,
|
|
37
|
+
isReadOnly,
|
|
38
|
+
} = props;
|
|
30
39
|
const [isOpen, setIsOpen] = useState(false);
|
|
31
40
|
const [editingIndex, setEditingIndex] = useState<number | null>(null);
|
|
32
41
|
const [selectedFunction, setSelectedFunction] = useState<string>('');
|
|
@@ -350,6 +359,7 @@ const FunctionField = (props: FunctionFieldProps) => {
|
|
|
350
359
|
onAuthDeleted=${handleAuthDeleted}
|
|
351
360
|
selectedAuthId=${selectedAuthId}
|
|
352
361
|
loginUrl=${functionDetails.meta.app.login_url}
|
|
362
|
+
isReadOnly=${isReadOnly}
|
|
353
363
|
/>
|
|
354
364
|
`;
|
|
355
365
|
}
|
|
@@ -425,6 +435,7 @@ const FunctionField = (props: FunctionFieldProps) => {
|
|
|
425
435
|
>
|
|
426
436
|
<button
|
|
427
437
|
type="button"
|
|
438
|
+
disabled=${isReadOnly}
|
|
428
439
|
class=${styles.functionFieldDeleteBtn ||
|
|
429
440
|
'function-field-delete-btn'}
|
|
430
441
|
onClick=${(e: any) => {
|
|
@@ -462,7 +473,7 @@ const FunctionField = (props: FunctionFieldProps) => {
|
|
|
462
473
|
'function-field-edit-btn'}
|
|
463
474
|
onClick=${() => handleEditAction(index)}
|
|
464
475
|
>
|
|
465
|
-
Edit
|
|
476
|
+
${isReadOnly ? 'View' : 'Edit'}
|
|
466
477
|
</button>
|
|
467
478
|
</div>
|
|
468
479
|
</div>
|
|
@@ -563,6 +574,7 @@ const FunctionField = (props: FunctionFieldProps) => {
|
|
|
563
574
|
>
|
|
564
575
|
<button
|
|
565
576
|
type="button"
|
|
577
|
+
disabled=${isReadOnly}
|
|
566
578
|
class=${styles.functionFieldAddBtn || 'function-field-add-btn'}
|
|
567
579
|
onClick=${handleOpenModal}
|
|
568
580
|
>
|
|
@@ -590,7 +602,9 @@ const FunctionField = (props: FunctionFieldProps) => {
|
|
|
590
602
|
class=${styles.functionFieldModalTitle ||
|
|
591
603
|
'function-field-modal-title'}
|
|
592
604
|
>
|
|
593
|
-
${editingIndex !== null
|
|
605
|
+
${editingIndex !== null
|
|
606
|
+
? `${isReadOnly ? 'View' : 'Edit'} action`
|
|
607
|
+
: 'Add action'}
|
|
594
608
|
</h3>
|
|
595
609
|
<p
|
|
596
610
|
class=${styles.functionFieldModalDescription ||
|
|
@@ -757,7 +771,8 @@ const FunctionField = (props: FunctionFieldProps) => {
|
|
|
757
771
|
onClick=${handleSave}
|
|
758
772
|
disabled=${!selectedFunction ||
|
|
759
773
|
formHasInvalidFields ||
|
|
760
|
-
!connectedAccountId
|
|
774
|
+
!connectedAccountId ||
|
|
775
|
+
isReadOnly}
|
|
761
776
|
>
|
|
762
777
|
Save
|
|
763
778
|
</button>
|
|
@@ -24,6 +24,14 @@
|
|
|
24
24
|
background-color: #4250f0;
|
|
25
25
|
color: white;
|
|
26
26
|
}
|
|
27
|
+
&:disabled {
|
|
28
|
+
opacity: 0.5;
|
|
29
|
+
cursor: not-allowed;
|
|
30
|
+
&:hover {
|
|
31
|
+
background-color: white;
|
|
32
|
+
color: #4250f0;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
27
35
|
}
|
|
28
36
|
|
|
29
37
|
.functionFieldSummary {
|
|
@@ -277,6 +285,9 @@
|
|
|
277
285
|
&:disabled {
|
|
278
286
|
opacity: 0.5;
|
|
279
287
|
cursor: not-allowed;
|
|
288
|
+
&:hover {
|
|
289
|
+
background-color: #4250f0;
|
|
290
|
+
}
|
|
280
291
|
}
|
|
281
292
|
}
|
|
282
293
|
|
|
@@ -440,6 +451,14 @@
|
|
|
440
451
|
background-color: #fee2e2;
|
|
441
452
|
color: #ef4444;
|
|
442
453
|
}
|
|
454
|
+
&:disabled {
|
|
455
|
+
opacity: 0.5;
|
|
456
|
+
cursor: not-allowed;
|
|
457
|
+
&:hover {
|
|
458
|
+
background-color: transparent;
|
|
459
|
+
color: #6b7280;
|
|
460
|
+
}
|
|
461
|
+
}
|
|
443
462
|
}
|
|
444
463
|
|
|
445
464
|
.functionFieldEditBtn {
|
|
@@ -30,6 +30,7 @@ interface AuthSelectorPropsType extends StoreType {
|
|
|
30
30
|
appName?: string;
|
|
31
31
|
onAuthCreated?(auth: Authorization): void;
|
|
32
32
|
onAuthDeleted?(authId: number): void;
|
|
33
|
+
isReadOnly?: boolean;
|
|
33
34
|
}
|
|
34
35
|
|
|
35
36
|
interface AuthSelectorStateType {
|
|
@@ -87,18 +88,15 @@ const AuthorizationRow = (props: {
|
|
|
87
88
|
? styles.isCheckBoxSelected
|
|
88
89
|
: ''}"
|
|
89
90
|
>
|
|
90
|
-
${isReadOnly &&
|
|
91
|
-
html`<span
|
|
92
|
-
class=${styles.readonlyHint}
|
|
93
|
-
data-hint=${isReadOnly ? `Cannot modify user selection` : ''}
|
|
94
|
-
></span>`}
|
|
91
|
+
${isReadOnly && html`<span class=${styles.readonlyHint}></span>`}
|
|
95
92
|
<div class=${`${styles.radio} ${isReadOnly ? styles.readonly : ''}`}>
|
|
96
93
|
<${Radio}
|
|
97
94
|
id=${id}
|
|
98
95
|
value=${value}
|
|
99
96
|
isChecked=${isChecked}
|
|
100
97
|
onChange=${handleChange}
|
|
101
|
-
isDisabled=${
|
|
98
|
+
isDisabled=${isReadOnly}
|
|
99
|
+
isReadOnly=${isReadOnly}
|
|
102
100
|
className="authRadio"
|
|
103
101
|
/>
|
|
104
102
|
</div>
|
|
@@ -275,6 +273,7 @@ class AuthSelectorV2 extends Component<
|
|
|
275
273
|
: this.setState({ willDeleteAuthWithIndex: null })}
|
|
276
274
|
handleWillDelete=${() => this.willDelete(index)}
|
|
277
275
|
isDeleting=${this.state.isDeleting}
|
|
276
|
+
isReadOnly=${this.props.isReadOnly}
|
|
278
277
|
/>`,
|
|
279
278
|
)}
|
|
280
279
|
</div>
|
|
@@ -286,7 +285,7 @@ class AuthSelectorV2 extends Component<
|
|
|
286
285
|
position="bottom-right"
|
|
287
286
|
deltaY=${0}
|
|
288
287
|
>
|
|
289
|
-
${
|
|
288
|
+
${!this.props.isReadOnly &&
|
|
290
289
|
html`<div
|
|
291
290
|
data-hint=${this.props.genericData.isPreviewMode &&
|
|
292
291
|
'New accounts cannot be added in preview mode'}
|
package/src/index.ts
CHANGED
|
@@ -2002,6 +2002,7 @@ export class IntegryJS {
|
|
|
2002
2002
|
// Placeholder function for future implementation
|
|
2003
2003
|
},
|
|
2004
2004
|
showMappingMenu: false,
|
|
2005
|
+
isReadOnly: false,
|
|
2005
2006
|
},
|
|
2006
2007
|
) => {
|
|
2007
2008
|
const target = document.getElementById(options.containerId);
|
|
@@ -2031,6 +2032,7 @@ export class IntegryJS {
|
|
|
2031
2032
|
onFieldChangeCallback=${options.onFieldChangeCallback}
|
|
2032
2033
|
tagsTree=${options.tagsTree}
|
|
2033
2034
|
showMappingMenu=${options.showMappingMenu}
|
|
2035
|
+
isReadOnly=${options.isReadOnly}
|
|
2034
2036
|
/>
|
|
2035
2037
|
<//>
|
|
2036
2038
|
<//>
|
package/src/types/index.ts
CHANGED
|
@@ -297,6 +297,7 @@ export type RenderFlowStepOptions = {
|
|
|
297
297
|
onFieldChangeCallback: (fieldId: string, value: any) => void;
|
|
298
298
|
tagsTree: any;
|
|
299
299
|
showMappingMenu?: boolean;
|
|
300
|
+
isReadOnly?: boolean;
|
|
300
301
|
};
|
|
301
302
|
export type RenderMappingMenuOptions = {
|
|
302
303
|
containerId: string;
|