@orange-soft/strapi-deployment-trigger 1.0.0

package/README.md

@@ -0,0 +1,116 @@
+# Strapi Plugin: Deployment Trigger
+
+A Strapi v5 plugin that allows you to trigger GitHub Actions workflow deployments directly from the Strapi admin panel.
+
+## 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)
+- Token masking for security
+- Direct link to GitHub Actions to monitor deployment progress
+
+## Requirements
+
+- Strapi v5.x
+- Node.js >= 18.x
+- A GitHub repository with a workflow that supports `workflow_dispatch`
+
+## Installation
+
+```bash
+npm install @orange-soft/strapi-deployment-trigger
+# or
+yarn add @orange-soft/strapi-deployment-trigger
+```
+
+## Configuration
+
+### 1. Enable the plugin
+
+Add the plugin to your `config/plugins.ts` (or `config/plugins.js`):
+
+```typescript
+export default () => ({
+  'deployment-trigger': {
+    enabled: true,
+  },
+});
+```
+
+### 2. Configure via Admin UI (Recommended)
+
+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
+
+### 3. Alternative: Environment Variable for Token
+
+You can set the GitHub token via environment variable instead of the UI:
+
+```bash
+GITHUB_PERSONAL_ACCESS_TOKEN=github_pat_xxxxxxxxxxxx
+```
+
+The plugin will use the database-stored token first, falling back to the environment variable.
+
+## GitHub Token Setup
+
+You need a GitHub **Fine-grained Personal Access Token** with the following permissions:
+
+1. Go to GitHub > Settings > Developer settings > Personal access tokens > Fine-grained tokens
+2. Click "Generate new token"
+3. Set token name and expiration
+4. Select the target repository under "Repository access"
+5. Under "Repository permissions", set **Actions** to "Read and write"
+6. Click "Generate token"
+
+## GitHub Workflow Setup
+
+Your workflow file (e.g., `.github/workflows/deploy.yml`) must include the `workflow_dispatch` trigger:
+
+```yaml
+name: Deploy
+
+on:
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      # ... your deployment steps
+```
+
+## 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
+
+## API
+
+The plugin exposes the following admin API endpoints:
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| GET | `/deployment-trigger/settings` | Get current settings |
+| PUT | `/deployment-trigger/settings` | Update settings |
+| GET | `/deployment-trigger/status` | Get configuration status |
+| POST | `/deployment-trigger/trigger` | Trigger deployment |
+
+## License
+
+MIT
+
+## Author
+
+Justin Moh <moh@os.my>
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/admin/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "jsx": "react",
+    "module": "esnext",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["./src/**/*.js", "./src/**/*.jsx"]
+}

package/admin/src/components/Initializer.jsx

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+
+import { PLUGIN_ID } from '../pluginId';
+
+/**
+ * @type {import('react').FC<{ setPlugin: (id: string) => void }>}
+ */
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef(setPlugin);
+
+  useEffect(() => {
+    ref.current(PLUGIN_ID);
+  }, []);
+
+  return null;
+};
+
+export { Initializer };

package/admin/src/components/PluginIcon.jsx

@@ -0,0 +1,5 @@
+import { CloudUpload } from '@strapi/icons';
+
+const PluginIcon = () => <CloudUpload />;
+
+export { PluginIcon };

package/admin/src/index.js

@@ -0,0 +1,49 @@
+import { getTranslation } from './utils/getTranslation';
+import { PLUGIN_ID } from './pluginId';
+import { Initializer } from './components/Initializer';
+import { PluginIcon } from './components/PluginIcon';
+
+export default {
+  register(app) {
+    app.addMenuLink({
+      to: `plugins/${PLUGIN_ID}`,
+      icon: PluginIcon,
+      intlLabel: {
+        id: `${PLUGIN_ID}.plugin.name`,
+        defaultMessage: PLUGIN_ID,
+      },
+      Component: async () => {
+        const { App } = await import('./pages/App');
+
+        return App;
+      },
+    });
+
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      initializer: Initializer,
+      isReady: false,
+      name: PLUGIN_ID,
+    });
+  },
+
+  async registerTrads({ locales }) {
+    return Promise.all(
+      locales.map(async (locale) => {
+        try {
+          const { default: data } = await import(`./translations/${locale}.json`);
+
+          // Prefix all keys with plugin ID
+          const prefixedData = Object.keys(data).reduce((acc, key) => {
+            acc[`${PLUGIN_ID}.${key}`] = data[key];
+            return acc;
+          }, {});
+
+          return { data: prefixedData, locale };
+        } catch {
+          return { data: {}, locale };
+        }
+      })
+    );
+  },
+};

