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

package/admin/src/pages/SettingsPage.jsx

@@ -8,9 +8,17 @@ import {
   Alert,
   Loader,
   Field,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  IconButton,
+  Dialog,
   Grid,
 } from '@strapi/design-system';
-import { Check } from '@strapi/icons';
+import { Check, Plus, Pencil, Trash } from '@strapi/icons';
 
 import { PLUGIN_ID } from '../pluginId';
 
@@ -20,7 +28,7 @@ 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 (!value) return null;
   if (!TOKEN_PATTERN.test(value)) {
     return 'Token must start with "github_pat_" followed by alphanumeric characters';
   }
@@ -36,7 +44,7 @@ const validateRepoUrl = (value) => {
 };
 
 const validateWorkflow = (value) => {
-  if (!value) return null; // Optional, has default
+  if (!value) return 'Workflow file is required';
   if (!WORKFLOW_PATTERN.test(value)) {
     return 'Workflow file must end with .yml or .yaml';
   }
@@ -44,12 +52,11 @@ const validateWorkflow = (value) => {
 };
 
 const SettingsPage = () => {
-  const { get, put } = useFetchClient();
+  const { get, put, post, del } = useFetchClient();
   const [settings, setSettings] = useState({
     githubToken: '',
     repoUrl: '',
-    workflow: '',
-    branch: '',
+    targets: [],
   });
   const [errors, setErrors] = useState({});
   const [hasExistingToken, setHasExistingToken] = useState(false);
@@ -58,6 +65,14 @@ const SettingsPage = () => {
   const [saving, setSaving] = useState(false);
   const [notification, setNotification] = useState(null);
 
+  // Target form state
+  const [editingTarget, setEditingTarget] = useState(null);
+  const [targetForm, setTargetForm] = useState({ name: '', workflow: '', branch: '' });
+  const [targetErrors, setTargetErrors] = useState({});
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [targetToDelete, setTargetToDelete] = useState(null);
+
   useEffect(() => {
     fetchSettings();
   }, []);
@@ -70,70 +85,52 @@ const SettingsPage = () => {
       setSettings({
         githubToken: '',
         repoUrl: fetchedSettings.repoUrl || '',
-        workflow: fetchedSettings.workflow || '',
-        branch: fetchedSettings.branch || '',
+        targets: fetchedSettings.targets || [],
       });
       setHasExistingToken(fetchedSettings.hasToken || false);
       setMaskedToken(fetchedSettings.maskedToken || null);
     } catch (error) {
       console.error('Error fetching settings:', error);
-      setNotification({
-        type: 'danger',
-        message: 'Failed to load settings',
-      });
+      setNotification({ type: 'danger', message: 'Failed to load settings' });
     }
     setLoading(false);
   };
 
-  const validateAll = () => {
+  const handleSaveSettings = async () => {
     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;
+    const tokenError = validateToken(settings.githubToken);
+    if (tokenError && settings.githubToken) newErrors.githubToken = tokenError;
 
     setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSave = async () => {
-    if (!validateAll()) {
-      setNotification({
-        type: 'warning',
-        message: 'Please fix the validation errors before saving',
-      });
+    if (Object.keys(newErrors).length > 0) {
+      setNotification({ type: 'warning', message: 'Please fix the validation errors' });
       return;
     }
 
     setSaving(true);
     try {
-      const dataToSave = { ...settings };
-      if (!dataToSave.githubToken) {
-        delete dataToSave.githubToken;
+      const dataToSave = {
+        repoUrl: settings.repoUrl,
+        targets: settings.targets,
+      };
+      if (settings.githubToken) {
+        dataToSave.githubToken = settings.githubToken;
       }
 
-      await put(`/${PLUGIN_ID}/settings`, { data: dataToSave });
+      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',
-      });
+      setNotification({ type: 'success', message: 'Settings saved successfully' });
     } catch (error) {
       console.error('Error saving settings:', error);
-      setNotification({
-        type: 'danger',
-        message: 'Failed to save settings',
-      });
+      setNotification({ type: 'danger', message: 'Failed to save settings' });
     }
     setSaving(false);
   };
@@ -141,17 +138,92 @@ const SettingsPage = () => {
   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 }));
+  // Target management
+  const resetTargetForm = () => {
+    setTargetForm({ name: '', workflow: 'deploy.yml', branch: 'master' });
+    setTargetErrors({});
+    setEditingTarget(null);
+    setShowAddForm(false);
+  };
+
+  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';
+    setTargetErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleAddTarget = async () => {
+    if (!validateTargetForm()) return;
+
+    try {
+      const { data } = await post(`/${PLUGIN_ID}/targets`, { data: targetForm });
+      setSettings(prev => ({
+        ...prev,
+        targets: [...prev.targets, data.data],
+      }));
+      resetTargetForm();
+      setNotification({ type: 'success', message: 'Target added successfully' });
+    } catch (error) {
+      console.error('Error adding target:', error);
+      setNotification({ type: 'danger', message: 'Failed to add target' });
+    }
+  };
+
+  const handleEditTarget = (target) => {
+    setEditingTarget(target.id);
+    setTargetForm({ name: target.name, workflow: target.workflow, branch: target.branch });
+    setShowAddForm(false);
+  };
+
+  const handleUpdateTarget = async () => {
+    if (!validateTargetForm()) return;
+
+    try {
+      const { data } = await put(`/${PLUGIN_ID}/targets/${editingTarget}`, { data: targetForm });
+      setSettings(prev => ({
+        ...prev,
+        targets: prev.targets.map(t => t.id === editingTarget ? data.data : t),
+      }));
+      resetTargetForm();
+      setNotification({ type: 'success', message: 'Target updated successfully' });
+    } catch (error) {
+      console.error('Error updating target:', error);
+      setNotification({ type: 'danger', message: 'Failed to update target' });
+    }
+  };
+
+  const handleDeleteTarget = async () => {
+    if (!targetToDelete) return;
+
+    try {
+      await del(`/${PLUGIN_ID}/targets/${targetToDelete}`);
+      setSettings(prev => ({
+        ...prev,
+        targets: prev.targets.filter(t => t.id !== targetToDelete),
+      }));
+      setDeleteDialogOpen(false);
+      setTargetToDelete(null);
+      setNotification({ type: 'success', message: 'Target deleted successfully' });
+    } catch (error) {
+      console.error('Error deleting target:', error);
+      setNotification({ type: 'danger', message: 'Failed to delete target' });
+    }
+  };
+
+  const handleTargetFormChange = (field) => (e) => {
+    const value = e.target.value;
+    setTargetForm(prev => ({ ...prev, [field]: value }));
+    if (targetErrors[field]) {
+      setTargetErrors(prev => ({ ...prev, [field]: null }));
     }
   };
 
@@ -172,7 +244,7 @@ const SettingsPage = () => {
     );
   }
 
-  const isValid = settings.repoUrl && !errors.repoUrl && !errors.githubToken && !errors.workflow;
+  const isValid = settings.repoUrl && !errors.repoUrl && !errors.githubToken;
 
   return (
     <Layouts.Root>
@@ -182,7 +254,7 @@ const SettingsPage = () => {
         navigationAction={<BackButton fallback={`/plugins/${PLUGIN_ID}`} />}
         primaryAction={
           <Button
-            onClick={handleSave}
+            onClick={handleSaveSettings}
             loading={saving}
             disabled={loading || !isValid}
             startIcon={<Check />}
@@ -231,7 +303,6 @@ const SettingsPage = () => {
                   placeholder="https://github.com/{owner}/{repo}"
                   value={settings.repoUrl}
                   onChange={handleChange('repoUrl')}
-                  onBlur={handleBlur('repoUrl', validateRepoUrl)}
                 />
                 <Field.Hint />
                 <Field.Error />
@@ -239,7 +310,7 @@ const SettingsPage = () => {
             </Flex>
           </Box>
 
-          {/* Workflow Section */}
+          {/* Deployment Targets Section */}
           <Box
             background="neutral0"
             hasRadius
@@ -250,46 +321,134 @@ const SettingsPage = () => {
             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"
+              <Flex justifyContent="space-between" alignItems="center">
+                <Typography variant="delta" tag="h2">
+                  Deployment Targets
+                </Typography>
+                {!showAddForm && !editingTarget && (
+                  <Button
+                    startIcon={<Plus />}
+                    onClick={() => {
+                      setShowAddForm(true);
+                      setTargetForm({ name: '', workflow: 'deploy.yml', branch: 'master' });
+                    }}
+                    size="S"
                   >
-                    <Field.Label>Branch</Field.Label>
-                    <Field.Input
-                      placeholder="main"
-                      value={settings.branch}
-                      onChange={handleChange('branch')}
-                    />
-                    <Field.Hint />
-                  </Field.Root>
-                </Grid.Item>
-              </Grid.Root>
+                    Add Target
+                  </Button>
+                )}
+              </Flex>
+
+              {/* Add/Edit Form */}
+              {(showAddForm || editingTarget) && (
+                <Box
+                  background="neutral100"
+                  padding={4}
+                  hasRadius
+                >
+                  <Flex direction="column" gap={4}>
+                    <Typography variant="omega" fontWeight="bold">
+                      {editingTarget ? 'Edit Target' : 'Add New Target'}
+                    </Typography>
+                    <Grid.Root gap={4}>
+                      <Grid.Item col={4} s={12}>
+                        <Field.Root name="targetName" required error={targetErrors.name}>
+                          <Field.Label>Name</Field.Label>
+                          <Field.Input
+                            placeholder="e.g., Production"
+                            value={targetForm.name}
+                            onChange={handleTargetFormChange('name')}
+                          />
+                          <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>
+                    </Grid.Root>
+                    <Flex gap={2} justifyContent="flex-end">
+                      <Button variant="tertiary" onClick={resetTargetForm}>
+                        Cancel
+                      </Button>
+                      <Button
+                        onClick={editingTarget ? handleUpdateTarget : handleAddTarget}
+                        startIcon={<Check />}
+                      >
+                        {editingTarget ? 'Update' : 'Add'}
+                      </Button>
+                    </Flex>
+                  </Flex>
+                </Box>
+              )}
+
+              {/* Targets Table */}
+              {settings.targets.length > 0 ? (
+                <Table>
+                  <Thead>
+                    <Tr>
+                      <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">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>
+                    ))}
+                  </Tbody>
+                </Table>
+              ) : (
+                !showAddForm && (
+                  <Typography variant="pi" textColor="neutral600">
+                    No deployment targets configured. Click "Add Target" to create one.
+                  </Typography>
+                )
+              )}
             </Flex>
           </Box>
 
@@ -324,17 +483,11 @@ const SettingsPage = () => {
                   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"
-                    >
+                    <Typography variant="pi" fontWeight="bold" textColor="success600" tag="span">
                       {maskedToken}
                     </Typography>
                     . Leave empty to keep existing, or enter new to replace.
@@ -362,6 +515,26 @@ const SettingsPage = () => {
             </Flex>
           </Box>
         </Flex>
+
+        {/* Delete Confirmation Dialog */}
+        <Dialog.Root open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+          <Dialog.Content>
+            <Dialog.Header>Delete Target</Dialog.Header>
+            <Dialog.Body>
+              Are you sure you want to delete this deployment target? This action cannot be undone.
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Dialog.Cancel>
+                <Button variant="tertiary">Cancel</Button>
+              </Dialog.Cancel>
+              <Dialog.Action>
+                <Button variant="danger-light" onClick={handleDeleteTarget}>
+                  Delete
+                </Button>
+              </Dialog.Action>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog.Root>
       </Layouts.Content>
     </Layouts.Root>
   );