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

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,
@@ -9,6 +9,12 @@ import {
   Typography,
   Alert,
   Loader,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
 } from '@strapi/design-system';
 import {Rocket, Cog} from '@strapi/icons';
 
@@ -18,13 +24,20 @@ 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 [deploying, setDeploying] = useState(false);
+  const [deployingTargetId, setDeployingTargetId] = useState(null);
   const [notification, setNotification] = useState(null);
 
   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 () => {
@@ -38,23 +51,23 @@ const HomePage = () => {
     }
   };
 
-  const handleDeploy = async () => {
-    setDeploying(true);
+  const handleDeploy = async (targetId, targetName) => {
+    setDeployingTargetId(targetId);
     setNotification(null);
     try {
-      const {data} = await post(`/${PLUGIN_ID}/trigger`, {});
+      const {data} = await post(`/${PLUGIN_ID}/trigger`, { targetId });
       setNotification({
         type: 'success',
-        message: data.data?.message || 'Deployment triggered successfully!',
+        message: `${targetName}: ${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',
+        message: `${targetName}: ${error?.response?.data?.error?.message || error.message || 'Deployment failed'}`,
       });
     } finally {
-      setDeploying(false);
+      setDeployingTargetId(null);
     }
   };
 
@@ -78,12 +91,13 @@ const HomePage = () => {
   const parsed = status?.parsed || {};
   const isConfigured = status?.configured;
   const hasToken = status?.hasToken;
+  const targets = settings.targets || [];
 
   return (
     <Layouts.Root>
       <Layouts.Header
         title={formatMessage({id: getTranslation('plugin.name')})}
-        subtitle="Trigger GitHub Actions deployment to production"
+        subtitle="Trigger GitHub Actions deployment"
         secondaryAction={
           <Link to={`/plugins/${PLUGIN_ID}/settings`}>
             <Button variant="tertiary" startIcon={<Cog />}>
@@ -137,7 +151,7 @@ const HomePage = () => {
         )}
 
         <Flex direction="column" alignItems="stretch" gap={4}>
-          {/* Repository Configuration Card */}
+          {/* Repository Info Card */}
           <Box
             background="neutral0"
             hasRadius
@@ -149,78 +163,119 @@ const HomePage = () => {
           >
             <Flex direction="column" alignItems="stretch" gap={4}>
               <Typography variant="delta" tag="h2">
-                Configuration
+                Repository
               </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)'}
+              <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">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>
+            </Flex>
+          </Box>
 
-                  <Typography variant="sigma" textColor="neutral600">GitHub Token</Typography>
-                  <Typography variant="pi" textColor={hasToken ? 'success600' : 'danger600'}>
-                    {hasToken ? 'Configured' : 'Missing'}
-                  </Typography>
-                </Box>
+          {/* Deployment Targets 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">
+                Deployment Targets
+              </Typography>
 
-                {/* Action Button */}
-                {isConfigured && (
-                  <Button
-                    onClick={handleDeploy}
-                    loading={deploying}
-                    disabled={deploying}
-                    startIcon={<Rocket />}
-                    size="L"
-                  >
-                    {deploying ? 'Triggering...' : 'Trigger Deployment'}
-                  </Button>
-                )}
-              </Flex>
+              {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">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>
+                    ))}
+                  </Tbody>
+                </Table>
+              ) : (
+                <Flex direction="column" alignItems="center" justifyContent="center" gap={3} padding={6}>
+                  <Typography variant="epsilon" textColor="neutral600" textAlign="center">
+                    No deployment targets configured
+                  </Typography>
+                  <Link to={`/plugins/${PLUGIN_ID}/settings`}>
+                    <Button variant="default" startIcon={<Cog />}>
+                      Add Targets in Settings
+                    </Button>
+                  </Link>
+                </Flex>
+              )}
             </Flex>
           </Box>
 
-          {/* Instructions Card */}
-          {!isConfigured && (
+          {/* Instructions Card - Show only when not configured */}
+          {!isConfigured && targets.length > 0 && (
             <Box
               background="neutral0"
               hasRadius
               shadow="filterShadow"
-              paddingTop={8}
-              paddingBottom={8}
+              paddingTop={6}
+              paddingBottom={6}
               paddingLeft={7}
               paddingRight={7}
             >
               <Flex direction="column" alignItems="center" justifyContent="center" gap={3}>
                 <Typography variant="beta" textColor="neutral600" textAlign="center">
-                  Setup Required
+                  Setup Incomplete
                 </Typography>
                 <Typography variant="epsilon" textColor="neutral600" textAlign="center">
-                  Configure your GitHub repository settings to enable deployment triggering.
+                  Please ensure repository URL and GitHub token are configured in Settings.
                 </Typography>
                 <Box paddingTop={2}>
                   <Link to={`/plugins/${PLUGIN_ID}/settings`}>