update some components, maybe fix invalidations?

2023-09-07 04:27:56 -07:00
parent c88e210136
commit dbe32056d0
9 changed files with 102 additions and 120 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,7 +21,7 @@
    "@radix-ui/react-popover": "^1.0.6",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-select": "^1.2.2",
-    "@radix-ui/react-slot": "^1.0.1",
+    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.3",
    "@radix-ui/react-toast": "^1.1.4",
--- a/frontend/src/layouts/page.tsx
+++ b/frontend/src/layouts/page.tsx
@@ -65,7 +65,7 @@ export const ConfigLayout = <T extends Resource<unknown, unknown>["config"]>({
      <div className="flex gap-2">
        <Button
          variant="outline"
-          intent="warning"
+          // intent="warning"
          onClick={onReset}
          disabled={content ? !Object.keys(content).length : true}
        >
--- a/frontend/src/ui/button.tsx
+++ b/frontend/src/ui/button.tsx
@@ -1,34 +1,30 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { VariantProps, cva } from "class-variance-authority";
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"

-import { cn } from "../util/helpers";
+import { cn } from "@util/helpers"

 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline:
-          "border border-input hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "underline-offset-4 hover:underline text-primary",
+        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
-        default: "h-10 py-2 px-4",
-        sm: "h-9 px-3 rounded-md",
-        lg: "h-11 px-8 rounded-md",
-      },
-      intent: {
-        success: "border-green-200 dark:border-green-800 hover:bg-green-800/30",
-        warning:
-          "border-orange-200 dark:border-orange-800 hover:bg-orange-800/30",
-        danger: "border-red-200 dark:border-red-800 hover:bg-red-800/30",
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
@@ -36,27 +32,26 @@ const buttonVariants = cva(
      size: "default",
    },
  }
-);
+)

 export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+  asChild?: boolean
 }

 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, intent, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
    return (
      <Comp
-        className={cn(buttonVariants({ variant, size, intent, className }))}
+        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
-    );
+    )
  }
-);
-Button.displayName = "Button";
+)
+Button.displayName = "Button"

-// eslint-disable-next-line react-refresh/only-export-components
-export { Button, buttonVariants };
+export { Button, buttonVariants }
--- a/frontend/src/ui/command.tsx
+++ b/frontend/src/ui/command.tsx
@@ -1,10 +1,10 @@
-import * as React from "react";
-import { DialogProps } from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
+import * as React from "react"
+import { DialogProps } from "@radix-ui/react-dialog"
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
+import { Command as CommandPrimitive } from "cmdk"

-import { Dialog, DialogContent } from "@ui/dialog";
-import { cn } from "@util/helpers";
+import { cn } from "@util/helpers"
+import { Dialog, DialogContent } from "@//ui/dialog"

 const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
@@ -18,42 +18,41 @@ const Command = React.forwardRef<
    )}
    {...props}
  />
-));
-Command.displayName = CommandPrimitive.displayName;
+))
+Command.displayName = CommandPrimitive.displayName

-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface CommandDialogProps extends DialogProps {}

 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
  return (
    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-2xl">
+      <DialogContent className="overflow-hidden p-0">
        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
-  );
-};
+  )
+}

 const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
    <CommandPrimitive.Input
      ref={ref}
      className={cn(
-        "placeholder:text-foreground-muted flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    />
  </div>
-));
+))

-CommandInput.displayName = CommandPrimitive.Input.displayName;
+CommandInput.displayName = CommandPrimitive.Input.displayName

 const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
@@ -61,15 +60,12 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <CommandPrimitive.List
    ref={ref}
-    className={cn(
-      "h-[500px] max-h-[500px] overflow-y-auto overflow-x-hidden",
-      className
-    )}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
    {...props}
  />
-));
+))

-CommandList.displayName = CommandPrimitive.List.displayName;
+CommandList.displayName = CommandPrimitive.List.displayName

 const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
@@ -80,9 +76,9 @@ const CommandEmpty = React.forwardRef<
    className="py-6 text-center text-sm"
    {...props}
  />
-));
+))

-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName

 const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
@@ -96,9 +92,9 @@ const CommandGroup = React.forwardRef<
    )}
    {...props}
  />
-));
+))

-CommandGroup.displayName = CommandPrimitive.Group.displayName;
+CommandGroup.displayName = CommandPrimitive.Group.displayName

 const CommandSeparator = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Separator>,
@@ -109,8 +105,8 @@ const CommandSeparator = React.forwardRef<
    className={cn("-mx-1 h-px bg-border", className)}
    {...props}
  />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName

 const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
@@ -124,9 +120,9 @@ const CommandItem = React.forwardRef<
    )}
    {...props}
  />
-));
+))

-CommandItem.displayName = CommandPrimitive.Item.displayName;
+CommandItem.displayName = CommandPrimitive.Item.displayName

 const CommandShortcut = ({
  className,
@@ -140,9 +136,9 @@ const CommandShortcut = ({
      )}
      {...props}
    />
-  );
-};
-CommandShortcut.displayName = "CommandShortcut";
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"

 export {
  Command,
@@ -154,4 +150,4 @@ export {
  CommandItem,
  CommandShortcut,
  CommandSeparator,
-};
+}
--- a/frontend/src/ui/dialog.tsx
+++ b/frontend/src/ui/dialog.tsx
@@ -1,24 +1,20 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-import { cn } from "@util/helpers";
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"

