[UI v2] feat: Adding generic empty-state component, and replaced vari…

…ables empty-state for it (#16193)

ui-v2/.gitignore

@@ -28,3 +28,4 @@ dist-ssr
 oss_schema.json
 *.tsbuildinfo
 *storybook.log
+*.orig

ui-v2/src/components/ui/empty-state.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { PlusIcon } from "lucide-react";
+import { Button } from "./button";
+import { DocsLink } from "./docs-link";
+import {
+	EmptyState,
+	EmptyStateActions,
+	EmptyStateDescription,
+	EmptyStateIcon,
+	EmptyStateTitle,
+} from "./empty-state";
+
+const meta: Meta<typeof EmptyState> = {
+	title: "UI/EmptyState",
+	component: EmptyState,
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"EmptyState is used to prompt to user to create a resource when there is none",
+			},
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof EmptyState>;
+export const Usage: Story = {
+	render: () => <EmptyStateExample />,
+};
+
+function EmptyStateExample(): JSX.Element {
+	return (
+		<EmptyState>
+			<EmptyStateIcon id="Variable" />
+			<EmptyStateTitle>Add a variable to get started</EmptyStateTitle>
+			<EmptyStateDescription>
+				Variables store non-sensitive pieces of JSON.
+			</EmptyStateDescription>
+			<EmptyStateActions>
+				<Button onClick={console.log}>
+					Add Variable <PlusIcon className="h-4 w-4 ml-2" />
+				</Button>
+				<DocsLink id="variables-guide" />
+			</EmptyStateActions>
+		</EmptyState>
+	);
+}

ui-v2/src/components/ui/empty-state.tsx

@@ -0,0 +1,43 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { icons } from "lucide-react";
+
+const EmptyStateIcon = ({ id }: { id: keyof typeof icons }): JSX.Element => {
+	const LucideIcon = icons[id];
+	return <LucideIcon className="h-12 w-12 text-muted-foreground mb-8" />;
+};
+const EmptyStateTitle = ({
+	children,
+}: { children: React.ReactNode }): JSX.Element => (
+	<h3 className="text-2xl font-bold">{children}</h3>
+);
+
+const EmptyStateDescription = ({
+	children,
+}: { children: React.ReactNode }): JSX.Element => (
+	<p className="text-md text-muted-foreground">{children}</p>
+);
+
+const EmptyStateActions = ({
+	children,
+}: { children: React.ReactNode }): JSX.Element => (
+	<div className="flex gap-2 mt-4">{children}</div>
+);
+
+type Props = {
+	children: React.ReactNode;
+};
+const EmptyState = ({ children }: Props): JSX.Element => (
+	<Card>
+		<CardContent className="flex flex-col gap-2 items-center justify-center py-16">
+			{children}
+		</CardContent>
+	</Card>
+);
+
+export {
+	EmptyState,
+	EmptyStateIcon,
+	EmptyStateTitle,
+	EmptyStateDescription,
+	EmptyStateActions,
+};

ui-v2/src/components/variables/empty-state.tsx

@@ -1,27 +1,31 @@
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
 import { DocsLink } from "@/components/ui/docs-link";
-import { PlusIcon, VariableIcon } from "lucide-react";
+import {
+	EmptyState,
+	EmptyStateActions,
+	EmptyStateDescription,
+	EmptyStateIcon,
+	EmptyStateTitle,
+} from "@/components/ui/empty-state";
+import { PlusIcon } from "lucide-react";
 
 type VariablesEmptyStateProps = {
 	onAddVariableClick: () => void;
 };
 export const VariablesEmptyState = ({
 	onAddVariableClick,
 }: VariablesEmptyStateProps) => (
-	<Card>
-		<CardContent className="flex flex-col gap-2 items-center justify-center py-16">
-			<VariableIcon className="h-12 w-12 text-muted-foreground mb-8" />
-			<h3 className="text-2xl font-bold">Add a variable to get started</h3>
-			<p className="text-md text-muted-foreground">
-				Variables store non-sensitive pieces of JSON.
-			</p>
-			<div className="flex gap-2 mt-4">
-				<Button onClick={() => onAddVariableClick()}>
-					Add Variable <PlusIcon className="h-4 w-4 ml-2" />
-				</Button>
-				<DocsLink id="variables-guide" />
-			</div>
-		</CardContent>
-	</Card>
+	<EmptyState>
+		<EmptyStateIcon id="Variable" />
+		<EmptyStateTitle>Add a variable to get started</EmptyStateTitle>
+		<EmptyStateDescription>
+			Variables store non-sensitive pieces of JSON.
+		</EmptyStateDescription>
+		<EmptyStateActions>
+			<Button onClick={() => onAddVariableClick()}>
+				Add Variable <PlusIcon className="h-4 w-4 ml-2" />
+			</Button>
+			<DocsLink id="variables-guide" />
+		</EmptyStateActions>
+	</EmptyState>
 );