@orange-soft/strapi-deployment-trigger 1.1.0 → 1.2.0

package/README.md

@@ -1,12 +1,14 @@
 # Strapi Plugin: Deployment Trigger
 
-A Strapi v5 plugin that allows you to trigger GitHub Actions workflow deployments directly from the Strapi admin panel.
+A Strapi v5 plugin that allows you to trigger deployments directly from the Strapi admin panel. Supports both **GitHub Actions** and **Vercel** deployments.
 
 ## Features
 
-- Trigger GitHub Actions `workflow_dispatch` events from the admin UI
-- Configure repository URL, workflow file, and branch
-- Secure token storage in database (or via environment variable)
+- Trigger **GitHub Actions** `workflow_dispatch` events from the admin UI
+- Trigger **Vercel** deployments via deploy hooks
+- Configure multiple deployment targets (e.g., Production, Staging)
+- Support for different trigger types per target
+- Secure token storage in database
 - Token masking for security
 - Direct link to GitHub Actions to monitor deployment progress
 
@@ -41,12 +43,14 @@ export default () => ({
 ### 2. Configure via Admin UI
 
 1. Go to **Plugins > Deployment Trigger > Settings** in your Strapi admin
-2. Enter your GitHub repository URL (e.g., `https://github.com/owner/repo`)
-3. Enter the workflow filename (e.g., `deploy.yml`)
-4. Enter the branch name to trigger (e.g., `main` or `master`)
-5. Enter your GitHub Personal Access Token
+2. **For GitHub targets:**
+   - Enter your GitHub repository URL (e.g., `https://github.com/owner/repo`)
+   - Enter your GitHub Personal Access Token
+   - Add a target with type "GitHub", workflow filename, and branch
+3. **For Vercel targets:**
+   - Add a target with type "Vercel" and paste your deploy hook URL
 
-All settings including the token are stored securely in the Strapi database.
+All settings including tokens are stored securely in the Strapi database.
 
 ## GitHub Token Setup
 
@@ -77,12 +81,29 @@ jobs:
       # ... your deployment steps
 ```
 
+## Vercel Deploy Hook Setup
+
+To trigger Vercel deployments, you need to create a Deploy Hook:
+
+1. Go to your Vercel project dashboard
+2. Navigate to **Settings** > **Git**
+3. Scroll down to **Deploy Hooks**
+4. Click **Create Hook**
+5. Enter a name (e.g., "Strapi Trigger") and select the branch
+6. Click **Create Hook**
+7. Copy the generated webhook URL (starts with `https://api.vercel.com/v1/integrations/deploy/...`)
+8. Paste this URL when adding a Vercel target in the plugin settings
+
 ## Usage
 
-1. Navigate to **Plugins > Deployment Trigger** in your Strapi admin
-2. Verify your configuration is correct
-3. Click **Trigger Deployment**
-4. Monitor the deployment progress via the provided GitHub Actions link
+1. Navigate to **Plugins > Deployment Trigger > Settings** in your Strapi admin
+2. For GitHub targets: Configure repository URL and GitHub token
+3. Add deployment targets:
+   - **GitHub**: Select type "GitHub", enter name, workflow file, and branch
+   - **Vercel**: Select type "Vercel", enter name and webhook URL
+4. Go to the main **Deployment Trigger** page
+5. Click **Trigger** on any configured target
+6. For GitHub targets, click the provided link to monitor progress in GitHub Actions
 
 ## API
 

package/admin/src/pages/HomePage.jsx

@@ -1,7 +1,7 @@
 import {useState, useEffect} from 'react';
 import {useIntl} from 'react-intl';
 import {Layouts, useFetchClient} from '@strapi/strapi/admin';
-import {Link} from 'react-router-dom';
+import {Link, useLocation} from 'react-router-dom';
 import {
   Box,
   Button,
@@ -24,6 +24,7 @@ import {getTranslation} from '../utils/getTranslation';
 const HomePage = () => {
   const {formatMessage} = useIntl();
   const {get, post} = useFetchClient();
+  const location = useLocation();
   const [status, setStatus] = useState(null);
   const [loading, setLoading] = useState(true);
   const [deployingTargetId, setDeployingTargetId] = useState(null);
@@ -31,6 +32,12 @@ const HomePage = () => {
 
   useEffect(() => {
     fetchStatus();
+    // Check for notification from navigation state (e.g., after saving settings)
+    if (location.state?.notification) {
+      setNotification(location.state.notification);
+      // Clear the state so notification doesn't reappear on refresh
+      window.history.replaceState({}, document.title);
+    }
   }, []);
 
   const fetchStatus = async () => {
@@ -86,6 +93,20 @@ const HomePage = () => {
   const hasToken = status?.hasToken;
   const targets = settings.targets || [];
 
+  // Check if there are any GitHub targets that need configuration
+  const hasGitHubTargets = targets.some(t => (t.type || 'github') === 'github');
+  const hasVercelTargets = targets.some(t => t.type === 'vercel');
+
+  // Determine if trigger buttons should be enabled
+  // GitHub targets need repoUrl + token, Vercel targets are self-contained
+  const canTrigger = (target) => {
+    const targetType = target.type || 'github';
+    if (targetType === 'github') {
+      return hasToken && parsed.owner && parsed.repo;
+    }
+    return !!target.webhookUrl;
+  };
+
   return (
     <Layouts.Root>
       <Layouts.Header
@@ -127,7 +148,7 @@ const HomePage = () => {
           </Box>
         )}
 
-        {!hasToken && (
+        {hasGitHubTargets && !hasToken && (
           <Box paddingBottom={4}>
             <Alert title="Token Missing" variant="danger">
               GitHub Personal Access Token is not configured. Please add it in Settings.
@@ -135,7 +156,7 @@ const HomePage = () => {
           </Box>
         )}
 
-        {!settings.repoUrl && (
+        {hasGitHubTargets && !settings.repoUrl && (
           <Box paddingBottom={4}>
             <Alert title="Configuration Required" variant="warning">
               Please configure your GitHub repository in the Settings page before triggering deployments.
@@ -204,37 +225,50 @@ const HomePage = () => {
                 <Table>
                   <Thead>
                     <Tr>
+                      <Th><Typography variant="sigma">Type</Typography></Th>
                       <Th><Typography variant="sigma">Name</Typography></Th>
-                      <Th><Typography variant="sigma">Workflow</Typography></Th>
-                      <Th><Typography variant="sigma">Branch</Typography></Th>
+                      <Th><Typography variant="sigma">Details</Typography></Th>
                       <Th><Typography variant="sigma">Action</Typography></Th>
                     </Tr>
                   </Thead>
                   <Tbody>
-                    {targets.map((target) => (
-                      <Tr key={target.id}>
-                        <Td>
-                          <Typography variant="omega" fontWeight="bold">{target.name}</Typography>
-                        </Td>
-                        <Td>
-                          <Typography variant="omega">{target.workflow}</Typography>
-                        </Td>
-                        <Td>
-                          <Typography variant="omega">{target.branch}</Typography>
-                        </Td>
-                        <Td>
-                          <Button
-                            onClick={() => handleDeploy(target.id, target.name)}
-                            loading={deployingTargetId === target.id}
-                            disabled={!isConfigured || deployingTargetId !== null}
-                            startIcon={<Rocket />}
-                            size="S"
-                          >
-                            {deployingTargetId === target.id ? 'Triggering...' : 'Trigger'}
-                          </Button>
-                        </Td>
-                      </Tr>
-                    ))}
+                    {targets.map((target) => {
+                      const targetType = target.type || 'github';
+                      return (
+                        <Tr key={target.id}>
+                          <Td>
+                            <Typography variant="omega" fontWeight="bold" textColor={targetType === 'github' ? 'neutral800' : 'secondary600'}>
+                              {targetType === 'github' ? 'GitHub' : 'Vercel'}
+                            </Typography>
+                          </Td>
+                          <Td>
+                            <Typography variant="omega" fontWeight="bold">{target.name}</Typography>
+                          </Td>
+                          <Td>
+                            {targetType === 'github' ? (
+                              <Typography variant="omega" textColor="neutral600">
+                                {target.workflow} / {target.branch}
+                              </Typography>
+                            ) : (
+                              <Typography variant="omega" textColor="neutral600">
+                                Webhook
+                              </Typography>
+                            )}
+                          </Td>
+                          <Td>
+                            <Button
+                              onClick={() => handleDeploy(target.id, target.name)}
+                              loading={deployingTargetId === target.id}
+                              disabled={!canTrigger(target) || deployingTargetId !== null}
+                              startIcon={<Rocket />}
+                              size="S"
+                            >
+                              {deployingTargetId === target.id ? 'Triggering...' : 'Trigger'}
+                            </Button>
+                          </Td>
+                        </Tr>
+                      );
+                    })}
                   </Tbody>
                 </Table>
               ) : (
@@ -252,8 +286,8 @@ const HomePage = () => {
             </Flex>
           </Box>
 
-          {/* Instructions Card - Show only when not configured */}
-          {!isConfigured && targets.length > 0 && (
+          {/* Instructions Card - Show only when GitHub targets need configuration */}
+          {hasGitHubTargets && (!hasToken || !parsed.owner || !parsed.repo) && (
             <Box
               background="neutral0"
               hasRadius
@@ -265,10 +299,10 @@ const HomePage = () => {
             >
               <Flex direction="column" alignItems="center" justifyContent="center" gap={3}>
                 <Typography variant="beta" textColor="neutral600" textAlign="center">
-                  Setup Incomplete
+                  GitHub Setup Incomplete
                 </Typography>
                 <Typography variant="epsilon" textColor="neutral600" textAlign="center">
-                  Please ensure repository URL and GitHub token are configured in Settings.
+                  Please ensure repository URL and GitHub token are configured in Settings for GitHub targets.
                 </Typography>
                 <Box paddingTop={2}>
                   <Link to={`/plugins/${PLUGIN_ID}/settings`}>

package/admin/src/pages/SettingsPage.jsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useFetchClient, Layouts, BackButton } from '@strapi/strapi/admin';
 import {
   Box,
@@ -14,9 +15,10 @@ import {
   Tr,
   Th,
   Td,
-  IconButton,
   Dialog,
   Grid,
+  SingleSelect,
+  SingleSelectOption,
 } from '@strapi/design-system';
 import { Check, Plus, Pencil, Trash } from '@strapi/icons';
 
@@ -26,6 +28,7 @@ import { PLUGIN_ID } from '../pluginId';
 const TOKEN_PATTERN = /^github_pat_[a-zA-Z0-9_]+$/;
 const REPO_URL_PATTERN = /^https:\/\/github\.com\/[a-zA-Z0-9_.-]+\/[a-zA-Z0-9_.-]+\/?$/;
 const WORKFLOW_PATTERN = /^[a-zA-Z0-9_.-]+\.ya?ml$/;
+const VERCEL_WEBHOOK_PATTERN = /^https:\/\/api\.vercel\.com\/v1\/integrations\/deploy\/.+$/;
 
 const validateToken = (value) => {
   if (!value) return null;
@@ -51,7 +54,16 @@ const validateWorkflow = (value) => {
   return null;
 };
 
+const validateVercelWebhook = (value) => {
+  if (!value) return 'Webhook URL is required';
+  if (!VERCEL_WEBHOOK_PATTERN.test(value)) {
+    return 'Must be a valid Vercel deploy hook URL (https://api.vercel.com/v1/integrations/deploy/...)';
+  }
+  return null;
+};
+
 const SettingsPage = () => {
+  const navigate = useNavigate();
   const { get, put, post, del } = useFetchClient();
   const [settings, setSettings] = useState({
     githubToken: '',
@@ -67,7 +79,7 @@ const SettingsPage = () => {
 
   // Target form state
   const [editingTarget, setEditingTarget] = useState(null);
-  const [targetForm, setTargetForm] = useState({ name: '', workflow: '', branch: '' });
+  const [targetForm, setTargetForm] = useState({ type: 'github', name: '', workflow: '', branch: '', webhookUrl: '' });
   const [targetErrors, setTargetErrors] = useState({});
   const [showAddForm, setShowAddForm] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -122,17 +134,15 @@ const SettingsPage = () => {
 
       const { data } = await put(`/${PLUGIN_ID}/settings`, { data: dataToSave });
 
-      if (settings.githubToken) {
-        setHasExistingToken(true);
-        setMaskedToken(data.data?.maskedToken);
-      }
-      setSettings(prev => ({ ...prev, githubToken: '' }));
-      setNotification({ type: 'success', message: 'Settings saved successfully' });
+      // Redirect to main page on success with notification
+      navigate(`/plugins/${PLUGIN_ID}`, {
+        state: { notification: { type: 'success', message: 'Settings saved successfully' } }
+      });
     } catch (error) {
       console.error('Error saving settings:', error);
       setNotification({ type: 'danger', message: 'Failed to save settings' });
+      setSaving(false);
     }
-    setSaving(false);
   };
 
   const handleChange = (field) => (e) => {
@@ -145,7 +155,7 @@ const SettingsPage = () => {
 
   // Target management
   const resetTargetForm = () => {
-    setTargetForm({ name: '', workflow: 'deploy.yml', branch: 'master' });
+    setTargetForm({ type: 'github', name: '', workflow: 'deploy.yml', branch: 'master', webhookUrl: '' });
     setTargetErrors({});
     setEditingTarget(null);
     setShowAddForm(false);
@@ -154,9 +164,16 @@ const SettingsPage = () => {
   const validateTargetForm = () => {
     const newErrors = {};
     if (!targetForm.name.trim()) newErrors.name = 'Name is required';
-    const workflowError = validateWorkflow(targetForm.workflow);
-    if (workflowError) newErrors.workflow = workflowError;
-    if (!targetForm.branch.trim()) newErrors.branch = 'Branch is required';
+
+    if (targetForm.type === 'github') {
+      const workflowError = validateWorkflow(targetForm.workflow);
+      if (workflowError) newErrors.workflow = workflowError;
+      if (!targetForm.branch.trim()) newErrors.branch = 'Branch is required';
+    } else if (targetForm.type === 'vercel') {
+      const webhookError = validateVercelWebhook(targetForm.webhookUrl);
+      if (webhookError) newErrors.webhookUrl = webhookError;
+    }
+
     setTargetErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
@@ -180,7 +197,13 @@ const SettingsPage = () => {
 
   const handleEditTarget = (target) => {
     setEditingTarget(target.id);
-    setTargetForm({ name: target.name, workflow: target.workflow, branch: target.branch });
+    setTargetForm({
+      type: target.type || 'github',
+      name: target.name,
+      workflow: target.workflow || 'deploy.yml',
+      branch: target.branch || 'master',
+      webhookUrl: target.webhookUrl || '',
+    });
     setShowAddForm(false);
   };
 
@@ -330,7 +353,7 @@ const SettingsPage = () => {
                     startIcon={<Plus />}
                     onClick={() => {
                       setShowAddForm(true);
-                      setTargetForm({ name: '', workflow: 'deploy.yml', branch: 'master' });
+                      setTargetForm({ type: 'github', name: '', workflow: 'deploy.yml', branch: 'master', webhookUrl: '' });
                     }}
                     size="S"
                   >
@@ -351,7 +374,19 @@ const SettingsPage = () => {
                       {editingTarget ? 'Edit Target' : 'Add New Target'}
                     </Typography>
                     <Grid.Root gap={4}>
-                      <Grid.Item col={4} s={12}>
+                      <Grid.Item col={3} s={12}>
+                        <Field.Root name="targetType" required>
+                          <Field.Label>Type</Field.Label>
+                          <SingleSelect
+                            value={targetForm.type}
+                            onChange={(value) => setTargetForm(prev => ({ ...prev, type: value }))}
+                          >
+                            <SingleSelectOption value="github">GitHub</SingleSelectOption>
+                            <SingleSelectOption value="vercel">Vercel</SingleSelectOption>
+                          </SingleSelect>
+                        </Field.Root>
+                      </Grid.Item>
+                      <Grid.Item col={3} s={12}>
                         <Field.Root name="targetName" required error={targetErrors.name}>
                           <Field.Label>Name</Field.Label>
                           <Field.Input
@@ -362,28 +397,49 @@ const SettingsPage = () => {
                           <Field.Error />
                         </Field.Root>
                       </Grid.Item>
-                      <Grid.Item col={4} s={12}>
-                        <Field.Root name="targetWorkflow" required error={targetErrors.workflow}>
-                          <Field.Label>Workflow File</Field.Label>
-                          <Field.Input
-                            placeholder="deploy.yml"
-                            value={targetForm.workflow}
-                            onChange={handleTargetFormChange('workflow')}
-                          />
-                          <Field.Error />
-                        </Field.Root>
-                      </Grid.Item>
-                      <Grid.Item col={4} s={12}>
-                        <Field.Root name="targetBranch" required error={targetErrors.branch}>
-                          <Field.Label>Branch</Field.Label>
-                          <Field.Input
-                            placeholder="main"
-                            value={targetForm.branch}
-                            onChange={handleTargetFormChange('branch')}
-                          />
-                          <Field.Error />
-                        </Field.Root>
-                      </Grid.Item>
+
+                      {/* GitHub-specific fields */}
+                      {targetForm.type === 'github' && (
+                        <>
+                          <Grid.Item col={3} s={12}>
+                            <Field.Root name="targetWorkflow" required error={targetErrors.workflow}>
+                              <Field.Label>Workflow File</Field.Label>
+                              <Field.Input
+                                placeholder="deploy.yml"
+                                value={targetForm.workflow}
+                                onChange={handleTargetFormChange('workflow')}
+                              />
+                              <Field.Error />
+                            </Field.Root>
+                          </Grid.Item>
+                          <Grid.Item col={3} s={12}>
+                            <Field.Root name="targetBranch" required error={targetErrors.branch}>
+                              <Field.Label>Branch</Field.Label>
+                              <Field.Input
+                                placeholder="main"
+                                value={targetForm.branch}
+                                onChange={handleTargetFormChange('branch')}
+                              />
+                              <Field.Error />
+                            </Field.Root>
+                          </Grid.Item>
+                        </>
+                      )}
+
+                      {/* Vercel-specific fields */}
+                      {targetForm.type === 'vercel' && (
+                        <Grid.Item col={6} s={12}>
+                          <Field.Root name="targetWebhookUrl" required error={targetErrors.webhookUrl}>
+                            <Field.Label>Webhook URL</Field.Label>
+                            <Field.Input
+                              placeholder="https://api.vercel.com/v1/integrations/deploy/..."
+                              value={targetForm.webhookUrl}
+                              onChange={handleTargetFormChange('webhookUrl')}
+                            />
+                            <Field.Error />
+                          </Field.Root>
+                        </Grid.Item>
+                      )}
                     </Grid.Root>
                     <Flex gap={2} justifyContent="flex-end">
                       <Button variant="tertiary" onClick={resetTargetForm}>
@@ -405,41 +461,60 @@ const SettingsPage = () => {
                 <Table>
                   <Thead>
                     <Tr>
+                      <Th><Typography variant="sigma">Type</Typography></Th>
                       <Th><Typography variant="sigma">Name</Typography></Th>
-                      <Th><Typography variant="sigma">Workflow</Typography></Th>
-                      <Th><Typography variant="sigma">Branch</Typography></Th>
+                      <Th><Typography variant="sigma">Details</Typography></Th>
                       <Th><Typography variant="sigma">Actions</Typography></Th>
                     </Tr>
                   </Thead>
                   <Tbody>
-                    {settings.targets.map((target) => (
-                      <Tr key={target.id}>
-                        <Td><Typography variant="omega">{target.name}</Typography></Td>
-                        <Td><Typography variant="omega">{target.workflow}</Typography></Td>
-                        <Td><Typography variant="omega">{target.branch}</Typography></Td>
-                        <Td>
-                          <Flex gap={1}>
-                            <IconButton
-                              onClick={() => handleEditTarget(target)}
-                              label="Edit"
-                              variant="ghost"
-                            >
-                              <Pencil />
-                            </IconButton>
-                            <IconButton
-                              onClick={() => {
-                                setTargetToDelete(target.id);
-                                setDeleteDialogOpen(true);
-                              }}
-                              label="Delete"
-                              variant="ghost"
-                            >
-                              <Trash />
-                            </IconButton>
-                          </Flex>
-                        </Td>
-                      </Tr>
-                    ))}
+                    {settings.targets.map((target) => {
+                      const targetType = target.type || 'github';
+                      return (
+                        <Tr key={target.id}>
+                          <Td>
+                            <Typography variant="omega" fontWeight="bold" textColor={targetType === 'github' ? 'neutral800' : 'secondary600'}>
+                              {targetType === 'github' ? 'GitHub' : 'Vercel'}
+                            </Typography>
+                          </Td>
+                          <Td><Typography variant="omega">{target.name}</Typography></Td>
+                          <Td>
+                            {targetType === 'github' ? (
+                              <Typography variant="omega" textColor="neutral600">
+                                {target.workflow} / {target.branch}
+                              </Typography>
+                            ) : (
+                              <Typography variant="omega" textColor="neutral600">
+                                Webhook configured
+                              </Typography>
+                            )}
+                          </Td>
+                          <Td>
+                            <Flex gap={2}>
+                              <Button
+                                onClick={() => handleEditTarget(target)}
+                                variant="tertiary"
+                                size="S"
+                                startIcon={<Pencil />}
+                              >
+                                Edit
+                              </Button>
+                              <Button
+                                onClick={() => {
+                                  setTargetToDelete(target.id);
+                                  setDeleteDialogOpen(true);
+                                }}
+                                variant="danger-light"
+                                size="S"
+                                startIcon={<Trash />}
+                              >
+                                Delete
+                              </Button>
+                            </Flex>
+                          </Td>
+                        </Tr>
+                      );
+                    })}
                   </Tbody>
                 </Table>
               ) : (