@growth-operations/ui-shared 1.12.0 → 1.12.2
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/package.json +1 -1
- package/src/usage/UsageTab.jsx +39 -18
package/package.json
CHANGED
package/src/usage/UsageTab.jsx
CHANGED
|
@@ -44,8 +44,43 @@ export function UsageTab({
|
|
|
44
44
|
portalId,
|
|
45
45
|
appName = "this app",
|
|
46
46
|
}) {
|
|
47
|
-
const [data, setData] = useState(null);
|
|
48
47
|
const [days, setDays] = useState("30");
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<Flex direction="column" gap="medium">
|
|
51
|
+
<Flex direction="row" justify="between" align="end">
|
|
52
|
+
<Heading>Usage</Heading>
|
|
53
|
+
<Select
|
|
54
|
+
label="Window"
|
|
55
|
+
name="window"
|
|
56
|
+
options={WINDOW_OPTIONS}
|
|
57
|
+
value={days}
|
|
58
|
+
onChange={setDays}
|
|
59
|
+
/>
|
|
60
|
+
</Flex>
|
|
61
|
+
|
|
62
|
+
{/* key={days}: a window change must hard-remount everything below the
|
|
63
|
+
Select (Statistics + LineChart), not just re-render with new props.
|
|
64
|
+
LineChart is a HubSpot "remote component" (rendered outside this
|
|
65
|
+
iframe via HubSpot's own bridge) — a prop/data change alone was
|
|
66
|
+
confirmed NOT to update the rendered chart, even though the
|
|
67
|
+
backend series genuinely differs per window. The Select itself
|
|
68
|
+
stays OUTSIDE this key boundary so the control that triggers the
|
|
69
|
+
change is never torn down mid-interaction. */}
|
|
70
|
+
<UsageContent
|
|
71
|
+
key={days}
|
|
72
|
+
context={context}
|
|
73
|
+
basePath={basePath}
|
|
74
|
+
portalId={portalId}
|
|
75
|
+
appName={appName}
|
|
76
|
+
days={days}
|
|
77
|
+
/>
|
|
78
|
+
</Flex>
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
function UsageContent({ context, basePath, portalId, appName, days }) {
|
|
83
|
+
const [data, setData] = useState(null);
|
|
49
84
|
const [loading, setLoading] = useState(true);
|
|
50
85
|
const [error, setError] = useState(null);
|
|
51
86
|
|
|
@@ -76,12 +111,9 @@ export function UsageTab({
|
|
|
76
111
|
|
|
77
112
|
if (error) {
|
|
78
113
|
return (
|
|
79
|
-
<
|
|
80
|
-
<
|
|
81
|
-
|
|
82
|
-
<Text>{error}</Text>
|
|
83
|
-
</Alert>
|
|
84
|
-
</Flex>
|
|
114
|
+
<Alert title="Couldn't load usage" variant="warning">
|
|
115
|
+
<Text>{error}</Text>
|
|
116
|
+
</Alert>
|
|
85
117
|
);
|
|
86
118
|
}
|
|
87
119
|
|
|
@@ -97,17 +129,6 @@ export function UsageTab({
|
|
|
97
129
|
|
|
98
130
|
return (
|
|
99
131
|
<Flex direction="column" gap="medium">
|
|
100
|
-
<Flex direction="row" justify="between" align="end">
|
|
101
|
-
<Heading>Usage</Heading>
|
|
102
|
-
<Select
|
|
103
|
-
label="Window"
|
|
104
|
-
name="window"
|
|
105
|
-
options={WINDOW_OPTIONS}
|
|
106
|
-
value={days}
|
|
107
|
-
onChange={setDays}
|
|
108
|
-
/>
|
|
109
|
-
</Flex>
|
|
110
|
-
|
|
111
132
|
<Tile>
|
|
112
133
|
<Statistics>
|
|
113
134
|
<StatisticsItem label="Used (window)" number={usedInWindow} />
|