@uniformdev/context-ui 19.95.0 → 19.96.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/dist/index.d.mts +28 -28
- package/dist/index.d.ts +28 -28
- package/dist/index.esm.js +334 -334
- package/dist/index.js +345 -345
- package/dist/index.mjs +334 -334
- package/package.json +5 -5
package/dist/index.mjs
CHANGED
|
@@ -2,18 +2,188 @@
|
|
|
2
2
|
import { jsx } from "@emotion/react";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
|
|
5
|
+
// src/components/AbTestSelector/AbTestSelector.tsx
|
|
6
|
+
import { css } from "@emotion/react";
|
|
7
|
+
import {
|
|
8
|
+
AddListButton,
|
|
9
|
+
Button,
|
|
10
|
+
Callout,
|
|
11
|
+
Heading,
|
|
12
|
+
Link,
|
|
13
|
+
LoadingIndicator,
|
|
14
|
+
ScrollableList,
|
|
15
|
+
ScrollableListItem
|
|
16
|
+
} from "@uniformdev/design-system";
|
|
17
|
+
import { useState as useState2 } from "react";
|
|
18
|
+
|
|
19
|
+
// src/hooks/useABTests.ts
|
|
20
|
+
import { ApiClientError, CachedTestClient } from "@uniformdev/context/api";
|
|
21
|
+
import { useEffect, useState } from "react";
|
|
22
|
+
function useABTests({ apiHost, apiKey, projectId }) {
|
|
23
|
+
const [reload, setReload] = useState(true);
|
|
24
|
+
const [state, setState] = useState({
|
|
25
|
+
loading: false,
|
|
26
|
+
notConfigured: false,
|
|
27
|
+
error: null,
|
|
28
|
+
result: null
|
|
29
|
+
});
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (!projectId || !apiKey || !apiHost) {
|
|
32
|
+
setState({ notConfigured: true, loading: false, error: null, result: null });
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
const runEffect = async () => {
|
|
36
|
+
setState({ notConfigured: false, loading: true, error: null, result: null });
|
|
37
|
+
try {
|
|
38
|
+
const client = new CachedTestClient({
|
|
39
|
+
projectId,
|
|
40
|
+
apiKey,
|
|
41
|
+
apiHost
|
|
42
|
+
});
|
|
43
|
+
const { tests } = await client.get();
|
|
44
|
+
setState({ notConfigured: false, loading: false, error: null, result: tests });
|
|
45
|
+
} catch (e) {
|
|
46
|
+
let message;
|
|
47
|
+
if (e instanceof ApiClientError) {
|
|
48
|
+
message = e.message;
|
|
49
|
+
} else {
|
|
50
|
+
message = e.toString();
|
|
51
|
+
}
|
|
52
|
+
setState({ notConfigured: false, loading: false, error: message, result: null });
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
if (reload) {
|
|
57
|
+
runEffect().then(() => {
|
|
58
|
+
setReload(false);
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
}, [apiHost, apiKey, projectId, reload]);
|
|
62
|
+
return {
|
|
63
|
+
result: state.result,
|
|
64
|
+
error: state.error,
|
|
65
|
+
loading: state.loading,
|
|
66
|
+
notConfigured: state.notConfigured,
|
|
67
|
+
doReload: () => setReload(true)
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// src/components/AbTestSelector/AbTestSelector.tsx
|
|
72
|
+
import { Fragment, jsx as jsx2, jsxs } from "@emotion/react/jsx-runtime";
|
|
73
|
+
var addAbTestLink = css`
|
|
74
|
+
flex: 2;
|
|
75
|
+
display: flex;
|
|
76
|
+
width: 50%;
|
|
77
|
+
align-items: center;
|
|
78
|
+
font-weight: var(--fw-bold);
|
|
79
|
+
color: var(--brand-primary-1);
|
|
80
|
+
&:hover,
|
|
81
|
+
&:focus {
|
|
82
|
+
text-decoration-line: underline;
|
|
83
|
+
}
|
|
84
|
+
`;
|
|
85
|
+
var AbTestList = ({ contextConfig, onSelect, value }) => {
|
|
86
|
+
const { loading, result, doReload = () => {
|
|
87
|
+
} } = useABTests(contextConfig);
|
|
88
|
+
if (loading) {
|
|
89
|
+
return /* @__PURE__ */ jsx2(LoadingIndicator, {});
|
|
90
|
+
}
|
|
91
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
92
|
+
/* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(Link, { text: "Refresh A/B Test list", style: { marginRight: "10px" }, onClick: () => doReload() }) }),
|
|
93
|
+
!result || result.length === 0 ? /* @__PURE__ */ jsx2(NoAbTestsView, { contextConfig }) : /* @__PURE__ */ jsxs("div", { style: { marginTop: "10px" }, children: [
|
|
94
|
+
/* @__PURE__ */ jsx2(ScrollableList, { children: result.map((abTest) => {
|
|
95
|
+
const { id, name } = abTest;
|
|
96
|
+
return /* @__PURE__ */ jsx2(
|
|
97
|
+
ScrollableListItem,
|
|
98
|
+
{
|
|
99
|
+
buttonText: name,
|
|
100
|
+
active: id === (value == null ? void 0 : value.id),
|
|
101
|
+
onClick: () => onSelect(abTest)
|
|
102
|
+
},
|
|
103
|
+
id
|
|
104
|
+
);
|
|
105
|
+
}) }),
|
|
106
|
+
/* @__PURE__ */ jsx2(
|
|
107
|
+
AddListButton,
|
|
108
|
+
{
|
|
109
|
+
className: "add-more",
|
|
110
|
+
onButtonClick: () => {
|
|
111
|
+
window.open(
|
|
112
|
+
`${contextConfig.apiHost}/projects/${encodeURIComponent(contextConfig.projectId)}/testing`,
|
|
113
|
+
"_blank"
|
|
114
|
+
);
|
|
115
|
+
},
|
|
116
|
+
buttonText: "Add new A/B Test"
|
|
117
|
+
}
|
|
118
|
+
)
|
|
119
|
+
] })
|
|
120
|
+
] });
|
|
121
|
+
};
|
|
122
|
+
var AbTestSelector = ({ value, setValue, contextConfig, loading }) => {
|
|
123
|
+
var _a;
|
|
124
|
+
const [showAbTests, setShowAbTests] = useState2(false);
|
|
125
|
+
if (loading) {
|
|
126
|
+
return /* @__PURE__ */ jsx2(LoadingIndicator, {});
|
|
127
|
+
}
|
|
128
|
+
return /* @__PURE__ */ jsx2("fieldset", { className: "ab-test", children: /* @__PURE__ */ jsxs("div", { children: [
|
|
129
|
+
!showAbTests && /* @__PURE__ */ jsxs("div", { children: [
|
|
130
|
+
value && Object.keys(value).length > 0 && /* @__PURE__ */ jsx2(Heading, { level: 4, style: { marginBottom: "10px" }, children: (_a = value == null ? void 0 : value.name) != null ? _a : "Unknown test" }),
|
|
131
|
+
/* @__PURE__ */ jsx2(Button, { buttonType: "primary", style: { marginRight: "10px" }, onClick: () => setShowAbTests(true), children: "Select A/B Test" })
|
|
132
|
+
] }),
|
|
133
|
+
showAbTests && /* @__PURE__ */ jsx2(
|
|
134
|
+
AbTestList,
|
|
135
|
+
{
|
|
136
|
+
contextConfig,
|
|
137
|
+
onSelect: (abTest) => {
|
|
138
|
+
if ((value == null ? void 0 : value.id) === abTest.id) {
|
|
139
|
+
setValue(void 0);
|
|
140
|
+
setShowAbTests(true);
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
setValue(abTest);
|
|
144
|
+
setShowAbTests(false);
|
|
145
|
+
},
|
|
146
|
+
value
|
|
147
|
+
}
|
|
148
|
+
)
|
|
149
|
+
] }) });
|
|
150
|
+
};
|
|
151
|
+
var NoAbTestsView = ({ contextConfig }) => /* @__PURE__ */ jsx2(
|
|
152
|
+
Callout,
|
|
153
|
+
{
|
|
154
|
+
title: "No A/B tests found in your Uniform project.",
|
|
155
|
+
type: "caution",
|
|
156
|
+
css: { marginBlock: "var(--spacing-base)" },
|
|
157
|
+
children: /* @__PURE__ */ jsxs("p", { children: [
|
|
158
|
+
"Looks like you do not have any A/B tests created in your connected Uniform project. Start by creating your first test",
|
|
159
|
+
" ",
|
|
160
|
+
/* @__PURE__ */ jsx2(
|
|
161
|
+
"a",
|
|
162
|
+
{
|
|
163
|
+
href: `${contextConfig.apiHost}/projects/${encodeURIComponent(contextConfig.projectId)}/testing`,
|
|
164
|
+
target: "_blank",
|
|
165
|
+
rel: "noopener noreferrer",
|
|
166
|
+
css: { ":hover": { textDecorationLine: "underline" } },
|
|
167
|
+
children: "here"
|
|
168
|
+
}
|
|
169
|
+
),
|
|
170
|
+
"."
|
|
171
|
+
] })
|
|
172
|
+
}
|
|
173
|
+
);
|
|
174
|
+
|
|
5
175
|
// src/components/CriteriaOperatorMenu/CriteriaOperatorMenu.tsx
|
|
6
176
|
import { InputComboBox } from "@uniformdev/design-system";
|
|
7
177
|
|
|
8
178
|
// src/components/CriteriaOperatorMenu/OperatorBubble.tsx
|
|
9
|
-
import { css } from "@emotion/react";
|
|
10
|
-
import { jsx as
|
|
179
|
+
import { css as css2 } from "@emotion/react";
|
|
180
|
+
import { jsx as jsx3 } from "@emotion/react/jsx-runtime";
|
|
11
181
|
function OperatorBubble({ op }) {
|
|
12
|
-
return /* @__PURE__ */
|
|
182
|
+
return /* @__PURE__ */ jsx3(
|
|
13
183
|
"div",
|
|
14
184
|
{
|
|
15
185
|
className: "operation-bubble",
|
|
16
|
-
css:
|
|
186
|
+
css: css2`
|
|
17
187
|
align-items: center;
|
|
18
188
|
background: var(--gray-700);
|
|
19
189
|
border-radius: var(--rounded-full);
|
|
@@ -30,12 +200,12 @@ function OperatorBubble({ op }) {
|
|
|
30
200
|
}
|
|
31
201
|
|
|
32
202
|
// src/components/CriteriaOperatorMenu/CriteriaOperatorOption.tsx
|
|
33
|
-
import { jsx as
|
|
203
|
+
import { jsx as jsx4, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
|
|
34
204
|
var CriteriaOperatorOption = (props) => {
|
|
35
205
|
var _a, _b;
|
|
36
206
|
const { data, getStyles, isDisabled, innerRef, innerProps } = props;
|
|
37
207
|
const [name, description] = (_b = (_a = data.label) == null ? void 0 : _a.split(":")) != null ? _b : [];
|
|
38
|
-
return /* @__PURE__ */
|
|
208
|
+
return /* @__PURE__ */ jsxs2(
|
|
39
209
|
"div",
|
|
40
210
|
{
|
|
41
211
|
css: {
|
|
@@ -48,7 +218,7 @@ var CriteriaOperatorOption = (props) => {
|
|
|
48
218
|
"aria-disabled": isDisabled,
|
|
49
219
|
...innerProps,
|
|
50
220
|
children: [
|
|
51
|
-
description ? /* @__PURE__ */
|
|
221
|
+
description ? /* @__PURE__ */ jsx4(OperatorBubble, { op: name }) : /* @__PURE__ */ jsx4(
|
|
52
222
|
"div",
|
|
53
223
|
{
|
|
54
224
|
css: {
|
|
@@ -57,30 +227,30 @@ var CriteriaOperatorOption = (props) => {
|
|
|
57
227
|
}
|
|
58
228
|
}
|
|
59
229
|
),
|
|
60
|
-
/* @__PURE__ */
|
|
230
|
+
/* @__PURE__ */ jsx4("div", { children: description != null ? description : name })
|
|
61
231
|
]
|
|
62
232
|
}
|
|
63
233
|
);
|
|
64
234
|
};
|
|
65
235
|
|
|
66
236
|
// src/components/CriteriaOperatorMenu/CriteriaOperatorSingleValue.tsx
|
|
67
|
-
import { jsx as
|
|
237
|
+
import { jsx as jsx5 } from "@emotion/react/jsx-runtime";
|
|
68
238
|
var CriteriaOperatorSingleValue = (props) => {
|
|
69
239
|
const { data, getStyles } = props;
|
|
70
|
-
return /* @__PURE__ */
|
|
240
|
+
return /* @__PURE__ */ jsx5(
|
|
71
241
|
"div",
|
|
72
242
|
{
|
|
73
243
|
css: {
|
|
74
244
|
...getStyles("singleValue", props),
|
|
75
245
|
width: "max-content"
|
|
76
246
|
},
|
|
77
|
-
children: data.label.length === 1 ? /* @__PURE__ */
|
|
247
|
+
children: data.label.length === 1 ? /* @__PURE__ */ jsx5(OperatorBubble, { op: data.label }) : data.label
|
|
78
248
|
}
|
|
79
249
|
);
|
|
80
250
|
};
|
|
81
251
|
|
|
82
252
|
// src/components/CriteriaOperatorMenu/CriteriaOperatorMenu.tsx
|
|
83
|
-
import { jsx as
|
|
253
|
+
import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
|
|
84
254
|
var contextCriteriaMenuOperators = [
|
|
85
255
|
{
|
|
86
256
|
name: "=",
|
|
@@ -123,7 +293,7 @@ var contextCriteriaMenuOperators = [
|
|
|
123
293
|
];
|
|
124
294
|
function CriteriaOperatorMenu({ onChange, value, ...props }) {
|
|
125
295
|
var _a, _b;
|
|
126
|
-
return /* @__PURE__ */
|
|
296
|
+
return /* @__PURE__ */ jsx6(
|
|
127
297
|
InputComboBox,
|
|
128
298
|
{
|
|
129
299
|
...props,
|
|
@@ -185,20 +355,20 @@ function CriteriaOperatorMenu({ onChange, value, ...props }) {
|
|
|
185
355
|
}
|
|
186
356
|
|
|
187
357
|
// src/components/DataContext/DataContext.tsx
|
|
188
|
-
import { LoadingIndicator } from "@uniformdev/design-system";
|
|
358
|
+
import { LoadingIndicator as LoadingIndicator2 } from "@uniformdev/design-system";
|
|
189
359
|
import { createContext, useContext } from "react";
|
|
190
360
|
|
|
191
361
|
// src/hooks/useContextData.ts
|
|
192
|
-
import { ApiClientError, CachedManifestClient } from "@uniformdev/context/api";
|
|
193
|
-
import { useEffect, useState } from "react";
|
|
362
|
+
import { ApiClientError as ApiClientError2, CachedManifestClient } from "@uniformdev/context/api";
|
|
363
|
+
import { useEffect as useEffect2, useState as useState3 } from "react";
|
|
194
364
|
function useContextData({ apiHost, apiKey, projectId }) {
|
|
195
|
-
const [state, setState] =
|
|
365
|
+
const [state, setState] = useState3({
|
|
196
366
|
loading: false,
|
|
197
367
|
notConfigured: false,
|
|
198
368
|
error: null,
|
|
199
369
|
result: null
|
|
200
370
|
});
|
|
201
|
-
|
|
371
|
+
useEffect2(() => {
|
|
202
372
|
if (!projectId || !apiKey || !apiHost) {
|
|
203
373
|
setState({ notConfigured: true, loading: false, error: null, result: null });
|
|
204
374
|
return;
|
|
@@ -215,7 +385,7 @@ function useContextData({ apiHost, apiKey, projectId }) {
|
|
|
215
385
|
setState({ notConfigured: false, loading: false, error: null, result });
|
|
216
386
|
} catch (e) {
|
|
217
387
|
let message;
|
|
218
|
-
if (e instanceof
|
|
388
|
+
if (e instanceof ApiClientError2) {
|
|
219
389
|
if (e.statusCode === 403) {
|
|
220
390
|
message = `The API key ${apiKey} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`;
|
|
221
391
|
}
|
|
@@ -238,8 +408,8 @@ function useContextData({ apiHost, apiKey, projectId }) {
|
|
|
238
408
|
}
|
|
239
409
|
|
|
240
410
|
// src/hooks/useDimensions.ts
|
|
241
|
-
import { ApiClientError as
|
|
242
|
-
import { useEffect as
|
|
411
|
+
import { ApiClientError as ApiClientError3, CachedDimensionClient, computeDimensionDisplayName } from "@uniformdev/context/api";
|
|
412
|
+
import { useEffect as useEffect3, useState as useState4 } from "react";
|
|
243
413
|
|
|
244
414
|
// src/utils/objectify.ts
|
|
245
415
|
function objectify(array2, keySelector, valueSelector) {
|
|
@@ -255,13 +425,13 @@ function objectify(array2, keySelector, valueSelector) {
|
|
|
255
425
|
|
|
256
426
|
// src/hooks/useDimensions.ts
|
|
257
427
|
function useDimensions({ apiHost, apiKey, projectId }) {
|
|
258
|
-
const [state, setState] =
|
|
428
|
+
const [state, setState] = useState4({
|
|
259
429
|
loading: false,
|
|
260
430
|
notConfigured: false,
|
|
261
431
|
error: null,
|
|
262
432
|
result: null
|
|
263
433
|
});
|
|
264
|
-
|
|
434
|
+
useEffect3(() => {
|
|
265
435
|
if (!projectId || !apiKey || !apiHost) {
|
|
266
436
|
setState({ notConfigured: true, loading: false, error: null, result: null });
|
|
267
437
|
return;
|
|
@@ -289,7 +459,7 @@ function useDimensions({ apiHost, apiKey, projectId }) {
|
|
|
289
459
|
setState({ notConfigured: false, loading: false, error: null, result });
|
|
290
460
|
} catch (e) {
|
|
291
461
|
let message;
|
|
292
|
-
if (e instanceof
|
|
462
|
+
if (e instanceof ApiClientError3) {
|
|
293
463
|
message = e.message;
|
|
294
464
|
} else {
|
|
295
465
|
message = e.toString();
|
|
@@ -309,7 +479,7 @@ function useDimensions({ apiHost, apiKey, projectId }) {
|
|
|
309
479
|
}
|
|
310
480
|
|
|
311
481
|
// src/components/DataContext/DataContext.tsx
|
|
312
|
-
import { Fragment, jsx as
|
|
482
|
+
import { Fragment as Fragment2, jsx as jsx7 } from "@emotion/react/jsx-runtime";
|
|
313
483
|
var ContextDataContext = createContext(null);
|
|
314
484
|
var ContextData = ({
|
|
315
485
|
loadingComponent: LoadingComponent,
|
|
@@ -321,23 +491,23 @@ var ContextData = ({
|
|
|
321
491
|
const dimensionsData = useDimensions(contextConfig);
|
|
322
492
|
if (contextData.error || contextData.notConfigured) {
|
|
323
493
|
if (ErrorComponent)
|
|
324
|
-
return /* @__PURE__ */
|
|
494
|
+
return /* @__PURE__ */ jsx7(ErrorComponent, { contextConfig, result: contextData });
|
|
325
495
|
else
|
|
326
|
-
return /* @__PURE__ */
|
|
496
|
+
return /* @__PURE__ */ jsx7(Fragment2, { children: "ErrorComponent is not configured" });
|
|
327
497
|
}
|
|
328
498
|
if (dimensionsData.error || dimensionsData.notConfigured) {
|
|
329
499
|
if (ErrorComponent)
|
|
330
|
-
return /* @__PURE__ */
|
|
500
|
+
return /* @__PURE__ */ jsx7(ErrorComponent, { contextConfig, result: dimensionsData });
|
|
331
501
|
else
|
|
332
|
-
return /* @__PURE__ */
|
|
502
|
+
return /* @__PURE__ */ jsx7(Fragment2, { children: "ErrorComponent is not configured" });
|
|
333
503
|
}
|
|
334
504
|
if (contextData.loading || dimensionsData.loading) {
|
|
335
505
|
if (LoadingComponent)
|
|
336
|
-
return /* @__PURE__ */
|
|
506
|
+
return /* @__PURE__ */ jsx7(LoadingComponent, {});
|
|
337
507
|
else
|
|
338
|
-
return /* @__PURE__ */
|
|
508
|
+
return /* @__PURE__ */ jsx7(LoadingIndicator2, {});
|
|
339
509
|
}
|
|
340
|
-
return /* @__PURE__ */
|
|
510
|
+
return /* @__PURE__ */ jsx7(
|
|
341
511
|
ContextDataContext.Provider,
|
|
342
512
|
{
|
|
343
513
|
value: { manifest: contextData.result, dimensions: dimensionsData.result, contextConfig },
|
|
@@ -369,7 +539,7 @@ function useDimensionsDataContext() {
|
|
|
369
539
|
|
|
370
540
|
// src/components/DimensionMenu/CriteriaMatchMenu.tsx
|
|
371
541
|
import { InputComboBox as InputComboBox3 } from "@uniformdev/design-system";
|
|
372
|
-
import { useState as
|
|
542
|
+
import { useState as useState5 } from "react";
|
|
373
543
|
|
|
374
544
|
// src/components/DimensionMenu/DimensionGroupHeading.tsx
|
|
375
545
|
import { Icon } from "@uniformdev/design-system";
|
|
@@ -413,11 +583,11 @@ function groupDimensions(dimensions) {
|
|
|
413
583
|
}
|
|
414
584
|
|
|
415
585
|
// src/components/DimensionMenu/DimensionGroupHeading.tsx
|
|
416
|
-
import { jsx as
|
|
586
|
+
import { jsx as jsx8, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
|
|
417
587
|
var DimensionGroupHeading = (props) => {
|
|
418
588
|
var _a;
|
|
419
589
|
const { data, getStyles, className } = props;
|
|
420
|
-
return /* @__PURE__ */
|
|
590
|
+
return /* @__PURE__ */ jsx8(
|
|
421
591
|
"div",
|
|
422
592
|
{
|
|
423
593
|
css: {
|
|
@@ -426,13 +596,13 @@ var DimensionGroupHeading = (props) => {
|
|
|
426
596
|
fontSize: "var(--font-size-sm)"
|
|
427
597
|
},
|
|
428
598
|
className,
|
|
429
|
-
children: /* @__PURE__ */
|
|
599
|
+
children: /* @__PURE__ */ jsxs3(
|
|
430
600
|
"small",
|
|
431
601
|
{
|
|
432
602
|
css: { color: "var(--gray-500)", display: "flex", alignItems: "center", gap: "var(--spacing-xs)" },
|
|
433
603
|
children: [
|
|
434
|
-
/* @__PURE__ */
|
|
435
|
-
/* @__PURE__ */
|
|
604
|
+
/* @__PURE__ */ jsx8(Icon, { icon: dimensionIcon((_a = data.label) != null ? _a : ""), iconColor: "currentColor", size: 16 }),
|
|
605
|
+
/* @__PURE__ */ jsx8("span", { children: data.label })
|
|
436
606
|
]
|
|
437
607
|
}
|
|
438
608
|
)
|
|
@@ -441,15 +611,15 @@ var DimensionGroupHeading = (props) => {
|
|
|
441
611
|
};
|
|
442
612
|
|
|
443
613
|
// src/components/DimensionMenu/DimensionMenuErrorMessage.tsx
|
|
444
|
-
import { css as
|
|
445
|
-
import { jsx as
|
|
614
|
+
import { css as css3 } from "@emotion/react";
|
|
615
|
+
import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
|
|
446
616
|
function DimensionMenuErrorMessage({ message }) {
|
|
447
617
|
if (!message)
|
|
448
618
|
return null;
|
|
449
|
-
return /* @__PURE__ */
|
|
619
|
+
return /* @__PURE__ */ jsx9(
|
|
450
620
|
"div",
|
|
451
621
|
{
|
|
452
|
-
css:
|
|
622
|
+
css: css3`
|
|
453
623
|
color: var(--brand-primary-2);
|
|
454
624
|
font-size: var(--fs-xs);
|
|
455
625
|
position: absolute;
|
|
@@ -461,12 +631,12 @@ function DimensionMenuErrorMessage({ message }) {
|
|
|
461
631
|
}
|
|
462
632
|
|
|
463
633
|
// src/components/DimensionMenu/DimensionOption.tsx
|
|
464
|
-
import { jsx as
|
|
634
|
+
import { jsx as jsx10 } from "@emotion/react/jsx-runtime";
|
|
465
635
|
var DimensionOption = (props) => {
|
|
466
636
|
var _a, _b;
|
|
467
637
|
const { data, getStyles, cx, isDisabled, isFocused, isSelected, className, innerRef, innerProps } = props;
|
|
468
638
|
const [, value] = (_b = (_a = data.label) == null ? void 0 : _a.split(":")) != null ? _b : [];
|
|
469
|
-
return /* @__PURE__ */
|
|
639
|
+
return /* @__PURE__ */ jsx10(
|
|
470
640
|
"div",
|
|
471
641
|
{
|
|
472
642
|
css: getStyles("option", props),
|
|
@@ -482,17 +652,17 @@ var DimensionOption = (props) => {
|
|
|
482
652
|
ref: innerRef,
|
|
483
653
|
"aria-disabled": isDisabled,
|
|
484
654
|
...innerProps,
|
|
485
|
-
children: /* @__PURE__ */
|
|
655
|
+
children: /* @__PURE__ */ jsx10("div", { css: { color: "var(--gray-700)" }, children: value != null ? value : data.label })
|
|
486
656
|
}
|
|
487
657
|
);
|
|
488
658
|
};
|
|
489
659
|
|
|
490
660
|
// src/components/DimensionMenu/DimensionValue.tsx
|
|
491
661
|
import { Icon as Icon2 } from "@uniformdev/design-system";
|
|
492
|
-
import { jsx as
|
|
662
|
+
import { jsx as jsx11, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
|
|
493
663
|
function DimensionValue({ displayName }) {
|
|
494
664
|
const [type, name] = displayName.split(":");
|
|
495
|
-
return /* @__PURE__ */
|
|
665
|
+
return /* @__PURE__ */ jsxs4(
|
|
496
666
|
"div",
|
|
497
667
|
{
|
|
498
668
|
css: {
|
|
@@ -500,31 +670,31 @@ function DimensionValue({ displayName }) {
|
|
|
500
670
|
overflow: "hidden"
|
|
501
671
|
},
|
|
502
672
|
children: [
|
|
503
|
-
name ? /* @__PURE__ */
|
|
673
|
+
name ? /* @__PURE__ */ jsxs4(
|
|
504
674
|
"small",
|
|
505
675
|
{
|
|
506
676
|
css: { color: "var(--gray-500)", display: "flex", alignItems: "center", gap: "var(--spacing-xs)" },
|
|
507
677
|
children: [
|
|
508
|
-
type ? /* @__PURE__ */
|
|
509
|
-
/* @__PURE__ */
|
|
678
|
+
type ? /* @__PURE__ */ jsx11(Icon2, { icon: dimensionIcon(type), iconColor: "currentColor", size: 16 }) : null,
|
|
679
|
+
/* @__PURE__ */ jsx11("span", { "data-testid": "dimension-name", children: type })
|
|
510
680
|
]
|
|
511
681
|
}
|
|
512
682
|
) : null,
|
|
513
|
-
/* @__PURE__ */
|
|
683
|
+
/* @__PURE__ */ jsx11("div", { css: { color: "var(--gray-700)" }, "data-testid": "dimension-value", children: name != null ? name : type })
|
|
514
684
|
]
|
|
515
685
|
}
|
|
516
686
|
);
|
|
517
687
|
}
|
|
518
688
|
|
|
519
689
|
// src/components/DimensionMenu/DimensionSingleValue.tsx
|
|
520
|
-
import { jsx as
|
|
690
|
+
import { jsx as jsx12 } from "@emotion/react/jsx-runtime";
|
|
521
691
|
var DimensionSingleValue = (props) => {
|
|
522
692
|
const { data, getStyles } = props;
|
|
523
|
-
return /* @__PURE__ */
|
|
693
|
+
return /* @__PURE__ */ jsx12("div", { css: getStyles("singleValue", props), children: /* @__PURE__ */ jsx12(DimensionValue, { displayName: data.label }) });
|
|
524
694
|
};
|
|
525
695
|
|
|
526
696
|
// src/components/DimensionMenu/CriteriaMatchMenu.tsx
|
|
527
|
-
import { Fragment as
|
|
697
|
+
import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
|
|
528
698
|
function CriteriaMatchMenu({
|
|
529
699
|
onChange,
|
|
530
700
|
criteriaMatch,
|
|
@@ -533,13 +703,13 @@ function CriteriaMatchMenu({
|
|
|
533
703
|
...props
|
|
534
704
|
}) {
|
|
535
705
|
var _a, _b;
|
|
536
|
-
const [inputValue, setInputValue] =
|
|
706
|
+
const [inputValue, setInputValue] = useState5(
|
|
537
707
|
typeof criteriaMatch.r !== "undefined" && isInt(criteriaMatch.r) !== null ? criteriaMatch.r.toString(10) : ""
|
|
538
708
|
);
|
|
539
709
|
const rDim = criteriaMatch.rDim;
|
|
540
710
|
const targetDim = criteriaMatch.rDim ? dimensions.dimIndex[criteriaMatch.rDim] : void 0;
|
|
541
|
-
return /* @__PURE__ */
|
|
542
|
-
/* @__PURE__ */
|
|
711
|
+
return /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
712
|
+
/* @__PURE__ */ jsx13(
|
|
543
713
|
InputComboBox3,
|
|
544
714
|
{
|
|
545
715
|
...props,
|
|
@@ -606,26 +776,26 @@ function CriteriaMatchMenu({
|
|
|
606
776
|
},
|
|
607
777
|
noOptionsMessage: ({ inputValue: inputValue2 }) => {
|
|
608
778
|
if (isInt(inputValue2)) {
|
|
609
|
-
return /* @__PURE__ */
|
|
610
|
-
/* @__PURE__ */
|
|
779
|
+
return /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
780
|
+
/* @__PURE__ */ jsxs5("div", { children: [
|
|
611
781
|
"Score: ",
|
|
612
782
|
inputValue2
|
|
613
783
|
] }),
|
|
614
|
-
/* @__PURE__ */
|
|
784
|
+
/* @__PURE__ */ jsx13("small", { children: "If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension." })
|
|
615
785
|
] });
|
|
616
786
|
}
|
|
617
|
-
return /* @__PURE__ */
|
|
618
|
-
/* @__PURE__ */
|
|
787
|
+
return /* @__PURE__ */ jsxs5(Fragment3, { children: [
|
|
788
|
+
/* @__PURE__ */ jsxs5("div", { children: [
|
|
619
789
|
"No dimensions match your search \u201C",
|
|
620
790
|
inputValue2,
|
|
621
791
|
"\u201D"
|
|
622
792
|
] }),
|
|
623
|
-
/* @__PURE__ */
|
|
793
|
+
/* @__PURE__ */ jsx13("small", { children: "If you want to match a literal score, enter a numeric value." })
|
|
624
794
|
] });
|
|
625
795
|
}
|
|
626
796
|
}
|
|
627
797
|
),
|
|
628
|
-
/* @__PURE__ */
|
|
798
|
+
/* @__PURE__ */ jsx13(DimensionMenuErrorMessage, { message: errorMessage })
|
|
629
799
|
] });
|
|
630
800
|
}
|
|
631
801
|
function isInt(value) {
|
|
@@ -634,10 +804,10 @@ function isInt(value) {
|
|
|
634
804
|
|
|
635
805
|
// src/components/DimensionMenu/DimensionMenu.tsx
|
|
636
806
|
import { InputComboBox as InputComboBox4 } from "@uniformdev/design-system";
|
|
637
|
-
import { Fragment as
|
|
807
|
+
import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
|
|
638
808
|
function DimensionMenu({ onChange, value, dimensions, errorMessage, ...props }) {
|
|
639
|
-
return /* @__PURE__ */
|
|
640
|
-
/* @__PURE__ */
|
|
809
|
+
return /* @__PURE__ */ jsxs6(Fragment4, { children: [
|
|
810
|
+
/* @__PURE__ */ jsx14(
|
|
641
811
|
InputComboBox4,
|
|
642
812
|
{
|
|
643
813
|
...props,
|
|
@@ -667,7 +837,7 @@ function DimensionMenu({ onChange, value, dimensions, errorMessage, ...props })
|
|
|
667
837
|
}
|
|
668
838
|
}
|
|
669
839
|
),
|
|
670
|
-
/* @__PURE__ */
|
|
840
|
+
/* @__PURE__ */ jsx14(DimensionMenuErrorMessage, { message: errorMessage })
|
|
671
841
|
] });
|
|
672
842
|
}
|
|
673
843
|
|
|
@@ -676,8 +846,8 @@ import { CgChevronRight } from "@react-icons/all-files/cg/CgChevronRight";
|
|
|
676
846
|
import { Icon as Icon3 } from "@uniformdev/design-system";
|
|
677
847
|
|
|
678
848
|
// src/components/EditLink/EditLink.styles.ts
|
|
679
|
-
import { css as
|
|
680
|
-
var editLink =
|
|
849
|
+
import { css as css4 } from "@emotion/react";
|
|
850
|
+
var editLink = css4`
|
|
681
851
|
display: flex;
|
|
682
852
|
align-items: center;
|
|
683
853
|
font-weight: var(--fw-bold);
|
|
@@ -691,9 +861,9 @@ var editLink = css3`
|
|
|
691
861
|
`;
|
|
692
862
|
|
|
693
863
|
// src/components/EditLink/EditLink.tsx
|
|
694
|
-
import { jsx as
|
|
864
|
+
import { jsx as jsx15, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
|
|
695
865
|
var EditLink = ({ linkTo, name, linkText = `Edit ${name} Component` }) => {
|
|
696
|
-
return /* @__PURE__ */
|
|
866
|
+
return /* @__PURE__ */ jsxs7(
|
|
697
867
|
"a",
|
|
698
868
|
{
|
|
699
869
|
css: editLink,
|
|
@@ -703,31 +873,31 @@ var EditLink = ({ linkTo, name, linkText = `Edit ${name} Component` }) => {
|
|
|
703
873
|
href: linkTo,
|
|
704
874
|
children: [
|
|
705
875
|
linkText,
|
|
706
|
-
/* @__PURE__ */
|
|
876
|
+
/* @__PURE__ */ jsx15(Icon3, { icon: CgChevronRight, iconColor: "currentColor", size: "1.5rem" })
|
|
707
877
|
]
|
|
708
878
|
}
|
|
709
879
|
);
|
|
710
880
|
};
|
|
711
881
|
|
|
712
882
|
// src/components/EnrichmentTag/EnrichmentTag.tsx
|
|
713
|
-
import { css as
|
|
883
|
+
import { css as css5 } from "@emotion/react";
|
|
714
884
|
import { CgCloseO } from "@react-icons/all-files/cg/CgCloseO";
|
|
715
885
|
import { CgMathMinus } from "@react-icons/all-files/cg/CgMathMinus";
|
|
716
886
|
import { CgMathPlus } from "@react-icons/all-files/cg/CgMathPlus";
|
|
717
887
|
import { getEnrichmentVectorKey } from "@uniformdev/context";
|
|
718
888
|
import {
|
|
719
|
-
AddListButton,
|
|
720
|
-
Button,
|
|
721
|
-
Callout,
|
|
889
|
+
AddListButton as AddListButton2,
|
|
890
|
+
Button as Button2,
|
|
891
|
+
Callout as Callout2,
|
|
722
892
|
Icon as Icon4,
|
|
723
893
|
Input,
|
|
724
894
|
InputSelect,
|
|
725
|
-
LoadingIndicator as
|
|
895
|
+
LoadingIndicator as LoadingIndicator3
|
|
726
896
|
} from "@uniformdev/design-system";
|
|
727
897
|
import { produce } from "immer";
|
|
728
|
-
import { useMemo, useState as
|
|
729
|
-
import { Fragment as
|
|
730
|
-
var addEnrichmentLink =
|
|
898
|
+
import { useMemo, useState as useState6 } from "react";
|
|
899
|
+
import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
|
|
900
|
+
var addEnrichmentLink = css5`
|
|
731
901
|
flex: 2;
|
|
732
902
|
display: flex;
|
|
733
903
|
width: 50%;
|
|
@@ -758,9 +928,9 @@ var EnrichmentTag = ({
|
|
|
758
928
|
(enr) => !value.some((val) => getEnrichmentVectorKey(val.cat, val.key) === enr.dim)
|
|
759
929
|
);
|
|
760
930
|
}, [allEnrichments, value]);
|
|
761
|
-
const [selectValue, setSelectValue] =
|
|
762
|
-
const [score, setScore] =
|
|
763
|
-
const [showAddNewEnrichmentTagPanel, setShowAddNewEnrichmentTagPanel] =
|
|
931
|
+
const [selectValue, setSelectValue] = useState6("");
|
|
932
|
+
const [score, setScore] = useState6(50);
|
|
933
|
+
const [showAddNewEnrichmentTagPanel, setShowAddNewEnrichmentTagPanel] = useState6(false);
|
|
764
934
|
const selectedEnrichment = allEnrichments == null ? void 0 : allEnrichments.find((dimension) => dimension.dim === selectValue);
|
|
765
935
|
const addEnrichment = () => {
|
|
766
936
|
const [cat, key] = selectValue.split("_");
|
|
@@ -783,21 +953,21 @@ var EnrichmentTag = ({
|
|
|
783
953
|
setValue(finalValue);
|
|
784
954
|
};
|
|
785
955
|
if (error)
|
|
786
|
-
return /* @__PURE__ */
|
|
956
|
+
return /* @__PURE__ */ jsx16(Callout2, { type: "danger", children: error });
|
|
787
957
|
if (loading || dimensions === null)
|
|
788
|
-
return /* @__PURE__ */
|
|
789
|
-
return /* @__PURE__ */
|
|
790
|
-
displayTitle ? /* @__PURE__ */
|
|
791
|
-
!(allEnrichments == null ? void 0 : allEnrichments.length) ? /* @__PURE__ */
|
|
792
|
-
|
|
958
|
+
return /* @__PURE__ */ jsx16(LoadingIndicator3, {});
|
|
959
|
+
return /* @__PURE__ */ jsxs8("fieldset", { className: "enrichment-tag", children: [
|
|
960
|
+
displayTitle ? /* @__PURE__ */ jsx16("div", { css: { display: "flex", justifyContent: "space-between", marginBottom: "var(--spacing-base)" }, children: /* @__PURE__ */ jsx16("legend", { css: { fontSize: "var(--fs-md)", fontWeight: "var(--fw-bold)" }, children: "Enrichment Tags" }) }) : null,
|
|
961
|
+
!(allEnrichments == null ? void 0 : allEnrichments.length) ? /* @__PURE__ */ jsx16(NoEnrichmentsView, { contextConfig }) : !showAddNewEnrichmentTagPanel && !value ? /* @__PURE__ */ jsx16(
|
|
962
|
+
Callout2,
|
|
793
963
|
{
|
|
794
964
|
title: "No enrichment tags assigned.",
|
|
795
965
|
type: "info",
|
|
796
966
|
css: { marginBlock: "var(--spacing-base)" },
|
|
797
|
-
children: /* @__PURE__ */
|
|
967
|
+
children: /* @__PURE__ */ jsxs8("p", { children: [
|
|
798
968
|
"Click",
|
|
799
969
|
" ",
|
|
800
|
-
/* @__PURE__ */
|
|
970
|
+
/* @__PURE__ */ jsx16(
|
|
801
971
|
"a",
|
|
802
972
|
{
|
|
803
973
|
onClick: () => setShowAddNewEnrichmentTagPanel(true),
|
|
@@ -811,9 +981,9 @@ var EnrichmentTag = ({
|
|
|
811
981
|
"to assign your first enrichment tag."
|
|
812
982
|
] })
|
|
813
983
|
}
|
|
814
|
-
) : /* @__PURE__ */
|
|
815
|
-
dimensions && /* @__PURE__ */
|
|
816
|
-
showAddNewEnrichmentTagPanel && remainingEnrichments && remainingEnrichments.length > 0 ? /* @__PURE__ */
|
|
984
|
+
) : /* @__PURE__ */ jsxs8(Fragment5, { children: [
|
|
985
|
+
dimensions && /* @__PURE__ */ jsx16(SelectedEnrichments, { list: value != null ? value : [], setList: update, dimIndex: dimensions.dimIndex }),
|
|
986
|
+
showAddNewEnrichmentTagPanel && remainingEnrichments && remainingEnrichments.length > 0 ? /* @__PURE__ */ jsxs8(
|
|
817
987
|
"div",
|
|
818
988
|
{
|
|
819
989
|
className: "add-enrichment-tag",
|
|
@@ -825,7 +995,7 @@ var EnrichmentTag = ({
|
|
|
825
995
|
alignItems: "center"
|
|
826
996
|
},
|
|
827
997
|
children: [
|
|
828
|
-
/* @__PURE__ */
|
|
998
|
+
/* @__PURE__ */ jsx16("div", { css: { flexGrow: 1 }, children: /* @__PURE__ */ jsx16(
|
|
829
999
|
InputSelect,
|
|
830
1000
|
{
|
|
831
1001
|
name: `enrichment-type`,
|
|
@@ -842,7 +1012,7 @@ var EnrichmentTag = ({
|
|
|
842
1012
|
onChange: (e) => setSelectValue(e.currentTarget.value)
|
|
843
1013
|
}
|
|
844
1014
|
) }),
|
|
845
|
-
/* @__PURE__ */
|
|
1015
|
+
/* @__PURE__ */ jsx16(
|
|
846
1016
|
ScoreCounter,
|
|
847
1017
|
{
|
|
848
1018
|
score,
|
|
@@ -851,8 +1021,8 @@ var EnrichmentTag = ({
|
|
|
851
1021
|
css: { flexBasis: "9rem" }
|
|
852
1022
|
}
|
|
853
1023
|
),
|
|
854
|
-
/* @__PURE__ */
|
|
855
|
-
|
|
1024
|
+
/* @__PURE__ */ jsx16(
|
|
1025
|
+
Button2,
|
|
856
1026
|
{
|
|
857
1027
|
buttonType: "tertiary",
|
|
858
1028
|
size: "xl",
|
|
@@ -870,21 +1040,21 @@ var EnrichmentTag = ({
|
|
|
870
1040
|
]
|
|
871
1041
|
}
|
|
872
1042
|
) : null,
|
|
873
|
-
/* @__PURE__ */
|
|
1043
|
+
/* @__PURE__ */ jsxs8(
|
|
874
1044
|
"div",
|
|
875
1045
|
{
|
|
876
1046
|
className: "enrichment-cta",
|
|
877
1047
|
style: { paddingTop: "10px", display: "flex", justifyContent: "space-between" },
|
|
878
1048
|
children: [
|
|
879
|
-
!showAddNewEnrichmentTagPanel && remainingEnrichments && remainingEnrichments.length > 0 && value ? /* @__PURE__ */
|
|
880
|
-
|
|
1049
|
+
!showAddNewEnrichmentTagPanel && remainingEnrichments && remainingEnrichments.length > 0 && value ? /* @__PURE__ */ jsx16(
|
|
1050
|
+
AddListButton2,
|
|
881
1051
|
{
|
|
882
1052
|
className: "add-more",
|
|
883
1053
|
buttonText: "Add More",
|
|
884
1054
|
onButtonClick: () => setShowAddNewEnrichmentTagPanel(true)
|
|
885
1055
|
}
|
|
886
|
-
) : /* @__PURE__ */
|
|
887
|
-
/* @__PURE__ */
|
|
1056
|
+
) : /* @__PURE__ */ jsx16("a", { css: addEnrichmentLink, title: `none`, href: "#" }),
|
|
1057
|
+
/* @__PURE__ */ jsx16(
|
|
888
1058
|
EditLink,
|
|
889
1059
|
{
|
|
890
1060
|
name: "Enrichments",
|
|
@@ -900,10 +1070,10 @@ var EnrichmentTag = ({
|
|
|
900
1070
|
] })
|
|
901
1071
|
] });
|
|
902
1072
|
};
|
|
903
|
-
var NoEnrichmentsView = ({ contextConfig }) => /* @__PURE__ */
|
|
1073
|
+
var NoEnrichmentsView = ({ contextConfig }) => /* @__PURE__ */ jsx16(Callout2, { title: "No enrichments found.", type: "caution", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsxs8("p", { children: [
|
|
904
1074
|
"Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment",
|
|
905
1075
|
" ",
|
|
906
|
-
/* @__PURE__ */
|
|
1076
|
+
/* @__PURE__ */ jsx16(
|
|
907
1077
|
"a",
|
|
908
1078
|
{
|
|
909
1079
|
href: `${contextConfig.apiHost}/projects/${encodeURIComponent(
|
|
@@ -920,7 +1090,7 @@ var NoEnrichmentsView = ({ contextConfig }) => /* @__PURE__ */ jsx15(Callout, {
|
|
|
920
1090
|
var getCappedValue = (value, maxCap = 100, minCap = 0) => {
|
|
921
1091
|
return Math.max(Math.min(value, maxCap), minCap);
|
|
922
1092
|
};
|
|
923
|
-
var scoreCounterMinusButtonStyles =
|
|
1093
|
+
var scoreCounterMinusButtonStyles = css5`
|
|
924
1094
|
position: absolute;
|
|
925
1095
|
bottom: 0.875rem;
|
|
926
1096
|
left: var(--spacing-sm);
|
|
@@ -933,7 +1103,7 @@ var scoreCounterMinusButtonStyles = css4`
|
|
|
933
1103
|
border: 1px solid var(--gray-300);
|
|
934
1104
|
border-radius: var(--rounded-full);
|
|
935
1105
|
`;
|
|
936
|
-
var scoreCounterPlusButtonStyles =
|
|
1106
|
+
var scoreCounterPlusButtonStyles = css5`
|
|
937
1107
|
${scoreCounterMinusButtonStyles}
|
|
938
1108
|
left: auto;
|
|
939
1109
|
right: var(--spacing-sm);
|
|
@@ -954,8 +1124,8 @@ var ScoreCounter = ({
|
|
|
954
1124
|
}
|
|
955
1125
|
setValue(newScore);
|
|
956
1126
|
};
|
|
957
|
-
return /* @__PURE__ */
|
|
958
|
-
/* @__PURE__ */
|
|
1127
|
+
return /* @__PURE__ */ jsxs8("div", { css: { position: "relative" }, ...otherProps, children: [
|
|
1128
|
+
/* @__PURE__ */ jsx16(
|
|
959
1129
|
Input,
|
|
960
1130
|
{
|
|
961
1131
|
label: "Strength",
|
|
@@ -968,7 +1138,7 @@ var ScoreCounter = ({
|
|
|
968
1138
|
css: { textAlign: "center", boxSizing: "border-box" }
|
|
969
1139
|
}
|
|
970
1140
|
),
|
|
971
|
-
/* @__PURE__ */
|
|
1141
|
+
/* @__PURE__ */ jsx16(
|
|
972
1142
|
"button",
|
|
973
1143
|
{
|
|
974
1144
|
type: "button",
|
|
@@ -977,10 +1147,10 @@ var ScoreCounter = ({
|
|
|
977
1147
|
disabled: score === 0,
|
|
978
1148
|
className: "scoreCounterButton",
|
|
979
1149
|
css: scoreCounterMinusButtonStyles,
|
|
980
|
-
children: /* @__PURE__ */
|
|
1150
|
+
children: /* @__PURE__ */ jsx16(Icon4, { icon: CgMathMinus, iconColor: "gray", size: "1.5rem" })
|
|
981
1151
|
}
|
|
982
1152
|
),
|
|
983
|
-
/* @__PURE__ */
|
|
1153
|
+
/* @__PURE__ */ jsx16(
|
|
984
1154
|
"button",
|
|
985
1155
|
{
|
|
986
1156
|
type: "button",
|
|
@@ -988,7 +1158,7 @@ var ScoreCounter = ({
|
|
|
988
1158
|
onClick: () => handleCounter("increment"),
|
|
989
1159
|
className: "scoreCounterButton",
|
|
990
1160
|
css: scoreCounterPlusButtonStyles,
|
|
991
|
-
children: /* @__PURE__ */
|
|
1161
|
+
children: /* @__PURE__ */ jsx16(Icon4, { icon: CgMathPlus, iconColor: "gray", size: "1.5rem" })
|
|
992
1162
|
}
|
|
993
1163
|
)
|
|
994
1164
|
] });
|
|
@@ -1010,11 +1180,11 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
|
|
|
1010
1180
|
})
|
|
1011
1181
|
);
|
|
1012
1182
|
};
|
|
1013
|
-
return /* @__PURE__ */
|
|
1183
|
+
return /* @__PURE__ */ jsx16(Fragment5, { children: list.map((enrichment, index) => {
|
|
1014
1184
|
const dimData = dimIndex[getEnrichmentVectorKey(enrichment.cat, enrichment.key)];
|
|
1015
1185
|
if (!dimData)
|
|
1016
1186
|
return;
|
|
1017
|
-
return /* @__PURE__ */
|
|
1187
|
+
return /* @__PURE__ */ jsxs8(
|
|
1018
1188
|
"div",
|
|
1019
1189
|
{
|
|
1020
1190
|
css: {
|
|
@@ -1029,14 +1199,14 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
|
|
|
1029
1199
|
},
|
|
1030
1200
|
className: "selected-enrichments",
|
|
1031
1201
|
children: [
|
|
1032
|
-
/* @__PURE__ */
|
|
1202
|
+
/* @__PURE__ */ jsx16(
|
|
1033
1203
|
"span",
|
|
1034
1204
|
{
|
|
1035
1205
|
css: { fontWeight: "var(--fw-bold)", color: dimData ? void 0 : "var(--brand-secondary-5)" },
|
|
1036
1206
|
children: dimData ? dimData.displayName : `Enrichment '${enrichment.cat}_${enrichment.key}' is unknown`
|
|
1037
1207
|
}
|
|
1038
1208
|
),
|
|
1039
|
-
/* @__PURE__ */
|
|
1209
|
+
/* @__PURE__ */ jsx16(
|
|
1040
1210
|
"div",
|
|
1041
1211
|
{
|
|
1042
1212
|
css: {
|
|
@@ -1049,7 +1219,7 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
|
|
|
1049
1219
|
padding: "var(--spacing-sm) var(--spacing-base)",
|
|
1050
1220
|
flexBasis: "9rem"
|
|
1051
1221
|
},
|
|
1052
|
-
children: /* @__PURE__ */
|
|
1222
|
+
children: /* @__PURE__ */ jsx16(
|
|
1053
1223
|
Input,
|
|
1054
1224
|
{
|
|
1055
1225
|
type: "text",
|
|
@@ -1063,14 +1233,14 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
|
|
|
1063
1233
|
)
|
|
1064
1234
|
}
|
|
1065
1235
|
),
|
|
1066
|
-
/* @__PURE__ */
|
|
1236
|
+
/* @__PURE__ */ jsx16(
|
|
1067
1237
|
"button",
|
|
1068
1238
|
{
|
|
1069
1239
|
type: "button",
|
|
1070
1240
|
title: `Delete enrichment`,
|
|
1071
1241
|
onClick: () => removeEnrichment(index),
|
|
1072
1242
|
css: { border: 0 },
|
|
1073
|
-
children: /* @__PURE__ */
|
|
1243
|
+
children: /* @__PURE__ */ jsx16(Icon4, { icon: CgCloseO, iconColor: "red", size: "1.5rem" })
|
|
1074
1244
|
}
|
|
1075
1245
|
)
|
|
1076
1246
|
]
|
|
@@ -1081,8 +1251,8 @@ var SelectedEnrichments = ({ list, setList, dimIndex }) => {
|
|
|
1081
1251
|
};
|
|
1082
1252
|
|
|
1083
1253
|
// src/components/PersonalizationCriteria/PersonalizationCriteria.tsx
|
|
1084
|
-
import { Callout as
|
|
1085
|
-
import { useState as
|
|
1254
|
+
import { Callout as Callout4, LoadingIndicator as LoadingIndicator4 } from "@uniformdev/design-system";
|
|
1255
|
+
import { useState as useState7 } from "react";
|
|
1086
1256
|
import { useAsync } from "react-use";
|
|
1087
1257
|
import * as yup from "yup";
|
|
1088
1258
|
|
|
@@ -1098,15 +1268,15 @@ function opHasRhs(op) {
|
|
|
1098
1268
|
}
|
|
1099
1269
|
|
|
1100
1270
|
// src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.tsx
|
|
1101
|
-
import { css as
|
|
1271
|
+
import { css as css7 } from "@emotion/react";
|
|
1102
1272
|
import { CgCloseO as CgCloseO2 } from "@react-icons/all-files/cg/CgCloseO";
|
|
1103
|
-
import { AddListButton as
|
|
1273
|
+
import { AddListButton as AddListButton3, Callout as Callout3, Icon as Icon5, InputInlineSelect, Paragraph } from "@uniformdev/design-system";
|
|
1104
1274
|
import { produce as produce2 } from "immer";
|
|
1105
1275
|
|
|
1106
1276
|
// src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.styles.ts
|
|
1107
|
-
import { css as
|
|
1277
|
+
import { css as css6 } from "@emotion/react";
|
|
1108
1278
|
var spaceBetweenCriteriaItems = "6rem";
|
|
1109
|
-
var criteriaItem =
|
|
1279
|
+
var criteriaItem = css6`
|
|
1110
1280
|
position: relative;
|
|
1111
1281
|
padding: var(--spacing-md) var(--spacing-base);
|
|
1112
1282
|
border: 1px solid var(--gray-300);
|
|
@@ -1134,35 +1304,35 @@ var criteriaItem = css5`
|
|
|
1134
1304
|
}
|
|
1135
1305
|
}
|
|
1136
1306
|
`;
|
|
1137
|
-
var criteriaItemInner =
|
|
1307
|
+
var criteriaItemInner = css6`
|
|
1138
1308
|
display: flex;
|
|
1139
1309
|
gap: var(--spacing-base);
|
|
1140
1310
|
flex-grow: 1;
|
|
1141
1311
|
flex-wrap: wrap;
|
|
1142
1312
|
margin-right: var(--spacing-base);
|
|
1143
1313
|
`;
|
|
1144
|
-
var criteriaWrapper =
|
|
1314
|
+
var criteriaWrapper = css6`
|
|
1145
1315
|
width: 100%;
|
|
1146
1316
|
display: flex;
|
|
1147
1317
|
align-items: stretch;
|
|
1148
1318
|
position: relative;
|
|
1149
1319
|
`;
|
|
1150
|
-
var criteriaOperandWrapper =
|
|
1320
|
+
var criteriaOperandWrapper = css6`
|
|
1151
1321
|
flex: 2;
|
|
1152
1322
|
height: 52px;
|
|
1153
1323
|
min-width: 200px;
|
|
1154
1324
|
`;
|
|
1155
|
-
var criteriaOperatorWrapper =
|
|
1325
|
+
var criteriaOperatorWrapper = css6`
|
|
1156
1326
|
flex: 1;
|
|
1157
1327
|
min-width: 80px;
|
|
1158
1328
|
`;
|
|
1159
|
-
var expand =
|
|
1329
|
+
var expand = css6`
|
|
1160
1330
|
height: 100%;
|
|
1161
1331
|
width: 100%;
|
|
1162
1332
|
`;
|
|
1163
1333
|
|
|
1164
1334
|
// src/components/PersonalizationCriteria/PersonalizationCriteriaStatic.tsx
|
|
1165
|
-
import { jsx as
|
|
1335
|
+
import { jsx as jsx17, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
|
|
1166
1336
|
var PersonalizationCriteriaStatic = ({
|
|
1167
1337
|
value,
|
|
1168
1338
|
setValue,
|
|
@@ -1208,8 +1378,8 @@ var PersonalizationCriteriaStatic = ({
|
|
|
1208
1378
|
setValue(finalValue);
|
|
1209
1379
|
onRemoveCriteria == null ? void 0 : onRemoveCriteria(finalValue);
|
|
1210
1380
|
};
|
|
1211
|
-
return /* @__PURE__ */
|
|
1212
|
-
displayTitle ? (components == null ? void 0 : components.Title) ? /* @__PURE__ */
|
|
1381
|
+
return /* @__PURE__ */ jsxs9("fieldset", { className: "personalization-criteria", children: [
|
|
1382
|
+
displayTitle ? (components == null ? void 0 : components.Title) ? /* @__PURE__ */ jsx17(components.Title, {}) : /* @__PURE__ */ jsx17(
|
|
1213
1383
|
"legend",
|
|
1214
1384
|
{
|
|
1215
1385
|
css: {
|
|
@@ -1219,27 +1389,27 @@ var PersonalizationCriteriaStatic = ({
|
|
|
1219
1389
|
children: "Personalize This"
|
|
1220
1390
|
}
|
|
1221
1391
|
) : null,
|
|
1222
|
-
(components == null ? void 0 : components.CustomVariantName) ? /* @__PURE__ */
|
|
1223
|
-
!currentValue.crit.length ? /* @__PURE__ */
|
|
1392
|
+
(components == null ? void 0 : components.CustomVariantName) ? /* @__PURE__ */ jsx17(components.CustomVariantName, {}) : null,
|
|
1393
|
+
!currentValue.crit.length ? /* @__PURE__ */ jsx17(Callout3, { title: "Default variant", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsx17(Paragraph, { children: 'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.' }) }) : /* @__PURE__ */ jsx17("div", { children: currentValue.crit.map((currentCriteria, index) => {
|
|
1224
1394
|
var _a2, _b, _c, _d;
|
|
1225
1395
|
const critHasLhs = ((_a2 = currentCriteria.l) == null ? void 0 : _a2.length) > 0;
|
|
1226
1396
|
const critHasRhs = currentCriteria.op !== "+" && currentCriteria.op !== "-";
|
|
1227
|
-
return /* @__PURE__ */
|
|
1228
|
-
/* @__PURE__ */
|
|
1397
|
+
return /* @__PURE__ */ jsxs9("div", { css: criteriaItem, "data-testid": "criteria-container", children: [
|
|
1398
|
+
/* @__PURE__ */ jsxs9(
|
|
1229
1399
|
"div",
|
|
1230
1400
|
{
|
|
1231
|
-
css:
|
|
1401
|
+
css: css7`
|
|
1232
1402
|
${criteriaItemInner}/* grid-template-columns: minmax(0, 1fr) ${critHasRhs ? "minmax(0, 79px) minmax(0, 1fr)" : "minmax(0, 1fr)"} */
|
|
1233
1403
|
`,
|
|
1234
1404
|
className: "criteriaItemInner",
|
|
1235
1405
|
children: [
|
|
1236
|
-
/* @__PURE__ */
|
|
1406
|
+
/* @__PURE__ */ jsx17(
|
|
1237
1407
|
"div",
|
|
1238
1408
|
{
|
|
1239
1409
|
css: [criteriaWrapper, criteriaOperandWrapper],
|
|
1240
1410
|
className: "criteria-wrapper",
|
|
1241
1411
|
"data-testid": "select-criteria",
|
|
1242
|
-
children: /* @__PURE__ */
|
|
1412
|
+
children: /* @__PURE__ */ jsx17(
|
|
1243
1413
|
DimensionMenu,
|
|
1244
1414
|
{
|
|
1245
1415
|
errorMessage: (_b = errors.lhs) == null ? void 0 : _b[index],
|
|
@@ -1256,13 +1426,13 @@ var PersonalizationCriteriaStatic = ({
|
|
|
1256
1426
|
)
|
|
1257
1427
|
}
|
|
1258
1428
|
),
|
|
1259
|
-
/* @__PURE__ */
|
|
1429
|
+
/* @__PURE__ */ jsx17(
|
|
1260
1430
|
"div",
|
|
1261
1431
|
{
|
|
1262
1432
|
css: [criteriaWrapper, criteriaOperatorWrapper],
|
|
1263
1433
|
className: "criteria-wrapper",
|
|
1264
1434
|
"data-testid": "select-operator",
|
|
1265
|
-
children: /* @__PURE__ */
|
|
1435
|
+
children: /* @__PURE__ */ jsx17(
|
|
1266
1436
|
CriteriaOperatorMenu,
|
|
1267
1437
|
{
|
|
1268
1438
|
name: `op-${index}`,
|
|
@@ -1282,13 +1452,13 @@ var PersonalizationCriteriaStatic = ({
|
|
|
1282
1452
|
)
|
|
1283
1453
|
}
|
|
1284
1454
|
),
|
|
1285
|
-
critHasRhs ? /* @__PURE__ */
|
|
1455
|
+
critHasRhs ? /* @__PURE__ */ jsx17(
|
|
1286
1456
|
"div",
|
|
1287
1457
|
{
|
|
1288
1458
|
css: [criteriaWrapper, criteriaOperandWrapper],
|
|
1289
1459
|
className: "criteria-wrapper",
|
|
1290
1460
|
"data-testid": "select-match-criteria",
|
|
1291
|
-
children: /* @__PURE__ */
|
|
1461
|
+
children: /* @__PURE__ */ jsx17(
|
|
1292
1462
|
CriteriaMatchMenu,
|
|
1293
1463
|
{
|
|
1294
1464
|
errorMessage: (_c = errors.rhs) == null ? void 0 : _c[index],
|
|
@@ -1309,7 +1479,7 @@ var PersonalizationCriteriaStatic = ({
|
|
|
1309
1479
|
]
|
|
1310
1480
|
}
|
|
1311
1481
|
),
|
|
1312
|
-
/* @__PURE__ */
|
|
1482
|
+
/* @__PURE__ */ jsx17(
|
|
1313
1483
|
"button",
|
|
1314
1484
|
{
|
|
1315
1485
|
type: "button",
|
|
@@ -1317,10 +1487,10 @@ var PersonalizationCriteriaStatic = ({
|
|
|
1317
1487
|
title: `Delete Personalization`,
|
|
1318
1488
|
css: { backgroundColor: "transparent", backgroundImage: "none", borderWidth: 0 },
|
|
1319
1489
|
"data-testid": "button-delete",
|
|
1320
|
-
children: /* @__PURE__ */
|
|
1490
|
+
children: /* @__PURE__ */ jsx17(Icon5, { icon: CgCloseO2, iconColor: "red", size: "1.5rem" })
|
|
1321
1491
|
}
|
|
1322
1492
|
),
|
|
1323
|
-
index > 0 ? /* @__PURE__ */
|
|
1493
|
+
index > 0 ? /* @__PURE__ */ jsx17(
|
|
1324
1494
|
"div",
|
|
1325
1495
|
{
|
|
1326
1496
|
className: "criteria-group-operation",
|
|
@@ -1329,7 +1499,7 @@ var PersonalizationCriteriaStatic = ({
|
|
|
1329
1499
|
top: "-4rem",
|
|
1330
1500
|
transform: "translateX(calc(1.5rem - 50%))"
|
|
1331
1501
|
},
|
|
1332
|
-
children: /* @__PURE__ */
|
|
1502
|
+
children: /* @__PURE__ */ jsx17(
|
|
1333
1503
|
InputInlineSelect,
|
|
1334
1504
|
{
|
|
1335
1505
|
"data-testid": "dropdown-button-combine",
|
|
@@ -1348,8 +1518,8 @@ var PersonalizationCriteriaStatic = ({
|
|
|
1348
1518
|
) : null
|
|
1349
1519
|
] }, index);
|
|
1350
1520
|
}) }),
|
|
1351
|
-
dimensions.dimensions.length === 0 ? (components == null ? void 0 : components.NoDimensionsDefined) ? /* @__PURE__ */
|
|
1352
|
-
|
|
1521
|
+
dimensions.dimensions.length === 0 ? (components == null ? void 0 : components.NoDimensionsDefined) ? /* @__PURE__ */ jsx17(components.NoDimensionsDefined, {}) : /* @__PURE__ */ jsx17(Callout3, { title: "Dimensions", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsx17("p", { children: "You do not have any dimensions configured." }) }) : /* @__PURE__ */ jsx17(
|
|
1522
|
+
AddListButton3,
|
|
1353
1523
|
{
|
|
1354
1524
|
"data-testid": "button-add-criteria",
|
|
1355
1525
|
className: "add-more",
|
|
@@ -1361,7 +1531,7 @@ var PersonalizationCriteriaStatic = ({
|
|
|
1361
1531
|
};
|
|
1362
1532
|
|
|
1363
1533
|
// src/components/PersonalizationCriteria/PersonalizationCriteria.tsx
|
|
1364
|
-
import { jsx as
|
|
1534
|
+
import { jsx as jsx18, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
|
|
1365
1535
|
function convertErrorsToObj(errors) {
|
|
1366
1536
|
const result = { crit: [] };
|
|
1367
1537
|
errors.forEach((err) => {
|
|
@@ -1422,7 +1592,7 @@ var PersonalizationCriteria = ({
|
|
|
1422
1592
|
...staticProps
|
|
1423
1593
|
}) => {
|
|
1424
1594
|
var _a, _b;
|
|
1425
|
-
const [validationError, setValidationError] =
|
|
1595
|
+
const [validationError, setValidationError] = useState7(void 0);
|
|
1426
1596
|
const { loading, result: dimensions, error } = useDimensions(contextConfig);
|
|
1427
1597
|
useAsync(async () => {
|
|
1428
1598
|
if (value && dimensions) {
|
|
@@ -1431,15 +1601,15 @@ var PersonalizationCriteria = ({
|
|
|
1431
1601
|
}
|
|
1432
1602
|
}, [value, dimensions, validate]);
|
|
1433
1603
|
if (error)
|
|
1434
|
-
return /* @__PURE__ */
|
|
1604
|
+
return /* @__PURE__ */ jsx18(Callout4, { type: "danger", children: error });
|
|
1435
1605
|
if (loading || dimensions === null)
|
|
1436
|
-
return /* @__PURE__ */
|
|
1606
|
+
return /* @__PURE__ */ jsx18(LoadingIndicator4, {});
|
|
1437
1607
|
const handleSetValue = async (value2) => {
|
|
1438
1608
|
const err = await validate(value2, dimensions);
|
|
1439
1609
|
setValidationError(err);
|
|
1440
1610
|
setValue(value2);
|
|
1441
1611
|
};
|
|
1442
|
-
return /* @__PURE__ */
|
|
1612
|
+
return /* @__PURE__ */ jsx18(
|
|
1443
1613
|
PersonalizationCriteriaStatic,
|
|
1444
1614
|
{
|
|
1445
1615
|
...staticProps,
|
|
@@ -1451,10 +1621,10 @@ var PersonalizationCriteria = ({
|
|
|
1451
1621
|
},
|
|
1452
1622
|
dimensions,
|
|
1453
1623
|
components: {
|
|
1454
|
-
NoDimensionsDefined: () => /* @__PURE__ */
|
|
1624
|
+
NoDimensionsDefined: () => /* @__PURE__ */ jsx18(Callout4, { title: "Dimensions", type: "info", css: { marginBlock: "var(--spacing-base)" }, children: /* @__PURE__ */ jsxs10("p", { children: [
|
|
1455
1625
|
"You do not have any dimensions configured. Create your first",
|
|
1456
1626
|
" ",
|
|
1457
|
-
/* @__PURE__ */
|
|
1627
|
+
/* @__PURE__ */ jsx18(
|
|
1458
1628
|
"a",
|
|
1459
1629
|
{
|
|
1460
1630
|
href: `${contextConfig.apiHost}/projects/${encodeURIComponent(
|
|
@@ -1473,191 +1643,21 @@ var PersonalizationCriteria = ({
|
|
|
1473
1643
|
};
|
|
1474
1644
|
|
|
1475
1645
|
// src/components/ProjectUIVersion/ProjectUIVersion.tsx
|
|
1476
|
-
import { LoadingIndicator as
|
|
1477
|
-
import { Fragment as
|
|
1646
|
+
import { LoadingIndicator as LoadingIndicator5 } from "@uniformdev/design-system";
|
|
1647
|
+
import { Fragment as Fragment6, jsx as jsx19 } from "@emotion/react/jsx-runtime";
|
|
1478
1648
|
function ProjectUIVersion({ children, versionMap, contextConfig }) {
|
|
1479
1649
|
const { loading, result: data } = useContextData(contextConfig);
|
|
1480
1650
|
if (loading)
|
|
1481
|
-
return /* @__PURE__ */
|
|
1651
|
+
return /* @__PURE__ */ jsx19(LoadingIndicator5, {});
|
|
1482
1652
|
if (data) {
|
|
1483
1653
|
const Component = versionMap[data.project.ui_version];
|
|
1484
1654
|
if (Component) {
|
|
1485
|
-
return /* @__PURE__ */
|
|
1655
|
+
return /* @__PURE__ */ jsx19(Component, {});
|
|
1486
1656
|
}
|
|
1487
1657
|
}
|
|
1488
|
-
return /* @__PURE__ */
|
|
1489
|
-
}
|
|
1490
|
-
|
|
1491
|
-
// src/components/AbTestSelector/AbTestSelector.tsx
|
|
1492
|
-
import { css as css7 } from "@emotion/react";
|
|
1493
|
-
import {
|
|
1494
|
-
AddListButton as AddListButton3,
|
|
1495
|
-
Button as Button2,
|
|
1496
|
-
Callout as Callout4,
|
|
1497
|
-
Heading,
|
|
1498
|
-
Link,
|
|
1499
|
-
LoadingIndicator as LoadingIndicator5,
|
|
1500
|
-
ScrollableList,
|
|
1501
|
-
ScrollableListItem
|
|
1502
|
-
} from "@uniformdev/design-system";
|
|
1503
|
-
import { useState as useState7 } from "react";
|
|
1504
|
-
|
|
1505
|
-
// src/hooks/useABTests.ts
|
|
1506
|
-
import { ApiClientError as ApiClientError3, CachedTestClient } from "@uniformdev/context/api";
|
|
1507
|
-
import { useEffect as useEffect3, useState as useState6 } from "react";
|
|
1508
|
-
function useABTests({ apiHost, apiKey, projectId }) {
|
|
1509
|
-
const [reload, setReload] = useState6(true);
|
|
1510
|
-
const [state, setState] = useState6({
|
|
1511
|
-
loading: false,
|
|
1512
|
-
notConfigured: false,
|
|
1513
|
-
error: null,
|
|
1514
|
-
result: null
|
|
1515
|
-
});
|
|
1516
|
-
useEffect3(() => {
|
|
1517
|
-
if (!projectId || !apiKey || !apiHost) {
|
|
1518
|
-
setState({ notConfigured: true, loading: false, error: null, result: null });
|
|
1519
|
-
return;
|
|
1520
|
-
}
|
|
1521
|
-
const runEffect = async () => {
|
|
1522
|
-
setState({ notConfigured: false, loading: true, error: null, result: null });
|
|
1523
|
-
try {
|
|
1524
|
-
const client = new CachedTestClient({
|
|
1525
|
-
projectId,
|
|
1526
|
-
apiKey,
|
|
1527
|
-
apiHost
|
|
1528
|
-
});
|
|
1529
|
-
const { tests } = await client.get();
|
|
1530
|
-
setState({ notConfigured: false, loading: false, error: null, result: tests });
|
|
1531
|
-
} catch (e) {
|
|
1532
|
-
let message;
|
|
1533
|
-
if (e instanceof ApiClientError3) {
|
|
1534
|
-
message = e.message;
|
|
1535
|
-
} else {
|
|
1536
|
-
message = e.toString();
|
|
1537
|
-
}
|
|
1538
|
-
setState({ notConfigured: false, loading: false, error: message, result: null });
|
|
1539
|
-
return;
|
|
1540
|
-
}
|
|
1541
|
-
};
|
|
1542
|
-
if (reload) {
|
|
1543
|
-
runEffect().then(() => {
|
|
1544
|
-
setReload(false);
|
|
1545
|
-
});
|
|
1546
|
-
}
|
|
1547
|
-
}, [apiHost, apiKey, projectId, reload]);
|
|
1548
|
-
return {
|
|
1549
|
-
result: state.result,
|
|
1550
|
-
error: state.error,
|
|
1551
|
-
loading: state.loading,
|
|
1552
|
-
notConfigured: state.notConfigured,
|
|
1553
|
-
doReload: () => setReload(true)
|
|
1554
|
-
};
|
|
1658
|
+
return /* @__PURE__ */ jsx19(Fragment6, { children });
|
|
1555
1659
|
}
|
|
1556
1660
|
|
|
1557
|
-
// src/components/AbTestSelector/AbTestSelector.tsx
|
|
1558
|
-
import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
|
|
1559
|
-
var addAbTestLink = css7`
|
|
1560
|
-
flex: 2;
|
|
1561
|
-
display: flex;
|
|
1562
|
-
width: 50%;
|
|
1563
|
-
align-items: center;
|
|
1564
|
-
font-weight: var(--fw-bold);
|
|
1565
|
-
color: var(--brand-primary-1);
|
|
1566
|
-
&:hover,
|
|
1567
|
-
&:focus {
|
|
1568
|
-
text-decoration-line: underline;
|
|
1569
|
-
}
|
|
1570
|
-
`;
|
|
1571
|
-
var AbTestList = ({ contextConfig, onSelect, value }) => {
|
|
1572
|
-
const { loading, result, doReload = () => {
|
|
1573
|
-
} } = useABTests(contextConfig);
|
|
1574
|
-
if (loading) {
|
|
1575
|
-
return /* @__PURE__ */ jsx19(LoadingIndicator5, {});
|
|
1576
|
-
}
|
|
1577
|
-
return /* @__PURE__ */ jsxs10(Fragment6, { children: [
|
|
1578
|
-
/* @__PURE__ */ jsx19("div", { children: /* @__PURE__ */ jsx19(Link, { text: "Refresh A/B Test list", style: { marginRight: "10px" }, onClick: () => doReload() }) }),
|
|
1579
|
-
!result || result.length === 0 ? /* @__PURE__ */ jsx19(NoAbTestsView, { contextConfig }) : /* @__PURE__ */ jsxs10("div", { style: { marginTop: "10px" }, children: [
|
|
1580
|
-
/* @__PURE__ */ jsx19(ScrollableList, { children: result.map((abTest) => {
|
|
1581
|
-
const { id, name } = abTest;
|
|
1582
|
-
return /* @__PURE__ */ jsx19(
|
|
1583
|
-
ScrollableListItem,
|
|
1584
|
-
{
|
|
1585
|
-
buttonText: name,
|
|
1586
|
-
active: id === (value == null ? void 0 : value.id),
|
|
1587
|
-
onClick: () => onSelect(abTest)
|
|
1588
|
-
},
|
|
1589
|
-
id
|
|
1590
|
-
);
|
|
1591
|
-
}) }),
|
|
1592
|
-
/* @__PURE__ */ jsx19(
|
|
1593
|
-
AddListButton3,
|
|
1594
|
-
{
|
|
1595
|
-
className: "add-more",
|
|
1596
|
-
onButtonClick: () => {
|
|
1597
|
-
window.open(
|
|
1598
|
-
`${contextConfig.apiHost}/projects/${encodeURIComponent(contextConfig.projectId)}/testing`,
|
|
1599
|
-
"_blank"
|
|
1600
|
-
);
|
|
1601
|
-
},
|
|
1602
|
-
buttonText: "Add new A/B Test"
|
|
1603
|
-
}
|
|
1604
|
-
)
|
|
1605
|
-
] })
|
|
1606
|
-
] });
|
|
1607
|
-
};
|
|
1608
|
-
var AbTestSelector = ({ value, setValue, contextConfig, loading }) => {
|
|
1609
|
-
var _a;
|
|
1610
|
-
const [showAbTests, setShowAbTests] = useState7(false);
|
|
1611
|
-
if (loading) {
|
|
1612
|
-
return /* @__PURE__ */ jsx19(LoadingIndicator5, {});
|
|
1613
|
-
}
|
|
1614
|
-
return /* @__PURE__ */ jsx19("fieldset", { className: "ab-test", children: /* @__PURE__ */ jsxs10("div", { children: [
|
|
1615
|
-
!showAbTests && /* @__PURE__ */ jsxs10("div", { children: [
|
|
1616
|
-
value && Object.keys(value).length > 0 && /* @__PURE__ */ jsx19(Heading, { level: 4, style: { marginBottom: "10px" }, children: (_a = value == null ? void 0 : value.name) != null ? _a : "Unknown test" }),
|
|
1617
|
-
/* @__PURE__ */ jsx19(Button2, { buttonType: "primary", style: { marginRight: "10px" }, onClick: () => setShowAbTests(true), children: "Select A/B Test" })
|
|
1618
|
-
] }),
|
|
1619
|
-
showAbTests && /* @__PURE__ */ jsx19(
|
|
1620
|
-
AbTestList,
|
|
1621
|
-
{
|
|
1622
|
-
contextConfig,
|
|
1623
|
-
onSelect: (abTest) => {
|
|
1624
|
-
if ((value == null ? void 0 : value.id) === abTest.id) {
|
|
1625
|
-
setValue(void 0);
|
|
1626
|
-
setShowAbTests(true);
|
|
1627
|
-
return;
|
|
1628
|
-
}
|
|
1629
|
-
setValue(abTest);
|
|
1630
|
-
setShowAbTests(false);
|
|
1631
|
-
},
|
|
1632
|
-
value
|
|
1633
|
-
}
|
|
1634
|
-
)
|
|
1635
|
-
] }) });
|
|
1636
|
-
};
|
|
1637
|
-
var NoAbTestsView = ({ contextConfig }) => /* @__PURE__ */ jsx19(
|
|
1638
|
-
Callout4,
|
|
1639
|
-
{
|
|
1640
|
-
title: "No A/B tests found in your Uniform project.",
|
|
1641
|
-
type: "caution",
|
|
1642
|
-
css: { marginBlock: "var(--spacing-base)" },
|
|
1643
|
-
children: /* @__PURE__ */ jsxs10("p", { children: [
|
|
1644
|
-
"Looks like you do not have any A/B tests created in your connected Uniform project. Start by creating your first test",
|
|
1645
|
-
" ",
|
|
1646
|
-
/* @__PURE__ */ jsx19(
|
|
1647
|
-
"a",
|
|
1648
|
-
{
|
|
1649
|
-
href: `${contextConfig.apiHost}/projects/${encodeURIComponent(contextConfig.projectId)}/testing`,
|
|
1650
|
-
target: "_blank",
|
|
1651
|
-
rel: "noopener noreferrer",
|
|
1652
|
-
css: { ":hover": { textDecorationLine: "underline" } },
|
|
1653
|
-
children: "here"
|
|
1654
|
-
}
|
|
1655
|
-
),
|
|
1656
|
-
"."
|
|
1657
|
-
] })
|
|
1658
|
-
}
|
|
1659
|
-
);
|
|
1660
|
-
|
|
1661
1661
|
// src/hooks/useValidateContextConfig.ts
|
|
1662
1662
|
import { useEffect as useEffect4, useState as useState8 } from "react";
|
|
1663
1663
|
|