clean-up

Signed-off-by: Paul Hildebrandt <[email protected]>

src/app/layout.tsx

@@ -7,6 +7,7 @@ import { siteConfig } from "@/config/site";
 import { ThemeProvider } from "@/components/theme-provider";
 import { TailwindIndicator } from "@/components/tailwind-indicator";
 import Header from "@/components/header";
+import { Toaster } from "@/components/ui/toaster";
 
 export const metadata: Metadata = {
   title: {
@@ -61,6 +62,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
             </div>
           </ThemeProvider>
           <TailwindIndicator />
+          <Toaster />
         </body>
       </html>
     </>

src/components/form/form.tsx

@@ -1,37 +1,31 @@
 "use client";
 
-import { useState, createRef } from "react";
+import { useState } from "react";
 import React from "react";
 import validator from "@rjsf/validator-ajv8";
-import { getDefaultRegistry } from "@rjsf/core";
-import { ObjectFieldTemplateProps } from "@rjsf/utils";
+import { RJSFValidationError } from "@rjsf/utils";
 import { stringify } from "yaml";
 import SyntaxHighlighter from "react-syntax-highlighter";
 
 import { convertYamlFormat } from "@/lib/utils";
 import uiSchema from "@/components/form/uischema";
 import SubmitButton from "@/components/form/custom/SubmitButton/SubmitButton";
-import { Separator } from "@/components/ui/separator";
 import {
   Card,
   CardContent,
-  CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
 import { widgets } from "@/components/form/widgets";
 import { Form as RJSForm } from "@/components/form/custom";
-import { DownloadButton } from "@/components/form/download-button";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-  SelectGroup,
-  SelectLabel,
 } from "@/components/ui/select";
+import { useToast } from "@/lib/use-toast";
 
 export const ClusterForm = (schemas: any) => {
   const schema = schemas?.schemas;
@@ -50,6 +44,18 @@ export const ClusterForm = (schemas: any) => {
     .slice(0, 1)[0]
     .trimEnd();
 
+  const focusOnError = (error: RJSFValidationError) => {
+    setTimeout(() => {
+      window.scroll({
+        top: 0,
+        left: 0,
+        behavior: "smooth",
+      });
+    }, 0);
+  };
+
+  const { toast } = useToast();
+
   const onSubmit = (data: any, e: React.FormEvent) => {
     const yamlData = JSON.parse(JSON.stringify(data.formData));
     const clusterName = yamlData.metadata?.name || "cluster";
@@ -62,6 +68,10 @@ export const ClusterForm = (schemas: any) => {
     link.click();
     document.body.removeChild(link);
     window.URL.revokeObjectURL(url);
+
+    toast({
+      title: `🎉 Downloading ${clusterName}.yaml`,
+    });
   };
 
   return (
@@ -112,6 +122,7 @@ export const ClusterForm = (schemas: any) => {
                   formData={formData}
                   onChange={(e: any) => setFormData(e.formData)}
                   onSubmit={onSubmit}
+                  focusOnFirstError={focusOnError}
                   templates={{ ButtonTemplates: { SubmitButton } }}
                 ></RJSForm>
               </CardContent>

src/components/ui/toast.tsx

@@ -25,7 +25,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-lg border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
@@ -62,7 +62,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-lg border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
       className,
     )}
     {...props}
@@ -77,7 +77,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute right-2 top-2 rounded-lg p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className,
     )}
     toast-close=""

src/components/ui/toaster.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useToast } from "@/components/hooks/use-toast";
+import { useToast } from "@/lib/use-toast";
 import {
   Toast,
   ToastClose,