Enhance EmptyState component with className prop and update usage in EmptyObservability

Author: bekossy

web/oss/src/components/EmptyState/EmptyState.tsx

@@ -4,6 +4,7 @@ import {useState} from "react"
 import {Stream} from "@cloudflare/stream-react"
 import {ArrowRight} from "@phosphor-icons/react"
 import {Button, Skeleton, Typography} from "antd"
+import clsx from "clsx"
 
 export interface EmptyStateProps {
     /** Cloudflare Stream video ID (preferred) */
@@ -23,6 +24,7 @@ export interface EmptyStateProps {
         label: string
         href: string
     }
+    className?: string
 }
 
 const VIDEO_ASPECT_RATIO = 16 / 9
@@ -35,6 +37,7 @@ const EmptyState = ({
     description,
     primaryCta,
     secondaryCta,
+    className,
 }: EmptyStateProps) => {
     const [videoLoaded, setVideoLoaded] = useState(false)
     const [imageLoaded, setImageLoaded] = useState(false)
@@ -103,7 +106,7 @@ const EmptyState = ({
     }
 
     return (
-        <div className="mx-auto w-full max-w-4xl px-8 py-8">
+        <div className={clsx("mx-auto w-full max-w-4xl px-8 py-8", className)}>
             <div className="flex w-full flex-col items-center text-center">
                 {/* Title + Description */}
                 <div className="mb-6">

web/oss/src/components/pages/observability/components/EmptyObservability/index.tsx

@@ -15,6 +15,7 @@ const EmptyObservability = () => {
 
     return (
         <EmptyState
+            className="py-4"
             videoId={EMPTY_STATE_VIDEOS.observability}
             previewAlt="Observability demo showing trace visualization"
             title="No traces yet"

web/oss/src/components/pages/observability/components/ObservabilityTable/index.tsx

@@ -203,94 +203,94 @@ const ObservabilityTable = () => {
         }))
     }, [columns, editColumns])
 
-    if (isEmptyState) {
-        return <EmptyObservability />
-    }
-
     return (
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-6">
             <ObservabilityHeader
                 columns={columns}
                 componentType="traces"
                 onRefresh={handleRefresh}
                 refreshTrigger={refreshTrigger}
             />
 
-            <div className="flex flex-col gap-2">
-                <Table
-                    rowSelection={{
-                        type: "checkbox",
-                        columnWidth: 48,
-                        selectedRowKeys,
-                        ...rowSelection,
-                    }}
-                    loading={showTableLoading}
-                    columns={mergedColumns as TableColumnType<TraceSpanNode>[]}
-                    dataSource={traces}
-                    bordered
-                    style={{cursor: "pointer"}}
-                    sticky={{
-                        offsetHeader: 0,
-                        offsetScroll: 0,
-                    }}
-                    onRow={(record, index) => ({
-                        onClick: () => {
-                            setSelectedNode(record.span_id)
-                            const isSpanView = traceTabs === "span"
-
-                            const targetTraceId = String(
-                                record.trace_id ||
-                                    (record as any)?.invocationIds?.trace_id ||
-                                    (record as any)?.node?.trace_id ||
-                                    (record as any)?.root?.id ||
-                                    (record as any)?.traceId ||
-                                    (record as any)?.trace?.id ||
-                                    record.span_id ||
-                                    "",
-                            )
-
-                            const targetSpanId = isSpanView
-                                ? String(record.span_id || "")
-                                : String(record.span_id || "")
-
-                            if (!targetTraceId) {
-                                console.warn(
-                                    "TraceDrawer: unable to determine trace id for record",
-                                    record,
+            {isEmptyState ? (
+                <EmptyObservability />
+            ) : (
+                <div className="flex flex-col gap-2">
+                    <Table
+                        rowSelection={{
+                            type: "checkbox",
+                            columnWidth: 48,
+                            selectedRowKeys,
+                            ...rowSelection,
+                        }}
+                        loading={showTableLoading}
+                        columns={mergedColumns as TableColumnType<TraceSpanNode>[]}
+                        dataSource={traces}
+                        bordered
+                        style={{cursor: "pointer"}}
+                        sticky={{
+                            offsetHeader: 0,
+                            offsetScroll: 0,
+                        }}
+                        onRow={(record, index) => ({
+                            onClick: () => {
+                                setSelectedNode(record.span_id)
+                                const isSpanView = traceTabs === "span"
+
+                                const targetTraceId = String(
+                                    record.trace_id ||
+                                        (record as any)?.invocationIds?.trace_id ||
+                                        (record as any)?.node?.trace_id ||
+                                        (record as any)?.root?.id ||
+                                        (record as any)?.traceId ||
+                                        (record as any)?.trace?.id ||
+                                        record.span_id ||
+                                        "",
                                 )
-                                return
-                            }
-
-                            setSelectedTraceId(targetTraceId)
-                            setTraceDrawerActiveSpan(targetSpanId || null)
-                            setTraceParam(targetTraceId)
-                            if (targetSpanId) {
-                                setSpanParam(targetSpanId)
-                            } else {
-                                setSpanParam(undefined)
-                            }
-                        },
-                        "data-tour": index === 0 ? "trace-row" : undefined,
-                    })}
-                    components={{
-                        header: {
-                            cell: ResizableTitle,
-                        },
-                    }}
-                    pagination={false}
-                    scroll={{x: "max-content"}}
-                />
-                {hasMoreTraces && (
-                    <Button
-                        onClick={handleLoadMore}
-                        disabled={isFetchingMore}
-                        type="text"
-                        size="large"
-                    >
-                        {isFetchingMore ? "Loading…" : "Click here to load more"}
-                    </Button>
-                )}
-            </div>
+
+                                const targetSpanId = isSpanView
+                                    ? String(record.span_id || "")
+                                    : String(record.span_id || "")
+
+                                if (!targetTraceId) {
+                                    console.warn(
+                                        "TraceDrawer: unable to determine trace id for record",
+                                        record,
+                                    )
+                                    return
+                                }
+
+                                setSelectedTraceId(targetTraceId)
+                                setTraceDrawerActiveSpan(targetSpanId || null)
+                                setTraceParam(targetTraceId)
+                                if (targetSpanId) {
+                                    setSpanParam(targetSpanId)
+                                } else {
+                                    setSpanParam(undefined)
+                                }
+                            },
+                            "data-tour": index === 0 ? "trace-row" : undefined,
+                        })}
+                        components={{
+                            header: {
+                                cell: ResizableTitle,
+                            },
+                        }}
+                        pagination={false}
+                        scroll={{x: "max-content"}}
+                    />
+                    {hasMoreTraces && (
+                        <Button
+                            onClick={handleLoadMore}
+                            disabled={isFetchingMore}
+                            type="text"
+                            size="large"
+                        >
+                            {isFetchingMore ? "Loading…" : "Click here to load more"}
+                        </Button>
+                    )}
+                </div>
+            )}
 
             <TestsetDrawer
                 open={testsetDrawerData.length > 0}