From 4344840cb22a55be23364dd5617d85b45e15fda8 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira.pilot23@gmail.com>
Date: Mon, 6 Nov 2023 20:13:18 +0000
Subject: [PATCH 1/2] resolves #10411

---
 .../Resources/ResourceCard.test.tsx           | 112 ++++++++++++++++++
 .../src/components/Resources/ResourceCard.tsx |  21 ++--
 2 files changed, 122 insertions(+), 11 deletions(-)
 create mode 100644 site/src/components/Resources/ResourceCard.test.tsx

diff --git a/site/src/components/Resources/ResourceCard.test.tsx b/site/src/components/Resources/ResourceCard.test.tsx
new file mode 100644
index 0000000000000..9527e41de9c5e
--- /dev/null
+++ b/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 4 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();
+  });
+});
diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
index f5c0779d68a29..be4cecb78a37d 100644
--- a/site/src/components/Resources/ResourceCard.tsx
+++ b/site/src/components/Resources/ResourceCard.tsx
@@ -76,18 +76,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);
+
+  const mLength =
+    resource.daily_cost > 0
+      ? (resource.metadata?.length ?? 0) + 1
+      : resource.metadata?.length ?? 0;
 
-  // 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 gridWidth = mLength === 1 ? 1 : 4;
 
   return (
     <div key={resource.id} css={styles.resourceCard} className="resource-card">
@@ -123,7 +122,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>
@@ -145,7 +144,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
             );
           })}
         </div>
-        {metadataLength > 4 && (
+        {mLength > 4 && (
           <Tooltip
             title={
               shouldDisplayAllMetadata ? "Hide metadata" : "Show all metadata"

From 0152857b4a018722d01d4043eac4276d3ddb3698 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Mon, 6 Nov 2023 15:26:08 -0500
Subject: [PATCH 2/2] Update
 site/src/components/Resources/ResourceCard.test.tsx

---
 site/src/components/Resources/ResourceCard.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Resources/ResourceCard.test.tsx b/site/src/components/Resources/ResourceCard.test.tsx
index 9527e41de9c5e..0e1a2cfb5ac67 100644
--- a/site/src/components/Resources/ResourceCard.test.tsx
+++ b/site/src/components/Resources/ResourceCard.test.tsx
@@ -18,7 +18,7 @@ describe("Resource Card", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders daily cost and 4 metadata tiles", async () => {
+  it("renders daily cost and 3 metadata tiles", async () => {
     const mockResource = {
       ...MockWorkspaceResource,
       metadata: [