package/admin/src/pages/App.jsx

@@ -0,0 +1,17 @@
+import { Page } from '@strapi/strapi/admin';
+import { Routes, Route } from 'react-router-dom';
+
+import { HomePage } from './HomePage';
+import { SettingsPage } from './SettingsPage';
+
+const App = () => {
+  return (
+    <Routes>
+      <Route index element={<HomePage />} />
+      <Route path="settings" element={<SettingsPage />} />
+      <Route path="*" element={<Page.Error />} />
+    </Routes>
+  );
+};
+
+export { App };

package/admin/src/pages/HomePage.jsx

@@ -0,0 +1,241 @@
+import {useState, useEffect} from 'react';
+import {useIntl} from 'react-intl';
+import {Layouts, useFetchClient} from '@strapi/strapi/admin';
+import {Link} from 'react-router-dom';
+import {
+  Box,
+  Button,
+  Flex,
+  Typography,
+  Alert,
+  Loader,
+} from '@strapi/design-system';
+import {Rocket, Cog} from '@strapi/icons';
+
+import {PLUGIN_ID} from '../pluginId';
+import {getTranslation} from '../utils/getTranslation';
+
+const HomePage = () => {
+  const {formatMessage} = useIntl();
+  const {get, post} = useFetchClient();
+  const [status, setStatus] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [deploying, setDeploying] = useState(false);
+  const [notification, setNotification] = useState(null);
+
+  useEffect(() => {
+    fetchStatus();
+  }, []);
+
+  const fetchStatus = async () => {
+    try {
+      const {data} = await get(`/${PLUGIN_ID}/status`);
+      setStatus(data.data);
+    } catch (error) {
+      console.error('Failed to fetch status:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDeploy = async () => {
+    setDeploying(true);
+    setNotification(null);
+    try {
+      const {data} = await post(`/${PLUGIN_ID}/trigger`, {});
+      setNotification({
+        type: 'success',
+        message: data.data?.message || 'Deployment triggered successfully!',
+        actionsUrl: data.data?.actionsUrl,
+      });
+    } catch (error) {
+      setNotification({
+        type: 'danger',
+        message: error?.response?.data?.error?.message || error.message || 'Deployment failed',
+      });
+    } finally {
+      setDeploying(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Layouts.Root>
+        <Layouts.Header
+          title={formatMessage({id: getTranslation('plugin.name')})}
+          subtitle="Loading..."
+        />
+        <Layouts.Content>
+          <Flex justifyContent="center" padding={8}>
+            <Loader>Loading...</Loader>
+          </Flex>
+        </Layouts.Content>
+      </Layouts.Root>
+    );
+  }
+
+  const settings = status?.settings || {};
+  const parsed = status?.parsed || {};
+  const isConfigured = status?.configured;
+  const hasToken = status?.hasToken;
+
+  return (
+    <Layouts.Root>
+      <Layouts.Header
+        title={formatMessage({id: getTranslation('plugin.name')})}
+        subtitle="Trigger GitHub Actions deployment to production"
+        secondaryAction={
+          <Link to={`/plugins/${PLUGIN_ID}/settings`}>
+            <Button variant="tertiary" startIcon={<Cog />}>
+              Settings
+            </Button>
+          </Link>
+        }
+      />
+      <Layouts.Content>
+        {notification && (
+          <Box paddingBottom={4}>
+            <Alert
+              closeLabel="Close"
+              title={notification.message}
+              variant={notification.type}
+              onClose={() => setNotification(null)}
+            >
+              {notification.actionsUrl && (
+                <Typography variant="pi">
+                  Check the deployment status at{' '}
+                  <Typography
+                    variant="pi"
+                    tag="a"
+                    href={notification.actionsUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    textColor="primary600"
+                  >
+                    GitHub Actions
+                  </Typography>
+                </Typography>
+              )}
+            </Alert>
+          </Box>
+        )}
+
+        {!hasToken && (
+          <Box paddingBottom={4}>
+            <Alert title="Token Missing" variant="danger">
+              GitHub Personal Access Token is not configured. Please add it in Settings.
+            </Alert>
+          </Box>
+        )}
+
+        {!settings.repoUrl && (
+          <Box paddingBottom={4}>
+            <Alert title="Configuration Required" variant="warning">
+              Please configure your GitHub repository in the Settings page before triggering deployments.
+            </Alert>
+          </Box>
+        )}
+
+        <Flex direction="column" alignItems="stretch" gap={4}>
+          {/* Repository Configuration Card */}
+          <Box
+            background="neutral0"
+            hasRadius
+            shadow="filterShadow"
+            paddingTop={6}
+            paddingBottom={6}
+            paddingLeft={7}
+            paddingRight={7}
+          >
+            <Flex direction="column" alignItems="stretch" gap={4}>
+              <Typography variant="delta" tag="h2">
+                Configuration
+              </Typography>
+
+              <Flex justifyContent="space-between" alignItems="center" gap={6}>
+                {/* Labels and Values */}
+                <Box style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: '12px 16px', alignItems: 'center' }}>
+                  <Typography variant="sigma" textColor="neutral600">Repository</Typography>
+                  {parsed.owner && parsed.repo ? (
+                    <Typography
+                      variant="pi"
+                      tag="a"
+                      href={settings.repoUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      textColor="primary600"
+                      style={{ textDecoration: 'none' }}
+                    >
+                      {parsed.owner}/{parsed.repo}
+                    </Typography>
+                  ) : (
+                    <Typography variant="pi" textColor="neutral500">Not configured</Typography>
+                  )}
+
+                  <Typography variant="sigma" textColor="neutral600">Workflow</Typography>
+                  <Typography variant="pi">
+                    {settings.workflow || 'deploy.yml (default)'}
+                  </Typography>
+
+                  <Typography variant="sigma" textColor="neutral600">Branch</Typography>
+                  <Typography variant="pi">
+                    {settings.branch || 'master (default)'}
+                  </Typography>
+
+                  <Typography variant="sigma" textColor="neutral600">GitHub Token</Typography>
+                  <Typography variant="pi" textColor={hasToken ? 'success600' : 'danger600'}>
+                    {hasToken ? 'Configured' : 'Missing'}
+                  </Typography>
+                </Box>
+
+                {/* Action Button */}
+                {isConfigured && (
+                  <Button
+                    onClick={handleDeploy}
+                    loading={deploying}
+                    disabled={deploying}
+                    startIcon={<Rocket />}
+                    size="L"
+                  >
+                    {deploying ? 'Triggering...' : 'Trigger Deployment'}
+                  </Button>
+                )}
+              </Flex>
+            </Flex>
+          </Box>
+
+          {/* Instructions Card */}
+          {!isConfigured && (
+            <Box
+              background="neutral0"
+              hasRadius
+              shadow="filterShadow"
+              paddingTop={8}
+              paddingBottom={8}
+              paddingLeft={7}
+              paddingRight={7}
+            >
+              <Flex direction="column" alignItems="center" justifyContent="center" gap={3}>
+                <Typography variant="beta" textColor="neutral600" textAlign="center">
+                  Setup Required
+                </Typography>
+                <Typography variant="epsilon" textColor="neutral600" textAlign="center">
+                  Configure your GitHub repository settings to enable deployment triggering.
+                </Typography>
+                <Box paddingTop={2}>
+                  <Link to={`/plugins/${PLUGIN_ID}/settings`}>
+                    <Button variant="default" startIcon={<Cog />}>
+                      Go to Settings
+                    </Button>
+                  </Link>
+                </Box>
+              </Flex>
+            </Box>
+          )}
+        </Flex>
+      </Layouts.Content>
+    </Layouts.Root>
+  );
+};
+
+export {HomePage};