-const Dialog = DialogPrimitive.Root;
+import { cn } from "@util/helpers"

-const DialogTrigger = DialogPrimitive.Trigger;
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger

 const DialogPortal = ({
  className,
-  children,
  ...props
 }: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props}>
-    <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
-      {children}
-    </div>
-  </DialogPrimitive.Portal>
-);
-DialogPortal.displayName = DialogPrimitive.Portal.displayName;
+  <DialogPrimitive.Portal className={cn(className)} {...props} />
+)
+DialogPortal.displayName = DialogPrimitive.Portal.displayName

 const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -27,13 +23,13 @@ const DialogOverlay = React.forwardRef<
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

 const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
@@ -44,20 +40,20 @@ const DialogContent = React.forwardRef<
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
-        "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
        className
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+        <Cross2Icon className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName

 const DialogHeader = ({
  className,
@@ -70,8 +66,8 @@ const DialogHeader = ({
    )}
    {...props}
  />
-);
-DialogHeader.displayName = "DialogHeader";
+)
+DialogHeader.displayName = "DialogHeader"

 const DialogFooter = ({
  className,
@@ -84,8 +80,8 @@ const DialogFooter = ({
    )}
    {...props}
  />
-);
-DialogFooter.displayName = "DialogFooter";
+)
+DialogFooter.displayName = "DialogFooter"

 const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
@@ -99,8 +95,8 @@ const DialogTitle = React.forwardRef<
    )}
    {...props}
  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName

 const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
@@ -111,8 +107,8 @@ const DialogDescription = React.forwardRef<
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName

 export {
  Dialog,
@@ -122,4 +118,4 @@ export {
  DialogFooter,
  DialogTitle,
  DialogDescription,
-};
+}
--- a/frontend/src/ui/input.tsx
+++ b/frontend/src/ui/input.tsx
@@ -1,8 +1,7 @@
-import * as React from "react";
+import * as React from "react"

-import { cn } from "../util/helpers";
+import { cn } from "@util/helpers"

-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {}

@@ -12,15 +11,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
      <input
        type={type}
        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
          className
        )}
        ref={ref}
        {...props}
      />
-    );
+    )
  }
-);
-Input.displayName = "Input";
+)
+Input.displayName = "Input"

-export { Input };
+export { Input }
--- a/frontend/src/ui/toast/toasts.tsx
+++ b/frontend/src/ui/toast/toasts.tsx
@@ -13,7 +13,7 @@ const ToastViewport = React.forwardRef<
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
-      "fixed bottom-0 sm:right-0 z-[100] gap-2 flex max-h-screen w-full flex-col-reverse p-4 sm:flex-col md:max-w-[420px]",
+      "fixed gap-2 bottom-0 sm:right-0 z-[100] gap-2 flex max-h-screen w-full flex-col-reverse p-4 sm:flex-col md:max-w-[420px]",
      className
    )}
    {...props}
--- a/frontend/src/util/socket.tsx
+++ b/frontend/src/util/socket.tsx
@@ -30,29 +30,25 @@ const on_message = (
    if (update.target.type === "Deployment") {
      invalidate(
        ["ListDeployments"],
-        ["GetDeployment", { id: update.target.id }],
-        ["GetLog", { id: update.target.id }],
-        ["GetDeploymentActionState", { id: update.target.id }],
-        ["GetDeploymentStatus", { id: update.target.id }]
+        ["GetDeployment"],
+        ["GetLog"],
+        ["GetDeploymentActionState"],
+        ["GetDeploymentStatus"]
      );
    }

    if (update.target.type === "Server") {
      invalidate(
        ["ListServers"],
-        ["GetServer", { id: update.target.id }],
-        ["GetServerActionState", { id: update.target.id }],
-        ["GetServerStatus", { id: update.target.id }],
-        ["GetHistoricalServerStats", { id: update.target.id }]
+        ["GetServer"],
+        ["GetServerActionState"],
+        ["GetServerStatus"],
+        ["GetHistoricalServerStats"]
      );
    }

    if (update.target.type === "Build") {
-      invalidate(
-        ["ListBuilds"],
-        ["GetBuild", { id: update.target.id }],
-        ["GetBuildActionState", { id: update.target.id }]
-      );
+      invalidate(["ListBuilds"], ["GetBuild"], ["GetBuildActionState"]);
    }
  }, 100);
 };
@@ -90,7 +86,7 @@ export const WsStatusIndicator = () => {
      <Circle
        className={cn(
          "w-4 h-4 stroke-none",
-          !!ws ? "fill-green-500" : "fill-red-500"
+          ws ? "fill-green-500" : "fill-red-500"
        )}
      />
    </Button>
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -945,7 +945,7 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-compose-refs" "1.0.0"

-"@radix-ui/react-slot@1.0.1", "@radix-ui/react-slot@^1.0.1":
+"@radix-ui/react-slot@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81"
  integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==
@@ -953,7 +953,7 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-compose-refs" "1.0.0"

-"@radix-ui/react-slot@1.0.2":
+"@radix-ui/react-slot@1.0.2", "@radix-ui/react-slot@^1.0.2":
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
  integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==