Devan/eng 1242 add grid view of artifacts (#17018)

Co-authored-by: Devan Grose <=>
Co-authored-by: Devin Villarosa <102188207+devinvillarosa@users.noreply.github.com>

ui-v2/package.json

@@ -56,6 +56,7 @@
 		"react-day-picker": "^9.5.1",
 		"react-dom": "19.0.0",
 		"react-hook-form": "^7.54.2",
+		"react-markdown": "^9.0.3",
 		"recharts": "^2.15.1",
 		"rrule": "^2.8.1",
 		"tailwind-merge": "^2.6.0",

ui-v2/src/components/artifacts/artifact-card.test.tsx

@@ -0,0 +1,53 @@
+import { Artifact } from "@/api/artifacts";
+import { createFakeArtifact } from "@/mocks";
+import { render } from "@testing-library/react";
+import { createWrapper } from "@tests/utils";
+import { describe, expect, it } from "vitest";
+import { ArtifactCard } from "./artifact-card";
+
+describe("Artifacts Card", () => {
+	it("renders artifact card with description", () => {
+		const artifact: Artifact = createFakeArtifact({
+			description: "This is a description",
+		});
+		const { getByText } = render(<ArtifactCard artifact={artifact} />, {
+			wrapper: createWrapper(),
+		});
+
+		expect(getByText("This is a description")).toBeTruthy();
+	});
+
+	it("renders artifact card with updated date", () => {
+		const artifact = createFakeArtifact({
+			updated: "2021-09-01T12:00:00Z",
+		});
+		const { getByText } = render(<ArtifactCard artifact={artifact} />, {
+			wrapper: createWrapper(),
+		});
+
+		expect(getByText("Last Updated")).toBeTruthy();
+		expect(getByText("Sep 1st, 2021 at 12:00 PM")).toBeTruthy();
+	});
+
+	it("renders artifact card with key", () => {
+		const artifact = createFakeArtifact({
+			key: "test-key",
+		});
+		const { getByText } = render(<ArtifactCard artifact={artifact} />, {
+			wrapper: createWrapper(),
+		});
+
+		expect(getByText("test-key")).toBeTruthy();
+	});
+
+	it("renders artifact card with type", () => {
+		const artifact = createFakeArtifact({
+			type: "test-type",
+		});
+		const { getByText } = render(<ArtifactCard artifact={artifact} />, {
+			wrapper: createWrapper(),
+		});
+
+		expect(getByText("TEST-TYPE")).toBeTruthy();
+	});
+});

ui-v2/src/components/artifacts/artifact-card.tsx

@@ -0,0 +1,51 @@
+import { Artifact } from "@/api/artifacts";
+import { formatDate } from "@/utils/date";
+import { useMemo } from "react";
+import Markdown from "react-markdown";
+import { Card } from "../ui/card";
+import { Typography } from "../ui/typography";
+
+interface ArtifactsCardProps {
+	artifact: Artifact;
+}
+
+export const ArtifactCard = ({ artifact }: ArtifactsCardProps) => {
+	const date = useMemo(() => {
+		const date = new Date(artifact.updated ?? "");
+		return formatDate(date, "dateTime");
+	}, [artifact.updated]);
+	return (
+		<Card className="p-4 m-2">
+			<Typography
+				variant="bodySmall"
+				className="font-bold text-muted-foreground"
+			>
+				{artifact.type?.toUpperCase()}
+			</Typography>
+			<Typography variant="h3" className="font-bold">
+				{artifact.key}
+			</Typography>
+			<div className="flex justify-between mt-2">
+				<Typography variant="bodySmall" className="" fontFamily="mono">
+					{date}
+				</Typography>
+				<Typography variant="bodySmall" className="text-muted-foreground">
+					Last Updated
+				</Typography>
+			</div>
+			<hr className="my-2" />
+			{artifact.description ? (
+				<div className="text-muted-foreground">
+					<Markdown>{artifact.description}</Markdown>
+				</div>
+			) : (
+				<Typography
+					variant="bodySmall"
+					className="text-muted-foreground italic"
+				>
+					No description
+				</Typography>
+			)}
+		</Card>
+	);
+};

ui-v2/src/components/artifacts/artifacts-filter.test.tsx

@@ -2,7 +2,8 @@ import { createFakeArtifact } from "@/mocks";
 import { fireEvent, render, waitFor } from "@testing-library/react";
 import { buildApiUrl, createWrapper, server } from "@tests/utils";
 import { http, HttpResponse } from "msw";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, expect, it, vi } from "vitest";
