#591 - scripts

app/Actions/Script/CreateScript.php

@@ -4,6 +4,7 @@
 
 use App\Models\Script;
 use App\Models\User;
+use Illuminate\Support\Facades\Validator;
 
 class CreateScript
 {
@@ -12,6 +13,8 @@ class CreateScript
      */
     public function create(User $user, array $input): Script
     {
+        Validator::make($input, self::rules())->validate();
+
         $script = new Script([
             'user_id' => $user->id,
             'name' => $input['name'],

app/Actions/Script/ExecuteScript.php

@@ -7,6 +7,8 @@
 use App\Models\ScriptExecution;
 use App\Models\Server;
 use App\Models\ServerLog;
+use App\Models\User;
+use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\Rule;
 
 class ExecuteScript
@@ -14,24 +16,44 @@ class ExecuteScript
     /**
      * @param  array<string, mixed>  $input
      */
-    public function execute(Script $script, array $input): ScriptExecution
+    public function execute(Script $script, User $user, array $input): ScriptExecution
     {
+        Validator::make($input, self::rules($script, $input))->validate();
+
+        $variables = [];
+        foreach ($script->getVariables() as $variable) {
+            if (array_key_exists($variable, $input)) {
+                $variables[$variable] = $input[$variable] ?? '';
+            }
+        }
+
+        /** @var Server $server */
+        $server = Server::query()->findOrFail($input['server']);
+
+        if (! $user->can('update', $server)) {
+            abort(403, 'You do not have permission to execute scripts on this server.');
+        }
+
         $execution = new ScriptExecution([
             'script_id' => $script->id,
             'server_id' => $input['server'],
             'user' => $input['user'],
-            'variables' => $input['variables'] ?? [],
+            'variables' => $variables,
             'status' => ScriptExecutionStatus::EXECUTING,
         ]);
         $execution->save();
 
-        dispatch(function () use ($execution, $script): void {
+        $log = ServerLog::newLog($execution->server, 'script-'.$script->id.'-'.strtotime('now'));
+        $log->save();
+
+        $execution->server_log_id = $log->id;
+        $execution->save();
+
+        dispatch(function () use ($execution, $log): void {
             /** @var Server $server */
             $server = $execution->server;
 
             $content = $execution->getContent();
-            $log = ServerLog::newLog($server, 'script-'.$script->id.'-'.strtotime('now'));
-            $log->save();
             $execution->server_log_id = $log->id;
             $execution->save();
             $server->os()->runScript('~/', $content, $log, $execution->user);
@@ -49,7 +71,7 @@ public function execute(Script $script, array $input): ScriptExecution
      * @param  array<string, mixed>  $input
      * @return array<string, mixed>
      */
-    public static function rules(array $input): array
+    public static function rules(Script $script, array $input): array
     {
         $users = ['root'];
         if (isset($input['server'])) {
@@ -58,7 +80,7 @@ public static function rules(array $input): array
             $users = $server->getSshUsers();
         }
 
-        return [
+        $rules = [
             'server' => [
                 'required',
                 Rule::exists('servers', 'id'),
@@ -67,12 +89,16 @@ public static function rules(array $input): array
                 'required',
                 Rule::in($users),
             ],
-            'variables' => 'array',
-            'variables.*' => [
+        ];
+
+        foreach ($script->getVariables() as $variable) {
+            $rules[$variable] = [
                 'required',
                 'string',
                 'max:255',
-            ],
             ];
         }
+
+        return $rules;
+    }
 }

app/Actions/Site/DeleteSite.php

@@ -42,6 +42,9 @@ public function delete(Site $site, array $input): void
         $site->delete();
     }
 
+    /**
+     * @param  array<string, mixed>  $input
+     */
     private function validate(Site $site, array $input): void
     {
         Validator::make($input, [

app/Http/Controllers/ApplicationController.php

@@ -37,7 +37,7 @@ public function index(Server $server, Site $site): Response
         return Inertia::render('application/index', [
             'deployments' => DeploymentResource::collection($site->deployments()->latest()->simplePaginate(config('web.pagination_size'))),
             'deploymentScript' => $site->deploymentScript?->content,
-            'loadBalancerServers' => LoadBalancerServerResource::collection($site->loadBalancerServers)
+            'loadBalancerServers' => LoadBalancerServerResource::collection($site->loadBalancerServers),
         ]);
     }
 

app/Http/Controllers/ScriptController.php

@@ -0,0 +1,95 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Script\CreateScript;
+use App\Actions\Script\EditScript;
+use App\Actions\Script\ExecuteScript;
+use App\Http\Resources\ScriptExecutionResource;
+use App\Http\Resources\ScriptResource;
+use App\Models\Script;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\ResourceCollection;
+use Inertia\Inertia;
+use Inertia\Response;
+use Spatie\RouteAttributes\Attributes\Delete;
+use Spatie\RouteAttributes\Attributes\Get;
+use Spatie\RouteAttributes\Attributes\Middleware;
+use Spatie\RouteAttributes\Attributes\Post;
+use Spatie\RouteAttributes\Attributes\Prefix;
+use Spatie\RouteAttributes\Attributes\Put;
+
+#[Prefix('scripts')]
+#[Middleware(['auth'])]
+class ScriptController extends Controller
+{
+    #[Get('/', name: 'scripts')]
+    public function index(): Response
+    {
+        $this->authorize('viewAny', Script::class);
+
+        return Inertia::render('scripts/index', [
+            'scripts' => ScriptResource::collection(user()->scripts()->simplePaginate(config('web.pagination_size'))),
+        ]);
+    }
+
+    #[Get('/json', name: 'scripts.json')]
+    public function json(): ResourceCollection
+    {
+        $this->authorize('viewAny', Script::class);
+
+        return ScriptResource::collection(user()->scripts()->get());
+    }
+
+    #[Get('/{script}', name: 'scripts.show')]
+    public function show(Script $script): Response
+    {
+        $this->authorize('view', $script);
+
+        return Inertia::render('scripts/show', [
+            'script' => new ScriptResource($script),
+            'executions' => ScriptExecutionResource::collection(
+                $script->executions()->latest()->simplePaginate(config('web.pagination_size'))
+            ),
+        ]);
+    }
+
+    #[Post('/', name: 'scripts.store')]
+    public function store(Request $request): RedirectResponse
+    {
+        $this->authorize('create', Script::class);
+
+        app(CreateScript::class)->create(user(), $request->input());
+
+        return back()->with('success', 'Script created.');
+    }
+
+    #[Put('/{script}', name: 'scripts.update')]
+    public function update(Script $script, Request $request): RedirectResponse
+    {
+        $this->authorize('update', $script);
+
+        app(EditScript::class)->edit($script, user(), $request->input());
+
+        return back()->with('success', 'Script updated.');
+    }
+
+    #[Delete('/{script}', name: 'scripts.destroy')]
+    public function destroy(Script $script): RedirectResponse
+    {
+        $this->authorize('delete', $script);
+
+        $script->delete();
+
+        return back()->with('success', 'Script deleted.');
+    }
+
+    #[Post('/{script}/execute', name: 'scripts.execute')]
+    public function execute(Request $request, Script $script): RedirectResponse
+    {
+        app(ExecuteScript::class)->execute($script, user(), $request->input());
+
+        return redirect()->route('scripts.show', $script)->with('info', 'Script is being executed.');
+    }
+}

app/Http/Resources/ScriptExecutionResource.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Models\ScriptExecution;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+/** @mixin ScriptExecution */
+class ScriptExecutionResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'script_id' => $this->script_id,
+            'server_id' => $this->server_id,
+            'server' => new ServerResource($this->server),
+            'server_log_id' => $this->server_log_id,
+            'log' => ServerLogResource::make($this->serverLog),
+            'user' => $this->user,
+            'variables' => $this->variables,
+            'status' => $this->status,
+            'status_color' => ScriptExecution::$statusColors[$this->status] ?? 'gray',
+            'created_at' => $this->created_at,
+            'updated_at' => $this->updated_at,
+        ];
+    }
+}

app/Http/Resources/ScriptResource.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Models\Script;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+/** @mixin Script */
+class ScriptResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'user_id' => $this->user_id,
+            'user' => new UserResource($this->whenLoaded('user')),
+            'name' => $this->name,
+            'content' => $this->content,
+            'variables' => $this->getVariables(),
+            'last_execution' => ScriptExecutionResource::make($this->lastExecution),
+            'created_at' => $this->created_at,
+            'updated_at' => $this->updated_at,
+        ];
+    }
+}

resources/js/components/app-sidebar.tsx

@@ -14,7 +14,7 @@ import {
 } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
 import { Link, router } from '@inertiajs/react';
-import { BookOpen, ChevronRightIcon, CogIcon, Folder, MousePointerClickIcon, ServerIcon } from 'lucide-react';
+import { BookOpen, ChevronRightIcon, CogIcon, Folder, MousePointerClickIcon, ServerIcon, ZapIcon } from 'lucide-react';
 import AppLogo from './app-logo';
 import { Icon } from '@/components/icon';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
@@ -30,6 +30,11 @@ const mainNavItems: NavItem[] = [
     href: route('sites.all'),
     icon: MousePointerClickIcon,
   },
+  {
+    title: 'Scripts',
+    href: route('scripts'),
+    icon: ZapIcon,
+  },
   {
     title: 'Settings',
     href: route('settings'),

resources/js/pages/application/components/load-balancer.tsx

@@ -7,13 +7,12 @@ import HeaderContainer from '@/components/header-container';
 import Heading from '@/components/heading';
 import { Button } from '@/components/ui/button';
 import { BookOpenIcon, LoaderCircleIcon } from 'lucide-react';
-import React, { FormEvent } from 'react';
+import { FormEvent } from 'react';
 import { LoadBalancerServer } from '@/types/load-balancer-server';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import type { Project } from '@/types/project';
 import InputError from '@/components/ui/input-error';
 import FormSuccessful from '@/components/form-successful';
 

resources/js/pages/scripts/components/columns.tsx

@@ -0,0 +1,106 @@
+import { ColumnDef } from '@tanstack/react-table';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { Link, useForm } from '@inertiajs/react';
+import { LoaderCircleIcon, MoreVerticalIcon, PlayIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { useState } from 'react';
+import { Script } from '@/types/script';
+import Execute from '@/pages/scripts/components/execute';
+import ScriptForm from './form';
+
+function Delete({ script }: { script: Script }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(route('scripts.destroy', { server: script.server_id, site: script.site_id, script: script.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
+          Delete
+        </DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete script</DialogTitle>
+          <DialogDescription className="sr-only">Delete script</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">Are you sure you want to this script?</p>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button variant="destructive" disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const columns: ColumnDef<Script>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    id: 'actions',
+    enableColumnFilter: false,
+    enableSorting: false,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center justify-end gap-1">
+          <Execute script={row.original}>
+            <Button variant="outline" className="size-8">
+              <PlayIcon className="size-3" />
+            </Button>
+          </Execute>
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 w-8 p-0">
+                <span className="sr-only">Open menu</span>
+                <MoreVerticalIcon />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <ScriptForm script={row.original}>
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
+              </ScriptForm>
+              <Link
+                href={route('scripts.show', {
+                  script: row.original.id,
+                })}
+              >
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Executions</DropdownMenuItem>
+              </Link>
+              <DropdownMenuSeparator />
+              <Delete script={row.original} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/scripts/components/execute.tsx

@@ -0,0 +1,105 @@
+import React, { ReactNode, useState } from 'react';
+import { useForm } from '@inertiajs/react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { Script } from '@/types/script';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import InputError from '@/components/ui/input-error';
+import ServerSelect from '@/pages/servers/components/server-select';
+import { Server } from '@/types/server';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+
+export default function Execute({ script, children }: { script: Script; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const [server, setServer] = useState<Server>();
+  const form = useForm<Record<string, string>>({
+    server: '',
+    user: '',
+  });
+
+  const submit = () => {
+    form.post(route('scripts.execute', { script: script.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Execute</DialogTitle>
+          <DialogDescription className="sr-only">Execute script</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2 p-4">
+          <p>Are you sure you want to run this script?</p>
+          <Form id="execute-script-form" onSubmit={submit}>
+            <FormFields>
+              <FormField>
+                <Label htmlFor="server">Server</Label>
+                <ServerSelect
+                  value={form.data.server}
+                  onValueChange={(value) => {
+                    form.setData('server', value.id.toString());
+                    setServer(value);
+                  }}
+                />
+                <InputError message={form.errors.server} />
+              </FormField>
+              <FormField>
+                <Label htmlFor="user">User</Label>
+                <Select value={form.data.user} onValueChange={(value) => form.setData('user', value)}>
+                  <SelectTrigger id="user">
+                    <SelectValue placeholder="Select a user" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      {server?.ssh_users.map((user) => (
+                        <SelectItem key={`user-${user}`} value={user}>
+                          {user}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+                <InputError message={form.errors.user} />
+              </FormField>
+              {script.variables.map((variable: string) => (
+                <FormField key={`variable-${variable}`}>
+                  <Label htmlFor={variable}>{variable}</Label>
+                  <Input id={variable} name={variable} value={form.data[variable] || ''} onChange={(e) => form.setData(variable, e.target.value)} />
+                  <InputError message={form.errors[variable as keyof typeof form.errors]} />
+                </FormField>
+              ))}
+            </FormFields>
+          </Form>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            Execute
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/scripts/components/execution-columns.tsx

@@ -0,0 +1,69 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { Button } from '@/components/ui/button';
+import { MoreVerticalIcon } from 'lucide-react';
+import DateTime from '@/components/date-time';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { ScriptExecution } from '@/types/script-execution';
+import { Badge } from '@/components/ui/badge';
+import { Download, View } from '@/pages/server-logs/components/columns';
+import { Link } from '@inertiajs/react';
+
+export const columns: ColumnDef<ScriptExecution>[] = [
+  {
+    accessorKey: 'created_at',
+    header: 'Deployed At',
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <DateTime date={row.original.created_at} />;
+    },
+  },
+  {
+    accessorKey: 'server',
+    header: 'Server',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return row.original.server ? (
+        <Link href={route('servers.show', { server: row.original.server_id })} className="hover:underline">
+          {row.original.server.name} ({row.original.server.ip})
+        </Link>
+      ) : (
+        '-'
+      );
+    },
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <Badge variant={row.original.status_color}>{row.original.status}</Badge>;
+    },
+  },
+  {
+    id: 'actions',
+    enableColumnFilter: false,
+    enableSorting: false,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center justify-end">
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 w-8 p-0">
+                <span className="sr-only">Open menu</span>
+                <MoreVerticalIcon />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <View serverLog={row.original.log} />
+              <Download serverLog={row.original.log}>
+                <DropdownMenuItem>Download</DropdownMenuItem>
+              </Download>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/scripts/components/form.tsx

@@ -0,0 +1,99 @@
+import React, { FormEvent, ReactNode, useState } from 'react';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { useForm } from '@inertiajs/react';
+import { Button } from '@/components/ui/button';
+import { LoaderCircle } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import InputError from '@/components/ui/input-error';
+import { Input } from '@/components/ui/input';
+import { registerBashLanguage } from '@/lib/editor';
+import { Editor, useMonaco } from '@monaco-editor/react';
+import { useAppearance } from '@/hooks/use-appearance';
+import { Script } from '@/types/script';
+
+export default function ScriptForm({ script, children }: { script?: Script; children: ReactNode }) {
+  const { getActualAppearance } = useAppearance();
+
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<{
+    name: string;
+    content: string;
+  }>({
+    name: script?.name ?? '',
+    content: script?.script ?? '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    const url = script ? route('scripts.update', { script: script.id }) : route('scripts.store');
+    form.post(url, {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  registerBashLanguage(useMonaco());
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>{children}</SheetTrigger>
+      <SheetContent className="sm:max-w-5xl">
+        <SheetHeader>
+          <SheetTitle>{script ? 'Edit' : 'Create'} script</SheetTitle>
+          <SheetDescription className="sr-only">{script ? 'Edit' : 'Create'} script</SheetDescription>
+        </SheetHeader>
+        <Form id="script-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" name="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
+              <InputError message={form.errors.name} />
+            </FormField>
+
+            <FormField>
+              <Label htmlFor="script">Script</Label>
+              <div className="overflow-hidden rounded-md border">
+                <Editor
+                  defaultLanguage="bash"
+                  defaultValue={form.data.content}
+                  theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
+                  className="h-[500px]"
+                  onChange={(value) => form.setData('content', value ?? '')}
+                  options={{
+                    fontSize: 15,
+                    minimap: {
+                      enabled: false,
+                    },
+                    lineNumbers: 'off',
+                    padding: {
+                      top: 10,
+                      bottom: 10,
+                    },
+                  }}
+                />
+              </div>
+              <p className="text-muted-foreground text-sm">
+                You can use variables like {'${VARIABLE_NAME}'} in the script. The variables will be asked when executing the script
+              </p>
+              <InputError message={form.errors.content} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <SheetFooter>
+          <div className="flex items-center gap-2">
+            <Button form="script-form" type="button" onClick={submit} disabled={form.processing}>
+              {form.processing && <LoaderCircle className="animate-spin" />}
+              {script ? 'Save' : 'Create'}
+            </Button>
+            <SheetClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </SheetClose>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

resources/js/pages/scripts/index.tsx

@@ -0,0 +1,44 @@
+import { Head, usePage } from '@inertiajs/react';
+import { Server } from '@/types/server';
+import Container from '@/components/container';
+import HeaderContainer from '@/components/header-container';
+import Heading from '@/components/heading';
+import { Button } from '@/components/ui/button';
+import { PlusIcon } from 'lucide-react';
+import { DataTable } from '@/components/data-table';
+import { columns } from '@/pages/scripts/components/columns';
+import { PaginatedData } from '@/types';
+import { Script } from '@/types/script';
+import { Site } from '@/types/site';
+import Layout from '@/layouts/app/layout';
+import ScriptForm from '@/pages/scripts/components/form';
+
+export default function Scripts() {
+  const page = usePage<{
+    server: Server;
+    site: Site;
+    scripts: PaginatedData<Script>;
+  }>();
+
+  return (
+    <Layout>
+      <Head title={`Scripts`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Scripts" description="These are the scripts that you can run on your site's location" />
+          <div className="flex items-center gap-2">
+            <ScriptForm>
+              <Button>
+                <PlusIcon />
+                <span className="hidden lg:block">Create</span>
+              </Button>
+            </ScriptForm>
+          </div>
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.scripts} />
+      </Container>
+    </Layout>
+  );
+}

resources/js/pages/scripts/show.tsx

@@ -0,0 +1,35 @@
+import { Head, usePage } from '@inertiajs/react';
+import { Server } from '@/types/server';
+import Container from '@/components/container';
+import HeaderContainer from '@/components/header-container';
+import Heading from '@/components/heading';
+import { DataTable } from '@/components/data-table';
+import { PaginatedData } from '@/types';
+import { columns } from '@/pages/scripts/components/execution-columns';
+import { Site } from '@/types/site';
+import { ScriptExecution } from '@/types/script-execution';
+import Layout from '@/layouts/app/layout';
+
+type Page = {
+  server: Server;
+  site: Site;
+  executions: PaginatedData<ScriptExecution>;
+};
+
+export default function Show() {
+  const page = usePage<Page>();
+
+  return (
+    <Layout>
+      <Head title={`Executions`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title={`Script executions`} description="Here you can see the script executions" />
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.executions} />
+      </Container>
+    </Layout>
+  );
+}

resources/js/types/script-execution.d.ts

@@ -0,0 +1,20 @@
+import { ServerLog } from '@/types/server-log';
+import { Server } from './server';
+
+export interface ScriptExecution {
+  id: number;
+  script_id: number;
+  server_id: number;
+  server?: Server;
+  user_id: number;
+  server_log_id: number;
+  log: ServerLog;
+  user: string;
+  variables: string[];
+  status: string;
+  status_color: 'gray' | 'success' | 'info' | 'warning' | 'danger';
+  created_at: string;
+  updated_at: string;
+
+  [key: string]: unknown;
+}

resources/js/types/script.d.ts

@@ -0,0 +1,16 @@
+import { ScriptExecution } from './script-execution';
+import { User } from './user';
+
+export interface Script {
+  id: number;
+  user_id: number;
+  user?: User;
+  name: string;
+  content: string;
+  variables: string[];
+  last_execution?: ScriptExecution;
+  created_at: string;
+  updated_at: string;
+
+  [key: string]: unknown;
+}

tests/Feature/ApplicationTest.php

@@ -153,6 +153,7 @@ public function test_update_env_file(): void
     /**
      * @param  array<string, mixed>  $webhook
      * @param  array<string, mixed>  $payload
+     *
      * @dataProvider hookData
      */
     public function test_git_hook_deployment(string $provider, array $webhook, string $url, array $payload, bool $skip): void

tests/Feature/ScriptTest.php

@@ -8,12 +8,8 @@
 use App\Models\ScriptExecution;
 use App\Models\Server;
 use App\Models\Site;
-use App\Web\Pages\Scripts\Executions;
-use App\Web\Pages\Scripts\Index;
-use App\Web\Pages\Scripts\Widgets\ScriptExecutionsList;
-use App\Web\Pages\Scripts\Widgets\ScriptsList;
 use Illuminate\Foundation\Testing\RefreshDatabase;
-use Livewire\Livewire;
+use Inertia\Testing\AssertableInertia;
 use Tests\TestCase;
 
 class ScriptTest extends TestCase
@@ -24,25 +20,24 @@ public function test_see_scripts(): void
     {
         $this->actingAs($this->user);
 
-        $script = Script::factory()->create([
+        Script::factory()->create([
             'user_id' => $this->user->id,
         ]);
 
-        $this->get(Index::getUrl())
+        $this->get(route('scripts'))
             ->assertSuccessful()
-            ->assertSee($script->name);
+            ->assertInertia(fn (AssertableInertia $page) => $page->component('scripts/index'));
     }
 
     public function test_create_script(): void
     {
         $this->actingAs($this->user);
 
-        Livewire::test(Index::class)
-            ->callAction('create', [
+        $this->post(route('scripts.store'), [
             'name' => 'Test Script',
             'content' => 'echo "Hello, World!"',
         ])
-            ->assertSuccessful();
+            ->assertSessionDoesntHaveErrors();
 
         $this->assertDatabaseHas('scripts', [
             'name' => 'Test Script',
@@ -58,12 +53,11 @@ public function test_edit_script(): void
             'user_id' => $this->user->id,
         ]);
 
-        Livewire::test(ScriptsList::class)
-            ->callTableAction('edit', $script->id, [
+        $this->put(route('scripts.update', $script), [
             'name' => 'New Name',
             'content' => 'echo "Hello, new World!"',
         ])
-            ->assertSuccessful();
+            ->assertSessionDoesntHaveErrors();
 
         $this->assertDatabaseHas('scripts', [
             'id' => $script->id,
@@ -85,9 +79,7 @@ public function test_delete_script(): void
             'status' => ScriptExecutionStatus::EXECUTING,
         ]);
 
-        Livewire::test(ScriptsList::class)
-            ->callTableAction('delete', $script->id)
-            ->assertSuccessful();
+        $this->delete(route('scripts.destroy', $script->id));
 
         $this->assertDatabaseMissing('scripts', [
             'id' => $script->id,
@@ -108,14 +100,11 @@ public function test_execute_script_and_view_log(): void
             'user_id' => $this->user->id,
         ]);
 
-        Livewire::test(Executions::class, [
-            'script' => $script,
-        ])
-            ->callAction('execute', [
+        $this->post(route('scripts.execute', $script), [
             'server' => $this->server->id,
             'user' => 'root',
         ])
-            ->assertSuccessful();
+            ->assertSessionDoesntHaveErrors();
 
         $this->assertDatabaseHas('script_executions', [
             'script_id' => $script->id,
@@ -127,13 +116,9 @@ public function test_execute_script_and_view_log(): void
             'server_id' => $this->server->id,
         ]);
 
-        $execution = $script->lastExecution;
-
-        Livewire::test(ScriptExecutionsList::class, [
-            'script' => $script,
-        ])
-            ->callTableAction('logs', $execution->id)
-            ->assertSuccessful();
+        $this->get(route('scripts.show', $script))
+            ->assertSuccessful()
+            ->assertInertia(fn (AssertableInertia $page) => $page->component('scripts/show'));
     }
 
     public function test_execute_script_as_isolated_user(): void
@@ -151,14 +136,11 @@ public function test_execute_script_as_isolated_user(): void
             'user' => 'example',
         ]);
 
-        Livewire::test(Executions::class, [
-            'script' => $script,
-        ])
-            ->callAction('execute', [
+        $this->post(route('scripts.execute', $script), [
             'server' => $this->server->id,
             'user' => 'example',
         ])
-            ->assertSuccessful();
+            ->assertSessionDoesntHaveErrors();
 
         $this->assertDatabaseHas('script_executions', [
             'script_id' => $script->id,
@@ -175,14 +157,11 @@ public function test_cannot_execute_script_as_non_existing_user(): void
             'user_id' => $this->user->id,
         ]);
 
-        Livewire::test(Executions::class, [
-            'script' => $script,
-        ])
-            ->callAction('execute', [
+        $this->post(route('scripts.execute', $script), [
             'server' => $this->server->id,
             'user' => 'example',
         ])
-            ->assertHasActionErrors();
+            ->assertSessionHasErrors();
 
         $this->assertDatabaseMissing('script_executions', [
             'script_id' => $script->id,
@@ -203,36 +182,15 @@ public function test_cannot_execute_script_as_user_not_on_server(): void
             'user' => 'example',
         ]);
 
-        Livewire::test(Executions::class, [
-            'script' => $script,
-        ])
-            ->callAction('execute', [
+        $this->post(route('scripts.execute', $script), [
             'server' => $this->server->id,
             'user' => 'example',
         ])
-            ->assertHasActionErrors();
+            ->assertSessionHasErrors();
 
         $this->assertDatabaseMissing('script_executions', [
             'script_id' => $script->id,
             'user' => 'example',
         ]);
     }
-
-    public function test_see_executions(): void
-    {
-        $this->actingAs($this->user);
-
-        $script = Script::factory()->create([
-            'user_id' => $this->user->id,
-        ]);
-
-        $scriptExecution = ScriptExecution::factory()->create([
-            'script_id' => $script->id,
-            'status' => ScriptExecutionStatus::EXECUTING,
-        ]);
-
-        $this->get(Executions::getUrl(['script' => $script]))
-            ->assertSuccessful()
-            ->assertSee($scriptExecution->status);
-    }
 }