Skip to content

Commit 4316c1c

Browse files
Kira-PilotKira-Pilot
authored
fix: display all metadata items alongside daily_cost (#10554)
* resolves #10411 * Update site/src/components/Resources/ResourceCard.test.tsx
1 parent 9e4558a commit 4316c1c

File tree

2 files changed

+123
-12
lines changed

2 files changed

+123
-12
lines changed

‎site/src/components/Resources/ResourceCard.test.tsx

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { renderComponent } from "testHelpers/renderHelpers";
2+
import { ResourceCard } from "components/Resources/ResourceCard";
3+
import { MockWorkspaceResource } from "testHelpers/entities";
4+
import { screen } from "@testing-library/react";
5+
import { WorkspaceResourceMetadata } from "api/typesGenerated";
6+
7+
describe("Resource Card", () => {
8+
it("renders daily cost and metadata tiles", async () => {
9+
renderComponent(
10+
<ResourceCard resource={MockWorkspaceResource} agentRow={() => <></>} />,
11+
);
12+
expect(
13+
screen.getByText(MockWorkspaceResource.daily_cost),
14+
).toBeInTheDocument();
15+
16+
expect(
17+
screen.getByText(MockWorkspaceResource.metadata?.[0].value as string),
18+
).toBeInTheDocument();
19+
});
20+
21+
it("renders daily cost and 3 metadata tiles", async () => {
22+
const mockResource = {
23+
...MockWorkspaceResource,
24+
metadata: [
25+
{
26+
...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
27+
value: "18GB",
28+
},
29+
{
30+
...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
31+
value: "24GB",
32+
},
33+
{
34+
...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
35+
value: "32GB",
36+
},
37+
{
38+
...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
39+
value: "48GB",
40+
},
41+
{
42+
...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
43+
value: "60GB",
44+
},
45+
],
46+
};
47+
48+
renderComponent(
49+
<ResourceCard resource={mockResource} agentRow={() => <></>} />,
50+
);
51+
expect(screen.getByText(mockResource.daily_cost)).toBeInTheDocument();
52+
expect(
53+
screen.getByText(mockResource.metadata?.[0].value),
54+
).toBeInTheDocument();
55+
expect(
56+
screen.getByText(mockResource.metadata?.[1].value),
57+
).toBeInTheDocument();
58+
expect(
59+
screen.getByText(mockResource.metadata?.[2].value),
60+
).toBeInTheDocument();
61+
// last element is hidden
62+
expect(
63+
screen.queryByText(mockResource.metadata?.[3].value),
64+
).not.toBeInTheDocument();
65+
});
66+
67+
it("renders 4 metadata tiles if no daily cost", async () => {
68+
const mockResource = {
69+
...MockWorkspaceResource,
70+
daily_cost: 0,
71+
metadata: [
72+
{
73+
...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
74+
value: "18GB",
75+
},
76+
{
77+
...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
78+
value: "24GB",
79+
},
80+
{
81+
...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
82+
value: "32GB",
83+
},
84+
{
85+
...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
86+
value: "48GB",
87+
},
88+
{
89+
...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
90+
value: "60GB",
91+
},
92+
],
93+
};
94+
95+
renderComponent(
96+
<ResourceCard resource={mockResource} agentRow={() => <></>} />,
97+
);
98+
expect(screen.queryByText(mockResource.daily_cost)).not.toBeInTheDocument();
99+
expect(
100+
screen.getByText(mockResource.metadata?.[0].value),
101+
).toBeInTheDocument();
102+
expect(
103+
screen.getByText(mockResource.metadata?.[1].value),
104+
).toBeInTheDocument();
105+
expect(
106+
screen.getByText(mockResource.metadata?.[2].value),
107+
).toBeInTheDocument();
108+
expect(
109+
screen.getByText(mockResource.metadata?.[3].value),
110+
).toBeInTheDocument();
111+
});
112+
});

‎site/src/components/Resources/ResourceCard.tsx

+11-12
Original file line numberDiff line numberDiff line change
@@ -86,18 +86,17 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
8686
const [shouldDisplayAllMetadata, setShouldDisplayAllMetadata] =
8787
useState(false);
8888
const metadataToDisplay = resource.metadata ?? [];
89+
8990
const visibleMetadata = shouldDisplayAllMetadata
9091
? metadataToDisplay
91-
: metadataToDisplay.slice(0, 4);
92-
93-
// Add one to `metadataLength` if the resource has a cost, and hide one
94-
// additional metadata item, because cost is displayed in the same grid.
95-
let metadataLength = resource.metadata?.length ?? 0;
96-
if (resource.daily_cost > 0) {
97-
metadataLength += 1;
98-
visibleMetadata.pop();
99-
}
100-
const gridWidth = metadataLength === 1 ? 1 : 4;
92+
: metadataToDisplay.slice(0, resource.daily_cost > 0 ? 3 : 4);
93+
94+
const mLength =
95+
resource.daily_cost > 0
96+
? (resource.metadata?.length ?? 0) + 1
97+
: resource.metadata?.length ?? 0;
98+
99+
const gridWidth = mLength === 1 ? 1 : 4;
101100

102101
return (
103102
<div key={resource.id} css={styles.resourceCard} className="resource-card">
@@ -133,7 +132,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
133132
{resource.daily_cost > 0 && (
134133
<div css={styles.metadata}>
135134
<div css={styles.metadataLabel}>
136-
<b>cost</b>
135+
<b>Daily cost</b>
137136
</div>
138137
<div css={styles.metadataValue}>{resource.daily_cost}</div>
139138
</div>
@@ -155,7 +154,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
155154
);
156155
})}
157156
</div>
158-
{metadataLength > 4 && (
157+
{mLength > 4 && (
159158
<Tooltip
160159
title={
161160
shouldDisplayAllMetadata ? "Hide metadata" : "Show all metadata"

0 commit comments

Comments
 (0)