8000 fix: display all metadata items alongside daily_cost (#10554) · coder/coder@4316c1c · GitHub
[go: up one dir, main page]
Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

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

Lines changed: 112 additions & 0 deletions
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+
...(Mock 8000 WorkspaceResource.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

Lines changed: 11 additions & 12 deletions
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)
0