@growth-operations/ui-shared 1.12.1 → 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 -25
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} />
|
|
@@ -128,13 +149,6 @@ export function UsageTab({
|
|
|
128
149
|
<Flex direction="column" gap="small">
|
|
129
150
|
<Text format={{ fontWeight: "bold" }}>Credits used per day</Text>
|
|
130
151
|
<LineChart
|
|
131
|
-
// key={days}: reported symptom was the chart not visibly
|
|
132
|
-
// changing when the window dropdown changed, even though the
|
|
133
|
-
// backend series does change (verified). LineChart is a remote
|
|
134
|
-
// component (rendered outside this iframe via HubSpot's own
|
|
135
|
-
// bridge), so force a full remount on window change rather than
|
|
136
|
-
// relying on its own prop-diffing to pick up the new data.
|
|
137
|
-
key={days}
|
|
138
152
|
data={series}
|
|
139
153
|
axes={{
|
|
140
154
|
x: { field: "date", fieldType: "datetime", label: "Day" },
|