#259 Add environment variable management functionality

Author: giemic8

src/main/environment/service/environment-service.ts

@@ -7,6 +7,7 @@ import { Collection } from 'shim/objects/collection';
 import { VariableMap } from 'shim/objects/variables';
 import { getSystemVariable, getSystemVariables } from './system-variable';
 import { SettingsService } from 'main/persistence/service/settings-service';
+import { EnvironmentMap } from 'shim/objects/environment';
 
 const persistenceService = PersistenceService.instance;
 const settingsService = SettingsService.instance;
@@ -60,6 +61,10 @@ export class EnvironmentService implements Initializable {
     this.currentCollection.variables = variables;
   }
 
+  public setEnvironmentVariables(environmentVariables: EnvironmentMap) {
+    this.currentCollection.environments = environmentVariables;
+  }
+
   /**
    * Loads the collection at the specified path and sets it as the current collection.
    *

src/main/event/main-event-service.ts

@@ -8,6 +8,7 @@ import { TrufosObject } from 'shim/objects';
 import { EnvironmentService } from 'main/environment/service/environment-service';
 import { VariableMap } from 'shim/objects/variables';
 import { Folder } from 'shim/objects/folder';
+import { EnvironmentMap } from 'shim/objects/environment';
 
 const persistenceService = PersistenceService.instance;
 const environmentService = EnvironmentService.instance;
@@ -113,6 +114,11 @@ export class MainEventService implements IEventService {
     await persistenceService.saveCollection(environmentService.currentCollection);
   }
 
+  async setEnvironmentVariables(environmentVariables: EnvironmentMap) {
+    environmentService.setEnvironmentVariables(environmentVariables);
+    await persistenceService.saveCollection(environmentService.currentCollection);
+  }
+
   async selectEnvironment(key: string) {
     environmentService.currentEnvironmentKey = key;
   }

src/renderer/components/shared/settings/SettingsModal.tsx

@@ -37,18 +37,19 @@ export const SettingsModal = () => {
   const [isOpen, setOpen] = useState(true);
 
   const save = async () => {
-    await actions.setCollectionVariables(variableArrayToMap(collectionVariables));
+    apply();
     await setEnvironmentVariables(environmentVariables);
     setOpen(false);
   };
 
   const apply = async () => {
-    await actions.setCollectionVariables(variableArrayToMap(v));
-    await setEnvironmentVariables(environmentVariables);
+    await actions.setCollectionVariables(variableArrayToMap(collectionVariables));
+    await actions.setEnvironmentVariables(environmentVariables);
   };
 
   const cancel = () => {
     setCollectionVariables(variableMapToArray(collectionStoreVariables));
+    setEnvironmentVariables(environmentStoreVariables);
     setOpen(false);
   };
 
@@ -77,7 +78,7 @@ export const SettingsModal = () => {
             <EnvironmentVariableTab
               environments={environmentVariables}
               onValidChange={setValid}
-              onVariablesChange={setCollectionVariables} // TODO is wrong
+              onEnvironmentChange={setEnvironmentVariables}
             />
           </TabsContent>
         </Tabs>

src/renderer/components/shared/settings/variableTabs/EnvironmentVariableTab.tsx

@@ -1,4 +1,3 @@
-import { VariableObjectWithKey } from 'shim/objects/variables';
 import { useEffect, useState } from 'react';
 import {
   Sidebar,
@@ -7,19 +6,23 @@ import {
   SidebarProvider,
 } from '@/components/ui/sidebar';
 import { EnvironmentMap } from 'shim/objects/environment';
-import { variableMapToArray } from '@/components/shared/settings/variableTabs/helper/EditVariableHelper';
+import {
+  variableArrayToMap,
+  variableMapToArray,
+} from '@/components/shared/settings/variableTabs/helper/EditVariableHelper';
 import { VariableEditor } from '@/components/shared/settings/variableTabs/table/VariableEditor';
+import { VariableObjectWithKey } from '../../../../../shim/objects/variables';
 
 export interface EnvironmentVariableEditorProps {
   environments: EnvironmentMap;
   onValidChange?: (valid: boolean) => void;
-  onVariablesChange?: (variables: VariableObjectWithKey[]) => void;
+  onEnvironmentChange?: (variables: EnvironmentMap) => void;
 }
 
 /** A component that allows adding, editing and removing variables */
 export const EnvironmentVariableTab = ({
   environments,
-  onVariablesChange,
+  onEnvironmentChange,
   onValidChange,
 }: EnvironmentVariableEditorProps) => {
   const environmentList = Object.keys(environments);
@@ -30,6 +33,29 @@ export const EnvironmentVariableTab = ({
   );
   const [selectedEnvironment, setSelectedEnvironment] = useState(environmentList[0]);
 
+  const onVariableChange = (variables: VariableObjectWithKey[]) => {
+    const selectedEnvironmentKey = selectedEnvironment as keyof EnvironmentMap;
+    const variableMap = variableArrayToMap(variables);
+    const updatedEnvironment = {
+      ...environments,
+      [selectedEnvironmentKey]: variableMap,
+    } as EnvironmentMap;
+    console.log('onVariableChange', updatedEnvironment);
+    setEditorEnvironmentVariables(variables);
+    onEnvironmentChange(updatedEnvironment);
+  };
+
+  const newEnvironment = () => {
+    console.log('newEnvironment');
+    const newEnvironmentName = (Math.random() + 1).toString(36).substring(7);
+    const updatedEnvironment = {
+      ...environments,
+      [newEnvironmentName]: {},
+    } as EnvironmentMap;
+    onEnvironmentChange(updatedEnvironment);
+    setSelectedEnvironment(newEnvironmentName);
+  };
+
   useEffect(() => {
     const selectedEnvironmentKey = selectedEnvironment as keyof EnvironmentMap;
     const selectedEnvironmentVariables = environments[selectedEnvironmentKey] ?? {};
@@ -51,12 +77,12 @@ export const EnvironmentVariableTab = ({
               {environment}
             </SidebarMenuButton>
           ))}
-          <SidebarMenuButton> + Add Environment</SidebarMenuButton>
+          <SidebarMenuButton onClick={newEnvironment}> + Add Environment</SidebarMenuButton>
         </Sidebar>
         <VariableEditor
           className={'p-4 m-1 flex-1'}
           variables={editorEnvironmentVariables}
-          onVariablesChange={onVariablesChange}
+          onVariablesChange={onVariableChange}
           onValidChange={onValidChange}
         />
       </SidebarProvider>

src/renderer/services/event/renderer-event-service.ts

@@ -52,6 +52,7 @@ export class RendererEventService implements IEventService {
   getActiveEnvironmentVariables = createEventMethod('getActiveEnvironmentVariables');
   getVariable = createEventMethod('getVariable');
   setCollectionVariables = createEventMethod('setCollectionVariables');
+  setEnvironmentVariables = createEventMethod('setEnvironmentVariables');
   saveFolder = createEventMethod('saveFolder');
   selectEnvironment = createEventMethod('selectEnvironment');
   openCollection = createEventMethod('openCollection');

src/renderer/state/interface/VariableStateAction.ts

@@ -14,4 +14,6 @@ export interface VariableStateActions {
    * @param variables The new variables to set
    */
   setCollectionVariables(variables: VariableMap): Promise<void>;
+
+  setEnvironmentVariables(environmentVariables: EnvironmentMap): Promise<void>;
 }

src/renderer/state/variableStore.ts

@@ -32,6 +32,13 @@ export const useVariableStore = create<VariableState & VariableStateActions>()(
         state.collectionVariables = variables;
       });
     },
+
+    setEnvironmentVariables: async (environmentVariables) => {
+      await eventService.setEnvironmentVariables(environmentVariables);
+      set((state) => {
+        state.environmentVariables = environmentVariables;
+      });
+    },
   }))
 );
 

src/shim/event-service.ts

@@ -4,6 +4,7 @@ import { Collection } from './objects/collection';
 import { TrufosObject } from './objects';
 import { VariableMap, VariableObject } from './objects/variables';
 import { Folder } from 'shim/objects/folder';
+import { EnvironmentMap } from './objects/environment';
 
 export interface IEventService {
   /**
@@ -71,6 +72,12 @@ export interface IEventService {
    */
   setCollectionVariables(variables: VariableMap): void;
 
+  /**
+   * Replace all existing environment variables with the given ones.
+   * @param environmentVariables
+   */
+  setEnvironmentVariables(environmentVariables: EnvironmentMap): void;
+
   /**
    * Select an environment by its key.
    * @param key The key of the environment to select.