strapi-content-sync-pro 1.0.4 → 1.0.6

package/admin/src/components/SyncProfilesTab.jsx

@@ -38,6 +38,11 @@ const CONFLICT_STRATEGY_OPTIONS = [
   { value: 'remote_wins', label: 'Remote Wins' },
 ];
 
+const EXECUTION_STRATEGY_OPTIONS = [
+  { value: 'hybrid_two_pass', label: 'Hybrid Two-Pass (Recommended)', hint: 'Pass 1: entities. Pass 2: relations from owner side. Most reliable.' },
+  { value: 'one_pass', label: 'One-Pass (Advanced)', hint: 'Single pass. Depth fixed to 1. Only owner-side direct in-scope targets. Less reliable for relation-heavy content.' },
+];
+
 const FIELD_DIRECTION_OPTIONS = [
   { value: 'both', label: 'Both' },
   { value: 'push', label: 'Push' },
@@ -64,6 +69,11 @@ const SyncProfilesTab = () => {
   const [sortField, setSortField] = useState('name');
   const [sortDirection, setSortDirection] = useState('asc');
 
+  // Filter state
+  const [filterName, setFilterName] = useState('');
+  const [filterDirection, setFilterDirection] = useState('');
+  const [filterStatus, setFilterStatus] = useState('');
+
   // Selection state for bulk operations
   const [selectedProfiles, setSelectedProfiles] = useState([]);
 
@@ -77,6 +87,7 @@ const SyncProfilesTab = () => {
     contentType: '',
     direction: 'both',
     conflictStrategy: 'latest',
+    executionStrategy: 'hybrid_two_pass',
     syncDeletions: false,
     isActive: false,
     isSimple: true,
@@ -86,9 +97,26 @@ const SyncProfilesTab = () => {
   const [loadingSchema, setLoadingSchema] = useState(false);
   const [syncMode, setSyncMode] = useState('paired');
 
-  // Sorted profiles
+  // Sorted + filtered profiles
   const sortedProfiles = useMemo(() => {
-    const sorted = [...profiles].sort((a, b) => {
+    let filtered = [...profiles];
+
+    if (filterName.trim()) {
+      const q = filterName.trim().toLowerCase();
+      filtered = filtered.filter(
+        (p) => p.name.toLowerCase().includes(q) || p.contentType.toLowerCase().includes(q)
+      );
+    }
+    if (filterDirection) {
+      filtered = filtered.filter((p) => p.direction === filterDirection);
+    }
+    if (filterStatus) {
+      filtered = filtered.filter((p) =>
+        filterStatus === 'active' ? p.isActive : !p.isActive
+      );
+    }
+
+    filtered.sort((a, b) => {
       let aVal = a[sortField];
       let bVal = b[sortField];
 
@@ -113,8 +141,8 @@ const SyncProfilesTab = () => {
       }
       return sortDirection === 'asc' ? aVal - bVal : bVal - aVal;
     });
-    return sorted;
-  }, [profiles, sortField, sortDirection, contentTypes]);
+    return filtered;
+  }, [profiles, sortField, sortDirection, contentTypes, filterName, filterDirection, filterStatus]);
 
   const handleSort = (field) => {
     if (sortField === field) {
@@ -291,6 +319,7 @@ const SyncProfilesTab = () => {
       contentType: '',
       direction: 'both',
       conflictStrategy: 'latest',
+      executionStrategy: 'hybrid_two_pass',
       syncDeletions: false,
       isActive: false,
       isSimple: true,
@@ -308,6 +337,7 @@ const SyncProfilesTab = () => {
       contentType: profile.contentType,
       direction: profile.direction || 'both',
       conflictStrategy: profile.conflictStrategy || 'latest',
+      executionStrategy: profile.executionStrategy || 'hybrid_two_pass',
       syncDeletions: !!profile.syncDeletions,
       isActive: profile.isActive,
       isSimple: profile.isSimple !== false,
@@ -402,6 +432,16 @@ const SyncProfilesTab = () => {
     }
   };
 
+  const handleDeactivate = async (profile) => {
+    try {
+      await put(`/${PLUGIN_ID}/sync-profiles/${profile.id}`, { isActive: false });
+      setMessage({ type: 'success', text: `Deactivated: ${profile.name}` });
+      loadData();
+    } catch (err) {
+      setMessage({ type: 'danger', text: err?.response?.data?.error?.message || err.message || 'Failed to deactivate profile' });
+    }
+  };
+
   const getContentTypeName = (uid) => {
     const ct = contentTypes.find((c) => c.uid === uid);
     return ct?.displayName || uid;
@@ -472,6 +512,55 @@ const SyncProfilesTab = () => {
       )}
 
       <Box paddingTop={4}>
+        {/* Filter Bar */}
+        <Flex gap={3} wrap="wrap" marginBottom={4} alignItems="flex-end">
+          <Box style={{ flex: '1 1 200px', minWidth: 160 }}>
+            <TextInput
+              placeholder="Search by name or type…"
+              value={filterName}
+              onChange={(e) => setFilterName(e.target.value)}
+              label="Search"
+              size="S"
+            />
+          </Box>
+          <Box style={{ minWidth: 160 }}>
+            <SingleSelect
+              placeholder="All directions"
+              value={filterDirection}
+              onChange={setFilterDirection}
+              onClear={() => setFilterDirection('')}
+              size="S"
+              label="Direction"
+            >
+              <SingleSelectOption value="push">Push Only</SingleSelectOption>
+              <SingleSelectOption value="pull">Pull Only</SingleSelectOption>
+              <SingleSelectOption value="both">Bidirectional</SingleSelectOption>
+            </SingleSelect>
+          </Box>
+          <Box style={{ minWidth: 140 }}>
+            <SingleSelect
+              placeholder="All statuses"
+              value={filterStatus}
+              onChange={setFilterStatus}
+              onClear={() => setFilterStatus('')}
+              size="S"
+              label="Status"
+            >
+              <SingleSelectOption value="active">Active</SingleSelectOption>
+              <SingleSelectOption value="inactive">Inactive</SingleSelectOption>
+            </SingleSelect>
+          </Box>
+          {(filterName || filterDirection || filterStatus) && (
+            <Button
+              variant="tertiary"
+              size="S"
+              onClick={() => { setFilterName(''); setFilterDirection(''); setFilterStatus(''); }}
+            >
+              Clear filters
+            </Button>
+          )}
+        </Flex>
+
         {profiles.length === 0 ? (
           <Box padding={6} background="neutral0" hasRadius>
             <Typography textColor="neutral600">
@@ -479,6 +568,10 @@ const SyncProfilesTab = () => {
               or create a custom profile.
             </Typography>
           </Box>
+        ) : sortedProfiles.length === 0 ? (
+          <Box padding={6} background="neutral0" hasRadius>
+            <Typography textColor="neutral600">No profiles match the current filters.</Typography>
+          </Box>
         ) : (
           <Table>
             <Thead>
@@ -523,6 +616,12 @@ const SyncProfilesTab = () => {
                     <Badge active={!profile.isSimple}>
                       {profile.isSimple ? 'Simple' : 'Advanced'}
                     </Badge>
+                    {' '}
+                    <Badge active={profile.executionStrategy !== 'one_pass'} title={
+                      profile.executionStrategy === 'one_pass' ? 'One-Pass (depth=1, owner-side only)' : 'Hybrid Two-Pass (entities then relations)'
+                    }>
+                      {profile.executionStrategy === 'one_pass' ? '1-Pass' : '2-Pass'}
+                    </Badge>
                   </Td>
                   <Td>
                     {profile.isActive ? (
@@ -533,6 +632,23 @@ const SyncProfilesTab = () => {
                   </Td>
                   <Td>
                     <Flex gap={1}>
+                      {profile.isActive ? (
+                        <Button
+                          variant="tertiary"
+                          size="S"
+                          onClick={() => handleDeactivate(profile)}
+                        >
+                          Deactivate
+                        </Button>
+                      ) : (
+                        <Button
+                          variant="success"
+                          size="S"
+                          onClick={() => handleActivate(profile)}
+                        >
+                          Activate
+                        </Button>
+                      )}
                       <IconButton label="Edit" onClick={() => openEditModal(profile)}>
                         <Pencil />
                       </IconButton>
@@ -669,6 +785,26 @@ const SyncProfilesTab = () => {
                 </Field.Root>
               </Box>
 
+              {/* Execution Strategy */}
+              <Box paddingBottom={4}>
+                <Field.Root>
+                  <Field.Label>Execution Strategy</Field.Label>
+                  <SingleSelect
+                    value={formData.executionStrategy || 'hybrid_two_pass'}
+                    onChange={(value) => setFormData((p) => ({ ...p, executionStrategy: value }))}
+                  >
+                    {EXECUTION_STRATEGY_OPTIONS.map((opt) => (
+                      <SingleSelectOption key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </SingleSelectOption>
+                    ))}
+                  </SingleSelect>
+                  <Field.Hint>
+                    {EXECUTION_STRATEGY_OPTIONS.find(o => o.value === (formData.executionStrategy || 'hybrid_two_pass'))?.hint}
+                  </Field.Hint>
+                </Field.Root>
+              </Box>
+
               {/* Deletions Toggle */}
               <Box paddingBottom={4}>
                 <Checkbox

package/admin/src/components/SyncTab.jsx

@@ -23,7 +23,7 @@ import {
   Checkbox,
   TextInput,
 } from '@strapi/design-system';
-import { Play, Clock, Cog, ArrowUp, ArrowDown } from '@strapi/icons';
+import { Play, Clock, Cog, ArrowUp, ArrowDown, CaretUp, CaretDown } from '@strapi/icons';
 import { useFetchClient } from '@strapi/strapi/admin';
 
 
@@ -59,9 +59,19 @@ const SyncTab = () => {
 
   // Filter and ordering
   const [profileFilter, setProfileFilter] = useState('all');
+  const [profileSearch, setProfileSearch] = useState('');
   const [executionOrder, setExecutionOrder] = useState({}); // { profileId: order }
   const [orderModified, setOrderModified] = useState(false);
 
+  // Sort state for Execute table
+  const [execSortField, setExecSortField] = useState('');
+  const [execSortDir, setExecSortDir] = useState('asc');
+
+  // Sort + search state for Status table
+  const [statusSearch, setStatusSearch] = useState('');
+  const [statusSortField, setStatusSortField] = useState('');
+  const [statusSortDir, setStatusSortDir] = useState('asc');
+
   // Selection for batch execution
   const [selectedProfiles, setSelectedProfiles] = useState([]);
 
@@ -85,12 +95,25 @@ const SyncTab = () => {
     loadData();
   }, []);
 
+  // Refresh data whenever this browser tab regains focus (e.g. user activated a
+  // profile in the Sync Profiles tab and switches back here).
+  useEffect(() => {
+    const onVisibility = () => {
+      if (document.visibilityState === 'visible') {
+        loadData();
+      }
+    };
+    document.addEventListener('visibilitychange', onVisibility);
+    return () => document.removeEventListener('visibilitychange', onVisibility);
+  }, []);
+
   const loadData = async () => {
     try {
       const [profilesRes, statusRes, globalRes, depsRes, configRes] = await Promise.all([
         get(`/${PLUGIN_ID}/sync-profiles`),
         get(`/${PLUGIN_ID}/sync-execution/status`),
         get(`/${PLUGIN_ID}/sync-execution/global-settings`),
+        // dependencies are recomputed from enabled types each load
         get(`/${PLUGIN_ID}/dependencies/all`).catch(() => ({ data: { data: {} } })),
         get(`/${PLUGIN_ID}/config`),
       ]);
@@ -407,7 +430,7 @@ const SyncTab = () => {
     return { dependsOn, dependedBy };
   };
 
-  // Filter and sort profiles
+  // Filter and sort profiles for Execute table
   const filteredProfiles = useMemo(() => {
     let result = [...profiles];
 
@@ -416,18 +439,87 @@ const SyncTab = () => {
       result = result.filter(p => p.isActive);
     }
 
-    // Sort by execution order
-    result.sort((a, b) => {
-      const orderA = executionOrder[a.id] || 999;
-      const orderB = executionOrder[b.id] || 999;
-      return orderA - orderB;
-    });
+    // Apply name search
+    if (profileSearch.trim()) {
+      const q = profileSearch.trim().toLowerCase();
+      result = result.filter(
+        (p) => p.name.toLowerCase().includes(q) || p.contentType.toLowerCase().includes(q)
+      );
+    }
 
+    // Sort by explicit column if chosen, else by execution order
+    if (execSortField) {
+      result.sort((a, b) => {
+        let aVal = a[execSortField] ?? '';
+        let bVal = b[execSortField] ?? '';
+        if (typeof aVal === 'boolean') { aVal = aVal ? 1 : 0; bVal = bVal ? 1 : 0; }
+        if (typeof aVal === 'string') {
+          return execSortDir === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+        }
+        return execSortDir === 'asc' ? aVal - bVal : bVal - aVal;
+      });
+    } else {
+      // Sort by execution order
+      result.sort((a, b) => {
+        const orderA = executionOrder[a.id] || 999;
+        const orderB = executionOrder[b.id] || 999;
+        return orderA - orderB;
+      });
+    }
+
+    return result;
+  }, [profiles, profileFilter, profileSearch, executionOrder, execSortField, execSortDir]);
+
+  // Filter and sort for Status table
+  const filteredStatus = useMemo(() => {
+    let result = [...executionStatus];
+    if (statusSearch.trim()) {
+      const q = statusSearch.trim().toLowerCase();
+      result = result.filter((s) => (s.profileName || '').toLowerCase().includes(q));
+    }
+    if (statusSortField) {
+      result.sort((a, b) => {
+        let aVal = a[statusSortField] ?? '';
+        let bVal = b[statusSortField] ?? '';
+        if (typeof aVal === 'boolean') { aVal = aVal ? 1 : 0; bVal = bVal ? 1 : 0; }
+        if (typeof aVal === 'string') {
+          return statusSortDir === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+        }
+        return statusSortDir === 'asc' ? aVal - bVal : bVal - aVal;
+      });
+    }
     return result;
-  }, [profiles, profileFilter, executionOrder]);
+  }, [executionStatus, statusSearch, statusSortField, statusSortDir]);
 
   const activeProfilesInFilter = filteredProfiles.filter(p => p.isActive);
 
+  const handleExecSort = (field) => {
+    if (execSortField === field) {
+      setExecSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setExecSortField(field);
+      setExecSortDir('asc');
+    }
+  };
+
+  const handleStatusSort = (field) => {
+    if (statusSortField === field) {
+      setStatusSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setStatusSortField(field);
+      setStatusSortDir('asc');
+    }
+  };
+
+  const SortableTh = ({ field, sortF, sortD, onSort, children }) => (
+    <Th onClick={() => onSort(field)} style={{ cursor: 'pointer', userSelect: 'none' }}>
+      <Flex alignItems="center" gap={1}>
+        <Typography variant="sigma">{children}</Typography>
+        {sortF === field && (sortD === 'asc' ? <CaretUp /> : <CaretDown />)}
+      </Flex>
+    </Th>
+  );
+
   if (loading) return <Typography>Loading…</Typography>;
 
   return (
@@ -463,6 +555,9 @@ const SyncTab = () => {
                   <Button onClick={handleSyncAll} loading={syncing} disabled={syncing}>
                     {syncing ? 'Syncing…' : 'Sync All Active'}
                   </Button>
+                  <Button variant="tertiary" onClick={loadData} disabled={loading}>
+                    Refresh
+                  </Button>
                 </Flex>
               </Flex>
 
@@ -508,21 +603,31 @@ const SyncTab = () => {
 
               <Box paddingTop={4}>
                 {/* Filter and Order Controls */}
-                <Flex justifyContent="space-between" alignItems="center" marginBottom={4}>
-                  <Flex gap={4} alignItems="center">
+                <Flex justifyContent="space-between" alignItems="flex-end" marginBottom={4} wrap="wrap" gap={3}>
+                  <Flex gap={3} alignItems="flex-end" wrap="wrap">
                     <Typography variant="delta">Profiles</Typography>
-                    <SingleSelect
-                      value={profileFilter}
-                      onChange={setProfileFilter}
-                      size="S"
-                      style={{ width: 180 }}
-                    >
-                      {FILTER_OPTIONS.map(opt => (
-                        <SingleSelectOption key={opt.value} value={opt.value}>
-                          {opt.label}
-                        </SingleSelectOption>
-                      ))}
-                    </SingleSelect>
+                    <Box style={{ minWidth: 160 }}>
+                      <SingleSelect
+                        value={profileFilter}
+                        onChange={setProfileFilter}
+                        size="S"
+                      >
+                        {FILTER_OPTIONS.map(opt => (
+                          <SingleSelectOption key={opt.value} value={opt.value}>
+                            {opt.label}
+                          </SingleSelectOption>
+                        ))}
+                      </SingleSelect>
+                    </Box>
+                    <Box style={{ minWidth: 200 }}>
+                      <TextInput
+                        placeholder="Search by name or type…"
+                        value={profileSearch}
+                        onChange={(e) => setProfileSearch(e.target.value)}
+                        size="S"
+                        label=""
+                      />
+                    </Box>
                   </Flex>
                   <Flex gap={2}>
                     {orderModified && (
@@ -544,8 +649,10 @@ const SyncTab = () => {
                   <Box padding={4} background="neutral0" hasRadius>
                     <Typography textColor="neutral600">
                       {profileFilter === 'active' 
-                        ? 'No active profiles. Activate a profile in the Sync Profiles tab first.'
-                        : 'No profiles found. Create a profile in the Sync Profiles tab.'}
+                        ? 'No active profiles match the search. Activate a profile in the Sync Profiles tab first.'
+                        : profileSearch
+                          ? 'No profiles match the search.'
+                          : 'No profiles found. Create a profile in the Sync Profiles tab.'}
                     </Typography>
                   </Box>
                 ) : (
@@ -561,10 +668,10 @@ const SyncTab = () => {
                           />
                         </Th>
                         <Th style={{ width: 80 }}><Typography variant="sigma">Order</Typography></Th>
-                        <Th><Typography variant="sigma">Profile</Typography></Th>
-                        <Th><Typography variant="sigma">Content Type</Typography></Th>
+                        <SortableTh field="name" sortF={execSortField} sortD={execSortDir} onSort={handleExecSort}>Profile</SortableTh>
+                        <SortableTh field="contentType" sortF={execSortField} sortD={execSortDir} onSort={handleExecSort}>Content Type</SortableTh>
                         <Th><Typography variant="sigma">Dependencies</Typography></Th>
-                        <Th><Typography variant="sigma">Status</Typography></Th>
+                        <SortableTh field="isActive" sortF={execSortField} sortD={execSortDir} onSort={handleExecSort}>Status</SortableTh>
                         <Th><Typography variant="sigma">Execution Mode</Typography></Th>
                         <Th><Typography variant="sigma">Actions</Typography></Th>
                       </Tr>
@@ -614,7 +721,7 @@ const SyncTab = () => {
                                 <TextInput 
                                   value={order}
                                   onChange={(e) => handleOrderChange(profile.id, e.target.value)}
-                                  style={{ width: 50, textAlign: 'center' }}
+                                  style={{ width: 80, textAlign: 'center' }}
                                   size="S"
                                   type="number"
                                   min={1}
@@ -719,20 +826,39 @@ const SyncTab = () => {
                 Monitor scheduled and live sync jobs.
               </Typography>
 
-              <Box paddingTop={4}>
+              <Box paddingTop={4} paddingBottom={3}>
+                <TextInput
+                  placeholder="Search by profile name…"
+                  value={statusSearch}
+                  onChange={(e) => setStatusSearch(e.target.value)}
+                  label="Search"
+                  size="S"
+                  style={{ maxWidth: 280 }}
+                />
+              </Box>
+
+              <Box paddingTop={2}>
                 <Table>
                   <Thead>
                     <Tr>
-                      <Th><Typography variant="sigma">Profile</Typography></Th>
-                      <Th><Typography variant="sigma">Mode</Typography></Th>
-                      <Th><Typography variant="sigma">Enabled</Typography></Th>
-                      <Th><Typography variant="sigma">Last Run</Typography></Th>
+                      <SortableTh field="profileName" sortF={statusSortField} sortD={statusSortDir} onSort={handleStatusSort}>Profile</SortableTh>
+                      <SortableTh field="executionMode" sortF={statusSortField} sortD={statusSortDir} onSort={handleStatusSort}>Mode</SortableTh>
+                      <SortableTh field="enabled" sortF={statusSortField} sortD={statusSortDir} onSort={handleStatusSort}>Enabled</SortableTh>
+                      <SortableTh field="lastExecutedAt" sortF={statusSortField} sortD={statusSortDir} onSort={handleStatusSort}>Last Run</SortableTh>
                       <Th><Typography variant="sigma">Next Run</Typography></Th>
                       <Th><Typography variant="sigma">Status</Typography></Th>
                     </Tr>
                   </Thead>
                   <Tbody>
-                    {executionStatus.map((status) => (
+                    {filteredStatus.length === 0 ? (
+                      <Tr>
+                        <Td colSpan={6}>
+                          <Typography textColor="neutral500">
+                            {statusSearch ? 'No profiles match the search.' : 'No execution status found.'}
+                          </Typography>
+                        </Td>
+                      </Tr>
+                    ) : filteredStatus.map((status) => (
                       <Tr key={status.profileId}>
                         <Td>
                           <Typography fontWeight="bold">{status.profileName}</Typography>