Plugins (#616)

* wip * fix plugin uninstall * marketplace
2025-07-03 06:56:15 +00:00 · 2025-06-19 14:07:15 +02:00
parent 131b828807
commit 342a3aa4c6
35 changed files with 1973 additions and 934 deletions
--- a/resources/js/pages/plugins/components/community.tsx
+++ b/resources/js/pages/plugins/components/community.tsx
@ -0,0 +1,84 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { Repo } from '@/types/repo';
+import { LoaderCircleIcon, StarIcon } from 'lucide-react';
+import { CardRow } from '@/components/ui/card';
+import React, { Fragment } from 'react';
+import Install from '@/pages/plugins/components/install';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+
+export default function CommunityPlugins() {
+  const query = useInfiniteQuery<{
+    total_count: number;
+    incomplete_results: boolean;
+    items: Repo[];
+    next_page?: number;
+  }>({
+    queryKey: ['official-plugins'],
+    queryFn: async ({ pageParam }) => {
+      const data = (await axios.get('https://api.github.com/search/repositories?q=topic:vitodeploy-plugin&per_page=10&page=' + pageParam)).data;
+      data.items = data.items.filter((repo: Repo) => repo.owner.login !== 'vitodeploy');
+      if (data.items.length == 10) {
+        data.next_page = (pageParam as number) + 1;
+      }
+      return data;
+    },
+    retry: false,
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) => lastPage.next_page,
+  });
+
+  return (
+    <div>
+      {query.isLoading ? (
+        <CardRow className="items-center justify-center">
+          <LoaderCircleIcon className="animate-spin" />
+        </CardRow>
+      ) : query.data && query.data.pages.length > 0 && query.data.pages[0].items.length > 0 ? (
+        <>
+          {query.data.pages.map((page) =>
+            page.items.map((repo) => (
+              <Fragment key={repo.id}>
+                <CardRow>
+                  <div className="flex flex-col gap-1">
+                    <div className="flex items-center gap-2">
+                      <a href={repo.html_url} target="_blank" className="hover:text-primary">
+                        {repo.name}
+                      </a>
+                      <Badge variant="outline">by {repo.owner.login}</Badge>
+                    </div>
+                    <span className="text-muted-foreground text-xs">{repo.description}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button variant="outline" onClick={() => window.open(repo.html_url, '_blank')}>
+                      <StarIcon />
+                      {repo.stargazers_count}
+                    </Button>
+                    <Install repo={repo} />
+                  </div>
+                </CardRow>
+                {!(page.items[page.items.length - 1].id === repo.id && page === query.data.pages[query.data.pages.length - 1]) && (
+                  <Separator className="my-2" />
+                )}
+              </Fragment>
+            )),
+          )}
+          {query.hasNextPage && (
+            <div className="flex items-center justify-center p-5">
+              <Button variant="outline" onClick={() => query.fetchNextPage()}>
+                {query.isFetchingNextPage && <LoaderCircleIcon className="animate-spin" />}
+                Load more
+              </Button>
+            </div>
+          )}
+        </>
+      ) : (
+        <CardRow className="items-center justify-center">
+          <span className="text-muted-foreground">No plugins found</span>
+        </CardRow>
+      )}
+    </div>
+  );
+}
--- a/resources/js/pages/plugins/components/install.tsx
+++ b/resources/js/pages/plugins/components/install.tsx
@ -0,0 +1,106 @@
+import { Repo } from '@/types/repo';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useForm, usePage } from '@inertiajs/react';
+import { useState } from 'react';
+import { DownloadIcon, LoaderCircleIcon } from 'lucide-react';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import InputError from '@/components/ui/input-error';
+import { Plugin } from '@/types/plugin';
+
+export default function Install({ repo }: { repo?: Repo }) {
+  const [open, setOpen] = useState(false);
+  const page = usePage<{
+    plugins: Plugin[];
+  }>();
+
+  const form = useForm({
+    url: repo?.html_url || '',
+  });
+
+  const submit = () => {
+    form.post(route('plugins.install'), {
+      onSuccess: () => {
+        form.reset();
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button disabled={repo && page.props.plugins.filter((plugin) => plugin.name === repo.full_name).length > 0}>
+          <DownloadIcon />
+          {repo && page.props.plugins.filter((plugin) => plugin.name === repo.full_name).length > 0 ? 'Installed' : 'Install'}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Install plugin</DialogTitle>
+          <DialogDescription className="sr-only">Install plugin {repo?.full_name}</DialogDescription>
+        </DialogHeader>
+        <Form className="p-4" id="install-plugin-form" onSubmit={submit}>
+          {repo ? (
+            <p>
+              Are you sure you want to install the plugin{' '}
+              <strong className="text-primary hover:underline">
+                <a href={repo.html_url} target="_blank">
+                  {repo.full_name}
+                </a>
+              </strong>
+              ? This will clone the repository and set it up as a Vito plugin.
+            </p>
+          ) : (
+            <FormFields>
+              <FormField>
+                <Alert>
+                  <AlertDescription>
+                    <p>You can use this form to install a plugin or use the following command on your Vito instance</p>
+                    <pre className="bg-muted rounded-md px-2 py-1">
+                      <code>php artisan plugins:install &lt;repository-url&gt;</code>
+                    </pre>
+                  </AlertDescription>
+                </Alert>
+              </FormField>
+              <FormField>
+                <Label htmlFor="url">Repository URL</Label>
+                <Input
+                  id="url"
+                  type="text"
+                  name="url"
+                  autoComplete="url"
+                  value={form.data.url}
+                  onChange={(e) => form.setData('url', e.target.value)}
+                />
+                <InputError message={form.errors.url} />
+              </FormField>
+            </FormFields>
+          )}
+        </Form>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button onClick={submit} disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Install
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/resources/js/pages/plugins/components/installed.tsx
+++ b/resources/js/pages/plugins/components/installed.tsx
@ -0,0 +1,28 @@
+import { CardRow } from '@/components/ui/card';
+import React from 'react';
+import { Plugin } from '@/types/plugin';
+import Uninstall from '@/pages/plugins/components/uninstall';
+
+export default function InstalledPlugins({ plugins }: { plugins: Plugin[] }) {
+  return (
+    <div>
+      {plugins.length > 0 ? (
+        plugins.map((plugin, index) => (
+          <CardRow key={`plugin-${index}`}>
+            <div className="flex flex-col gap-1">
+              <div className="flex items-center gap-2">{plugin.name}</div>
+              <span className="text-muted-foreground text-xs">{plugin.version}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Uninstall plugin={plugin} />
+            </div>
+          </CardRow>
+        ))
+      ) : (
+        <CardRow className="items-center justify-center">
+          <span className="text-muted-foreground">No plugins installed</span>
+        </CardRow>
+      )}
+    </div>
+  );
+}
--- a/resources/js/pages/plugins/components/official.tsx
+++ b/resources/js/pages/plugins/components/official.tsx
@ -0,0 +1,84 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { Repo } from '@/types/repo';
+import { BadgeCheckIcon, LoaderCircleIcon, StarIcon } from 'lucide-react';
+import { CardRow } from '@/components/ui/card';
+import React, { Fragment } from 'react';
+import Install from '@/pages/plugins/components/install';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+
+export default function OfficialPlugins() {
+  const query = useInfiniteQuery<{
+    total_count: number;
+    incomplete_results: boolean;
+    items: Repo[];
+    next_page?: number;
+  }>({
+    queryKey: ['official-plugins'],
+    queryFn: async ({ pageParam }) => {
+      const data = (
+        await axios.get('https://api.github.com/search/repositories?q=owner:vitodeploy%20topic:vitodeploy-plugin&per_page=10&page=' + pageParam)
+      ).data;
+      if (data.items.length == 10) {
+        data.next_page = (pageParam as number) + 1;
+      }
+      return data;
+    },
+    retry: false,
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) => lastPage.next_page,
+  });
+
+  return (
+    <div>
+      {query.isLoading ? (
+        <CardRow className="items-center justify-center">
+          <LoaderCircleIcon className="animate-spin" />
+        </CardRow>
+      ) : query.data && query.data.pages.length > 0 && query.data.pages[0].items.length > 0 ? (
+        <>
+          {query.data.pages.map((page) =>
+            page.items.map((repo) => (
+              <Fragment key={repo.id}>
+                <CardRow key={repo.id}>
+                  <div className="flex flex-col gap-1">
+                    <div className="flex items-center gap-2">
+                      <a href={repo.html_url} target="_blank" className="hover:text-primary">
+                        {repo.name}
+                      </a>
+                      <BadgeCheckIcon className="text-primary size-4" />
+                    </div>
+                    <span className="text-muted-foreground text-xs">{repo.description}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button variant="outline" onClick={() => window.open(repo.html_url, '_blank')}>
+                      <StarIcon />
+                      {repo.stargazers_count}
+                    </Button>
+                    <Install repo={repo} />
+                  </div>
+                </CardRow>
+                {!(page.items[page.items.length - 1].id === repo.id && page === query.data.pages[query.data.pages.length - 1]) && (
+                  <Separator className="my-2" />
+                )}
+              </Fragment>
+            )),
+          )}
+          {query.hasNextPage && (
+            <div className="flex items-center justify-center p-5">
+              <Button variant="outline" onClick={() => query.fetchNextPage()}>
+                {query.isFetchingNextPage && <LoaderCircleIcon className="animate-spin" />}
+                Load more
+              </Button>
+            </div>
+          )}
+        </>
+      ) : (
+        <CardRow className="items-center justify-center">
+          <span className="text-muted-foreground">No plugins found</span>
+        </CardRow>
+      )}
+    </div>
+  );
+}
--- a/resources/js/pages/plugins/components/uninstall.tsx
+++ b/resources/js/pages/plugins/components/uninstall.tsx
@ -0,0 +1,58 @@
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { useState } from 'react';
+import { LoaderCircleIcon } from 'lucide-react';
+import { Plugin } from '@/types/plugin';
+
+export default function Uninstall({ plugin }: { plugin: Plugin }) {
+  const [open, setOpen] = useState(false);
+
+  const form = useForm({
+    name: plugin.name,
+  });
+
+  const submit = () => {
+    form.delete(route('plugins.uninstall'), {
+      onSuccess: () => {
+        form.reset();
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline">Uninstall</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Uninstall plugin</DialogTitle>
+          <DialogDescription className="sr-only">Uninstall plugin {plugin.name}</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">
+          Are you sure you want to uninstall the plugin <strong>{plugin.name}</strong>?
+        </p>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button variant="destructive" onClick={submit} disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Uninstall
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/resources/js/pages/plugins/index.tsx
+++ b/resources/js/pages/plugins/index.tsx
@ -0,0 +1,83 @@
+import SettingsLayout from '@/layouts/settings/layout';
+import { Head, usePage } from '@inertiajs/react';
+import Heading from '@/components/heading';
+import React, { useState } from 'react';
+import Container from '@/components/container';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import OfficialPlugins from '@/pages/plugins/components/official';
+import InstalledPlugins from '@/pages/plugins/components/installed';
+import { Plugin } from '@/types/plugin';
+import CommunityPlugins from '@/pages/plugins/components/community';
+import { Button } from '@/components/ui/button';
+import { BookOpenIcon } from 'lucide-react';
+import Install from '@/pages/plugins/components/install';
+
+export default function Plugins() {
+  const [tab, setTab] = useState('installed');
+  const page = usePage<{
+    plugins: Plugin[];
+  }>();
+
+  return (
+    <SettingsLayout>
+      <Head title="Plugins" />
+
+      <Container className="max-w-5xl">
+        <div className="flex items-start justify-between">
+          <Heading title="Plugins" description="Here you can install/uninstall plugins" />
+          <div className="flex items-center gap-2">
+            <a href="https://vitodeploy.com/docs/plugins" target="_blank">
+              <Button variant="outline">
+                <BookOpenIcon />
+                <span className="hidden lg:block">Docs</span>
+              </Button>
+            </a>
+            <Install />
+          </div>
+        </div>
+
+        <Tabs defaultValue={tab} onValueChange={setTab}>
+          <TabsList>
+            <TabsTrigger value="installed">Installed</TabsTrigger>
+            <TabsTrigger value="official">Official</TabsTrigger>
+            <TabsTrigger value="community">Community</TabsTrigger>
+          </TabsList>
+          <TabsContent value="installed">
+            <Card>
+              <CardHeader>
+                <CardTitle>Installed plugins</CardTitle>
+                <CardDescription>All the installed plugins</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <InstalledPlugins plugins={page.props.plugins} />
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="official">
+            <Card>
+              <CardHeader>
+                <CardTitle>Official plugins</CardTitle>
+                <CardDescription>These plugins are developed and maintained by VitoDeploy's team</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <OfficialPlugins />
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="community">
+            <Card>
+              <CardHeader>
+                <CardTitle>Community plugins</CardTitle>
+                <CardDescription>These plugins are developed and maintained by the community.</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <CommunityPlugins />
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </Container>
+    </SettingsLayout>
+  );
+}