Merge pull request #4 from elixir-cloud-aai/pages

feat: added service updation page

Author: AnonymousXC

bun.lock

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@elixir-cloud/cloud-registry": "^2.0.0-alpha.48",
+    "@tanstack/react-form": "^1.29.1",
     "axios": "^1.15.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -25,7 +26,8 @@
     "shadcn": "^4.4.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

package.json

@@ -11,7 +11,8 @@ async function Page({ searchParams }: Props) {
     if (type === "params") message = "Invalid request parameters found.";
     else if (type === "state") message = "Invalid state found. State does not match.";
     else if (type === "logout-err")
-        message = "An internal server error occurred while logging you out. Please try logging out again.";
+        message =
+            "An internal server error occurred while logging you out. Please try logging out again.";
 
     return (
         <div className="flex w-full h-screen justify-center items-center">

src/app/auth/error/page.tsx

@@ -12,7 +12,7 @@ type Props = {
 function ServicesTableBody({ services, fetchServices }: Props) {
     const { cloudRegistryProvider } = useCloudRegistry();
     const [selectedService, setSelectedService] = useState<ExternalService | null>(null);
-    
+
     if (services.length === 0)
         return (
             <TableBody>

src/app/dashboard/services/_components/table-body.tsx

@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/dialog";
 import { AuthenticatedCloudRegistryProvider } from "@/lib/authenticated-cloud-registry";
 import { ExternalService } from "@elixir-cloud/cloud-registry/providers";
+import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
 import ViewServiceDialogBody from "./view-service-dailog-body";
@@ -67,8 +68,8 @@ function ServiceDetailsDialog({
                 <ViewServiceDialogBody service={service} />
 
                 <DialogFooter className="px-4 py-4 border-t">
-                    <Button size="sm" onClick={() => onOpenChange(false)}>
-                        Close
+                    <Button size="sm" asChild>
+                        <Link href={`/dashboard/update-service/${service.id}`}>Edit</Link>
                     </Button>
                     <Button
                         size="sm"

src/app/dashboard/services/_components/view-service-dailog.tsx

@@ -1,5 +1,48 @@
+"use client";
+import { useCloudRegistry } from "@/hooks";
+import { ExternalService } from "@elixir-cloud/cloud-registry/providers";
+import { useParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { ServiceUpdationForm } from "../_components";
+
 function Page() {
-    return <div></div>;
+    const { id } = useParams();
+    const [loading, setLoading] = useState(true);
+    const { cloudRegistryProvider } = useCloudRegistry();
+    const [service, setService] = useState<ExternalService>();
+
+    useEffect(() => {
+        if (!id) return;
+        cloudRegistryProvider
+            ?.getServiceById(id as string)
+            .then((_val) => {
+                setService(_val);
+                console.log(_val);
+            })
+            .catch(() => toast.error("Cannot fetch the service details. Please try again later."))
+            .finally(() => setLoading(false));
+    }, [cloudRegistryProvider, id]);
+
+    if (loading)
+        return (
+            <div className="w-full flex justify-center items-center h-full">
+                <p>Loading...</p>
+            </div>
+        );
+
+    if (loading === false && !service)
+        return (
+            <div className="w-full flex justify-center items-center h-full">
+                <p>No service data found. Please try again later.</p>
+            </div>
+        );
+
+    return (
+        <div className="max-w-5xl mx-auto mt-8">
+            {service && <ServiceUpdationForm service={service} />}{" "}
+        </div>
+    );
 }
 
 export default Page;

src/app/dashboard/update-service/[id]/page.tsx

@@ -0,0 +1,56 @@
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+
+type Option = {
+    label: string;
+    value: string;
+};
+
+type SelectFieldProps = {
+    form: any;
+    name: string;
+    label: string;
+    placeholder?: string;
+    options: Option[];
+};
+
+export function SelectField({ form, name, label, placeholder, options }: SelectFieldProps) {
+    return (
+        <form.Field name={name}>
+            {(field: any) => {
+                const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+
+                return (
+                    <Field data-invalid={isInvalid}>
+                        <FieldLabel htmlFor={field.name}>{label}</FieldLabel>
+
+                        <Select
+                            value={field.state.value}
+                            onValueChange={(value) => field.handleChange(value)}
+                        >
+                            <SelectTrigger aria-invalid={isInvalid} id={field.name}>
+                                <SelectValue placeholder={placeholder} />
+                            </SelectTrigger>
+
+                            <SelectContent>
+                                {options.map((option) => (
+                                    <SelectItem key={option.value} value={option.value}>
+                                        {option.label}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+
+                        {isInvalid && <FieldError errors={field.state.meta.errors} />}
+                    </Field>
+                );
+            }}
+        </form.Field>
+    );
+}

src/app/dashboard/update-service/_components/_fields/dropdown-field.tsx

@@ -0,0 +1,4 @@
+import { SelectField } from "./dropdown-field";
+import { TextField } from "./text-field";
+
+export { SelectField, TextField };

src/app/dashboard/update-service/_components/_fields/index.ts

@@ -0,0 +1,37 @@
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+
+type TextFieldProps = {
+    form: any;
+    name: string;
+    label: string;
+    placeholder?: string;
+};
+
+export function TextField({ form, name, label, placeholder }: TextFieldProps) {
+    return (
+        <form.Field name={name}>
+            {(field: any) => {
+                const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+
+                return (
+                    <Field data-invalid={isInvalid}>
+                        <FieldLabel htmlFor={field.name}>{label}</FieldLabel>
+
+                        <Input
+                            id={field.name}
+                            name={field.name}
+                            value={field.state.value}
+                            onBlur={field.handleBlur}
+                            onChange={(e) => field.handleChange(e.target.value)}
+                            placeholder={placeholder}
+                            aria-invalid={isInvalid}
+                        />
+
+                        {isInvalid && <FieldError errors={field.state.meta.errors} />}
+                    </Field>
+                );
+            }}
+        </form.Field>
+    );
+}

src/app/dashboard/update-service/_components/_fields/text-field.tsx

@@ -0,0 +1,49 @@
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Textarea } from "@/components/ui/textarea";
+
+type TextareaFieldProps = {
+    form: any;
+    name: string;
+    label: string;
+    placeholder?: string;
+    rows?: number;
+    className?: string;
+};
+
+export function TextareaField({
+    form,
+    name,
+    label,
+    placeholder,
+    rows = 5,
+    className,
+}: TextareaFieldProps) {
+    return (
+        <div className={className}>
+            <form.Field name={name}>
+                {(field: any) => {
+                    const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+
+                    return (
+                        <Field data-invalid={isInvalid}>
+                            <FieldLabel htmlFor={field.name}>{label}</FieldLabel>
+
+                            <Textarea
+                                id={field.name}
+                                name={field.name}
+                                value={field.state.value ?? ""}
+                                onBlur={field.handleBlur}
+                                onChange={(e) => field.handleChange(e.target.value)}
+                                placeholder={placeholder}
+                                rows={rows}
+                                aria-invalid={isInvalid}
+                            />
+
+                            {isInvalid && <FieldError errors={field.state.meta.errors} />}
+                        </Field>
+                    );
+                }}
+            </form.Field>
+        </div>
+    );
+}