clean up unused js parts

pkgs/ui/src/components/join/configureVM.tsx

@@ -10,11 +10,7 @@ import {
 } from "@mui/material";
 import { Controller, SubmitHandler, UseFormReturn } from "react-hook-form";
 import { FlakeBadge } from "../flakeBadge/flakeBadge";
-import {
-  createVm,
-  useGetVmLogs,
-  useInspectFlakeAttrs,
-} from "@/api/default/default";
+import { createVm, useInspectFlakeAttrs } from "@/api/default/default";
 import { VmConfig } from "@/api/model";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { toast } from "react-hot-toast";

pkgs/ui/src/components/join/confirm.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { LoadingOverlay } from "./loadingOverlay";
 import { FlakeBadge } from "../flakeBadge/flakeBadge";
 import { Typography, Button } from "@mui/material";
-import { FlakeResponse } from "@/api/model";
+// import { FlakeResponse } from "@/api/model";
 import { ConfirmVM } from "./confirmVM";
 import { Log } from "./log";
 import GppMaybeIcon from "@mui/icons-material/GppMaybe";
@@ -11,22 +11,29 @@ import { useInspectFlake } from "@/api/default/default";
 
 interface ConfirmProps {
   flakeUrl: string;
+  flakeAttr: string;
   handleBack: () => void;
 }
 export const Confirm = (props: ConfirmProps) => {
-  const { flakeUrl, handleBack } = props;
+  const { flakeUrl, handleBack, flakeAttr } = props;
   const [userConfirmed, setUserConfirmed] = useState(false);
 
-  const { data, error, isLoading } = useInspectFlake({ url: flakeUrl });
+  const { data, isLoading } = useInspectFlake({
+    url: flakeUrl,
+  });
 
   return userConfirmed ? (
-    <ConfirmVM url={flakeUrl} handleBack={handleBack} />
+    <ConfirmVM
+      url={flakeUrl}
+      handleBack={handleBack}
+      defaultFlakeAttr={flakeAttr}
+    />
   ) : (
     <div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2 ">
       {isLoading && (
         <LoadingOverlay
           title={"Loading Flake"}
-          subtitle={<FlakeBadge flakeUrl={flakeUrl} flakeAttr="" />}
+          subtitle={<FlakeBadge flakeUrl={flakeUrl} flakeAttr={flakeAttr} />}
         />
       )}
       {data && (

pkgs/ui/src/components/join/confirmVM.tsx

@@ -3,30 +3,23 @@ import React, { useEffect, useState } from "react";
 import { VmConfig } from "@/api/model";
 import { useVms } from "@/components/hooks/useVms";
 
-import { Alert, AlertTitle, Button } from "@mui/material";
-
-import { useSearchParams } from "next/navigation";
-
-import { createVm, inspectVm, useGetVmLogs } from "@/api/default/default";
-
 import { LoadingOverlay } from "./loadingOverlay";
-import { FlakeBadge } from "../flakeBadge/flakeBadge";
-import { Log } from "./log";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { ConfigureVM } from "./configureVM";
 import { VmBuildLogs } from "./vmBuildLogs";
 
 interface ConfirmVMProps {
   url: string;
   handleBack: () => void;
+  defaultFlakeAttr: string;
 }
 
 export function ConfirmVM(props: ConfirmVMProps) {
-  const { url, handleBack } = props;
+  const { url, defaultFlakeAttr } = props;
   const formHooks = useForm<VmConfig>({
     defaultValues: {
       flake_url: url,
-      flake_attr: "default",
+      flake_attr: defaultFlakeAttr,
       cores: 4,
       graphics: true,
       memory_size: 2048,
@@ -34,11 +27,12 @@ export function ConfirmVM(props: ConfirmVMProps) {
   });
   const [vmUuid, setVmUuid] = useState<string | null>(null);
 
-  const { setValue, watch, formState, handleSubmit } = formHooks;
-  const { config, error, isLoading } = useVms({
+  const { setValue, watch, formState } = formHooks;
+  const { config, isLoading } = useVms({
     url,
-    attr: watch("flake_attr"),
+    attr: watch("flake_attr") || defaultFlakeAttr,
   });
+
   useEffect(() => {
     if (config) {
       setValue("cores", config?.cores);
@@ -51,44 +45,12 @@ export function ConfirmVM(props: ConfirmVMProps) {
     <div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2">
       {!formState.isSubmitted && (
         <>
-          {/* {error && (
-            <Alert severity="error" className="w-full max-w-2xl">
-              <AlertTitle>Error</AlertTitle>
-              An Error occurred - See details below
-            </Alert>
-          )} */}
           <div className="mb-2 w-full max-w-2xl">
             {isLoading && (
-              <LoadingOverlay
-                title={"Loading VM Configuration"}
-                subtitle={<FlakeBadge flakeUrl={url} flakeAttr={url} />}
-              />
+              <LoadingOverlay title={"Loading VM Configuration"} subtitle="" />
             )}
 
             <ConfigureVM formHooks={formHooks} setVmUuid={setVmUuid} />
-
-            {/* {error && (
-              <>
-                <Button
-                  color="error"
-                  fullWidth
-                  variant="contained"
-                  onClick={handleBack}
-                  className="my-2"
-                >
-                  Back
-                </Button>
-                <Log
-                  title="Log"
-                  lines={
-                    error?.response?.data?.detail
-                      ?.map((err, idx) => err.msg.split("\n"))
-                      ?.flat()
-                      .filter(Boolean) || []
-                  }
-                />
-              </>
-            )} */}
           </div>
         </>
       )}

pkgs/ui/src/components/join/loadingOverlay.tsx

@@ -1,18 +1,27 @@
 "use client";
-import { LinearProgress, Typography } from "@mui/material";
+import { CircularProgress, LinearProgress, Typography } from "@mui/material";
 
 interface LoadingOverlayProps {
   title: React.ReactNode;
   subtitle: React.ReactNode;
+  variant?: "linear" | "circle";
 }
 export const LoadingOverlay = (props: LoadingOverlayProps) => {
-  const { title, subtitle } = props;
+  const { title, subtitle, variant = "linear" } = props;
   return (
     <div className="w-full">
-      <Typography variant="subtitle2">{title}</Typography>
-      <LinearProgress className="mb-2 w-full" />
-      <div className="grid w-full place-items-center">{subtitle}</div>
-      <Typography variant="subtitle1"></Typography>
+      <div className="grid w-full place-items-center">
+        <Typography variant="subtitle1">{title}</Typography>
+      </div>
+      <div className="grid w-full place-items-center">
+        <Typography variant="subtitle2">{subtitle}</Typography>
+      </div>
+      {variant === "linear" && <LinearProgress className="my-2 w-full" />}
+      {variant === "circle" && (
+        <div className="grid w-full place-items-center">
+          <CircularProgress className="my-2 w-full" />
+        </div>
+      )}
     </div>
   );
 };

pkgs/ui/src/components/join/vmBuildLogs.tsx

@@ -9,11 +9,7 @@ interface VmBuildLogsProps {
 export const VmBuildLogs = (props: VmBuildLogsProps) => {
   const { vmUuid } = props;
 
-  const {
-    data: logs,
-    isLoading,
-    error,
-  } = useGetVmLogs(vmUuid as string, {
+  const { data: logs, isLoading } = useGetVmLogs(vmUuid as string, {
     swr: {
       enabled: vmUuid !== null,
     },