add env names to context, adjust sync warning

README.md

@@ -28,6 +28,6 @@ npm run dev:functions
 
 Clicking on the below button will guide you through the deployment process and also create a copy of the repository in your account.
 
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/kontent-ai/data-ops-gui#NODE_VERSION=20)
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/kontent-ai/data-ops-gui#NODE_VERSION=20.x)
 
 The tool makes use of Netlify functions to invoke `data-ops` methods. Deployment on other platforms requires adjustment to the API layer.

src/WizardContext.tsx

@@ -18,6 +18,8 @@ export type SyncEntityName = (typeof syncEntityChoices)[number];
 interface WizardContextProps {
   sourceEnvironmentId?: string;
   targetEnvironmentId?: string;
+  sourceEnvName?: string;
+  targetEnvName?: string;
   sourceClient?: ManagementClient;
   targetClient?: ManagementClient;
   sourceFile?: File | null;
@@ -26,6 +28,8 @@ interface WizardContextProps {
   syncModelEntities: SyncEntityName[];
   setSourceEnvironmentId: (id: string) => void;
   setTargetEnvironmentId: (id: string) => void;
+  setSourceEnvName: (name: string) => void;
+  setTargetEnvName: (name: string) => void;
   setSourceClient: (client: ManagementClient) => void;
   setTargetClient: (client: ManagementClient) => void;
   setSourceFile: (file: File | null) => void;
@@ -39,6 +43,8 @@ export const WizardContext = createContext<WizardContextProps>({} as WizardConte
 export const WizardProvider: React.FC<any> = ({ children }) => {
   const [sourceEnvironmentId, setSourceEnvironmentId] = useState<string>();
   const [targetEnvironmentId, setTargetEnvironmentId] = useState<string>();
+  const [sourceEnvName, setSourceEnvName] = useState<string>();
+  const [targetEnvName, setTargetEnvName] = useState<string>();
   const [sourceClient, setSourceClient] = useState<ManagementClient>();
   const [targetClient, setTargetClient] = useState<ManagementClient>();
   const [sourceFile, setSourceFile] = useState<File | null>(null);
@@ -51,6 +57,8 @@ export const WizardProvider: React.FC<any> = ({ children }) => {
       value={{
         sourceEnvironmentId,
         targetEnvironmentId,
+        sourceEnvName,
+        targetEnvName,
         sourceClient,
         targetClient,
         sourceFile,
@@ -59,6 +67,8 @@ export const WizardProvider: React.FC<any> = ({ children }) => {
         syncModelEntities,
         setSourceEnvironmentId,
         setTargetEnvironmentId,
+        setSourceEnvName,
+        setTargetEnvName,
         setSourceClient,
         setTargetClient,
         setSourceFile,

src/components/inputs/EnvironmentInput.tsx

@@ -10,6 +10,7 @@ type EnvironmentInputProps = {
   environmentId?: string;
   apiKey?: string;
   setEnvironmentId: (id: string) => void;
+  setEnvironmentName: (name: string) => void;
   setApiKey: (key: string) => void;
 };
 

src/components/sync/SyncDiff.tsx

@@ -11,6 +11,8 @@ export const SyncDiff: React.FC = () => {
     targetApiKey,
     sourceApiKey,
     syncModelEntities,
+    sourceEnvName,
+    targetEnvName,
   } = useContext(WizardContext);
   const [loading, setLoading] = useState<boolean>();
   const [showWarning, setShowWarning] = useState<boolean>(false);
@@ -140,13 +142,20 @@ export const SyncDiff: React.FC = () => {
           type="button"
           onClick={() => setShowWarning(true)}
         >
-          Run Sync
+          Review & Sync
         </button>
       </div>
       {showWarning && (
         <div className="modal">
           <div className="modal-content">
             <h3>Confirm Sync Operation</h3>
+            <p>
+              You're about to sync the following entities from <strong>{sourceEnvName}</strong> to{" "}
+              <strong>{targetEnvName}</strong>:
+            </p>
+            <ul>
+              {syncModelEntities.map(e => <li>{e}</li>)}
+            </ul>
             <p>
               Sync operation may result in irreversible changes to the target environment. Do you want to continue?
             </p>

src/components/sync/SyncSource.tsx

@@ -10,17 +10,20 @@ import { StepNavigation } from "../menu/StepNavigation";
 export const SyncSource: React.FC = () => {
   const {
     sourceEnvironmentId,
-    setSourceEnvironmentId,
     sourceApiKey,
+    sourceEnvName,
+    setSourceEnvironmentId,
     setSourceApiKey,
+    setSourceEnvName,
     setSourceFile,
     setSourceClient,
   } = useContext(WizardContext);
   const [useModelFile, setUseModelFile] = useState<boolean>(false);
   const navigate = useNavigate();
 
-  const { projectName, environmentName, loading } = useEnvironmentData(
+  const { projectName, loading } = useEnvironmentData(
     setSourceClient,
+    setSourceEnvName,
     sourceEnvironmentId,
     sourceApiKey,
   );
@@ -37,13 +40,14 @@ export const SyncSource: React.FC = () => {
     loading,
     idLabelText,
     apiKeyLabelText,
-    environmentName,
     projectName,
+    environmentName: sourceEnvName,
     environmentId: sourceEnvironmentId,
     apiKey: sourceApiKey,
+    showApiKey: true,
     setEnvironmentId: setSourceEnvironmentId,
     setApiKey: setSourceApiKey,
-    showApiKey: true,
+    setEnvironmentName: setSourceEnvName,
   };
 
   return (

src/components/sync/SyncTarget.tsx

@@ -9,11 +9,13 @@ import { StepNavigation } from "../menu/StepNavigation";
 export const SyncTarget: React.FC = () => {
   const {
     targetEnvironmentId,
-    setTargetEnvironmentId,
     targetApiKey,
+    sourceApiKey,
+    targetEnvName,
+    setTargetEnvironmentId,
     setTargetApiKey,
     setTargetClient,
-    sourceApiKey,
+    setTargetEnvName,
   } = useContext(WizardContext);
   const [apiKeysMatch, setApiKeysMatch] = useState<boolean>(false);
   const navigate = useNavigate();
@@ -23,8 +25,9 @@ export const SyncTarget: React.FC = () => {
     setApiKeysMatch(!apiKeysMatch);
   };
 
-  const { projectName, environmentName, loading } = useEnvironmentData(
+  const { projectName, loading } = useEnvironmentData(
     setTargetClient,
+    setTargetEnvName,
     targetEnvironmentId,
     targetApiKey,
   );
@@ -41,13 +44,14 @@ export const SyncTarget: React.FC = () => {
     loading,
     idLabelText,
     apiKeyLabelText,
-    environmentName,
+    environmentName: targetEnvName,
     projectName,
     environmentId: targetEnvironmentId,
     apiKey: targetApiKey,
+    showApiKey: !apiKeysMatch,
     setEnvironmentId: setTargetEnvironmentId,
     setApiKey: setTargetApiKey,
-    showApiKey: !apiKeysMatch,
+    setEnvironmentName: setTargetEnvName,
   };
 
   return (

src/utils/client.ts

@@ -22,12 +22,12 @@ const getProjectEnvironmentClient = async (
 };
 
 export const useEnvironmentData = (
-  setSourceClient: (client: any) => void,
+  setClient: (client: any) => void,
+  setEnvName: (name: string) => void,
   environmentId?: string,
   apiKey?: string,
 ) => {
   const [projectName, setProjectName] = useState<string | undefined>();
-  const [environmentName, setEnvironmentName] = useState<string | undefined>();
   const [loading, setLoading] = useState<boolean>(false);
 
   useEffect(() => {
@@ -37,24 +37,22 @@ export const useEnvironmentData = (
         try {
           const { projectName, environmentName, client } = await getProjectEnvironmentClient(apiKey, environmentId);
           setProjectName(projectName);
-          setEnvironmentName(environmentName);
-          setSourceClient(client);
+          setEnvName(environmentName);
+          setClient(client);
         } catch (error) {
           console.error("Failed to fetch project info", error);
           setProjectName(undefined);
-          setEnvironmentName(undefined);
         } finally {
           setLoading(false);
         }
       } else {
         // Clear data if conditions are not met
         setProjectName(undefined);
-        setEnvironmentName(undefined);
       }
     };
 
     fetchEnvironmentData();
-  }, [environmentId, apiKey, setSourceClient]);
+  }, [environmentId, apiKey, setClient]);
 
-  return { projectName, environmentName, loading };
+  return { projectName, loading };
 };