@orange-soft/strapi-deployment-trigger 1.0.0

package/admin/src/pages/SettingsPage.jsx

@@ -0,0 +1,370 @@
+import { useState, useEffect } from 'react';
+import { useFetchClient, Layouts, BackButton } from '@strapi/strapi/admin';
+import {
+  Box,
+  Button,
+  Flex,
+  Typography,
+  Alert,
+  Loader,
+  Field,
+  Grid,
+} from '@strapi/design-system';
+import { Check } from '@strapi/icons';
+
+import { PLUGIN_ID } from '../pluginId';
+
+// Validation patterns
+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 validateToken = (value) => {
+  if (!value) return null; // Optional if already configured
+  if (!TOKEN_PATTERN.test(value)) {
+    return 'Token must start with "github_pat_" followed by alphanumeric characters';
+  }
+  return null;
+};
+
+const validateRepoUrl = (value) => {
+  if (!value) return 'Repository URL is required';
+  if (!REPO_URL_PATTERN.test(value)) {
+    return 'Must be a valid GitHub URL (e.g., https://github.com/owner/repo)';
+  }
+  return null;
+};
+
+const validateWorkflow = (value) => {
+  if (!value) return null; // Optional, has default
+  if (!WORKFLOW_PATTERN.test(value)) {
+    return 'Workflow file must end with .yml or .yaml';
+  }
+  return null;
+};
+
+const SettingsPage = () => {
+  const { get, put } = useFetchClient();
+  const [settings, setSettings] = useState({
+    githubToken: '',
+    repoUrl: '',
+    workflow: '',
+    branch: '',
+  });
+  const [errors, setErrors] = useState({});
+  const [hasExistingToken, setHasExistingToken] = useState(false);
+  const [maskedToken, setMaskedToken] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [notification, setNotification] = useState(null);
+
+  useEffect(() => {
+    fetchSettings();
+  }, []);
+
+  const fetchSettings = async () => {
+    setLoading(true);
+    try {
+      const { data } = await get(`/${PLUGIN_ID}/settings`);
+      const fetchedSettings = data.data || {};
+      setSettings({
+        githubToken: '',
+        repoUrl: fetchedSettings.repoUrl || '',
+        workflow: fetchedSettings.workflow || '',
+        branch: fetchedSettings.branch || '',
+      });
+      setHasExistingToken(fetchedSettings.hasToken || false);
+      setMaskedToken(fetchedSettings.maskedToken || null);
+    } catch (error) {
+      console.error('Error fetching settings:', error);
+      setNotification({
+        type: 'danger',
+        message: 'Failed to load settings',
+      });
+    }
+    setLoading(false);
+  };
+
+  const validateAll = () => {
+    const newErrors = {};
+
+    const tokenError = validateToken(settings.githubToken);
+    if (tokenError && settings.githubToken) newErrors.githubToken = tokenError;
+
+    const repoError = validateRepoUrl(settings.repoUrl);
+    if (repoError) newErrors.repoUrl = repoError;
+
+    const workflowError = validateWorkflow(settings.workflow);
+    if (workflowError) newErrors.workflow = workflowError;
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSave = async () => {
+    if (!validateAll()) {
+      setNotification({
+        type: 'warning',
+        message: 'Please fix the validation errors before saving',
+      });
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const dataToSave = { ...settings };
+      if (!dataToSave.githubToken) {
+        delete dataToSave.githubToken;
+      }
+
+      await put(`/${PLUGIN_ID}/settings`, { data: dataToSave });
+
+      if (settings.githubToken) {
+        setHasExistingToken(true);
+      }
+      setSettings(prev => ({ ...prev, githubToken: '' }));
+
+      setNotification({
+        type: 'success',
+        message: 'Settings saved successfully',
+      });
+    } catch (error) {
+      console.error('Error saving settings:', error);
+      setNotification({
+        type: 'danger',
+        message: 'Failed to save settings',
+      });
+    }
+    setSaving(false);
+  };
+
+  const handleChange = (field) => (e) => {
+    const value = e.target.value;
+    setSettings(prev => ({ ...prev, [field]: value }));
+
+    // Clear error when user starts typing
+    if (errors[field]) {
+      setErrors(prev => ({ ...prev, [field]: null }));
+    }
+  };
+
+  const handleBlur = (field, validator) => () => {
+    const error = validator(settings[field]);
+    if (error) {
+      setErrors(prev => ({ ...prev, [field]: error }));
+    }
+  };
+
+  if (loading) {
+    return (
+      <Layouts.Root>
+        <Layouts.Header
+          title="Settings"
+          subtitle="Configure GitHub Actions deployment"
+          navigationAction={<BackButton fallback={`/plugins/${PLUGIN_ID}`} />}
+        />
+        <Layouts.Content>
+          <Flex justifyContent="center" padding={8}>
+            <Loader>Loading settings...</Loader>
+          </Flex>
+        </Layouts.Content>
+      </Layouts.Root>
+    );
+  }
+
+  const isValid = settings.repoUrl && !errors.repoUrl && !errors.githubToken && !errors.workflow;
+
+  return (
+    <Layouts.Root>
+      <Layouts.Header
+        title="Settings"
+        subtitle="Configure GitHub Actions deployment"
+        navigationAction={<BackButton fallback={`/plugins/${PLUGIN_ID}`} />}
+        primaryAction={
+          <Button
+            onClick={handleSave}
+            loading={saving}
+            disabled={loading || !isValid}
+            startIcon={<Check />}
+            size="L"
+          >
+            Save Settings
+          </Button>
+        }
+      />
+      <Layouts.Content>
+        {notification && (
+          <Box paddingBottom={4}>
+            <Alert
+              closeLabel="Close"
+              title={notification.message}
+              variant={notification.type}
+              onClose={() => setNotification(null)}
+            />
+          </Box>
+        )}
+
+        <Flex direction="column" alignItems="stretch" gap={6}>
+          {/* Repository Section */}
+          <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">
+                Repository
+              </Typography>
+
+              <Field.Root
+                name="repoUrl"
+                required
+                error={errors.repoUrl}
+                hint="Copy the URL from your browser when viewing the repository"
+              >
+                <Field.Label>Repository URL</Field.Label>
+                <Field.Input
+                  placeholder="https://github.com/{owner}/{repo}"
+                  value={settings.repoUrl}
+                  onChange={handleChange('repoUrl')}
+                  onBlur={handleBlur('repoUrl', validateRepoUrl)}
+                />
+                <Field.Hint />
+                <Field.Error />
+              </Field.Root>
+            </Flex>
+          </Box>
+
+          {/* Workflow Section */}
+          <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">
+                Workflow Configuration
+              </Typography>
+
+              <Grid.Root gap={4}>
+                <Grid.Item col={6} s={12}>
+                  <Field.Root
+                    name="workflow"
+                    required
+                    error={errors.workflow}
+                    hint="Filename in .github/workflows/"
+                  >
+                    <Field.Label>Workflow File</Field.Label>
+                    <Field.Input
+                      placeholder="deploy.yml"
+                      value={settings.workflow}
+                      onChange={handleChange('workflow')}
+                      onBlur={handleBlur('workflow', validateWorkflow)}
+                    />
+                    <Field.Hint />
+                    <Field.Error />
+                  </Field.Root>
+                </Grid.Item>
+
+                <Grid.Item col={6} s={12}>
+                  <Field.Root
+                    name="branch"
+                    required
+                    hint="Branch to trigger the workflow on"
+                  >
+                    <Field.Label>Branch</Field.Label>
+                    <Field.Input
+                      placeholder="main"
+                      value={settings.branch}
+                      onChange={handleChange('branch')}
+                    />
+                    <Field.Hint />
+                  </Field.Root>
+                </Grid.Item>
+              </Grid.Root>
+            </Flex>
+          </Box>
+
+          {/* Authentication Section */}
+          <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">
+                Authentication
+              </Typography>
+
+              <Field.Root
+                name="githubToken"
+                required
+                error={errors.githubToken}
+                hint={
+                  !hasExistingToken || !maskedToken
+                    ? "Create a fine-grained token with Actions (Read and write) permission"
+                    : undefined
+                }
+              >
+                <Field.Label>GitHub Personal Access Token</Field.Label>
+                <Field.Input
+                  type="password"
+                  placeholder={hasExistingToken ? "••••••••••••••••" : "github_pat_xxxxxxxxxxxx"}
+                  value={settings.githubToken}
+                  onChange={handleChange('githubToken')}
+                  onBlur={handleBlur('githubToken', validateToken)}
+                />
+                {hasExistingToken && maskedToken ? (
+                  <Typography variant="pi" textColor="neutral600">
+                    Existing token:{' '}
+                    <Typography
+                      variant="pi"
+                      fontWeight="bold"
+                      textColor="success600"
+                      tag="span"
+                    >
+                      {maskedToken}
+                    </Typography>
+                    . Leave empty to keep existing, or enter new to replace.
+                  </Typography>
+                ) : (
+                  <Field.Hint />
+                )}
+                <Field.Error />
+              </Field.Root>
+
+              <Box paddingTop={2}>
+                <Typography variant="sigma" textColor="neutral600">
+                  How to get a GitHub Token:
+                </Typography>
+                <Box paddingTop={2}>
+                  <Typography variant="pi" tag="ol" textColor="neutral600">
+                    <li>Go to GitHub → Settings → Developer settings → Personal access tokens → Fine-grained tokens</li>
+                    <li>Click "Generate new token"</li>
+                    <li>Set token name, expiration, and select the target repository</li>
+                    <li>Under "Repository permissions", set <strong>Actions</strong> to "Read and write"</li>
+                    <li>Click "Generate token" and paste it above</li>
+                  </Typography>
+                </Box>
+              </Box>
+            </Flex>
+          </Box>
+        </Flex>
+      </Layouts.Content>
+    </Layouts.Root>
+  );
+};
+
+export { SettingsPage };

package/admin/src/pluginId.js

@@ -0,0 +1 @@
+export const PLUGIN_ID = 'deployment-trigger';

package/admin/src/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "plugin.name": "Deployment Trigger"
+}

package/admin/src/utils/getTranslation.js

@@ -0,0 +1,5 @@
+import { PLUGIN_ID } from '../pluginId';
+
+const getTranslation = (id) => `${PLUGIN_ID}.${id}`;
+
+export { getTranslation };