fix: display all metadata items alongside daily_cost (#10554)

* resolves #10411

* Update site/src/components/Resources/ResourceCard.test.tsx

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

@@ -0,0 +1,112 @@
+import { renderComponent } from "testHelpers/renderHelpers";
+import { ResourceCard } from "components/Resources/ResourceCard";
+import { MockWorkspaceResource } from "testHelpers/entities";
+import { screen } from "@testing-library/react";
+import { WorkspaceResourceMetadata } from "api/typesGenerated";
+
+describe("Resource Card", () => {
+  it("renders daily cost and metadata tiles", async () => {
+    renderComponent(
+      <ResourceCard resource={MockWorkspaceResource} agentRow={() => <></>} />,
+    );
+    expect(
+      screen.getByText(MockWorkspaceResource.daily_cost),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByText(MockWorkspaceResource.metadata?.[0].value as string),
+    ).toBeInTheDocument();
+  });
+
+  it("renders daily cost and 3 metadata tiles", async () => {
+    const mockResource = {
+      ...MockWorkspaceResource,
+      metadata: [
+        {
+          ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
+          value: "18GB",
+        },
+        {
+          ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
+          value: "24GB",
+        },
+        {
+          ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
+          value: "32GB",
+        },
+        {
+          ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
+          value: "48GB",
+        },
+        {
+          ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
+          value: "60GB",
+        },
+      ],
+    };
+
+    renderComponent(
+      <ResourceCard resource={mockResource} agentRow={() => <></>} />,
+    );
+    expect(screen.getByText(mockResource.daily_cost)).toBeInTheDocument();
+    expect(
+      screen.getByText(mockResource.metadata?.[0].value),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(mockResource.metadata?.[1].value),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(mockResource.metadata?.[2].value),
+    ).toBeInTheDocument();
+    // last element is hidden
+    expect(
+      screen.queryByText(mockResource.metadata?.[3].value),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders 4 metadata tiles if no daily cost", async () => {
+    const mockResource = {
+      ...MockWorkspaceResource,
+      daily_cost: 0,
+      metadata: [
+        {
+          ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
+          value: "18GB",
+        },
+        {
+          ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
+          value: "24GB",
+        },
+        {
+          ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
+          value: "32GB",
+        },
+        {
+          ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
+          value: "48GB",
+        },
+        {
+          ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata),
+          value: "60GB",
+        },
+      ],
+    };
+
+    renderComponent(
+      <ResourceCard resource={mockResource} agentRow={() => <></>} />,
+    );
+    expect(screen.queryByText(mockResource.daily_cost)).not.toBeInTheDocument();
+    expect(
+      screen.getByText(mockResource.metadata?.[0].value),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(mockResource.metadata?.[1].value),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(mockResource.metadata?.[2].value),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(mockResource.metadata?.[3].value),
+    ).toBeInTheDocument();
+  });
+});

site/src/components/Resources/ResourceCard.tsx

@@ -86,18 +86,17 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
   const [shouldDisplayAllMetadata, setShouldDisplayAllMetadata] =
     useState(false);
   const metadataToDisplay = resource.metadata ?? [];
+
   const visibleMetadata = shouldDisplayAllMetadata
     ? metadataToDisplay
-    : metadataToDisplay.slice(0, 4);
+    : metadataToDisplay.slice(0, resource.daily_cost > 0 ? 3 : 4);
 
-  // Add one to `metadataLength` if the resource has a cost, and hide one
-  // additional metadata item, because cost is displayed in the same grid.
-  let metadataLength = resource.metadata?.length ?? 0;
-  if (resource.daily_cost > 0) {
-    metadataLength += 1;
-    visibleMetadata.pop();
-  }
-  const gridWidth = metadataLength === 1 ? 1 : 4;
+  const mLength =
+    resource.daily_cost > 0
+      ? (resource.metadata?.length ?? 0) + 1
+      : resource.metadata?.length ?? 0;
+
+  const gridWidth = mLength === 1 ? 1 : 4;
 
   return (
     <div key={resource.id} css={styles.resourceCard} className="resource-card">
@@ -133,7 +132,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
           {resource.daily_cost > 0 && (
             <div css={styles.metadata}>
               <div css={styles.metadataLabel}>
-                <b>cost</b>
+                <b>Daily cost</b>
               </div>
               <div css={styles.metadataValue}>{resource.daily_cost}</div>
             </div>
@@ -155,7 +154,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
             );
           })}
         </div>
-        {metadataLength > 4 && (
+        {mLength > 4 && (
           <Tooltip
             title={
               shouldDisplayAllMetadata ? "Hide metadata" : "Show all metadata"