@growth-operations/ui-shared 1.12.1 → 1.12.3
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 +50 -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} />
|
|
@@ -127,14 +148,18 @@ export function UsageTab({
|
|
|
127
148
|
<Tile>
|
|
128
149
|
<Flex direction="column" gap="small">
|
|
129
150
|
<Text format={{ fontWeight: "bold" }}>Credits used per day</Text>
|
|
151
|
+
{/* TEMP diagnostic — remove once the window-change bug is
|
|
152
|
+
root-caused. Renders straight from the fetched series with no
|
|
153
|
+
chart involved, so it proves whether new data is actually
|
|
154
|
+
arriving on a window change (this line updates) vs. only the
|
|
155
|
+
LineChart failing to reflect it (this line updates, chart
|
|
156
|
+
doesn't). If THIS line also doesn't change, the bug is
|
|
157
|
+
upstream of the chart (fetch/state), not the remote component. */}
|
|
158
|
+
<Text format={{ fontStyle: "italic" }}>
|
|
159
|
+
DEBUG window={days} points={series.length} first=
|
|
160
|
+
{series[0]?.date} last={series[series.length - 1]?.date}
|
|
161
|
+
</Text>
|
|
130
162
|
<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
163
|
data={series}
|
|
139
164
|
axes={{
|
|
140
165
|
x: { field: "date", fieldType: "datetime", label: "Day" },
|