+import { describe } from "vitest";
 import { ArtifactsFilterComponent } from "./artifacts-filter";
 
 describe("Artifacts Filter", () => {

ui-v2/src/components/artifacts/artifacts-page.tsx

@@ -1,8 +1,8 @@
 import { Artifact } from "@/api/artifacts";
+import { ArtifactCard } from "./artifact-card";
 import { ArtifactsFilterComponent } from "./artifacts-filter";
 import { ArtifactsHeader } from "./artifacts-header";
 import { filterType } from "./types";
-// import { ArtifactCard } from "./artifact-card";
 
 interface ArtifactsPageProps {
 	filters: filterType[];
@@ -14,7 +14,7 @@ interface ArtifactsPageProps {
 export const ArtifactsPage = ({
 	filters,
 	onFilterChange,
-	// artifactsList,
+	artifactsList,
 	artifactsCount,
 }: ArtifactsPageProps) => {
 	return (
@@ -25,13 +25,11 @@ export const ArtifactsPage = ({
 				onFilterChange={onFilterChange}
 				totalCount={artifactsCount}
 			/>
-			{/* <div className="flex flex-wrap">
-            {
-                artifactsList.map((artifact) => (
-                    <ArtifactCard key={artifact.id} artifact={artifact} />
-                ))
-            }
-            </div> */}
+			<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+				{artifactsList.map((artifact) => (
+					<ArtifactCard key={artifact.id} artifact={artifact} />
+				))}
+			</div>
 		</div>
 	);
 };

ui-v2/src/components/ui/typography/typography.tsx

@@ -14,17 +14,29 @@ const VARIANTS_TO_ELEMENT_MAP = {
 } as const;
 
 type Variant = "h1" | "h2" | "h3" | "h4" | "bodyLarge" | "body" | "bodySmall";
+type FontFamily = "sans" | "serif" | "mono";
 
 type TypographyProps = {
 	className?: string;
 	variant?: Variant;
+	fontFamily?: FontFamily;
 	children: React.ReactNode;
 };
 
 export const Typography = forwardRef<HTMLDivElement, TypographyProps>(
-	({ className, variant = "body", ...props }, ref) => {
+	({ className, variant = "body", fontFamily = "sans", ...props }, ref) => {
 		return createElement(VARIANTS_TO_ELEMENT_MAP[variant], {
-			className: cn(typographyVariants({ variant }), className),
+			className: cn(
+				typographyVariants({
+					variant,
+					className: cn({
+						"font-sans": fontFamily === "sans",
+						"font-serif": fontFamily === "serif",
+						"font-mono": fontFamily === "mono",
+					}),
+				}),
+				className,
+			),
 			ref,
 			...props,
 		});

ui-v2/src/utils/date.ts

@@ -0,0 +1,37 @@
+import { format } from "date-fns";
+
+const dateFormat = "MMM do, yyyy";
+const timeFormat = "hh:mm a";
+const dateTimeFormat = `${dateFormat} 'at' ${timeFormat}`;
+
+const timeNumericFormat = "hh:mm:ss a";
+const timeNumericShortFormat = "hh:mm a";
+const dateNumericFormat = "yyyy/MM/dd";
+const dateTimeNumericFormat = `${dateNumericFormat} ${timeNumericFormat}`;
+const dateTimeNumericShortFormat = `${dateNumericFormat} ${timeNumericShortFormat}`;
+
+export const dateFormats = {
+	date: dateFormat,
+	time: timeFormat,
+	dateTime: dateTimeFormat,
+	timeNumeric: timeNumericFormat,
+	timeNumericShort: timeNumericShortFormat,
+	dateNumeric: dateNumericFormat,
+	dateTimeNumeric: dateTimeNumericFormat,
+	dateTimeNumericShort: dateTimeNumericShortFormat,
+} as const;
+
+type DateFormat = keyof typeof dateFormats;
+
+function toDate(value: Date | string): Date {
+	return new Date(value);
+}
+
+export function formatDate(
+	value: Date | string,
+	type: DateFormat = "date",
+): string {
+	const date = toDate(value);
+
+	return format(date, dateFormats[type]);
+}

ui-v2/vite.config.ts

@@ -13,6 +13,9 @@ export default defineConfig({
 		coverage: {
 			exclude: ["**/*.stories.tsx", "**/*.test.tsx"],
 		},
+		env: {
+			TZ: "UTC",
+		},
 	},
 	resolve: {
 		alias: {