Skip to content

Commit 4344840

Browse files
Kira-PilotKira-Pilot
committed
resolves #10411 
1 parent 04dd663 commit 4344840

File tree

2 files changed

+122
-11
lines changed

2 files changed

+122
-11
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 4 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

+10-11
Original file line numberDiff line numberDiff line change
@@ -76,18 +76,17 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
7676
const [shouldDisplayAllMetadata, setShouldDisplayAllMetadata] =
7777
useState(false);
7878
const metadataToDisplay = resource.metadata ?? [];
79+
7980
const visibleMetadata = shouldDisplayAllMetadata
8081
? metadataToDisplay
81-
: metadataToDisplay.slice(0, 4);
82+
: metadataToDisplay.slice(0, resource.daily_cost > 0 ? 3 : 4);
83+
84+
const mLength =
85+
resource.daily_cost > 0
86+
? (resource.metadata?.length ?? 0) + 1
87+
: resource.metadata?.length ?? 0;
8288

83-
// Add one to `metadataLength` if the resource has a cost, and hide one
84-
// additional metadata item, because cost is displayed in the same grid.
85-
let metadataLength = resource.metadata?.length ?? 0;
86-
if (resource.daily_cost > 0) {
87-
metadataLength += 1;
88-
visibleMetadata.pop();
89-
}
90-
const gridWidth = metadataLength === 1 ? 1 : 4;
89+
const gridWidth = mLength === 1 ? 1 : 4;
9190

9291
return (
9392
<div key={resource.id} css={styles.resourceCard} className="resource-card">
@@ -123,7 +122,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
123122
{resource.daily_cost > 0 && (
124123
<div css={styles.metadata}>
125124
<div css={styles.metadataLabel}>
126-
<b>cost</b>
125+
<b>Daily cost</b>
127126
</div>
128127
<div css={styles.metadataValue}>{resource.daily_cost}</div>
129128
</div>
@@ -145,7 +144,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
145144
);
146145
})}
147146
</div>
148-
{metadataLength > 4 && (
147+
{mLength > 4 && (
149148
<Tooltip
150149
title={
151150
shouldDisplayAllMetadata ? "Hide metadata" : "Show all metadata"

0 commit comments

Comments
 (0)